From f6d3702d330b77d54c5a21f1318b5f49cce85d7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Thu, 25 Jan 2024 12:54:39 +0100
Subject: [PATCH] Fix not being able to switch aggregation operation when
 defining new metric

---
 .../src/components/PageBlocks/MetricBase.vue  |  3 --
 .../PageBlocks/MetricConfigurator/index.vue   | 19 +--------
 lib/js/src/compose/types/page-block/metric.ts | 41 +++++++++++++++----
 3 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/MetricBase.vue b/client/web/compose/src/components/PageBlocks/MetricBase.vue
index 22af33337..31bfc7db5 100644
--- a/client/web/compose/src/components/PageBlocks/MetricBase.vue
+++ b/client/web/compose/src/components/PageBlocks/MetricBase.vue
@@ -24,9 +24,6 @@
           :class="m.drillDown.enabled ? 'pointer' : ''"
           @click="drillDown(m, mi)"
         >
-          <!-- <h3 :style="genStyle(m.labelStyle)">
-            {{ v.label }}
-          </h3> -->
           <metric-item
             :metric="m"
             :value="v"
diff --git a/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue b/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
index 2ba9cbf3d..a53b2f29b 100644
--- a/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
+++ b/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
@@ -213,7 +213,7 @@
                 <i18next
                   path="metric.edit.transformFootnote"
                   tag="small"
-                  class="text-muted"
+                  class="d-block text-muted"
                 >
                   <code>${record.values.fieldName}</code>
                   <code>${recordID}</code>
@@ -283,11 +283,6 @@
             </fieldset>
           </b-card>
 
-          <!-- <m-style :options="edit.labelStyle">
-            <h5 slot="title">
-              {{ $t('metric.editStyle.labelLabel') }}
-            </h5>
-          </m-style> -->
           <m-style
             class="mt-2"
             :options="edit.valueStyle"
@@ -437,17 +432,7 @@ export default {
 
   methods: {
     addMetric () {
-      const m = {
-        labelStyle: {},
-        valueStyle: {
-          backgroundColor: '#FFFFFF00',
-          color: '#000000',
-        },
-        drillDown: {
-          enabled: false,
-          blockID: '',
-        },
-      }
+      const m = this.block.makeMetric()
       this.metrics.push(m)
       this.editMetric(m)
     },
diff --git a/lib/js/src/compose/types/page-block/metric.ts b/lib/js/src/compose/types/page-block/metric.ts
index 6d16bc073..10b2b7f8f 100644
--- a/lib/js/src/compose/types/page-block/metric.ts
+++ b/lib/js/src/compose/types/page-block/metric.ts
@@ -1,6 +1,6 @@
 import { PageBlock, PageBlockInput, Registry } from './base'
-import { dimensionFunctions } from '../chart/util'
-import { CortezaID, Apply } from '../../../cast'
+import { merge } from 'lodash'
+import { Apply } from '../../../cast'
 
 const kind = 'Metric'
 
@@ -21,7 +21,7 @@ interface ReporterParams {
 interface Style {
   color: string;
   backgroundColor: string;
-  fontSize: string;
+  fontSize?: string;
 }
 
 interface Metric {
@@ -39,11 +39,35 @@ interface Metric {
   transformFx?: string;
 
   // @todo allow conditional styles; eg. if value is < 10 render with bold red text
-  labelStyle?: Style;
   valueStyle?: Style;
   drillDown: DrillDown;
 }
 
+const defaultMetric: Readonly<Metric> = Object.freeze({
+  label: '',
+  moduleID: '',
+  dimensionField: '',
+  dateFormat: '',
+  filter: '',
+  bucketSize: '',
+  metricField: '',
+  operation: '',
+  numberFormat: '',
+  prefix: '',
+  suffix: '',
+  transformFx: '',
+
+  valueStyle: {
+    backgroundColor: '#FFFFFF00',
+    color: '#000000',
+    fontSize: undefined,
+  },
+  drillDown: {
+    enabled: false,
+    blockID: '',
+  },
+})
+
 interface Options {
   metrics: Array<Metric>;
   refreshRate: number;
@@ -74,10 +98,7 @@ export class PageBlockMetric extends PageBlock {
     Apply(this.options, o, Boolean, 'showRefresh')
     Apply(this.options, o, String, 'magnifyOption')
     if (o.metrics) {
-      this.options.metrics = o.metrics.map((m) => ({
-        ...m,
-        drillDown: m.drillDown || { enabled: false },
-      }))
+      this.options.metrics = o.metrics.map((m) => merge({}, defaultMetric, m))
     }
   }
 
@@ -124,6 +145,10 @@ export class PageBlockMetric extends PageBlock {
       dimensions: 'deletedAt',
     }
   }
+
+  makeMetric () {
+    return merge({}, defaultMetric)
+  }
 }
 
 Registry.set(kind, PageBlockMetric)