Add area chart and unit formatting

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -545,6 +545,13 @@ export default {
                 dependsOn: "datasource",
                 control: MultiTableViewFieldSelect,
               },
+              {
+                label: "Format",
+                key: "yAxisUnits",
+                control: OptionSelect,
+                options: ["Default", "Thousands", "Millions"],
+                defaultValue: "Default",
+              },
               {
                 label: "Y Axis Label",
                 key: "yAxisLabel",
@@ -610,6 +617,121 @@ export default {
             ],
           },
         },
+        {
+          name: "Area Chart",
+          _component: "@budibase/standard-components/area",
+          description: "Line chart",
+          icon: "ri-line-chart-fill",
+          properties: {
+            settings: [
+              {
+                label: "Title",
+                key: "title",
+                control: Input,
+              },
+              {
+                label: "Data",
+                key: "datasource",
+                control: TableViewSelect,
+              },
+              {
+                label: "Label Col.",
+                key: "labelColumn",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Data Cols.",
+                key: "valueColumns",
+                dependsOn: "datasource",
+                control: MultiTableViewFieldSelect,
+              },
+              {
+                label: "Format",
+                key: "yAxisUnits",
+                control: OptionSelect,
+                options: ["Default", "Thousands", "Millions"],
+                defaultValue: "Default",
+              },
+              {
+                label: "Y Label",
+                key: "yAxisLabel",
+                control: Input,
+              },
+              {
+                label: "X Label",
+                key: "xAxisLabel",
+                control: Input,
+              },
+              // {
+              //   label: "Color",
+              //   key: "color",
+              //   control: Colorpicker,
+              //   defaultValue: "#4285f4",
+              // },
+              {
+                label: "Width",
+                key: "width",
+                control: Input,
+              },
+              {
+                label: "Height",
+                key: "height",
+                control: Input,
+                defaultValue: "400",
+              },
+              {
+                label: "Curve",
+                key: "curve",
+                control: OptionSelect,
+                options: ["Smooth", "Straight", "Stepline"],
+                defaultValue: "Smooth",
+              },
+              {
+                label: "Data Labels",
+                key: "dataLabels",
+                control: Checkbox,
+                valueKey: "checked",
+                defaultValue: false,
+              },
+              {
+                label: "Animate",
+                key: "animate",
+                control: Checkbox,
+                valueKey: "checked",
+                defaultValue: true,
+              },
+              {
+                label: "Fill",
+                key: "fill",
+                control: Checkbox,
+                valueKey: "checked",
+                defaultValue: true,
+              },
+              {
+                label: "Legend",
+                key: "legend",
+                control: Checkbox,
+                valueKey: "checked",
+                defaultValue: false,
+              },
+              {
+                label: "Stacked",
+                key: "stacked",
+                control: Checkbox,
+                valueKey: "checked",
+                defaultValue: false,
+              },
+              {
+                label: "Gradient",
+                key: "gradient",
+                control: Checkbox,
+                valueKey: "checked",
+                defaultValue: false,
+              },
+            ],
+          },
+        },
         {
           name: "Pie Chart",
           _component: "@budibase/standard-components/pie",

packages/standard-components/components.json

@@ -465,7 +465,66 @@
 				"type": "bool",
 				"default": true
 			},
-			"legend": "bool"
+			"legend": "bool",
+			"yAxisUnits": {
+				"type": "options",
+				"default": "Default",
+				"options": [
+					"Default", "Thousands", "Millions"
+				]
+			}
+		}
+	},
+	"area": {
+		"description": "Area Chart",
+		"data": true,
+		"props": {
+			"title": "string",
+			"datasource": "tables",
+			"labelColumn": "string",
+			"valueColumns": "string",
+			"color": {
+				"type": "string",
+				"default": "#4285f4"
+			},
+			"height": {
+				"type": "number",
+				"default": "400"
+			},
+			"width": "number",
+			"dataLabels": {
+				"type": "bool",
+				"default": false
+			},
+			"animate": {
+				"type": "bool",
+				"default": true
+			},
+			"xAxisLabel": "string",
+			"yAxisLabel": "string",
+			"curve": {
+				"type": "options",
+				"options": [
+					"Smooth",
+					"Straight",
+					"Stepline"
+				],
+				"default": "Smooth"
+			},
+			"fill": {
+				"type": "bool",
+				"default": true
+			},
+			"legend": "bool",
+			"stacked": "bool",
+			"gradient": "bool",
+			"yAxisUnits": {
+				"type": "options",
+				"default": "Default",
+				"options": [
+					"Default", "Thousands", "Millions"
+				]
+			}
 		}
 	},
 	"pie": {

packages/standard-components/src/Chart/ApexOptionsBuilder.js

@@ -1,4 +1,9 @@
 export class ApexOptionsBuilder {
+  formatters = {
+    ["Default"]: val => Math.round(val * 100) / 100,
+    ["Thousands"]: val => `${Math.round(val / 1000)}K`,
+    ["Millions"]: val => `${Math.round(val / 1000000)}M`,
+  }
   options = {
     series: [],
     legend: {
@@ -17,6 +22,11 @@ export class ApexOptionsBuilder {
         enabled: false,
       },
     },
+    yaxis: {
+      labels: {
+        formatter: this.formatters.Default,
+      },
+    },
   }
 
   setOption(path, value) {
@@ -119,4 +129,11 @@ export class ApexOptionsBuilder {
   labels(labels) {
     return this.setOption(["labels"], labels)
   }
+
+  yUnits(units) {
+    return this.setOption(
+      ["yaxis", "labels", "formatter"],
+      this.formatters[units || "Default"]
+    )
+  }
 }

packages/standard-components/src/Chart/AreaChart.svelte

@@ -0,0 +1,5 @@
+<script>
+  import LineChart from "./LineChart.svelte"
+</script>
+
+<LineChart {...$$props} area />

packages/standard-components/src/Chart/LineChart.svelte

@@ -5,6 +5,7 @@
   import { isEmpty, sortBy } from "lodash/fp"
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
 
+  // Common props
   export let title
   export let datasource
   export let labelColumn
@@ -17,8 +18,13 @@
   export let animate
   export let dataLabels
   export let curve
-  export let fill
   export let legend
+  export let yAxisUnits
+
+  // Area specific props
+  export let area
+  export let stacked
+  export let gradient
 
   let data = []
   $: options = getChartOptions(data)
@@ -35,7 +41,7 @@
     // Initialise default chart
     let builder = new ApexOptionsBuilder()
       .title(title)
-      .type(fill ? "area" : "line")
+      .type(area ? "area" : "line")
       // .color(color)
       .width(width)
       .height(height)
@@ -44,8 +50,10 @@
       .dataLabels(dataLabels)
       .animate(animate)
       .curve(curve.toLowerCase())
-      .gradient(fill)
+      .gradient(gradient)
+      .stacked(stacked)
       .legend(legend)
+      .yUnits(yAxisUnits)
 
     // Add data if valid datasource
     if (rows && rows.length) {

packages/standard-components/src/Chart/index.js

@@ -2,3 +2,4 @@ export { default as bar } from "./BarChart.svelte"
 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"