(superset) branch master updated: fix(plugins): missing currency on small number format in table chart (#27041)

[ju...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

justinpark pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 6f402991e5 fix(plugins): missing currency on small number format in table chart (#27041)
6f402991e5 is described below

commit 6f402991e54ae6ab0c6c98613d7e831c7f847f54
Author: JUST.in DO IT <ju...@airbnb.com>
AuthorDate: Thu Feb 8 15:24:24 2024 -0800

    fix(plugins): missing currency on small number format in table chart (#27041)
---
 .../plugin-chart-table/src/utils/formatValue.ts    |  6 ++++
 .../plugin-chart-table/test/TableChart.test.tsx    | 42 ++++++++++++++++++++++
 2 files changed, 48 insertions(+)

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 43cddad0a5..181fb25e68 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 d6998476ba..52cfab1662 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: <TableChart {...props} sticky={false} />,
+        }),
+      );
+      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();