diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx index 6b20946837b80..877d27450e03c 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx +++ b/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); +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', () => { diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index f1a8a8f1da823..8d6bd9cecfe3a 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/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'; } diff --git a/src/plugins/chart_expressions/expression_metric/public/plugin.ts b/src/plugins/chart_expressions/expression_metric/public/plugin.ts index 280a216f70feb..0ced2bb2d320f 100644 --- a/src/plugins/chart_expressions/expression_metric/public/plugin.ts +++ b/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 { expressions.registerFunction(metricVisFunction); expressions.registerRenderer(getMetricVisRenderer(core.theme)); + setUiSettingsService(core.uiSettings); setThemeService(charts.theme); const palettes = await charts.palettes.getPalettes(); setPaletteService(palettes); diff --git a/src/plugins/chart_expressions/expression_metric/public/services/index.ts b/src/plugins/chart_expressions/expression_metric/public/services/index.ts index a4d0adc9f6a20..68edb67f9bb81 100644 --- a/src/plugins/chart_expressions/expression_metric/public/services/index.ts +++ b/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'; diff --git a/src/plugins/chart_expressions/expression_metric/public/services/ui_settings.ts b/src/plugins/chart_expressions/expression_metric/public/services/ui_settings.ts new file mode 100644 index 0000000000000..6d884a31371cb --- /dev/null +++ b/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('uiSettings');