From e50d5a7ebbf8c9c7f15636db72401f20df66e95e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 3 Nov 2020 14:32:21 +0000 Subject: [PATCH] Add area chart and unit formatting --- .../userInterface/temporaryPanelStructure.js | 122 ++++++++++++++++++ packages/standard-components/components.json | 61 ++++++++- .../src/Chart/ApexOptionsBuilder.js | 17 +++ .../src/Chart/AreaChart.svelte | 5 + .../src/Chart/LineChart.svelte | 14 +- .../standard-components/src/Chart/index.js | 1 + 6 files changed, 216 insertions(+), 4 deletions(-) create mode 100644 packages/standard-components/src/Chart/AreaChart.svelte diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 2f4b10d356..55bd19ab64 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/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", diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index db3b4651d6..59012fda01 100644 --- a/packages/standard-components/components.json +++ b/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": { diff --git a/packages/standard-components/src/Chart/ApexOptionsBuilder.js b/packages/standard-components/src/Chart/ApexOptionsBuilder.js index c7f28e817d..4d5067ab06 100644 --- a/packages/standard-components/src/Chart/ApexOptionsBuilder.js +++ b/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"] + ) + } } diff --git a/packages/standard-components/src/Chart/AreaChart.svelte b/packages/standard-components/src/Chart/AreaChart.svelte new file mode 100644 index 0000000000..dc80b2b9da --- /dev/null +++ b/packages/standard-components/src/Chart/AreaChart.svelte @@ -0,0 +1,5 @@ + + + diff --git a/packages/standard-components/src/Chart/LineChart.svelte b/packages/standard-components/src/Chart/LineChart.svelte index be5d3a94e4..f9dd334dc3 100644 --- a/packages/standard-components/src/Chart/LineChart.svelte +++ b/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) { diff --git a/packages/standard-components/src/Chart/index.js b/packages/standard-components/src/Chart/index.js index 047fe60965..dc859535f7 100644 --- a/packages/standard-components/src/Chart/index.js +++ b/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"