diff --git a/superset-frontend/packages/superset-ui-core/src/number-format/NumberFormats.ts b/superset-frontend/packages/superset-ui-core/src/number-format/NumberFormats.ts index 605da5d30e7b7..3825430ca0b3d 100644 --- a/superset-frontend/packages/superset-ui-core/src/number-format/NumberFormats.ts +++ b/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'; diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js index a6967301c6a6b..18493f0602ef7 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js +++ b/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); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts index cbe821d93626c..eee277f08e015 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index b9e04b2e85ce2..7bb2ef5e17934 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/formatters.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/formatters.ts index 5416fa1577635..a8f9d2aa31d5a 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/formatters.ts +++ b/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, defaultFormatter: ValueFormatter, + format?: string, ) => { if (forcePercentFormatter) { - return getNumberFormatter(',.0%'); + return getPercentFormatter(format); } const metricsArray = ensureIsArray(metrics); if ( diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/utils/formatters.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/utils/formatters.test.ts new file mode 100644 index 0000000000000..f8d40a5bd136c --- /dev/null +++ b/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%'); + }); +});