From 951491006b67038e20890a08daa09b05c46f7a5d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 18 Mar 2021 18:45:11 +0000
Subject: [PATCH] Update all charts to work with new data provider

---
 packages/standard-components/manifest.json    | 15 ++++++---
 .../src/charts/ApexChart.svelte               |  4 +--
 .../src/charts/BarChart.svelte                | 30 ++++++-----------
 .../src/charts/CandleStickChart.svelte        | 32 +++++++------------
 .../src/charts/LineChart.svelte               | 32 +++++++------------
 .../src/charts/PieChart.svelte                | 30 +++++++----------
 6 files changed, 54 insertions(+), 89 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 02b31d5b1a..50812fc1dd 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1081,19 +1081,19 @@
         "type": "field",
         "label": "Close Col.",
         "key": "closeColumn",
-        "dependsOn": "datasource"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "field",
         "label": "High Col.",
         "key": "highColumn",
-        "dependsOn": "datasource"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "field",
         "label": "Low Col.",
         "key": "lowColumn",
-        "dependsOn": "datasource"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "select",
@@ -1137,7 +1137,9 @@
     "styleable": true,
     "hasChildren": true,
     "dataProvider": true,
-    "actions": ["ValidateForm"],
+    "actions": [
+      "ValidateForm"
+    ],
     "settings": [
       {
         "type": "schema",
@@ -1190,7 +1192,10 @@
         "key": "disabled",
         "defaultValue": false
       }
-    ]
+    ],
+    "dataContext": {
+      "type": "form"
+    }
   },
   "fieldgroup": {
     "name": "Field Group",
diff --git a/packages/standard-components/src/charts/ApexChart.svelte b/packages/standard-components/src/charts/ApexChart.svelte
index 0c2e1b0e41..cf9cade436 100644
--- a/packages/standard-components/src/charts/ApexChart.svelte
+++ b/packages/standard-components/src/charts/ApexChart.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { chart } from "svelte-apexcharts"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let options
@@ -10,7 +10,7 @@
 
 {#if options}
   <div use:chart={options} use:styleable={$component.styles} />
-{:else if options === false}
+{:else if builderStore.inBuilder}
   <div use:styleable={$component.styles}>
     Use the settings panel to build your chart -->
   </div>
diff --git a/packages/standard-components/src/charts/BarChart.svelte b/packages/standard-components/src/charts/BarChart.svelte
index 4bebdf1407..a2259aa754 100644
--- a/packages/standard-components/src/charts/BarChart.svelte
+++ b/packages/standard-components/src/charts/BarChart.svelte
@@ -1,10 +1,6 @@
 <script>
-  import { getContext, onMount } from "svelte"
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
-  import { isEmpty } from "lodash/fp"
-
-  const { API } = getContext("sdk")
 
   export let title
   export let dataProvider
@@ -22,28 +18,21 @@
   export let yAxisUnits
   export let palette
 
-  let options
+  $: options = setUpChart(dataProvider)
 
-  $: setUpChart()
-
-  const setUpChart = () => {
+  const setUpChart = provider => {
     const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (!dataProvider || allCols.find(x => x == null)) {
-      options = false
-      return
+    if (!provider || allCols.find(x => x == null)) {
+      return null
     }
 
-    // Fetch, filter and sort data
-    const { schema, rows } = dataProvider
+    // Fatch data
+    const { schema, rows } = provider
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = rows
-      .filter(row => hasAllColumns(row))
-      .slice(0, 20)
-      .sort((a, b) => (a[labelColumn] > b[labelColumn] ? 1 : -1))
+    const data = rows.filter(row => hasAllColumns(row)).slice(0, 100)
     if (!schema || !data.length) {
-      options = false
-      return
+      return null
     }
 
     // Initialise default chart
@@ -63,7 +52,6 @@
 
     // Add data
     let useDates = false
-    // datasource.type !== "view" &&
     if (schema[labelColumn]) {
       const labelFieldType = schema[labelColumn].type
       builder = builder.xType(labelFieldType)
@@ -85,7 +73,7 @@
     }
 
     // Build chart options
-    options = builder.getOptions()
+    return builder.getOptions()
   }
 </script>
 
diff --git a/packages/standard-components/src/charts/CandleStickChart.svelte b/packages/standard-components/src/charts/CandleStickChart.svelte
index c5ca0ebd49..9435b27cfd 100644
--- a/packages/standard-components/src/charts/CandleStickChart.svelte
+++ b/packages/standard-components/src/charts/CandleStickChart.svelte
@@ -1,13 +1,9 @@
 <script>
-  import { getContext, onMount } from "svelte"
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
-  import { isEmpty } from "lodash/fp"
-
-  const { API } = getContext("sdk")
 
   export let title
-  export let datasource
+  export let dataProvider
   export let dateColumn
   export let openColumn
   export let highColumn
@@ -20,28 +16,22 @@
   export let animate
   export let yAxisUnits
 
-  let options
+  $: options = setUpChart(dataProvider)
 
   // Fetch data on mount
-  onMount(async () => {
+  const setUpChart = provider => {
     const allCols = [dateColumn, openColumn, highColumn, lowColumn, closeColumn]
-    if (isEmpty(datasource) || allCols.find(x => x == null)) {
-      options = false
-      return
+    if (!provider || allCols.find(x => x == null)) {
+      return null
     }
 
-    // Fetch, filter and sort data
-    const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource)
+    // Fetch data
+    const { schema, rows } = provider
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = result
-      .filter(row => hasAllColumns(row))
-      .slice(0, 100)
-      .sort((a, b) => (a[dateColumn] > b[dateColumn] ? 1 : -1))
+    const data = rows.filter(row => hasAllColumns(row))
     if (!schema || !data.length) {
-      options = false
-      return
+      return null
     }
 
     // Initialise default chart
@@ -66,8 +56,8 @@
     builder = builder.series([{ data: chartData }])
 
     // Build chart options
-    options = builder.getOptions()
-  })
+    return builder.getOptions()
+  }
 </script>
 
 <ApexChart {options} />
diff --git a/packages/standard-components/src/charts/LineChart.svelte b/packages/standard-components/src/charts/LineChart.svelte
index cdfb4f5fbf..47823955c0 100644
--- a/packages/standard-components/src/charts/LineChart.svelte
+++ b/packages/standard-components/src/charts/LineChart.svelte
@@ -1,14 +1,10 @@
 <script>
-  import { getContext, onMount } from "svelte"
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
-  import { isEmpty } from "lodash/fp"
-
-  const { API } = getContext("sdk")
 
   // Common props
   export let title
-  export let datasource
+  export let dataProvider
   export let labelColumn
   export let valueColumns
   export let xAxisLabel
@@ -28,28 +24,22 @@
   export let stacked
   export let gradient
 
-  let options
+  $: options = setUpChart(dataProvider)
 
   // Fetch data on mount
-  onMount(async () => {
+  const setUpChart = provider => {
     const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (isEmpty(datasource) || allCols.find(x => x == null)) {
-      options = false
-      return
+    if (!provider || allCols.find(x => x == null)) {
+      return null
     }
 
     // Fetch, filter and sort data
-    const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource)
+    const { schema, rows } = provider
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = result
-      .filter(row => hasAllColumns(row))
-      .slice(0, 100)
-      .sort((a, b) => (a[labelColumn] > b[labelColumn] ? 1 : -1))
+    const data = rows.filter(row => hasAllColumns(row))
     if (!schema || !data.length) {
-      options = false
-      return
+      return null
     }
 
     // Initialise default chart
@@ -71,7 +61,7 @@
 
     // Add data
     let useDates = false
-    if (datasource.type !== "view" && schema[labelColumn]) {
+    if (schema[labelColumn]) {
       const labelFieldType = schema[labelColumn].type
       builder = builder.xType(labelFieldType)
       useDates = labelFieldType === "datetime"
@@ -92,8 +82,8 @@
     }
 
     // Build chart options
-    options = builder.getOptions()
-  })
+    return builder.getOptions()
+  }
 </script>
 
 <ApexChart {options} />
diff --git a/packages/standard-components/src/charts/PieChart.svelte b/packages/standard-components/src/charts/PieChart.svelte
index 7b8df25b01..19cb1d2472 100644
--- a/packages/standard-components/src/charts/PieChart.svelte
+++ b/packages/standard-components/src/charts/PieChart.svelte
@@ -1,13 +1,9 @@
 <script>
-  import { getContext, onMount } from "svelte"
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
-  import { isEmpty } from "lodash/fp"
-
-  const { API } = getContext("sdk")
 
   export let title
-  export let datasource
+  export let dataProvider
   export let labelColumn
   export let valueColumn
   export let height
@@ -19,25 +15,21 @@
   export let donut
   export let palette
 
-  let options
+  $: options = setUpChart(dataProvider)
 
   // Fetch data on mount
-  onMount(async () => {
-    if (isEmpty(datasource) || !labelColumn || !valueColumn) {
-      options = false
-      return
+  const setUpChart = provider => {
+    if (!provider || !labelColumn || !valueColumn) {
+      return null
     }
 
     // Fetch, filter and sort data
-    const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource)
-    const data = result
+    const { schema, rows } = provider
+    const data = rows
       .filter(row => row[labelColumn] != null && row[valueColumn] != null)
-      .slice(0, 20)
-      .sort((a, b) => (a[labelColumn] > b[labelColumn] ? 1 : -1))
+      .slice(0, 100)
     if (!schema || !data.length) {
-      options = false
-      return
+      return null
     }
 
     // Initialise default chart
@@ -58,8 +50,8 @@
     builder = builder.series(series).labels(labels)
 
     // Build chart options
-    options = builder.getOptions()
-  })
+    return builder.getOptions()
+  }
 </script>
 
 <ApexChart {options} />