From bb0264a0edf4f18af987e86df4deab240b5cae5c Mon Sep 17 00:00:00 2001
From: Leto <gerile.tu@merico.dev>
Date: Wed, 24 May 2023 16:00:22 +0800
Subject: [PATCH 1/4] feat(dashboard): add tooltip.trigger to scatter-chart

---
 .../scatter-chart/editors/tooltip/index.tsx   | 32 +++++++++++++++++--
 .../scatter-chart/editors/tooltip/metrics.tsx |  5 ++-
 .../viz-components/scatter-chart/index.tsx    | 13 ++++++--
 .../scatter-chart/option/index.ts             |  3 --
 .../scatter-chart/option/tooltip.ts           |  6 +++-
 .../viz-components/scatter-chart/type.ts      |  2 ++
 6 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/dashboard/src/plugins/viz-components/scatter-chart/editors/tooltip/index.tsx b/dashboard/src/plugins/viz-components/scatter-chart/editors/tooltip/index.tsx
index afa419a81..385813b6b 100644
--- a/dashboard/src/plugins/viz-components/scatter-chart/editors/tooltip/index.tsx
+++ b/dashboard/src/plugins/viz-components/scatter-chart/editors/tooltip/index.tsx
@@ -1,6 +1,23 @@
-import { Control, UseFormWatch } from 'react-hook-form';
+import { Control, Controller, UseFormWatch } from 'react-hook-form';
 import { IScatterChartConf } from '../../type';
 import { TooltipMetricsField } from './metrics';
