From 1c14a71ef8834abe625cc50800b05272c0f46d0b Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 14 May 2024 09:49:53 +0100
Subject: [PATCH] remove palette name

---
 packages/client/manifest.json                 | 168 +++++++++---------
 .../components/app/charts/ApexChart.svelte    |   1 -
 .../components/app/charts/AreaChart.svelte    |   4 +-
 .../src/components/app/charts/BarChart.svelte |   4 +-
 .../components/app/charts/DonutChart.svelte   |   4 +-
 .../app/charts/HistogramChart.svelte          |   3 +-
 .../components/app/charts/LineChart.svelte    |   4 +-
 .../src/components/app/charts/PieChart.svelte |   4 +-
 .../client/src/components/app/charts/utils.js |  11 ++
 9 files changed, 107 insertions(+), 96 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index fb87020148..12d52a2547 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1714,19 +1714,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "palette1",
+        "defaultValue": "Palette 1",
         "options": [
-          { "label": "Custom", "value": "Custom" },
-          { "label": "Palette 1", "value": "palette1" },
-          { "label": "Palette 2", "value": "palette2" },
-          { "label": "Palette 3", "value": "palette3" },
-          { "label": "Palette 4", "value": "palette4" },
-          { "label": "Palette 5", "value": "palette5" },
-          { "label": "Palette 6", "value": "palette6" },
-          { "label": "Palette 7", "value": "palette7" },
-          { "label": "Palette 8", "value": "palette8" },
-          { "label": "Palette 9", "value": "palette9" },
-          { "label": "Palette 10", "value": "palette10" }
+          "Custom",
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
         ]
       },
       {
@@ -1883,19 +1883,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "palette1",
+        "defaultValue": "Palette 1",
         "options": [
-          { "label": "Custom", "value": "Custom" },
-          { "label": "Palette 1", "value": "palette1" },
-          { "label": "Palette 2", "value": "palette2" },
-          { "label": "Palette 3", "value": "palette3" },
-          { "label": "Palette 4", "value": "palette4" },
-          { "label": "Palette 5", "value": "palette5" },
-          { "label": "Palette 6", "value": "palette6" },
-          { "label": "Palette 7", "value": "palette7" },
-          { "label": "Palette 8", "value": "palette8" },
-          { "label": "Palette 9", "value": "palette9" },
-          { "label": "Palette 10", "value": "palette10" }
+          "Custom",
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
         ]
       },
       {
@@ -2047,19 +2047,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "palette1",
+        "defaultValue": "Palette 1",
         "options": [
-          { "label": "Custom", "value": "Custom" },
-          { "label": "Palette 1", "value": "palette1" },
-          { "label": "Palette 2", "value": "palette2" },
-          { "label": "Palette 3", "value": "palette3" },
-          { "label": "Palette 4", "value": "palette4" },
-          { "label": "Palette 5", "value": "palette5" },
-          { "label": "Palette 6", "value": "palette6" },
-          { "label": "Palette 7", "value": "palette7" },
-          { "label": "Palette 8", "value": "palette8" },
-          { "label": "Palette 9", "value": "palette9" },
-          { "label": "Palette 10", "value": "palette10" }
+          "Custom",
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
         ]
       },
       {
@@ -2206,19 +2206,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "palette1",
+        "defaultValue": "Palette 1",
         "options": [
-          { "label": "Custom", "value": "Custom" },
-          { "label": "Palette 1", "value": "palette1" },
-          { "label": "Palette 2", "value": "palette2" },
-          { "label": "Palette 3", "value": "palette3" },
-          { "label": "Palette 4", "value": "palette4" },
-          { "label": "Palette 5", "value": "palette5" },
-          { "label": "Palette 6", "value": "palette6" },
-          { "label": "Palette 7", "value": "palette7" },
-          { "label": "Palette 8", "value": "palette8" },
-          { "label": "Palette 9", "value": "palette9" },
-          { "label": "Palette 10", "value": "palette10" }
+          "Custom",
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
         ]
       },
       {
@@ -2346,19 +2346,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "palette1",
+        "defaultValue": "Palette 1",
         "options": [
-          { "label": "Custom", "value": "Custom" },
-          { "label": "Palette 1", "value": "palette1" },
-          { "label": "Palette 2", "value": "palette2" },
-          { "label": "Palette 3", "value": "palette3" },
-          { "label": "Palette 4", "value": "palette4" },
-          { "label": "Palette 5", "value": "palette5" },
-          { "label": "Palette 6", "value": "palette6" },
-          { "label": "Palette 7", "value": "palette7" },
-          { "label": "Palette 8", "value": "palette8" },
-          { "label": "Palette 9", "value": "palette9" },
-          { "label": "Palette 10", "value": "palette10" }
+          "Custom",
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
         ]
       },
       {
@@ -2615,19 +2615,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "palette1",
+        "defaultValue": "Palette 1",
         "options": [
-          { "label": "Custom", "value": "Custom" },
-          { "label": "Palette 1", "value": "palette1" },
-          { "label": "Palette 2", "value": "palette2" },
-          { "label": "Palette 3", "value": "palette3" },
-          { "label": "Palette 4", "value": "palette4" },
-          { "label": "Palette 5", "value": "palette5" },
-          { "label": "Palette 6", "value": "palette6" },
-          { "label": "Palette 7", "value": "palette7" },
-          { "label": "Palette 8", "value": "palette8" },
-          { "label": "Palette 9", "value": "palette9" },
-          { "label": "Palette 10", "value": "palette10" }
+          "Custom",
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
         ]
       },
       {
@@ -5292,19 +5292,19 @@
         "type": "select",
         "label": "Colors",
         "key": "palette",
-        "defaultValue": "palette1",
+        "defaultValue": "Palette 1",
         "options": [
-          { "label": "Custom", "value": "Custom" },
-          { "label": "Palette 1", "value": "palette1" },
-          { "label": "Palette 2", "value": "palette2" },
-          { "label": "Palette 3", "value": "palette3" },
-          { "label": "Palette 4", "value": "palette4" },
-          { "label": "Palette 5", "value": "palette5" },
-          { "label": "Palette 6", "value": "palette6" },
-          { "label": "Palette 7", "value": "palette7" },
-          { "label": "Palette 8", "value": "palette8" },
-          { "label": "Palette 9", "value": "palette9" },
-          { "label": "Palette 10", "value": "palette10" }
+          "Custom",
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
         ]
       },
       {
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 1fd3cffdce..2e1bd6d37b 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -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.
   $: optionsCopy = cloneDeep(options)
-  $: console.log(options, optionsCopy)
 
   let chartElement
   let chart
diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index 626f2e041a..0db493565c 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import { formatters } from "./utils"
+  import { formatters, parsePalette } from "./utils"
 
   export let title
   export let dataProvider
@@ -41,7 +41,7 @@
     },
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette,
+      palette: parsePalette(palette),
     },
     fill,
     legend: {
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index eded24ad63..127cb98e23 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import { formatters } from "./utils"
+  import { formatters, parsePalette } from "./utils"
 
   export let dataProvider
   export let labelColumn
@@ -34,7 +34,7 @@
     series,
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette,
+      palette: parsePalette(palette),
     },
     legend: {
       show: legend,
diff --git a/packages/client/src/components/app/charts/DonutChart.svelte b/packages/client/src/components/app/charts/DonutChart.svelte
index 85317b1d01..e9ed4e14be 100644
--- a/packages/client/src/components/app/charts/DonutChart.svelte
+++ b/packages/client/src/components/app/charts/DonutChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import { formatters } from "./utils"
+  import { formatters, parsePalette } from "./utils"
 
   export let title
   export let dataProvider
@@ -26,7 +26,7 @@
     labels,
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette,
+      palette: parsePalette(palette),
     },
     legend: {
       show: legend,
diff --git a/packages/client/src/components/app/charts/HistogramChart.svelte b/packages/client/src/components/app/charts/HistogramChart.svelte
index 294a2b9aed..37c395d45f 100644
--- a/packages/client/src/components/app/charts/HistogramChart.svelte
+++ b/packages/client/src/components/app/charts/HistogramChart.svelte
@@ -1,5 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
+  import { parsePalette } from "./utils"
 
   export let dataProvider
   export let valueColumn
@@ -25,7 +26,7 @@
     series,
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette,
+      palette: parsePalette(palette),
     },
     title: {
       text: title,
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index b1325950ab..445695cd35 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import { formatters } from "./utils"
+  import { formatters, parsePalette } from "./utils"
 
   export let title
   export let dataProvider
@@ -35,7 +35,7 @@
     },
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette,
+      palette: parsePalette(palette),
     },
     legend: {
       show: legend,
diff --git a/packages/client/src/components/app/charts/PieChart.svelte b/packages/client/src/components/app/charts/PieChart.svelte
index 413bf93b54..ed5413e0d9 100644
--- a/packages/client/src/components/app/charts/PieChart.svelte
+++ b/packages/client/src/components/app/charts/PieChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import { formatters } from "./utils"
+  import { formatters, parsePalette } from "./utils"
 
   export let title
   export let dataProvider
@@ -26,7 +26,7 @@
     labels,
     colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
     theme: {
-      palette: palette === "Custom" ? null : palette,
+      palette: parsePalette(palette),
     },
     legend: {
       show: legend,
diff --git a/packages/client/src/components/app/charts/utils.js b/packages/client/src/components/app/charts/utils.js
index f481c99bc0..a2ecc14819 100644
--- a/packages/client/src/components/app/charts/utils.js
+++ b/packages/client/src/components/app/charts/utils.js
@@ -5,6 +5,17 @@ export const formatters = {
   ["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
 export const cloneDeep = (value) => {
   const typesToNaiveCopy = ["string", "boolean", "number", "function", "symbol"]