feat(dashboard): add y_axis.inverse to heatmap

merico-dev · Dec 10, 2024 · 0e11316 · 0e11316
1 parent 4f0dc8d
commit 0e11316
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 3 deletions.
diff --git a/dashboard/src/components/plugins/viz-components/heatmap/editors/y-axis/index.tsx b/dashboard/src/components/plugins/viz-components/heatmap/editors/y-axis/index.tsx
@@ -1,4 +1,4 @@
-import { Divider, Group, Stack, TextInput } from '@mantine/core';
+import { Checkbox, Divider, Group, Stack, TextInput } from '@mantine/core';
 import { Control, Controller, UseFormWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { DataFieldSelector } from '~/components/panel/settings/common/data-field-selector';
@@ -37,6 +37,22 @@ export function YAxisField({ control, watch }: IYAxisField) {
           render={({ field }) => <NameTextAlignSelector sx={{ flex: 1 }} {...field} />}
         />
       </Group>
+      <Controller
+        name="y_axis.inverse"
+        control={control}
+        render={({ field }) => (
+          <Checkbox
+            checked={field.value}
+            onChange={(event) => field.onChange(event.currentTarget.checked)}
+            label={t('chart.y_axis.inverse')}
+            styles={{
+              root: {
+                transform: 'translateY(6px)',
+              },
+            }}
+          />
+        )}
+      />
       <Divider mb={-15} variant="dashed" label={t('chart.axis.tick_label')} labelPosition="center" />
       <Controller
         name="y_axis.axisLabel.overflow"

diff --git a/dashboard/src/components/plugins/viz-components/heatmap/option/y-axis.ts b/dashboard/src/components/plugins/viz-components/heatmap/option/y-axis.ts
@@ -5,7 +5,7 @@ import { FormatterFuncType } from '~/components/plugins/common-echarts-fields/x-
 import _ from 'lodash';
 
 export function getYAxis(conf: IHeatmapConf, formatterFunc: FormatterFuncType, borderWidth: number) {
-  const { nameAlignment, data_key, ...rest } = conf.y_axis;
+  const { nameAlignment, data_key, inverse, ...rest } = conf.y_axis;
 
   const { overflow, rotate } = conf.y_axis.axisLabel;
   const overflowOption = getLabelOverflowOptionOnAxis(overflow.on_axis);
@@ -45,8 +45,9 @@ export function getYAxis(conf: IHeatmapConf, formatterFunc: FormatterFuncType, b
       fontWeight: 'bold',
       align: nameAlignment,
     },
-    nameLocation: 'end',
+    nameLocation: inverse ? 'start' : 'end',
     nameGap: 15,
+    inverse,
     z: 3,
   });
 }
diff --git a/dashboard/src/components/plugins/viz-components/heatmap/type.ts b/dashboard/src/components/plugins/viz-components/heatmap/type.ts
@@ -31,6 +31,7 @@ export interface IHeatmapConf {
   };
   y_axis: {
     name: string;
+    inverse: boolean;
     data_key: TDataKey;
     nameAlignment: EChartsNameTextAlign;
     axisLabel: {
@@ -67,6 +68,7 @@ export const DEFAULT_CONFIG: IHeatmapConf = {
   },
   y_axis: {
     name: 'Y Axis',
+    inverse: false,
     data_key: '',
     nameAlignment: 'center',
     axisLabel: {

diff --git a/dashboard/src/i18n/en.ts b/dashboard/src/i18n/en.ts
@@ -854,6 +854,7 @@ export const en = {
         y_axis_name: 'Y Axis Name',
         y_axis_name_anchor: 'Name Anchor',
         y_axis_data_field: 'Y Axis Data Field',
+        inverse: 'Inverse',
         layout: 'Layout',
         position: {
           label: 'Position',

diff --git a/dashboard/src/i18n/zh.ts b/dashboard/src/i18n/zh.ts
@@ -854,6 +854,7 @@ export const zh = {
         y_axis_name: 'Y轴名称',
         y_axis_name_anchor: '名称贴靠侧',
         y_axis_data_field: 'Y轴数据字段',
+        inverse: '反向坐标轴',
         layout: '布局',
         position: {
           label: '位置',