Improve robustness of pie and donut charts

packages/standard-components/src/Chart/BarChart.svelte

@@ -5,6 +5,7 @@
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
 
+  export let _bb
   export let title
   export let datasource
   export let labelColumn
@@ -20,6 +21,7 @@
   export let stacked
   export let yAxisUnits
 
+  const store = _bb.store
   let options
 
   // Fetch data on mount
@@ -28,7 +30,7 @@
       return
     }
 
-    const result = (await fetchData(datasource)).slice(0, 20)
+    const result = (await fetchData(datasource, $store)).slice(0, 20)
     const data = sortBy(row => row[labelColumn])(result)
     const schema = await fetchSchema(datasource.tableId)
     if (!schema || !data || !data.length) {
@@ -86,8 +88,6 @@
     // Build chart options
     options = builder.getOptions()
   })
-
-  $: console.log(options)
 </script>
 
 <ApexChart {options} />

packages/standard-components/src/Chart/LineChart.svelte

@@ -6,6 +6,7 @@
   import ApexChart from "./ApexChart.svelte"
 
   // Common props
+  export let _bb
   export let title
   export let datasource
   export let labelColumn
@@ -26,6 +27,7 @@
   export let stacked
   export let gradient
 
+  const store = _bb.store
   let options
 
   // Fetch data on mount
@@ -34,7 +36,7 @@
       return
     }
 
-    const result = (await fetchData(datasource)).slice(0, 100)
+    const result = (await fetchData(datasource, $store)).slice(0, 100)
     const data = sortBy(row => row[labelColumn])(result)
     const schema = await fetchSchema(datasource.tableId)
     if (!schema || !data || !data.length) {

packages/standard-components/src/Chart/PieChart.svelte

@@ -1,11 +1,11 @@
 <script>
   import { onMount } from "svelte"
-  import { chart } from "svelte-apexcharts"
-  import fetchData from "../fetchData"
-  import { isEmpty, sortBy } from "lodash/fp"
+  import fetchData, { fetchSchema } from "../fetchData"
+  import { sortBy } from "lodash/fp"
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
 
+  export let _bb
   export let title
   export let datasource
   export let labelColumn
@@ -18,18 +18,32 @@
   export let legend
   export let donut
 
-  let data
-  $: options = getChartOptions(data)
+  const store = _bb.store
+  let options
 
   // Fetch data on mount
   onMount(async () => {
-    if (!isEmpty(datasource)) {
-      const result = (await fetchData(datasource)).slice(0, 20)
-      data = sortBy(row => row[labelColumn])(result)
+    if (!datasource || !labelColumn || !valueColumn) {
+      return
+    }
+
+    const result = (await fetchData(datasource, $store)).slice(0, 20)
+    const data = sortBy(row => row[labelColumn])(result)
+    const schema = await fetchSchema(datasource.tableId)
+    if (!schema || !data || !data.length) {
+      return
+    }
+
+    // Check columns are valid
+    if (datasource.type !== "view") {
+      if (schema[labelColumn] == null) {
+        return
+      }
+      if (schema[valueColumn] == null) {
+        return
+      }
     }
-  })
 
-  function getChartOptions(rows = []) {
     // Initialise default chart
     let builder = new ApexOptionsBuilder()
       .title(title)
@@ -42,19 +56,15 @@
       .legendPosition("right")
 
     // Add data if valid datasource
-    if (rows && rows.length) {
-      if (!isEmpty(valueColumn) && rows[0][valueColumn] != null) {
-        const series = rows.map(row => parseFloat(row[valueColumn]))
+    const series = data.map(row => parseFloat(row[valueColumn]))
     builder = builder.series(series)
-      }
-      if (!isEmpty(rows[0][labelColumn])) {
-        builder = builder.labels(rows.map(row => row[labelColumn]))
-      }
+    if (data[0][labelColumn] != null) {
+      builder = builder.labels(data.map(row => row[labelColumn]))
     }
 
     // Build chart options
-    return builder.getOptions()
-  }
+    options = builder.getOptions()
+  })
 </script>
 
 <ApexChart {options} />