1
0
Fork 0
mirror of synced 2024-06-16 17:34:41 +12:00

Custom color bar chart

This commit is contained in:
Mel O'Hagan 2022-08-11 15:31:39 +01:00
parent 77ad2b3a88
commit 38e8971019
4 changed files with 33 additions and 6 deletions

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,16 @@
"Palette 10"
]
},
{
"type": "color",
"label": "C1",
"key": "c1",
"barSeparator": false,
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "boolean",
"label": "Stacked",

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

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

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 ? [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