Add auto grouping to chart time dimensions

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

@@ -2,7 +2,6 @@ import { BaseChart } from './base'
 import {
   Dimension,
   Metric,
-  dimensionFunctions,
   TemporalDataPoint,
 } from './util'
 import { getColorschemeColors } from '../../../shared'
@@ -63,7 +62,7 @@ export default class Chart extends BaseChart {
     } = reports[0] || {}
 
     const hasAxis = datasets.some(({ type }: any) => ['bar', 'line'].includes(type))
-    const timeDimension = (dimensionFunctions.lookup(dimension) || {}).time
+    let horizontal = false
 
     if (hasAxis) {
       if (yAxis) {
@@ -75,13 +74,13 @@ export default class Chart extends BaseChart {
           beginAtZero,
           min,
           max,
-          horizontal,
         } = yAxis
 
+        horizontal = !!yAxis.horizontal
+
         const xAxis = {
           nameLocation: 'center',
-          type: 'category',
-          data: labels,
+          type: dimension.modifier === 'auto' ? 'time' : 'category',
           axisLabel: {
             interval: 0,
             overflow: 'break',
@@ -132,7 +131,7 @@ export default class Chart extends BaseChart {
       const { fixed, relative } = tooltip
 
       const tooltipFormatter = t?.formatting ? t.formatting : `{a}<br />{b} : {c}${relative ? ' ({d}%)' : ''}`
-      const labelFormatter = `{c}${relative ? ' ({d}%)' : ''}`
+      const labelFormatter = `{@[1]}${relative ? ' ({d}%)' : ''}`
 
       // We should render the first metric in the dataset as the last
       const z = (datasets.length - 1) - index
@@ -221,6 +220,16 @@ export default class Chart extends BaseChart {
           containLabel: true,
         }
 
+        if (horizontal) {
+          data = labels.map((name: string, i: number) => {
+            return [data[i], name]
+          })
+        } else {
+          data = labels.map((name: string, i: number) => {
+            return [name, data[i]]
+          })
+        }
+
         return {
           z,
           stack,

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

@@ -140,7 +140,6 @@ interface DimensionFunction {
   text: string;
   value: string;
   convert: (f: string) => string;
-  time: boolean | object;
 }
 
 export class DimensionFunctions<T> extends Array<T> {
@@ -167,42 +166,42 @@ dimensionFunctions.push(...[
     text: 'none',
     value: '(no grouping / buckets)',
     convert: (f: string) => f,
-    time: false,
+  },
+
+  {
+    text: 'auto',
+    value: 'auto',
+    convert: (f: string) => f,
   },
 
   {
     text: 'date',
     value: 'DATE',
     convert: (f: string) => `DATE(${f})`,
-    time: { unit: 'day', minUnit: 'day', round: true },
   },
 
   {
     text: 'week',
     value: 'WEEK',
     convert: (f: string) => `WEEK(${f})`,
-    time: { unit: 'week', minUnit: 'week', round: true, isoWeekday: true },
   },
 
   {
     text: 'month',
     value: 'MONTH',
     convert: (f: string) => `DATE_FORMAT(${f}, '%Y-%m-01')`,
-    time: { unit: 'month', minUnit: 'month', round: true },
   },
 
   {
     text: 'quarter',
     value: 'QUARTER',
     convert: (f: string) => `QUARTER(${f})`,
-    time: { unit: 'quarter', minUnit: 'quarter', round: true },
   },
 
   {
     text: 'year',
     value: 'YEAR',
     convert: (f: string) => `DATE_FORMAT(${f}, '%Y-01-01')`,
-    time: { unit: 'year', minUnit: 'year', round: true },
   },
 ])
 

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

@@ -23,14 +23,15 @@ edit:
     fieldLabel: Field *
     fieldPlaceholder: Select a dimension field
     function:
-      date: DATE
-      label: Function
-      month: MONTH
-      none: (no grouping / buckets)
       placeholder: Select dimension modifier (bucket size)
-      quarter: QUARTER
-      week: WEEK
-      year: YEAR
+      none: No grouping
+      auto: Auto
+      date: Date
+      label: Function
+      month: Month
+      quarter: Quarter
+      week: Week
+      year: Year
     gaugeSteps: Steps
     label: Dimensions
     skipMissingValues: Skip missing values