Merge pull request #2461 from RedisInsight/bugfix-RI-4792

RI-4792: Fix redistimeseries graphic legend overlapping

Author: mariasergeenko

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;
+    }
+}