Fix not being able to switch aggregation operation when defining new metric

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"

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)
     },

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)