Update compose chart time label implementation

client/web/compose/src/components/Chart/Report/GenericChart.vue

@@ -3,6 +3,14 @@
     :report.sync="editReport"
     :modules="modules"
   >
+    <template #dimension-options-options="{ dimension }">
+      <b-form-checkbox
+        v-model="dimension.timeLabels"
+      >
+        {{ $t('edit.dimension.timeLabels') }}
+      </b-form-checkbox>
+    </template>
+
     <template #dimension-options="{ dimension }">
       <b-row>
         <b-col

client/web/compose/src/components/Chart/Report/ReportEdit.vue

@@ -154,7 +154,6 @@
           <template v-if="!unSkippable">
             <b-row>
               <b-col
-                v-if="!d.skipMissing"
                 cols="12"
                 md="6"
               >

lib/js/src/compose/types/chart/base.ts

@@ -117,7 +117,15 @@ export class BaseChart {
     this.config = (conf ? _.merge(this.defConfig(), conf) : false) || this.config || this.defConfig()
     this.config.reports?.forEach(report => {
       const { dimensions = [], metrics = [] } = report || {}
-      report.dimensions = dimensions.map(d => _.merge(this.defDimension(), d))
+      report.dimensions = dimensions.map(d => {
+        //Legacy support
+        if (d.modifier === 'auto') {
+          d.timeLabels = true
+          d.modifier = '(no grouping / buckets)'
+        }
+
+        return _.merge(this.defDimension(), d)
+      })
       report.metrics = metrics.map(m => _.merge(this.defMetrics(), m))
     })
   }
@@ -131,7 +139,8 @@ export class BaseChart {
     if (!this.config.reports || !this.config.reports.length) {
       throw new Error('notification.chart.invalidConfig.missingReports')
     }
-    this.config.reports.map(({ moduleID, dimensions, metrics }) => {
+
+    this.config.reports.forEach(({ moduleID, dimensions, metrics }) => {
       if (!moduleID) {
         throw new Error('notification.chart.invalidConfig.missingModuleID')
       }

lib/js/src/compose/types/chart/chart.ts

@@ -81,7 +81,7 @@ export default class Chart extends BaseChart {
 
         const xAxis = {
           nameLocation: 'center',
-          type: dimension.modifier === 'auto' ? 'time' : 'category',
+          type: dimension.timeLabels ? 'time' : 'category',
           axisLabel: {
             interval: 0,
             overflow: 'break',

lib/js/src/compose/types/chart/util.ts

@@ -31,6 +31,7 @@ export interface Dimension {
   modifier?: string;
   default?: string;
   skipMissing?: boolean;
+  timeLabels?: boolean;
   autoSkip?: boolean;
   rotateLabel?: number;
 }
@@ -171,12 +172,6 @@ dimensionFunctions.push(...[
     convert: (f: string) => f,
   },
 
-  {
-    text: 'auto',
-    value: 'auto',
-    convert: (f: string) => f,
-  },
-
   {
     text: 'date',
     value: 'DATE',

locale/en/corteza-webapp-compose/chart.yaml

@@ -35,6 +35,7 @@ edit:
     gaugeSteps: Steps
     label: Dimensions
     skipMissingValues: Skip missing values
+    timeLabels: Time labels
     options:
       label: Options
     optionsPicker: