diff --git a/app/src/lang/index.ts b/app/src/lang/index.ts index 1711e3f161..ef582030a1 100644 --- a/app/src/lang/index.ts +++ b/app/src/lang/index.ts @@ -1,7 +1,8 @@ import { RequestError } from '@/api'; import { createI18n } from 'vue-i18n'; import availableLanguages from './available-languages.yaml'; -import dateFormats from './date-formats.yaml'; +import datetimeFormats from './date-formats.yaml'; +import numberFormats from './number-formats.yaml'; import enUSBase from './translations/en-US.yaml'; export const i18n = createI18n({ @@ -11,8 +12,9 @@ export const i18n = createI18n({ messages: { 'en-US': enUSBase, }, - datetimeFormats: dateFormats, silentTranslationWarn: true, + datetimeFormats, + numberFormats, }); export type Language = keyof typeof availableLanguages; diff --git a/app/src/lang/number-formats.yaml b/app/src/lang/number-formats.yaml new file mode 100644 index 0000000000..ad7d7c9965 --- /dev/null +++ b/app/src/lang/number-formats.yaml @@ -0,0 +1,12 @@ +en-US: + currency: + style: 'currency' + currency: 'USD' + notation: standard + decimal: + style: 'decimal' + minimumFractionDigits: 2 + maximumFractionDigits: 2 + percent: + style: 'percent' + useGrouping: false diff --git a/app/src/panels/metric/metric.vue b/app/src/panels/metric/metric.vue index ba172ba0c3..aa1e87d5b9 100644 --- a/app/src/panels/metric/metric.vue +++ b/app/src/panels/metric/metric.vue @@ -68,7 +68,10 @@ export default defineComponent({ return abbreviateNumber(metric.value); } - return n(Number(metric.value)); + return n(Number(metric.value), 'decimal', { + minimumFractionDigits: props.options.decimals, + maximumFractionDigits: props.options.decimals, + } as any); }); const color = computed(() => { @@ -126,9 +129,7 @@ export default defineComponent({ }, }); - metric.value = Number(res.data.data[0][`${props.options.field}_${props.options.function}`]).toFixed( - props.options.decimals - ); + metric.value = Number(res.data.data[0][`${props.options.field}_${props.options.function}`]); } catch (err) { // oh no } finally {