Skip to content
This repository has been archived by the owner on Dec 10, 2021. It is now read-only.

Commit

Permalink
feat: support sort the rich tooltip by metric desc (#1445)
Browse files Browse the repository at this point in the history 
* feat: support rich tooltip sort by metric

* fix: vercel ci
  • Loading branch information
@stephenLYZ
stephenLYZ authored Oct 29, 2021
1 parent 8fcb8e9 commit 02b7963
Show file tree
Hide file tree
Showing 9 changed files with 74 additions and 155 deletions.
17 changes: 2 additions & 15 deletions plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>],
[
Expand Down
7 changes: 6 additions & 1 deletion plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ export default function transformProps(
yAxisTitleSecondary,
zoomable,
richTooltip,
tooltipSortByMetric,
xAxisLabelRotation,
groupby,
groupbyB,
Expand Down Expand Up @@ -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);
Expand Down
29 changes: 2 additions & 27 deletions plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import {
EchartsTimeseriesContributionType,
EchartsTimeseriesSeriesType,
} from '../types';
import { legendSection, showValueSection } from '../../controls';
import { legendSection, richTooltipSection, showValueSection } from '../../controls';

const {
contributionMode,
Expand All @@ -43,7 +43,6 @@ const {
opacity,
rowLimit,
seriesType,
tooltipTimeFormat,
truncateYAxis,
yAxisBounds,
zoomable,
Expand Down Expand Up @@ -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'],
Expand Down
28 changes: 2 additions & 26 deletions plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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'],
Expand Down
28 changes: 2 additions & 26 deletions plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -37,7 +37,6 @@ const {
markerSize,
minorSplitLine,
rowLimit,
tooltipTimeFormat,
truncateYAxis,
yAxisBounds,
zoomable,
Expand Down Expand Up @@ -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>],

Expand Down
29 changes: 2 additions & 27 deletions plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import {
EchartsTimeseriesContributionType,
EchartsTimeseriesSeriesType,
} from '../types';
import { legendSection, showValueSection } from '../../controls';
import { legendSection, richTooltipSection, showValueSection } from '../../controls';

const {
area,
Expand All @@ -43,7 +43,6 @@ const {
minorSplitLine,
opacity,
rowLimit,
tooltipTimeFormat,
truncateYAxis,
yAxisBounds,
zoomable,
Expand Down Expand Up @@ -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'],
Expand Down
29 changes: 2 additions & 27 deletions plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import {
EchartsTimeseriesContributionType,
EchartsTimeseriesSeriesType,
} from './types';
import { legendSection, showValueSection } from '../controls';
import { legendSection, richTooltipSection, showValueSection } from '../controls';

const {
area,
Expand All @@ -44,7 +44,6 @@ const {
opacity,
rowLimit,
seriesType,
tooltipTimeFormat,
truncateYAxis,
yAxisBounds,
zoomable,
Expand Down Expand Up @@ -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'],
Expand Down
7 changes: 6 additions & 1 deletion plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ export default function transformProps(
xAxisTimeFormat,
yAxisBounds,
tooltipTimeFormat,
tooltipSortByMetric,
zoomable,
richTooltip,
xAxisLabelRotation,
Expand Down Expand Up @@ -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> =
Expand Down
55 changes: 50 additions & 5 deletions plugins/plugin-chart-echarts/src/controls.tsx
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 = {
Expand Down Expand Up @@ -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],
];

1 comment on commit 02b7963

@vercel
Copy link

@vercel vercel bot commented on 02b7963 Oct 29, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.