diff --git a/superset-frontend/plugins/legacy-plugin-chart-country-map/src/CountryMap.ts b/superset-frontend/plugins/legacy-plugin-chart-country-map/src/CountryMap.ts
index c4d94ff3a18..0ccfece3f1c 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-country-map/src/CountryMap.ts
+++ b/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(
- `
${getNameOfRegion(d)}
${result.length > 0 ? format(result[0].metric) : ''}
`,
+ `${getNameOfRegion(d)}
${result.length > 0 ? formatter(result[0].metric) : ''}
`,
);
};
diff --git a/superset-frontend/plugins/legacy-plugin-chart-country-map/src/controlPanel.ts b/superset-frontend/plugins/legacy-plugin-chart-country-map/src/controlPanel.ts
index ba163e2617f..16b923be539 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-country-map/src/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-plugin-chart-country-map/src/controlPanel.ts
@@ -69,6 +69,7 @@ const config: ControlPanelConfig = {
},
},
],
+ ['currency_format'],
['linear_color_scheme'],
],
},
diff --git a/superset-frontend/plugins/legacy-plugin-chart-country-map/src/transformProps.ts b/superset-frontend/plugins/legacy-plugin-chart-country-map/src/transformProps.ts
index 946a5c9fd44..af32c4ef46d 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-country-map/src/transformProps.ts
+++ b/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,
};
}
diff --git a/superset-frontend/plugins/legacy-plugin-chart-country-map/test/CountryMap.test.tsx b/superset-frontend/plugins/legacy-plugin-chart-country-map/test/CountryMap.test.tsx
index dbe912618cf..c12fe2b82a6 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-country-map/test/CountryMap.test.tsx
+++ b/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')}
/>,
);