feat: support sort the rich tooltip by metric desc (apache#1445)

* feat: support rich tooltip sort by metric * fix: vercel ci
zhaoyongjie · Nov 17, 2021 · d1fca06 · d1fca06
1 parent 3801250
commit d1fca06
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 155 deletions.
diff --git a/...superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx b/...superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
@@ -29,7 +29,7 @@ import {
 
 import { DEFAULT_FORM_DATA } from './types';
 import { EchartsTimeseriesSeriesType } from '../Timeseries/types';
-import { legendSection } from '../controls';
+import { legendSection, richTooltipSection } from '../controls';
 
 const {
   area,
@@ -325,20 +325,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Tooltip')}</h1>],
-        [
-          {
-            name: 'rich_tooltip',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Rich tooltip'),
-              renderTrigger: true,
-              default: true,
-              description: t('Shows a list of all series available at that point in time'),
-            },
-          },
-        ],
+        ...richTooltipSection,
         // eslint-disable-next-line react/jsx-key
         [<h1 className="section-header">{t('Y Axis')}</h1>],
         [

diff --git a/...uperset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/...uperset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
@@ -108,6 +108,7 @@ export default function transformProps(
     yAxisTitleSecondary,
     zoomable,
     richTooltip,
+    tooltipSortByMetric,
     xAxisLabelRotation,
     groupby,
     groupbyB,
@@ -282,7 +283,11 @@ export default function transformProps(
       trigger: richTooltip ? 'axis' : 'item',
       formatter: (params: any) => {
         const value: number = !richTooltip ? params.value : params[0].value[0];
-        const prophetValue = !richTooltip ? [params] : params;
+        const prophetValue: any[] = !richTooltip ? [params] : params;
+
+        if (richTooltip && tooltipSortByMetric) {
+          prophetValue.sort((a, b) => b.data[1] - a.data[1]);
+        }
 
         const rows: Array<string> = [`${tooltipTimeFormatter(value)}`];
         const prophetValues = extractProphetValuesFromTooltipParams(prophetValue);

diff --git a/...superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx b/...superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
@@ -32,7 +32,7 @@ import {
   EchartsTimeseriesContributionType,
   EchartsTimeseriesSeriesType,
 } from '../types';
-import { legendSection, showValueSection } from '../../controls';
+import { legendSection, richTooltipSection, showValueSection } from '../../controls';
 
 const {
   contributionMode,
@@ -43,7 +43,6 @@ const {
   opacity,
   rowLimit,
   seriesType,
-  tooltipTimeFormat,
   truncateYAxis,
   yAxisBounds,
   zoomable,
@@ -208,31 +207,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Tooltip')}</h1>],
-        [
-          {
-            name: 'rich_tooltip',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Rich tooltip'),
-              renderTrigger: true,
-              default: true,
-              description: t('Shows a list of all series available at that point in time'),
-            },
-          },
-        ],
-        [
-          {
-            name: 'tooltipTimeFormat',
-            config: {
-              ...sharedControls.x_axis_time_format,
-              label: t('Tooltip time format'),
-              default: tooltipTimeFormat,
-              clearable: false,
-            },
-          },
-        ],
+        ...richTooltipSection,
         // eslint-disable-next-line react/jsx-key
         [<h1 className="section-header">{t('Y Axis')}</h1>],
         ['y_axis_format'],

diff --git a/.../superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx b/.../superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
@@ -28,15 +28,14 @@ import {
 } from '@superset-ui/chart-controls';
 
 import { DEFAULT_FORM_DATA } from '../../types';
-import { legendSection, showValueSection } from '../../../controls';
+import { legendSection, richTooltipSection, showValueSection } from '../../../controls';
 
 const {
   logAxis,
   markerEnabled,
   markerSize,
   minorSplitLine,
   rowLimit,
-  tooltipTimeFormat,
   truncateYAxis,
   yAxisBounds,
   zoomable,
@@ -153,30 +152,7 @@ const config: ControlPanelConfig = {
           },
         ],
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Tooltip')}</h1>],
-        [
-          {
-            name: 'rich_tooltip',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Rich tooltip'),
-              renderTrigger: true,
-              default: true,
-              description: t('Shows a list of all series available at that point in time'),
-            },
-          },
-        ],
-        [
-          {
-            name: 'tooltipTimeFormat',
-            config: {
-              ...sharedControls.x_axis_time_format,
-              label: t('Tooltip time format'),
-              default: tooltipTimeFormat,
-              clearable: false,
-            },
-          },
-        ],
+        ...richTooltipSection,
         // eslint-disable-next-line react/jsx-key
         [<h1 className="section-header">{t('Y Axis')}</h1>],
         ['y_axis_format'],

diff --git a/...erset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx b/...erset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx
@@ -28,7 +28,7 @@ import {
 } from '@superset-ui/chart-controls';
 
 import { DEFAULT_FORM_DATA, EchartsTimeseriesContributionType } from '../types';
-import { legendSection, showValueSection } from '../../controls';
+import { legendSection, richTooltipSection, showValueSection } from '../../controls';
 
 const {
   contributionMode,
@@ -37,7 +37,6 @@ const {
   markerSize,
   minorSplitLine,
   rowLimit,
-  tooltipTimeFormat,
   truncateYAxis,
   yAxisBounds,
   zoomable,
@@ -169,30 +168,7 @@ const config: ControlPanelConfig = {
           },
         ],
         // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Tooltip')}</h1>],
-        [
-          {
-            name: 'rich_tooltip',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Rich tooltip'),
-              renderTrigger: true,
-              default: true,
-              description: t('Shows a list of all series available at that point in time'),
-            },
-          },
-        ],
-        [
-          {
-            name: 'tooltipTimeFormat',
-            config: {
-              ...sharedControls.x_axis_time_format,
-              label: t('Tooltip time format'),
-              default: tooltipTimeFormat,
-              clearable: false,
-            },
-          },
-        ],
+        ...richTooltipSection,
         // eslint-disable-next-line react/jsx-key
         [<h1 className="section-header">{t('Y Axis')}</h1>],
 

diff --git a/...superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx b/...superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
@@ -32,7 +32,7 @@ import {
   EchartsTimeseriesContributionType,
   EchartsTimeseriesSeriesType,
 } from '../types';
-import { legendSection, showValueSection } from '../../controls';
+import { legendSection, richTooltipSection, showValueSection } from '../../controls';
 
 const {
   area,
@@ -43,7 +43,6 @@ const {
   minorSplitLine,
   opacity,
   rowLimit,
-  tooltipTimeFormat,
   truncateYAxis,
   yAxisBounds,
   zoomable,
@@ -222,31 +221,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Tooltip')}</h1>],
-        [
-          {
-            name: 'rich_tooltip',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Rich tooltip'),
-              renderTrigger: true,
-              default: true,
-              description: t('Shows a list of all series available at that point in time'),
-            },
-          },
-        ],
-        [
-          {
-            name: 'tooltipTimeFormat',
-            config: {
-              ...sharedControls.x_axis_time_format,
-              label: t('Tooltip time format'),
-              default: tooltipTimeFormat,
-              clearable: false,
-            },
-          },
-        ],
+        ...richTooltipSection,
         // eslint-disable-next-line react/jsx-key
         [<h1 className="section-header">{t('Y Axis')}</h1>],
         ['y_axis_format'],

diff --git a/...rary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx b/...rary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx
@@ -32,7 +32,7 @@ import {
   EchartsTimeseriesContributionType,
   EchartsTimeseriesSeriesType,
 } from './types';
-import { legendSection, showValueSection } from '../controls';
+import { legendSection, richTooltipSection, showValueSection } from '../controls';
 
 const {
   area,
@@ -44,7 +44,6 @@ const {
   opacity,
   rowLimit,
   seriesType,
-  tooltipTimeFormat,
   truncateYAxis,
   yAxisBounds,
   zoomable,
@@ -225,31 +224,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        // eslint-disable-next-line react/jsx-key
-        [<h1 className="section-header">{t('Tooltip')}</h1>],
-        [
-          {
-            name: 'rich_tooltip',
-            config: {
-              type: 'CheckboxControl',
-              label: t('Rich tooltip'),
-              renderTrigger: true,
-              default: true,
-              description: t('Shows a list of all series available at that point in time'),
-            },
-          },
-        ],
-        [
-          {
-            name: 'tooltipTimeFormat',
-            config: {
-              ...sharedControls.x_axis_time_format,
-              label: t('Tooltip time format'),
-              default: tooltipTimeFormat,
-              clearable: false,
-            },
-          },
-        ],
+        ...richTooltipSection,
         // eslint-disable-next-line react/jsx-key
         [<h1 className="section-header">{t('Y Axis')}</h1>],
         ['y_axis_format'],

diff --git a/...ary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/...ary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
@@ -94,6 +94,7 @@ export default function transformProps(
     xAxisTimeFormat,
     yAxisBounds,
     tooltipTimeFormat,
+    tooltipSortByMetric,
     zoomable,
     richTooltip,
     xAxisLabelRotation,
@@ -268,7 +269,11 @@ export default function transformProps(
       trigger: richTooltip ? 'axis' : 'item',
       formatter: (params: any) => {
         const value: number = !richTooltip ? params.value : params[0].value[0];
-        const prophetValue = !richTooltip ? [params] : params;
+        const prophetValue: any[] = !richTooltip ? [params] : params;
+
+        if (richTooltip && tooltipSortByMetric) {
+          prophetValue.sort((a, b) => b.data[1] - a.data[1]);
+        }
 
         const rows: Array<string> = [`${tooltipFormatter(value)}`];
         const prophetValues: Record<string, ProphetValue> =

diff --git a/...-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx b/...-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx
@@ -1,8 +1,3 @@
-import React from 'react';
-import { t } from '@superset-ui/core';
-import { ControlPanelsContainerProps } from '@superset-ui/chart-controls';
-import { DEFAULT_LEGEND_FORM_DATA } from './types';
-
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -21,6 +16,15 @@ import { DEFAULT_LEGEND_FORM_DATA } from './types';
  * specific language governing permissions and limitations
  * under the License.
  */
+import React from 'react';
+import { t } from '@superset-ui/core';
+import {
+  ControlPanelsContainerProps,
+  ControlSetRow,
+  sharedControls,
+} from '@superset-ui/chart-controls';
+import { DEFAULT_LEGEND_FORM_DATA } from './types';
+
 const { legendMargin, legendOrientation, legendType, showLegend } = DEFAULT_LEGEND_FORM_DATA;
 
 const showLegendControl = {
@@ -132,3 +136,44 @@ const onlyTotalControl = {
 };
 
 export const showValueSection = [[showValueControl], [stackControl], [onlyTotalControl]];
+
+const richTooltipControl = {
+  name: 'rich_tooltip',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Rich tooltip'),
+    renderTrigger: true,
+    default: true,
+    description: t('Shows a list of all series available at that point in time'),
+  },
+};
+
+const tooltipTimeFormatControl = {
+  name: 'tooltipTimeFormat',
+  config: {
+    ...sharedControls.x_axis_time_format,
+    label: t('Tooltip time format'),
+    default: 'smart_date',
+    clearable: false,
+  },
+};
+
+const tooltipSortByMetricControl = {
+  name: 'tooltipSortByMetric',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Tooltip sort by metric'),
+    renderTrigger: true,
+    default: false,
+    description: t('Whether to sort tooltip by the selected metric in descending order.'),
+    visibility: ({ controls }: ControlPanelsContainerProps) =>
+      Boolean(controls?.rich_tooltip?.value),
+  },
+};
+
+export const richTooltipSection: ControlSetRow[] = [
+  [<h1 className="section-header">{t('Tooltip')}</h1>],
+  [richTooltipControl],
+  [tooltipSortByMetricControl],
+  [tooltipTimeFormatControl],
+];