Latest Donut and Legend Updates

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;

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -498,13 +498,7 @@ export default {
                     control: ModelSelect,
                   },
                   {
-                    label: "Fix Highlight Slice",
+                    label: "Keep Last Hover",
-                    key: "hasFixedHighlightedSlice",
-                    valueKey: "checked",
-                    control: Checkbox,
-                  },
-                  {
-                    label: "Hover highlight",
                     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,
+                  },
                 ],
               },
             },

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": {

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} />
+<div>
-<Legend
+  <div bind:this={chartElement} class={chartClass} />
-  bind:legend={legendChart}
+  {#if useLegend}
-  {colorSchema}
+    <Legend
-  useLegend
+      bind:legend={legendChart}
-  {chartClass}
+      {colorSchema}
-  {width}
+      useLegend
-  data={_data} />
+      isHorizontal={horizontalLegend}
+      width={legendWidth || width}
+      height={legendHeight}
+      {chartClass}
+      data={_data} />
+  {/if}
+</div>

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>