Merge pull request #7237 from Budibase/feature/custom-colour-charts
Custom colour palette for charts
This commit is contained in:
commit
812bddcd61
6 changed files with 276 additions and 14 deletions
|
@ -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",
|
||||
|
|
|
@ -10,7 +10,9 @@
|
|||
</script>
|
||||
|
||||
{#if options}
|
||||
{#key options.customColor}
|
||||
<div use:chart={options} use:styleable={$component.styles} />
|
||||
{/key}
|
||||
{:else if $builderStore.inBuilder}
|
||||
<div use:styleable={$component.styles}>
|
||||
<Placeholder />
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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]))
|
||||
|
|
Loading…
Reference in a new issue