Improve chart robustness even more

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

@@ -1,7 +1,6 @@
 <script>
   import { onMount } from "svelte"
   import fetchData, { fetchSchema } from "../fetchData"
-  import { sortBy } from "lodash/fp"
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
 
@@ -30,25 +29,19 @@
       return
     }
 
-    const result = (await fetchData(datasource, $store)).slice(0, 20)
+    // Fetch, filter and sort data
-    const data = sortBy(row => row[labelColumn])(result)
     const schema = await fetchSchema(datasource.tableId)
-    if (!schema || !data || !data.length) {
+    const result = await fetchData(datasource, $store)
+    const reducer = row => (valid, column) => valid && row[column] != null
+    const hasAllValues = row => valueColumns.reduce(reducer(row), true)
+    const data = result
+      .filter(row => row[labelColumn] != null && hasAllValues(row))
+      .slice(0, 20)
+      .sort((a, b) => (a[labelColumn] > b[labelColumn] ? 1 : -1))
+    if (!schema || !data.length) {
       return
     }
 
-    // Check columns are valid
-    if (datasource.type !== "view") {
-      if (schema[labelColumn] == null) {
-        return
-      }
-      for (let i = 0; i < valueColumns.length; i++) {
-        if (schema[valueColumns[i]] == null) {
-          return
-        }
-      }
-    }
-
     // Initialise default chart
     let builder = new ApexOptionsBuilder()
       .type("bar")
@@ -81,7 +74,7 @@
       }),
     }))
     builder = builder.series(series)
-    if (!useDates && data[0][labelColumn] != null) {
+    if (!useDates) {
       builder = builder.categories(data.map(row => row[labelColumn]))
     }
 

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

@@ -1,7 +1,6 @@
 <script>
   import { onMount } from "svelte"
   import fetchData, { fetchSchema } from "../fetchData"
-  import { sortBy } from "lodash/fp"
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
 
@@ -36,25 +35,19 @@
       return
     }
 
-    const result = (await fetchData(datasource, $store)).slice(0, 100)
+    // Fetch, filter and sort data
-    const data = sortBy(row => row[labelColumn])(result)
     const schema = await fetchSchema(datasource.tableId)
-    if (!schema || !data || !data.length) {
+    const result = await fetchData(datasource, $store)
+    const reducer = row => (valid, column) => valid && row[column] != null
+    const hasAllValues = row => valueColumns.reduce(reducer(row), true)
+    const data = result
+      .filter(row => row[labelColumn] != null && hasAllValues(row))
+      .slice(0, 100)
+      .sort((a, b) => (a[labelColumn] > b[labelColumn] ? 1 : -1))
+    if (!schema || !data.length) {
       return
     }
 
-    // Check columns are valid
-    if (datasource.type !== "view") {
-      if (schema[labelColumn] == null) {
-        return
-      }
-      for (let i = 0; i < valueColumns.length; i++) {
-        if (schema[valueColumns[i]] == null) {
-          return
-        }
-      }
-    }
-
     // Initialise default chart
     let builder = new ApexOptionsBuilder()
       .title(title)
@@ -89,7 +82,7 @@
       }),
     }))
     builder = builder.series(series)
-    if (!useDates && schema[labelColumn]) {
+    if (!useDates) {
       builder = builder.categories(data.map(row => row[labelColumn]))
     }
 

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

@@ -1,7 +1,6 @@
 <script>
   import { onMount } from "svelte"
   import fetchData, { fetchSchema } from "../fetchData"
-  import { sortBy } from "lodash/fp"
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
 
@@ -27,23 +26,17 @@
       return
     }
 
-    const result = (await fetchData(datasource, $store)).slice(0, 20)
+    // Fetch, filter and sort data
-    const data = sortBy(row => row[labelColumn])(result)
     const schema = await fetchSchema(datasource.tableId)
-    if (!schema || !data || !data.length) {
+    const result = await fetchData(datasource, $store)
+    const data = result
+      .filter(row => row[labelColumn] != null && row[valueColumn] != null)
+      .slice(0, 20)
+      .sort((a, b) => (a[labelColumn] > b[labelColumn] ? 1 : -1))
+    if (!schema || !data.length) {
       return
     }
 
-    // Check columns are valid
-    if (datasource.type !== "view") {
-      if (schema[labelColumn] == null) {
-        return
-      }
-      if (schema[valueColumn] == null) {
-        return
-      }
-    }
-
     // Initialise default chart
     let builder = new ApexOptionsBuilder()
       .title(title)
@@ -57,10 +50,8 @@
 
     // Add data if valid datasource
     const series = data.map(row => parseFloat(row[valueColumn]))
-    builder = builder.series(series)
+    const labels = data.map(row => row[labelColumn])
-    if (data[0][labelColumn] != null) {
+    builder = builder.series(series).labels(labels)
-      builder = builder.labels(data.map(row => row[labelColumn]))
-    }
 
     // Build chart options
     options = builder.getOptions()