From b7ef51e6f5acc49e8ce3c10eb1009ab1642bca87 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 9 Sep 2021 19:28:37 +0100
Subject: [PATCH] Add horizontal bar chart setting

---
 packages/client/manifest.json                 |  6 ++++
 .../app/charts/ApexOptionsBuilder.js          | 34 +++++++++++++++++--
 .../src/components/app/charts/BarChart.svelte | 20 ++++++++---
 .../components/app/charts/LineChart.svelte    |  4 ++-
 4 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 51ae1cf30d..8b8aa0ebb9 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1230,6 +1230,12 @@
         "key": "stacked",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "Horizontal",
+        "key": "horizontal",
+        "defaultValue": false
+      },
       {
         "type": "boolean",
         "label": "Data Labels",
diff --git a/packages/client/src/components/app/charts/ApexOptionsBuilder.js b/packages/client/src/components/app/charts/ApexOptionsBuilder.js
index 5c2ae1eb05..ef4083d648 100644
--- a/packages/client/src/components/app/charts/ApexOptionsBuilder.js
+++ b/packages/client/src/components/app/charts/ApexOptionsBuilder.js
@@ -1,6 +1,6 @@
 export class ApexOptionsBuilder {
   formatters = {
-    ["Default"]: val => Math.round(val * 100) / 100,
+    ["Default"]: val => (isNaN(val) ? val : Math.round(val * 100) / 100),
     ["Thousands"]: val => `${Math.round(val / 1000)}K`,
     ["Millions"]: val => `${Math.round(val / 1000000)}M`,
   }
@@ -22,6 +22,11 @@ export class ApexOptionsBuilder {
         enabled: false,
       },
     },
+    xaxis: {
+      labels: {
+        formatter: this.formatters.Default,
+      },
+    },
     yaxis: {
       labels: {
         formatter: this.formatters.Default,
@@ -77,10 +82,14 @@ export class ApexOptionsBuilder {
     return this.setOption(["yaxis", "title", "text"], label)
   }
 
-  categories(categories) {
+  xCategories(categories) {
     return this.setOption(["xaxis", "categories"], categories)
   }
 
+  yCategories(categories) {
+    return this.setOption(["yaxis", "categories"], categories)
+  }
+
   series(series) {
     return this.setOption(["series"], series)
   }
@@ -130,6 +139,13 @@ export class ApexOptionsBuilder {
     return this.setOption(["labels"], labels)
   }
 
+  xUnits(units) {
+    return this.setOption(
+      ["xaxis", "labels", "formatter"],
+      this.formatters[units || "Default"]
+    )
+  }
+
   yUnits(units) {
     return this.setOption(
       ["yaxis", "labels", "formatter"],
@@ -137,10 +153,24 @@ export class ApexOptionsBuilder {
     )
   }
 
+  clearXFormatter() {
+    delete this.options.xaxis.labels
+    return this
+  }
+
+  clearYFormatter() {
+    delete this.options.yaxis.labels
+    return this
+  }
+
   xType(type) {
     return this.setOption(["xaxis", "type"], type)
   }
 
+  yType(type) {
+    return this.setOption(["yaxis", "type"], type)
+  }
+
   yTooltip(yTooltip) {
     return this.setOption(["yaxis", "tooltip", "enabled"], yTooltip)
   }
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index 7d0d07a845..9a340c404e 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -16,6 +16,7 @@
   export let stacked
   export let yAxisUnits
   export let palette
+  export let horizontal
 
   $: options = setUpChart(dataProvider)
 
@@ -25,7 +26,7 @@
       return null
     }
 
-    // Fatch data
+    // Fetch data
     const { schema, rows } = provider
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
@@ -46,14 +47,18 @@
       .animate(animate)
       .legend(legend)
       .stacked(stacked)
-      .yUnits(yAxisUnits)
       .palette(palette)
+      .horizontal(horizontal)
 
     // Add data
     let useDates = false
     if (schema[labelColumn]) {
       const labelFieldType = schema[labelColumn].type
-      builder = builder.xType(labelFieldType)
+      if (horizontal) {
+        builder = builder.yType(labelFieldType).xUnits(yAxisUnits)
+      } else {
+        builder = builder.xType(labelFieldType).yUnits(yAxisUnits)
+      }
       useDates = labelFieldType === "datetime"
     }
     const series = valueColumns.map(column => ({
@@ -68,7 +73,14 @@
     }))
     builder = builder.series(series)
     if (!useDates) {
-      builder = builder.categories(data.map(row => row[labelColumn]))
+      builder = builder.xCategories(data.map(row => row[labelColumn]))
+    } else {
+      // Horizontal dates don't work anyway, but this is the correct logic
+      if (horizontal) {
+        builder = builder.clearYFormatter()
+      } else {
+        builder = builder.clearXFormatter()
+      }
     }
 
     // Build chart options
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index 62fc97cf58..2c05292670 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -77,7 +77,9 @@
     }))
     builder = builder.series(series)
     if (!useDates) {
-      builder = builder.categories(data.map(row => row[labelColumn]))
+      builder = builder.xCategories(data.map(row => row[labelColumn]))
+    } else {
+      builder = builder.clearXFormatter()
     }
 
     // Build chart options