fix: Timeseries Y-axis format with contribution mode (#27106)

superset-frontend/packages/superset-ui-core/src/number-format/NumberFormats.ts

@@ -35,20 +35,20 @@ const FLOAT_SIGNED = FLOAT_SIGNED_2_POINT;
 const INTEGER = ',d';
 const INTEGER_SIGNED = '+,d';
 
+const PERCENT = ',.0%';
 const PERCENT_1_POINT = ',.1%';
 const PERCENT_2_POINT = ',.2%';
 const PERCENT_3_POINT = ',.3%';
-const PERCENT = PERCENT_2_POINT;
 
+const PERCENT_SIGNED = '+,.0%';
 const PERCENT_SIGNED_1_POINT = '+,.1%';
 const PERCENT_SIGNED_2_POINT = '+,.2%';
 const PERCENT_SIGNED_3_POINT = '+,.3%';
-const PERCENT_SIGNED = PERCENT_SIGNED_2_POINT;
 
+const SI = '.0s';
 const SI_1_DIGIT = '.1s';
 const SI_2_DIGIT = '.2s';
 const SI_3_DIGIT = '.3s';
-const SI = SI_3_DIGIT;
 
 const SMART_NUMBER = 'SMART_NUMBER';
 const SMART_NUMBER_SIGNED = 'SMART_NUMBER_SIGNED';

superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js

@@ -250,7 +250,7 @@ function Heatmap(element, props) {
     hideYLabel();
   }
 
-  const fp = getNumberFormatter(NumberFormats.PERCENT);
+  const fp = getNumberFormatter(NumberFormats.PERCENT_2_POINT);
 
   const xScale = ordScale('x', null, sortXAxis);
   const yScale = ordScale('y', null, sortYAxis);

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

@@ -532,6 +532,7 @@ export default function transformProps(
             !!contributionMode,
             customFormatters,
             formatter,
+            yAxisFormat,
           ),
         },
         scale: truncateYAxis,
@@ -554,6 +555,7 @@ export default function transformProps(
             !!contributionMode,
             customFormattersSecondary,
             formatterSecondary,
+            yAxisFormatSecondary,
           ),
         },
         scale: truncateYAxis,

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

@@ -95,6 +95,7 @@ import {
 } from '../constants';
 import { getDefaultTooltip } from '../utils/tooltip';
 import {
+  getPercentFormatter,
   getTooltipTimeFormatter,
   getXAxisFormatter,
   getYAxisFormatter,
@@ -253,7 +254,7 @@ export default function transformProps(
   const series: SeriesOption[] = [];
 
   const forcePercentFormatter = Boolean(contributionMode || isAreaExpand);
-  const percentFormatter = getNumberFormatter(',.0%');
+  const percentFormatter = getPercentFormatter(yAxisFormat);
   const defaultFormatter = currencyFormat?.symbol
     ? new CurrencyFormatter({ d3Format: yAxisFormat, currency: currencyFormat })
     : getNumberFormatter(yAxisFormat);
@@ -486,6 +487,7 @@ export default function transformProps(
         forcePercentFormatter,
         customFormatters,
         defaultFormatter,
+        yAxisFormat,
       ),
     },
     scale: truncateYAxis,

superset-frontend/plugins/plugin-chart-echarts/src/utils/formatters.ts

@@ -23,6 +23,7 @@ import {
   getNumberFormatter,
   getTimeFormatter,
   isSavedMetric,
+  NumberFormats,
   QueryFormMetric,
   smartDateDetailedFormatter,
   smartDateFormatter,
@@ -30,14 +31,22 @@ import {
   ValueFormatter,
 } from '@superset-ui/core';
 
+export const getPercentFormatter = (format?: string) =>
+  getNumberFormatter(
+    !format || format === NumberFormats.SMART_NUMBER
+      ? NumberFormats.PERCENT
+      : format,
+  );
+
 export const getYAxisFormatter = (
   metrics: QueryFormMetric[],
   forcePercentFormatter: boolean,
   customFormatters: Record<string, ValueFormatter>,
   defaultFormatter: ValueFormatter,
+  format?: string,
 ) => {
   if (forcePercentFormatter) {
-    return getNumberFormatter(',.0%');
+    return getPercentFormatter(format);
   }
   const metricsArray = ensureIsArray(metrics);
   if (

superset-frontend/plugins/plugin-chart-echarts/test/utils/formatters.test.ts

@@ -0,0 +1,37 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { NumberFormats } from '@superset-ui/core';
+import { getPercentFormatter } from '../../src/utils/formatters';
+
+describe('getPercentFormatter', () => {
+  const value = 0.6;
+  it('should format as percent if no format is specified', () => {
+    expect(getPercentFormatter().format(value)).toEqual('60%');
+  });
+  it('should format as percent if SMART_NUMBER is specified', () => {
+    expect(
+      getPercentFormatter(NumberFormats.SMART_NUMBER).format(value),
+    ).toEqual('60%');
+  });
+  it('should format using a provided format', () => {
+    expect(
+      getPercentFormatter(NumberFormats.PERCENT_2_POINT).format(value),
+    ).toEqual('60.00%');
+  });
+});