1335 enable tooltipmetrics on cartesian chart

api/package.json

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

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "11.5.3",
+  "version": "11.6.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
@@ -42,7 +42,7 @@
     "popmotion": "^11.0.3",
     "rc-select": "14.1.0",
     "rc-tree-select": "5.5.5",
-    "reactflow": "^11.5.3",
+    "reactflow": "^11.6.0",
     "uuid": "9.0.1"
   },
   "devDependencies": {

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

@@ -0,0 +1,16 @@
+import { Stack } from '@mantine/core';
+import { Control, UseFormWatch } from 'react-hook-form';
+import { ICartesianChartConf } from '../../type';
+import { TooltipMetricsField } from './metrics';
+
+interface ITooltipField {
+  control: Control<ICartesianChartConf, $TSFixMe>;
+  watch: UseFormWatch<ICartesianChartConf>;
+}
+export function TooltipField({ control, watch }: ITooltipField) {
+  return (
+    <Stack>
+      <TooltipMetricsField control={control} watch={watch} />
+    </Stack>
+  );
+}

dashboard/src/components/plugins/viz-components/cartesian/editors/tooltip/metric.tsx

@@ -0,0 +1,40 @@
+import { Button, Divider, Group, Stack, TextInput } from '@mantine/core';
+import { Control, Controller } from 'react-hook-form';
+import { Trash } from 'tabler-icons-react';
+import { DataFieldSelector } from '~/components/panel/settings/common/data-field-selector';
+import { ICartesianChartConf } from '../../type';
+
+interface ITooltipMetricField {
+  control: Control<ICartesianChartConf, $TSFixMe>;
+  index: number;
+  remove: (index: number) => void;
+}
+
+export const TooltipMetricField = ({ control, index, remove }: ITooltipMetricField) => {
+  return (
+    <Stack>
+      <Group grow noWrap>
+        <Controller
+          name={`tooltip.metrics.${index}.name`}
+          control={control}
+          render={({ field }) => <TextInput label="Name" required sx={{ flex: 1 }} {...field} />}
+        />
+        <Controller
+          name={`tooltip.metrics.${index}.data_key`}
+          control={control}
+          render={({ field }) => <DataFieldSelector label="Value Field" required sx={{ flex: 1 }} {...field} />}
+        />
+      </Group>
+      <Divider mb={-10} mt={10} variant="dashed" />
+      <Button
+        leftIcon={<Trash size={16} />}
+        color="red"
+        variant="light"
+        onClick={() => remove(index)}
+        sx={{ top: 15, right: 5 }}
+      >
+        Delete this Metric
+      </Button>
+    </Stack>
+  );
+};

dashboard/src/components/plugins/viz-components/cartesian/editors/tooltip/metrics.tsx

@@ -0,0 +1,82 @@
+import { Group, Tabs, Text } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { Control, UseFormWatch, useFieldArray } from 'react-hook-form';
+import { InfoCircle, Plus } from 'tabler-icons-react';
+import { ICartesianChartConf } from '../../type';
+import { TooltipMetricField } from './metric';
+
+interface ITooltipMetricsField {
+  control: Control<ICartesianChartConf, $TSFixMe>;
+  watch: UseFormWatch<ICartesianChartConf>;
+}
+
+export const TooltipMetricsField = ({ control, watch }: ITooltipMetricsField) => {
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'tooltip.metrics',
+  });
+
+  const watchFieldArray = watch('tooltip.metrics');
+  const controlledFields = fields.map((field, index) => {
+    return {
+      ...field,
+      ...watchFieldArray[index],
+    };
+  });
+
+  const addMetric = () =>
+    append({
+      id: Date.now().toString(),
+      data_key: '',
+      name: '',
+    });
+
+  const firstID = watch('tooltip.metrics.0.id');
+  const [tab, setTab] = useState<string | null>(() => firstID ?? null);
+  useEffect(() => {
+    if (firstID) {
+      setTab((t) => (t !== null ? t : firstID));
+    }
+  }, [firstID]);
+
+  return (
+    <>
+      <Group spacing={2} sx={{ cursor: 'default', userSelect: 'none' }}>
+        <InfoCircle size={14} color="#888" />
+        <Text size={14} color="#888">
+          Configure additional metrics to show in tooltip
+        </Text>
+      </Group>
+      <Tabs
+        value={tab}
+        onTabChange={(t) => setTab(t)}
+        styles={{
+          tab: {
+            paddingTop: '0px',
+            paddingBottom: '0px',
+          },
+          panel: {
+            padding: '0px',
+            paddingTop: '6px',
+          },
+        }}
+      >
+        <Tabs.List>
+          {controlledFields.map((m, i) => (
+            <Tabs.Tab key={m.id} value={m.id}>
+              {m.name ? m.name : i}
+            </Tabs.Tab>
+          ))}
+          <Tabs.Tab onClick={addMetric} value="add">
+            <Plus size={18} color="#228be6" />
+          </Tabs.Tab>
+        </Tabs.List>
+        {controlledFields.map((m, index) => (
+          <Tabs.Panel key={m.id} value={m.id}>
+            <TooltipMetricField key={m.id} control={control} index={index} remove={remove} />
+          </Tabs.Panel>
+        ))}
+      </Tabs>
+    </>
+  );
+};

