From 76328dc81e3d31f4eb73db6c6c82054408db4fca Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Mon, 6 Jul 2020 16:58:33 +0100
Subject: [PATCH 01/25] WIP : Chart component for rendering Britecharts

---
 .../src/components/userInterface/Chart.svelte | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 packages/builder/src/components/userInterface/Chart.svelte

diff --git a/packages/builder/src/components/userInterface/Chart.svelte b/packages/builder/src/components/userInterface/Chart.svelte
new file mode 100644
index 0000000000..45db995efe
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Chart.svelte
@@ -0,0 +1,65 @@
+<script>
+  import { onMount } from "svelte";
+
+  //expose chart types for use or reference outside compnent
+  export const chartTypes = britecharts ? Object.keys(britecharts) : null;
+
+  //TODO: How do I access this from outside the component?
+  //expose chart color schemas for use or reference outside compnent
+  export const colorSchemas = britecharts
+    ? britecharts.colors.colorSchemas
+    : null;
+
+  export const colorGradients = britecharts
+    ? britecharts.colors.colorGradients
+    : null;
+
+  export let type = "bar";
+  export let data = [];
+
+  export let colors = britecharts
+    ? britecharts.colors.colorSchemas.britecharts
+    : null;
+
+  let chartElement = null;
+  let chartContainer = null;
+
+  let chart = chartTypes.includes(type) ? britecharts[type]() : null;
+
+  onMount(() => {
+    //TODO: Error handling if can't find britecharts or d3Selection
+    if (chart) {
+      chartContainer = d3.select(chartElement);
+      bindChartColors();
+      bindChartUIProps();
+      chartContainer.datum(data).call(chart);
+    }
+  });
+
+  function bindChartColors() {
+    /* 
+    TODO: some charts support gradients, others support colours.Find out and cater for this here
+        Can a chart support support both color and gradient schemas?
+        Can a chart support no colors or gradients
+        Can a user define there own color schema? 
+    */
+    if (chart.colorSchema) {
+      chart.colorSchema(colors);
+    }
+  }
+
+  //TODO: Ability to match height and width of container (similar to how this is done in docs). Maybe default this if no width or height
+  function bindChartUIProps() {
+    const props = Object.entries($$props);
+
+    for (let [prop, value] of props) {
+      if (validChartProps.includes(prop)) {
+        chart[prop](value);
+      }
+    }
+  }
+
+  $: validChartProps = chart ? Object.getOwnPropertyNames(chart) : null;
+</script>
+
+<div bind:this={chartElement} class="chart-container" />

From 10137d1aa8f8e4c4d55fd74988d1126493dc76a7 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Tue, 7 Jul 2020 16:52:04 +0100
Subject: [PATCH 02/25] WIP: Chart Events, Tooltips and Validation

---
 .../src/components/userInterface/Chart.svelte | 90 +++++++++++++++----
 1 file changed, 74 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Chart.svelte b/packages/builder/src/components/userInterface/Chart.svelte
index 45db995efe..12559466bd 100644
--- a/packages/builder/src/components/userInterface/Chart.svelte
+++ b/packages/builder/src/components/userInterface/Chart.svelte
@@ -1,65 +1,123 @@
-<script>
-  import { onMount } from "svelte";
-
+<script context="module">
   //expose chart types for use or reference outside compnent
   export const chartTypes = britecharts ? Object.keys(britecharts) : null;
 
-  //TODO: How do I access this from outside the component?
   //expose chart color schemas for use or reference outside compnent
   export const colorSchemas = britecharts
     ? britecharts.colors.colorSchemas
     : null;
 
+  //export color gradients for use or reference outside the component
   export const colorGradients = britecharts
     ? britecharts.colors.colorGradients
     : null;
+</script>
+
+<script>
+  import { onMount } from "svelte";
 
   export let type = "bar";
   export let data = [];
+  export let tooltipProps = null;
 
-  export let colors = britecharts
-    ? britecharts.colors.colorSchemas.britecharts
-    : null;
+  export let colors = colorSchemas ? colorSchemas.britecharts : null;
+
+  export let gradients = colorGradients ? colorGradients.bluePurple : null;
 
   let chartElement = null;
   let chartContainer = null;
+  let tooltipContainer = null;
+
+  let tooltipElement = null;
 
   let chart = chartTypes.includes(type) ? britecharts[type]() : null;
+  export let tooltip = null; //can bind and therefore access
 
   onMount(() => {
-    //TODO: Error handling if can't find britecharts or d3Selection
     if (chart) {
       chartContainer = d3.select(chartElement);
       bindChartColors();
+      bindChartTooltip();
       bindChartUIProps();
+      bindChartEvents();
       chartContainer.datum(data).call(chart);
+    } else {
+      console.error("Britecharts could not be found");
     }
   });
 
   function bindChartColors() {
-    /* 
-    TODO: some charts support gradients, others support colours.Find out and cater for this here
-        Can a chart support support both color and gradient schemas?
-        Can a chart support no colors or gradients
-        Can a user define there own color schema? 
-    */
     if (chart.colorSchema) {
       chart.colorSchema(colors);
+    } else if (chart.gradient) {
+      chart.gradient(gradients);
+    }
+  }
+
+  function bindChartTooltip() {
+    if (canUseTooltip) {
+      tooltip = britecharts.tooltip();
+
+      const validTooltipProps = Object.getOwnPropertyNames(tooltip);
+
+      const props = Object.entries(tooltipProps);
+      for (let [key, value] of props) {
+        if (validTooltipProps.includes(key)) {
+          tooltip[key](value);
+        }
+      }
+
+      tooltipContainer = d3.select(tooltipElement);
+      tooltipContainer.datum([]).call(tooltip);
+    }
+  }
+
+  function excludeProps(props, propsToExclude) {
+    const modifiedProps = {};
+    for (const prop in props) {
+      if (!propsToExclude.includes(prop)) {
+        modifiedProps[prop] = props[prop];
+      }
+    }
+    return modifiedProps;
+  }
+
+  function bindChartEvents() {
+    if ($$props.on) {
+      const events = Object.entries($$props.on);
+      for (let [type, fn] of events) {
+        chart.on(type, fn);
+      }
     }
   }
 
-  //TODO: Ability to match height and width of container (similar to how this is done in docs). Maybe default this if no width or height
   function bindChartUIProps() {
-    const props = Object.entries($$props);
+    const props = Object.entries(
+      excludeProps($$props, ["data", "colors", "type", "gradients", "on"])
+    );
+
+    if (!props.includes("width")) {
+      chart.width(chartElement.getBoundingClientRect().width);
+    }
 
     for (let [prop, value] of props) {
       if (validChartProps.includes(prop)) {
         chart[prop](value);
+      } else {
+        console.warn(
+          `${type} chart - ${prop} is an unrecognised prop and wont be applied`
+        );
       }
     }
   }
 
   $: validChartProps = chart ? Object.getOwnPropertyNames(chart) : null;
+  $: canUseTooltip = type === "groupedBar" && tooltipProps;
+  $: console.log("VALID CHART PROPS", validChartProps);
 </script>
 
 <div bind:this={chartElement} class="chart-container" />
+
+{#if canUseTooltip}
+  <div bind:this={tooltipElement} class="tooltip-container" />
+{/if}

From 133445ccdaff2bd93de9fc8a273ef587b6b6f4b2 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 8 Jul 2020 17:14:23 +0100
Subject: [PATCH 03/25] Functional Chart Wrapper for Britecharts

---
 packages/builder/package.json                 |   2 +-
 .../src/components/userInterface/Chart.svelte | 134 +++++++++++-------
 2 files changed, 85 insertions(+), 51 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 295d004301..592cc17947 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -68,7 +68,7 @@
     "lunr": "^2.3.5",
     "mustache": "^4.0.1",
     "safe-buffer": "^5.1.2",
-    "shortid": "^2.2.8",
+    "shortid": "^2.2.15",
     "string_decoder": "^1.2.0",
     "svelte-portal": "^0.1.0",
     "svelte-simple-modal": "^0.4.2",
diff --git a/packages/builder/src/components/userInterface/Chart.svelte b/packages/builder/src/components/userInterface/Chart.svelte
index 12559466bd..1efcc94175 100644
--- a/packages/builder/src/components/userInterface/Chart.svelte
+++ b/packages/builder/src/components/userInterface/Chart.svelte
@@ -15,32 +15,41 @@
 
 <script>
   import { onMount } from "svelte";
+  import shortid from "shortid"
+
+  const _id = shortid.generate()
 
   export let type = "bar";
   export let data = [];
   export let tooltipProps = null;
+  export let legendProps = null;
+  export let useTooltip = false;
+  export let useLegend = false;
 
   export let colors = colorSchemas ? colorSchemas.britecharts : null;
-
   export let gradients = colorGradients ? colorGradients.bluePurple : null;
+  export let tooltip = null; //can bind to outside the component and therefore access
 
   let chartElement = null;
   let chartContainer = null;
   let tooltipContainer = null;
-
-  let tooltipElement = null;
+  let legendContainer = null;
+  let legend = null;
 
   let chart = chartTypes.includes(type) ? britecharts[type]() : null;
-  export let tooltip = null; //can bind and therefore access
+
+  const chartClass = `chart-container-${_id}` 
+  const legendClass = `legend-container-${_id}`
 
   onMount(() => {
     if (chart) {
-      chartContainer = d3.select(chartElement);
+      chartContainer = d3.select(`.${chartClass}`);
       bindChartColors();
-      bindChartTooltip();
       bindChartUIProps();
       bindChartEvents();
       chartContainer.datum(data).call(chart);
+      bindChartTooltip();
+      bindChartLegend();
     } else {
       console.error("Britecharts could not be found");
     }
@@ -58,17 +67,72 @@
     if (canUseTooltip) {
       tooltip = britecharts.tooltip();
 
-      const validTooltipProps = Object.getOwnPropertyNames(tooltip);
+      bindProps(tooltip, tooltipProps)
 
-      const props = Object.entries(tooltipProps);
-      for (let [key, value] of props) {
-        if (validTooltipProps.includes(key)) {
-          tooltip[key](value);
-        }
+      tooltipContainer = d3.select(`.${chartClass} .metadata-group .vertical-marker-container`);
+      tooltipContainer.datum([]).call(tooltip);
+      // tooltip.show()
+    }
+  }
+
+  function bindChartLegend() {
+    if(useLegend) {
+
+      if(!Array.isArray(data)) {
+        console.warn("Cannot use legend as data is not an array")
+        return;
       }
 
-      tooltipContainer = d3.select(tooltipElement);
-      tooltipContainer.datum([]).call(tooltip);
+      let excludeProps = []
+
+      legend = britecharts.legend();
+
+      if(!legendProps || !legendProps.width) {
+        excludeProps = ["width"]
+        legend.width(chart.width())
+      }
+  
+      if(legendProps){
+        bindProps(legend, legendProps, excludeProps)
+      }
+  
+      legendContainer = d3.select(`.${legendClass}`)
+      legendContainer.datum(data).call(legend)
+    }
+  }
+
+  function bindChartEvents() {
+    if ($$props.on) {
+      const events = Object.entries($$props.on);
+      for (let [type, fn] of events) {
+        chart.on(type, fn);
+      }
+    }
+  }
+
+  function bindChartUIProps() {
+    const excludeProps = ["data", "colors", "type", "gradients", "on", "useTooltip", "tooltip", "tooltipProps", "legendProps", "useLegend"]
+
+    if (!$$props.width) {
+      chart.width(chartElement.getBoundingClientRect().width);
+    }
+
+    bindProps(chart, $$props, excludeProps)
+  }
+
+  function bindProps(element, elProps, excludeArray) {
+    const props = excludeArray ? Object.entries(excludeProps(elProps, excludeArray)) : Object.entries(elProps)
+    
+    const validElementProps = Object.getOwnPropertyNames(element);
+
+    for (let [prop, value] of props) {
+      if (validElementProps.includes(prop)) {
+        chart[prop](value);
+      } else {
+        console.warn(
+          `${type} - ${prop} is an unrecognised chart prop and wont be applied`
+        );
+      }
     }
   }
 
@@ -82,42 +146,12 @@
     return modifiedProps;
   }
 
-  function bindChartEvents() {
-    if ($$props.on) {
-      const events = Object.entries($$props.on);
-      for (let [type, fn] of events) {
-        chart.on(type, fn);
-      }
-    }
-  }
-
-  function bindChartUIProps() {
-    const props = Object.entries(
-      excludeProps($$props, ["data", "colors", "type", "gradients", "on"])
-    );
-
-    if (!props.includes("width")) {
-      chart.width(chartElement.getBoundingClientRect().width);
-    }
-
-    for (let [prop, value] of props) {
-      if (validChartProps.includes(prop)) {
-        chart[prop](value);
-      } else {
-        console.warn(
-          `${type} chart - ${prop} is an unrecognised prop and wont be applied`
-        );
-      }
-    }
-  }
-
   $: validChartProps = chart ? Object.getOwnPropertyNames(chart) : null;
-  $: canUseTooltip = type === "groupedBar" && tooltipProps;
-  $: console.log("VALID CHART PROPS", validChartProps);
+  $: canUseTooltip = type === "groupedBar" && tooltipProps && useTooltip;
+  
 </script>
 
-<div bind:this={chartElement} class="chart-container" />
-
-{#if canUseTooltip}
-  <div bind:this={tooltipElement} class="tooltip-container" />
-{/if}
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass}/>
+{/if}
\ No newline at end of file

From 232bdb0aa51e9c427c72bcefc172ed84675be707 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Thu, 9 Jul 2020 10:39:49 +0100
Subject: [PATCH 04/25] Adding CDN links and Tidyup

---
 packages/builder/src/components/userInterface/Chart.svelte    | 3 +--
 .../src/components/userInterface/ComponentsHierarchy.svelte   | 1 +
 packages/builder/src/index.html                               | 4 ++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Chart.svelte b/packages/builder/src/components/userInterface/Chart.svelte
index 1efcc94175..54ccf902ee 100644
--- a/packages/builder/src/components/userInterface/Chart.svelte
+++ b/packages/builder/src/components/userInterface/Chart.svelte
@@ -71,7 +71,6 @@
 
       tooltipContainer = d3.select(`.${chartClass} .metadata-group .vertical-marker-container`);
       tooltipContainer.datum([]).call(tooltip);
-      // tooltip.show()
     }
   }
 
@@ -147,7 +146,7 @@
   }
 
   $: validChartProps = chart ? Object.getOwnPropertyNames(chart) : null;
-  $: canUseTooltip = type === "groupedBar" && tooltipProps && useTooltip;
+  $: canUseTooltip = tooltipProps && useTooltip;
   
 </script>
 
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index fbe9121623..134c32ac67 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -29,6 +29,7 @@
 </script>
 
 <div class="root">
