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

* feat(timeseries-chart): add percentage threshold control for stack series labels

* feat: move threshold vlues to an array

* add tests for showValue, onlyTotal, and percentThreshold

* feat: add another test

* revert ChartProps typesetting, fix misnamed variable on form data type, and other minor changes

* fix percentage threshold push equation

* fix percentage threshold push equation in tests

* change default on control to match form

* attempt fix form defaults import

Co-authored-by: Corbin Robb <corbin@Corbins-MacBook-Pro.local>

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts

@@ -111,6 +111,7 @@ export default function transformProps(
     groupby,
     showValue,
     onlyTotal,
+    percentageThreshold,
     xAxisTitle,
     yAxisTitle,
     xAxisTitleMargin,
@@ -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) => {
@@ -140,6 +142,7 @@ export default function transformProps(
       return prev + (value as number);
     }, 0);
     totalStackedValues.push(values);
+    thresholdValues.push(((percentageThreshold || 0) / 100) * values);
   });
 
   if (stack) {
@@ -168,6 +171,7 @@ export default function transformProps(
       onlyTotal,
       totalStackedValues,
       showValueIndexes,
+      thresholdValues,
       richTooltip,
     });
     if (transformedSeries) series.push(transformedSeries);

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts

@@ -81,6 +81,7 @@ export function transformSeries(
     formatter?: NumberFormatter;
     totalStackedValues?: number[];
     showValueIndexes?: number[];
+    thresholdValues?: number[];
     richTooltip?: boolean;
   },
 ): SeriesOption | undefined {
@@ -100,6 +101,7 @@ export function transformSeries(
     formatter,
     totalStackedValues = [],
     showValueIndexes = [],
+    thresholdValues = [],
     richTooltip,
   } = opts;
   const contexts = seriesContexts[name || ''] || [];
@@ -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]);

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts

@@ -81,6 +81,7 @@ export type EchartsTimeseriesFormData = QueryFormData & {
   groupby: QueryFormColumn[];
   showValue: boolean;
   onlyTotal: boolean;
+  percentageThreshold: number;
 } & EchartsLegendFormData &
   EchartsTitleFormData;
 
@@ -117,6 +118,7 @@ export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = {
   groupby: [],
   showValue: false,
   onlyTotal: false,
+  percentageThreshold: 0,
   ...DEFAULT_TITLE_FORM_DATA,
 };
 

superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx

@@ -24,6 +24,7 @@ import {
   sharedControls,
 } from '@superset-ui/chart-controls';
 import { DEFAULT_LEGEND_FORM_DATA } from './types';
+import { DEFAULT_FORM_DATA } from './Timeseries/types';
 
 const { legendMargin, legendOrientation, legendType, showLegend } =
   DEFAULT_LEGEND_FORM_DATA;
@@ -136,10 +137,29 @@ const onlyTotalControl = {
   },
 };
 
+const percentageThresholdControl = {
+  name: 'percentage_threshold',
+  config: {
+    type: 'TextControl',
+    label: t('Percentage threshold'),
+    renderTrigger: true,
+    isFloat: true,
+    default: DEFAULT_FORM_DATA.percentageThreshold,
+    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 = {