Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(timeseries-chart): add percentage threshold input control #17758

Merged
merged 9 commits into from
Jan 12, 2022
Merged

feat(timeseries-chart): add percentage threshold input control #17758

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c281cbe
feat(timeseries-chart): add percentage threshold control for stack se…
Dec 15, 2021
21d04d6
feat: move threshold vlues to an array
Dec 15, 2021
03a668b
add tests for showValue, onlyTotal, and percentThreshold
Dec 16, 2021
6f89272
feat: add another test
Dec 16, 2021
1b3880f
revert ChartProps typesetting, fix misnamed variable on form data typ…
Dec 20, 2021
dfc2b36
fix percentage threshold push equation
Dec 20, 2021
5bc821f
fix percentage threshold push equation in tests
Dec 20, 2021
4f1f03f
change default on control to match form
Jan 11, 2022
814bff0
attempt fix form defaults import
Jan 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions ...es/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Timeseries/Stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,9 @@ export const Timeseries = ({ width, height }) => {
logAxis: boolean('Log axis', false),
yAxisFormat: 'SMART_NUMBER',
stack: boolean('Stack', false),
showValue: boolean('Show Values', false),
onlyTotal: boolean('Only Total', false),
percentageThreshold: number('Percentage Threshold', 0),
area: boolean('Area chart', false),
markerEnabled: boolean('Enable markers', false),
markerSize: number('Marker Size', 6),
Expand Down
4 changes: 4 additions & 0 deletions superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ export default function transformProps(
groupby,
showValue,
onlyTotal,
percentageThreshold,
xAxisTitle,
yAxisTitle,
xAxisTitleMargin,
Expand All @@ -130,6 +131,7 @@ export default function transformProps(

const totalStackedValues: number[] = [];
const showValueIndexes: number[] = [];
const thresholdValues: number[] = [];

rebasedData.forEach(data => {
const values = Object.keys(data).reduce((prev, curr) => {
Expand All @@ -140,6 +142,7 @@ export default function transformProps(
return prev + (value as number);
}, 0);
totalStackedValues.push(values);
thresholdValues.push((percentageThreshold / 100) * values);
corbinrobb marked this conversation as resolved.
Show resolved Hide resolved
});

if (stack) {
Expand Down Expand Up @@ -168,6 +171,7 @@ export default function transformProps(
onlyTotal,
totalStackedValues,
showValueIndexes,
thresholdValues,
richTooltip,
});
if (transformedSeries) series.push(transformedSeries);
Expand Down
10 changes: 8 additions & 2 deletions superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ export function transformSeries(
formatter?: NumberFormatter;
totalStackedValues?: number[];
showValueIndexes?: number[];
thresholdValues?: number[];
richTooltip?: boolean;
},
): SeriesOption | undefined {
Expand All @@ -100,6 +101,7 @@ export function transformSeries(
formatter,
totalStackedValues = [],
showValueIndexes = [],
thresholdValues = [],
richTooltip,
} = opts;
const contexts = seriesContexts[name || ''] || [];
Expand Down Expand Up @@ -211,8 +213,12 @@ export function transformSeries(
} = params;
const isSelectedLegend = currentSeries.legend === seriesName;
if (!formatter) return numericValue;
if (!stack || !onlyTotal || isSelectedLegend) {
return formatter(numericValue);
if (!stack || isSelectedLegend) return formatter(numericValue);
if (!onlyTotal) {
if (numericValue >= thresholdValues[dataIndex]) {
return formatter(numericValue);
}
return '';
}
if (seriesIndex === showValueIndexes[dataIndex]) {
return formatter(totalStackedValues[dataIndex]);
Expand Down
2 changes: 2 additions & 0 deletions superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ export type EchartsTimeseriesFormData = QueryFormData & {
groupby: QueryFormColumn[];
showValue: boolean;
onlyTotal: boolean;
percentThreshold: number;
} & EchartsLegendFormData &
EchartsTitleFormData;

Expand Down Expand Up @@ -117,6 +118,7 @@ export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = {
groupby: [],
showValue: false,
onlyTotal: false,
percentThreshold: 0,
...DEFAULT_TITLE_FORM_DATA,
};

Expand Down
19 changes: 19 additions & 0 deletions superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,10 +136,29 @@ const onlyTotalControl = {
},
};

const percentageThresholdControl = {
name: 'percentage_threshold',
config: {
type: 'TextControl',
label: t('Percentage threshold'),
renderTrigger: true,
isFloat: true,
default: 5,
villebro marked this conversation as resolved.
Show resolved Hide resolved
description: t(
'Minimum threshold in percentage points for showing labels.',
),
visibility: ({ controls }: ControlPanelsContainerProps) =>
Boolean(controls?.show_value?.value) &&
Boolean(controls?.stack?.value) &&
Boolean(!controls?.only_total?.value),
},
};

export const showValueSection = [
[showValueControl],
[stackControl],
[onlyTotalControl],
[percentageThresholdControl],
];

const richTooltipControl = {
Expand Down
Loading