+
   {#each screens as screen}
     <div
       class="budibase__nav-item component"
diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html
index afc3bcb4c2..28d88fde54 100644
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@@ -8,6 +8,7 @@
 	<title>Budibase Builder</title>
 
 	<link href="https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css" rel="stylesheet">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" />
 
 	<link rel='icon' type='image/png' href='/_builder/favicon.png'>
 	<link rel='stylesheet' href='/_builder/global.css'>
@@ -21,6 +22,9 @@
 </head>
 
 <body id="app">
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.4/d3.js"></script>
+  	<script src="https://cdn.jsdelivr.net/npm/britecharts@2/dist/bundled/britecharts.min.js"></script>
+
 	<script src='/_builder/bundle.js'></script>
 </body>
 

From 96d80cf30da917de967c4d9e06219788e612134a Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Mon, 20 Jul 2020 10:09:11 +0100
Subject: [PATCH 05/25] Chart component - CDN to NPM Pkg

---
 packages/builder/package.json                 |   2 +
 .../src/components/userInterface/Chart.svelte | 138 ++++++++++--------
 packages/builder/src/index.html               |   4 -
 3 files changed, 79 insertions(+), 65 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 592cc17947..6b7cd80215 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -58,7 +58,9 @@
     "@budibase/bbui": "^1.15.4",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
+    "britecharts": "^2.16.0",
     "codemirror": "^5.51.0",
+    "d3-selection": "^1.4.1",
     "date-fns": "^1.29.0",
     "deepmerge": "^4.2.2",
     "feather-icons": "^4.21.0",
diff --git a/packages/builder/src/components/userInterface/Chart.svelte b/packages/builder/src/components/userInterface/Chart.svelte
index 54ccf902ee..e0508baffb 100644
--- a/packages/builder/src/components/userInterface/Chart.svelte
+++ b/packages/builder/src/components/userInterface/Chart.svelte
@@ -1,156 +1,172 @@
 <script context="module">
   //expose chart types for use or reference outside compnent
-  export const chartTypes = britecharts ? Object.keys(britecharts) : null;
+  export const chartTypes = britecharts ? Object.keys(britecharts) : null
 
   //expose chart color schemas for use or reference outside compnent
   export const colorSchemas = britecharts
     ? britecharts.colors.colorSchemas
-    : null;
+    : null
 
   //export color gradients for use or reference outside the component
   export const colorGradients = britecharts
     ? britecharts.colors.colorGradients
-    : null;
+    : null
 </script>
 
 <script>
-  import { onMount } from "svelte";
+  import britecharts from "britecharts"
+  import { select } from "d3-selection"
+
+  import { onMount } from "svelte"
   import shortid from "shortid"
 
   const _id = shortid.generate()
 
-  export let type = "bar";
-  export let data = [];
-  export let tooltipProps = null;
-  export let legendProps = null;
-  export let useTooltip = false;
-  export let useLegend = false;
+  export let type = "bar"
+  export let data = []
+  export let tooltipProps = null
+  export let legendProps = null
+  export let useTooltip = false
+  export let useLegend = false
 
-  export let colors = colorSchemas ? colorSchemas.britecharts : null;
-  export let gradients = colorGradients ? colorGradients.bluePurple : null;
-  export let tooltip = null; //can bind to outside the component and therefore access
+  export let colors = colorSchemas ? colorSchemas.britecharts : null
+  export let gradients = colorGradients ? colorGradients.bluePurple : null
+  export let tooltip = null //can bind to outside the component and therefore access
 
-  let chartElement = null;
-  let chartContainer = null;
-  let tooltipContainer = null;
-  let legendContainer = null;
-  let legend = null;
+  let chartElement = null
+  let chartContainer = null
+  let tooltipContainer = null
+  let legendContainer = null
+  let legend = null
 
-  let chart = chartTypes.includes(type) ? britecharts[type]() : null;
+  let chart = chartTypes.includes(type) ? britecharts[type]() : null
 
-  const chartClass = `chart-container-${_id}` 
+  const chartClass = `chart-container-${_id}`
   const legendClass = `legend-container-${_id}`
 
   onMount(() => {
     if (chart) {
-      chartContainer = d3.select(`.${chartClass}`);
-      bindChartColors();
-      bindChartUIProps();
-      bindChartEvents();
-      chartContainer.datum(data).call(chart);
-      bindChartTooltip();
-      bindChartLegend();
+      chartContainer = select(`.${chartClass}`)
+      bindChartColors()
+      bindChartUIProps()
+      bindChartEvents()
+      chartContainer.datum(data).call(chart)
+      bindChartTooltip()
+      bindChartLegend()
     } else {
-      console.error("Britecharts could not be found");
+      console.error("Britecharts could not be found")
     }
-  });
+  })
 
   function bindChartColors() {
     if (chart.colorSchema) {
-      chart.colorSchema(colors);
+      chart.colorSchema(colors)
     } else if (chart.gradient) {
-      chart.gradient(gradients);
+      chart.gradient(gradients)
     }
   }
 
   function bindChartTooltip() {
     if (canUseTooltip) {
-      tooltip = britecharts.tooltip();
+      tooltip = britecharts.tooltip()
 
       bindProps(tooltip, tooltipProps)
 
-      tooltipContainer = d3.select(`.${chartClass} .metadata-group .vertical-marker-container`);
-      tooltipContainer.datum([]).call(tooltip);
+      tooltipContainer = select(
+        `.${chartClass} .metadata-group .vertical-marker-container`
+      )
+      tooltipContainer.datum([]).call(tooltip)
     }
   }
 
   function bindChartLegend() {
-    if(useLegend) {
-
-      if(!Array.isArray(data)) {
+    if (useLegend) {
+      if (!Array.isArray(data)) {
         console.warn("Cannot use legend as data is not an array")
-        return;
+        return
       }
 
       let excludeProps = []
 
-      legend = britecharts.legend();
+      legend = britecharts.legend()
 
-      if(!legendProps || !legendProps.width) {
+      if (!legendProps || !legendProps.width) {
         excludeProps = ["width"]
         legend.width(chart.width())
       }
-  
-      if(legendProps){
+
+      if (legendProps) {
         bindProps(legend, legendProps, excludeProps)
       }
-  
-      legendContainer = d3.select(`.${legendClass}`)
+
+      legendContainer = select(`.${legendClass}`)
       legendContainer.datum(data).call(legend)
     }
   }
 
   function bindChartEvents() {
     if ($$props.on) {
-      const events = Object.entries($$props.on);
+      const events = Object.entries($$props.on)
       for (let [type, fn] of events) {
-        chart.on(type, fn);
+        chart.on(type, fn)
       }
     }
   }
 
   function bindChartUIProps() {
-    const excludeProps = ["data", "colors", "type", "gradients", "on", "useTooltip", "tooltip", "tooltipProps", "legendProps", "useLegend"]
+    const excludeProps = [
+      "data",
+      "colors",
+      "type",
+      "gradients",
+      "on",
+      "useTooltip",
+      "tooltip",
+      "tooltipProps",
+      "legendProps",
+      "useLegend",
+    ]
 
     if (!$$props.width) {
-      chart.width(chartElement.getBoundingClientRect().width);
+      chart.width(chartElement.getBoundingClientRect().width)
     }
 
     bindProps(chart, $$props, excludeProps)
   }
 
   function bindProps(element, elProps, excludeArray) {
-    const props = excludeArray ? Object.entries(excludeProps(elProps, excludeArray)) : Object.entries(elProps)
-    
-    const validElementProps = Object.getOwnPropertyNames(element);
+    const props = excludeArray
+      ? Object.entries(excludeProps(elProps, excludeArray))
+      : Object.entries(elProps)
+
+    const validElementProps = Object.getOwnPropertyNames(element)
 
     for (let [prop, value] of props) {
       if (validElementProps.includes(prop)) {
-        chart[prop](value);
+        chart[prop](value)
       } else {
         console.warn(
           `${type} - ${prop} is an unrecognised chart prop and wont be applied`
-        );
+        )
       }
     }
   }
 
   function excludeProps(props, propsToExclude) {
-    const modifiedProps = {};
+    const modifiedProps = {}
     for (const prop in props) {
       if (!propsToExclude.includes(prop)) {
-        modifiedProps[prop] = props[prop];
+        modifiedProps[prop] = props[prop]
       }
     }
-    return modifiedProps;
+    return modifiedProps
   }
 
-  $: validChartProps = chart ? Object.getOwnPropertyNames(chart) : null;
-  $: canUseTooltip = tooltipProps && useTooltip;
-  
+  $: validChartProps = chart ? Object.getOwnPropertyNames(chart) : null
+  $: canUseTooltip = tooltipProps && useTooltip
 </script>
 
 <div bind:this={chartElement} class={chartClass} />
 {#if useLegend}
-  <div class={legendClass}/>
-{/if}
\ No newline at end of file
+  <div class={legendClass} />
+{/if}
diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html
index 28d88fde54..afc3bcb4c2 100644
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@@ -8,7 +8,6 @@
 	<title>Budibase Builder</title>
 
 	<link href="https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css" rel="stylesheet">
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" />
 
 	<link rel='icon' type='image/png' href='/_builder/favicon.png'>
 	<link rel='stylesheet' href='/_builder/global.css'>
@@ -22,9 +21,6 @@
 </head>
 
 <body id="app">
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.4/d3.js"></script>
-  	<script src="https://cdn.jsdelivr.net/npm/britecharts@2/dist/bundled/britecharts.min.js"></script>
-
 	<script src='/_builder/bundle.js'></script>
 </body>
 

From cae50603aed34b5cd75fce049b19f41398b5e3cb Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Mon, 20 Jul 2020 16:25:50 +0100
Subject: [PATCH 06/25] WIP: Work so far

---
 .../standard-components/src/Chart/Bar.svelte  |  0
 .../src/Chart/Brush.svelte                    |  0
 .../src/Chart/Bullet.svelte                   |  0
 .../src/Chart}/Chart.svelte                   |  0
 .../src/Chart/Donut.svelte                    | 20 +++++++++++++++++++
 .../src/Chart/GroupedBar.svelte               |  0
 .../src/Chart/Heatmap.svelte                  |  0
 .../standard-components/src/Chart/Line.svelte |  0
 .../src/Chart/ScatterPlot.svelte              |  0
 .../src/Chart/Sparkline.svelte                |  0
 .../src/Chart/StackedArea.svelte              |  0
 .../standard-components/src/Chart/Step.svelte |  0
 .../src/Chart/index.svelte                    |  0
 13 files changed, 20 insertions(+)
 create mode 100644 packages/standard-components/src/Chart/Bar.svelte
 create mode 100644 packages/standard-components/src/Chart/Brush.svelte
 create mode 100644 packages/standard-components/src/Chart/Bullet.svelte
 rename packages/{builder/src/components/userInterface => standard-components/src/Chart}/Chart.svelte (100%)
 create mode 100644 packages/standard-components/src/Chart/Donut.svelte
 create mode 100644 packages/standard-components/src/Chart/GroupedBar.svelte
 create mode 100644 packages/standard-components/src/Chart/Heatmap.svelte
 create mode 100644 packages/standard-components/src/Chart/Line.svelte
 create mode 100644 packages/standard-components/src/Chart/ScatterPlot.svelte
 create mode 100644 packages/standard-components/src/Chart/Sparkline.svelte
 create mode 100644 packages/standard-components/src/Chart/StackedArea.svelte
 create mode 100644 packages/standard-components/src/Chart/Step.svelte
 create mode 100644 packages/standard-components/src/Chart/index.svelte

diff --git a/packages/standard-components/src/Chart/Bar.svelte b/packages/standard-components/src/Chart/Bar.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/standard-components/src/Chart/Brush.svelte b/packages/standard-components/src/Chart/Brush.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/standard-components/src/Chart/Bullet.svelte b/packages/standard-components/src/Chart/Bullet.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/builder/src/components/userInterface/Chart.svelte b/packages/standard-components/src/Chart/Chart.svelte
similarity index 100%
rename from packages/builder/src/components/userInterface/Chart.svelte
rename to packages/standard-components/src/Chart/Chart.svelte
diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte
new file mode 100644
index 0000000000..5adb97a944
--- /dev/null
+++ b/packages/standard-components/src/Chart/Donut.svelte
@@ -0,0 +1,20 @@
+<script>
+  import { colors } from "britecharts"
+  import Chart, { colorSchemas } from "./Chart"
+
+  let type = "donut"
+
+  export let colorSchema = colorSchemas.britecharts
+  export let height = 200
+  export let width = 200
+  export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
+
+  export let externalRadius = 25
+  export let hasFixedHighlightedSlice = false
+  export let hasLastHoverSliceHighlighted = false
+  export let internalRadius = 25
+  export let isAnimated = true
+  export let radiusHoverOffset = 0
+</script>
+
+<Chart {type} {...$$props} />
diff --git a/packages/standard-components/src/Chart/GroupedBar.svelte b/packages/standard-components/src/Chart/GroupedBar.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/standard-components/src/Chart/Heatmap.svelte b/packages/standard-components/src/Chart/Heatmap.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/standard-components/src/Chart/Line.svelte b/packages/standard-components/src/Chart/Line.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/standard-components/src/Chart/ScatterPlot.svelte b/packages/standard-components/src/Chart/ScatterPlot.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/standard-components/src/Chart/Sparkline.svelte b/packages/standard-components/src/Chart/Sparkline.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/standard-components/src/Chart/StackedArea.svelte b/packages/standard-components/src/Chart/StackedArea.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/standard-components/src/Chart/Step.svelte b/packages/standard-components/src/Chart/Step.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/standard-components/src/Chart/index.svelte b/packages/standard-components/src/Chart/index.svelte
new file mode 100644
index 0000000000..e69de29bb2

From d56c801c6f090c924d1546c9ffb770ea33f3d522 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Sun, 26 Jul 2020 11:54:55 +0100
Subject: [PATCH 07/25] Britecharts work so far

---
 .../builder/src/builderStore/store/index.js   |   4 +-
 .../ComponentSelectionList.svelte             |   2 +-
 .../userInterface/DesignView.svelte           |   2 +-
 .../userInterface/PropertyControl.svelte      |  15 +-
 .../userInterface/temporaryPanelStructure.js  | 451 +++++++++++++++++-
 packages/standard-components/components.json  |  65 +++
 packages/standard-components/package.json     |   2 +
 .../standard-components/src/Chart/Bar.svelte  |  67 +++
 .../src/Chart/Chart.svelte                    |  59 ++-
 .../src/Chart/Donut.svelte                    |  24 +-
 .../standard-components/src/Chart/Line.svelte |  82 ++++
 .../standard-components/src/Chart/index.js    |   3 +
 .../src/Chart/index.svelte                    |   0
 packages/standard-components/src/index.js     |   1 +
 14 files changed, 704 insertions(+), 73 deletions(-)
 create mode 100644 packages/standard-components/src/Chart/index.js
 delete mode 100644 packages/standard-components/src/Chart/index.svelte

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 36a43b3712..190f6f1f8a 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -273,7 +273,7 @@ const setCurrentPage = store => pageName => {
  * @param  {string} componentToAdd - name of the component to add to the application
  * @param  {string} presetName - name of the component preset if defined
  */
-const addChildComponent = store => (componentToAdd, presetName) => {
+const addChildComponent = store => (componentToAdd, presetProps = {}) => {
   store.update(state => {
     function findSlot(component_array) {
       for (let i = 0; i < component_array.length; i += 1) {
@@ -296,8 +296,6 @@ const addChildComponent = store => (componentToAdd, presetName) => {
 
     const component = getComponentDefinition(state, componentToAdd)
 
-    const presetProps = presetName ? component.presets[presetName] : {}
-
     const instanceId = get(backendUiStore).selectedDatabase._id
     const instanceName = get_capitalised_name(componentToAdd)
 
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 590cf9c985..13ff584686 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -32,7 +32,7 @@
   let selectedCategory = categories[0]
 
   const onComponentChosen = component => {
-    store.addChildComponent(component._component)
+    store.addChildComponent(component._component, component.presetProps)
 
     toggleTab("Navigate")
 
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 9db0001266..0ff4a1d3e7 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -32,7 +32,7 @@
     { value: "active", text: "Active" },
   ]
 
-  $: propertyGroupNames = Object.keys(panelDefinition)
+  $: propertyGroupNames = panelDefinition ? Object.keys(panelDefinition) : []
 </script>
 
 <div class="design-view-container">
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index b79d01fb32..5706eae802 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -9,14 +9,15 @@
   export let onChange = () => {}
 
   function handleChange(key, v) {
-    if (v.target) {
-      let val = props.valueKey ? v.target[props.valueKey] : v.target.value
-      onChange(key, val)
-    } else if (v.detail) {
-      onChange(key, v.detail)
-    } else {
-      onChange(key, v)
+    let innerVal = v
+    if (typeof v === "object") {
+      if ("detail" in v) {
+        innerVal = v.detail
+      } else if ("target" in v) {
+        innerVal = props.valueKey ? v.target[props.valueKey] : v.target.value
+      }
     }
+    onChange(key, innerVal)
   }
 
   const safeValue = () => {
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 73bd9dd9b7..7babad7dc9 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -4,6 +4,11 @@ import Checkbox from "../common/Checkbox.svelte"
 import ModelSelect from "components/userInterface/ModelSelect.svelte"
 
 import { all } from "./propertyCategories.js"
+/* 
+{ label: "N/A ", value: "N/A" },
+{ label: "Flex", value: "flex" },
+{ label: "Inline Flex", value: "inline-flex" }, 
+*/
 
 export default {
   categories: [
@@ -362,35 +367,422 @@ export default {
         },
         {
           name: "Chart",
-          _component: "@budibase/standard-components/datachart",
           description: "Shiny chart",
           icon: "ri-bar-chart-fill",
-          properties: {
-            design: { ...all },
-            settings: [
-              { label: "Table", key: "model", control: ModelSelect },
-              {
-                label: "Chart Type",
-                key: "type",
-                control: OptionSelect,
-                options: [
-                  "column2d",
-                  "column3d",
-                  "line",
-                  "area2d",
-                  "bar2d",
-                  "bar3d",
-                  "pie2d",
-                  "pie3d",
-                  "doughnut2d",
-                  "doughnut3d",
-                  "pareto2d",
-                  "pareto3d",
+          children: [
+            {
+              name: "Donut",
+              _component: "@budibase/standard-components/donut",
+              description: "Donut chart",
+              icon: "ri-donut-chart-line",
+              presetProps: {
+                data: [
+                  {
+                    quantity: 1,
+                    percentage: 50,
+                    name: "glittering",
+                    id: 1,
+                  },
+                  {
+                    quantity: 1,
+                    percentage: 50,
+                    name: "luminous",
+                    id: 2,
+                  },
                 ],
               },
-            ],
-          },
-          children: [],
+              properties: {
+                settings: [
+                  {
+                    label: "Fix Highlight Slice",
+                    key: "hasFixedHighlightedSlice",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    label: "Hover highlight",
+                    key: "hasLastHoverSliceHighlighted",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    label: "Is Animated",
+                    key: "isAnimated",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    label: "Colors",
+                    key: "color",
+                    control: OptionSelect,
+                    options: [
+                      "britecharts",
+                      "blueGreen",
+                      "green",
+                      "grey",
+                      "orange",
+                      "pink",
+                      "purple",
+                      "red",
+                      "teal",
+                      "yellow",
+                    ],
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "External Radius",
+                    key: "externalRadius",
+                    control: Input,
+                  },
+                  {
+                    label: "Internal Radius",
+                    key: "internalRadius",
+                    control: Input,
+                  },
+                  {
+                    label: "Radius Offset",
+                    key: "radiusHoverOffset ",
+                    control: Input,
+                  },
+                  {
+                    label: "Show Legend",
+                    key: "useLegend ",
+                    control: Checkbox,
+                  },
+                ],
+              },
+            },
+            {
+              name: "Bar",
+              _component: "@budibase/standard-components/bar",
+              description: "Bar chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: [
+                  {
+                    value: 1,
+                    name: "glittering",
+                  },
+                  {
+                    value: 1,
+                    name: "luminous",
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "Y Axis Label",
+                    key: "yAxisLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "X Axis Label",
+                    key: "xAxisLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Bar Padding",
+                    key: "betweenBarsPadding",
+                    control: Input,
+                  },
+                  {
+                    label: "Colors",
+                    key: "color",
+                    control: OptionSelect,
+                    options: [
+                      { label: "Normal", value: "britecharts" },
+                      { label: "Blue Green", value: "blueGreen" },
+                      { label: "Green", value: "green" },
+                      { label: "Grey", value: "grey" },
+                      { label: "Orange", value: "orange" },
+                      { label: "Pink", value: "pink" },
+                      { label: "Purple", value: "purple" },
+                      { label: "Red", value: "red" },
+                      { label: "Teal", value: "teal" },
+                      { label: "Yellow", value: "yellow" },
+                    ],
+                  },
+                  {
+                    label: "Gradients",
+                    key: "gradient",
+                    control: OptionSelect,
+                    options: [
+                      { value: "", label: "None" },
+                      { value: "bluePurple", label: "Blue Purple" },
+                      { value: "greenBlue", label: "Green Blue" },
+                      { value: "orangePink", label: "Orange Pink" },
+                    ],
+                  },
+                  {
+                    label: "Enable Labels",
+                    key: "enableLabels",
+                    control: Checkbox,
+                    valueKey: "checked",
+                  },
+                  {
+                    label: "Highlight Single Bar",
+                    key: "hasSingleBarHighlight",
+                    control: Checkbox,
+                    valueKey: "checked",
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Animate",
+                    key: "isAnimate",
+                    control: Checkbox,
+                    valueKey: "checked",
+                  },
+                  {
+                    label: "Horizontal",
+                    key: "isHorizontal",
+                    control: Checkbox,
+                    valueKey: "checked",
+                  },
+                  {
+                    label: "Label Offset",
+                    key: "labelOffset",
+                    control: Input,
+                  },
+                  {
+                    label: "Label Number Format",
+                    key: "labelsNumberFormat",
+                    control: Input,
+                  },
+                  {
+                    label: "Label Size",
+                    key: "labelSize",
+                    control: Input,
+                  },
+                  {
+                    label: "Locale",
+                    key: "locale",
+                    control: Input,
+                  },
+                  {
+                    label: "Name Label",
+                    key: "nameLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Number Format",
+                    key: "numberFormat",
+                    control: Input,
+                  },
+                  {
+                    label: "Use Legend",
+                    key: "useLegend",
+                    control: Checkbox,
+                  },
+                ],
+              },
+            },
+            {
+              name: "Line",
+              _component: "@budibase/standard-components/line",
+              description: "Line chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: {
+                  data: [
+                    {
+                      topicName: "San Francisco",
+                      name: 1,
+                      date: "2020-01-16",
+                      value: 1,
+                    },
+                    {
+                      topicName: "San Fran",
+                      name: 2,
+                      date: "2020-01-17",
+                      value: 2,
+                    },
+                    {
+                      topicName: "LA",
+                      name: 3,
+                      date: "2020-01-18",
+                      value: 3,
+                    },
+                    {
+                      topicName: "Toronto",
+                      name: 4,
+                      date: "2020-01-19",
+                      value: 7,
+                    },
+                    {
+                      topicName: "Van",
+                      name: 4,
+                      date: "2020-01-20",
+                      value: 12,
+                    },
+                    {
+                      topicName: "Dundee",
+                      name: 4,
+                      date: "2020-01-21",
+                      value: 16,
+                    },
+                    {
+                      topicName: "Dublin",
+                      name: 4,
+                      date: "2020-01-22",
+                      value: 31,
+                    },
+                  ],
+                },
+                aspectRatio: 0.5,
+                grid: "horizontal",
+                dateLabel: "fullDate",
+                shouldShowAllDataPoints: true,
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "X Axis Combo",
+                    key: "axisTimeCombinations",
+                    control: Input,
+                  },
+                  {
+                    label: "X Axis Combo",
+                    key: "axisTimeCombinations",
+                    control: Input,
+                  },
+                  {
+                    label: "Colors",
+                    key: "color",
+                    control: OptionSelect,
+                    options: [
+                      "britecharts",
+                      "blueGreen",
+                      "green",
+                      "grey",
+                      "orange",
+                      "pink",
+                      "purple",
+                      "red",
+                      "teal",
+                      "yellow",
+                    ],
+                  },
+                  {
+                    label: "Grid",
+                    key: "grid",
+                    control: OptionSelect,
+                    options: ["vertical", "horizontal", "full"],
+                  },
+                  {
+                    label: "Aspect Ratio",
+                    key: "aspectRatio",
+                    control: Input,
+                  },
+                  {
+                    label: "Date Label",
+                    key: "dateLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Is Animated",
+                    key: "isAnimated",
+                    control: Checkbox,
+                    valueKey: "checked",
+                  },
+                  {
+                    label: "Line Curve",
+                    key: "lineCurve",
+                    control: OptionSelect,
+                    options: [
+                      "linear",
+                      "basis",
+                      "natural",
+                      "monotoneX",
+                      "monotoneY",
+                      "step",
+                      "stepAfter",
+                      "stepBefore",
+                      "cardinal",
+                      "catmullRom",
+                    ],
+                  },
+                  {
+                    label: "Locale",
+                    key: "locale",
+                    control: Input,
+                  },
+                  {
+                    label: "Topic Label",
+                    key: "topicLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Value Label",
+                    key: "valueLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "X Axis Label",
+                    key: "xAxisLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "X Axis Value Type",
+                    key: "xAxisValueType",
+                    control: OptionSelect,
+                    options: ["date", "number"],
+                  },
+                  {
+                    label: "X Axis Scale",
+                    key: "xAxisScale",
+                    control: OptionSelect,
+                    options: ["linear", "logarithmic"],
+                  },
+                  {
+                    label: "X Axis Format",
+                    key: "xAxisFormat",
+                    control: OptionSelect,
+                    options: [
+                      "day-month",
+                      "minute-hour",
+                      "hour-daymonth",
+                      "month-year",
+                      "custom",
+                    ],
+                  },
+                  {
+                    label: "X Axis Custom Format",
+                    key: "xAxisCustomFormat",
+                    control: Input,
+                  },
+                ],
+              },
+            },
+          ],
         },
         {
           name: "Data List",
@@ -412,7 +804,14 @@ export default {
             design: { ...all },
             settings: [{ label: "Table", key: "model", control: ModelSelect }],
           },
-          children: [],
+          children: [
+            {
+              _component: "@budibase/standard-components/heading",
+              name: "Headline",
+              description: "A component for displaying heading text",
+              icon: "ri-heading",
+            },
+          ],
         },
         {
           name: "Record Detail",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index ce205cf92c..b79873e3a6 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -252,6 +252,71 @@
 			"model": "models"
 		}
 	},
+	"donut": {
+		"description": "Donut Chart",
+		"data": true,
+		"props": {
+			"color": "string",
+			"height": "number",
+			"width": "number",
+			"hasFixedHighlightedSlice": "bool",
+			"hasLastHoverSliceHighlighted": "bool",
+			"isAnimated": "bool",
+			"externalRadius": "number",
+			"internalRadius": "number",
+			"radiusHoverOffset": "number",
+			"useLegend": "bool"
+		}
+	},
+	"bar": {
+		"description": "Bar Chart",
+		"data": true,
+		"props": {
+			"betweenBarsPadding": "number",
+			"gradient": "string",
+			"color": "string",
+			"enableLabels": "bool",
+			"hasSingleBarHighlight": "bool",
+			"height": "number",
+			"width": "number",
+			"isAnimated": "bool",
+			"isHorizontal": "bool",
+			"labelOffset": "number",
+			"labelNumberFormat": "number",
+			"labelSize": "number",
+			"locale": "string",
+			"nameLabel": "string",			
+			"numberLabel": "string",
+			"xAxisLabel": "string",
+			"yAxisLabel": "string",
+			"useLegend": "bool"
+		}
+	},
+	"line": {
+		"description": "Line Chart",
+		"data": true,
+		"props": {
+			"width": "number",
+			"height": "number",
+			"axisTimeCombinations": "string",
+			"color": "string",
+			"grid": "string",
+			"aspectRatio": "number",
+			"dateLabel": "string",
+			"isAnimated": "bool",
+			"lineCurve": "string",
+			"locale": "string",
+			"numberFormat": "string",
+			"shouldShowAllDataPoints": "bool",
+			"topicLabel": "string",
+			"valueLabel": "string",
+			"xAxisLabel": "string",
+			"xAxisValueType": "string",
+			"xAxisScale": "string",
+			"xAxisFormat": "string",
+			"xAxisCustomFormat": "string"
+		}
+	},
 	"datachart": {
 		"description": "shiny chart",
 		"data": true,
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index f42f4a73ad..63aa1ddd59 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -38,6 +38,8 @@
   "gitHead": "b1f4f90927d9e494e513220ef060af28d2d42455",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
+    "britecharts": "^2.16.0",
+    "d3-selection": "^1.4.1",
     "fusioncharts": "^3.15.1-sr.1",
     "svelte-fusioncharts": "^1.0.0"
   }
diff --git a/packages/standard-components/src/Chart/Bar.svelte b/packages/standard-components/src/Chart/Bar.svelte
index e69de29bb2..ef16a7f66c 100644
--- a/packages/standard-components/src/Chart/Bar.svelte
+++ b/packages/standard-components/src/Chart/Bar.svelte
@@ -0,0 +1,67 @@
+<script>
+  import Chart, { getColorSchema, getChartGradient } from "./Chart.svelte"
+
+  /*
+    ISSUES:
+    nameLabel, valueLabel - what are these? Seem to break whenever passed a string or number. What type?
+    https://github.com/britecharts/britecharts/blob/a2c45ab023112b36e14f47c278e3a1e1c05f8383/src/charts/bar.js#L145
+  */
+
+  let type = "bar"
+  let tooltip
+
+  export let customMouseOver = () => tooltip.show()
+  export let customMouseMove = (datapoint, colorMapping, x, y) =>
+    tooltip.update(datapoint, colorMapping, x, y)
+  export let customMouseOut = () => tooltip.hide()
+  export let customClick = null
+
+  export let data = []
+  export let xAxisLabel = ""
+  export let yAxisLabel = ""
+  export let betweenBarsPadding = 5
+  export let gradient = null
+  export let color = "britecharts"
+  export let enableLabels = true
+  export let hasSingleBarHighlight = true
+  export let height = 200
+  export let width = 300
+  export let isAnimated = true
+  export let isHorizontal = true
+  export let labelOffset = null
+  export let labelsNumberFormat = null
+  export let labelSize = null
+  export let locale = null
+  export let nameLabel = null
+  export let numberFormat = null
+
+  export let useLegend = true
+
+  $: colorSchema = getColorSchema(color)
+  $: chartGradient = getChartGradient(gradient)
+</script>
+
+<Chart
+  bind:tooltip
+  {type}
+  {data}
+  on={{ customClick, customMouseMove, customMouseOut, customMouseOver }}
+  useTooltip
+  {useLegend}
+  {betweenBarsPadding}
+  {chartGradient}
+  {colorSchema}
+  {enableLabels}
+  {hasSingleBarHighlight}
+  {height}
+  {width}
+  {isAnimated}
+  {isHorizontal}
+  {labelOffset}
+  {labelsNumberFormat}
+  {labelSize}
+  {locale}
+  {nameLabel}
+  {numberFormat}
+  {xAxisLabel}
+  {yAxisLabel} />
diff --git a/packages/standard-components/src/Chart/Chart.svelte b/packages/standard-components/src/Chart/Chart.svelte
index e0508baffb..3f1634719a 100644
--- a/packages/standard-components/src/Chart/Chart.svelte
+++ b/packages/standard-components/src/Chart/Chart.svelte
@@ -11,9 +11,16 @@
   export const colorGradients = britecharts
     ? britecharts.colors.colorGradients
     : null
+
+  export const getColorSchema = color =>
+    color ? colorSchemas[color] : colorSchemas["britecharts"]
+
+  export const getChartGradient = gradient =>
+    gradient ? colorGradients[gradient] : null
 </script>
 
 <script>
+  import { beforeUpdate } from "svelte"
   import britecharts from "britecharts"
   import { select } from "d3-selection"
 
@@ -29,8 +36,6 @@
   export let useTooltip = false
   export let useLegend = false
 
-  export let colors = colorSchemas ? colorSchemas.britecharts : null
-  export let gradients = colorGradients ? colorGradients.bluePurple : null
   export let tooltip = null //can bind to outside the component and therefore access
 
   let chartElement = null
@@ -47,7 +52,6 @@
   onMount(() => {
     if (chart) {
       chartContainer = select(`.${chartClass}`)
-      bindChartColors()
       bindChartUIProps()
       bindChartEvents()
       chartContainer.datum(data).call(chart)
@@ -58,23 +62,13 @@
     }
   })
 
-  function bindChartColors() {
-    if (chart.colorSchema) {
-      chart.colorSchema(colors)
-    } else if (chart.gradient) {
-      chart.gradient(gradients)
-    }
-  }
-
   function bindChartTooltip() {
-    if (canUseTooltip) {
-      tooltip = britecharts.tooltip()
+    if (useTooltip) {
+      tooltip = britecharts.miniTooltip()
 
       bindProps(tooltip, tooltipProps)
 
-      tooltipContainer = select(
-        `.${chartClass} .metadata-group .vertical-marker-container`
-      )
+      tooltipContainer = select(`.${chartClass} .metadata-group`)
       tooltipContainer.datum([]).call(tooltip)
     }
   }
@@ -108,7 +102,9 @@
     if ($$props.on) {
       const events = Object.entries($$props.on)
       for (let [type, fn] of events) {
-        chart.on(type, fn)
+        if (fn) {
+          chart.on(type, fn)
+        }
       }
     }
   }
@@ -116,9 +112,7 @@
   function bindChartUIProps() {
     const excludeProps = [
       "data",
-      "colors",
       "type",
-      "gradients",
       "on",
       "useTooltip",
       "tooltip",
@@ -135,19 +129,23 @@
   }
 
   function bindProps(element, elProps, excludeArray) {
-    const props = excludeArray
-      ? Object.entries(excludeProps(elProps, excludeArray))
-      : Object.entries(elProps)
+    if (elProps) {
+      const props = excludeArray
+        ? Object.entries(excludeProps(elProps, excludeArray))
+        : Object.entries(elProps)
 
-    const validElementProps = Object.getOwnPropertyNames(element)
+      const validElementProps = Object.getOwnPropertyNames(element)
 
-    for (let [prop, value] of props) {
-      if (validElementProps.includes(prop)) {
-        chart[prop](value)
-      } else {
-        console.warn(
-          `${type} - ${prop} is an unrecognised chart prop and wont be applied`
-        )
+      for (let [prop, value] of props) {
+        if (validElementProps.includes(prop)) {
+          if (!!value) {
+            chart[prop](value)
+          }
+        } else {
+          console.warn(
+            `${type} - ${prop} is an unrecognised chart prop and wont be applied`
+          )
+        }
       }
     }
   }
@@ -163,7 +161,6 @@
   }
 
   $: validChartProps = chart ? Object.getOwnPropertyNames(chart) : null
-  $: canUseTooltip = tooltipProps && useTooltip
 </script>
 
 <div bind:this={chartElement} class={chartClass} />
diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte
index 5adb97a944..ba650bdc5c 100644
--- a/packages/standard-components/src/Chart/Donut.svelte
+++ b/packages/standard-components/src/Chart/Donut.svelte
@@ -1,10 +1,10 @@
 <script>
-  import { colors } from "britecharts"
-  import Chart, { colorSchemas } from "./Chart"
+  import Chart, { getColorSchema } from "./Chart.svelte"
 
   let type = "donut"
 
-  export let colorSchema = colorSchemas.britecharts
+  export let data = []
+  export let color = "britecharts"
   export let height = 200
   export let width = 200
   export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
@@ -15,6 +15,22 @@
   export let internalRadius = 25
   export let isAnimated = true
   export let radiusHoverOffset = 0
+  export let useLegend = true
+
+  $: colorSchema = getColorSchema(color)
 </script>
 
-<Chart {type} {...$$props} />
+<Chart
+  {type}
+  {useLegend}
+  {data}
+  {colorSchema}
+  {height}
+  {width}
+  {margin}
+  {externalRadius}
+  {hasFixedHighlightedSlice}
+  {hasLastHoverSliceHighlighted}
+  {internalRadius}
+  {isAnimated}
+  {radiusHoverOffset} />
diff --git a/packages/standard-components/src/Chart/Line.svelte b/packages/standard-components/src/Chart/Line.svelte
index e69de29bb2..0d20360a95 100644
--- a/packages/standard-components/src/Chart/Line.svelte
+++ b/packages/standard-components/src/Chart/Line.svelte
@@ -0,0 +1,82 @@
+<script>
+  import Chart, { getColorSchema, getChartGradient } from "./Chart.svelte"
+
+  /*
+    ISSUES:
+    
+  */
+
+  let type = "line"
+  let tooltip
+
+  export let data = []
+  export let axisTimeCombinations = ""
+  export let color = "britecharts"
+  export let grid = "horizontal"
+  export let aspectRatio = 0.5
+  export let dateLabel = "date"
+  export let width = null
+  export let height = null
+  export let isAnimated = true
+  export let lineCurve = "linear" //see api for possible opts
+  export let locale = "en-GB"
+  export let numberFormat = ""
+  export let shouldShowAllDataPoints = true
+  export let topicLabel = null
+  export let valueLabel = null
+  export let xAxisLabel = ""
+  export let xAxisValueType = "date"
+  export let xAxisScale = "linear"
+  export let xAxisFormat = "day-month"
+  export let xAxisCustomFormat = "%H"
+
+  $: colorSchema = getColorSchema(color)
+  $: console.log($$props)
+</script>
+
+<Chart
+  {type}
+  {data}
+  {colorSchema}
+  {axisTimeCombinations}
+  {lineCurve}
+  {numberFormat}
+  {height}
+  {topicLabel}
+  {shouldShowAllDataPoints}
+  {xAxisLabel}
+  {valueLabel}
+  {xAxisValueType}
+  {xAxisScale}
+  {xAxisCustomFormat}
+  {aspectRatio}
+  {grid}
+  tooltipThreshold={600}
+  {width}
+  {dateLabel} />
+
+<!-- 
+
+isAnimated={true}
+aspectRatio={0.5}
+grid='horizontal'
+tooltipThreshold={600}
+width={600}
+dateLabel='fullDate'
+
+ {type}
+  {data}
+  {colorSchema}
+  {axisTimeCombinations}
+  {lineCurve}
+  {numberFormat}
+  {height}
+  {topicLabel}
+  {shouldShowAllDataPoints}
+  {xAxisLabel}
+  {valueLabel}
+  {xAxisValueType}
+  {xAxisScale}
+  {xAxisCustomFormat}
+
+ -->
diff --git a/packages/standard-components/src/Chart/index.js b/packages/standard-components/src/Chart/index.js
new file mode 100644
index 0000000000..e51ae93c8f
--- /dev/null
+++ b/packages/standard-components/src/Chart/index.js
@@ -0,0 +1,3 @@
+export { default as donut } from "./Donut.svelte"
+export { default as bar } from "./Bar.svelte"
+export { default as line } from "./Line.svelte"
diff --git a/packages/standard-components/src/Chart/index.svelte b/packages/standard-components/src/Chart/index.svelte
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index a0c6ee025d..5fefbac5c7 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -24,3 +24,4 @@ export { default as datasearch } from "./DataSearch.svelte"
 export { default as datamap } from "./DataMap.svelte"
 export { default as embed } from "./Embed.svelte"
 export { default as recorddetail } from "./RecordDetail.svelte"
+export * from "./Chart"

From 9eb9e8dcccb5d859b192142e574c1d968aa620b5 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Sun, 26 Jul 2020 11:55:55 +0100
Subject: [PATCH 08/25] Checkbox component

---
 .../src/components/common/Checkbox.svelte     | 109 +++++++++++++++++-
 1 file changed, 104 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/common/Checkbox.svelte b/packages/builder/src/components/common/Checkbox.svelte
index 37eb385d79..fe3f5756eb 100644
--- a/packages/builder/src/components/common/Checkbox.svelte
+++ b/packages/builder/src/components/common/Checkbox.svelte
@@ -1,13 +1,112 @@
 <script>
+  import { createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
+
   export let checked = false
-  export let label = ""
+
+  function handleChange() {
+    checked = !checked
+    dispatch("change", checked)
+  }
 </script>
 
-{label}
-<input class="uk-checkbox" type="checkbox" bind:checked on:change />
+<input type="checkbox" class="checkbox" id="_checkbox" />
+<label for="_checkbox" class:checked on:click={handleChange}>
+  <div class="tick_mark" />
+</label>
 
 <style>
-  input {
-    margin-right: 7px;
+  .checkbox {
+    display: none;
+  }
+
+  label {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    /* background-color: #5e17e9; */
+    background-color: var(--grey-2);
+    transform: translateY(-50%);
+    cursor: pointer;
+    transition: 0.2s ease transform, 0.2s ease background-color,
+      0.2s ease box-shadow;
+    overflow: hidden;
+    z-index: 1;
+    border-radius: 4px;
+  }
+
+  label:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    width: 12px;
+    height: 12px;
+    margin: 0 auto;
+    background-color: #fff;
+    transform: translateY(-50%);
+    transition: 0.2s ease width, 0.2s ease height;
+    border-radius: 2px;
+  }
+
+  label:active {
+    transform: translateY(-50%) scale(0.9);
+  }
+
+  .tick_mark {
+    position: absolute;
+    top: 50%;
+    left: 6px;
+    width: 5px;
+    height: 4px;
+    margin: 0 auto;
+    transform: rotateZ(-40deg);
+  }
+
+  .tick_mark:before,
+  .tick_mark:after {
+    content: "";
+    position: absolute;
+    background-color: #000;
+    border-radius: 2px;
+    opacity: 0;
+    transition: 0.2s ease transform, 0.2s ease opacity;
+  }
+
+  .tick_mark:before {
+    left: 0;
+    bottom: 0;
+    width: 2px;
+    height: 6px;
+    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
+    transform: translateY(-68px);
+  }
+
+  .tick_mark:after {
+    left: 0;
+    bottom: 0;
+    width: 12px;
+    height: 2px;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
+    transform: translateX(78px);
+  }
+
+  .checked {
+    /* background-color: #5e17e9; */
+    background-color: var(--grey-2);
+    /* box-shadow: 0 7px 10px #5e17e9; */
+  }
+
+  .checked:before {
+    width: 0;
+    height: 0;
+  }
+
+  .checked .tick_mark:before,
+  .checked .tick_mark:after {
+    transform: translate(0);
+    opacity: 1;
   }
 </style>

From 3233ed175e05319c520297a2856896b7aa411100 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Tue, 28 Jul 2020 11:49:35 +0100
Subject: [PATCH 09/25] Adding design controls

---
 .../src/components/userInterface/temporaryPanelStructure.js    | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 7babad7dc9..5bbe7eb1cf 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -392,6 +392,9 @@ export default {
                 ],
               },
               properties: {
+                design: {
+                  ...all
+                },
                 settings: [
                   {
                     label: "Fix Highlight Slice",

From 5d14efb20159441d40306ba64e5f38b1e1d64de5 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Tue, 28 Jul 2020 14:19:46 +0100
Subject: [PATCH 10/25] bar chart

---
 .../ComponentPropertiesPanel.svelte           |   1 +
 .../standard-components/src/Chart/Bar.svelte  | 130 ++++++++++++++----
 2 files changed, 105 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 38e4dd67a9..fcdd22db4f 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -145,6 +145,7 @@
     margin-top: 10px;
     flex: 1 1 auto;
     min-height: 0;
+    overflow-y: auto;
   }
 
   .instance-name {
diff --git a/packages/standard-components/src/Chart/Bar.svelte b/packages/standard-components/src/Chart/Bar.svelte
index ef16a7f66c..2bea43cb14 100644
--- a/packages/standard-components/src/Chart/Bar.svelte
+++ b/packages/standard-components/src/Chart/Bar.svelte
@@ -1,14 +1,25 @@
 <script>
-  import Chart, { getColorSchema, getChartGradient } from "./Chart.svelte"
+  import { getColorSchema, getChartGradient } from "./Chart.svelte"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
 
+  import { select } from "d3-selection"
+  import shortid from "shortid"
   /*
     ISSUES:
     nameLabel, valueLabel - what are these? Seem to break whenever passed a string or number. What type?
     https://github.com/britecharts/britecharts/blob/a2c45ab023112b36e14f47c278e3a1e1c05f8383/src/charts/bar.js#L145
   */
 
-  let type = "bar"
   let tooltip
+  const _id = shortid.generate()
+  const chart = britecharts.bar()
+  const chartClass = `bar-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+  let tooltipContainer = null
 
   export let customMouseOver = () => tooltip.show()
   export let customMouseMove = (datapoint, colorMapping, x, y) =>
@@ -37,31 +48,98 @@
 
   export let useLegend = true
 
+  onMount(() => {
+    //call charts props in here
+    if (chartElement) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      bindChartEvents()
+      bindChartTooltip()
+      chartContainer.datum(data).call(chart)
+    }
+  })
+
+  function bindChartUIProps() {
+    if (color) {
+      chart.colorSchema(colorSchema)
+    }
+    if (gradient) {
+      chart.chartGradient(chartGradient)
+    }
+    if (xAxisLabel) {
+      chart.xAxisLabel(xAxisLabel)
+    }
+    if (yAxisLabel) {
+      chart.yAxisLabel(yAxisLabel)
+    }
+    if (betweenBarsPadding) {
+      chart.betweenBarsPadding(betweenBarsPadding)
+    }
+    if (enableLabels) {
+      chart.enableLabels(enableLabels)
+    }
+    if (hasSingleBarHighlight) {
+      chart.hasSingleBarHighlight(hasSingleBarHighlight)
+    }
+    if (height) {
+      chart.height(height)
+    }
+    if (width) {
+      chart.width(width)
+    }
+    if (isAnimated) {
+      chart.isAnimated(isAnimated)
+    }
+    if (isHorizontal) {
+      chart.isHorizontal(isHorizontal)
+    }
+    if (labelOffset) {
+      chart.labelOffset(labelOffset)
+    }
+    if (labelsNumberFormat) {
+      chart.labelsNumberFormat(labelsNumberFormat)
+    }
+    if (labelSize) {
+      chart.labelSize(labelSize)
+    }
+    if (locale) {
+      chart.locale(locale)
+    }
+    if (nameLabel) {
+      chart.nameLabel(nameLabel)
+    }
+    if (numberFormat) {
+      chart.numberFormat(numberFormat)
+    }
+  }
+
+  function bindChartEvents() {
+    if (customMouseMove) {
+      chart.on("customMouseMove", customMouseMove)
+    }
+    if (customMouseOut) {
+      chart.on("customMouseOut", customMouseOut)
+    }
+    if (customMouseOver) {
+      chart.on("customMouseOver", customMouseOver)
+    }
+    if (customClick) {
+      chart.on("customClick", customClick)
+    }
+  }
+
+  function bindChartTooltip() {
+    tooltip = britecharts.miniTooltip()
+    debugger
+    tooltipContainer = select(`.${chartClass} .metadata-group`)
+    tooltipContainer.datum([]).call(tooltip)
+  }
+
   $: colorSchema = getColorSchema(color)
   $: chartGradient = getChartGradient(gradient)
 </script>
 
-<Chart
-  bind:tooltip
-  {type}
-  {data}
-  on={{ customClick, customMouseMove, customMouseOut, customMouseOver }}
-  useTooltip
-  {useLegend}
-  {betweenBarsPadding}
-  {chartGradient}
-  {colorSchema}
-  {enableLabels}
-  {hasSingleBarHighlight}
-  {height}
-  {width}
-  {isAnimated}
-  {isHorizontal}
-  {labelOffset}
-  {labelsNumberFormat}
-  {labelSize}
-  {locale}
-  {nameLabel}
-  {numberFormat}
-  {xAxisLabel}
-  {yAxisLabel} />
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}

From f667f05f19e64804e00e1964645da4c96162e148 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Wed, 29 Jul 2020 16:35:44 +0100
Subject: [PATCH 11/25] WIP: Bar, Brush, Bullet, Donut and Line

---
 .../userInterface/temporaryPanelStructure.js  | 195 +++++++++++++++++-
 packages/standard-components/components.json  |  43 +++-
 .../standard-components/src/Chart/Bar.svelte  |  50 ++++-
 .../src/Chart/Brush.svelte                    |  94 +++++++++
 .../src/Chart/Bullet.svelte                   |  79 +++++++
 .../src/Chart/Donut.svelte                    | 127 ++++++++++--
 .../standard-components/src/Chart/Line.svelte | 157 +++++++++++---
 .../standard-components/src/Chart/Temp.svelte |  39 ++++
 .../standard-components/src/Chart/index.js    |   3 +
 .../standard-components/src/Chart/utils.js    |  19 ++
 10 files changed, 744 insertions(+), 62 deletions(-)
 create mode 100644 packages/standard-components/src/Chart/Temp.svelte
 create mode 100644 packages/standard-components/src/Chart/utils.js

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 5bbe7eb1cf..57b474cbb0 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -393,7 +393,7 @@ export default {
               },
               properties: {
                 design: {
-                  ...all
+                  ...all,
                 },
                 settings: [
                   {
@@ -414,6 +414,12 @@ export default {
                     valueKey: "checked",
                     control: Checkbox,
                   },
+                  {
+                    label: "Has Hover",
+                    key: "hasHoverAnimation",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
                   {
                     label: "Colors",
                     key: "color",
@@ -459,6 +465,7 @@ export default {
                   {
                     label: "Show Legend",
                     key: "useLegend ",
+                    valueKey: "checked",
                     control: Checkbox,
                   },
                 ],
@@ -561,8 +568,13 @@ export default {
                     valueKey: "checked",
                   },
                   {
-                    label: "Label Offset",
-                    key: "labelOffset",
+                    label: "X Axis Label Offset",
+                    key: "xAxisLabelOffset",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label Offset",
+                    key: "yAxisLabelOffset",
                     control: Input,
                   },
                   {
@@ -598,6 +610,172 @@ export default {
                 ],
               },
             },
+            {
+              name: "Brush",
+              _component: "@budibase/standard-components/brush",
+              description: "Brush chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: [
+                  {
+                    value: 1,
+                    date: "2011-01-06T00:00:00Z",
+                  },
+                  {
+                    value: 2,
+                    date: "2011-01-07T00:00:00Z",
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "Gradient",
+                    key: "gradient",
+                    control: OptionSelect,
+                    options: [
+                      { value: "", label: "None" },
+                      { value: "bluePurple", label: "Blue Purple" },
+                      { value: "greenBlue", label: "Green Blue" },
+                      { value: "orangePink", label: "Orange Pink" },
+                    ],
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "Date Range",
+                    key: "dateRange",
+                    control: Input,
+                  },
+                  {
+                    label: "Locale",
+                    key: "locale",
+                    control: Input,
+                  },
+                  {
+                    label: "Time Interval",
+                    key: "roundingTimeInterval",
+                    control: OptionSelect,
+                    options: [
+                      "timeDay",
+                      "timeMillisecond",
+                      "utcMillisecond",
+                      "timeSecond",
+                      "utcSecond",
+                      "timeMinute",
+                      "utcMinute",
+                      "timeHour",
+                      "utcHour",
+                      "utcDay",
+                      "timeWeek",
+                      "utcWeek",
+                      "timeSunday",
+                      "utcSunday",
+                      "timeMonday",
+                      "utcMonday",
+                      "timeTuesday",
+                      "utcTuesday",
+                      "timeWednesday",
+                      "utcWednesday",
+                      "timeThursday",
+                      "utcThursday",
+                      "timeFriday",
+                      "utcFriday",
+                      "timeSaturday",
+                      "utcSaturday",
+                      "timeMonth",
+                      "utcMonth",
+                      "timeYear",
+                      "utcYear",
+                    ],
+                  },
+                  {
+                    label: "X Axis Format",
+                    key: "xAxisFormat",
+                    control: OptionSelect,
+                    options: [
+                      "day-month",
+                      "minute-hour",
+                      "hour-daymonth",
+                      "month-year",
+                      "custom",
+                    ],
+                  },
+                  {
+                    label: "X Ticks",
+                    key: "xTicks",
+                    control: Input,
+                  },
+                ],
+              },
+            },
+            {
+              name: "Bullet",
+              _component: "@budibase/standard-components/bullet",
+              description: "Bullet chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: {
+                  ranges: [130, 160, 250],
+                  measures: [150, 180],
+                  markers: [175],
+                },
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "Color",
+                    key: "color",
+                    control: OptionSelect,
+                    options: [
+                      "britecharts",
+                      "blueGreen",
+                      "green",
+                      "grey",
+                      "orange",
+                      "pink",
+                      "purple",
+                      "red",
+                      "teal",
+                      "yellow",
+                    ],
+                  },
+                  {
+                    label: "Title",
+                    key: "title",
+                    control: Input,
+                  },
+                  {
+                    label: "Subtitle",
+                    key: "subtitle",
+                    control: Input,
+                  },
+                  {
+                    label: "Axis Padding",
+                    key: "paddingBetweenAxisAndChart",
+                    control: Input,
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                ],
+              },
+            },
             {
               name: "Line",
               _component: "@budibase/standard-components/line",
@@ -684,6 +862,12 @@ export default {
                       "yellow",
                     ],
                   },
+                  {
+                    label: "X Axis Value Type",
+                    key: "xAxisValueType",
+                    control: OptionSelect,
+                    options: ["date", "number"],
+                  },
                   {
                     label: "Grid",
                     key: "grid",
@@ -782,6 +966,11 @@ export default {
                     key: "xAxisCustomFormat",
                     control: Input,
                   },
+                  {
+                    label: "X Axis Label",
+                    key: "xAxisLabel",
+                    control: Input,
+                  },
                 ],
               },
             },
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index b79873e3a6..a45edf5edd 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -261,11 +261,14 @@
 			"width": "number",
 			"hasFixedHighlightedSlice": "bool",
 			"hasLastHoverSliceHighlighted": "bool",
+			"hasHoverAnimation": "bool",
+			"numberFormat": "string",
 			"isAnimated": "bool",
 			"externalRadius": "number",
 			"internalRadius": "number",
 			"radiusHoverOffset": "number",
-			"useLegend": "bool"
+			"useLegend": "bool",
+			"percentageFormat": "string"
 		}
 	},
 	"bar": {
@@ -281,7 +284,8 @@
 			"width": "number",
 			"isAnimated": "bool",
 			"isHorizontal": "bool",
-			"labelOffset": "number",
+			"xAxisLabelOffset": "number",
+			"yAxisLabelOffset": "number",
 			"labelNumberFormat": "number",
 			"labelSize": "number",
 			"locale": "string",
@@ -289,7 +293,9 @@
 			"numberLabel": "string",
 			"xAxisLabel": "string",
 			"yAxisLabel": "string",
-			"useLegend": "bool"
+			"useLegend": "bool",
+			"xTicks": "number",
+			"yTicks": "number"
 		}
 	},
 	"line": {
@@ -310,13 +316,42 @@
 			"shouldShowAllDataPoints": "bool",
 			"topicLabel": "string",
 			"valueLabel": "string",
-			"xAxisLabel": "string",
 			"xAxisValueType": "string",
 			"xAxisScale": "string",
 			"xAxisFormat": "string",
+			"xAxisCustomFormat": "string",
+			"xAxisLabel": "string"
+		}
+	},
+	"brush":{
+		"description": "brush chart",
+		"data": true,
+		"props": {
+			"gradient": "string",
+			"height": "number",
+			"width": "number",
+			"margin": "string",
+			"dateRange": "string",
+			"locale": "string",
+			"roundingTimeInterval": "string",
+			"xAxisFormat": "string",
+			"xTicks": "number",
 			"xAxisCustomFormat": "string"
 		}
 	},
+	"bullet": {
+		"description": "Bullet chart",
+		"data": true,
+		"props": {
+			"color": "string",
+			"customSubtitle": "string",
+			"customTitle": "string",
+			"numberFormat": "string",
+			"paddingBetweenAxisAndChart": "number",
+			"height": "number",
+			"width": "number"
+		}
+	},
 	"datachart": {
 		"description": "shiny chart",
 		"data": true,
diff --git a/packages/standard-components/src/Chart/Bar.svelte b/packages/standard-components/src/Chart/Bar.svelte
index 2bea43cb14..ea08baea60 100644
--- a/packages/standard-components/src/Chart/Bar.svelte
+++ b/packages/standard-components/src/Chart/Bar.svelte
@@ -34,28 +34,35 @@
   export let gradient = null
   export let color = "britecharts"
   export let enableLabels = true
+  export let hasPercentage = null
   export let hasSingleBarHighlight = true
+  export let highlightBarFunction = null
   export let height = 200
   export let width = 300
+  export let labelsMargin = null
   export let isAnimated = true
   export let isHorizontal = true
-  export let labelOffset = null
+  export let xAxisLabelOffset = null
+  export let yAxisLabelOffset = null
   export let labelsNumberFormat = null
-  export let labelSize = null
   export let locale = null
+  export let valueLabel = null
   export let nameLabel = null
   export let numberFormat = null
+  export let labelsSize = null
+  export let xTicks = null
+  export let yTicks = null
+  export let percentageAxisToMaxRatio = null
 
   export let useLegend = true
 
   onMount(() => {
-    //call charts props in here
     if (chartElement) {
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       bindChartEvents()
-      bindChartTooltip()
       chartContainer.datum(data).call(chart)
+      bindChartTooltip()
     }
   })
 
@@ -73,17 +80,26 @@
       chart.yAxisLabel(yAxisLabel)
     }
     if (betweenBarsPadding) {
-      chart.betweenBarsPadding(betweenBarsPadding)
+      chart.betweenBarsPadding(Number(betweenBarsPadding))
     }
     if (enableLabels) {
       chart.enableLabels(enableLabels)
     }
+    if (hasPercentage) {
+      chart.hasPercentage(hasPercentage)
+    }
     if (hasSingleBarHighlight) {
       chart.hasSingleBarHighlight(hasSingleBarHighlight)
     }
+    if (labelsMargin) {
+      chart.labelsMargin(labelsMargin)
+    }
     if (height) {
       chart.height(height)
     }
+    if (highlightBarFunction) {
+      chart.highlightBarFunction(highlightBarFunction)
+    }
     if (width) {
       chart.width(width)
     }
@@ -93,14 +109,17 @@
     if (isHorizontal) {
       chart.isHorizontal(isHorizontal)
     }
-    if (labelOffset) {
-      chart.labelOffset(labelOffset)
+    if (yAxisLabelOffset) {
+      chart.yAxisLabelOffset(Number(yAxisLabelOffset))
+    }
+    if (xAxisLabelOffset) {
+      chart.xAxisLabelOffset(Number(xAxisLabelOffset))
     }
     if (labelsNumberFormat) {
       chart.labelsNumberFormat(labelsNumberFormat)
     }
-    if (labelSize) {
-      chart.labelSize(labelSize)
+    if (valueLabel) {
+      chart.valueLabel(valueLabel)
     }
     if (locale) {
       chart.locale(locale)
@@ -111,6 +130,18 @@
     if (numberFormat) {
       chart.numberFormat(numberFormat)
     }
+    if (labelsSize) {
+      chart.labelsSize(labelsSize)
+    }
+    if (xTicks) {
+      chart.xTicks(xTicks)
+    }
+    if (yTicks) {
+      chart.yTicks(yTicks)
+    }
+    if (percentageAxisToMaxRatio) {
+      chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
+    }
   }
 
   function bindChartEvents() {
@@ -130,7 +161,6 @@
 
   function bindChartTooltip() {
     tooltip = britecharts.miniTooltip()
-    debugger
     tooltipContainer = select(`.${chartClass} .metadata-group`)
     tooltipContainer.datum([]).call(tooltip)
   }
diff --git a/packages/standard-components/src/Chart/Brush.svelte b/packages/standard-components/src/Chart/Brush.svelte
index e69de29bb2..0dbf0b6171 100644
--- a/packages/standard-components/src/Chart/Brush.svelte
+++ b/packages/standard-components/src/Chart/Brush.svelte
@@ -0,0 +1,94 @@
+<script>
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
+
+  import { select } from "d3-selection"
+  import shortid from "shortid"
+
+  /* 
+    ISSUES
+    - Chart gradient doesn't seem to do anything
+  */
+
+  const _id = shortid.generate()
+
+  const chart = britecharts.brush()
+  const chartClass = `brush-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+
+  export let customBrushEnd = null
+  export let customBrushStart = null
+
+  export let data = []
+  export let gradient = null
+  export let height = 200
+  export let width = 200
+  export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
+
+  export let dateRange = null
+  export let locale = null
+  export let roundingTimeInterval = null
+  export let xAxisFormat = null
+  export let xTicks = null
+  export let xAxisCustomFormat = null
+
+  onMount(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      bindChartEvents()
+      chartContainer.datum(data).call(chart)
+    }
+  })
+
+  function bindChartUIProps() {
+    if (notNull(gradient)) {
+      chart.gradient(chartGradient)
+    }
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(margin)) {
+      chart.margin(margin)
+    }
+    if (notNull(dateRange)) {
+      chart.dateRange(dateRange)
+    }
+    if (notNull(locale)) {
+      chart.locale(locale)
+    }
+    if (notNull(roundingTimeInterval)) {
+      chart.roundingTimeInterval(roundingTimeInterval)
+    }
+    if (notNull(xAxisFormat)) {
+      chart.xAxisFormat(xAxisFormat)
+    }
+    if (notNull(xTicks)) {
+      chart.xTicks(xTicks)
+    }
+    if (notNull(xAxisCustomFormat)) {
+      chart.xAxisCustomFormat(xAxisCustomFormat)
+    }
+  }
+
+  function bindChartEvents() {
+    if (customBrushEnd) {
+      chart.on("customBrushEnd", customBrushEnd)
+    }
+    if (customBrushStart) {
+      chart.on("customBrushStart", customBrushStart)
+    }
+  }
+
+  $: chartGradient = getChartGradient(gradient)
+  $: console.log(chartGradient)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
diff --git a/packages/standard-components/src/Chart/Bullet.svelte b/packages/standard-components/src/Chart/Bullet.svelte
index e69de29bb2..1356eea3a7 100644
--- a/packages/standard-components/src/Chart/Bullet.svelte
+++ b/packages/standard-components/src/Chart/Bullet.svelte
@@ -0,0 +1,79 @@
+<script>
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
+
+  import { select } from "d3-selection"
+  import shortid from "shortid"
+
+  const _id = shortid.generate()
+
+  const chart = britecharts.bullet()
+  const chartClass = `bullet-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+
+  export let data = []
+  export let aspectRatio = null
+  export let color = "britecharts"
+  export let customSubtitle = null
+  export let customTitle = null
+  export let numberFormat = null
+  export let paddingBetweenAxisAndChart = null
+  export let startMaxRangeOpacity = null
+  export let ticks = null
+  export let isReverse = false
+  export let height = 200
+  export let width = 200
+  export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
+
+  onMount(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      chartContainer.datum(data).call(chart)
+    }
+  })
+
+  function bindChartUIProps() {
+    if (notNull(color)) {
+      chart.colorSchema(colorSchema)
+    }
+    if (notNull(aspectRatio)) {
+      chart.aspectRatio(aspectRatio)
+    }
+    if (notNull(customSubtitle)) {
+      chart.customSubtitle(customSubtitle)
+    }
+    if (notNull(customTitle)) {
+      chart.customTitle(customTitle)
+    }
+    if (notNull(numberFormat)) {
+      chart.numberFormat(numberFormat)
+    }
+    if (notNull(paddingBetweenAxisAndChart)) {
+      chart.paddingBetweenAxisAndChart(paddingBetweenAxisAndChart)
+    }
+    if (notNull(startMaxRangeOpacity)) {
+      chart.startMaxRangeOpacity(startMaxRangeOpacity)
+    }
+    if (notNull(ticks)) {
+      chart.ticks(ticks)
+    }
+    if (notNull(isReverse)) {
+      chart.isReverse(isReverse)
+    }
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+  }
+
+  $: colorSchema = getColorSchema(color)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte
index ba650bdc5c..6ee6285417 100644
--- a/packages/standard-components/src/Chart/Donut.svelte
+++ b/packages/standard-components/src/Chart/Donut.svelte
@@ -1,36 +1,129 @@
 <script>
-  import Chart, { getColorSchema } from "./Chart.svelte"
+  import { getColorSchema, notNull } from "./utils.js"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
 
-  let type = "donut"
+  import { select } from "d3-selection"
+  import shortid from "shortid"
+
+  const _id = shortid.generate()
+
+  const chart = britecharts.donut()
+  const chartClass = `donut-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+
+  export let customMouseOver = null
+  export let customMouseMove = null
+  export let customMouseOut = null
+  export let customClick = null
+
+  export let orderingFunction = null
 
   export let data = []
   export let color = "britecharts"
   export let height = 200
   export let width = 200
-  export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
+  export let margin = null
 
+  export let centeredTextFunction = null
   export let externalRadius = 25
+  export let percentageFormat = null
   export let hasFixedHighlightedSlice = false
   export let hasLastHoverSliceHighlighted = false
+  export let hasHoverAnimation = true
+  export let highlightSliceById = null
+  export let numberFormat = null
   export let internalRadius = 25
   export let isAnimated = true
   export let radiusHoverOffset = 0
   export let useLegend = true
 
+  onMount(() => {
+    if (chart) {
+      chart.emptyDataConfig({
+        showEmptySlice: true,
+        emptySliceColor: "#000000",
+      })
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      bindChartEvents()
+      chartContainer.datum(data).call(chart)
+    }
+  })
+
+  function bindChartUIProps() {
+    if (notNull(color)) {
+      chart.colorSchema(getColorSchema(color))
+    }
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(margin)) {
+      chart.margin(margin)
+    }
+    if (notNull(centeredTextFunction)) {
+      chart.centeredTextFunction(centeredTextFunction)
+    }
+    if (notNull(externalRadius)) {
+      chart.externalRadius(externalRadius)
+    }
+    if (notNull(percentageFormat)) {
+      chart.percentageFormat(percentageFormat)
+    }
+    if (notNull(hasFixedHighlightedSlice)) {
+      chart.hasFixedHighlightedSlice(hasFixedHighlightedSlice)
+    }
+    if (notNull(hasLastHoverSliceHighlighted)) {
+      chart.hasLastHoverSliceHighlighted(hasLastHoverSliceHighlighted)
+    }
+    if (notNull(hasHoverAnimation)) {
+      chart.hasHoverAnimation(hasHoverAnimation)
+    }
+    if (notNull(highlightSliceById)) {
+      chart.highlightSliceById(highlightSliceById)
+    }
+    if (notNull(numberFormat)) {
+      chart.numberFormat(numberFormat)
+    }
+    if (notNull(internalRadius)) {
+      chart.internalRadius(internalRadius)
+    }
+    if (notNull(isAnimated)) {
+      chart.isAnimated(isAnimated)
+    }
+    if (notNull(radiusHoverOffset)) {
+      chart.radiusHoverOffset(radiusHoverOffset)
+    }
+    if (notNull(orderingFunction)) {
+      chart.orderingFunction(orderingFunction)
+    }
+  }
+
+  function bindChartEvents() {
+    if (customClick) {
+      chart.on("customClick", customClick)
+    }
+    if (customMouseMove) {
+      chart.on("customMouseMove", customMouseMove)
+    }
+    if (customMouseOut) {
+      chart.on("customMouseOut", customMouseOut)
+    }
+    if (customMouseOver) {
+      chart.on("customMouseOver", customMouseOver)
+    }
+  }
+
   $: colorSchema = getColorSchema(color)
 </script>
 
-<Chart
-  {type}
-  {useLegend}
-  {data}
-  {colorSchema}
-  {height}
-  {width}
-  {margin}
-  {externalRadius}
-  {hasFixedHighlightedSlice}
-  {hasLastHoverSliceHighlighted}
-  {internalRadius}
-  {isAnimated}
-  {radiusHoverOffset} />
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/Line.svelte b/packages/standard-components/src/Chart/Line.svelte
index 0d20360a95..5bbf40650f 100644
--- a/packages/standard-components/src/Chart/Line.svelte
+++ b/packages/standard-components/src/Chart/Line.svelte
@@ -1,17 +1,31 @@
 <script>
-  import Chart, { getColorSchema, getChartGradient } from "./Chart.svelte"
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
 
-  /*
-    ISSUES:
-    
-  */
+  import { select } from "d3-selection"
+  import shortid from "shortid"
 
-  let type = "line"
+  const _id = shortid.generate()
+
+  const chart = britecharts.line()
+  const chartClass = `line-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement
+  let chartContainer
   let tooltip
+  let tooltipContainer
+
+  export let customMouseHover = null
+  export let customMouseMove = null
+  export let customMouseOut = null
+  export let customDataEntryClick = null
+  export let customTouchMove = null
 
   export let data = []
-  export let axisTimeCombinations = ""
   export let color = "britecharts"
+  export let axisTimeCombinations = ""
   export let grid = "horizontal"
   export let aspectRatio = 0.5
   export let dateLabel = "date"
@@ -29,31 +43,118 @@
   export let xAxisScale = "linear"
   export let xAxisFormat = "day-month"
   export let xAxisCustomFormat = "%H"
+  export let yAxisLabel = null
+  export let useLegend = true
+  export let yAxisLabelPadding = null
+  export let lines = null //not handled by setting prop
+  export let tooltipThreshold = null
+
+  onMount(() => {
+    chartContainer = select(`.${chartClass}`)
+    bindChartUIProps()
+    bindChartEvents()
+    chartContainer.datum(data).call(chart)
+    bindChartTooltip()
+  })
+
+  function bindChartUIProps() {
+    if (notNull(color)) {
+      chart.colorSchema(colorSchema)
+    }
+    if (notNull(axisTimeCombinations)) {
+      chart.axisTimeCombinations(axisTimeCombinations)
+    }
+    if (notNull(grid)) {
+      chart.grid(grid)
+    }
+    if (notNull(aspectRatio)) {
+      chart.aspectRatio(aspectRatio)
+    }
+    if (notNull(dateLabel)) {
+      chart.dateLabel(dateLabel)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(isAnimated)) {
+      chart.isAnimated(isAnimated)
+    }
+    if (notNull(lineCurve)) {
+      chart.lineCurve(lineCurve)
+    }
+    if (notNull(locale)) {
+      chart.locale(locale)
+    }
+    if (notNull(numberFormat)) {
+      chart.numberFormat(numberFormat)
+    }
+    if (notNull(shouldShowAllDataPoints)) {
+      chart.shouldShowAllDataPoints(shouldShowAllDataPoints)
+    }
+    if (notNull(topicLabel)) {
+      chart.topicLabel(topicLabel)
+    }
+    if (notNull(valueLabel)) {
+      chart.valueLabel(valueLabel)
+    }
+    if (notNull(xAxisLabel)) {
+      chart.xAxisLabel(xAxisLabel)
+    }
+    if (notNull(xAxisValueType)) {
+      chart.xAxisValueType(xAxisValueType)
+    }
+    if (notNull(xAxisScale)) {
+      chart.xAxisScale(xAxisScale)
+    }
+    if (notNull(xAxisFormat)) {
+      chart.xAxisFormat(xAxisFormat)
+    }
+    if (notNull(xAxisCustomFormat)) {
+      chart.xAxisCustomFormat(xAxisCustomFormat)
+    }
+    if (notNull(yAxisLabel)) {
+      chart.yAxisLabel(yAxisLabel)
+    }
+    if (notNull(yAxisLabelPadding)) {
+      chart.yAxisLabelPadding(yAxisLabelPadding)
+    }
+  }
+
+  function bindChartEvents() {
+    if (customMouseHover) {
+      chart.on("customMouseHover", customMouseHover)
+    }
+    if (customMouseMove) {
+      chart.on("customMouseMove", customMouseMove)
+    }
+    if (customMouseOut) {
+      chart.on("customMouseOut", customMouseOut)
+    }
+    if (customDataEntryClick) {
+      chart.on("customDataEntryClick", customDataEntryClick)
+    }
+    if (customTouchMove) {
+      chart.on("customTouchMove", customTouchMove)
+    }
+  }
+
+  function bindChartTooltip() {
+    tooltip = britecharts.miniTooltip()
+
+    tooltipContainer = select(`.${chartClass} .metadata-group`)
+    tooltipContainer.datum([]).call(tooltip)
+  }
 
   $: colorSchema = getColorSchema(color)
-  $: console.log($$props)
 </script>
 
-<Chart
-  {type}
-  {data}
-  {colorSchema}
-  {axisTimeCombinations}
-  {lineCurve}
-  {numberFormat}
-  {height}
-  {topicLabel}
-  {shouldShowAllDataPoints}
-  {xAxisLabel}
-  {valueLabel}
-  {xAxisValueType}
-  {xAxisScale}
-  {xAxisCustomFormat}
-  {aspectRatio}
-  {grid}
-  tooltipThreshold={600}
-  {width}
-  {dateLabel} />
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
 
 <!-- 
 
diff --git a/packages/standard-components/src/Chart/Temp.svelte b/packages/standard-components/src/Chart/Temp.svelte
new file mode 100644
index 0000000000..5c0450cdc1
--- /dev/null
+++ b/packages/standard-components/src/Chart/Temp.svelte
@@ -0,0 +1,39 @@
+<script>
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
+
+  import { select } from "d3-selection"
+  import shortid from "shortid"
+
+  const _id = shortid.generate()
+
+  const chart = britecharts.chartname()
+  const chartClass = `donut-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+
+  export let data = []
+  export let color = "britecharts"
+  export let height = 200
+  export let width = 200
+  export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
+  export let useLegend = true
+
+  onMount(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      bindChartEvents()
+      chartContainer.datum(data).call(chart)
+      bindChartTooltip()
+    }
+  })
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/index.js b/packages/standard-components/src/Chart/index.js
index e51ae93c8f..81433297e3 100644
--- a/packages/standard-components/src/Chart/index.js
+++ b/packages/standard-components/src/Chart/index.js
@@ -1,3 +1,6 @@
 export { default as donut } from "./Donut.svelte"
 export { default as bar } from "./Bar.svelte"
 export { default as line } from "./Line.svelte"
+export { default as brush } from "./Brush.svelte"
+export { default as bullet } from "./Bullet.svelte"
+
diff --git a/packages/standard-components/src/Chart/utils.js b/packages/standard-components/src/Chart/utils.js
new file mode 100644
index 0000000000..382c95ff36
--- /dev/null
+++ b/packages/standard-components/src/Chart/utils.js
@@ -0,0 +1,19 @@
+import britecharts from "britecharts"
+
+export const notNull = value => value || value === false
+
+export const chartTypes = britecharts ? Object.keys(britecharts) : null
+
+//expose chart color schemas for use or reference outside compnent
+export const colorSchemas = britecharts ? britecharts.colors.colorSchemas : null
+
+//export color gradients for use or reference outside the component
+export const colorGradients = britecharts
+  ? britecharts.colors.colorGradients
+  : null
+
+export const getColorSchema = color =>
+  color ? colorSchemas[color] : colorSchemas["britecharts"]
+
+export const getChartGradient = gradient =>
+  gradient ? colorGradients[gradient] : null

From a0d9bd9774b80e3494a5231d47a7bf9e7a760033 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Thu, 30 Jul 2020 16:39:56 +0100
Subject: [PATCH 12/25] WIP: Groupedbar, Heatmap and Sparkline Charts

---
 .../userInterface/temporaryPanelStructure.js  | 231 ++++++++++++++++++
 packages/standard-components/components.json  |  47 ++++
 .../src/Chart/GroupedBar.svelte               | 139 +++++++++++
 .../src/Chart/Heatmap.svelte                  |  59 +++++
 .../src/Chart/Sparkline.svelte                |  79 ++++++
 .../standard-components/src/Chart/Temp.svelte |   2 +
 .../standard-components/src/Chart/index.js    |   3 +
 7 files changed, 560 insertions(+)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 57b474cbb0..21bb4b7ad8 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -471,6 +471,143 @@ export default {
                 ],
               },
             },
+            {
+              name: "Heatmap",
+              _component: "@budibase/standard-components/heatmap",
+              description: "Heatmap chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: [
+                  {
+                    day: 0,
+                    hour: 0,
+                    value: 7,
+                  },
+                  {
+                    day: 0,
+                    hour: 1,
+                    value: 10,
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "Color",
+                    key: "color",
+                    control: OptionSelect,
+                    options: [
+                      "britecharts",
+                      "blueGreen",
+                      "green",
+                      "grey",
+                      "orange",
+                      "pink",
+                      "purple",
+                      "red",
+                      "teal",
+                      "yellow",
+                    ],
+                  },
+                  {
+                    label: "Show Legend",
+                    key: "useLegend ",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "Boxsize",
+                    key: "boxSize",
+                    control: Input,
+                  },
+                ],
+              },
+            },
+            {
+              name: "Sparkline",
+              _component: "@budibase/standard-components/sparkline",
+              description: "Sparkline chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: [
+                  {
+                    value: 1,
+                    date: "2011-01-06T00:00:00Z",
+                  },
+                  {
+                    value: 2,
+                    date: "2011-01-07T00:00:00Z",
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "Line Gradient",
+                    key: "lineGradient",
+                    control: OptionSelect,
+                    options: [
+                      { value: "", label: "None" },
+                      { value: "bluePurple", label: "Blue Purple" },
+                      { value: "greenBlue", label: "Green Blue" },
+                      { value: "orangePink", label: "Orange Pink" },
+                    ],
+                  },
+                  {
+                    label: "Area Gradient",
+                    key: "areaGradient",
+                    control: OptionSelect,
+                    options: [
+                      { value: "", label: "None" },
+                      { value: "bluePurple", label: "Blue Purple" },
+                      { value: "greenBlue", label: "Green Blue" },
+                      { value: "orangePink", label: "Orange Pink" },
+                    ],
+                  },
+                  {
+                    key: "height",
+                    label: "Height",
+                    control: Input,
+                  },
+                  {
+                    key: "width",
+                    label: "Width",
+                    control: Input,
+                  },
+                  {
+                    key: "dateLabel",
+                    label: "Date Label",
+                    control: Input,
+                  },
+                  {
+                    key: "isAnimated",
+                    label: "Is Animated",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    key: "titleText",
+                    label: "Title Text",
+                    control: Input,
+                  },
+                  {
+                    key: "valueLabel",
+                    label: "Value Label",
+                    control: Input,
+                  },
+                ],
+              },
+            },
             {
               name: "Bar",
               _component: "@budibase/standard-components/bar",
@@ -717,6 +854,100 @@ export default {
                 ],
               },
             },
+            {
+              name: "Groupedbar",
+              _component: "@budibase/standard-components/groupedbar",
+              description: "Groupedbar chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: [
+                  {
+                    name: "2011-01",
+                    group: "Direct",
+                    value: 0,
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "Color",
+                    key: "color",
+                    control: OptionSelect,
+                    options: [
+                      "britecharts",
+                      "blueGreen",
+                      "green",
+                      "grey",
+                      "orange",
+                      "pink",
+                      "purple",
+                      "red",
+                      "teal",
+                      "yellow",
+                    ],
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "Aspect Ratio",
+                    key: "aspectRatio",
+                    control: Input,
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Grid",
+                    key: "grid",
+                    control: OptionSelect,
+                    options: ["vertical", "horizontal", "full"],
+                  },
+                  {
+                    label: "Group Label",
+                    key: "groupLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Name Label",
+                    key: "nameLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Ticks",
+                    key: "yTicks",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Tick Text Offset",
+                    key: "yTickTextOffset",
+                    control: Input,
+                  },
+                  {
+                    label: "Is Animated",
+                    key: "isAnimated",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    label: "Is Horizontal",
+                    key: "isHorizontal",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                ],
+              },
+            },
             {
               name: "Bullet",
               _component: "@budibase/standard-components/bullet",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index a45edf5edd..b1c1da528a 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -271,6 +271,21 @@
 			"percentageFormat": "string"
 		}
 	},
