From af58984ec7aef0658378a83140b53441c3f4c7b3 Mon Sep 17 00:00:00 2001
From: Stephen Liu <750188453@qq.com>
Date: Sat, 30 Oct 2021 00:34:58 +0800
Subject: [PATCH] feat: support sort the rich tooltip by metric desc (#1445)
* feat: support rich tooltip sort by metric
* fix: vercel ci
---
.../src/MixedTimeseries/controlPanel.tsx | 17 +-----
.../src/MixedTimeseries/transformProps.ts | 7 ++-
.../src/Timeseries/Area/controlPanel.tsx | 29 +---------
.../Regular/Scatter/controlPanel.tsx | 28 +---------
.../src/Timeseries/Regular/controlPanel.tsx | 28 +---------
.../src/Timeseries/Step/controlPanel.tsx | 29 +---------
.../src/Timeseries/controlPanel.tsx | 29 +---------
.../src/Timeseries/transformProps.ts | 7 ++-
.../plugin-chart-echarts/src/controls.tsx | 55 +++++++++++++++++--
9 files changed, 74 insertions(+), 155 deletions(-)
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
index e2ce780f3cb1..0de436613c52 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
+++ b/superset-frontend/temporary_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
- [
{t('Tooltip')}
],
- [
- {
- 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
[{t('Y Axis')}
],
[
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
index 4303199573d0..aecfd1f148d1 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
+++ b/superset-frontend/temporary_superset_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 = [`${tooltipTimeFormatter(value)}`];
const prophetValues = extractProphetValuesFromTooltipParams(prophetValue);
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
index 4abe8bbedf8b..adabeecd2e20 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
+++ b/superset-frontend/temporary_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
- [{t('Tooltip')}
],
- [
- {
- 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
[{t('Y Axis')}
],
['y_axis_format'],
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
index b66b8a477ed3..8754d3733b37 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
@@ -28,7 +28,7 @@ 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,
@@ -36,7 +36,6 @@ const {
markerSize,
minorSplitLine,
rowLimit,
- tooltipTimeFormat,
truncateYAxis,
yAxisBounds,
zoomable,
@@ -153,30 +152,7 @@ const config: ControlPanelConfig = {
},
],
// eslint-disable-next-line react/jsx-key
- [{t('Tooltip')}
],
- [
- {
- 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
[{t('Y Axis')}
],
['y_axis_format'],
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx
index cd201ad3821d..818036207f38 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx
+++ b/superset-frontend/temporary_superset_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
- [{t('Tooltip')}
],
- [
- {
- 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
[{t('Y Axis')}
],
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
index f91aa68b2158..4a713931d74c 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
+++ b/superset-frontend/temporary_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
- [{t('Tooltip')}
],
- [
- {
- 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
[{t('Y Axis')}
],
['y_axis_format'],
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx
index c497f8e759d6..68f1a3f4598c 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx
+++ b/superset-frontend/temporary_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
- [{t('Tooltip')}
],
- [
- {
- 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
[{t('Y Axis')}
],
['y_axis_format'],
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
index 1e65c47c14d1..713a487b8d40 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
+++ b/superset-frontend/temporary_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 = [`${tooltipFormatter(value)}`];
const prophetValues: Record =
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx
index 503f1c912dce..d5ce1a954eaa 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx
+++ b/superset-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[] = [
+ [{t('Tooltip')}
],
+ [richTooltipControl],
+ [tooltipSortByMetricControl],
+ [tooltipTimeFormatControl],
+];