feat: adding truncate metric control on timeseries charts (#20373)

superset-frontend/packages/superset-ui-chart-controls/src/operators/renameOperator.ts

@@ -32,12 +32,13 @@ export const renameOperator: PostProcessingFactory<PostProcessingRename> = (
 ) => {
   const metrics = ensureIsArray(queryObject.metrics);
   const columns = ensureIsArray(queryObject.columns);
-  const { x_axis: xAxis } = formData;
+  const { x_axis: xAxis, truncate_metric } = formData;
   // remove or rename top level of column name(metric name) in the MultiIndex when
   // 1) only 1 metric
   // 2) exist dimentsion
   // 3) exist xAxis
   // 4) exist time comparison, and comparison type is "actual values"
+  // 5) truncate_metric in form_data and truncate_metric is true
   if (
     metrics.length === 1 &&
     columns.length > 0 &&
@@ -52,7 +53,9 @@ export const renameOperator: PostProcessingFactory<PostProcessingRename> = (
           ComparisionType.Percentage,
         ].includes(formData.comparison_type)
       )
-    )
+    ) &&
+    truncate_metric !== undefined &&
+    !!truncate_metric
   ) {
     const renamePairs: [string, string | null][] = [];
 

superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx

@@ -533,6 +533,13 @@ const color_scheme: SharedControlConfig<'ColorSchemeControl'> = {
   }),
 };
 
+const truncate_metric: SharedControlConfig<'CheckboxControl'> = {
+  type: 'CheckboxControl',
+  label: t('Truncate Metric'),
+  default: true,
+  description: t('Whether to truncate metrics'),
+};
+
 const enableExploreDnd = isFeatureEnabled(
   FeatureFlag.ENABLE_EXPLORE_DRAG_AND_DROP,
 );
@@ -571,6 +578,7 @@ const sharedControls = {
   series_limit,
   series_limit_metric: enableExploreDnd ? dnd_sort_by : sort_by,
   legacy_order_by: enableExploreDnd ? dnd_sort_by : sort_by,
+  truncate_metric,
 };
 
 export { sharedControls, dndEntity, dndColumnsControl };

superset-frontend/packages/superset-ui-chart-controls/test/operators/renameOperator.test.ts

@@ -27,6 +27,7 @@ const formData: SqlaFormData = {
   granularity: 'month',
   datasource: 'foo',
   viz_type: 'table',
+  truncate_metric: true,
 };
 const queryObject: QueryObject = {
   is_timeseries: true,
@@ -144,3 +145,24 @@ test('should add renameOperator if exist "actual value" time comparison', () =>
     },
   });
 });
+
+test('should remove renameOperator', () => {
+  expect(
+    renameOperator(
+      {
+        ...formData,
+        truncate_metric: false,
+      },
+      queryObject,
+    ),
+  ).toEqual(undefined);
+  expect(
+    renameOperator(
+      {
+        ...formData,
+        truncate_metric: undefined,
+      },
+      queryObject,
+    ),
+  ).toEqual(undefined);
+});

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx

@@ -123,6 +123,15 @@ function createQuerySection(
           },
         },
       ],
+      [
+        {
+          name: `truncate_metric${controlSuffix}`,
+          config: {
+            ...sharedControls.truncate_metric,
+            default: sharedControls.truncate_metric.default,
+          },
+        },
+      ],
     ],
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx

@@ -87,6 +87,7 @@ const config: ControlPanelConfig = {
         ['timeseries_limit_metric'],
         ['order_desc'],
         ['row_limit'],
+        ['truncate_metric'],
       ],
     },
     sections.advancedAnalyticsControls,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx

@@ -296,6 +296,7 @@ const config: ControlPanelConfig = {
         ['timeseries_limit_metric'],
         ['order_desc'],
         ['row_limit'],
+        ['truncate_metric'],
       ],
     },
     sections.advancedAnalyticsControls,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx

@@ -62,6 +62,7 @@ const config: ControlPanelConfig = {
         ['timeseries_limit_metric'],
         ['order_desc'],
         ['row_limit'],
+        ['truncate_metric'],
       ],
     },
     sections.advancedAnalyticsControls,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx

@@ -79,6 +79,7 @@ const config: ControlPanelConfig = {
         ['timeseries_limit_metric'],
         ['order_desc'],
         ['row_limit'],
+        ['truncate_metric'],
       ],
     },
     sections.advancedAnalyticsControls,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx

@@ -85,6 +85,7 @@ const config: ControlPanelConfig = {
         ['timeseries_limit_metric'],
         ['order_desc'],
         ['row_limit'],
+        ['truncate_metric'],
       ],
     },
     sections.advancedAnalyticsControls,

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx

@@ -86,6 +86,7 @@ const config: ControlPanelConfig = {
         ['timeseries_limit_metric'],
         ['order_desc'],
         ['row_limit'],
+        ['truncate_metric'],
       ],
     },
     sections.advancedAnalyticsControls,

superset-frontend/plugins/plugin-chart-echarts/test/MixedTimeseries/buildQuery.test.ts

@@ -47,6 +47,7 @@ const formDataMixedChart = {
   timeseries_limit_metric: 'count',
   order_desc: true,
   emit_filter: true,
+  truncate_metric: true,
   //   -- query b
   groupby_b: [],
   metrics_b: ['count'],
@@ -62,6 +63,7 @@ const formDataMixedChart = {
   timeseries_limit_metric_b: undefined,
   order_desc_b: false,
   emit_filter_b: undefined,
+  truncate_metric_b: true,
   // chart configs
   show_value: false,
   show_valueB: undefined,