From 5a1624c29d5ecbd4070df098ddcfb587349cf55e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 4 Nov 2020 15:56:57 +0000 Subject: [PATCH] Fix warning when no data source and increase robustness of charts --- .../userInterface/temporaryPanelStructure.js | 2 +- .../standard-components/src/Chart/BarChart.svelte | 15 ++++++++++++--- .../src/Chart/CandleStickChart.svelte | 3 ++- .../src/Chart/LineChart.svelte | 8 +++++--- .../standard-components/src/Chart/PieChart.svelte | 3 ++- packages/standard-components/src/fetchData.js | 2 +- 6 files changed, 23 insertions(+), 10 deletions(-) diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 8bb7e01edf..1239027f9d 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/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: [ { diff --git a/packages/standard-components/src/Chart/BarChart.svelte b/packages/standard-components/src/Chart/BarChart.svelte index f73b74a1e7..0946204e9d 100644 --- a/packages/standard-components/src/Chart/BarChart.svelte +++ b/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) { diff --git a/packages/standard-components/src/Chart/CandleStickChart.svelte b/packages/standard-components/src/Chart/CandleStickChart.svelte index 1f849b2fd5..7854b495f8 100644 --- a/packages/standard-components/src/Chart/CandleStickChart.svelte +++ b/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 } diff --git a/packages/standard-components/src/Chart/LineChart.svelte b/packages/standard-components/src/Chart/LineChart.svelte index 2697465877..db14b5c337 100644 --- a/packages/standard-components/src/Chart/LineChart.svelte +++ b/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) { diff --git a/packages/standard-components/src/Chart/PieChart.svelte b/packages/standard-components/src/Chart/PieChart.svelte index 96f659bf7d..9fec69b1bd 100644 --- a/packages/standard-components/src/Chart/PieChart.svelte +++ b/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 } diff --git a/packages/standard-components/src/fetchData.js b/packages/standard-components/src/fetchData.js index cd3e00e9e3..ef1950c5f7 100644 --- a/packages/standard-components/src/fetchData.js +++ b/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 => {