fix(plugins): missing currency on small number format in table chart (#…

…27041) (cherry picked from commit 6f40299)
apache · Feb 12, 2024 · db56b7f · db56b7f
1 parent 648e0a0
commit db56b7f
Showing 2 changed files with 48 additions and 0 deletions.
diff --git 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
@@ -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();