diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/index.ts index 56271324326d..2e3954853d1d 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/index.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/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, diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts index 335322b19bdb..3cf274470892 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts @@ -25,7 +25,6 @@ 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 { @@ -33,6 +32,7 @@ import { 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 [`
${treePath.join(' ▸ ')}
`, `${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, diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/types.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/types.ts index ba8f1da4acdb..70548b5d2aeb 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/types.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/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 = { 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[]; +}