Fix warning when no data source and increase robustness of charts

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

@@ -833,7 +833,7 @@ export default {
           name: "Candlestick Chart",
           _component: "@budibase/standard-components/candlestick",
           description: "Candlestick chart",
-          icon: "ri-bar-chart-line",
+          icon: "ri-stock-line",
           properties: {
             settings: [
               {

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

@@ -3,6 +3,14 @@
   import fetchData, { fetchSchema } from "../fetchData"
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
+  import { isEmpty } from "lodash/fp"
+  import {
+    closeColumn,
+    dateColumn,
+    highColumn,
+    lowColumn,
+    openColumn,
+  } from "./CandleStickChart.svelte"
 
   export let _bb
   export let title
@@ -25,7 +33,8 @@
 
   // Fetch data on mount
   onMount(async () => {
-    if (!datasource || !labelColumn || !valueColumns || !valueColumns.length) {
+    const allCols = [labelColumn, ...(valueColumns || [])]
+    if (isEmpty(datasource) || allCols.find(x => x == null)) {
       options = false
       return
     }
@@ -34,9 +43,9 @@
     const schema = await fetchSchema(datasource.tableId)
     const result = await fetchData(datasource, $store)
     const reducer = row => (valid, column) => valid && row[column] != null
-    const hasAllValues = row => valueColumns.reduce(reducer(row), true)
+    const hasAllColumns = row => allCols.reduce(reducer(row), true)
     const data = result
-      .filter(row => row[labelColumn] != null && hasAllValues(row))
+      .filter(row => hasAllColumns(row))
       .slice(0, 20)
       .sort((a, b) => (a[labelColumn] > b[labelColumn] ? 1 : -1))
     if (!schema || !data.length) {

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

@@ -3,6 +3,7 @@
   import fetchData, { fetchSchema } from "../fetchData"
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
+  import { isEmpty } from "lodash/fp"
 
   export let _bb
   export let title
@@ -25,7 +26,7 @@
   // Fetch data on mount
   onMount(async () => {
     const allCols = [dateColumn, openColumn, highColumn, lowColumn, closeColumn]
-    if (!datasource || allCols.find(x => x == null)) {
+    if (isEmpty(datasource) || allCols.find(x => x == null)) {
       options = false
       return
     }

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

@@ -3,6 +3,7 @@
   import fetchData, { fetchSchema } from "../fetchData"
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
+  import { isEmpty } from "lodash/fp"
 
   // Common props
   export let _bb
@@ -31,7 +32,8 @@
 
   // Fetch data on mount
   onMount(async () => {
-    if (!datasource || !labelColumn || !valueColumns || !valueColumns.length) {
+    const allCols = [labelColumn, ...(valueColumns || [])]
+    if (isEmpty(datasource) || allCols.find(x => x == null)) {
       options = false
       return
     }
@@ -40,9 +42,9 @@
     const schema = await fetchSchema(datasource.tableId)
     const result = await fetchData(datasource, $store)
     const reducer = row => (valid, column) => valid && row[column] != null
-    const hasAllValues = row => valueColumns.reduce(reducer(row), true)
+    const hasAllColumns = row => allCols.reduce(reducer(row), true)
     const data = result
-      .filter(row => row[labelColumn] != null && hasAllValues(row))
+      .filter(row => hasAllColumns(row))
       .slice(0, 100)
       .sort((a, b) => (a[labelColumn] > b[labelColumn] ? 1 : -1))
     if (!schema || !data.length) {

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

@@ -3,6 +3,7 @@
   import fetchData, { fetchSchema } from "../fetchData"
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
+  import { isEmpty } from "lodash/fp"
 
   export let _bb
   export let title
@@ -22,7 +23,7 @@
 
   // Fetch data on mount
   onMount(async () => {
-    if (!datasource || !labelColumn || !valueColumn) {
+    if (isEmpty(datasource) || !labelColumn || !valueColumn) {
       options = false
       return
     }

packages/standard-components/src/fetchData.js

@@ -14,7 +14,7 @@ export default async function fetchData(datasource, store) {
     }
 
     // Fetch table schema so we can check for linked rows
-    if (rows && rows.length) {
+    if (rows && rows.length && datasource.tableId) {
       const schema = await fetchSchema(datasource.tableId)
       const keys = Object.keys(schema)
       rows.forEach(row => {