Tweaks in metrics settings

app/src/interfaces/list/list.vue

@@ -33,6 +33,12 @@
 			persistent
 			@cancel="closeDrawer()"
 		>
+			<template #title>
+				<h1 class="type-title">
+					<render-template :fields="fields" :item="activeItem" :template="templateWithDefaults" />
+				</h1>
+			</template>
+
 			<template #actions>
 				<v-button @click="closeDrawer()" icon rounded v-tooltip.bottom="t('save')">
 					<v-icon name="check" />

app/src/panels/metric/index.ts

@@ -145,7 +145,7 @@ export default definePanel({
 				interface: 'list',
 				width: 'full',
 				options: {
-					template: '{{operator}} {{value}}',
+					template: '{{color}} {{operator}} {{value}}',
 					fields: [
 						{
 							field: 'operator',
@@ -159,27 +159,27 @@ export default definePanel({
 								options: {
 									choices: [
 										{
-											text: '=',
+											text: '$t:operators.eq',
 											value: '=',
 										},
 										{
-											text: '!=',
+											text: '$t:operators.neq',
 											value: '!=',
 										},
 										{
-											text: '>',
+											text: '$t:operators.gt',
 											value: '>',
 										},
 										{
-											text: '>=',
+											text: '$t:operators.gte',
 											value: '>=',
 										},
 										{
-											text: '<',
+											text: '$t:operators.lt',
 											value: '<',
 										},
 										{
-											text: '<=',
+											text: '$t:operators.lte',
 											value: '<=',
 										},
 									],
@@ -203,8 +203,12 @@ export default definePanel({
 							field: 'color',
 							name: '$t:color',
 							type: 'string',
+							schema: {
+								default_value: '#00C897',
+							},
 							meta: {
 								interface: 'select-color',
+								display: 'color',
 							},
 						},
 					],

app/src/panels/metric/metric.vue

@@ -85,7 +85,7 @@ export default defineComponent({
 				}
 			}
 
-			return matchingFormat?.color || null;
+			return matchingFormat ? matchingFormat.color || '#00C897' : null;
 
 			function matchesOperator(format: MetricOptions['conditionalFormatting'][number]) {
 				const value = Number(metric.value);