Chart legend and UI Updates

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;

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",

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) {
+      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} />

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