dashboard/src/components/plugins/viz-components/cartesian/index.tsx

@@ -144,8 +144,15 @@ export class VizCartesianMigrator extends VersionBasedMigrator {
         config: Migrators.v18(data.config, env),
       };
     });
+    this.version(19, (data) => {
+      return {
+        ...data,
+        version: 19,
+        config: Migrators.v19(data.config),
+      };
+    });
   }
-  readonly VERSION = 18;
+  readonly VERSION = 19;
 }
 
 export const CartesianVizComponent: VizComponent = {
@@ -157,7 +164,7 @@ export const CartesianVizComponent: VizComponent = {
   configRender: VizCartesianEditor,
   createConfig() {
     return {
-      version: 18,
+      version: 19,
       config: cloneDeep(DEFAULT_CONFIG) as ICartesianChartConf,
     };
   },

dashboard/src/components/plugins/viz-components/cartesian/migrators/index.ts

@@ -285,3 +285,10 @@ export function v18(legacyConf: any, { panelModel }: IMigrationEnv): ICartesianC
     throw error;
   }
 }
+export function v19(legacyConf: any): ICartesianChartConf {
+  const { tooltip = { metrics: [] }, ...rest } = legacyConf;
+  return {
+    ...legacyConf,
+    tooltip,
+  };
+}

dashboard/src/components/plugins/viz-components/cartesian/option/index.ts

