feat(chart): add toggle for percentage metric calculation mode in Table chart (#33656)

superset-frontend/plugins/plugin-chart-table/src/buildQuery.ts

@@ -84,7 +84,7 @@ const buildQuery: BuildQuery<TableChartFormData> = (
   return buildQueryContext(formDataCopy, baseQueryObject => {
     let { metrics, orderby = [], columns = [] } = baseQueryObject;
     const { extras = {} } = baseQueryObject;
-    let postProcessing: PostProcessingRule[] = [];
+    const postProcessing: PostProcessingRule[] = [];
     const nonCustomNorInheritShifts = ensureIsArray(
       formData.time_compare,
     ).filter((shift: string) => shift !== 'custom' && shift !== 'inherit');
@@ -129,6 +129,12 @@ const buildQuery: BuildQuery<TableChartFormData> = (
         orderby = [[metrics[0], false]];
       }
       // add postprocessing for percent metrics only when in aggregation mode
+      type PercentMetricCalculationMode = 'row_limit' | 'all_records';
+
+      const calculationMode: PercentMetricCalculationMode =
+        (formData.percent_metric_calculation as PercentMetricCalculationMode) ||
+        'row_limit';
+
       if (percentMetrics && percentMetrics.length > 0) {
         const percentMetricsLabelsWithTimeComparison = isTimeComparison(
           formData,
@@ -139,6 +145,7 @@ const buildQuery: BuildQuery<TableChartFormData> = (
               timeOffsets,
             )
           : percentMetrics.map(getMetricLabel);
+
         const percentMetricLabels = removeDuplicates(
           percentMetricsLabelsWithTimeComparison,
         );
@@ -146,16 +153,26 @@ const buildQuery: BuildQuery<TableChartFormData> = (
           metrics.concat(percentMetrics),
           getMetricLabel,
         );
-        postProcessing = [
-          {
+
+        if (calculationMode === 'all_records') {
+          postProcessing.push({
             operation: 'contribution',
             options: {
               columns: percentMetricLabels,
-              rename_columns: percentMetricLabels.map(x => `%${x}`),
+              rename_columns: percentMetricLabels.map(m => `%${m}`),
             },
-          },
-        ];
+          });
+        } else {
+          postProcessing.push({
+            operation: 'contribution',
+            options: {
+              columns: percentMetricLabels,
+              rename_columns: percentMetricLabels.map(m => `%${m}`),
+            },
+          });
+        }
       }
+
       // Add the operator for the time comparison if some is selected
       if (!isEmpty(timeOffsets)) {
         postProcessing.push(timeCompareOperator(formData, baseQueryObject));
@@ -252,6 +269,26 @@ const buildQuery: BuildQuery<TableChartFormData> = (
     });
 
     const extraQueries: QueryObject[] = [];
+
+    const calculationMode = formData.percent_metric_calculation || 'row_limit';
+
+    if (
+      calculationMode === 'all_records' &&
+      percentMetrics &&
+      percentMetrics.length > 0
+    ) {
+      extraQueries.push({
+        ...queryObject,
+        columns: [],
+        metrics: percentMetrics,
+        post_processing: [],
+        row_limit: 0,
+        row_offset: 0,
+        orderby: [],
+        is_timeseries: false,
+      });
+    }
+
     if (
       metrics?.length &&
       formData.show_totals &&
@@ -263,8 +300,8 @@ const buildQuery: BuildQuery<TableChartFormData> = (
         row_limit: 0,
         row_offset: 0,
         post_processing: [],
-        order_desc: undefined, // we don't need orderby stuff here,
-        orderby: undefined, // because this query will be used for get total aggregation.
+        order_desc: undefined,
+        orderby: undefined,
       });
     }