From 70cd9b8e87cac48d073bee7afc6197a4ed5adeb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Thu, 13 Apr 2023 18:09:55 +0200
Subject: [PATCH] Add auto grouping to chart time dimensions

---
 lib/js/src/compose/types/chart/chart.ts     | 21 +++++++++++++++------
 lib/js/src/compose/types/chart/util.ts      | 13 ++++++-------
 locale/en/corteza-webapp-compose/chart.yaml | 15 ++++++++-------
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/lib/js/src/compose/types/chart/chart.ts b/lib/js/src/compose/types/chart/chart.ts
index 09f65f175..b42ade3b2 100644
--- a/lib/js/src/compose/types/chart/chart.ts
+++ b/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,
diff --git a/lib/js/src/compose/types/chart/util.ts b/lib/js/src/compose/types/chart/util.ts
index b19c09857..03b471837 100644
--- a/lib/js/src/compose/types/chart/util.ts
+++ b/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 },
   },
 ])
 
diff --git a/locale/en/corteza-webapp-compose/chart.yaml b/locale/en/corteza-webapp-compose/chart.yaml
index 48faf2037..bdf16a1a4 100644
--- a/locale/en/corteza-webapp-compose/chart.yaml
+++ b/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