From 864f8756bcd0bedf14c54d4cd4bed67658d47a4d Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Thu, 11 Aug 2022 17:52:09 +0100
Subject: [PATCH] Custom colors line chart

---
 packages/client/manifest.json                 | 53 ++++++++++++++++++-
 .../components/app/charts/LineChart.svelte    | 12 ++++-
 2 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index ac6de1ba39..19b4ef8040 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1632,10 +1632,11 @@
       },
       {
         "type": "select",
-        "label": "Colours",
+        "label": "Colors",
         "key": "palette",
         "defaultValue": "Palette 1",
         "options": [
+          "Custom",
           "Palette 1",
           "Palette 2",
           "Palette 3",
@@ -1648,6 +1649,56 @@
           "Palette 10"
         ]
       },
+      {
+        "type": "color",
+        "label": "C1",
+        "key": "c1",
+        "barSeparator": false,
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C2",
+        "key": "c2",
+        "barSeparator": false,
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C3",
+        "key": "c3",
+        "barSeparator": false,
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C4",
+        "key": "c4",
+        "barSeparator": false,
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C5",
+        "key": "c5",
+        "barSeparator": false,
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
       {
         "type": "select",
         "label": "Curve",
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index afb9f14262..7f82a833d2 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -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