feat(dashboard): use min&max on piecewise visualmap

merico-dev · Jun 25, 2024 · 8a3a89b · 8a3a89b
1 parent 5606968
commit 8a3a89b
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 19 deletions.
diff --git a/dashboard/src/components/plugins/common-echarts-fields/visual-map/utils.ts b/dashboard/src/components/plugins/common-echarts-fields/visual-map/utils.ts
@@ -93,9 +93,10 @@ export function getVisualMap(visualMap: VisualMap, variableValueMap: Record<stri
   const { piecewise_mode, pieces, categories, ...rest } = visualMap;
   const ret: AnyObject = {
     ...rest,
-    min: minValue,
-    max: maxValue,
   };
+  delete ret.min;
+  delete ret.max;
+
   if (piecewise_mode === 'pieces') {
     ret.pieces = pieces.map((p) => {
       const item: AnyObject = {};
@@ -106,11 +107,16 @@ export function getVisualMap(visualMap: VisualMap, variableValueMap: Record<stri
         item.color = p.color;
       }
       const lowerValue = Number(p.lower.value);
-      if (p.lower.value !== '' && Number.isFinite(lowerValue)) {
+      if (p.lower.value === '') {
+        item[p.lower.symbol] = minValue;
+      } else if (Number.isFinite(lowerValue)) {
         item[p.lower.symbol] = lowerValue;
       }
+
       const upperValue = Number(p.upper.value);
-      if (p.upper.value !== '' && Number.isFinite(upperValue)) {
+      if (p.upper.value === '') {
+        item[p.upper.symbol] = maxValue;
+      } else if (Number.isFinite(upperValue)) {
         item[p.upper.symbol] = upperValue;
       }
       return item;

diff --git a/.../plugins/common-echarts-fields/visual-map/visual-map-editor/piecewise/interval-editor.tsx b/.../plugins/common-echarts-fields/visual-map/visual-map-editor/piecewise/interval-editor.tsx
@@ -2,6 +2,7 @@ import { Button, Group, Popover, Select, Text, TextInput } from '@mantine/core';
 import { Control, Controller, UseFormReturn } from 'react-hook-form';
 import { VisualMapPartialForm } from '../types';
 import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const symbols = {
   lower: [
@@ -20,27 +21,32 @@ const symbolToBracket = {
   lt: ')',
   lte: ']',
 };
-const toIntervalValue = (v: string, sign: '' | '-') => {
-  if (v === '' || Number.isNaN(Number(v))) {
-    return sign + '∞';
+const toIntervalValue = (v: string, extremum: '') => {
+  if (v === '') {
+    return extremum;
   }
-  return sign + v;
+  if (Number.isNaN(Number(v))) {
+    return 'INVALID VALUE';
+  }
+  return v;
 };
 
 type Props = {
   form: UseFormReturn<VisualMapPartialForm>;
   index: number;
 };
 export const IntervalEditor = ({ form, index }: Props) => {
+  const { t } = useTranslation();
+
   const { control, watch } = form;
   const piece = watch(`visualMap.pieces.${index}`);
   const { lower, upper } = piece;
 
   const intervalPreview = [
     symbolToBracket[lower.symbol],
-    toIntervalValue(lower.value, '-'),
+    toIntervalValue(lower.value, t('chart.visual_map.min_value')),
     ',',
-    toIntervalValue(upper.value, ''),
+    toIntervalValue(upper.value, t('chart.visual_map.max_value')),
     symbolToBracket[upper.symbol],
   ].join('');
 
@@ -77,11 +83,10 @@ export const IntervalEditor = ({ form, index }: Props) => {
               render={({ field }) => (
                 <TextInput
                   {...field}
-                  placeholder="∞"
+                  placeholder={t('chart.visual_map.min_value')}
                   size="xs"
                   onChange={(e) => field.onChange(e.currentTarget.value)}
                   error={field.value !== '' && Number.isNaN(Number(field.value))}
-                  styles={{ input: { '&::placeholder': { fontSize: '16px' } } }}
                 />
               )}
             />
@@ -93,7 +98,7 @@ export const IntervalEditor = ({ form, index }: Props) => {
               )}
             />
             <Text color="dimmed" size="sm" sx={{ userSelect: 'none', cursor: 'default' }}>
-              value
+              {t('common.value').toLowerCase()}
             </Text>
             <Controller
               name={`visualMap.pieces.${index}.upper.symbol`}
@@ -109,10 +114,9 @@ export const IntervalEditor = ({ form, index }: Props) => {
                 <TextInput
                   {...field}
                   size="xs"
-                  placeholder="∞"
+                  placeholder={t('chart.visual_map.max_value')}
                   onChange={(e) => field.onChange(e.currentTarget.value)}
                   error={field.value !== '' && Number.isNaN(Number(field.value))}
-                  styles={{ input: { '&::placeholder': { fontSize: '16px' } } }}
                 />
               )}
             />

diff --git a/...nts/plugins/common-echarts-fields/visual-map/visual-map-editor/piecewise/piece-editor.tsx b/...nts/plugins/common-echarts-fields/visual-map/visual-map-editor/piecewise/piece-editor.tsx
@@ -14,7 +14,7 @@ export const PieceEditor = ({ form, index, remove }: Props) => {
   const { t } = useTranslation();
   return (
     <tr>
-      <td>{index.toString()}</td>
+      <td>{(index + 1).toString()}</td>
       <td>
         <IntervalEditor form={form} index={index} />
       </td>

diff --git a/...ts/plugins/common-echarts-fields/visual-map/visual-map-editor/piecewise/pieces-editor.tsx b/...ts/plugins/common-echarts-fields/visual-map/visual-map-editor/piecewise/pieces-editor.tsx
@@ -34,9 +34,9 @@ export const PiecesEditor = ({ form }: Props) => {
         <thead>
           <tr>
             <th style={{ width: '40px' }} />
-            <th>Interval</th>
-            <th>Label</th>
-            <th>Color</th>
+            <th>{t('chart.visual_map.piecewise.interval')}</th>
+            <th>{t('chart.visual_map.piecewise.piece_label')}</th>
+            <th>{t('chart.color.label')}</th>
             <th style={{ width: '40px' }} />
           </tr>
         </thead>

diff --git a/dashboard/src/i18n/en.ts b/dashboard/src/i18n/en.ts
@@ -609,6 +609,8 @@ export const en = {
             categories: 'Categories',
           },
           add_a_piece: 'Add a piece',
+          interval: 'Interval',
+          piece_label: 'Label',
         },
         bar_width: 'Bar Width',
         bar_height: 'Bar Height',

diff --git a/dashboard/src/i18n/zh.ts b/dashboard/src/i18n/zh.ts
@@ -609,6 +609,8 @@ export const zh = {
             categories: '离散数据',
           },
           add_a_piece: '加一个分段',
+          interval: '值区间',
+          piece_label: '文案',
         },
         bar_width: '长条的宽度',
         bar_height: '长条的高度',