From 951f5e1db595defc1679e2729ab50e88791c28a9 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 5 Nov 2020 13:37:28 +0000 Subject: [PATCH] Add colour palette options for charts --- .../userInterface/temporaryPanelStructure.js | 90 +++++++++++++++++++ packages/standard-components/components.json | 80 +++++++++++++++++ .../src/Chart/ApexOptionsBuilder.js | 7 ++ .../src/Chart/BarChart.svelte | 2 + .../src/Chart/LineChart.svelte | 2 + .../src/Chart/PieChart.svelte | 2 + 6 files changed, 183 insertions(+) diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 1239027f9d..ef88c93001 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -480,6 +480,24 @@ export default { control: Input, defaultValue: "400", }, + { + label: "Colours", + key: "palette", + control: OptionSelect, + defaultValue: "Palette 1", + options: [ + "Palette 1", + "Palette 2", + "Palette 3", + "Palette 4", + "Palette 5", + "Palette 6", + "Palette 7", + "Palette 8", + "Palette 9", + "Palette 10", + ], + }, { label: "Stacked", key: "stacked", @@ -575,6 +593,24 @@ export default { options: ["Smooth", "Straight", "Stepline"], defaultValue: "Smooth", }, + { + label: "Colours", + key: "palette", + control: OptionSelect, + defaultValue: "Palette 1", + options: [ + "Palette 1", + "Palette 2", + "Palette 3", + "Palette 4", + "Palette 5", + "Palette 6", + "Palette 7", + "Palette 8", + "Palette 9", + "Palette 10", + ], + }, { label: "Data Labels", key: "dataLabels", @@ -663,6 +699,24 @@ export default { options: ["Smooth", "Straight", "Stepline"], defaultValue: "Smooth", }, + { + label: "Colours", + key: "palette", + control: OptionSelect, + defaultValue: "Palette 1", + options: [ + "Palette 1", + "Palette 2", + "Palette 3", + "Palette 4", + "Palette 5", + "Palette 6", + "Palette 7", + "Palette 8", + "Palette 9", + "Palette 10", + ], + }, { label: "Data Labels", key: "dataLabels", @@ -741,6 +795,24 @@ export default { control: Input, defaultValue: "200", }, + { + label: "Colours", + key: "palette", + control: OptionSelect, + defaultValue: "Palette 1", + options: [ + "Palette 1", + "Palette 2", + "Palette 3", + "Palette 4", + "Palette 5", + "Palette 6", + "Palette 7", + "Palette 8", + "Palette 9", + "Palette 10", + ], + }, { label: "Data Labels", key: "dataLabels", @@ -805,6 +877,24 @@ export default { control: Input, defaultValue: "200", }, + { + label: "Colours", + key: "palette", + control: OptionSelect, + defaultValue: "Palette 1", + options: [ + "Palette 1", + "Palette 2", + "Palette 3", + "Palette 4", + "Palette 5", + "Palette 6", + "Palette 7", + "Palette 8", + "Palette 9", + "Palette 10", + ], + }, { label: "Data Labels", key: "dataLabels", diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 6853ab7ffd..5b258c3c17 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -424,6 +424,22 @@ "options": [ "Default", "Thousands", "Millions" ] + }, + "palette": { + "type": "options", + "default": "Palette 1", + "options": [ + "Palette 1", + "Palette 2", + "Palette 3", + "Palette 4", + "Palette 5", + "Palette 6", + "Palette 7", + "Palette 8", + "Palette 9", + "Palette 10" + ] } } }, @@ -466,6 +482,22 @@ "options": [ "Default", "Thousands", "Millions" ] + }, + "palette": { + "type": "options", + "default": "Palette 1", + "options": [ + "Palette 1", + "Palette 2", + "Palette 3", + "Palette 4", + "Palette 5", + "Palette 6", + "Palette 7", + "Palette 8", + "Palette 9", + "Palette 10" + ] } } }, @@ -513,6 +545,22 @@ "options": [ "Default", "Thousands", "Millions" ] + }, + "palette": { + "type": "options", + "default": "Palette 1", + "options": [ + "Palette 1", + "Palette 2", + "Palette 3", + "Palette 4", + "Palette 5", + "Palette 6", + "Palette 7", + "Palette 8", + "Palette 9", + "Palette 10" + ] } } }, @@ -537,6 +585,22 @@ "legend": { "type": "bool", "default": true + }, + "palette": { + "type": "options", + "default": "Palette 1", + "options": [ + "Palette 1", + "Palette 2", + "Palette 3", + "Palette 4", + "Palette 5", + "Palette 6", + "Palette 7", + "Palette 8", + "Palette 9", + "Palette 10" + ] } } }, @@ -561,6 +625,22 @@ "legend": { "type": "bool", "default": true + }, + "palette": { + "type": "options", + "default": "Palette 1", + "options": [ + "Palette 1", + "Palette 2", + "Palette 3", + "Palette 4", + "Palette 5", + "Palette 6", + "Palette 7", + "Palette 8", + "Palette 9", + "Palette 10" + ] } } }, diff --git a/packages/standard-components/src/Chart/ApexOptionsBuilder.js b/packages/standard-components/src/Chart/ApexOptionsBuilder.js index 93b0bdb685..5c2ae1eb05 100644 --- a/packages/standard-components/src/Chart/ApexOptionsBuilder.js +++ b/packages/standard-components/src/Chart/ApexOptionsBuilder.js @@ -144,4 +144,11 @@ export class ApexOptionsBuilder { yTooltip(yTooltip) { return this.setOption(["yaxis", "tooltip", "enabled"], yTooltip) } + + palette(palette) { + return this.setOption( + ["theme", "palette"], + palette.toLowerCase().replace(/[\W]/g, "") + ) + } } diff --git a/packages/standard-components/src/Chart/BarChart.svelte b/packages/standard-components/src/Chart/BarChart.svelte index 0946204e9d..9fdc649dfa 100644 --- a/packages/standard-components/src/Chart/BarChart.svelte +++ b/packages/standard-components/src/Chart/BarChart.svelte @@ -27,6 +27,7 @@ export let legend export let stacked export let yAxisUnits + export let palette const store = _bb.store let options @@ -66,6 +67,7 @@ .legend(legend) .stacked(stacked) .yUnits(yAxisUnits) + .palette(palette) // Add data let useDates = false diff --git a/packages/standard-components/src/Chart/LineChart.svelte b/packages/standard-components/src/Chart/LineChart.svelte index db14b5c337..866a672491 100644 --- a/packages/standard-components/src/Chart/LineChart.svelte +++ b/packages/standard-components/src/Chart/LineChart.svelte @@ -21,6 +21,7 @@ export let curve export let legend export let yAxisUnits + export let palette // Area specific props export let area @@ -67,6 +68,7 @@ .stacked(stacked) .legend(legend) .yUnits(yAxisUnits) + .palette(palette) // Add data let useDates = false diff --git a/packages/standard-components/src/Chart/PieChart.svelte b/packages/standard-components/src/Chart/PieChart.svelte index 9fec69b1bd..75cf1d5c6a 100644 --- a/packages/standard-components/src/Chart/PieChart.svelte +++ b/packages/standard-components/src/Chart/PieChart.svelte @@ -17,6 +17,7 @@ export let animate export let legend export let donut + export let palette const store = _bb.store let options @@ -50,6 +51,7 @@ .animate(animate) .legend(legend) .legendPosition("right") + .palette(palette) // Add data if valid datasource const series = data.map(row => parseFloat(row[valueColumn]))