962 add tooltip.trigger to scatter-chart

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "description": "",
   "main": "index.js",
   "scripts": {

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",

dashboard/src/plugins/viz-components/scatter-chart/editors/tooltip/index.tsx

@@ -1,12 +1,35 @@
-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: 'Scatter Point',
+    value: 'item',
+  },
+  {
+    label: 'X Axis',
+    value: 'axis',
+  },
+];
 
 interface ITooltipField {
   control: Control<IScatterChartConf, $TSFixMe>;
   watch: UseFormWatch<IScatterChartConf>;
   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>
+  );
 }

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)}

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

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',

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) => {
@@ -29,9 +41,10 @@ const formatAdditionalMetric = (v: number) => {
 };
 
 export function getTooltip(conf: IScatterChartConf, labelFormatters: Record<string, (p: $TSFixMe) => string>) {
-  const { scatter } = conf;
+  const { scatter, tooltip } = conf;
   return {
     confine: true,
+    trigger: tooltip.trigger,
     formatter: function (params: TopLevelFormatterParams) {
       const yLabelFormatter = labelFormatters[0] ?? labelFormatters.default;
       const arr = Array.isArray(params) ? params : [params];

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: [],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "private": true,
   "workspaces": [
     "api",

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",

website/package.json

@@ -2,16 +2,16 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "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",