feat: Add currencies controls in country map (#39016)

superset-frontend/plugins/legacy-plugin-chart-country-map/src/CountryMap.ts

@@ -21,6 +21,7 @@
 import d3 from 'd3';
 import { extent as d3Extent } from 'd3-array';
 import {
+  ValueFormatter,
   getNumberFormatter,
   getSequentialSchemeRegistry,
   CategoricalColorNamespace,
@@ -60,7 +61,8 @@ interface CountryMapProps {
   height: number;
   country: string;
   linearColorScheme: string;
-  numberFormat: string;
+  numberFormat?: string; // left for backward compatibility
+  formatter: ValueFormatter;
   colorScheme: string;
   sliceId: number;
 }
@@ -74,13 +76,12 @@ function CountryMap(element: HTMLElement, props: CountryMapProps) {
     height,
     country,
     linearColorScheme,
-    numberFormat,
+    formatter,
     colorScheme,
     sliceId,
   } = props;
 
   const container = element;
-  const format = getNumberFormatter(numberFormat);
   const rawExtents = d3Extent(data, v => v.metric);
   const extents: [number, number] =
     rawExtents[0] != null && rawExtents[1] != null
@@ -182,7 +183,7 @@ function CountryMap(element: HTMLElement, props: CountryMapProps) {
       .style('top', `${position[1] + 30}px`)
       .style('left', `${position[0]}px`)
       .html(
-        `<div><strong>${getNameOfRegion(d)}</strong><br>${result.length > 0 ? format(result[0].metric) : ''}</div>`,
+        `<div><strong>${getNameOfRegion(d)}</strong><br>${result.length > 0 ? formatter(result[0].metric) : ''}</div>`,
       );
   };
 

superset-frontend/plugins/legacy-plugin-chart-country-map/src/controlPanel.ts

@@ -69,6 +69,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        ['currency_format'],
         ['linear_color_scheme'],
       ],
     },

superset-frontend/plugins/legacy-plugin-chart-country-map/src/transformProps.ts

@@ -16,26 +16,48 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps } from '@superset-ui/core';
+import { ChartProps, getValueFormatter } from '@superset-ui/core';
 
 export default function transformProps(chartProps: ChartProps) {
-  const { width, height, formData, queriesData } = chartProps;
+  const { width, height, formData, queriesData, datasource } = chartProps;
   const {
     linearColorScheme,
     numberFormat,
+    currencyFormat,
     selectCountry,
     colorScheme,
     sliceId,
+    metric,
   } = formData;
 
+  const {
+    currencyFormats = {},
+    columnFormats = {},
+    currencyCodeColumn,
+  } = datasource;
+  const { data, detected_currency: detectedCurrency } = queriesData[0];
+
+  const formatter = getValueFormatter(
+    metric,
+    currencyFormats,
+    columnFormats,
+    numberFormat,
+    currencyFormat,
+    undefined, // key - not needed for single-metric charts
+    data,
+    currencyCodeColumn,
+    detectedCurrency,
+  );
+
   return {
     width,
     height,
     data: queriesData[0].data,
     country: selectCountry ? String(selectCountry).toLowerCase() : null,
     linearColorScheme,
-    numberFormat,
+    numberFormat, // left for backward compatibility
     colorScheme,
     sliceId,
+    formatter,
   };
 }

superset-frontend/plugins/legacy-plugin-chart-country-map/test/CountryMap.test.tsx

@@ -93,6 +93,7 @@ describe('CountryMap (legacy d3)', () => {
         linearColorScheme="bnbColors"
         colorScheme=""
         numberFormat=".2f"
+        formatter={jest.fn().mockReturnValue('100')}
       />,
     );
 
@@ -115,6 +116,7 @@ describe('CountryMap (legacy d3)', () => {
         country="canada"
         linearColorScheme="bnbColors"
         colorScheme=""
+        formatter={jest.fn().mockReturnValue('100')}
       />,
     );
 
@@ -144,6 +146,7 @@ describe('CountryMap (legacy d3)', () => {
         country="canada"
         linearColorScheme="bnbColors"
         colorScheme=""
+        formatter={jest.fn().mockReturnValue('100')}
       />,
     );