CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-19 21:26:22 +12:00
Code Issues Projects Releases Wiki Activity

Merge pull request #7237 from Budibase/feature/custom-colour-charts

Browse source 
Custom colour palette for charts
This commit is contained in:
melohagan 2022-08-12 15:33:57 +01:00 committed by GitHub
parent 9b3086dad5 dd2b2139bb
commit 812bddcd61
6 changed files with 276 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

240
packages/client/manifest.json
View file

@ -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,51 @@
"Palette 10"
]
},
{
"type": "color",
"label": "C1",
"key": "c1",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C2",
"key": "c2",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C3",
"key": "c3",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C4",
"key": "c4",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C5",
"key": "c5",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "boolean",
"label": "Stacked",
@ -1581,10 +1627,11 @@
},
{
"type": "select",
"label": "Colours",
"label": "Colors",
"key": "palette",
"defaultValue": "Palette 1",
"options": [
"Custom",
"Palette 1",
"Palette 2",
"Palette 3",
@ -1597,6 +1644,51 @@
"Palette 10"
]
},
{
"type": "color",
"label": "C1",
"key": "c1",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C2",
"key": "c2",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C3",
"key": "c3",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C4",
"key": "c4",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C5",
"key": "c5",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "select",
"label": "Curve",
@ -1695,10 +1787,11 @@
},
{
"type": "select",
"label": "Colours",
"label": "Colors",
"key": "palette",
"defaultValue": "Palette 1",
"options": [
"Custom",
"Palette 1",
"Palette 2",
"Palette 3",
@ -1711,6 +1804,51 @@
"Palette 10"
]
},
{
"type": "color",
"label": "C1",
"key": "c1",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C2",
"key": "c2",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C3",
"key": "c3",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C4",
"key": "c4",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C5",
"key": "c5",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "select",
"label": "Curve",
@ -1800,10 +1938,11 @@
},
{
"type": "select",
"label": "Colours",
"label": "Colors",
"key": "palette",
"defaultValue": "Palette 1",
"options": [
"Custom",
"Palette 1",
"Palette 2",
"Palette 3",
@ -1816,6 +1955,51 @@
"Palette 10"
]
},
{
"type": "color",
"label": "C1",
"key": "c1",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C2",
"key": "c2",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C3",
"key": "c3",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C4",
"key": "c4",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C5",
"key": "c5",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "boolean",
"label": "Data Labels",
@ -1882,10 +2066,11 @@
},
{
"type": "select",
"label": "Colours",
"label": "Colors",
"key": "palette",
"defaultValue": "Palette 1",
"options": [
"Custom",
"Palette 1",
"Palette 2",
"Palette 3",
@ -1898,6 +2083,51 @@
"Palette 10"
]
},
{
"type": "color",
"label": "C1",
"key": "c1",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C2",
"key": "c2",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C3",
"key": "c3",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C4",
"key": "c4",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C5",
"key": "c5",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "boolean",
"label": "Data Labels",

4
packages/client/src/components/app/charts/ApexChart.svelte
View file

@ -10,7 +10,9 @@
</script>
{#if options}
<div use:chart={options} use:styleable={$component.styles} />
{#key options.customColor}
<div use:chart={options} use:styleable={$component.styles} />
{/key}
{:else if $builderStore.inBuilder}
<div use:styleable={$component.styles}>
<Placeholder />

10
packages/client/src/components/app/charts/ApexOptionsBuilder.js
View file

@ -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) {

12
packages/client/src/components/app/charts/BarChart.svelte
View file

@ -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 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : 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

12
packages/client/src/components/app/charts/LineChart.svelte
View file

@ -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

12
packages/client/src/components/app/charts/PieChart.svelte
View file

@ -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]))