Separate Legend into its own component

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}
+<Legend useLegend {chartClass} {width} data={_data} />
-  <div class={legendClass} />
-{/if}

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}