feat: Implement currencies formatter for saved metrics (#24517)

superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx

@@ -19,6 +19,7 @@
 import React from 'react';
 import { CommonWrapper } from 'enzyme';
 import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import TableChart from '../src/TableChart';
 import transformProps from '../src/transformProps';
 import DateWithFormatter from '../src/utils/DateWithFormatter';
@@ -102,6 +103,26 @@ describe('plugin-chart-table', () => {
       expect(cells.eq(4).text()).toEqual('2.47k');
     });
 
+    it('render advanced data with currencies', () => {
+      render(
+        ProviderWrapper({
+          children: (
+            <TableChart
+              {...transformProps(testData.advancedWithCurrency)}
+              sticky={false}
+            />
+          ),
+        }),
+      );
+      const cells = document.querySelectorAll('td');
+      expect(document.querySelectorAll('th')[1]).toHaveTextContent(
+        'Sum of Num',
+      );
+      expect(cells[0]).toHaveTextContent('Michael');
+      expect(cells[2]).toHaveTextContent('12.346%');
+      expect(cells[4]).toHaveTextContent('$ 2.47k');
+    });
+
     it('render empty data', () => {
       wrap.setProps({ ...transformProps(testData.empty), sticky: false });
       tree = wrap.render();

superset-frontend/plugins/plugin-chart-table/test/testData.ts

@@ -173,6 +173,16 @@ const advanced: TableChartProps = {
   ],
 };
 
+const advancedWithCurrency = {
+  ...advanced,
+  datasource: {
+    ...advanced.datasource,
+    currencyFormats: {
+      sum__num: { symbol: 'USD', symbolPosition: 'prefix' },
+    },
+  },
+};
+
 const empty = {
   ...advanced,
   queriesData: [
@@ -186,5 +196,6 @@ const empty = {
 export default {
   basic,
   advanced,
+  advancedWithCurrency,
   empty,
 };