MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add colour palette options for charts

This commit is contained in:
Andrew Kingston 2020-11-05 13:37:28 +00:00
parent 2cf7f66d9b
commit 951f5e1db5
6 changed files with 183 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -480,6 +480,24 @@ export default {
control: Input, control: Input,
defaultValue: "400", defaultValue: "400",
}, },
{
label: "Colours",
key: "palette",
control: OptionSelect,
defaultValue: "Palette 1",
options: [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10",
],
},
{ {
label: "Stacked", label: "Stacked",
key: "stacked", key: "stacked",
@ -575,6 +593,24 @@ export default {
options: ["Smooth", "Straight", "Stepline"], options: ["Smooth", "Straight", "Stepline"],
defaultValue: "Smooth", defaultValue: "Smooth",
}, },
{
label: "Colours",
key: "palette",
control: OptionSelect,
defaultValue: "Palette 1",
options: [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10",
],
},
{ {
label: "Data Labels", label: "Data Labels",
key: "dataLabels", key: "dataLabels",
@ -663,6 +699,24 @@ export default {
options: ["Smooth", "Straight", "Stepline"], options: ["Smooth", "Straight", "Stepline"],
defaultValue: "Smooth", defaultValue: "Smooth",
}, },
{
label: "Colours",
key: "palette",
control: OptionSelect,
defaultValue: "Palette 1",
options: [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10",
],
},
{ {
label: "Data Labels", label: "Data Labels",
key: "dataLabels", key: "dataLabels",
@ -741,6 +795,24 @@ export default {
control: Input, control: Input,
defaultValue: "200", defaultValue: "200",
}, },
{
label: "Colours",
key: "palette",
control: OptionSelect,
defaultValue: "Palette 1",
options: [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10",
],
},
{ {
label: "Data Labels", label: "Data Labels",
key: "dataLabels", key: "dataLabels",
@ -805,6 +877,24 @@ export default {
control: Input, control: Input,
defaultValue: "200", defaultValue: "200",
}, },
{
label: "Colours",
key: "palette",
control: OptionSelect,
defaultValue: "Palette 1",
options: [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10",
],
},
{ {
label: "Data Labels", label: "Data Labels",
key: "dataLabels", key: "dataLabels",

80
packages/standard-components/components.json
View File

@ -424,6 +424,22 @@
"options": [ "options": [
"Default", "Thousands", "Millions" "Default", "Thousands", "Millions"
] ]
},
"palette": {
"type": "options",
"default": "Palette 1",
"options": [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10"
]
} }
} }
}, },
@ -466,6 +482,22 @@
"options": [ "options": [
"Default", "Thousands", "Millions" "Default", "Thousands", "Millions"
] ]
},
"palette": {
"type": "options",
"default": "Palette 1",
"options": [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10"
]
} }
} }
}, },
@ -513,6 +545,22 @@
"options": [ "options": [
"Default", "Thousands", "Millions" "Default", "Thousands", "Millions"
] ]
},
"palette": {
"type": "options",
"default": "Palette 1",
"options": [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10"
]
} }
} }
}, },
@ -537,6 +585,22 @@
"legend": { "legend": {
"type": "bool", "type": "bool",
"default": true "default": true
},
"palette": {
"type": "options",
"default": "Palette 1",
"options": [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10"
]
} }
} }
}, },
@ -561,6 +625,22 @@
"legend": { "legend": {
"type": "bool", "type": "bool",
"default": true "default": true
},
"palette": {
"type": "options",
"default": "Palette 1",
"options": [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10"
]
} }
} }
}, },

7
packages/standard-components/src/Chart/ApexOptionsBuilder.js
View File

@ -144,4 +144,11 @@ export class ApexOptionsBuilder {
yTooltip(yTooltip) { yTooltip(yTooltip) {
return this.setOption(["yaxis", "tooltip", "enabled"], yTooltip) return this.setOption(["yaxis", "tooltip", "enabled"], yTooltip)
} }
palette(palette) {
return this.setOption(
["theme", "palette"],
palette.toLowerCase().replace(/[\W]/g, "")
)
}
} }

2
packages/standard-components/src/Chart/BarChart.svelte
View File

@ -27,6 +27,7 @@
export let legend export let legend
export let stacked export let stacked
export let yAxisUnits export let yAxisUnits
export let palette
const store = _bb.store const store = _bb.store
let options let options
@ -66,6 +67,7 @@
.legend(legend) .legend(legend)
.stacked(stacked) .stacked(stacked)
.yUnits(yAxisUnits) .yUnits(yAxisUnits)
.palette(palette)
// Add data // Add data
let useDates = false let useDates = false

2
packages/standard-components/src/Chart/LineChart.svelte
View File

@ -21,6 +21,7 @@
export let curve export let curve
export let legend export let legend
export let yAxisUnits export let yAxisUnits
export let palette
// Area specific props // Area specific props
export let area export let area
@ -67,6 +68,7 @@
.stacked(stacked) .stacked(stacked)
.legend(legend) .legend(legend)
.yUnits(yAxisUnits) .yUnits(yAxisUnits)
.palette(palette)
// Add data // Add data
let useDates = false let useDates = false

2
packages/standard-components/src/Chart/PieChart.svelte
View File

@ -17,6 +17,7 @@
export let animate export let animate
export let legend export let legend
export let donut export let donut
export let palette
const store = _bb.store const store = _bb.store
let options let options
@ -50,6 +51,7 @@
.animate(animate) .animate(animate)
.legend(legend) .legend(legend)
.legendPosition("right") .legendPosition("right")
.palette(palette)
// Add data if valid datasource // Add data if valid datasource
const series = data.map(row => parseFloat(row[valueColumn])) const series = data.map(row => parseFloat(row[valueColumn]))