Update all charts to work with new data provider

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",

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>

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>
 

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} />

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} />

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} />