Use the new custom select to render chart point modes cause the enum select

component that comes with Eui messes up with the chart dimensions
which causes the chart legends to compact

Author: GnaneshKunal

redisinsight/ui/src/packages/redistimeseries-app/src/components/Chart/ChartConfigForm.tsx

@@ -10,6 +10,22 @@ import {
 import { AxisScale, GraphMode, ChartConfigFormProps } from './interfaces'
 import { X_LABEL_MAX_LENGTH, Y_LABEL_MAX_LENGTH, TITLE_MAX_LENGTH } from './constants'
 
+const NewEnumSelect = ({selected, values, onClick}: {select: string, values: string[], onClick: (v: string) => void}) => (
+  <div className="new-button">
+      {
+        values.map(v => (
+          <div
+            title={v.charAt(0).toUpperCase() + v.slice(1)}
+            onClick={() => onClick(v)}
+            className={`button-point ${selected === v ? 'button-selected' : null}`}
+          >
+            {v}
+          </div>
+        ))
+      }
+  </div>
+)
+
 export default function ChartConfigForm(props: ChartConfigFormProps) {
   const [moreOptions, setMoreOptions] = useState(false)
 
@@ -18,12 +34,7 @@ export default function ChartConfigForm(props: ChartConfigFormProps) {
   return (
     <form className="chart-config-form">
       <div className="chart-top-form">
-        <EnumSelect
-          inputLabel="mode"
-          onChange={(e: React.ChangeEvent<{ value: unknown }>) => onChange('mode', e.target.value)}
-          value={value.mode}
-          enumType={GraphMode}
-        />
+        <NewEnumSelect values={Object.keys(GraphMode)} selected={value.mode} onClick={v => onChange('mode', v)} />
         <EuiSwitch
           compressed
           label={<span className="switch-staircase-label">Staircase</span>}

redisinsight/ui/src/packages/redistimeseries-app/src/styles/styles.less

@@ -406,3 +406,68 @@ body {
 .switch-staircase-label {
   padding-right: 10px !important;
 }
+
+
+.theme_DARK {
+    .button-point {
+        background-color: black;
+        border: 1px solid #465282;
+    }
+
+    .button-selected {
+        color: #8BA2FF;
+        background-color: #292F47;
+    }
+}
+
+.theme_LIGHT {
+    .new-button {
+        color: #343741;
+    }
+
+    .button-point {
+        border: 1px solid #243DAC;
+    }
+
+    .button-selected {
+        color: #3163D8;
+        background-color: #D7E3FA;
+    }
+}
+
+.new-button {
+    box-shadow: none!important;
+    border-radius: 2px;
+    cursor: pointer;
+    height: 32px;
+    border: 1px solid hsla(0, 0%, 100%, 0.1);
+    overflow: visible;
+    display: flex;
+
+    div {
+        font-size: 13px;
+        padding: 0px;
+        font-weight: normal;
+        height: 30px;
+        width: 68px;
+    }
+
+    div:first-child {
+        border-radius: 4px;
+        border-right: 0px;
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+    }
+
+    div:last-child {
+        border-radius: 4px;
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+    }
+
+    .button-point {
+        text-transform: capitalize;
+        text-align: center;
+        padding: 6px;
+    }
+}