get locale from UI settings service

src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx

@@ -21,6 +21,8 @@ const mockDeserialize = jest.fn(() => ({
 
 const mockGetColorForValue = jest.fn<undefined | string, any>(() => undefined);
 
+const mockLookupCurrentLocale = jest.fn(() => 'en');
+
 jest.mock('../services', () => ({
   getFormatService: () => {
     return {
@@ -35,6 +37,17 @@ jest.mock('../services', () => ({
     const { getThemeService } = require('../__mocks__/theme_service');
     return getThemeService();
   },
+  getUiSettingsService: () => {
+    return {
+      get: mockLookupCurrentLocale,
+    };
+  },
+}));
+
+jest.mock('@kbn/field-formats-plugin/common', () => ({
+  FORMATS_UI_SETTINGS: {
+    FORMAT_NUMBER_DEFAULT_LOCALE: 'format_number_default_locale',
+  },
 }));
 
 jest.mock('@elastic/numeral', () => ({
@@ -818,7 +831,7 @@ describe('MetricVisComponent', function () {
       expect(primary).toBe('$1.00K');
       expect(secondary).toBe('$11.20');
 
-      (numeral.language as jest.Mock).mockReturnValueOnce('be-nl');
+      mockLookupCurrentLocale.mockReturnValueOnce('be-nl');
       // @ts-expect-error
       (numeral.languageData as jest.Mock).mockReturnValueOnce({
         currency: {
@@ -830,6 +843,8 @@ describe('MetricVisComponent', function () {
         id: 'currency',
       });
       expect(primaryEuro).toBe('1,00 тыс. €');
+      // check that we restored the numeral.js state
+      expect(numeral.language).toHaveBeenLastCalledWith('en');
     });
 
     it('correctly formats percentages', () => {

src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx

@@ -21,8 +21,14 @@ import {
 } from '@kbn/expressions-plugin';
 import { CustomPaletteState } from '@kbn/charts-plugin/public';
 import { euiLightVars } from '@kbn/ui-theme';
+import { FORMATS_UI_SETTINGS } from '@kbn/field-formats-plugin/common';
 import { VisParams } from '../../common';
-import { getPaletteService, getThemeService, getFormatService } from '../services';
+import {
+  getPaletteService,
+  getThemeService,
+  getFormatService,
+  getUiSettingsService,
+} from '../services';
 import { getCurrencyCode } from './currency_codes';
 
 const defaultColor = euiLightVars.euiColorDarkestShade;
@@ -87,7 +93,9 @@ const getFormatter = (
     return formatter.getConverterFor('text');
   }
 
-  const locale = String(numeral.language());
+  const uiSettings = getUiSettingsService();
+
+  const locale = uiSettings.get(FORMATS_UI_SETTINGS.FORMAT_NUMBER_DEFAULT_LOCALE) || 'en';
 
   const intlOptions: Intl.NumberFormatOptions = {
     maximumFractionDigits: 2,
@@ -98,11 +106,17 @@ const getFormatter = (
   }
 
   if (formatId === 'currency') {
+    const currentNumeralLang = numeral.language();
+    numeral.language(locale);
+
     const {
       currency: { symbol: currencySymbol },
       // @ts-expect-error
     } = numeral.languageData();
 
+    // restore previous value
+    numeral.language(currentNumeralLang);
+
     intlOptions.currency = getCurrencyCode(locale, currencySymbol);
     intlOptions.style = 'currency';
   }

src/plugins/chart_expressions/expression_metric/public/plugin.ts

@@ -14,6 +14,7 @@ import { metricVisFunction } from '../common';
 import { setFormatService, setPaletteService } from './services';
 import { getMetricVisRenderer } from './expression_renderers';
 import { setThemeService } from './services/theme_service';
+import { setUiSettingsService } from './services/ui_settings';
 
 /** @internal */
 export interface ExpressionMetricPluginSetup {
@@ -32,6 +33,7 @@ export class ExpressionMetricPlugin implements Plugin<void, void> {
     expressions.registerFunction(metricVisFunction);
     expressions.registerRenderer(getMetricVisRenderer(core.theme));
 
+    setUiSettingsService(core.uiSettings);
     setThemeService(charts.theme);
     const palettes = await charts.palettes.getPalettes();
     setPaletteService(palettes);

src/plugins/chart_expressions/expression_metric/public/services/index.ts

@@ -9,3 +9,4 @@
 export { getFormatService, setFormatService } from './format_service';
 export { getThemeService, setThemeService } from './theme_service';
 export { getPaletteService, setPaletteService } from './palette_service';
+export { getUiSettingsService, setUiSettingsService } from './ui_settings';

src/plugins/chart_expressions/expression_metric/public/services/ui_settings.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { CoreSetup } from '@kbn/core/public';
+import { createGetterSetter } from '@kbn/kibana-utils-plugin/public';
+
+export const [getUiSettingsService, setUiSettingsService] =
+  createGetterSetter<CoreSetup['uiSettings']>('uiSettings');