Add candlestick chart

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,
+              },
+            ],
+          },
+        },
       ],
     },
     {

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",

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

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

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"