CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-26 18:10:51 +12:00
Code Issues Projects Releases Wiki Activity

Custom colors for Pie Chart

Browse source
This commit is contained in:
Mel O'Hagan 2022-08-11 16:59:50 +01:00
parent 38e8971019
commit d2171a4596
2 changed files with 74 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
packages/client/manifest.json
View file

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

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