From 7c13d3ded9761bd33e8da56ae82ea780953e73dd Mon Sep 17 00:00:00 2001 From: Mel O'Hagan Date: Thu, 11 Aug 2022 15:31:39 +0100 Subject: [PATCH 1/6] Custom color bar chart --- packages/client/manifest.json | 13 ++++++++++++- .../src/components/app/charts/ApexChart.svelte | 4 +++- .../src/components/app/charts/ApexOptionsBuilder.js | 10 ++++++++-- .../src/components/app/charts/BarChart.svelte | 12 ++++++++++-- 4 files changed, 33 insertions(+), 6 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 0368b43562..3394a94203 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -1466,10 +1466,11 @@ }, { "type": "select", - "label": "Colours", + "label": "Colors", "key": "palette", "defaultValue": "Palette 1", "options": [ + "Custom", "Palette 1", "Palette 2", "Palette 3", @@ -1482,6 +1483,16 @@ "Palette 10" ] }, + { + "type": "color", + "label": "C1", + "key": "c1", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, { "type": "boolean", "label": "Stacked", diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte index 7bb37a587b..87d78bf5a2 100644 --- a/packages/client/src/components/app/charts/ApexChart.svelte +++ b/packages/client/src/components/app/charts/ApexChart.svelte @@ -10,7 +10,9 @@ {#if options} -
+ {#key options.customColor} +
+ {/key} {:else if $builderStore.inBuilder}
diff --git a/packages/client/src/components/app/charts/ApexOptionsBuilder.js b/packages/client/src/components/app/charts/ApexOptionsBuilder.js index ef4083d648..31c5a820f7 100644 --- a/packages/client/src/components/app/charts/ApexOptionsBuilder.js +++ b/packages/client/src/components/app/charts/ApexOptionsBuilder.js @@ -62,8 +62,14 @@ export class ApexOptionsBuilder { return this.setOption(["title", "text"], title) } - color(color) { - return this.setOption(["colors"], [color]) + colors(colors) { + if (!colors) { + delete this.options.colors + this.options["customColor"] = false + return this + } + this.options["customColor"] = true + return this.setOption(["colors"], colors) } width(width) { diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte index f1e02d8af6..75c147f5d4 100644 --- a/packages/client/src/components/app/charts/BarChart.svelte +++ b/packages/client/src/components/app/charts/BarChart.svelte @@ -16,6 +16,7 @@ export let stacked export let yAxisUnits export let palette + export let c1, c2, c3, c4, c5 export let horizontal $: options = setUpChart( @@ -33,9 +34,13 @@ stacked, yAxisUnits, palette, - horizontal + horizontal, + c1 ? [c1] : null, + customColor ) + $: customColor = palette === "Custom" + const setUpChart = ( title, dataProvider, @@ -51,7 +56,9 @@ stacked, yAxisUnits, palette, - horizontal + horizontal, + colors, + customColor ) => { const allCols = [labelColumn, ...(valueColumns || [null])] if ( @@ -85,6 +92,7 @@ .stacked(stacked) .palette(palette) .horizontal(horizontal) + .colors(customColor ? colors : null) // Add data let useDates = false From 352d236f2ed02c4a74ac3f0f821da6dff49efd46 Mon Sep 17 00:00:00 2001 From: Mel O'Hagan Date: Thu, 11 Aug 2022 16:59:50 +0100 Subject: [PATCH 2/6] Custom colors for Pie Chart --- packages/client/manifest.json | 66 ++++++++++++++++++- .../src/components/app/charts/PieChart.svelte | 12 +++- 2 files changed, 74 insertions(+), 4 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 3394a94203..a60e5c6b15 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -1811,10 +1811,11 @@ }, { "type": "select", - "label": "Colours", + "label": "Colors", "key": "palette", "defaultValue": "Palette 1", "options": [ + "Custom", "Palette 1", "Palette 2", "Palette 3", @@ -1827,6 +1828,56 @@ "Palette 10" ] }, + { + "type": "color", + "label": "C1", + "key": "c1", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C2", + "key": "c2", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C3", + "key": "c3", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C4", + "key": "c4", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C5", + "key": "c5", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, { "type": "boolean", "label": "Data Labels", @@ -1893,10 +1944,11 @@ }, { "type": "select", - "label": "Colours", + "label": "Colors", "key": "palette", "defaultValue": "Palette 1", "options": [ + "Custom", "Palette 1", "Palette 2", "Palette 3", @@ -1909,6 +1961,16 @@ "Palette 10" ] }, + { + "type": "color", + "label": "Color", + "key": "color", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, { "type": "boolean", "label": "Data Labels", diff --git a/packages/client/src/components/app/charts/PieChart.svelte b/packages/client/src/components/app/charts/PieChart.svelte index 38a42ee37b..8cb7317d94 100644 --- a/packages/client/src/components/app/charts/PieChart.svelte +++ b/packages/client/src/components/app/charts/PieChart.svelte @@ -13,6 +13,7 @@ export let legend export let donut export let palette + export let c1, c2, c3, c4, c5 $: options = setUpChart( title, @@ -25,9 +26,13 @@ animate, legend, donut, - palette + palette, + c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null, + customColor ) + $: customColor = palette === "Custom" + const setUpChart = ( title, dataProvider, @@ -39,7 +44,9 @@ animate, legend, donut, - palette + palette, + colors, + customColor ) => { if ( !dataProvider || @@ -70,6 +77,7 @@ .legend(legend) .legendPosition("right") .palette(palette) + .colors(customColor ? colors : null) // Add data if valid datasource const series = data.map(row => parseFloat(row[valueColumn])) From 255434a7147be670c7ba64f52a9e6769c2d1e07e Mon Sep 17 00:00:00 2001 From: Mel O'Hagan Date: Thu, 11 Aug 2022 17:45:46 +0100 Subject: [PATCH 3/6] Add colors for Bar and Donut Charts --- packages/client/manifest.json | 84 ++++++++++++++++++- .../src/components/app/charts/BarChart.svelte | 2 +- 2 files changed, 83 insertions(+), 3 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index a60e5c6b15..ac6de1ba39 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -1493,6 +1493,46 @@ "value": "Custom" } }, + { + "type": "color", + "label": "C2", + "key": "c2", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C3", + "key": "c3", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C4", + "key": "c4", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C5", + "key": "c5", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, { "type": "boolean", "label": "Stacked", @@ -1963,8 +2003,48 @@ }, { "type": "color", - "label": "Color", - "key": "color", + "label": "C1", + "key": "c1", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C2", + "key": "c2", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C3", + "key": "c3", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C4", + "key": "c4", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C5", + "key": "c5", "barSeparator": false, "dependsOn": { "setting": "palette", diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte index 75c147f5d4..fd8443e2d6 100644 --- a/packages/client/src/components/app/charts/BarChart.svelte +++ b/packages/client/src/components/app/charts/BarChart.svelte @@ -35,7 +35,7 @@ yAxisUnits, palette, horizontal, - c1 ? [c1] : null, + c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null, customColor ) From a51a8d1c6d27ae177c016461839bb69094549cc3 Mon Sep 17 00:00:00 2001 From: Mel O'Hagan Date: Thu, 11 Aug 2022 17:52:09 +0100 Subject: [PATCH 4/6] Custom colors line chart --- packages/client/manifest.json | 53 ++++++++++++++++++- .../components/app/charts/LineChart.svelte | 12 ++++- 2 files changed, 62 insertions(+), 3 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index ac6de1ba39..19b4ef8040 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -1632,10 +1632,11 @@ }, { "type": "select", - "label": "Colours", + "label": "Colors", "key": "palette", "defaultValue": "Palette 1", "options": [ + "Custom", "Palette 1", "Palette 2", "Palette 3", @@ -1648,6 +1649,56 @@ "Palette 10" ] }, + { + "type": "color", + "label": "C1", + "key": "c1", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C2", + "key": "c2", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C3", + "key": "c3", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C4", + "key": "c4", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C5", + "key": "c5", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, { "type": "select", "label": "Curve", diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte index afb9f14262..7f82a833d2 100644 --- a/packages/client/src/components/app/charts/LineChart.svelte +++ b/packages/client/src/components/app/charts/LineChart.svelte @@ -17,6 +17,7 @@ export let legend export let yAxisUnits export let palette + export let c1, c2, c3, c4, c5 // Area specific props export let area @@ -40,9 +41,13 @@ palette, area, stacked, - gradient + gradient, + c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null, + customColor ) + $: customColor = palette === "Custom" + const setUpChart = ( title, dataProvider, @@ -60,7 +65,9 @@ palette, area, stacked, - gradient + gradient, + colors, + customColor ) => { const allCols = [labelColumn, ...(valueColumns || [null])] if ( @@ -96,6 +103,7 @@ .legend(legend) .yUnits(yAxisUnits) .palette(palette) + .colors(customColor ? colors : null) // Add data let useDates = false From e45cb32c1418cce0af2a615b9615b09f6bc1f33f Mon Sep 17 00:00:00 2001 From: Mel O'Hagan Date: Thu, 11 Aug 2022 17:59:38 +0100 Subject: [PATCH 5/6] Custom colors Area Chart --- packages/client/manifest.json | 53 ++++++++++++++++++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 19b4ef8040..f5848356df 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -1797,10 +1797,11 @@ }, { "type": "select", - "label": "Colours", + "label": "Colors", "key": "palette", "defaultValue": "Palette 1", "options": [ + "Custom", "Palette 1", "Palette 2", "Palette 3", @@ -1813,6 +1814,56 @@ "Palette 10" ] }, + { + "type": "color", + "label": "C1", + "key": "c1", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C2", + "key": "c2", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C3", + "key": "c3", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C4", + "key": "c4", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C5", + "key": "c5", + "barSeparator": false, + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, { "type": "select", "label": "Curve", From dd2b2139bb8158eec2c81237cf68c660323b341f Mon Sep 17 00:00:00 2001 From: Mel O'Hagan Date: Fri, 12 Aug 2022 14:37:52 +0100 Subject: [PATCH 6/6] Remove unused barSeparator --- packages/client/manifest.json | 25 ------------------------- 1 file changed, 25 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index f5848356df..14f02cbe5e 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -1487,7 +1487,6 @@ "type": "color", "label": "C1", "key": "c1", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1497,7 +1496,6 @@ "type": "color", "label": "C2", "key": "c2", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1507,7 +1505,6 @@ "type": "color", "label": "C3", "key": "c3", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1517,7 +1514,6 @@ "type": "color", "label": "C4", "key": "c4", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1527,7 +1523,6 @@ "type": "color", "label": "C5", "key": "c5", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1653,7 +1648,6 @@ "type": "color", "label": "C1", "key": "c1", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1663,7 +1657,6 @@ "type": "color", "label": "C2", "key": "c2", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1673,7 +1666,6 @@ "type": "color", "label": "C3", "key": "c3", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1683,7 +1675,6 @@ "type": "color", "label": "C4", "key": "c4", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1693,7 +1684,6 @@ "type": "color", "label": "C5", "key": "c5", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1818,7 +1808,6 @@ "type": "color", "label": "C1", "key": "c1", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1828,7 +1817,6 @@ "type": "color", "label": "C2", "key": "c2", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1838,7 +1826,6 @@ "type": "color", "label": "C3", "key": "c3", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1848,7 +1835,6 @@ "type": "color", "label": "C4", "key": "c4", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1858,7 +1844,6 @@ "type": "color", "label": "C5", "key": "c5", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1974,7 +1959,6 @@ "type": "color", "label": "C1", "key": "c1", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1984,7 +1968,6 @@ "type": "color", "label": "C2", "key": "c2", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -1994,7 +1977,6 @@ "type": "color", "label": "C3", "key": "c3", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -2004,7 +1986,6 @@ "type": "color", "label": "C4", "key": "c4", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -2014,7 +1995,6 @@ "type": "color", "label": "C5", "key": "c5", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -2107,7 +2087,6 @@ "type": "color", "label": "C1", "key": "c1", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -2117,7 +2096,6 @@ "type": "color", "label": "C2", "key": "c2", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -2127,7 +2105,6 @@ "type": "color", "label": "C3", "key": "c3", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -2137,7 +2114,6 @@ "type": "color", "label": "C4", "key": "c4", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom" @@ -2147,7 +2123,6 @@ "type": "color", "label": "C5", "key": "c5", - "barSeparator": false, "dependsOn": { "setting": "palette", "value": "Custom"