diff --git a/superset-frontend/plugins/plugin-chart-table/src/utils/formatValue.ts b/superset-frontend/plugins/plugin-chart-table/src/utils/formatValue.ts index 139f92336c1..043fa6b59d5 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/utils/formatValue.ts +++ b/superset-frontend/plugins/plugin-chart-table/src/utils/formatValue.ts @@ -17,6 +17,7 @@ * under the License. */ import { + CurrencyFormatter, DataRecordValue, GenericDataType, getNumberFormatter, @@ -64,6 +65,11 @@ export function formatColumnValue( const smallNumberFormatter = config.d3SmallNumberFormat === undefined ? formatter + : config.currencyFormat + ? new CurrencyFormatter({ + d3Format: config.d3SmallNumberFormat, + currency: config.currencyFormat, + }) : getNumberFormatter(config.d3SmallNumberFormat); return formatValue( isNumber && typeof value === 'number' && Math.abs(value) < 1 diff --git a/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx b/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx index d6998476baa..52cfab16621 100644 --- a/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx +++ b/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx @@ -166,6 +166,48 @@ describe('plugin-chart-table', () => { expect(cells[2]).toHaveTextContent('$ 0'); }); + it('render small formatted data with currencies', () => { + const props = transformProps({ + ...testData.raw, + rawFormData: { + ...testData.raw.rawFormData, + column_config: { + num: { + d3SmallNumberFormat: '.2r', + currencyFormat: { symbol: 'USD', symbolPosition: 'prefix' }, + }, + }, + }, + queriesData: [ + { + ...testData.raw.queriesData[0], + data: [ + { + num: 1234, + }, + { + num: 0.5, + }, + { + num: 0.61234, + }, + ], + }, + ], + }); + render( + ProviderWrapper({ + children: , + }), + ); + const cells = document.querySelectorAll('td'); + + expect(document.querySelectorAll('th')[0]).toHaveTextContent('num'); + expect(cells[0]).toHaveTextContent('$ 1.23k'); + expect(cells[1]).toHaveTextContent('$ 0.50'); + expect(cells[2]).toHaveTextContent('$ 0.61'); + }); + it('render empty data', () => { wrap.setProps({ ...transformProps(testData.empty), sticky: false }); tree = wrap.render();