Fix charts not correctly using data context

packages/client/src/components/Component.svelte

@@ -9,7 +9,7 @@
   export let definition = {}
 
   // Get local data binding context
-  const dataStore = getContext("data")
+  const dataContext = getContext("data")
 
   // Create component context
   const componentStore = writable({})
@@ -19,7 +19,7 @@
   $: constructor = getComponentConstructor(definition._component)
   $: children = definition._children
   $: id = definition._id
-  $: enrichedProps = enrichProps(definition, $dataStore, $bindingStore)
+  $: enrichedProps = enrichProps(definition, $dataContext, $bindingStore)
 
   // Update component context
   // ID is duplicated inside style so that the "styleable" helper can set

packages/client/src/components/DataProvider.svelte

@@ -5,9 +5,9 @@
   export let row
 
   // Clone and create new data context for this component tree
-  const data = getContext("data")
+  const dataContext = getContext("data")
   const component = getContext("component")
-  const newData = createDataStore($data)
+  const newData = createDataStore($dataContext)
   setContext("data", newData)
   $: newData.actions.addContext(row, $component.id)
 </script>

packages/standard-components/src/Form.svelte

@@ -7,7 +7,7 @@
 
   const { styleable, API } = getContext("sdk")
   const component = getContext("component")
-  const data = getContext("data")
+  const dataContext = getContext("data")
 
   export let wide = false
 
@@ -16,7 +16,7 @@
   let fields = []
 
   // Fetch info about the closest data context
-  $: getFormData($data[$data.closestComponentId])
+  $: getFormData($dataContext[$dataContext.closestComponentId])
 
   const getFormData = async context => {
     if (context) {
@@ -25,7 +25,7 @@
       fields = Object.keys(schema)
 
       // Use the draft version for editing
-      row = $data[`${$data.closestComponentId}_draft`]
+      row = $dataContext[`${$dataContext.closestComponentId}_draft`]
     }
   }
 </script>

packages/standard-components/src/List.svelte

@@ -4,7 +4,7 @@
 
   const { API, styleable, DataProvider } = getContext("sdk")
   const component = getContext("component")
-  const data = getContext("data")
+  const dataContext = getContext("data")
 
   export let datasource = []
 
@@ -12,7 +12,7 @@
 
   onMount(async () => {
     if (!isEmpty(datasource)) {
-      rows = await API.fetchDatasource(datasource, $data)
+      rows = await API.fetchDatasource(datasource, $dataContext)
     }
   })
 </script>

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

@@ -5,6 +5,7 @@
   import { isEmpty } from "lodash/fp"
 
   const { API } = getContext("sdk")
+  const dataContext = getContext("data")
 
   export let title
   export let datasource
@@ -34,7 +35,7 @@
 
     // Fetch, filter and sort data
     const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource)
+    const result = await API.fetchDatasource(datasource, $dataContext)
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
     const data = result

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

@@ -5,6 +5,7 @@
   import { isEmpty } from "lodash/fp"
 
   const { API } = getContext("sdk")
+  const dataContext = getContext("data")
 
   export let title
   export let datasource
@@ -32,7 +33,7 @@
 
     // Fetch, filter and sort data
     const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource)
+    const result = await API.fetchDatasource(datasource, $dataContext)
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
     const data = result

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

@@ -5,6 +5,7 @@
   import { isEmpty } from "lodash/fp"
 
   const { API } = getContext("sdk")
+  const dataContext = getContext("data")
 
   // Common props
   export let title
@@ -40,7 +41,7 @@
 
     // Fetch, filter and sort data
     const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource)
+    const result = await API.fetchDatasource(datasource, $dataContext)
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
     const data = result

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

@@ -5,6 +5,7 @@
   import { isEmpty } from "lodash/fp"
 
   const { API } = getContext("sdk")
+  const dataContext = getContext("data")
 
   export let title
   export let datasource
@@ -30,7 +31,7 @@
 
     // Fetch, filter and sort data
     const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-    const result = await API.fetchDatasource(datasource)
+    const result = await API.fetchDatasource(datasource, $dataContext)
     const data = result
       .filter(row => row[labelColumn] != null && row[valueColumn] != null)
       .slice(0, 20)

packages/standard-components/src/grid/Component.svelte

@@ -16,6 +16,7 @@
   const setters = new Map([["number", number]])
   const SDK = getContext("sdk")
   const component = getContext("component")
+  const dataContext = getContext("data")
   const { API, styleable } = SDK
 
   export let datasource = {}
@@ -58,7 +59,7 @@
 
   onMount(async () => {
     if (!isEmpty(datasource)) {
-      data = await API.fetchDatasource(datasource)
+      data = await API.fetchDatasource(datasource, $dataContext)
       let schema
 
       // Get schema for datasource