From 9a4fc35bba3ce7d5d37ed3c35b1aab6ccfe3c703 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 4 Nov 2020 15:21:11 +0000
Subject: [PATCH] Add candlestick chart

---
 .../userInterface/temporaryPanelStructure.js  | 85 +++++++++++++++++++
 packages/standard-components/components.json  | 51 ++++++++---
 .../src/Chart/ApexOptionsBuilder.js           |  4 +
 .../src/Chart/CandleStickChart.svelte         | 70 +++++++++++++++
 .../standard-components/src/Chart/index.js    |  1 +
 5 files changed, 201 insertions(+), 10 deletions(-)
 create mode 100644 packages/standard-components/src/Chart/CandleStickChart.svelte

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 6626ca2ed3..8bb7e01edf 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -829,6 +829,91 @@ export default {
             ],
           },
         },
+        {
+          name: "Candlestick Chart",
+          _component: "@budibase/standard-components/candlestick",
+          description: "Candlestick chart",
+          icon: "ri-bar-chart-line",
+          properties: {
+            settings: [
+              {
+                label: "Title",
+                key: "title",
+                control: Input,
+              },
+              {
+                label: "Data",
+                key: "datasource",
+                control: TableViewSelect,
+              },
+              {
+                label: "Date Col.",
+                key: "dateColumn",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Open Col.",
+                key: "openColumn",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Close Col.",
+                key: "closeColumn",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "High Col.",
+                key: "highColumn",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Low Col.",
+                key: "lowColumn",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Format",
+                key: "yAxisUnits",
+                control: OptionSelect,
+                options: ["Default", "Thousands", "Millions"],
+                defaultValue: "Default",
+              },
+              {
+                label: "Y Axis Label",
+                key: "yAxisLabel",
+                control: Input,
+              },
+              {
+                label: "X Axis Label",
+                key: "xAxisLabel",
+                control: Input,
+              },
+              {
+                label: "Width",
+                key: "width",
+                control: Input,
+              },
+              {
+                label: "Height",
+                key: "height",
+                control: Input,
+                defaultValue: "400",
+              },
+              {
+                label: "Animate",
+                key: "animate",
+                control: Checkbox,
+                valueKey: "checked",
+                defaultValue: true,
+              },
+            ],
+          },
+        },
       ],
     },
     {
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 3507aef1fe..6853ab7ffd 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -405,10 +405,10 @@
 			"labelColumn": "string",
 			"valueColumns": "string",
 			"height": {
-				"type": "number",
+				"type": "string",
 				"default": "400"
 			},
-			"width": "number",
+			"width": "string",
 			"dataLabels": "bool",
 			"animate": {
 				"type": "bool",
@@ -436,10 +436,10 @@
 			"labelColumn": "string",
 			"valueColumns": "string",
 			"height": {
-				"type": "number",
+				"type": "string",
 				"default": "400"
 			},
-			"width": "number",
+			"width": "string",
 			"dataLabels": {
 				"type": "bool",
 				"default": false
@@ -478,10 +478,10 @@
 			"labelColumn": "string",
 			"valueColumns": "string",
 			"height": {
-				"type": "number",
+				"type": "string",
 				"default": "400"
 			},
-			"width": "number",
+			"width": "string",
 			"dataLabels": {
 				"type": "bool",
 				"default": false
@@ -525,10 +525,10 @@
 			"labelColumn": "string",
 			"valueColumn": "string",
 			"height": {
-				"type": "number",
+				"type": "string",
 				"default": "200"
 			},
-			"width": "number",
+			"width": "string",
 			"dataLabels": "bool",
 			"animate": {
 				"type": "bool",
@@ -549,10 +549,10 @@
 			"labelColumn": "string",
 			"valueColumn": "string",
 			"height": {
-				"type": "number",
+				"type": "string",
 				"default": "200"
 			},
-			"width": "number",
+			"width": "string",
 			"dataLabels": "bool",
 			"animate": {
 				"type": "bool",
@@ -564,6 +564,37 @@
 			}
 		}
 	},
+	"candlestick": {
+		"description": "Candlestick Chart",
+		"data": true,
+		"props": {
+			"title": "string",
+			"datasource": "tables",
+			"dateColumn": "string",
+			"openColumn": "string",
+			"closeColumn": "string",
+			"highColumn": "string",
+			"lowColumn": "string",
+			"height": {
+				"type": "string",
+				"default": "400"
+			},
+			"width": "string",
+			"animate": {
+				"type": "bool",
+				"default": true
+			},
+			"xAxisLabel": "string",
+			"yAxisLabel": "string",
+			"yAxisUnits": {
+				"type": "options",
+				"default": "Default",
+				"options": [
+					"Default", "Thousands", "Millions"
+				]
+			}
+		}
+	},
 	"datepicker": {
 		"name": "Date Picker",
 		"description": "Date Picker",
diff --git a/packages/standard-components/src/Chart/ApexOptionsBuilder.js b/packages/standard-components/src/Chart/ApexOptionsBuilder.js
index ac3bf0a6d1..1905ac4156 100644
--- a/packages/standard-components/src/Chart/ApexOptionsBuilder.js
+++ b/packages/standard-components/src/Chart/ApexOptionsBuilder.js
@@ -142,4 +142,8 @@ export class ApexOptionsBuilder {
   xType(type) {
     return this.setOption(["xaxis", "type"], type)
   }
+
+  yTooltip(yTooltip) {
+    return this.setOption(["yaxis", "tooltip", "enabled"], yTooltip)
+  }
 }
diff --git a/packages/standard-components/src/Chart/CandleStickChart.svelte b/packages/standard-components/src/Chart/CandleStickChart.svelte
new file mode 100644
index 0000000000..7b90e226e9
--- /dev/null
+++ b/packages/standard-components/src/Chart/CandleStickChart.svelte
@@ -0,0 +1,70 @@
+<script>
+  import { onMount } from "svelte"
+  import fetchData, { fetchSchema } from "../fetchData"
+  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
+  import ApexChart from "./ApexChart.svelte"
+
+  export let _bb
+  export let title
+  export let datasource
+  export let dateColumn
+  export let openColumn
+  export let highColumn
+  export let lowColumn
+  export let closeColumn
+  export let xAxisLabel
+  export let yAxisLabel
+  export let height
+  export let width
+  export let animate
+  export let yAxisUnits
+
+  const store = _bb.store
+  let options
+
+  // Fetch data on mount
+  onMount(async () => {
+    const allCols = [dateColumn, openColumn, highColumn, lowColumn, closeColumn]
+    if (!datasource || allCols.find(x => x == null)) {
+      return
+    }
+
+    // Fetch, filter and sort data
+    const schema = await fetchSchema(datasource.tableId)
+    const result = await fetchData(datasource, $store)
+    const reducer = row => (valid, column) => valid && row[column] != null
+    const hasAllColumns = row => allCols.reduce(reducer(row), true)
+    const data = result
+      .filter(row => hasAllColumns(row))
+      .slice(0, 100)
+      .sort((a, b) => (a[dateColumn] > b[dateColumn] ? 1 : -1))
+    if (!schema || !data.length) {
+      return
+    }
+
+    // Initialise default chart
+    let builder = new ApexOptionsBuilder()
+      .type("candlestick")
+      .title(title)
+      .width(width)
+      .height(height)
+      .xLabel(xAxisLabel)
+      .yLabel(yAxisLabel)
+      .animate(animate)
+      .yUnits(yAxisUnits)
+      .yTooltip(true)
+      .xType("datetime")
+
+    // Add data
+    const chartData = data.map(row => ({
+      x: row[dateColumn],
+      y: [row[openColumn], row[highColumn], row[lowColumn], row[closeColumn]],
+    }))
+    builder = builder.series([{ data: chartData }])
+
+    // Build chart options
+    options = builder.getOptions()
+  })
+</script>
+
+<ApexChart {options} />
diff --git a/packages/standard-components/src/Chart/index.js b/packages/standard-components/src/Chart/index.js
index dc859535f7..008aa6b64f 100644
--- a/packages/standard-components/src/Chart/index.js
+++ b/packages/standard-components/src/Chart/index.js
@@ -3,3 +3,4 @@ export { default as line } from "./LineChart.svelte"
 export { default as pie } from "./PieChart.svelte"
 export { default as donut } from "./DonutChart.svelte"
 export { default as area } from "./AreaChart.svelte"
+export { default as candlestick } from "./CandleStickChart.svelte"