feat(plugin-chart-echarts): Enhancements of treemap tooltip (#1103)

* fix(plugin-chart-echarts): enhancements for the treemap

* fix(plugin-chart-echarts): use '▸' to replace '/', filter empty string

plugins/plugin-chart-echarts/src/Treemap/index.ts

@@ -46,7 +46,7 @@ export default class EchartsTreemapChartPlugin extends ChartPlugin<
       metadata: new ChartMetadata({
         credits: ['https://echarts.apache.org'],
         description: 'Treemap (Apache ECharts)',
-        name: t('Treemap'),
+        name: t('Treemap v2'),
         thumbnail,
       }),
       transformProps,

plugins/plugin-chart-echarts/src/Treemap/transformProps.ts

@@ -25,14 +25,14 @@ import {
   NumberFormatter,
 } from '@superset-ui/core';
 import { groupBy, isNumber, transform } from 'lodash';
-import { CallbackDataParams } from 'echarts/types/src/util/types';
 import { TreemapSeriesNodeItemOption } from 'echarts/types/src/chart/treemap/TreemapSeries';
 import { EChartsOption, TreemapSeriesOption } from 'echarts';
 import {
   DEFAULT_FORM_DATA as DEFAULT_TREEMAP_FORM_DATA,
   EchartsTreemapChartProps,
   EchartsTreemapFormData,
   EchartsTreemapLabelType,
+  TreemapSeriesCallbackDataParams,
 } from './types';
 import { EchartsProps } from '../types';
 import { formatSeriesName } from '../utils/series';
@@ -43,7 +43,7 @@ export function formatLabel({
   labelType,
   numberFormatter,
 }: {
-  params: CallbackDataParams;
+  params: TreemapSeriesCallbackDataParams;
   labelType: EchartsTreemapLabelType;
   numberFormatter: NumberFormatter;
 }): string {
@@ -62,6 +62,27 @@ export function formatLabel({
   }
 }
 
+export function formatTooltip({
+  params,
+  numberFormatter,
+}: {
+  params: TreemapSeriesCallbackDataParams;
+  numberFormatter: NumberFormatter;
+}): string {
+  const { value, treePathInfo } = params;
+  const formattedValue = numberFormatter(value as number);
+
+  const treePath = (treePathInfo ?? [])
+    .map(pathInfo => pathInfo?.name || '')
+    .filter(path => path !== '');
+  // the 1st tree path is metric label
+  const metricLabel = treePath.shift() || '';
+
+  // groupby1/groupby2/...
+  // metric: value
+  return [`<div>${treePath.join(' ▸ ')}</div>`, `${metricLabel}: ${formattedValue}`].join('');
+}
+
 export default function transformProps(chartProps: EchartsTreemapChartProps): EchartsProps {
   const { formData, height, queriesData, width } = chartProps;
   const { data = [] } = queriesData[0];
@@ -85,7 +106,7 @@ export default function transformProps(chartProps: EchartsTreemapChartProps): Ec
 
   const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
   const numberFormatter = getNumberFormatter(numberFormat);
-  const formatter = (params: CallbackDataParams) =>
+  const formatter = (params: TreemapSeriesCallbackDataParams) =>
     formatLabel({
       params,
       numberFormatter,
@@ -218,10 +239,9 @@ export default function transformProps(chartProps: EchartsTreemapChartProps): Ec
       ...defaultTooltip,
       trigger: 'item',
       formatter: (params: any) =>
-        formatLabel({
+        formatTooltip({
           params,
           numberFormatter,
-          labelType: EchartsTreemapLabelType.KeyValue,
         }),
     },
     series,

plugins/plugin-chart-echarts/src/Treemap/types.ts

@@ -22,6 +22,7 @@ import {
   QueryFormData,
   QueryFormMetric,
 } from '@superset-ui/core';
+import { CallbackDataParams } from 'echarts/types/src/util/types';
 import { LabelPositionEnum } from '../types';
 
 export type EchartsTreemapFormData = QueryFormData & {
@@ -55,8 +56,17 @@ export const DEFAULT_FORM_DATA: Partial<EchartsTreemapFormData> = {
   labelPosition: LabelPositionEnum.InsideTopLeft,
   numberFormat: 'SMART_NUMBER',
   showLabels: true,
-  showUpperLabels: false,
+  showUpperLabels: true,
   dateFormat: 'smart_date',
   nodeClick: 'zoomToNode',
   roam: true,
 };
+
+interface TreePathInfo {
+  name: string;
+  dataIndex: number;
+  value: number | number[];
+}
+export interface TreemapSeriesCallbackDataParams extends CallbackDataParams {
+  treePathInfo?: TreePathInfo[];
+}