From 5d4193bfd3bdc719c8d672568292919d2b78ec87 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Wed, 5 Aug 2020 14:19:56 +0100
Subject: [PATCH] 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