working charts

packages/web/src/charts/ChartEditor.svelte

@@ -85,6 +85,7 @@
     }
   }
   $: {
+    $extensions;
     if (config.labelColumn && sql && conid && database) {
       handleLoadData();
     }

packages/web/src/charts/DataChart.svelte

@@ -49,7 +49,7 @@
   }
 
   function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartType, dataColumnColors) {
-    if (!freeData || !labelColumn || !dataColumns || !freeData.rows || dataColumns.length == 0) return [{}, {}];
+    if (!freeData || !labelColumn || !dataColumns || !freeData.rows || dataColumns.length == 0) return null;
     const colors = randomcolor({
       count: _.max([freeData.rows.length, dataColumns.length, 1]),
       seed: colorSeed,
@@ -106,8 +106,8 @@
   let clientWidth;
   let clientHeight;
 
-  $: dataColumns = extractDataColumns(values);
+  $: dataColumns = extractDataColumns($values);
-  $: dataColumnColors = extractDataColumnColors(values, dataColumns);
+  $: dataColumnColors = extractDataColumnColors($values, dataColumns);
 
   $: chartData = createChartData(
     data,
@@ -120,6 +120,8 @@
 </script>
 
 <div class="wrapper" bind:clientWidth bind:clientHeight>
+  {#if chartData}
+    {#key `${$values.chartType}|${clientWidth}|${clientHeight}`}
       <ChartCore
         width={clientWidth}
         height={clientHeight}
@@ -127,6 +129,8 @@
         type={$values.chartType}
         options={chartData[1]}
       />
+    {/key}
+  {/if}
 </div>
 
 <style>