+	"sparkline": {
+		"description": "Sparkline Chart",
+		"data": true,
+		"props": {
+			"areaGradient": "string",
+			"height": "number",
+			"width": "number",
+			"dateLabel": "string",
+			"duration": "string",
+			"isAnimated": "bool",
+			"lineGradient": "string",
+			"titleText": "string",
+			"valueLabel": "string"
+		}	
+	},
 	"bar": {
 		"description": "Bar Chart",
 		"data": true,
@@ -339,6 +354,38 @@
 			"xAxisCustomFormat": "string"
 		}
 	},
+	"heatmap": {
+		"description": "Groupedbar chart",
+		"data": true,
+		"props": {
+			"color": "string",
+			"height": "number",
+			"width": "number",
+			"useLegend": "bool",
+			"yAxisLabel": "string",
+			"boxSize": "number"
+		}		
+	},
+	"groupedbar": {
+		"description": "Groupedbar chart",
+		"data": true,
+		"props": {
+			"color": "string",
+			"height": "string",
+			"width": "string",
+			"margin": "string",
+			"aspectRatio": "number",
+			"grid":"string",
+			"groupLabel": "string",
+			"isAnimated": "bool",
+			"isHorizontal": "bool",
+			"nameLabel": "string",
+			"valueLabel":"string",
+			"yTicks": "string",
+			"yTickTextOffset": "string",
+			"useLegend": "bool"
+		}
+	},
 	"bullet": {
 		"description": "Bullet chart",
 		"data": true,
diff --git a/packages/standard-components/src/Chart/GroupedBar.svelte b/packages/standard-components/src/Chart/GroupedBar.svelte
index e69de29bb2..a4ef3e1e23 100644
--- a/packages/standard-components/src/Chart/GroupedBar.svelte
+++ b/packages/standard-components/src/Chart/GroupedBar.svelte
@@ -0,0 +1,139 @@
+<script>
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
+
+  /* 
+    ISSUES
+    - Renders but seems to be a problem with tooltip hover
+  */
+
+  import { select } from "d3-selection"
+  import shortid from "shortid"
+
+  const _id = shortid.generate()
+
+  const chart = britecharts.groupedBar()
+  const chartClass = `groupedbar-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let tooltip
+  let tooltipContainer
+  let chartElement = null
+  let chartContainer = null
+
+  export let customMouseOver = () => tooltip.show()
+  export let customMouseMove = (dataPoint, topicColorMap, dataPointXPosition) =>
+    tooltip.update(dataPoint, topicColorMap, dataPointXPosition)
+  export let customMouseOut = () => tooltip.hide()
+  export let customClick = null
+
+  export let data = []
+  export let color = "britecharts"
+  export let height = 200
+  export let width = 200
+  export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
+  export let aspectRatio = null
+  export let grid = null
+  export let groupLabel = null
+  export let isAnimated = null
+  export let isHorizontal = null
+  export let nameLabel = null
+  export let valueLabel = null
+  export let valueLabelFormat = null
+  export let xTicks = null
+  export let yAxisLabel = null
+  export let yAxisLabelOffset = null
+  export let yTicks = null
+  export let yTickTextOffset = null
+  export let useLegend = true
+
+  onMount(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      //   bindChartEvents()
+      chartContainer.datum(data).call(chart)
+      //   bindChartTooltip()
+    }
+  })
+
+  function bindChartUIProps() {
+    if (notNull(color)) {
+      chart.colorSchema(colorSchema)
+    }
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(aspectRatio)) {
+      chart.aspectRatio(aspectRatio)
+    }
+    if (notNull(grid)) {
+      chart.grid(grid)
+    }
+    if (notNull(groupLabel)) {
+      chart.groupLabel(groupLabel)
+    }
+    if (notNull(isAnimated)) {
+      chart.isAnimated(isAnimated)
+    }
+    if (notNull(isHorizontal)) {
+      chart.isHorizontal(isHorizontal)
+    }
+    if (notNull(nameLabel)) {
+      chart.nameLabel(nameLabel)
+    }
+    if (notNull(valueLabel)) {
+      chart.valueLabel(valueLabel)
+    }
+    if (notNull(valueLabelFormat)) {
+      chart.valueLabelFormat(valueLabelFormat)
+    }
+    if (notNull(xTicks)) {
+      chart.xTicks(xTicks)
+    }
+    if (notNull(yAxisLabel)) {
+      chart.yAxisLabel(yAxisLabel)
+    }
+    if (notNull(yAxisLabelOffset)) {
+      chart.yAxisLabelOffset(yAxisLabelOffset)
+    }
+    if (notNull(yTicks)) {
+      chart.yTicks(yTicks)
+    }
+    if (notNull(yTickTextOffset)) {
+      chart.yTickTextOffset(yTickTextOffset)
+    }
+  }
+
+  function bindChartTooltip() {
+    tooltip = britecharts.miniTooltip()
+    tooltipContainer = select(`.${chartClass} .metadata-group`)
+    tooltipContainer.datum([]).call(tooltip)
+  }
+
+  function bindChartEvents() {
+    if (customClick) {
+      chart.on("customClick", customClick)
+    }
+    if (customMouseMove) {
+      chart.on("customMouseMove", customMouseMove)
+    }
+    if (customMouseOut) {
+      chart.on("customMouseOut", customMouseOut)
+    }
+    if (customMouseOver) {
+      chart.on("customMouseOver", customMouseOver)
+    }
+  }
+
+  $: colorSchema = getColorSchema(color)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/Heatmap.svelte b/packages/standard-components/src/Chart/Heatmap.svelte
index e69de29bb2..41c4affdb8 100644
--- a/packages/standard-components/src/Chart/Heatmap.svelte
+++ b/packages/standard-components/src/Chart/Heatmap.svelte
@@ -0,0 +1,59 @@
+<script>
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
+
+  import { select } from "d3-selection"
+  import shortid from "shortid"
+
+  const _id = shortid.generate()
+
+  const chart = britecharts.heatmap()
+  const chartClass = `heatmap-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+
+  export let data = []
+  export let color = "britecharts"
+  export let height = 200
+  export let width = 200
+  export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
+  export let useLegend = true
+  export let yAxisLabels = null
+  export let boxSize = null
+
+  onMount(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      chartContainer.datum(data).call(chart)
+    }
+  })
+
+  function bindChartUIProps() {
+    if (notNull(color)) {
+      chart.colorSchema(colorSchema)
+    }
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(boxSize)) {
+      chart.boxSize(boxSize)
+    }
+    if (notNull(yAxisLabels)) {
+      chart.yAxisLabels(yAxisLabels)
+    }
+  }
+
+  $: colorSchema = getColorSchema(color)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/Sparkline.svelte b/packages/standard-components/src/Chart/Sparkline.svelte
index e69de29bb2..0d321a81f2 100644
--- a/packages/standard-components/src/Chart/Sparkline.svelte
+++ b/packages/standard-components/src/Chart/Sparkline.svelte
@@ -0,0 +1,79 @@
+<script>
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
+
+  import { select } from "d3-selection"
+  import shortid from "shortid"
+
+  const _id = shortid.generate()
+
+  const chart = britecharts.sparkline()
+  const chartClass = `sparkline-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+
+  export let data = []
+  export let areaGradient = null
+  export let height = null
+  export let width = null
+  export let dateLabel = null
+  export let duration = null
+  export let isAnimated = null
+  export let lineGradient = null
+  export let titleText = null
+  export let titleTextStyle = null
+  export let valueLabel = null
+  export let useLegend = true
+
+  onMount(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      chartContainer.datum(data).call(chart)
+    }
+  })
+
+  function bindChartUIProps() {
+    if (notNull(areaGradient)) {
+      chart.areaGradient(aGradient)
+    }
+    if (notNull(lineGradient)) {
+      chart.lineGradient(lGradient)
+    }
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(dateLabel)) {
+      chart.dateLabel(dateLabel)
+    }
+    if (notNull(duration)) {
+      chart.duration(duration)
+    }
+    if (notNull(isAnimated)) {
+      chart.isAnimated(isAnimated)
+    }
+    if (notNull(titleText)) {
+      chart.titleText(titleText)
+    }
+    if (notNull(titleTextStyle)) {
+      chart.titleTextStyle(titleTextStyle)
+    }
+    if (notNull(valueLabel)) {
+      chart.valueLabel(valueLabel)
+    }
+  }
+
+  $: aGradient = getChartGradient(areaGradient)
+  $: lGradient = getChartGradient(lineGradient)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/Temp.svelte b/packages/standard-components/src/Chart/Temp.svelte
index 5c0450cdc1..1703c7b604 100644
--- a/packages/standard-components/src/Chart/Temp.svelte
+++ b/packages/standard-components/src/Chart/Temp.svelte
@@ -31,6 +31,8 @@
       bindChartTooltip()
     }
   })
+
+  $: colorSchema = getColorSchema(color)
 </script>
 
 <div bind:this={chartElement} class={chartClass} />
diff --git a/packages/standard-components/src/Chart/index.js b/packages/standard-components/src/Chart/index.js
index 81433297e3..127c76caf4 100644
--- a/packages/standard-components/src/Chart/index.js
+++ b/packages/standard-components/src/Chart/index.js
@@ -3,4 +3,7 @@ export { default as bar } from "./Bar.svelte"
 export { default as line } from "./Line.svelte"
 export { default as brush } from "./Brush.svelte"
 export { default as bullet } from "./Bullet.svelte"
+export { default as groupedbar } from "./GroupedBar.svelte"
+export { default as heatmap } from "./Heatmap.svelte"
+export { default as sparkline } from "./Sparkline.svelte"
 

From b2aadc36d56cfb16c3835e32c45624e40d465142 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Mon, 3 Aug 2020 11:55:13 +0100
Subject: [PATCH 13/25] StackedArea and other Chart Stuff

---
 .../userInterface/temporaryPanelStructure.js  | 442 ++++++++++++++++++
 packages/standard-components/components.json  |  97 ++++
 .../src/Chart/ScatterPlot.svelte              | 163 +++++++
 .../src/Chart/StackedArea.svelte              | 157 +++++++
 .../src/Chart/StackedBar.svelte               | 152 ++++++
 .../standard-components/src/Chart/Step.svelte | 105 +++++
 .../standard-components/src/Chart/index.js    |   4 +
 7 files changed, 1120 insertions(+)
 create mode 100644 packages/standard-components/src/Chart/StackedBar.svelte

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 21bb4b7ad8..6d929d333c 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -533,6 +533,316 @@ export default {
                 ],
               },
             },
+            {
+              name: "Scatterplot",
+              _component: "@budibase/standard-components/scatterplot",
+              description: "Scatterplot chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: [
+                  {
+                    name: "topic",
+                    x: 123,
+                    y: 24,
+                  },
+                  {
+                    name: "topic1",
+                    x: 53,
+                    y: 31,
+                  },
+                  {
+                    name: "topic2",
+                    x: 631,
+                    y: 321,
+                  },
+                  {
+                    name: "topic1",
+                    x: 231,
+                    y: 111,
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "Colors",
+                    key: "color",
+                    control: OptionSelect,
+                    options: [
+                      { label: "Normal", value: "britecharts" },
+                      { label: "Blue Green", value: "blueGreen" },
+                      { label: "Green", value: "green" },
+                      { label: "Grey", value: "grey" },
+                      { label: "Orange", value: "orange" },
+                      { label: "Pink", value: "pink" },
+                      { label: "Purple", value: "purple" },
+                      { label: "Red", value: "red" },
+                      { label: "Teal", value: "teal" },
+                      { label: "Yellow", value: "yellow" },
+                    ],
+                  },
+                  {
+                    label: "height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "Aspect Ratio",
+                    key: "aspectRatio",
+                    control: Input,
+                  },
+                  {
+                    label: "Circle Opacity",
+                    key: "circleOpacity",
+                    control: Input,
+                  },
+                  {
+                    label: "Grid",
+                    key: "grid",
+                    control: OptionSelect,
+                    options: ["vertical", "horizontal", "full"],
+                  },
+                  {
+                    label: "Has Crosshairs",
+                    key: "hasCrossHairs",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    label: "Is Animated",
+                    key: "isAnimated",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    label: "Max Circle Area",
+                    key: "maxCircleArea",
+                    control: Input,
+                  },
+                  {
+                    label: "X Axis Label",
+                    key: "xAxisLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "X Axis Label Offset",
+                    key: "xAxisLabelOffset",
+                    control: Input,
+                  },
+                  {
+                    label: "X Axis",
+                    key: "xTicks",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Format",
+                    key: "yAxisFormat",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label",
+                    key: "yAxisLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label Offset",
+                    key: "yAxisLabelOffset",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Ticks",
+                    key: "yTicks",
+                    control: Input,
+                  },
+                ],
+              },
+            },
+            {
+              name: "StackedArea",
+              _component: "@budibase/standard-components/stackedarea",
+              description: "StackedArea chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: [
+                  {
+                    date: "2011-01-05T00:00:00Z",
+                    name: "Direct",
+                    value: 0,
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "Color",
+                    key: "color",
+                    control: OptionSelect,
+                    options: [
+                      "britecharts",
+                      "blueGreen",
+                      "green",
+                      "grey",
+                      "orange",
+                      "pink",
+                      "purple",
+                      "red",
+                      "teal",
+                      "yellow",
+                    ],
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "Aspect Ratio",
+                    key: "aspectRatio",
+                    control: Input,
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Grid",
+                    key: "grid",
+                    control: OptionSelect,
+                    options: ["vertical", "horizontal", "full"],
+                  },
+                  {
+                    label: "X Axis Label",
+                    key: "xAxisLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "X Axis Label Offset",
+                    key: "xAxisLabelOffset",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis",
+                    key: "yAxisLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label Offset",
+                    key: "yAxisLabelOffset",
+                    control: Input,
+                  },
+                  {
+                    label: "Area Curve",
+                    key: "areaCurve",
+                    control: Input,
+                  },
+                  {
+                    label: "Area Opacity",
+                    key: "areaOpacity",
+                    control: Input,
+                  },
+                  {
+                    label: "Area Opacity",
+                    key: "areaOpacity",
+                    control: Input,
+                  },
+                  {
+                    label: "dateLabel",
+                    key: "dateLabel",
+                    control: Input,
+                  },
+                  {
+                    key: "isAnimated",
+                    label: "Is Animated",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    label: "Key Label",
+                    key: "keyLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Locale",
+                    key: "locale",
+                    control: Input,
+                  },
+                  {
+                    label: "Value Label",
+                    key: "valueLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Use Legend",
+                    key: "useLegend",
+                    keyValue: "checked",
+                    control: Checkbox,
+                  },
+                ],
+              },
+            },
+            {
+              name: "Step",
+              _component: "@budibase/standard-components/step",
+              description: "Step chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: [
+                  {
+                    value: 1,
+                    key: "glittering",
+                  },
+                  {
+                    value: 2,
+                    key: "luminous",
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label",
+                    key: "yAxisLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label Offset",
+                    key: "yAxisLabelOffset",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Ticks",
+                    key: "yTicks",
+                    control: Input,
+                  },
+                  {
+                    label: "X Axis Label Offset",
+                    key: "xAxisLabelOffset",
+                    control: Input,
+                  },
+                ],
+              },
+            },
             {
               name: "Sparkline",
               _component: "@budibase/standard-components/sparkline",
@@ -742,6 +1052,7 @@ export default {
                   {
                     label: "Use Legend",
                     key: "useLegend",
+                    keyValue: "checked",
                     control: Checkbox,
                   },
                 ],
@@ -1007,6 +1318,137 @@ export default {
                 ],
               },
             },
+            {
+              name: "Stacked Bar",
+              _component: "@budibase/standard-components/stackedbar",
+              description: "Stacked Bar Chart",
+              icon: "ri-file-list-fill",
+              presetProps: {
+                data: [
+                  {
+                    name: "2011-01",
+                    stack: "Direct",
+                    value: 0,
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "Colors",
+                    key: "color",
+                    control: OptionSelect,
+                    options: [
+                      "britecharts",
+                      "blueGreen",
+                      "green",
+                      "grey",
+                      "orange",
+                      "pink",
+                      "purple",
+                      "red",
+                      "teal",
+                      "yellow",
+                    ],
+                  },
+                  {
+                    label: "Grid",
+                    key: "grid",
+                    control: OptionSelect,
+                    options: ["vertical", "horizontal", "full"],
+                  },
+                  {
+                    label: "Aspect Ratio",
+                    key: "aspectRatio",
+                    control: Input,
+                  },
+                  {
+                    label: "Between Bars Padding",
+                    key: "betweenBarsPadding",
+                    control: Input,
+                  },
+                  {
+                    label: "Max Ratio Percentage",
+                    key: "percentageToMaxRatio",
+                    control: Input,
+                  },
+                  {
+                    label: "Date Label",
+                    key: "dateLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Name Label",
+                    key: "nameLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Stack Label",
+                    key: "stackLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Locale",
+                    key: "locale",
+                    control: Input,
+                  },
+                  {
+                    label: "Is Animated",
+                    key: "isAnimated",
+                    control: Checkbox,
+                    valueKey: "checked",
+                  },
+                  {
+                    label: "Is Horizontal",
+                    key: "isHorizontal",
+                    control: Checkbox,
+                    valueKey: "checked",
+                  },
+                  {
+                    label: "Has Reversed Stacks",
+                    key: "hasReversedStacks",
+                    control: Checkbox,
+                    valueKey: "checked",
+                  },
+                  {
+                    label: "Has Percentage",
+                    key: "hasPercentage",
+                    control: Checkbox,
+                    valueKey: "checked",
+                  },
+                  {
+                    label: "X Ticks",
+                    key: "xTicks",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Ticks",
+                    key: "yTicks",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label",
+                    key: "yTicksLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label Offset",
+                    key: "yAxisLabelOffset",
+                    control: Input,
+                  },
+                ],
+              },
+            },
             {
               name: "Line",
               _component: "@budibase/standard-components/line",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index b1c1da528a..6a90567f76 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -286,6 +286,103 @@
 			"valueLabel": "string"
 		}	
 	},
+	"stackedbar": {
+		"description": "Stacked Bar Chart",
+		"data": true,
+		"props": {
+			"color": "string",
+			"height": "number",
+			"width": "number",
+			"margin": "string",
+			"aspectRatio": "string",
+			"betweenBarsPadding": "number",
+			"grid": "string",
+			"hasPercentage": "bool",
+			"hasReversedStacks": "bool",
+			"isAnimated": "bool",
+			"isHorizontal": "bool",
+			"locale": "string",
+			"nameLabel": "string",
+			"percentageAxisToMaxRatio": "number",
+			"stackLabel": "string",
+			"valueLabel": "string",
+			"valueLabelFormat": "string",
+			"xTicks": "number",
+			"yTicks": "number",
+			"yAxisLabel": "string",
+			"yAxisLabelOffset": "number",
+			"useLegend": "bool"
+		}		
+	},
+	"stackarea": {
+		"description": "Step Chart",
+		"data": true,
+		"props": {
+			"color": "string",
+			"height": "number",
+			"width": "number",
+			"margin": "string",
+			"xAxisLabel": "string",
+			"xAxisLabelOffset": "string",
+			"yAxisLabel": "string",
+			"yAxisLabelOffset": "string",
+			"areaCurve": "number",
+			"areaOpacity": "number",
+			"aspectRatio": "number",
+			"dateLabel": "string",
+			"grid": "string",
+			"isAnimated": "bool",
+			"keyLabel": "string",
+			"locale": "string",
+			"tooltipThreshold": "number",
+			"topicsOrder": "string",
+			"valueLabel": "string",
+			"xAxisCustomFormat": "string",
+			"xAxisFormat": "string",
+			"xAxisScale": "string",
+			"xAxisValueType":"string",
+			"yTicks": "number",
+			"xTicks": "number",
+			"yAxisBaseline": "string",
+			"useLegend": "bool"
+		}
+	},
+	"step": {
+		"description": "Step Chart",
+		"data": true,
+		"props": {
+			"height": "number",
+			"width": "number",
+			"margin": "string",
+			"xAxisLabel": "string",
+			"xAxisLabelOffset": "string",
+			"yAxisLabel": "string",
+			"yAxisLabelOffset": "string",	
+			"yTicks": "string"
+		}
+	},
+	"scatterplot": {
+		"description": "Scatterplot Chart",
+		"data": true,
+		"props": { 
+			"color": "string",
+			"height": "number",
+			"width": "number",
+			"aspectRatio": "string",
+			"circleOpacity": "string",
+			"grid": "string",
+			"hasCrossHairs": "bool",
+			"isAnimated": "bool",
+			"maxCircleArea": "number",
+			"xAxisLabel": "string",
+			"xAxisLabelOffset": "string",
+			"xTicks": "string",
+			"yAxisFormat": "string",
+			"yAxisLabel": "string",
+			"yAxisLabelOffset": "string",	
+			"yTicks": "string"
+		}
+	},
 	"bar": {
 		"description": "Bar Chart",
 		"data": true,
diff --git a/packages/standard-components/src/Chart/ScatterPlot.svelte b/packages/standard-components/src/Chart/ScatterPlot.svelte
index e69de29bb2..9c92a635cc 100644
--- a/packages/standard-components/src/Chart/ScatterPlot.svelte
+++ b/packages/standard-components/src/Chart/ScatterPlot.svelte
@@ -0,0 +1,163 @@
+<script>
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
+
+  import { select } from "d3-selection"
+  import shortid from "shortid"
+
+  const _id = shortid.generate()
+
+  const chart = britecharts.scatterPlot()
+  const chartClass = `scatterplot-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+  let tooltip
+  let tooltipContainer
+
+  export let customClick = null
+  export let customMouseOut = () => tooltip.hide()
+  export let customMouseOver = () => tooltip.show()
+  export let customMouseMove = (
+    dataPoint,
+    colorMapping,
+    xPosition,
+    yPosition = null
+  ) => tooltip.update(dataPoint, colorMapping, xPosition, (yPosition = null))
+
+  export let data = []
+  export let color = "britecharts"
+  export let height = null
+  export let width = null
+  export let margin = null
+  export let aspectRatio = null
+  export let circleOpacity = null
+  export let grid = null
+  export let hasCrossHairs = null
+  export let hasHollowCircles = null
+  export let hasTrendline = null
+  export let highlightTextLegendOffset = null
+  export let isAnimated = null
+  export let maxCircleArea = null
+  export let xAxisFormat = null
+  export let xAxisLabel = null
+  export let xAxisLabelOffset = null
+  export let xTicks = null
+  export let yAxisFormat = null
+  export let yAxisLabel = null
+  export let yAxisLabelOffset = null
+  export let yTicks = null
+  export let useLegend = true
+
+  onMount(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      bindChartEvents()
+      chartContainer.datum(data).call(chart)
+      bindChartTooltip()
+    }
+  })
+
+  function bindChartUIProps() {
+    if (notNull(color)) {
+      chart.colorSchema(colorSchema)
+    }
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(margin)) {
+      chart.width(margin)
+    }
+    if (notNull(aspectRatio)) {
+      chart.aspectRatio(aspectRatio)
+    }
+    if (notNull(circleOpacity)) {
+      chart.circleOpacity(circleOpacity)
+    }
+    if (notNull(grid)) {
+      chart.grid(grid)
+    }
+    if (notNull(hasCrossHairs)) {
+      chart.hasCrossHairs(hasCrossHairs)
+    }
+    if (notNull(hasHollowCircles)) {
+      chart.hasHollowCircles(hasHollowCircles)
+    }
+    if (notNull(hasTrendline)) {
+      chart.hasTrendline(hasTrendline)
+    }
+    if (notNull(highlightTextLegendOffset)) {
+      chart.highlightTextLegendOffset(highlightTextLegendOffset)
+    }
+    if (notNull(isAnimated)) {
+      chart.isAnimated(isAnimated)
+    }
+    if (notNull(maxCircleArea)) {
+      chart.maxCircleArea(maxCircleArea)
+    }
+    if (notNull(xAxisFormat)) {
+      chart.xAxisFormat(xAxisFormat)
+    }
+    if (notNull(xAxisLabel)) {
+      chart.xAxisLabel(xAxisLabel)
+    }
+    if (notNull(xAxisLabelOffset)) {
+      chart.xAxisLabelOffset(xAxisLabelOffset)
+    }
+    if (notNull(xTicks)) {
+      chart.xTicks(xTicks)
+    }
+    if (notNull(yAxisFormat)) {
+      chart.yAxisFormat(yAxisFormat)
+    }
+    if (notNull(yAxisLabel)) {
+      chart.yAxisLabel(yAxisLabel)
+    }
+    if (notNull(yAxisLabelOffset)) {
+      chart.yAxisLabelOffset(yAxisLabelOffset)
+    }
+    if (notNull(yTicks)) {
+      chart.yTicks(yTicks)
+    }
+  }
+
+  function bindChartEvents() {
+    if (customClick) {
+      chart.on("customClick", customClick)
+    }
+    if (customMouseMove) {
+      chart.on("customMouseMove", customMouseMove)
+    }
+    if (customMouseOut) {
+      chart.on("customMouseOut", customMouseOut)
+    }
+    if (customMouseOver) {
+      chart.on("customMouseOver", customMouseOver)
+    }
+  }
+
+  function bindChartTooltip() {
+    //TODO: May be more apt to use tooltip() here. Currently erroring however
+    tooltip = britecharts.miniTooltip()
+    tooltipContainer = select(`.${chartClass} .metadata-group`)
+    // tooltip
+    //   .title("Temperature")
+    //   .valueLabel("y")
+    //   .nameLabel("x")
+    //   .numberFormat("$")
+    tooltipContainer.datum([]).call(tooltip)
+  }
+
+  $: colorSchema = getColorSchema(color)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/StackedArea.svelte b/packages/standard-components/src/Chart/StackedArea.svelte
index e69de29bb2..8eabacef49 100644
--- a/packages/standard-components/src/Chart/StackedArea.svelte
+++ b/packages/standard-components/src/Chart/StackedArea.svelte
@@ -0,0 +1,157 @@
+<script>
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
+
+  import { select } from "d3-selection"
+  import shortid from "shortid"
+
+  const _id = shortid.generate()
+
+  const chart = britecharts.stackedArea()
+  const chartClass = `stackedarea-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+
+  export let customMouseOver = () => tooltip.show()
+  export let customMouseMove = (
+    dataPoint,
+    colorMapping,
+    xPosition,
+    yPosition = null
+  ) => tooltip.update(dataPoint, colorMapping, xPosition, (yPosition = null))
+  export let customMouseOut = () => tooltip.hide()
+
+  export let data = []
+  export let color = "britecharts"
+  export let height = null
+  export let width = null
+  export let margin = null
+  export let areaCurve = null
+  export let areaOpacity = null
+  export let aspectRatio = null
+  export let dateLabel = null
+  export let grid = null
+  export let isAnimated = null
+  export let keyLabel = null
+  export let locale = null
+  export let tooltipThreshold = null
+  export let topicsOrder = null
+  export let valueLabel = null
+  export let xAxisCustomFormat = null
+  export let xAxisFormat = null
+  export let xAxisScale = null
+  export let xAxisValueType = null
+  export let xTicks = null
+  export let yAxisBaseline = null
+  export let yAxisLabel = null
+  export let yAxisLabelOffset = null
+  export let yTicks = null
+  export let useLegend = true
+
+  onMount(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      bindChartEvents()
+      chartContainer.datum(data).call(chart)
+      bindChartTooltip()
+    }
+  })
+
+  function bindChartUIProps() {
+    if (notNull(color)) {
+      chart.colorSchema(colorSchema)
+    }
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(margin)) {
+      chart.margin(margin)
+    }
+    if (notNull(areaCurve)) {
+      chart.areaCurve(areaCurve)
+    }
+    if (notNull(areaOpacity)) {
+      chart.areaOpacity(areaOpacity)
+    }
+    if (notNull(aspectRatio)) {
+      chart.aspectRatio(aspectRatio)
+    }
+    if (notNull(dateLabel)) {
+      chart.dateLabel(dateLabel)
+    }
+    if (notNull(grid)) {
+      chart.grid(grid)
+    }
+    if (notNull(isAnimated)) {
+      chart.isAnimated(isAnimated)
+    }
+    if (notNull(keyLabel)) {
+      chart.keyLabel(keyLabel)
+    }
+    if (notNull(locale)) {
+      chart.locale(locale)
+    }
+    if (notNull(tooltipThreshold)) {
+      chart.tooltipThreshold(tooltipThreshold)
+    }
+    if (notNull(topicsOrder)) {
+      chart.topicsOrder(topicsOrder)
+    }
+    if (notNull(valueLabel)) {
+      chart.valueLabel(valueLabel)
+    }
+    if (notNull(xAxisCustomFormat)) {
+      chart.xAxisCustomFormat(xAxisCustomFormat)
+    }
+    if (notNull(xAxisFormat)) {
+      chart.xAxisFormat(xAxisFormat)
+    }
+    if (notNull(xAxisScale)) {
+      chart.xAxisScale(xAxisScale)
+    }
+    if (notNull(xAxisValueType)) {
+      chart.xAxisValueType(xAxisValueType)
+    }
+    if (notNull(xTicks)) {
+      chart.xTicks(xTicks)
+    }
+    if (notNull(yAxisBaseline)) {
+      chart.yAxisBaseline(yAxisBaseline)
+    }
+    if (notNull(yAxisLabel)) {
+      chart.yAxisLabel(yAxisLabel)
+    }
+    if (notNull(yAxisLabelOffset)) {
+      chart.yAxisLabelOffset(yAxisLabelOffset)
+    }
+    if (notNull(yTicks)) {
+      chart.yTicks(yTicks)
+    }
+  }
+
+  function bindChartEvents() {
+    if (customMouseMove) {
+      chart.on("customMouseMove", customMouseMove)
+    }
+    if (customMouseOut) {
+      chart.on("customMouseOut", customMouseOut)
+    }
+    if (customMouseOver) {
+      chart.on("customMouseOver", customMouseOver)
+    }
+  }
+
+  $: colorSchema = getColorSchema(color)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/StackedBar.svelte b/packages/standard-components/src/Chart/StackedBar.svelte
new file mode 100644
index 0000000000..c8f2bc7fbc
--- /dev/null
+++ b/packages/standard-components/src/Chart/StackedBar.svelte
@@ -0,0 +1,152 @@
+<script>
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
+
+  import { select } from "d3-selection"
+  import shortid from "shortid"
+
+  const _id = shortid.generate()
+
+  const chart = britecharts.stackedBar()
+  const chartClass = `stackedbar-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+  let tooltip
+  let tooltipContainer
+
+  export let customMouseOver = () => tooltip.show()
+  export let customMouseMove = (dataPoint, colorMapping, xPosition) =>
+    tooltip.update(dataPoint, colorMapping, xPosition)
+  export let customMouseOut = () => tooltip.hide()
+
+  export let data = []
+  export let color = "britecharts"
+  export let height = null
+  export let width = null
+  export let margin = null
+  export let aspectRatio = null
+  export let betweenBarsPadding = null
+  export let grid = null
+  export let hasPercentage = null
+  export let hasReversedStacks = null
+  export let isAnimated = null
+  export let isHorizontal = null
+  export let locale = null
+  export let nameLabel = null
+  export let percentageAxisToMaxRatio = null
+  export let stackLabel = null
+  export let valueLabel = null
+  export let valueLabelFormat = null
+  export let xTicks = null
+  export let yTicks = null
+  export let yAxisLabel = null
+  export let yAxisLabelOffset = null
+  export let useLegend = true
+
+  onMount(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      bindChartEvents()
+      chartContainer.datum(data).call(chart)
+      //   bindChartTooltip()
+    }
+  })
+
+  function bindChartUIProps() {
+    //UI PROPS
+    if (notNull(color)) {
+      chart.colorSchema(colorSchema)
+    }
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(margin)) {
+      chart.margin(margin)
+    }
+    if (notNull(aspectRatio)) {
+      chart.aspectRatio(aspectRatio)
+    }
+    if (notNull(betweenBarsPadding)) {
+      chart.betweenBarsPadding(betweenBarsPadding)
+    }
+    if (notNull(grid)) {
+      chart.grid(grid)
+    }
+    if (notNull(hasPercentage)) {
+      chart.hasPercentage(hasPercentage)
+    }
+    if (notNull(hasReversedStacks)) {
+      chart.hasReversedStacks(hasReversedStacks)
+    }
+    if (notNull(isAnimated)) {
+      chart.isAnimated(isAnimated)
+    }
+    if (notNull(isHorizontal)) {
+      chart.isHorizontal(isHorizontal)
+    }
+    if (notNull(locale)) {
+      chart.locale(locale)
+    }
+    if (notNull(nameLabel)) {
+      chart.nameLabel(nameLabel)
+    }
+    if (notNull(percentageAxisToMaxRatio)) {
+      chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
+    }
+    if (notNull(stackLabel)) {
+      chart.stackLabel(stackLabel)
+    }
+    if (notNull(valueLabel)) {
+      chart.valueLabel(valueLabel)
+    }
+    if (notNull(valueLabelFormat)) {
+      chart.valueLabelFormat(valueLabelFormat)
+    }
+    if (notNull(xTicks)) {
+      chart.xTicks(xTicks)
+    }
+    if (notNull(yTicks)) {
+      chart.yTicks(yTicks)
+    }
+    if (notNull(yAxisLabel)) {
+      chart.yAxisLabel(yAxisLabel)
+    }
+    if (notNull(yAxisLabelOffset)) {
+      chart.yAxisLabelOffset(yAxisLabelOffset)
+    }
+  }
+
+  function bindChartEvents() {
+    if (customMouseMove) {
+      chart.on("customMouseMove", customMouseMove)
+    }
+    if (customMouseOut) {
+      chart.on("customMouseOut", customMouseOut)
+    }
+    if (customMouseOver) {
+      chart.on("customMouseOver", customMouseOver)
+    }
+  }
+
+  function bindChartTooltip() {
+    tooltip = britecharts.tooltip()
+    // tooltip.topicLabel("Hi Im the topic")
+    // tooltip.topicsOrder(["x", "y"])
+    tooltipContainer = select(`.${chartClass} .metadata-group`)
+    tooltipContainer.datum([]).call(tooltip)
+  }
+
+  $: colorSchema = getColorSchema(color)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/Step.svelte b/packages/standard-components/src/Chart/Step.svelte
index e69de29bb2..e1f53ca317 100644
--- a/packages/standard-components/src/Chart/Step.svelte
+++ b/packages/standard-components/src/Chart/Step.svelte
@@ -0,0 +1,105 @@
+<script>
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
+
+  import { select } from "d3-selection"
+  import shortid from "shortid"
+
+  /* 
+  ISSUES - Doesn't seem to allow color change. Chart is colored black by default
+  */
+
+  const _id = shortid.generate()
+
+  const chart = britecharts.step()
+  const chartClass = `step-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+  let tooltip
+  let tooltipContainer
+
+  export let customMouseOver = () => tooltip.show()
+  export let customMouseMove = (
+    dataPoint,
+    colorMapping,
+    xPosition,
+    yPosition = null
+  ) => tooltip.update(dataPoint, colorMapping, xPosition, (yPosition = null))
+  export let customMouseOut = () => tooltip.hide()
+
+  export let data = []
+  export let height = null
+  export let width = null
+  export let margin = null
+  export let xAxisLabel = null
+  export let xAxisLabelOffset = null
+  export let yAxisLabel = null
+  export let yAxisLabelOffset = null
+  export let yTicks = null
+  export let useLegend = true
+
+  onMount(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      bindChartEvents()
+      chartContainer.datum(data).call(chart)
+      bindChartTooltip()
+    }
+  })
+
+  function bindChartUIProps() {
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(margin)) {
+      chart.margin(margin)
+    }
+    if (notNull(xAxisLabel)) {
+      chart.xAxisLabel(xAxisLabel)
+    }
+    if (notNull(xAxisLabelOffset)) {
+      chart.xAxisLabelOffset(xAxisLabelOffset)
+    }
+    if (notNull(yAxisLabel)) {
+      chart.yAxisLabel(yAxisLabel)
+    }
+    if (notNull(yAxisLabelOffset)) {
+      chart.yAxisLabelOffset(yAxisLabelOffset)
+    }
+    if (notNull(yTicks)) {
+      chart.yTicks(yTicks)
+    }
+  }
+
+  function bindChartEvents() {
+    if (customMouseMove) {
+      chart.on("customMouseMove", customMouseMove)
+    }
+    if (customMouseOut) {
+      chart.on("customMouseOut", customMouseOut)
+    }
+    if (customMouseOver) {
+      chart.on("customMouseOver", customMouseOver)
+    }
+  }
+
+  function bindChartTooltip() {
+    tooltip = britecharts.miniTooltip()
+    tooltipContainer = select(`.${chartClass} .metadata-group`)
+    tooltipContainer.datum([]).call(tooltip)
+  }
+
+  $: colorSchema = getColorSchema(color)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/index.js b/packages/standard-components/src/Chart/index.js
index 127c76caf4..9f4427600d 100644
--- a/packages/standard-components/src/Chart/index.js
+++ b/packages/standard-components/src/Chart/index.js
@@ -6,4 +6,8 @@ export { default as bullet } from "./Bullet.svelte"
 export { default as groupedbar } from "./GroupedBar.svelte"
 export { default as heatmap } from "./Heatmap.svelte"
 export { default as sparkline } from "./Sparkline.svelte"
+export { default as scatterplot } from "./ScatterPlot.svelte"
+export { default as step } from "./Step.svelte"
+export { default as stackedarea } from "./StackedArea.svelte"
+export { default as stackedbar } from "./StackedBar.svelte"
 

From ac9d5e660d0e6082a97411f8bf0c5076e7bad9fc Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Mon, 3 Aug 2020 14:42:37 +0100
Subject: [PATCH 14/25] Re-adding datachart for testing

---
 .../userInterface/temporaryPanelStructure.js  | 32 +++++++++++++++++++
 .../standard-components/src/DataChart.svelte  |  2 ++
 2 files changed, 34 insertions(+)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 6d929d333c..c4b24a76da 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -365,6 +365,38 @@ export default {
             },
           ],
         },
+        {
+          name: "Data Chart",
+          _component: "@budibase/standard-components/datachart",
+          description: "Shiny chart",
+          icon: "ri-bar-chart-line",
+          properties: {
+            design: { ...all },
+            settings: [
+              { label: "Table", key: "model", control: ModelSelect },
+              {
+                label: "Chart Type",
+                key: "type",
+                control: OptionSelect,
+                options: [
+                  "column2d",
+                  "column3d",
+                  "line",
+                  "area2d",
+                  "bar2d",
+                  "bar3d",
+                  "pie2d",
+                  "pie3d",
+                  "doughnut2d",
+                  "doughnut3d",
+                  "pareto2d",
+                  "pareto3d",
+                ],
+              },
+            ],
+          },
+          children: [],
+        },
         {
           name: "Chart",
           description: "Shiny chart",
diff --git a/packages/standard-components/src/DataChart.svelte b/packages/standard-components/src/DataChart.svelte
index bccfc6314a..8b6dcdcc17 100644
--- a/packages/standard-components/src/DataChart.svelte
+++ b/packages/standard-components/src/DataChart.svelte
@@ -23,6 +23,8 @@
     },
   }
 
+  $: console.log("CHART CONFIGS", chartConfigs)
+
   async function fetchData() {
     const FETCH_RECORDS_URL = `/api/views/all_${model}`
     const response = await _bb.api.get(FETCH_RECORDS_URL)

From 31820c1bbf85b0067a4fc1c765f7a0d93a0548d3 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Tue, 4 Aug 2020 10:02:58 +0100
Subject: [PATCH 15/25] Adding mode functionality to Donut

---
 .../userInterface/temporaryPanelStructure.js  |  5 ++++
 packages/standard-components/components.json  |  1 +
 .../src/Chart/Donut.svelte                    | 28 ++++++++++++++++++-
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index c4b24a76da..3184ba6844 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -428,6 +428,11 @@ export default {
                   ...all,
                 },
                 settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
                   {
                     label: "Fix Highlight Slice",
                     key: "hasFixedHighlightedSlice",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 6a90567f76..24ca1b0a2e 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -259,6 +259,7 @@
 			"color": "string",
 			"height": "number",
 			"width": "number",
+			"model": "string",
 			"hasFixedHighlightedSlice": "bool",
 			"hasLastHoverSliceHighlighted": "bool",
 			"hasHoverAnimation": "bool",
diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte
index 6ee6285417..8c1785a8d9 100644
--- a/packages/standard-components/src/Chart/Donut.svelte
+++ b/packages/standard-components/src/Chart/Donut.svelte
@@ -15,6 +15,11 @@
   let chartElement = null
   let chartContainer = null
 
+  export let _bb
+  export let model
+
+  let store = _bb.store
+
   export let customMouseOver = null
   export let customMouseMove = null
   export let customMouseOut = null
@@ -22,7 +27,7 @@
 
   export let orderingFunction = null
 
-  export let data = []
+  export let data = model ? $store[model] : []
   export let color = "britecharts"
   export let height = 200
   export let width = 200
@@ -41,6 +46,27 @@
   export let radiusHoverOffset = 0
   export let useLegend = true
 
+  async function fetchData() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const json = await response.json()
+      store.update(state => {
+        state[model] = json
+        return state
+      })
+    } else {
+      throw new Error("Failed to fetch records.", response)
+    }
+  }
+
+  onMount(async () => {
+    await fetchData()
+  })
+
+  $: _data = model ? $store[model] : data
+  $: console.log("_data", _data)
+
   onMount(() => {
     if (chart) {
       chart.emptyDataConfig({

From 31dbf8e82fc67023e3e1e7627de63ebc47f798ce Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Tue, 4 Aug 2020 13:55:26 +0100
Subject: [PATCH 16/25] Table / model integration for charts

---
 .../userInterface/temporaryPanelStructure.js  | 60 +++++++++++++++++++
 packages/standard-components/components.json  | 16 ++++-
 .../standard-components/src/Chart/Bar.svelte  | 26 +++++++-
 .../src/Chart/Brush.svelte                    | 28 ++++++++-
 .../src/Chart/Bullet.svelte                   | 28 ++++++++-
 .../src/Chart/Donut.svelte                    | 10 ++--
 .../src/Chart/GroupedBar.svelte               | 26 +++++++-
 .../src/Chart/Heatmap.svelte                  | 26 +++++++-
 .../standard-components/src/Chart/Line.svelte | 38 ++++++++++--
 .../src/Chart/ScatterPlot.svelte              | 28 ++++++++-
 .../src/Chart/Sparkline.svelte                | 28 ++++++++-
 .../src/Chart/StackedArea.svelte              | 28 ++++++++-
 .../src/Chart/StackedBar.svelte               | 28 ++++++++-
 .../standard-components/src/Chart/Step.svelte | 28 ++++++++-
 14 files changed, 366 insertions(+), 32 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 237b029eee..6e5e610be3 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -593,6 +593,11 @@ export default {
               },
               properties: {
                 settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
                   {
                     label: "Color",
                     key: "color",
@@ -665,6 +670,11 @@ export default {
               },
               properties: {
                 settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
                   {
                     label: "Colors",
                     key: "color",
@@ -779,6 +789,11 @@ export default {
               },
               properties: {
                 settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
                   {
                     label: "Color",
                     key: "color",
@@ -911,6 +926,11 @@ export default {
               },
               properties: {
                 settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
                   {
                     label: "height",
                     key: "height",
@@ -963,6 +983,11 @@ export default {
               },
               properties: {
                 settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
                   {
                     label: "Line Gradient",
                     key: "lineGradient",
@@ -1038,6 +1063,11 @@ export default {
               },
               properties: {
                 settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
                   {
                     label: "Y Axis Label",
                     key: "yAxisLabel",
@@ -1145,6 +1175,11 @@ export default {
                     key: "nameLabel",
                     control: Input,
                   },
+                  {
+                    label: "Value Label",
+                    key: "valueLabel",
+                    control: Input,
+                  },
                   {
                     label: "Number Format",
                     key: "numberFormat",
@@ -1178,6 +1213,11 @@ export default {
               },
               properties: {
                 settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
                   {
                     label: "Gradient",
                     key: "gradient",
@@ -1282,6 +1322,11 @@ export default {
               },
               properties: {
                 settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
                   {
                     label: "Color",
                     key: "color",
@@ -1374,6 +1419,11 @@ export default {
               },
               properties: {
                 settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
                   {
                     label: "Color",
                     key: "color",
@@ -1435,6 +1485,11 @@ export default {
               },
               properties: {
                 settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
                   {
                     label: "Colors",
                     key: "color",
@@ -1609,6 +1664,11 @@ export default {
               },
               properties: {
                 settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
                   {
                     label: "X Axis Combo",
                     key: "axisTimeCombinations",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 3f03efdccf..9016413cbe 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -279,10 +279,10 @@
 		"description": "Donut Chart",
 		"data": true,
 		"props": {
+			"model": "string",
 			"color": "string",
 			"height": "number",
 			"width": "number",
-			"model": "string",
 			"hasFixedHighlightedSlice": "bool",
 			"hasLastHoverSliceHighlighted": "bool",
 			"hasHoverAnimation": "bool",
@@ -299,6 +299,7 @@
 		"description": "Sparkline Chart",
 		"data": true,
 		"props": {
+			"model": "string",
 			"areaGradient": "string",
 			"height": "number",
 			"width": "number",
@@ -314,6 +315,7 @@
 		"description": "Stacked Bar Chart",
 		"data": true,
 		"props": {
+			"model": "string",
 			"color": "string",
 			"height": "number",
 			"width": "number",
@@ -342,6 +344,7 @@
 		"description": "Step Chart",
 		"data": true,
 		"props": {
+			"model": "string",
 			"color": "string",
 			"height": "number",
 			"width": "number",
@@ -375,6 +378,7 @@
 		"description": "Step Chart",
 		"data": true,
 		"props": {
+			"model": "string",
 			"height": "number",
 			"width": "number",
 			"margin": "string",
@@ -389,6 +393,7 @@
 		"description": "Scatterplot Chart",
 		"data": true,
 		"props": { 
+			"model": "string",
 			"color": "string",
 			"height": "number",
 			"width": "number",
@@ -411,6 +416,7 @@
 		"description": "Bar Chart",
 		"data": true,
 		"props": {
+			"model": "string",
 			"betweenBarsPadding": "number",
 			"gradient": "string",
 			"color": "string",
@@ -425,7 +431,8 @@
 			"labelNumberFormat": "number",
 			"labelSize": "number",
 			"locale": "string",
-			"nameLabel": "string",			
+			"nameLabel": "string",
+			"valueLabel": "string",
 			"numberLabel": "string",
 			"xAxisLabel": "string",
 			"yAxisLabel": "string",
@@ -438,6 +445,7 @@
 		"description": "Line Chart",
 		"data": true,
 		"props": {
+			"model": "string",
 			"width": "number",
 			"height": "number",
 			"axisTimeCombinations": "string",
@@ -463,6 +471,7 @@
 		"description": "brush chart",
 		"data": true,
 		"props": {
+			"model": "string",
 			"gradient": "string",
 			"height": "number",
 			"width": "number",
@@ -479,6 +488,7 @@
 		"description": "Groupedbar chart",
 		"data": true,
 		"props": {
+			"model": "string",
 			"color": "string",
 			"height": "number",
 			"width": "number",
@@ -491,6 +501,7 @@
 		"description": "Groupedbar chart",
 		"data": true,
 		"props": {
+			"model": "string",
 			"color": "string",
 			"height": "string",
 			"width": "string",
@@ -511,6 +522,7 @@
 		"description": "Bullet chart",
 		"data": true,
 		"props": {
+			"model": "string",
 			"color": "string",
 			"customSubtitle": "string",
 			"customTitle": "string",
diff --git a/packages/standard-components/src/Chart/Bar.svelte b/packages/standard-components/src/Chart/Bar.svelte
index ea08baea60..c1ac24e6ca 100644
--- a/packages/standard-components/src/Chart/Bar.svelte
+++ b/packages/standard-components/src/Chart/Bar.svelte
@@ -56,16 +56,36 @@
 
   export let useLegend = true
 
-  onMount(() => {
+  export let _bb
+  export let model
+
+  let store = _bb.store
+
+  onMount(async () => {
     if (chartElement) {
+      await fetchData()
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       bindChartEvents()
-      chartContainer.datum(data).call(chart)
+      chartContainer.datum(_data).call(chart)
       bindChartTooltip()
     }
   })
 
+  async function fetchData() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const json = await response.json()
+      store.update(state => {
+        state[model] = json
+        return state
+      })
+    } else {
+      throw new Error("Failed to fetch records.", response)
+    }
+  }
+
   function bindChartUIProps() {
     if (color) {
       chart.colorSchema(colorSchema)
@@ -165,6 +185,8 @@
     tooltipContainer.datum([]).call(tooltip)
   }
 
+  $: _data = model ? $store[model] : data
+
   $: colorSchema = getColorSchema(color)
   $: chartGradient = getChartGradient(gradient)
 </script>
diff --git a/packages/standard-components/src/Chart/Brush.svelte b/packages/standard-components/src/Chart/Brush.svelte
index 0dbf0b6171..4294782575 100644
--- a/packages/standard-components/src/Chart/Brush.svelte
+++ b/packages/standard-components/src/Chart/Brush.svelte
@@ -11,6 +11,11 @@
     - Chart gradient doesn't seem to do anything
   */
 
+  export let _bb
+  export let model
+
+  let store = _bb.store
+
   const _id = shortid.generate()
 
   const chart = britecharts.brush()
@@ -36,15 +41,32 @@
   export let xTicks = null
   export let xAxisCustomFormat = null
 
-  onMount(() => {
+  onMount(async () => {
     if (chart) {
+      if (model) {
+        await fetchData()
+      }
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       bindChartEvents()
-      chartContainer.datum(data).call(chart)
+      chartContainer.datum(_data).call(chart)
     }
   })
 
+  async function fetchData() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const json = await response.json()
+      store.update(state => {
+        state[model] = json
+        return state
+      })
+    } else {
+      throw new Error("Failed to fetch records.", response)
+    }
+  }
+
   function bindChartUIProps() {
     if (notNull(gradient)) {
       chart.gradient(chartGradient)
@@ -87,6 +109,8 @@
     }
   }
 
+  $: _data = model ? $store[model] : data
+
   $: chartGradient = getChartGradient(gradient)
   $: console.log(chartGradient)
 </script>
diff --git a/packages/standard-components/src/Chart/Bullet.svelte b/packages/standard-components/src/Chart/Bullet.svelte
index 1356eea3a7..c4c140356e 100644
--- a/packages/standard-components/src/Chart/Bullet.svelte
+++ b/packages/standard-components/src/Chart/Bullet.svelte
@@ -8,6 +8,11 @@
 
   const _id = shortid.generate()
 
+  export let _bb
+  export let model
+
+  let store = _bb.store
+
   const chart = britecharts.bullet()
   const chartClass = `bullet-container-${_id}`
   const legendClass = `legend-container-${_id}`
@@ -29,14 +34,31 @@
   export let width = 200
   export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
 
-  onMount(() => {
+  onMount(async () => {
     if (chart) {
+      if (model) {
+        await fetchData()
+      }
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
-      chartContainer.datum(data).call(chart)
+      chartContainer.datum(_data).call(chart)
     }
   })
 
+  async function fetchData() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const json = await response.json()
+      store.update(state => {
+        state[model] = json
+        return state
+      })
+    } else {
+      throw new Error("Failed to fetch records.", response)
+    }
+  }
+
   function bindChartUIProps() {
     if (notNull(color)) {
       chart.colorSchema(colorSchema)
@@ -73,6 +95,8 @@
     }
   }
 
+  $: _data = model ? $store[model] : data
+
   $: colorSchema = getColorSchema(color)
 </script>
 
diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte
index 8c1785a8d9..5f98e9fbde 100644
--- a/packages/standard-components/src/Chart/Donut.svelte
+++ b/packages/standard-components/src/Chart/Donut.svelte
@@ -60,15 +60,13 @@
     }
   }
 
-  onMount(async () => {
-    await fetchData()
-  })
-
   $: _data = model ? $store[model] : data
   $: console.log("_data", _data)
 
-  onMount(() => {
+  onMount(async () => {
     if (chart) {
+      await fetchData()
+
       chart.emptyDataConfig({
         showEmptySlice: true,
         emptySliceColor: "#000000",
@@ -76,7 +74,7 @@
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       bindChartEvents()
-      chartContainer.datum(data).call(chart)
+      chartContainer.datum(_data).call(chart)
     }
   })
 
diff --git a/packages/standard-components/src/Chart/GroupedBar.svelte b/packages/standard-components/src/Chart/GroupedBar.svelte
index a4ef3e1e23..70b111ed8c 100644
--- a/packages/standard-components/src/Chart/GroupedBar.svelte
+++ b/packages/standard-components/src/Chart/GroupedBar.svelte
@@ -13,6 +13,11 @@
 
   const _id = shortid.generate()
 
+  export let _bb
+  export let model
+
+  let store = _bb.store
+
   const chart = britecharts.groupedBar()
   const chartClass = `groupedbar-container-${_id}`
   const legendClass = `legend-container-${_id}`
@@ -48,8 +53,11 @@
   export let yTickTextOffset = null
   export let useLegend = true
 
-  onMount(() => {
+  onMount(async () => {
     if (chart) {
+      if (model) {
+        await fetchData()
+      }
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       //   bindChartEvents()
@@ -58,6 +66,20 @@
     }
   })
 
+  async function fetchData() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const json = await response.json()
+      store.update(state => {
+        state[model] = json
+        return state
+      })
+    } else {
+      throw new Error("Failed to fetch records.", response)
+    }
+  }
+
   function bindChartUIProps() {
     if (notNull(color)) {
       chart.colorSchema(colorSchema)
@@ -130,6 +152,8 @@
     }
   }
 
+  $: _data = model ? $store[model] : data
+
   $: colorSchema = getColorSchema(color)
 </script>
 
diff --git a/packages/standard-components/src/Chart/Heatmap.svelte b/packages/standard-components/src/Chart/Heatmap.svelte
index 41c4affdb8..2d5422d364 100644
--- a/packages/standard-components/src/Chart/Heatmap.svelte
+++ b/packages/standard-components/src/Chart/Heatmap.svelte
@@ -8,6 +8,11 @@
 
   const _id = shortid.generate()
 
+  export let _bb
+  export let model
+
+  let store = _bb.store
+
   const chart = britecharts.heatmap()
   const chartClass = `heatmap-container-${_id}`
   const legendClass = `legend-container-${_id}`
@@ -24,14 +29,31 @@
   export let yAxisLabels = null
   export let boxSize = null
 
-  onMount(() => {
+  onMount(async () => {
     if (chart) {
+      if (model) {
+        await fetchData()
+      }
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       chartContainer.datum(data).call(chart)
     }
   })
 
+  async function fetchData() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const json = await response.json()
+      store.update(state => {
+        state[model] = json
+        return state
+      })
+    } else {
+      throw new Error("Failed to fetch records.", response)
+    }
+  }
+
   function bindChartUIProps() {
     if (notNull(color)) {
       chart.colorSchema(colorSchema)
@@ -50,6 +72,8 @@
     }
   }
 
+  $: _data = model ? $store[model] : data
+
   $: colorSchema = getColorSchema(color)
 </script>
 
diff --git a/packages/standard-components/src/Chart/Line.svelte b/packages/standard-components/src/Chart/Line.svelte
index 5bbf40650f..afb37322f3 100644
--- a/packages/standard-components/src/Chart/Line.svelte
+++ b/packages/standard-components/src/Chart/Line.svelte
@@ -8,6 +8,11 @@
 
   const _id = shortid.generate()
 
+  export let _bb
+  export let model
+
+  let store = _bb.store
+
   const chart = britecharts.line()
   const chartClass = `line-container-${_id}`
   const legendClass = `legend-container-${_id}`
@@ -49,14 +54,33 @@
   export let lines = null //not handled by setting prop
   export let tooltipThreshold = null
 
-  onMount(() => {
-    chartContainer = select(`.${chartClass}`)
-    bindChartUIProps()
-    bindChartEvents()
-    chartContainer.datum(data).call(chart)
-    bindChartTooltip()
+  onMount(async () => {
+    if (chart) {
+      if (model) {
+        await fetchData()
+      }
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      bindChartEvents()
+      chartContainer.datum(_data).call(chart)
+      bindChartTooltip()
+    }
   })
 
+  async function fetchData() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const json = await response.json()
+      store.update(state => {
+        state[model] = json
+        return state
+      })
+    } else {
+      throw new Error("Failed to fetch records.", response)
+    }
+  }
+
   function bindChartUIProps() {
     if (notNull(color)) {
       chart.colorSchema(colorSchema)
@@ -148,6 +172,8 @@
     tooltipContainer.datum([]).call(tooltip)
   }
 
+  $: _data = model ? $store[model] : data
+
   $: colorSchema = getColorSchema(color)
 </script>
 
diff --git a/packages/standard-components/src/Chart/ScatterPlot.svelte b/packages/standard-components/src/Chart/ScatterPlot.svelte
index 9c92a635cc..d685f7421f 100644
--- a/packages/standard-components/src/Chart/ScatterPlot.svelte
+++ b/packages/standard-components/src/Chart/ScatterPlot.svelte
@@ -8,6 +8,11 @@
 
   const _id = shortid.generate()
 
+  export let _bb
+  export let model
+
+  let store = _bb.store
+
   const chart = britecharts.scatterPlot()
   const chartClass = `scatterplot-container-${_id}`
   const legendClass = `legend-container-${_id}`
@@ -51,16 +56,33 @@
   export let yTicks = null
   export let useLegend = true
 
-  onMount(() => {
+  onMount(async () => {
     if (chart) {
+      if (model) {
+        await fetchData()
+      }
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       bindChartEvents()
-      chartContainer.datum(data).call(chart)
+      chartContainer.datum(_data).call(chart)
       bindChartTooltip()
     }
   })
 
+  async function fetchData() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const json = await response.json()
+      store.update(state => {
+        state[model] = json
+        return state
+      })
+    } else {
+      throw new Error("Failed to fetch records.", response)
+    }
+  }
+
   function bindChartUIProps() {
     if (notNull(color)) {
       chart.colorSchema(colorSchema)
@@ -154,6 +176,8 @@
     tooltipContainer.datum([]).call(tooltip)
   }
 
+  $: _data = model ? $store[model] : data
+
   $: colorSchema = getColorSchema(color)
 </script>
 
diff --git a/packages/standard-components/src/Chart/Sparkline.svelte b/packages/standard-components/src/Chart/Sparkline.svelte
index 0d321a81f2..e1bc29e278 100644
--- a/packages/standard-components/src/Chart/Sparkline.svelte
+++ b/packages/standard-components/src/Chart/Sparkline.svelte
@@ -8,6 +8,11 @@
 
   const _id = shortid.generate()
 
+  export let _bb
+  export let model
+
+  let store = _bb.store
+
   const chart = britecharts.sparkline()
   const chartClass = `sparkline-container-${_id}`
   const legendClass = `legend-container-${_id}`
@@ -28,14 +33,31 @@
   export let valueLabel = null
   export let useLegend = true
 
-  onMount(() => {
+  onMount(async () => {
     if (chart) {
+      if (model) {
+        await fetchData()
+      }
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
-      chartContainer.datum(data).call(chart)
+      chartContainer.datum(_data).call(chart)
     }
   })
 
+  async function fetchData() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const json = await response.json()
+      store.update(state => {
+        state[model] = json
+        return state
+      })
+    } else {
+      throw new Error("Failed to fetch records.", response)
+    }
+  }
+
   function bindChartUIProps() {
     if (notNull(areaGradient)) {
       chart.areaGradient(aGradient)
@@ -69,6 +91,8 @@
     }
   }
 
+  $: _data = model ? $store[model] : data
+
   $: aGradient = getChartGradient(areaGradient)
   $: lGradient = getChartGradient(lineGradient)
 </script>
diff --git a/packages/standard-components/src/Chart/StackedArea.svelte b/packages/standard-components/src/Chart/StackedArea.svelte
index 8eabacef49..0218ae327f 100644
--- a/packages/standard-components/src/Chart/StackedArea.svelte
+++ b/packages/standard-components/src/Chart/StackedArea.svelte
@@ -8,6 +8,11 @@
 
   const _id = shortid.generate()
 
+  export let _bb
+  export let model
+
+  let store = _bb.store
+
   const chart = britecharts.stackedArea()
   const chartClass = `stackedarea-container-${_id}`
   const legendClass = `legend-container-${_id}`
@@ -51,16 +56,33 @@
   export let yTicks = null
   export let useLegend = true
 
-  onMount(() => {
+  onMount(async () => {
     if (chart) {
+      if (model) {
+        await fetchData()
+      }
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       bindChartEvents()
-      chartContainer.datum(data).call(chart)
+      chartContainer.datum(_data).call(chart)
       bindChartTooltip()
     }
   })
 
+  async function fetchData() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const json = await response.json()
+      store.update(state => {
+        state[model] = json
+        return state
+      })
+    } else {
+      throw new Error("Failed to fetch records.", response)
+    }
+  }
+
   function bindChartUIProps() {
     if (notNull(color)) {
       chart.colorSchema(colorSchema)
@@ -148,6 +170,8 @@
     }
   }
 
+  $: _data = model ? $store[model] : data
+
   $: colorSchema = getColorSchema(color)
 </script>
 
diff --git a/packages/standard-components/src/Chart/StackedBar.svelte b/packages/standard-components/src/Chart/StackedBar.svelte
index c8f2bc7fbc..f616d1a398 100644
--- a/packages/standard-components/src/Chart/StackedBar.svelte
+++ b/packages/standard-components/src/Chart/StackedBar.svelte
@@ -12,6 +12,11 @@
   const chartClass = `stackedbar-container-${_id}`
   const legendClass = `legend-container-${_id}`
 
+  export let _bb
+  export let model
+
+  let store = _bb.store
+
   let chartElement = null
   let chartContainer = null
   let tooltip
@@ -46,16 +51,33 @@
   export let yAxisLabelOffset = null
   export let useLegend = true
 
-  onMount(() => {
+  onMount(async () => {
     if (chart) {
+      if (model) {
+        await fetchData()
+      }
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       bindChartEvents()
-      chartContainer.datum(data).call(chart)
+      chartContainer.datum(_data).call(chart)
       //   bindChartTooltip()
     }
   })
 
+  async function fetchData() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const json = await response.json()
+      store.update(state => {
+        state[model] = json
+        return state
+      })
+    } else {
+      throw new Error("Failed to fetch records.", response)
+    }
+  }
+
   function bindChartUIProps() {
     //UI PROPS
     if (notNull(color)) {
@@ -143,6 +165,8 @@
     tooltipContainer.datum([]).call(tooltip)
   }
 
+  $: _data = model ? $store[model] : data
+
   $: colorSchema = getColorSchema(color)
 </script>
 
diff --git a/packages/standard-components/src/Chart/Step.svelte b/packages/standard-components/src/Chart/Step.svelte
index e1f53ca317..342f5ca3ec 100644
--- a/packages/standard-components/src/Chart/Step.svelte
+++ b/packages/standard-components/src/Chart/Step.svelte
@@ -12,6 +12,11 @@
 
   const _id = shortid.generate()
 
+  export let _bb
+  export let model
+
+  let store = _bb.store
+
   const chart = britecharts.step()
   const chartClass = `step-container-${_id}`
   const legendClass = `legend-container-${_id}`
@@ -41,16 +46,33 @@
   export let yTicks = null
   export let useLegend = true
 
-  onMount(() => {
+  onMount(async () => {
     if (chart) {
+      if (model) {
+        await fetchData()
+      }
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       bindChartEvents()
-      chartContainer.datum(data).call(chart)
+      chartContainer.datum(_data).call(chart)
       bindChartTooltip()
     }
   })
 
+  async function fetchData() {
+    const FETCH_RECORDS_URL = `/api/views/all_${model}`
+    const response = await _bb.api.get(FETCH_RECORDS_URL)
+    if (response.status === 200) {
+      const json = await response.json()
+      store.update(state => {
+        state[model] = json
+        return state
+      })
+    } else {
+      throw new Error("Failed to fetch records.", response)
+    }
+  }
+
   function bindChartUIProps() {
     if (notNull(height)) {
       chart.height(height)
@@ -96,6 +118,8 @@
     tooltipContainer.datum([]).call(tooltip)
   }
 
+  $: _data = model ? $store[model] : data
+
   $: colorSchema = getColorSchema(color)
 </script>
 

From efbd3b7c862ac7ea792e09f4b9b58071dc03a728 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Tue, 4 Aug 2020 16:21:51 +0100
Subject: [PATCH 17/25] Separate Legend into its own component

---
 .../src/Chart/Donut.svelte                    | 10 +-
 .../src/Chart/Legend.svelte                   | 96 +++++++++++++++++++
 2 files changed, 99 insertions(+), 7 deletions(-)
 create mode 100644 packages/standard-components/src/Chart/Legend.svelte

diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte
index 5f98e9fbde..9651606051 100644
--- a/packages/standard-components/src/Chart/Donut.svelte
+++ b/packages/standard-components/src/Chart/Donut.svelte
@@ -1,5 +1,6 @@
 <script>
   import { getColorSchema, notNull } from "./utils.js"
+  import Legend from "./Legend.svelte"
   import britecharts from "britecharts"
   import { onMount } from "svelte"
 
@@ -44,7 +45,6 @@
   export let internalRadius = 25
   export let isAnimated = true
   export let radiusHoverOffset = 0
-  export let useLegend = true
 
   async function fetchData() {
     const FETCH_RECORDS_URL = `/api/views/all_${model}`
@@ -60,9 +60,6 @@
     }
   }
 
-  $: _data = model ? $store[model] : data
-  $: console.log("_data", _data)
-
   onMount(async () => {
     if (chart) {
       await fetchData()
@@ -144,10 +141,9 @@
     }
   }
 
+  $: _data = model ? $store[model] : data
   $: colorSchema = getColorSchema(color)
 </script>
 
 <div bind:this={chartElement} class={chartClass} />
-{#if useLegend}
-  <div class={legendClass} />
-{/if}
+<Legend useLegend {chartClass} {width} data={_data} />
diff --git a/packages/standard-components/src/Chart/Legend.svelte b/packages/standard-components/src/Chart/Legend.svelte
new file mode 100644
index 0000000000..55155ef72e
--- /dev/null
+++ b/packages/standard-components/src/Chart/Legend.svelte
@@ -0,0 +1,96 @@
+<script>
+  import britecharts from "britecharts"
+  import { notNull } from "./utils"
+  import { select } from "d3-selection"
+  import { onMount } from "svelte"
+
+  export let chartClass = ""
+  export let useLegend = true
+  export let data = []
+  export let width = null
+  export let height = null
+  export let colorSchema = null
+  export let highlight = null
+  export let highlightByEntryId = null
+  export let isHorizontal = false
+  export let margin = null
+  export let marginRatio = null
+  export let markerSize = null
+  export let numberFormat = null
+  export let unit = null
+
+  let legend = britecharts.legend()
+  let legendContainer = null
+  let legendElement = null
+
+  let chartSvgWidth = 0
+  let chartSvg = null
+
+  onMount(() => {
+    if (chartClass) {
+      chartSvg = document.querySelector(`.${chartClass} .britechart`)
+    }
+  })
+
+  function bindChartUIProps() {
+    if (width) {
+      legend.width(width)
+    } else if (chartSvg) {
+      legend.width(chartSvg.clientWidth)
+    }
+
+    if (notNull(height)) {
+      legend.height(height)
+    }
+
+    if (notNull(colorSchema)) {
+      legend.colorSchema(colorSchema)
+    }
+
+    if (notNull(highlight)) {
+      legend.highlight(highlight)
+    }
+
+    if (notNull(highlightByEntryId)) {
+      legend.highlightByEntryId(highlightByEntryId)
+    }
+
+    if (notNull(isHorizontal)) {
+      legend.isHorizontal(isHorizontal)
+    }
+
+    if (notNull(margin)) {
+      legend.margin(margin)
+    }
+
+    if (notNull(marginRatio)) {
+      legend.marginRatio(marginRatio)
+    }
+
+    if (notNull(markerSize)) {
+      legend.markerSize(markerSize)
+    }
+
+    if (notNull(numberFormat)) {
+      legend.numberFormat(numberFormat)
+    }
+
+    if (notNull(unit)) {
+      legend.unit(unit)
+    }
+  }
+
+  $: {
+    if (legendElement) {
+      legendContainer = select(legendElement)
+      bindChartUIProps()
+      legendContainer.datum(data).call(legend)
+    }
+  }
+
+  const legendClass = `legend-container`
+</script>
+
+{#if useLegend}
+  <div bind:this={legendElement} class={legendClass} />
+{/if}

From f1dd3e8a3df3536e5db7c095785e01184b51cabf Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Wed, 5 Aug 2020 14:19:56 +0100
Subject: [PATCH 18/25] Chart legend and UI Updates

---
 .../userInterface/PropertyControl.svelte      |  2 ++
 .../userInterface/temporaryPanelStructure.js  | 10 -------
 .../src/Chart/Donut.svelte                    | 28 ++++++++++++++-----
 .../src/Chart/Legend.svelte                   |  2 +-
 4 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 0389f44654..f6efdba9d3 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -48,6 +48,7 @@
   .property-control {
     display: flex;
     flex-flow: row;
+    width: 260px;
     margin: 8px 0px;
     align-items: center;
   }
@@ -57,6 +58,7 @@
     align-items: center;
     font-size: 12px;
     font-weight: 400;
+    width: 100px;
     text-align: left;
     color: var(--ink);
     margin-right: auto;
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 6e5e610be3..dc05f1dab2 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -538,16 +538,6 @@ export default {
                       "yellow",
                     ],
                   },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
                   {
                     label: "External Radius",
                     key: "externalRadius",
diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte
index 9651606051..2226daaaeb 100644
--- a/packages/standard-components/src/Chart/Donut.svelte
+++ b/packages/standard-components/src/Chart/Donut.svelte
@@ -12,6 +12,7 @@
   const chart = britecharts.donut()
   const chartClass = `donut-container-${_id}`
   const legendClass = `legend-container-${_id}`
+  let legendChart
 
   let chartElement = null
   let chartContainer = null
@@ -62,7 +63,9 @@
 
   onMount(async () => {
     if (chart) {
-      await fetchData()
+      if (model) {
+        await fetchData()
+      }
 
       chart.emptyDataConfig({
         showEmptySlice: true,
@@ -133,17 +136,28 @@
     if (customMouseMove) {
       chart.on("customMouseMove", customMouseMove)
     }
-    if (customMouseOut) {
-      chart.on("customMouseOut", customMouseOut)
-    }
-    if (customMouseOver) {
-      chart.on("customMouseOver", customMouseOver)
+
+    if (legendChart) {
+      chart.on("customMouseOut", function() {
+        legendChart.clearHighlight()
+      })
+      chart.on("customMouseOver", function(data) {
+        console.log("DATA", data.data)
+        legendChart.highlight(data.data.id)
+      })
     }
   }
 
   $: _data = model ? $store[model] : data
+
   $: colorSchema = getColorSchema(color)
 </script>
 
 <div bind:this={chartElement} class={chartClass} />
-<Legend useLegend {chartClass} {width} data={_data} />
+<Legend
+  bind:legend={legendChart}
+  {colorSchema}
+  useLegend
+  {chartClass}
+  {width}
+  data={_data} />
diff --git a/packages/standard-components/src/Chart/Legend.svelte b/packages/standard-components/src/Chart/Legend.svelte
index 55155ef72e..1bb73ff75d 100644
--- a/packages/standard-components/src/Chart/Legend.svelte
+++ b/packages/standard-components/src/Chart/Legend.svelte
@@ -19,7 +19,7 @@
   export let numberFormat = null
   export let unit = null
 
-  let legend = britecharts.legend()
+  export let legend = britecharts.legend() //exported it can be bound to
   let legendContainer = null
   let legendElement = null
 

From 2cd8d09822587870234462596c5408d09022f750 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Wed, 5 Aug 2020 16:57:54 +0100
Subject: [PATCH 19/25] Latest Donut and Legend Updates

---
 .../src/components/common/Checkbox.svelte     |   2 +-
 .../userInterface/temporaryPanelStructure.js  |  32 ++++--
 packages/standard-components/components.json  |   5 +-
 .../src/Chart/Donut.svelte                    |  42 +++++--
 .../src/Chart/Legend.svelte                   | 105 ++++++++----------
 5 files changed, 106 insertions(+), 80 deletions(-)

diff --git a/packages/builder/src/components/common/Checkbox.svelte b/packages/builder/src/components/common/Checkbox.svelte
index fe3f5756eb..ebd2df2a0c 100644
--- a/packages/builder/src/components/common/Checkbox.svelte
+++ b/packages/builder/src/components/common/Checkbox.svelte
@@ -27,7 +27,7 @@
     height: 20px;
     /* background-color: #5e17e9; */
     background-color: var(--grey-2);
-    transform: translateY(-50%);
+    /* transform: translateY(-50%); */
     cursor: pointer;
     transition: 0.2s ease transform, 0.2s ease background-color,
       0.2s ease box-shadow;
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index dc05f1dab2..4d40fe8144 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -498,13 +498,7 @@ export default {
                     control: ModelSelect,
                   },
                   {
-                    label: "Fix Highlight Slice",
-                    key: "hasFixedHighlightedSlice",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Hover highlight",
+                    label: "Keep Last Hover",
                     key: "hasLastHoverSliceHighlighted",
                     valueKey: "checked",
                     control: Checkbox,
@@ -516,7 +510,7 @@ export default {
                     control: Checkbox,
                   },
                   {
-                    label: "Has Hover",
+                    label: "Hover Highlight",
                     key: "hasHoverAnimation",
                     valueKey: "checked",
                     control: Checkbox,
@@ -559,6 +553,28 @@ export default {
                     valueKey: "checked",
                     control: Checkbox,
                   },
+                  {
+                    label: "Show Legend",
+                    key: "useLegend",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    label: "Horizontal Legend",
+                    key: "horizontalLegend",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    label: "Legend Width",
+                    key: "legendWidth",
+                    control: Input,
+                  },
+                  {
+                    label: "Legend Height",
+                    key: "legendHeight",
+                    control: Input,
+                  },
                 ],
               },
             },
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 9016413cbe..c7a668cc62 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -291,8 +291,11 @@
 			"externalRadius": "number",
 			"internalRadius": "number",
 			"radiusHoverOffset": "number",
+			"percentageFormat": "string",
 			"useLegend": "bool",
-			"percentageFormat": "string"
+			"horizontalLegend": "bool",
+			"legendWidth": "number",
+			"legendHeight": "number"
 		}
 	},
 	"sparkline": {
diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte
index 2226daaaeb..470673e9b6 100644
--- a/packages/standard-components/src/Chart/Donut.svelte
+++ b/packages/standard-components/src/Chart/Donut.svelte
@@ -17,14 +17,15 @@
   let chartElement = null
   let chartContainer = null
 
+  let chartSvgWidth = 0
+  let chartSvg = null
+
   export let _bb
   export let model
 
   let store = _bb.store
 
-  export let customMouseOver = null
   export let customMouseMove = null
-  export let customMouseOut = null
   export let customClick = null
 
   export let orderingFunction = null
@@ -46,6 +47,10 @@
   export let internalRadius = 25
   export let isAnimated = true
   export let radiusHoverOffset = 0
+  export let useLegend = true
+  export let horizontalLegend = false
+  export let legendWidth = null
+  export let legendHeight = null
 
   async function fetchData() {
     const FETCH_RECORDS_URL = `/api/views/all_${model}`
@@ -79,6 +84,8 @@
   })
 
   function bindChartUIProps() {
+    chart.percentageFormat(".0f")
+
     if (notNull(color)) {
       chart.colorSchema(getColorSchema(color))
     }
@@ -127,6 +134,8 @@
     if (notNull(orderingFunction)) {
       chart.orderingFunction(orderingFunction)
     }
+    chartContainer.datum(_data).call(chart)
+    chartSvg = document.querySelector(`.${chartClass} .britechart`)
   }
 
   function bindChartEvents() {
@@ -142,22 +151,33 @@
         legendChart.clearHighlight()
       })
       chart.on("customMouseOver", function(data) {
-        console.log("DATA", data.data)
         legendChart.highlight(data.data.id)
       })
     }
   }
 
+  $: if (!width && chartSvg) {
+    width = chartSvg.clientWidth
+    chart.width(width)
+    chartContainer.datum(_data).call(chart)
+  }
+
   $: _data = model ? $store[model] : data
 
   $: colorSchema = getColorSchema(color)
 </script>
 
-<div bind:this={chartElement} class={chartClass} />
-<Legend
-  bind:legend={legendChart}
-  {colorSchema}
-  useLegend
-  {chartClass}
-  {width}
-  data={_data} />
+<div>
+  <div bind:this={chartElement} class={chartClass} />
+  {#if useLegend}
+    <Legend
+      bind:legend={legendChart}
+      {colorSchema}
+      useLegend
+      isHorizontal={horizontalLegend}
+      width={legendWidth || width}
+      height={legendHeight}
+      {chartClass}
+      data={_data} />
+  {/if}
+</div>
diff --git a/packages/standard-components/src/Chart/Legend.svelte b/packages/standard-components/src/Chart/Legend.svelte
index 1bb73ff75d..eb01b9475e 100644
--- a/packages/standard-components/src/Chart/Legend.svelte
+++ b/packages/standard-components/src/Chart/Legend.svelte
@@ -4,7 +4,6 @@
   import { select } from "d3-selection"
   import { onMount } from "svelte"
 
-  export let chartClass = ""
   export let useLegend = true
   export let data = []
   export let width = null
@@ -23,71 +22,59 @@
   let legendContainer = null
   let legendElement = null
 
-  let chartSvgWidth = 0
-  let chartSvg = null
-
-  onMount(() => {
-    if (chartClass) {
-      chartSvg = document.querySelector(`.${chartClass} .britechart`)
-    }
-  })
-
-  function bindChartUIProps() {
-    if (width) {
-      legend.width(width)
-    } else if (chartSvg) {
-      legend.width(chartSvg.clientWidth)
-    }
-
-    if (notNull(height)) {
-      legend.height(height)
-    }
-
-    if (notNull(colorSchema)) {
-      legend.colorSchema(colorSchema)
-    }
-
-    if (notNull(highlight)) {
-      legend.highlight(highlight)
-    }
-
-    if (notNull(highlightByEntryId)) {
-      legend.highlightByEntryId(highlightByEntryId)
-    }
-
-    if (notNull(isHorizontal)) {
-      legend.isHorizontal(isHorizontal)
-    }
-
-    if (notNull(margin)) {
-      legend.margin(margin)
-    }
-
-    if (notNull(marginRatio)) {
-      legend.marginRatio(marginRatio)
-    }
-
-    if (notNull(markerSize)) {
-      legend.markerSize(markerSize)
-    }
-
-    if (notNull(numberFormat)) {
-      legend.numberFormat(numberFormat)
-    }
-
-    if (notNull(unit)) {
-      legend.unit(unit)
-    }
-  }
-
   $: {
     if (legendElement) {
       legendContainer = select(legendElement)
-      bindChartUIProps()
+      legend.numberFormat(".0f")
+
+      if (width) {
+        legend.width(width)
+      }
+
+      if (notNull(height)) {
+        legend.height(height)
+      }
+
+      if (notNull(colorSchema)) {
+        legend.colorSchema(colorSchema)
+      }
+
+      if (notNull(highlight)) {
+        legend.highlight(highlight)
+      }
+
+      if (notNull(highlightByEntryId)) {
+        legend.highlightByEntryId(highlightByEntryId)
+      }
+
+      if (notNull(margin)) {
+        legend.margin(margin)
+      }
+
+      if (notNull(marginRatio)) {
+        legend.marginRatio(marginRatio)
+      }
+
+      if (notNull(markerSize)) {
+        legend.markerSize(markerSize)
+      }
+
+      if (notNull(numberFormat)) {
+        legend.numberFormat(numberFormat)
+      }
+
+      if (notNull(unit)) {
+        legend.unit(unit)
+      }
       legendContainer.datum(data).call(legend)
     }
   }
 
+  $: if (notNull(isHorizontal)) {
+    debugger
+    legend.isHorizontal(isHorizontal)
+  }
+
   const legendClass = `legend-container`
 </script>
 

From ad75a142eaed8a0d6c395b7a58b5a366d4bd932f Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Wed, 5 Aug 2020 17:05:06 +0100
Subject: [PATCH 20/25] Tidyup

---
 .../userInterface/temporaryPanelStructure.js       | 14 ++++----------
 .../standard-components/src/Chart/Legend.svelte    |  9 ++++-----
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 4d40fe8144..cd95e29c42 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -498,14 +498,14 @@ export default {
                     control: ModelSelect,
                   },
                   {
-                    label: "Keep Last Hover",
-                    key: "hasLastHoverSliceHighlighted",
+                    label: "Animate Chart",
+                    key: "isAnimated",
                     valueKey: "checked",
                     control: Checkbox,
                   },
                   {
-                    label: "Is Animated",
-                    key: "isAnimated",
+                    label: "Keep Last Hover",
+                    key: "hasLastHoverSliceHighlighted",
                     valueKey: "checked",
                     control: Checkbox,
                   },
@@ -553,12 +553,6 @@ export default {
                     valueKey: "checked",
                     control: Checkbox,
                   },
-                  {
-                    label: "Show Legend",
-                    key: "useLegend",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
                   {
                     label: "Horizontal Legend",
                     key: "horizontalLegend",
diff --git a/packages/standard-components/src/Chart/Legend.svelte b/packages/standard-components/src/Chart/Legend.svelte
index eb01b9475e..f42e714507 100644
--- a/packages/standard-components/src/Chart/Legend.svelte
+++ b/packages/standard-components/src/Chart/Legend.svelte
@@ -47,6 +47,10 @@
         legend.highlightByEntryId(highlightByEntryId)
       }
 
+      if (notNull(isHorizontal)) {
+        legend.isHorizontal(isHorizontal)
+      }
+
       if (notNull(margin)) {
         legend.margin(margin)
       }
@@ -70,11 +74,6 @@
     }
   }
 
-  $: if (notNull(isHorizontal)) {
-    debugger
-    legend.isHorizontal(isHorizontal)
-  }
-
   const legendClass = `legend-container`
 </script>
 

From 9ddf8d07ecd7553e4689aa84a2e5ebed3bd436d0 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Thu, 6 Aug 2020 17:15:57 +0100
Subject: [PATCH 21/25] Bar chart with tests and general bug fixes

---
 .../src/components/common/Checkbox.svelte     | 14 ++--
 .../userInterface/temporaryPanelStructure.js  | 67 ++++++-----------
 .../standard-components/src/Chart/Bar.svelte  | 31 ++++++--
 .../src/Chart/tests/bar.html                  | 73 +++++++++++++++++++
 4 files changed, 130 insertions(+), 55 deletions(-)
 create mode 100644 packages/standard-components/src/Chart/tests/bar.html

diff --git a/packages/builder/src/components/common/Checkbox.svelte b/packages/builder/src/components/common/Checkbox.svelte
index ebd2df2a0c..3c5888d7c8 100644
--- a/packages/builder/src/components/common/Checkbox.svelte
+++ b/packages/builder/src/components/common/Checkbox.svelte
@@ -12,16 +12,18 @@
 </script>
 
 <input type="checkbox" class="checkbox" id="_checkbox" />
-<label for="_checkbox" class:checked on:click={handleChange}>
-  <div class="tick_mark" />
-</label>
+<div on:click={handleChange}>
+  <div class="check-div" class:checked>
+    <div class="tick_mark" />
+  </div>
+</div>
 
 <style>
   .checkbox {
     display: none;
   }
 
-  label {
+  .check-div {
     position: relative;
     width: 20px;
     height: 20px;
@@ -36,7 +38,7 @@
     border-radius: 4px;
   }
 
-  label:before {
+  .check-div:before {
     content: "";
     position: absolute;
     top: 50%;
@@ -51,7 +53,7 @@
     border-radius: 2px;
   }
 
-  label:active {
+  .check-div:active {
     transform: translateY(-50%) scale(0.9);
   }
 
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index cd95e29c42..8eaf5fec67 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1068,6 +1068,16 @@ export default {
                     key: "model",
                     control: ModelSelect,
                   },
+                  {
+                    label: "Name Label",
+                    key: "nameLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Value Label",
+                    key: "valueLabel",
+                    control: Input,
+                  },
                   {
                     label: "Y Axis Label",
                     key: "yAxisLabel",
@@ -1079,10 +1089,21 @@ export default {
                     control: Input,
                   },
                   {
-                    label: "Bar Padding",
-                    key: "betweenBarsPadding",
+                    label: "X Axis Label Offset",
+                    key: "xAxisLabelOffset",
                     control: Input,
                   },
+                  {
+                    label: "Y Axis Label Offset",
+                    key: "yAxisLabelOffset",
+                    control: Input,
+                  },
+                  {
+                    label: "Enable Labels",
+                    key: "enableLabels",
+                    control: Checkbox,
+                    valueKey: "checked",
+                  },
                   {
                     label: "Colors",
                     key: "color",
@@ -1111,12 +1132,6 @@ export default {
                       { value: "orangePink", label: "Orange Pink" },
                     ],
                   },
-                  {
-                    label: "Enable Labels",
-                    key: "enableLabels",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
                   {
                     label: "Highlight Single Bar",
                     key: "hasSingleBarHighlight",
@@ -1145,16 +1160,6 @@ export default {
                     control: Checkbox,
                     valueKey: "checked",
                   },
-                  {
-                    label: "X Axis Label Offset",
-                    key: "xAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label Offset",
-                    key: "yAxisLabelOffset",
-                    control: Input,
-                  },
                   {
                     label: "Label Number Format",
                     key: "labelsNumberFormat",
@@ -1165,32 +1170,6 @@ export default {
                     key: "labelSize",
                     control: Input,
                   },
-                  {
-                    label: "Locale",
-                    key: "locale",
-                    control: Input,
-                  },
-                  {
-                    label: "Name Label",
-                    key: "nameLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Number Format",
-                    key: "numberFormat",
-                    control: Input,
-                  },
-                  {
-                    label: "Use Legend",
-                    key: "useLegend",
-                    keyValue: "checked",
-                    control: Checkbox,
-                  },
                 ],
               },
             },
diff --git a/packages/standard-components/src/Chart/Bar.svelte b/packages/standard-components/src/Chart/Bar.svelte
index c1ac24e6ca..c039d40604 100644
--- a/packages/standard-components/src/Chart/Bar.svelte
+++ b/packages/standard-components/src/Chart/Bar.svelte
@@ -7,8 +7,10 @@
   import shortid from "shortid"
   /*
     ISSUES:
-    nameLabel, valueLabel - what are these? Seem to break whenever passed a string or number. What type?
-    https://github.com/britecharts/britecharts/blob/a2c45ab023112b36e14f47c278e3a1e1c05f8383/src/charts/bar.js#L145
+    - x and y axis label set and appear in the dom but do not display next to the axis
+    - x and y axis label offset - does effect position of labels but does not render text (see above)
+    - x tick label overlaps bar, seems to be no apu method to change this? Could do it by querying for it in the dom
+      specifically and doing this: <tspan x="-10" dy="0.32em">4.0</tspan>
   */
 
   let tooltip
@@ -30,7 +32,7 @@
   export let data = []
   export let xAxisLabel = ""
   export let yAxisLabel = ""
-  export let betweenBarsPadding = 5
+  export let betweenBarsPadding = 0.1 //takes decimal values 0.1, 0.5 etc
   export let gradient = null
   export let color = "britecharts"
   export let enableLabels = true
@@ -63,7 +65,9 @@
 
   onMount(async () => {
     if (chartElement) {
-      await fetchData()
+      if (model) {
+        await fetchData()
+      }
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       bindChartEvents()
@@ -87,6 +91,9 @@
   }
 
   function bindChartUIProps() {
+    chart.numberFormat(".1f")
+    chart.labelsNumberFormat(".1f")
+
     if (color) {
       chart.colorSchema(colorSchema)
     }
@@ -130,7 +137,7 @@
       chart.isHorizontal(isHorizontal)
     }
     if (yAxisLabelOffset) {
-      chart.yAxisLabelOffset(Number(yAxisLabelOffset))
+      chart.yAxisLabelOffset(yAxisLabelOffset)
     }
     if (xAxisLabelOffset) {
       chart.xAxisLabelOffset(Number(xAxisLabelOffset))
@@ -162,6 +169,7 @@
     if (percentageAxisToMaxRatio) {
       chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
     }
+    chartContainer.datum(_data).call(chart)
   }
 
   function bindChartEvents() {
@@ -181,6 +189,7 @@
 
   function bindChartTooltip() {
     tooltip = britecharts.miniTooltip()
+    tooltip.numberFormat(".0f")
     tooltipContainer = select(`.${chartClass} .metadata-group`)
     tooltipContainer.datum([]).call(tooltip)
   }
@@ -191,7 +200,19 @@
   $: chartGradient = getChartGradient(gradient)
 </script>
 
+<!-- SVG Test 
+  <svg viewBox="6 -8 200 22">
+    <text x="5" y="10" class="text-svg">Hello World</text>
+  </svg>-->
+
 <div bind:this={chartElement} class={chartClass} />
 {#if useLegend}
   <div class={legendClass} />
 {/if}
+
+<style>
+  .text-svg {
+    font: italic 15px serif;
+    fill: red;
+  }
+</style>
diff --git a/packages/standard-components/src/Chart/tests/bar.html b/packages/standard-components/src/Chart/tests/bar.html
new file mode 100644
index 0000000000..4bedca035a
--- /dev/null
+++ b/packages/standard-components/src/Chart/tests/bar.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/britecharts@2.10.0/dist/umd/bar.min.js"
+        type="text/javascript"></script>
+
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" />
+
+</head>
+<body>
+    
+    <article>
+        <h2 class="tutorial__heading">Bar Chart</h2>
+        <div class="bar-chart"></div>
+    </article>
+
+    <script>
+
+        const dataset = [
+        {
+            "name": "Radiating",
+            "value": 2
+        },
+        {
+            "name": "Opalescent",
+            "value": 4
+        },
+        {
+            "name": "Shining",
+            "value": 3
+        },
+        {
+            "name": "Vibrant",
+            "value": 6
+        },
+        {
+            "name": "Vivid",
+            "value": 6
+        },
+        {
+            "name": "Brilliant",
+            "value": 1
+        }
+    ]
+
+        const barContainer = d3.select('.bar-chart');
+
+        const barChart = britecharts.bar()
+
+        barChart
+            .width(700)
+            .height(300)
+            .enableLabels(true)
+            .labelsNumberFormat('.0%')
+            .isAnimated(true)
+            .yAxisLabel("Quantity")
+            .xAxisLabel("Color")
+            .betweenBarsPadding("0.8")
+
+            // .on('customMouseOver', tooltip.show)
+            // .on('customMouseMove', tooltip.update)
+            // .on('customMouseOut', tooltip.hide);
+
+        barContainer.datum(dataset).call(barChart);
+
+    </script>
+</body>
+</html>
\ No newline at end of file

From bba3c90cf509306c8e49d07ae4607a21ee4edb72 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Fri, 7 Aug 2020 12:57:07 +0100
Subject: [PATCH 22/25] Donut chart for demo

---
 .../userInterface/temporaryPanelStructure.js  | 1424 +----------------
 packages/standard-components/components.json  |    1 -
 .../src/Chart/Donut.svelte                    |   36 +-
 3 files changed, 94 insertions(+), 1367 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 8eaf5fec67..b844271b49 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -430,1365 +430,93 @@ export default {
           ],
         },
         {
-          name: "Data Chart",
-          _component: "@budibase/standard-components/datachart",
-          description: "Shiny chart",
-          icon: "ri-bar-chart-line",
+          name: "Donut Chart",
+          _component: "@budibase/standard-components/donut",
+          description: "Donut chart",
+          icon: "ri-pie-chart-fill",
           properties: {
-            design: { ...all },
             settings: [
-              { label: "Table", key: "model", control: ModelSelect },
               {
-                label: "Chart Type",
-                key: "type",
+                label: "Table",
+                key: "model",
+                control: ModelSelect,
+              },
+              {
+                label: "Animate Chart",
+                key: "isAnimated",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Hover Highlight",
+                key: "hasHoverAnimation",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Keep Last Hover",
+                key: "hasLastHoverSliceHighlighted",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Colors",
+                key: "color",
                 control: OptionSelect,
                 options: [
-                  "column2d",
-                  "column3d",
-                  "line",
-                  "area2d",
-                  "bar2d",
-                  "bar3d",
-                  "pie2d",
-                  "pie3d",
-                  "doughnut2d",
-                  "doughnut3d",
-                  "pareto2d",
-                  "pareto3d",
+                  "britecharts",
+                  "blueGreen",
+                  "green",
+                  "grey",
+                  "orange",
+                  "pink",
+                  "purple",
+                  "red",
+                  "teal",
+                  "yellow",
                 ],
               },
+              {
+                label: "External Radius",
+                key: "externalRadius",
+                control: Input,
+              },
+              {
+                label: "Internal Radius",
+                key: "internalRadius",
+                control: Input,
+              },
+              {
+                label: "Radius Offset",
+                key: "radiusHoverOffset ",
+                control: Input,
+              },
+              {
+                label: "Show Legend",
+                key: "useLegend ",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Horizontal Legend",
+                key: "horizontalLegend",
+                valueKey: "checked",
+                control: Checkbox,
+              },
+              {
+                label: "Legend Width",
+                key: "legendWidth",
+                control: Input,
+              },
+              {
+                label: "Legend Height",
+                key: "legendHeight",
+                control: Input,
+              },
             ],
           },
           children: [],
         },
-        {
-          name: "Chart",
-          description: "Shiny chart",
-          icon: "ri-bar-chart-fill",
-          children: [
-            {
-              name: "Donut",
-              _component: "@budibase/standard-components/donut",
-              description: "Donut chart",
-              icon: "ri-donut-chart-line",
-              presetProps: {
-                data: [
-                  {
-                    quantity: 1,
-                    percentage: 50,
-                    name: "glittering",
-                    id: 1,
-                  },
-                  {
-                    quantity: 1,
-                    percentage: 50,
-                    name: "luminous",
-                    id: 2,
-                  },
-                ],
-              },
-              properties: {
-                design: {
-                  ...all,
-                },
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Animate Chart",
-                    key: "isAnimated",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Keep Last Hover",
-                    key: "hasLastHoverSliceHighlighted",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Hover Highlight",
-                    key: "hasHoverAnimation",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "External Radius",
-                    key: "externalRadius",
-                    control: Input,
-                  },
-                  {
-                    label: "Internal Radius",
-                    key: "internalRadius",
-                    control: Input,
-                  },
-                  {
-                    label: "Radius Offset",
-                    key: "radiusHoverOffset ",
-                    control: Input,
-                  },
-                  {
-                    label: "Show Legend",
-                    key: "useLegend ",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Horizontal Legend",
-                    key: "horizontalLegend",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Legend Width",
-                    key: "legendWidth",
-                    control: Input,
-                  },
-                  {
-                    label: "Legend Height",
-                    key: "legendHeight",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Heatmap",
-              _component: "@budibase/standard-components/heatmap",
-              description: "Heatmap chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: [
-                  {
-                    day: 0,
-                    hour: 0,
-                    value: 7,
-                  },
-                  {
-                    day: 0,
-                    hour: 1,
-                    value: 10,
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Color",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "Show Legend",
-                    key: "useLegend ",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Boxsize",
-                    key: "boxSize",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Scatterplot",
-              _component: "@budibase/standard-components/scatterplot",
-              description: "Scatterplot chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: [
-                  {
-                    name: "topic",
-                    x: 123,
-                    y: 24,
-                  },
-                  {
-                    name: "topic1",
-                    x: 53,
-                    y: 31,
-                  },
-                  {
-                    name: "topic2",
-                    x: 631,
-                    y: 321,
-                  },
-                  {
-                    name: "topic1",
-                    x: 231,
-                    y: 111,
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      { label: "Normal", value: "britecharts" },
-                      { label: "Blue Green", value: "blueGreen" },
-                      { label: "Green", value: "green" },
-                      { label: "Grey", value: "grey" },
-                      { label: "Orange", value: "orange" },
-                      { label: "Pink", value: "pink" },
-                      { label: "Purple", value: "purple" },
-                      { label: "Red", value: "red" },
-                      { label: "Teal", value: "teal" },
-                      { label: "Yellow", value: "yellow" },
-                    ],
-                  },
-                  {
-                    label: "height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Aspect Ratio",
-                    key: "aspectRatio",
-                    control: Input,
-                  },
-                  {
-                    label: "Circle Opacity",
-                    key: "circleOpacity",
-                    control: Input,
-                  },
-                  {
-                    label: "Grid",
-                    key: "grid",
-                    control: OptionSelect,
-                    options: ["vertical", "horizontal", "full"],
-                  },
-                  {
-                    label: "Has Crosshairs",
-                    key: "hasCrossHairs",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Is Animated",
-                    key: "isAnimated",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Max Circle Area",
-                    key: "maxCircleArea",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label",
-                    key: "xAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label Offset",
-                    key: "xAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis",
-                    key: "xTicks",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Format",
-                    key: "yAxisFormat",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label",
-                    key: "yAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label Offset",
-                    key: "yAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Ticks",
-                    key: "yTicks",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "StackedArea",
-              _component: "@budibase/standard-components/stackedarea",
-              description: "StackedArea chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: [
-                  {
-                    date: "2011-01-05T00:00:00Z",
-                    name: "Direct",
-                    value: 0,
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Color",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Aspect Ratio",
-                    key: "aspectRatio",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Grid",
-                    key: "grid",
-                    control: OptionSelect,
-                    options: ["vertical", "horizontal", "full"],
-                  },
-                  {
-                    label: "X Axis Label",
-                    key: "xAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label Offset",
-                    key: "xAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis",
-                    key: "yAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label Offset",
-                    key: "yAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Area Curve",
-                    key: "areaCurve",
-                    control: Input,
-                  },
-                  {
-                    label: "Area Opacity",
-                    key: "areaOpacity",
-                    control: Input,
-                  },
-                  {
-                    label: "Area Opacity",
-                    key: "areaOpacity",
-                    control: Input,
-                  },
-                  {
-                    label: "dateLabel",
-                    key: "dateLabel",
-                    control: Input,
-                  },
-                  {
-                    key: "isAnimated",
-                    label: "Is Animated",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Key Label",
-                    key: "keyLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Locale",
-                    key: "locale",
-                    control: Input,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Use Legend",
-                    key: "useLegend",
-                    keyValue: "checked",
-                    control: Checkbox,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Step",
-              _component: "@budibase/standard-components/step",
-              description: "Step chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: [
-                  {
-                    value: 1,
-                    key: "glittering",
-                  },
-                  {
-                    value: 2,
-                    key: "luminous",
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label",
-                    key: "yAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label Offset",
-                    key: "yAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Ticks",
-                    key: "yTicks",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label Offset",
-                    key: "xAxisLabelOffset",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Sparkline",
-              _component: "@budibase/standard-components/sparkline",
-              description: "Sparkline chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: [
-                  {
-                    value: 1,
-                    date: "2011-01-06T00:00:00Z",
-                  },
-                  {
-                    value: 2,
-                    date: "2011-01-07T00:00:00Z",
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Line Gradient",
-                    key: "lineGradient",
-                    control: OptionSelect,
-                    options: [
-                      { value: "", label: "None" },
-                      { value: "bluePurple", label: "Blue Purple" },
-                      { value: "greenBlue", label: "Green Blue" },
-                      { value: "orangePink", label: "Orange Pink" },
-                    ],
-                  },
-                  {
-                    label: "Area Gradient",
-                    key: "areaGradient",
-                    control: OptionSelect,
-                    options: [
-                      { value: "", label: "None" },
-                      { value: "bluePurple", label: "Blue Purple" },
-                      { value: "greenBlue", label: "Green Blue" },
-                      { value: "orangePink", label: "Orange Pink" },
-                    ],
-                  },
-                  {
-                    key: "height",
-                    label: "Height",
-                    control: Input,
-                  },
-                  {
-                    key: "width",
-                    label: "Width",
-                    control: Input,
-                  },
-                  {
-                    key: "dateLabel",
-                    label: "Date Label",
-                    control: Input,
-                  },
-                  {
-                    key: "isAnimated",
-                    label: "Is Animated",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    key: "titleText",
-                    label: "Title Text",
-                    control: Input,
-                  },
-                  {
-                    key: "valueLabel",
-                    label: "Value Label",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Bar",
-              _component: "@budibase/standard-components/bar",
-              description: "Bar chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: [
-                  {
-                    value: 1,
-                    name: "glittering",
-                  },
-                  {
-                    value: 1,
-                    name: "luminous",
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Name Label",
-                    key: "nameLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label",
-                    key: "yAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label",
-                    key: "xAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label Offset",
-                    key: "xAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label Offset",
-                    key: "yAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Enable Labels",
-                    key: "enableLabels",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      { label: "Normal", value: "britecharts" },
-                      { label: "Blue Green", value: "blueGreen" },
-                      { label: "Green", value: "green" },
-                      { label: "Grey", value: "grey" },
-                      { label: "Orange", value: "orange" },
-                      { label: "Pink", value: "pink" },
-                      { label: "Purple", value: "purple" },
-                      { label: "Red", value: "red" },
-                      { label: "Teal", value: "teal" },
-                      { label: "Yellow", value: "yellow" },
-                    ],
-                  },
-                  {
-                    label: "Gradients",
-                    key: "gradient",
-                    control: OptionSelect,
-                    options: [
-                      { value: "", label: "None" },
-                      { value: "bluePurple", label: "Blue Purple" },
-                      { value: "greenBlue", label: "Green Blue" },
-                      { value: "orangePink", label: "Orange Pink" },
-                    ],
-                  },
-                  {
-                    label: "Highlight Single Bar",
-                    key: "hasSingleBarHighlight",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Animate",
-                    key: "isAnimate",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Horizontal",
-                    key: "isHorizontal",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Label Number Format",
-                    key: "labelsNumberFormat",
-                    control: Input,
-                  },
-                  {
-                    label: "Label Size",
-                    key: "labelSize",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Brush",
-              _component: "@budibase/standard-components/brush",
-              description: "Brush chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: [
-                  {
-                    value: 1,
-                    date: "2011-01-06T00:00:00Z",
-                  },
-                  {
-                    value: 2,
-                    date: "2011-01-07T00:00:00Z",
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Gradient",
-                    key: "gradient",
-                    control: OptionSelect,
-                    options: [
-                      { value: "", label: "None" },
-                      { value: "bluePurple", label: "Blue Purple" },
-                      { value: "greenBlue", label: "Green Blue" },
-                      { value: "orangePink", label: "Orange Pink" },
-                    ],
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Date Range",
-                    key: "dateRange",
-                    control: Input,
-                  },
-                  {
-                    label: "Locale",
-                    key: "locale",
-                    control: Input,
-                  },
-                  {
-                    label: "Time Interval",
-                    key: "roundingTimeInterval",
-                    control: OptionSelect,
-                    options: [
-                      "timeDay",
-                      "timeMillisecond",
-                      "utcMillisecond",
-                      "timeSecond",
-                      "utcSecond",
-                      "timeMinute",
-                      "utcMinute",
-                      "timeHour",
-                      "utcHour",
-                      "utcDay",
-                      "timeWeek",
-                      "utcWeek",
-                      "timeSunday",
-                      "utcSunday",
-                      "timeMonday",
-                      "utcMonday",
-                      "timeTuesday",
-                      "utcTuesday",
-                      "timeWednesday",
-                      "utcWednesday",
-                      "timeThursday",
-                      "utcThursday",
-                      "timeFriday",
-                      "utcFriday",
-                      "timeSaturday",
-                      "utcSaturday",
-                      "timeMonth",
-                      "utcMonth",
-                      "timeYear",
-                      "utcYear",
-                    ],
-                  },
-                  {
-                    label: "X Axis Format",
-                    key: "xAxisFormat",
-                    control: OptionSelect,
-                    options: [
-                      "day-month",
-                      "minute-hour",
-                      "hour-daymonth",
-                      "month-year",
-                      "custom",
-                    ],
-                  },
-                  {
-                    label: "X Ticks",
-                    key: "xTicks",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Groupedbar",
-              _component: "@budibase/standard-components/groupedbar",
-              description: "Groupedbar chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: [
-                  {
-                    name: "2011-01",
-                    group: "Direct",
-                    value: 0,
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Color",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Aspect Ratio",
-                    key: "aspectRatio",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Grid",
-                    key: "grid",
-                    control: OptionSelect,
-                    options: ["vertical", "horizontal", "full"],
-                  },
-                  {
-                    label: "Group Label",
-                    key: "groupLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Name Label",
-                    key: "nameLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Ticks",
-                    key: "yTicks",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Tick Text Offset",
-                    key: "yTickTextOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Is Animated",
-                    key: "isAnimated",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Is Horizontal",
-                    key: "isHorizontal",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Bullet",
-              _component: "@budibase/standard-components/bullet",
-              description: "Bullet chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: {
-                  ranges: [130, 160, 250],
-                  measures: [150, 180],
-                  markers: [175],
-                },
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Color",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "Title",
-                    key: "title",
-                    control: Input,
-                  },
-                  {
-                    label: "Subtitle",
-                    key: "subtitle",
-                    control: Input,
-                  },
-                  {
-                    label: "Axis Padding",
-                    key: "paddingBetweenAxisAndChart",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Stacked Bar",
-              _component: "@budibase/standard-components/stackedbar",
-              description: "Stacked Bar Chart",
-              icon: "ri-file-list-fill",
-              presetProps: {
-                data: [
-                  {
-                    name: "2011-01",
-                    stack: "Direct",
-                    value: 0,
-                  },
-                ],
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "Grid",
-                    key: "grid",
-                    control: OptionSelect,
-                    options: ["vertical", "horizontal", "full"],
-                  },
-                  {
-                    label: "Aspect Ratio",
-                    key: "aspectRatio",
-                    control: Input,
-                  },
-                  {
-                    label: "Between Bars Padding",
-                    key: "betweenBarsPadding",
-                    control: Input,
-                  },
-                  {
-                    label: "Max Ratio Percentage",
-                    key: "percentageToMaxRatio",
-                    control: Input,
-                  },
-                  {
-                    label: "Date Label",
-                    key: "dateLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Name Label",
-                    key: "nameLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Stack Label",
-                    key: "stackLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Locale",
-                    key: "locale",
-                    control: Input,
-                  },
-                  {
-                    label: "Is Animated",
-                    key: "isAnimated",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Is Horizontal",
-                    key: "isHorizontal",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Has Reversed Stacks",
-                    key: "hasReversedStacks",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Has Percentage",
-                    key: "hasPercentage",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "X Ticks",
-                    key: "xTicks",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Ticks",
-                    key: "yTicks",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label",
-                    key: "yTicksLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label Offset",
-                    key: "yAxisLabelOffset",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-            {
-              name: "Line",
-              _component: "@budibase/standard-components/line",
-              description: "Line chart",
-              icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: {
-                  data: [
-                    {
-                      topicName: "San Francisco",
-                      name: 1,
-                      date: "2020-01-16",
-                      value: 1,
-                    },
-                    {
-                      topicName: "San Fran",
-                      name: 2,
-                      date: "2020-01-17",
-                      value: 2,
-                    },
-                    {
-                      topicName: "LA",
-                      name: 3,
-                      date: "2020-01-18",
-                      value: 3,
-                    },
-                    {
-                      topicName: "Toronto",
-                      name: 4,
-                      date: "2020-01-19",
-                      value: 7,
-                    },
-                    {
-                      topicName: "Van",
-                      name: 4,
-                      date: "2020-01-20",
-                      value: 12,
-                    },
-                    {
-                      topicName: "Dundee",
-                      name: 4,
-                      date: "2020-01-21",
-                      value: 16,
-                    },
-                    {
-                      topicName: "Dublin",
-                      name: 4,
-                      date: "2020-01-22",
-                      value: 31,
-                    },
-                  ],
-                },
-                aspectRatio: 0.5,
-                grid: "horizontal",
-                dateLabel: "fullDate",
-                shouldShowAllDataPoints: true,
-              },
-              properties: {
-                settings: [
-                  {
-                    label: "Table",
-                    key: "model",
-                    control: ModelSelect,
-                  },
-                  {
-                    label: "X Axis Combo",
-                    key: "axisTimeCombinations",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Combo",
-                    key: "axisTimeCombinations",
-                    control: Input,
-                  },
-                  {
-                    label: "Colors",
-                    key: "color",
-                    control: OptionSelect,
-                    options: [
-                      "britecharts",
-                      "blueGreen",
-                      "green",
-                      "grey",
-                      "orange",
-                      "pink",
-                      "purple",
-                      "red",
-                      "teal",
-                      "yellow",
-                    ],
-                  },
-                  {
-                    label: "X Axis Value Type",
-                    key: "xAxisValueType",
-                    control: OptionSelect,
-                    options: ["date", "number"],
-                  },
-                  {
-                    label: "Grid",
-                    key: "grid",
-                    control: OptionSelect,
-                    options: ["vertical", "horizontal", "full"],
-                  },
-                  {
-                    label: "Aspect Ratio",
-                    key: "aspectRatio",
-                    control: Input,
-                  },
-                  {
-                    label: "Date Label",
-                    key: "dateLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Width",
-                    key: "width",
-                    control: Input,
-                  },
-                  {
-                    label: "Height",
-                    key: "height",
-                    control: Input,
-                  },
-                  {
-                    label: "Is Animated",
-                    key: "isAnimated",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
-                  {
-                    label: "Line Curve",
-                    key: "lineCurve",
-                    control: OptionSelect,
-                    options: [
-                      "linear",
-                      "basis",
-                      "natural",
-                      "monotoneX",
-                      "monotoneY",
-                      "step",
-                      "stepAfter",
-                      "stepBefore",
-                      "cardinal",
-                      "catmullRom",
-                    ],
-                  },
-                  {
-                    label: "Locale",
-                    key: "locale",
-                    control: Input,
-                  },
-                  {
-                    label: "Topic Label",
-                    key: "topicLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label",
-                    key: "xAxisLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Value Type",
-                    key: "xAxisValueType",
-                    control: OptionSelect,
-                    options: ["date", "number"],
-                  },
-                  {
-                    label: "X Axis Scale",
-                    key: "xAxisScale",
-                    control: OptionSelect,
-                    options: ["linear", "logarithmic"],
-                  },
-                  {
-                    label: "X Axis Format",
-                    key: "xAxisFormat",
-                    control: OptionSelect,
-                    options: [
-                      "day-month",
-                      "minute-hour",
-                      "hour-daymonth",
-                      "month-year",
-                      "custom",
-                    ],
-                  },
-                  {
-                    label: "X Axis Custom Format",
-                    key: "xAxisCustomFormat",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Label",
-                    key: "xAxisLabel",
-                    control: Input,
-                  },
-                ],
-              },
-            },
-          ],
-        },
         {
           name: "Data List",
           _component: "@budibase/standard-components/datalist",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index c7a668cc62..c3a3e646fa 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -293,7 +293,6 @@
 			"radiusHoverOffset": "number",
 			"percentageFormat": "string",
 			"useLegend": "bool",
-			"horizontalLegend": "bool",
 			"legendWidth": "number",
 			"legendHeight": "number"
 		}
diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte
index 470673e9b6..f97e9c0825 100644
--- a/packages/standard-components/src/Chart/Donut.svelte
+++ b/packages/standard-components/src/Chart/Donut.svelte
@@ -30,7 +30,7 @@
 
   export let orderingFunction = null
 
-  export let data = model ? $store[model] : []
+  let data = []
   export let color = "britecharts"
   export let height = 200
   export let width = 200
@@ -47,7 +47,7 @@
   export let internalRadius = 25
   export let isAnimated = true
   export let radiusHoverOffset = 0
-  export let useLegend = true
+  // export let useLegend = true
   export let horizontalLegend = false
   export let legendWidth = null
   export let legendHeight = null
@@ -70,16 +70,17 @@
     if (chart) {
       if (model) {
         await fetchData()
+        data = model ? $store[model] : []
       }
 
       chart.emptyDataConfig({
         showEmptySlice: true,
-        emptySliceColor: "#000000",
+        emptySliceColor: "#F0F0F0",
       })
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       bindChartEvents()
-      chartContainer.datum(_data).call(chart)
+      chartContainer.datum(data).call(chart)
     }
   })
 
@@ -134,7 +135,7 @@
     if (notNull(orderingFunction)) {
       chart.orderingFunction(orderingFunction)
     }
-    chartContainer.datum(_data).call(chart)
+    chartContainer.datum(data).call(chart)
     chartSvg = document.querySelector(`.${chartClass} .britechart`)
   }
 
@@ -159,25 +160,24 @@
   $: if (!width && chartSvg) {
     width = chartSvg.clientWidth
     chart.width(width)
-    chartContainer.datum(_data).call(chart)
+    debugger
+    chartContainer.datum(data).call(chart)
   }
 
-  $: _data = model ? $store[model] : data
+  // $: _data = model ? $store[model] : data
 
   $: colorSchema = getColorSchema(color)
 </script>
 
 <div>
   <div bind:this={chartElement} class={chartClass} />
-  {#if useLegend}
-    <Legend
-      bind:legend={legendChart}
-      {colorSchema}
-      useLegend
-      isHorizontal={horizontalLegend}
-      width={legendWidth || width}
-      height={legendHeight}
-      {chartClass}
-      data={_data} />
-  {/if}
+  <Legend
+    bind:legend={legendChart}
+    {colorSchema}
+    useLegend
+    isHorizontal={horizontalLegend}
+    width={legendWidth || width}
+    height={legendHeight}
+    {chartClass}
+    {data} />
 </div>

From 4dbd6359852a3afb43b6aab88320d064b8420d4c Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Fri, 7 Aug 2020 14:28:55 +0100
Subject: [PATCH 23/25] Fix for name and value fields donut

---
 .../userInterface/temporaryPanelStructure.js  | 10 +++
 packages/standard-components/components.json  |  2 +
 .../src/Chart/Donut.svelte                    | 61 +++++++++++++++----
 3 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index b844271b49..dc8ea3dd95 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -476,6 +476,16 @@ export default {
                   "yellow",
                 ],
               },
+              {
+                label: "Name Field",
+                key: "nameKey",
+                control: Input,
+              },
+              {
+                label: "Value Field",
+                key: "valueKey",
+                control: Input,
+              },
               {
                 label: "External Radius",
                 key: "externalRadius",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index c3a3e646fa..6836f4981c 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -287,6 +287,8 @@
 			"hasLastHoverSliceHighlighted": "bool",
 			"hasHoverAnimation": "bool",
 			"numberFormat": "string",
+			"nameKey": "string",
+			"valueKey": "string",
 			"isAnimated": "bool",
 			"externalRadius": "number",
 			"internalRadius": "number",
diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte
index f97e9c0825..b1031a214f 100644
--- a/packages/standard-components/src/Chart/Donut.svelte
+++ b/packages/standard-components/src/Chart/Donut.svelte
@@ -36,6 +36,8 @@
   export let width = 200
   export let margin = null
 
+  $: console.log("DATA", data)
+
   export let centeredTextFunction = null
   export let externalRadius = 25
   export let percentageFormat = null
@@ -47,6 +49,8 @@
   export let internalRadius = 25
   export let isAnimated = true
   export let radiusHoverOffset = 0
+  export let nameKey = null
+  export let valueKey = null
   // export let useLegend = true
   export let horizontalLegend = false
   export let legendWidth = null
@@ -70,13 +74,14 @@
     if (chart) {
       if (model) {
         await fetchData()
-        data = model ? $store[model] : []
+        data = checkAndReformatData($store[model])
       }
 
       chart.emptyDataConfig({
         showEmptySlice: true,
         emptySliceColor: "#F0F0F0",
       })
+
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       bindChartEvents()
@@ -84,6 +89,37 @@
     }
   })
 
+  function checkAndReformatData(data) {
+    let _data = [...data]
+
+    if (valueKey) {
+      _data = reformatDataKey(_data, valueKey, "quantity")
+    }
+
+    if (nameKey) {
+      _data = reformatDataKey(_data, nameKey, "name")
+    }
+
+    return _data.every(d => d.quantity) && _data.every(d => d.name) ? _data : []
+  }
+
+  function reformatDataKey(data = [], dataKey = null, formatKey = null) {
+    let ignoreList = ["_id", "_rev", "id"]
+    if (dataKey && data.every(d => d[dataKey])) {
+      return data.map(d => {
+        let obj = { ...d }
+        let value = obj[dataKey]
+        if (!ignoreList.includes(dataKey)) {
+          delete obj[dataKey]
+        }
+        obj[formatKey] = value
+        return obj
+      })
+    } else {
+      return data
+    }
+  }
+
   function bindChartUIProps() {
     chart.percentageFormat(".0f")
 
@@ -160,24 +196,23 @@
   $: if (!width && chartSvg) {
     width = chartSvg.clientWidth
     chart.width(width)
-    debugger
     chartContainer.datum(data).call(chart)
   }
 
-  // $: _data = model ? $store[model] : data
-
   $: colorSchema = getColorSchema(color)
 </script>
 
 <div>
   <div bind:this={chartElement} class={chartClass} />
-  <Legend
-    bind:legend={legendChart}
-    {colorSchema}
-    useLegend
-    isHorizontal={horizontalLegend}
-    width={legendWidth || width}
-    height={legendHeight}
-    {chartClass}
-    {data} />
+  {#if data.length > 0}
+    <Legend
+      bind:legend={legendChart}
+      {colorSchema}
+      useLegend
+      isHorizontal={horizontalLegend}
+      width={legendWidth || width}
+      height={legendHeight}
+      {chartClass}
+      {data} />
+  {/if}
 </div>

From 5bd39c81cc57392eda478be5dd156a77231daac5 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Fri, 7 Aug 2020 14:46:00 +0100
Subject: [PATCH 24/25] Tidyup

---
 .../src/Chart/Donut.svelte                    | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte
index b1031a214f..08cdba7d2e 100644
--- a/packages/standard-components/src/Chart/Donut.svelte
+++ b/packages/standard-components/src/Chart/Donut.svelte
@@ -36,8 +36,6 @@
   export let width = 200
   export let margin = null
 
-  $: console.log("DATA", data)
-
   export let centeredTextFunction = null
   export let externalRadius = 25
   export let percentageFormat = null
@@ -75,6 +73,11 @@
       if (model) {
         await fetchData()
         data = checkAndReformatData($store[model])
+        if (data.length === 0) {
+          console.error(
+            "Donut - please provide a valid name and value field for the chart"
+          )
+        }
       }
 
       chart.emptyDataConfig({
@@ -107,13 +110,16 @@
     let ignoreList = ["_id", "_rev", "id"]
     if (dataKey && data.every(d => d[dataKey])) {
       return data.map(d => {
-        let obj = { ...d }
-        let value = obj[dataKey]
-        if (!ignoreList.includes(dataKey)) {
-          delete obj[dataKey]
+        let clonedRecord = { ...d }
+        if (clonedRecord[formatKey]) {
+          delete clonedRecord[formatKey]
         }
-        obj[formatKey] = value
-        return obj
+        let value = clonedRecord[dataKey]
+        if (!ignoreList.includes(dataKey)) {
+          delete clonedRecord[dataKey]
+        }
+        clonedRecord[formatKey] = value
+        return clonedRecord
       })
     } else {
       return data

From afddecbb977272c88cfd8bbd0cedf01310a99bec Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Fri, 7 Aug 2020 14:49:53 +0100
Subject: [PATCH 25/25] Linting

---
 packages/standard-components/src/Chart/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/standard-components/src/Chart/index.js b/packages/standard-components/src/Chart/index.js
index 9f4427600d..39efc5d8ea 100644
--- a/packages/standard-components/src/Chart/index.js
+++ b/packages/standard-components/src/Chart/index.js
@@ -10,4 +10,3 @@ export { default as scatterplot } from "./ScatterPlot.svelte"
 export { default as step } from "./Step.svelte"
 export { default as stackedarea } from "./StackedArea.svelte"
 export { default as stackedbar } from "./StackedBar.svelte"
-