Merge pull request #7237 from Budibase/feature/custom-colour-charts

Custom colour palette for charts

packages/client/manifest.json

@@ -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,51 @@
           "Palette 10"
         ]
       },
+      {
+        "type": "color",
+        "label": "C1",
+        "key": "c1",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C2",
+        "key": "c2",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C3",
+        "key": "c3",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C4",
+        "key": "c4",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C5",
+        "key": "c5",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
       {
         "type": "boolean",
         "label": "Stacked",
@@ -1581,10 +1627,11 @@
       },
       {
         "type": "select",
-        "label": "Colours",
+        "label": "Colors",
         "key": "palette",
         "defaultValue": "Palette 1",
         "options": [
+          "Custom",
           "Palette 1",
           "Palette 2",
           "Palette 3",
@@ -1597,6 +1644,51 @@
           "Palette 10"
         ]
       },
+      {
+        "type": "color",
+        "label": "C1",
+        "key": "c1",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C2",
+        "key": "c2",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C3",
+        "key": "c3",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C4",
+        "key": "c4",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C5",
+        "key": "c5",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
       {
         "type": "select",
         "label": "Curve",
@@ -1695,10 +1787,11 @@
       },
       {
         "type": "select",
-        "label": "Colours",
+        "label": "Colors",
         "key": "palette",
         "defaultValue": "Palette 1",
         "options": [
+          "Custom",
           "Palette 1",
           "Palette 2",
           "Palette 3",
@@ -1711,6 +1804,51 @@
           "Palette 10"
         ]
       },
+      {
+        "type": "color",
+        "label": "C1",
+        "key": "c1",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C2",
+        "key": "c2",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C3",
+        "key": "c3",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C4",
+        "key": "c4",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C5",
+        "key": "c5",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
       {
         "type": "select",
         "label": "Curve",
@@ -1800,10 +1938,11 @@
       },
       {
         "type": "select",
-        "label": "Colours",
+        "label": "Colors",
         "key": "palette",
         "defaultValue": "Palette 1",
         "options": [
+          "Custom",
           "Palette 1",
           "Palette 2",
           "Palette 3",
@@ -1816,6 +1955,51 @@
           "Palette 10"
         ]
       },
+      {
+        "type": "color",
+        "label": "C1",
+        "key": "c1",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C2",
+        "key": "c2",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C3",
+        "key": "c3",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C4",
+        "key": "c4",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C5",
+        "key": "c5",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
       {
         "type": "boolean",
         "label": "Data Labels",
@@ -1882,10 +2066,11 @@
       },
       {
         "type": "select",
-        "label": "Colours",
+        "label": "Colors",
         "key": "palette",
         "defaultValue": "Palette 1",
         "options": [
+          "Custom",
           "Palette 1",
           "Palette 2",
           "Palette 3",
@@ -1898,6 +2083,51 @@
           "Palette 10"
         ]
       },
+      {
+        "type": "color",
+        "label": "C1",
+        "key": "c1",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C2",
+        "key": "c2",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C3",
+        "key": "c3",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C4",
+        "key": "c4",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C5",
+        "key": "c5",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
       {
         "type": "boolean",
         "label": "Data Labels",

packages/client/src/components/app/charts/ApexChart.svelte

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

packages/client/src/components/app/charts/ApexOptionsBuilder.js

@@ -62,8 +62,14 @@ export class ApexOptionsBuilder {
     return this.setOption(["title", "text"], title)
   }
 
-  color(color) {
+  colors(colors) {
-    return this.setOption(["colors"], [color])
+    if (!colors) {
+      delete this.options.colors
+      this.options["customColor"] = false
+      return this
+    }
+    this.options["customColor"] = true
+    return this.setOption(["colors"], colors)
   }
 
   width(width) {

packages/client/src/components/app/charts/BarChart.svelte

@@ -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 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : 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

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

packages/client/src/components/app/charts/PieChart.svelte

@@ -13,6 +13,7 @@
   export let legend
   export let donut
   export let palette
+  export let c1, c2, c3, c4, c5
 
   $: options = setUpChart(
     title,
@@ -25,9 +26,13 @@
     animate,
     legend,
     donut,
-    palette
+    palette,
+    c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null,
+    customColor
   )
 
+  $: customColor = palette === "Custom"
+
   const setUpChart = (
     title,
     dataProvider,
@@ -39,7 +44,9 @@
     animate,
     legend,
     donut,
-    palette
+    palette,
+    colors,
+    customColor
   ) => {
     if (
       !dataProvider ||
@@ -70,6 +77,7 @@
       .legend(legend)
       .legendPosition("right")
       .palette(palette)
+      .colors(customColor ? colors : null)
 
     // Add data if valid datasource
     const series = data.map(row => parseFloat(row[valueColumn]))