Add decimal places, units

app/src/lang/translations/en-US.yaml

@@ -366,6 +366,7 @@ active: Active
 users: Users
 activity: Activity
 webhooks: Webhooks
+decimals: Decimals
 field_width: Field Width
 add_filter: Add Filter
 upper_limit: Upper limit...

app/src/modules/insights/routes/panel-configuration.vue

@@ -90,6 +90,7 @@ export default defineComponent({
 			height: undefined,
 			position_x: 1,
 			position_y: 1,
+			options: props.panel?.options ?? {},
 		});
 
 		const selectItems = computed<FancySelectItem[]>(() => {

app/src/panels/metric/index.ts

@@ -121,6 +121,36 @@ export default definePanel({
 				},
 			},
 		},
+		{
+			field: 'prefix',
+			type: 'string',
+			name: '$t:prefix',
+			meta: {
+				interface: 'input',
+				width: 'half',
+			},
+		},
+		{
+			field: 'suffix',
+			type: 'string',
+			name: '$t:suffix',
+			meta: {
+				interface: 'input',
+				width: 'half',
+			},
+		},
+		{
+			field: 'decimals',
+			type: 'integer',
+			name: '$t:decimals',
+			meta: {
+				interface: 'input',
+				width: 'half',
+			},
+			schema: {
+				default_value: 2,
+			},
+		},
 	],
 	minWidth: 16,
 	minHeight: 6,

app/src/panels/metric/metric.vue

@@ -1,7 +1,11 @@
 <template>
 	<div class="metric type-title" :class="{ 'has-header': show_header }">
 		<v-progress-circular indeterminate v-if="loading" />
-		<template v-else>{{ metric }}</template>
+		<template v-else>
+			<span class="prefix">{{ options.prefix }}</span>
+			<span class="value">{{ metric }}</span>
+			<span class="suffix">{{ options.suffix }}</span>
+		</template>
 	</div>
 </template>
 
@@ -59,7 +63,7 @@ export default defineComponent({
 					},
 				});
 
-				metric.value = Number(res.data.data[0].result).toFixed(props.options.decimals || 2);
+				metric.value = Number(res.data.data[0].result).toFixed(props.options.decimals ?? 2);
 			} catch (err) {
 				// oh no
 			} finally {
@@ -85,4 +89,11 @@ export default defineComponent({
 .metric.has-header {
 	height: calc(100% - 24px);
 }
+
+.suffix {
+	position: relative;
+	top: 7px;
+	font-weight: 700;
+	font-size: 24px;
+}
 </style>