Merge pull request #2584 from Budibase/horizontal-bar-chart

Add horizontal bar chart setting

packages/client/manifest.json

@@ -1231,6 +1231,12 @@
         "key": "stacked",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "Horizontal",
+        "key": "horizontal",
+        "defaultValue": false
+      },
       {
         "type": "boolean",
         "label": "Data Labels",

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

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

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