@@ -47,7 +47,7 @@ export function getOption(conf: ICartesianChartConf, data: TPanelData, variables
     xAxis: getXAxes(conf, xAxisData),
     yAxis: getYAxes(conf, labelFormatters, series),
     series: [...series, ...regressionSeries],
-    tooltip: getTooltip(conf, series, labelFormatters),
+    tooltip: getTooltip(conf, data, series, labelFormatters),
     grid: getGrid(conf),
     legend: getLegend(series),
     dataZoom: getEchartsDataZoomOption(conf.dataZoom),

dashboard/src/components/plugins/viz-components/cartesian/option/tooltip.ts

@@ -5,6 +5,8 @@ import { getEchartsXAxisLabel } from '../editors/x-axis/x-axis-label-formatter/g
 import { ICartesianChartConf } from '../type';
 import { IEchartsSeriesItem } from './utils/types';
 import { defaultEchartsOptions } from '~/styles/default-echarts-options';
+import { extractData, formatNumber, readColumnIgnoringQuery } from '~/utils';
+import _ from 'lodash';
 
 function getXAxisLabel(params: AnyObject[], conf: ICartesianChartConf) {
   const basis = params.find((p) => p.axisDim === 'x' && p.axisId === 'main-x-axis');
@@ -15,8 +17,18 @@ function getXAxisLabel(params: AnyObject[], conf: ICartesianChartConf) {
   return getEchartsXAxisLabel(conf.x_axis.axisLabel.formatter)(axisValue, axisIndex);
 }
 
+const formatAdditionalMetric = (v: number) => {
+  return formatNumber(v, {
+    output: 'number',
+    trimMantissa: true,
+    mantissa: 2,
+    absolute: false,
+  });
+};
+
 export function getTooltip(
   conf: ICartesianChartConf,
+  data: TPanelData,
   series: IEchartsSeriesItem[],
   labelFormatters: Record<string, (p: $TSFixMe) => string>,
 ) {
@@ -51,6 +63,23 @@ export function getTooltip(
         `;
       });
 
+      const additionalMetrics = conf.tooltip.metrics.map((m) => {
+        const metricData = extractData(data, m.data_key);
+        const metricValues = _.uniq(
+          arr.map(({ dataIndex }) => {
+            return metricData[dataIndex];
+          }),
+        );
+        return `<tr>
+        <td />
+        <th style="text-align: right; padding: 0 1em;">${m.name}</th>
+        ${metricValues.map((v) => {
+          return `<td style="text-align: left; padding: 0 1em;">${formatAdditionalMetric(v)}</td>`;
+        })}
+        </tr>`;
+      });
+      lines.push(...additionalMetrics);
+
       const xAxisLabelStyle = getLabelOverflowStyleInTooltip(conf.x_axis.axisLabel.overflow.in_tooltip);
       const xAxisLabel = getXAxisLabel(arr, conf);
       return `

dashboard/src/components/plugins/viz-components/cartesian/type.ts

@@ -7,6 +7,7 @@ import { AggregationType, defaultNumberFormat, TNumberFormat } from '~/utils';
 import { DEFAULT_DATA_ZOOM_CONFIG, TEchartsDataZoomConfig } from './editors/echarts-zooming-field/types';
 import { TScatterSize } from './editors/scatter-size-select/types';
 import { DEFAULT_X_AXIS_LABEL_FORMATTER, IXAxisLabelFormatter } from './editors/x-axis/x-axis-label-formatter/types';
+import { IEchartsTooltipMetric } from '../../common-echarts-fields/tooltip-metric';
 
 export interface ICartesianChartSeriesItem {
   type: 'line' | 'bar' | 'scatter';
@@ -97,6 +98,9 @@ export interface ICartesianChartConf {
       bottom: string;
     };
   };
+  tooltip: {
+    metrics: IEchartsTooltipMetric[];
+  };
   reference_lines: ICartesianReferenceLine[];
   reference_areas: ICartesianReferenceArea[];
   dataZoom: TEchartsDataZoomConfig;
@@ -114,6 +118,7 @@ export const DEFAULT_CONFIG: ICartesianChartConf = {
       overflow: getDefaultAxisLabelOverflow(),
     },
   },
+  tooltip: { metrics: [] },
   x_axis_data_key: '',
   x_axis_name: '',
   y_axes: [

dashboard/src/components/plugins/viz-components/cartesian/viz-cartesian-editor.tsx

@@ -15,6 +15,7 @@ import { StatsField } from './editors/stats';
 import { XAxisField } from './editors/x-axis';
 import { YAxesField } from './editors/y-axes';
 import { DEFAULT_CONFIG, ICartesianChartConf } from './type';
+import { TooltipField } from './editors/tooltip';
 
 export function VizCartesianEditor({ context }: VizConfigProps) {
   const { value: confValue, set: setConf } = useStorageData<ICartesianChartConf>(context.instanceData, 'config');
@@ -60,6 +61,7 @@ export function VizCartesianEditor({ context }: VizConfigProps) {
             <Tabs.Tab value="Y Axes">Y Axes</Tabs.Tab>
             <Tabs.Tab value="Series">Series</Tabs.Tab>
             <Tabs.Tab value="Regression Lines">Regression Lines</Tabs.Tab>
+            <Tabs.Tab value="Tooltip">Tooltip</Tabs.Tab>
             <Tabs.Tab value="Stats">Stats</Tabs.Tab>
             <Tabs.Tab value="Reference Lines">Reference Lines</Tabs.Tab>
             <Tabs.Tab value="Reference Areas">Reference Areas</Tabs.Tab>
@@ -82,6 +84,10 @@ export function VizCartesianEditor({ context }: VizConfigProps) {
             <RegressionsField control={control} watch={watch} />
           </Tabs.Panel>
 
+          <Tabs.Panel value="Tooltip">
+            <TooltipField control={control} watch={watch} />
+          </Tabs.Panel>
+
           <Tabs.Panel value="Stats">
             <StatsField control={control} watch={watch} />
           </Tabs.Panel>

dashboard/src/components/plugins/viz-components/scatter-chart/viz-scatter-chart-editor.tsx

@@ -8,7 +8,6 @@ import { useStorageData } from '~/components/plugins/hooks';
 import { VizConfigProps } from '~/types/plugin';
 import { EchartsZoomingField } from '../cartesian/editors/echarts-zooming-field';
 import { ReferenceAreasField } from './editors/reference-areas';
-// import { ReferenceAreasField } from './panel/reference-areas';
 import { ReferenceLinesField } from './editors/reference-lines';
 import { ScatterField } from './editors/scatter';
 import { StatsField } from './editors/stats';

package.json

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

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "11.5.3",
+  "version": "11.6.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

website/package.json

@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "11.5.3",
+  "version": "11.6.1",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"