Fix decimal points in metrics

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;

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

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 {