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

remove palette name

This commit is contained in:
Gerard Burns 2024-05-14 09:49:53 +01:00
parent bad7a535dc
commit 1c14a71ef8
9 changed files with 107 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
packages/client/manifest.json
View File

@ -1714,19 +1714,19 @@
"type": "select", "type": "select",
"label": "Colors", "label": "Colors",
"key": "palette", "key": "palette",
"defaultValue": "palette1", "defaultValue": "Palette 1",
"options": [ "options": [
{ "label": "Custom", "value": "Custom" }, "Custom",
{ "label": "Palette 1", "value": "palette1" }, "Palette 1",
{ "label": "Palette 2", "value": "palette2" }, "Palette 2",
{ "label": "Palette 3", "value": "palette3" }, "Palette 3",
{ "label": "Palette 4", "value": "palette4" }, "Palette 4",
{ "label": "Palette 5", "value": "palette5" }, "Palette 5",
{ "label": "Palette 6", "value": "palette6" }, "Palette 6",
{ "label": "Palette 7", "value": "palette7" }, "Palette 7",
{ "label": "Palette 8", "value": "palette8" }, "Palette 8",
{ "label": "Palette 9", "value": "palette9" }, "Palette 9",
{ "label": "Palette 10", "value": "palette10" } "Palette 10"
] ]
}, },
{ {
@ -1883,19 +1883,19 @@
"type": "select", "type": "select",
"label": "Colors", "label": "Colors",
"key": "palette", "key": "palette",
"defaultValue": "palette1", "defaultValue": "Palette 1",
"options": [ "options": [
{ "label": "Custom", "value": "Custom" }, "Custom",
{ "label": "Palette 1", "value": "palette1" }, "Palette 1",
{ "label": "Palette 2", "value": "palette2" }, "Palette 2",
{ "label": "Palette 3", "value": "palette3" }, "Palette 3",
{ "label": "Palette 4", "value": "palette4" }, "Palette 4",
{ "label": "Palette 5", "value": "palette5" }, "Palette 5",
{ "label": "Palette 6", "value": "palette6" }, "Palette 6",
{ "label": "Palette 7", "value": "palette7" }, "Palette 7",
{ "label": "Palette 8", "value": "palette8" }, "Palette 8",
{ "label": "Palette 9", "value": "palette9" }, "Palette 9",
{ "label": "Palette 10", "value": "palette10" } "Palette 10"
] ]
}, },
{ {
@ -2047,19 +2047,19 @@
"type": "select", "type": "select",
"label": "Colors", "label": "Colors",
"key": "palette", "key": "palette",
"defaultValue": "palette1", "defaultValue": "Palette 1",
"options": [ "options": [
{ "label": "Custom", "value": "Custom" }, "Custom",
{ "label": "Palette 1", "value": "palette1" }, "Palette 1",
{ "label": "Palette 2", "value": "palette2" }, "Palette 2",
{ "label": "Palette 3", "value": "palette3" }, "Palette 3",
{ "label": "Palette 4", "value": "palette4" }, "Palette 4",
{ "label": "Palette 5", "value": "palette5" }, "Palette 5",
{ "label": "Palette 6", "value": "palette6" }, "Palette 6",
{ "label": "Palette 7", "value": "palette7" }, "Palette 7",
{ "label": "Palette 8", "value": "palette8" }, "Palette 8",
{ "label": "Palette 9", "value": "palette9" }, "Palette 9",
{ "label": "Palette 10", "value": "palette10" } "Palette 10"
] ]
}, },
{ {
@ -2206,19 +2206,19 @@
"type": "select", "type": "select",
"label": "Colors", "label": "Colors",
"key": "palette", "key": "palette",
"defaultValue": "palette1", "defaultValue": "Palette 1",
"options": [ "options": [
{ "label": "Custom", "value": "Custom" }, "Custom",
{ "label": "Palette 1", "value": "palette1" }, "Palette 1",
{ "label": "Palette 2", "value": "palette2" }, "Palette 2",
{ "label": "Palette 3", "value": "palette3" }, "Palette 3",
{ "label": "Palette 4", "value": "palette4" }, "Palette 4",
{ "label": "Palette 5", "value": "palette5" }, "Palette 5",
{ "label": "Palette 6", "value": "palette6" }, "Palette 6",
{ "label": "Palette 7", "value": "palette7" }, "Palette 7",
{ "label": "Palette 8", "value": "palette8" }, "Palette 8",
{ "label": "Palette 9", "value": "palette9" }, "Palette 9",
{ "label": "Palette 10", "value": "palette10" } "Palette 10"
] ]
}, },
{ {
@ -2346,19 +2346,19 @@
"type": "select", "type": "select",
"label": "Colors", "label": "Colors",
"key": "palette", "key": "palette",
"defaultValue": "palette1", "defaultValue": "Palette 1",
"options": [ "options": [
{ "label": "Custom", "value": "Custom" }, "Custom",
{ "label": "Palette 1", "value": "palette1" }, "Palette 1",
{ "label": "Palette 2", "value": "palette2" }, "Palette 2",
{ "label": "Palette 3", "value": "palette3" }, "Palette 3",
{ "label": "Palette 4", "value": "palette4" }, "Palette 4",
{ "label": "Palette 5", "value": "palette5" }, "Palette 5",
{ "label": "Palette 6", "value": "palette6" }, "Palette 6",
{ "label": "Palette 7", "value": "palette7" }, "Palette 7",
{ "label": "Palette 8", "value": "palette8" }, "Palette 8",
{ "label": "Palette 9", "value": "palette9" }, "Palette 9",
{ "label": "Palette 10", "value": "palette10" } "Palette 10"
] ]
}, },
{ {
@ -2615,19 +2615,19 @@
"type": "select", "type": "select",
"label": "Colors", "label": "Colors",
"key": "palette", "key": "palette",
"defaultValue": "palette1", "defaultValue": "Palette 1",
"options": [ "options": [
{ "label": "Custom", "value": "Custom" }, "Custom",
{ "label": "Palette 1", "value": "palette1" }, "Palette 1",
{ "label": "Palette 2", "value": "palette2" }, "Palette 2",
{ "label": "Palette 3", "value": "palette3" }, "Palette 3",
{ "label": "Palette 4", "value": "palette4" }, "Palette 4",
{ "label": "Palette 5", "value": "palette5" }, "Palette 5",
{ "label": "Palette 6", "value": "palette6" }, "Palette 6",
{ "label": "Palette 7", "value": "palette7" }, "Palette 7",
{ "label": "Palette 8", "value": "palette8" }, "Palette 8",
{ "label": "Palette 9", "value": "palette9" }, "Palette 9",
{ "label": "Palette 10", "value": "palette10" } "Palette 10"
] ]
}, },
{ {
@ -5292,19 +5292,19 @@
"type": "select", "type": "select",
"label": "Colors", "label": "Colors",
"key": "palette", "key": "palette",
"defaultValue": "palette1", "defaultValue": "Palette 1",
"options": [ "options": [
{ "label": "Custom", "value": "Custom" }, "Custom",
{ "label": "Palette 1", "value": "palette1" }, "Palette 1",
{ "label": "Palette 2", "value": "palette2" }, "Palette 2",
{ "label": "Palette 3", "value": "palette3" }, "Palette 3",
{ "label": "Palette 4", "value": "palette4" }, "Palette 4",
{ "label": "Palette 5", "value": "palette5" }, "Palette 5",
{ "label": "Palette 6", "value": "palette6" }, "Palette 6",
{ "label": "Palette 7", "value": "palette7" }, "Palette 7",
{ "label": "Palette 8", "value": "palette8" }, "Palette 8",
{ "label": "Palette 9", "value": "palette9" }, "Palette 9",
{ "label": "Palette 10", "value": "palette10" } "Palette 10"
] ]
}, },
{ {

1
packages/client/src/components/app/charts/ApexChart.svelte
View File

@ -11,7 +11,6 @@
// Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone options here to provide a buffer. // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone options here to provide a buffer.
$: optionsCopy = cloneDeep(options) $: optionsCopy = cloneDeep(options)
$: console.log(options, optionsCopy)
let chartElement let chartElement
let chart let chart

4
packages/client/src/components/app/charts/AreaChart.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import ApexChart from "./ApexChart.svelte" import ApexChart from "./ApexChart.svelte"
import { formatters } from "./utils" import { formatters, parsePalette } from "./utils"
export let title export let title
export let dataProvider export let dataProvider
@ -41,7 +41,7 @@
}, },
colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [], colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
theme: { theme: {
palette: palette === "Custom" ? null : palette, palette: parsePalette(palette),
}, },
fill, fill,
legend: { legend: {

4
packages/client/src/components/app/charts/BarChart.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import ApexChart from "./ApexChart.svelte" import ApexChart from "./ApexChart.svelte"
import { formatters } from "./utils" import { formatters, parsePalette } from "./utils"
export let dataProvider export let dataProvider
export let labelColumn export let labelColumn
@ -34,7 +34,7 @@
series, series,
colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [], colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
theme: { theme: {
palette: palette === "Custom" ? null : palette, palette: parsePalette(palette),
}, },
legend: { legend: {
show: legend, show: legend,

4
packages/client/src/components/app/charts/DonutChart.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import ApexChart from "./ApexChart.svelte" import ApexChart from "./ApexChart.svelte"
import { formatters } from "./utils" import { formatters, parsePalette } from "./utils"
export let title export let title
export let dataProvider export let dataProvider
@ -26,7 +26,7 @@
labels, labels,
colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [], colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
theme: { theme: {
palette: palette === "Custom" ? null : palette, palette: parsePalette(palette),
}, },
legend: { legend: {
show: legend, show: legend,

3
packages/client/src/components/app/charts/HistogramChart.svelte
View File

@ -1,5 +1,6 @@
<script> <script>
import ApexChart from "./ApexChart.svelte" import ApexChart from "./ApexChart.svelte"
import { parsePalette } from "./utils"
export let dataProvider export let dataProvider
export let valueColumn export let valueColumn
@ -25,7 +26,7 @@
series, series,
colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [], colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
theme: { theme: {
palette: palette === "Custom" ? null : palette, palette: parsePalette(palette),
}, },
title: { title: {
text: title, text: title,

4
packages/client/src/components/app/charts/LineChart.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import ApexChart from "./ApexChart.svelte" import ApexChart from "./ApexChart.svelte"
import { formatters } from "./utils" import { formatters, parsePalette } from "./utils"
export let title export let title
export let dataProvider export let dataProvider
@ -35,7 +35,7 @@
}, },
colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [], colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
theme: { theme: {
palette: palette === "Custom" ? null : palette, palette: parsePalette(palette),
}, },
legend: { legend: {
show: legend, show: legend,

4
packages/client/src/components/app/charts/PieChart.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import ApexChart from "./ApexChart.svelte" import ApexChart from "./ApexChart.svelte"
import { formatters } from "./utils" import { formatters, parsePalette } from "./utils"
export let title export let title
export let dataProvider export let dataProvider
@ -26,7 +26,7 @@
labels, labels,
colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [], colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
theme: { theme: {
palette: palette === "Custom" ? null : palette, palette: parsePalette(palette),
}, },
legend: { legend: {
show: legend, show: legend,

11
packages/client/src/components/app/charts/utils.js
View File

@ -5,6 +5,17 @@ export const formatters = {
["Datetime"]: val => new Date(val).toLocaleString(), ["Datetime"]: val => new Date(val).toLocaleString(),
} }
export const parsePalette = (paletteName) => {
if (paletteName === "Custom") {
// return null in this case so that the palette option doesn't get consumed by Apex Charts
return null;
}
const [_, number] = paletteName.split(" ");
return `pallete${number}`
}
// Deep clone which copies function references // Deep clone which copies function references
export const cloneDeep = (value) => { export const cloneDeep = (value) => {
const typesToNaiveCopy = ["string", "boolean", "number", "function", "symbol"] const typesToNaiveCopy = ["string", "boolean", "number", "function", "symbol"]