feat(plugin-chart-echarts): Treemap improvements (apache#1125)

* fix(plugin-chart-echarts): wip treemap improvements * fix(plugin-chart-echarts): show % of parent on the tooltip * fix(plugin-chart-echarts): remove some unuse code * fix(plugin-chart-echarts): fix order by clause * fix(plugin-chart-echarts): change metrics to metric * fix(plugin-chart-echarts): ci
zhaoyongjie · Nov 25, 2021 · 4791bf9 · 4791bf9
1 parent c08eef6
commit 4791bf9
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 49 deletions.
diff --git a/.../temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/buildQuery.ts b/.../temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/buildQuery.ts
@@ -19,9 +19,12 @@
 import { buildQueryContext, QueryFormData } from '@superset-ui/core';
 
 export default function buildQuery(formData: QueryFormData) {
+  const { metric, sort_by_metric } = formData;
+
   return buildQueryContext(formData, baseQueryObject => [
     {
       ...baseQueryObject,
+      ...(sort_by_metric && { orderby: [[metric, false]] }),
     },
   ]);
 }
diff --git a/...mporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx b/...mporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
@@ -26,16 +26,8 @@ import {
   sections,
 } from '@superset-ui/chart-controls';
 import { DEFAULT_FORM_DATA } from './types';
-import { LABEL_POSITION } from '../constants';
 
-const {
-  labelType,
-  labelPosition,
-  numberFormat,
-  showLabels,
-  showUpperLabels,
-  dateFormat,
-} = DEFAULT_FORM_DATA;
+const { labelType, numberFormat, showLabels, showUpperLabels, dateFormat } = DEFAULT_FORM_DATA;
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
@@ -45,17 +37,15 @@ const config: ControlPanelConfig = {
       expanded: true,
       controlSetRows: [
         ['groupby'],
-        ['metrics'],
+        ['metric'],
         ['row_limit'],
-        ['timeseries_limit_metric'],
         [
           {
-            name: 'order_desc',
+            name: 'sort_by_metric',
             config: {
               type: 'CheckboxControl',
-              label: t('Sort Descending'),
-              default: true,
-              description: t('Whether to sort descending or ascending'),
+              label: t('Sort by metric'),
+              description: t('Whether to sort results by the selected metric in descending order.'),
             },
           },
         ],
@@ -109,20 +99,6 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        [
-          {
-            name: 'label_position',
-            config: {
-              type: 'SelectControl',
-              freeForm: false,
-              label: t('Label position'),
-              renderTrigger: true,
-              choices: LABEL_POSITION,
-              default: labelPosition,
-              description: D3_FORMAT_DOCS,
-            },
-          },
-        ],
         [
           {
             name: 'number_format',

diff --git a/...porary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts b/...porary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts
@@ -22,6 +22,7 @@ import {
   getMetricLabel,
   getNumberFormatter,
   getTimeFormatter,
+  NumberFormats,
   NumberFormatter,
 } from '@superset-ui/core';
 import { groupBy, isNumber, transform } from 'lodash';
@@ -35,7 +36,7 @@ import {
   TreemapSeriesCallbackDataParams,
 } from './types';
 import { EchartsProps } from '../types';
-import { formatSeriesName } from '../utils/series';
+import { formatSeriesName, getColtypesMapping } from '../utils/series';
 import { defaultTooltip } from '../defaults';
 
 export function formatLabel({
@@ -69,8 +70,20 @@ export function formatTooltip({
   params: TreemapSeriesCallbackDataParams;
   numberFormatter: NumberFormatter;
 }): string {
-  const { value, treePathInfo } = params;
+  const { value, treePathInfo = [] } = params;
   const formattedValue = numberFormatter(value as number);
+  const percentFormatter = getNumberFormatter(NumberFormats.PERCENT_2_POINT);
+
+  let formattedPercent = '';
+  // the last item is current node, here we should find the parent node
+  const currentNode = treePathInfo[treePathInfo.length - 1];
+  const parentNode = treePathInfo[treePathInfo.length - 2];
+  if (parentNode) {
+    const percent: number = parentNode.value
+      ? (currentNode.value as number) / (parentNode.value as number)
+      : 0;
+    formattedPercent = percentFormatter(percent);
+  }
 
   const treePath = (treePathInfo ?? [])
     .map(pathInfo => pathInfo?.name || '')
@@ -79,18 +92,23 @@ export function formatTooltip({
   const metricLabel = treePath.shift() || '';
 
   // groupby1/groupby2/...
-  // metric: value
-  return [`<div>${treePath.join(' ▸ ')}</div>`, `${metricLabel}: ${formattedValue}`].join('');
+  // metric: value (percent of parent)
+  return [
+    `<div>${treePath.join(' ▸ ')}</div>`,
+    `${metricLabel}: ${formattedValue}`,
+    formattedPercent ? ` (${formattedPercent})` : '',
+  ].join('');
 }
 
 export default function transformProps(chartProps: EchartsTreemapChartProps): EchartsProps {
   const { formData, height, queriesData, width } = chartProps;
   const { data = [] } = queriesData[0];
+  const coltypeMapping = getColtypesMapping(queriesData[0]);
 
   const {
     colorScheme,
     groupby = [],
-    metrics = [],
+    metric = '',
     labelType,
     labelPosition,
     numberFormat,
@@ -128,6 +146,7 @@ export default function transformProps(chartProps: EchartsTreemapChartProps): Ec
             const name = formatSeriesName(key, {
               numberFormatter,
               timeFormatter: getTimeFormatter(dateFormat),
+              ...(coltypeMapping[currGroupby] && { coltype: coltypeMapping[currGroupby] }),
             });
             result.push({
               name,
@@ -144,6 +163,7 @@ export default function transformProps(chartProps: EchartsTreemapChartProps): Ec
         const name = formatSeriesName(key, {
           numberFormatter,
           timeFormatter: getTimeFormatter(dateFormat),
+          ...(coltypeMapping[currGroupby] && { coltype: coltypeMapping[currGroupby] }),
         });
         const children = transformer(value, restGroupby, metric, depth + 1);
         result.push({
@@ -160,27 +180,31 @@ export default function transformProps(chartProps: EchartsTreemapChartProps): Ec
       ...child,
       colorSaturation: [0.4, 0.7],
       itemStyle: {
-        borderColor: showUpperLabels ? colorFn(`${child.name}_${depth - 1}`) : '#fff',
-        color: colorFn(`${child.name}_${depth}_${showUpperLabels}`),
+        borderColor: '#fff',
+        color: colorFn(`${child.name}_${depth}`),
         borderWidth: 2,
         gapWidth: 2,
       },
     }));
   };
 
-  const metricsLabel = metrics.map(metric => getMetricLabel(metric));
-
+  const metricLabel = getMetricLabel(metric);
   const initialDepth = 1;
-  const transformedData: TreemapSeriesNodeItemOption[] = metricsLabel.map(metricLabel => ({
-    name: metricLabel,
-    colorSaturation: [0.4, 0.7],
-    itemStyle: {
-      borderColor: showUpperLabels ? colorFn(`${metricLabel}_${initialDepth}`) : '#fff',
-      borderWidth: 2,
-      gapWidth: 2,
+  const transformedData: TreemapSeriesNodeItemOption[] = [
+    {
+      name: metricLabel,
+      colorSaturation: [0.4, 0.7],
+      itemStyle: {
+        borderColor: '#fff',
+        borderWidth: 2,
+        gapWidth: 2,
+      },
+      upperLabel: {
+        show: false,
+      },
+      children: transformer(data, groupby, metricLabel, initialDepth),
     },
-    children: transformer(data, groupby, metricLabel, initialDepth),
-  }));
+  ];
 
   // set a default color when metric values are 0 over all.
   const levels = [

diff --git a/...ntend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/types.ts b/...ntend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/types.ts
@@ -28,7 +28,7 @@ import { LabelPositionEnum } from '../types';
 export type EchartsTreemapFormData = QueryFormData & {
   colorScheme?: string;
   groupby: string[];
-  metric?: QueryFormMetric[];
+  metric?: QueryFormMetric;
   labelType: EchartsTreemapLabelType;
   labelPosition: LabelPositionEnum;
   showLabels: boolean;

diff --git a/..._superset_ui/superset-ui/plugins/plugin-chart-echarts/test/Treemap/transformProps.test.ts b/..._superset_ui/superset-ui/plugins/plugin-chart-echarts/test/Treemap/transformProps.test.ts
@@ -24,7 +24,7 @@ describe('Treemap tranformProps', () => {
     colorScheme: 'bnbColors',
     datasource: '3__table',
     granularity_sqla: 'ds',
-    metrics: ['sum__num'],
+    metric: 'sum__num',
     groupby: ['foo', 'bar'],
   };
   const chartProps = new ChartProps({