+import { Divider, Select, Stack } from '@mantine/core';
+
+const TooltipTriggerOptions = [
+  {
+    label: 'item',
+    value: 'item',
+  },
+  {
+    label: 'axis',
+    value: 'axis',
+  },
+  {
+    label: 'none',
+    value: 'none',
+    disabled: true,
+  },
+];
 
 interface ITooltipField {
   control: Control<IScatterChartConf, $TSFixMe>;
@@ -8,5 +25,16 @@ interface ITooltipField {
   data: TVizData;
 }
 export function TooltipField({ data, control, watch }: ITooltipField) {
-  return <TooltipMetricsField control={control} watch={watch} data={data} />;
+  watch('tooltip.trigger');
+  return (
+    <Stack>
+      <Controller
+        name="tooltip.trigger"
+        control={control}
+        render={({ field }) => <Select label="Trigger" data={TooltipTriggerOptions} sx={{ flexGrow: 1 }} {...field} />}
+      />
+      <Divider variant="dashed" />
+      <TooltipMetricsField control={control} watch={watch} data={data} />
+    </Stack>
+  );
 }
diff --git a/dashboard/src/plugins/viz-components/scatter-chart/editors/tooltip/metrics.tsx b/dashboard/src/plugins/viz-components/scatter-chart/editors/tooltip/metrics.tsx
index a5189b086..8390f3c02 100644
--- a/dashboard/src/plugins/viz-components/scatter-chart/editors/tooltip/metrics.tsx
+++ b/dashboard/src/plugins/viz-components/scatter-chart/editors/tooltip/metrics.tsx
@@ -1,6 +1,6 @@
-import { Divider, Group, Tabs, Text } from '@mantine/core';
+import { Group, Tabs, Text } from '@mantine/core';
 import { useEffect, useState } from 'react';
-import { Control, useFieldArray, UseFormWatch } from 'react-hook-form';
+import { Control, UseFormWatch, useFieldArray } from 'react-hook-form';
 import { InfoCircle, Plus } from 'tabler-icons-react';
 import { IScatterChartConf } from '../../type';
 import { TooltipMetricField } from './metric';
@@ -48,7 +48,6 @@ export const TooltipMetricsField = ({ control, watch, data }: ITooltipMetricsFie
           Configure additional metrics to show in tooltip
         </Text>
       </Group>
-      <Divider variant="dashed" my={10} />
       <Tabs
         value={tab}
         onTabChange={(t) => setTab(t)}
diff --git a/dashboard/src/plugins/viz-components/scatter-chart/index.tsx b/dashboard/src/plugins/viz-components/scatter-chart/index.tsx
index ef717008d..153af8963 100644
--- a/dashboard/src/plugins/viz-components/scatter-chart/index.tsx
+++ b/dashboard/src/plugins/viz-components/scatter-chart/index.tsx
@@ -69,8 +69,13 @@ function v7(legacyConf: $TSFixMe): IScatterChartConf {
   };
 }
 
+function v8(legacyConf: $TSFixMe): IScatterChartConf {
+  const patch = { tooltip: { trigger: 'item' } };
+  return _.defaultsDeep({}, legacyConf, patch);
+}
+
 class VizScatterChartMigrator extends VersionBasedMigrator {
-  readonly VERSION = 7;
+  readonly VERSION = 8;
 
   configVersions(): void {
     this.version(1, (data: any) => {
@@ -109,6 +114,10 @@ class VizScatterChartMigrator extends VersionBasedMigrator {
       const { config } = data;
       return { ...data, version: 7, config: v7(config) };
     });
+    this.version(8, (data) => {
+      const { config } = data;
+      return { ...data, version: 8, config: v8(config) };
+    });
   }
 }
 
@@ -121,7 +130,7 @@ export const ScatterChartVizComponent: VizComponent = {
   configRender: VizScatterChartEditor,
   createConfig() {
     return {
-      version: 7,
+      version: 8,
       config: cloneDeep(DEFAULT_CONFIG) as IScatterChartConf,
     };
   },
diff --git a/dashboard/src/plugins/viz-components/scatter-chart/option/index.ts b/dashboard/src/plugins/viz-components/scatter-chart/option/index.ts
index 81de106f2..a18405055 100644
--- a/dashboard/src/plugins/viz-components/scatter-chart/option/index.ts
+++ b/dashboard/src/plugins/viz-components/scatter-chart/option/index.ts
@@ -12,9 +12,6 @@ import { IYAxisConf } from '../../cartesian/type';
 import { getEchartsDataZoomOption } from '../../cartesian/editors/echarts-zooming-field/get-echarts-data-zoom-option';
 
 const defaultOption = {
-  tooltip: {
-    trigger: 'axis',
-  },
   xAxis: [
     {
       type: 'category',
diff --git a/dashboard/src/plugins/viz-components/scatter-chart/option/tooltip.ts b/dashboard/src/plugins/viz-components/scatter-chart/option/tooltip.ts
index 118e149ea..f8e0d4460 100644
--- a/dashboard/src/plugins/viz-components/scatter-chart/option/tooltip.ts
+++ b/dashboard/src/plugins/viz-components/scatter-chart/option/tooltip.ts
@@ -29,9 +29,13 @@ const formatAdditionalMetric = (v: number) => {
 };
 
 export function getTooltip(conf: IScatterChartConf, labelFormatters: Record<string, (p: $TSFixMe) => string>) {
-  const { scatter } = conf;
+  const { scatter, tooltip } = conf;
+  console.log({
+    trigger: tooltip.trigger,
+  });
   return {
     confine: true,
+    trigger: tooltip.trigger,
     formatter: function (params: TopLevelFormatterParams) {
       const yLabelFormatter = labelFormatters[0] ?? labelFormatters.default;
       const arr = Array.isArray(params) ? params : [params];
diff --git a/dashboard/src/plugins/viz-components/scatter-chart/type.ts b/dashboard/src/plugins/viz-components/scatter-chart/type.ts
index 823e0b054..e5d2a9357 100644
--- a/dashboard/src/plugins/viz-components/scatter-chart/type.ts
+++ b/dashboard/src/plugins/viz-components/scatter-chart/type.ts
@@ -39,6 +39,7 @@ export interface IScatterChartConf {
     };
   };
   tooltip: {
+    trigger: 'item' | 'axis' | 'none';
     metrics: IEchartsTooltipMetric[];
   };
   reference_lines: ICartesianReferenceLine[];
@@ -89,6 +90,7 @@ export const DEFAULT_CONFIG: IScatterChartConf = {
     },
   ],
   tooltip: {
+    trigger: 'item',
     metrics: [],
   },
   reference_lines: [],

From 64b5d55da84f532c0447f20563a71dba2ea71990 Mon Sep 17 00:00:00 2001
From: Leto <gerile.tu@merico.dev>
Date: Wed, 24 May 2023 16:06:25 +0800
Subject: [PATCH 2/4] fix(dashboard): tooltip content is wrong when trigger is
 item

---
 .../scatter-chart/option/tooltip.ts           | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/dashboard/src/plugins/viz-components/scatter-chart/option/tooltip.ts b/dashboard/src/plugins/viz-components/scatter-chart/option/tooltip.ts
index f8e0d4460..11125f5b6 100644
--- a/dashboard/src/plugins/viz-components/scatter-chart/option/tooltip.ts
+++ b/dashboard/src/plugins/viz-components/scatter-chart/option/tooltip.ts
@@ -5,16 +5,28 @@ import { AnyObject } from '~/types';
 import { getEchartsXAxisLabel } from '../editors/x-axis/x-axis-label-formatter/get-echarts-x-axis-tick-label';
 import { IScatterChartConf } from '../type';
 
+function formatXAxisLabel(value: string | number, index: number, conf: IScatterChartConf) {
+  const { x_axis } = conf;
+  if (!x_axis.axisLabel.formatter.enabled) {
+    return value;
+  }
+  return getEchartsXAxisLabel(x_axis.axisLabel.formatter)(value, index);
+}
+
 function getXAxisLabel(params: AnyObject[], conf: IScatterChartConf) {
+  const { x_axis, tooltip } = conf;
+  if (tooltip.trigger === 'item') {
+    const axisValue = params[0].data[x_axis.data_key];
+    const axisIndex = 0;
+    return formatXAxisLabel(axisValue, axisIndex, conf);
+  }
+
   const basis = params.find((p) => p.axisDim === 'x' && p.axisId === 'main-x-axis');
   if (!basis) {
     return '';
   }
-  const { name, axisValue, axisIndex } = basis;
-  if (!conf.x_axis.axisLabel.formatter.enabled) {
-    return axisValue;
-  }
-  return getEchartsXAxisLabel(conf.x_axis.axisLabel.formatter)(axisValue, axisIndex);
+  const { axisValue, axisIndex } = basis;
+  return formatXAxisLabel(axisValue, axisIndex, conf);
 }
 
 const formatAdditionalMetric = (v: number) => {
@@ -30,9 +42,6 @@ const formatAdditionalMetric = (v: number) => {
 
 export function getTooltip(conf: IScatterChartConf, labelFormatters: Record<string, (p: $TSFixMe) => string>) {
   const { scatter, tooltip } = conf;
-  console.log({
-    trigger: tooltip.trigger,
-  });
   return {
     confine: true,
     trigger: tooltip.trigger,

From 99829b533e2331a8f5193cb445f33841e4de416d Mon Sep 17 00:00:00 2001
From: Leto <gerile.tu@merico.dev>
Date: Wed, 24 May 2023 16:07:44 +0800
Subject: [PATCH 3/4] chore(dashboard): change label text of tooltip trigger

---
 .../scatter-chart/editors/tooltip/index.tsx              | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/dashboard/src/plugins/viz-components/scatter-chart/editors/tooltip/index.tsx b/dashboard/src/plugins/viz-components/scatter-chart/editors/tooltip/index.tsx
index 385813b6b..12cfe79f5 100644
--- a/dashboard/src/plugins/viz-components/scatter-chart/editors/tooltip/index.tsx
+++ b/dashboard/src/plugins/viz-components/scatter-chart/editors/tooltip/index.tsx
@@ -5,18 +5,13 @@ import { Divider, Select, Stack } from '@mantine/core';
 
 const TooltipTriggerOptions = [
   {
-    label: 'item',
+    label: 'Scatter Point',
     value: 'item',
   },
   {
-    label: 'axis',
+    label: 'X Axis',
     value: 'axis',
   },
-  {
-    label: 'none',
-    value: 'none',
-    disabled: true,
-  },
 ];
 
 interface ITooltipField {

From 0709d482ef34915daa1477f4873e7bfde22dac2e Mon Sep 17 00:00:00 2001
From: Leto <gerile.tu@merico.dev>
Date: Wed, 24 May 2023 16:10:38 +0800
Subject: [PATCH 4/4] chore: publish v9.5.0

---
 api/package.json           | 2 +-
 dashboard/package.json     | 2 +-
 package.json               | 2 +-
 settings-form/package.json | 2 +-
 website/package.json       | 6 +++---
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/api/package.json b/api/package.json
index 7d483e6ac..6bcb4e2d6 100644
--- a/api/package.json
+++ b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/dashboard/package.json b/dashboard/package.json
index aca76a5b3..001ac9d32 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
diff --git a/package.json b/package.json
index c5db46db2..5f0b1a2b7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "private": true,
   "workspaces": [
     "api",
diff --git a/settings-form/package.json b/settings-form/package.json
index ad62ab45d..e7be5e05c 100644
--- a/settings-form/package.json
+++ b/settings-form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
diff --git a/website/package.json b/website/package.json
index eafe93c3f..ea0cd5767 100644
--- a/website/package.json
+++ b/website/package.json
@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@ahooksjs/use-url-state": "^3.3.11",
-    "@devtable/dashboard": "9.4.0",
-    "@devtable/settings-form": "9.4.0",
+    "@devtable/dashboard": "9.5.0",
+    "@devtable/settings-form": "9.5.0",
     "@emotion/react": "11.10.6",
     "@faker-js/faker": "7.6.0",
     "@mantine/core": "5.9.5",