Update bar chart to work with new data provider

packages/builder/src/builderStore/dataBinding.js

@@ -62,12 +62,27 @@ export const getActionProviderComponents = (asset, componentId, actionType) => {
 /**
  * Gets a datasource object for a certain data provider component
  */
-export const getDatasourceForProvider = component => {
+export const getDatasourceForProvider = (asset, component) => {
   const def = store.actions.components.getDefinition(component?._component)
   if (!def) {
     return null
   }
 
+  // If this component has a dataProvider setting, go up the stack and use it
+  const dataProviderSetting = def.settings.find(setting => {
+    return setting.type === "dataProvider"
+  })
+  if (dataProviderSetting) {
+    const settingValue = component[dataProviderSetting.key]
+    const providerId = settingValue.match(/{{\s*literal\s+(\S+)\s*}}/)[1]
+    if (providerId) {
+      const provider = findComponent(asset.props, providerId)
+      return getDatasourceForProvider(asset, provider)
+    } else {
+      return null
+    }
+  }
+
   // Extract datasource from component instance
   const validSettingTypes = ["dataSource", "table", "schema"]
   const datasourceSetting = def.settings.find(setting => {
@@ -123,7 +138,7 @@ const getContextBindings = (asset, componentId) => {
       if (settingValue) {
         const providerId = settingValue.match(/{{\s*literal\s+(\S+)\s*}}/)[1]
         const provider = findComponent(asset.props, providerId)
-        datasource = getDatasourceForProvider(provider)
+        datasource = getDatasourceForProvider(asset, provider)
       }
       if (!datasource) {
         return

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte

@@ -21,7 +21,10 @@
       const providerComponent = dataProviderComponents.find(
         provider => provider._id === parameters.providerId
       )
-      const datasource = getDatasourceForProvider(providerComponent)
+      const datasource = getDatasourceForProvider(
+        $currentAsset,
+        providerComponent
+      )
       const { table } = getSchemaForDatasource(datasource)
       if (table) {
         parameters.tableId = table._id

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte

@@ -17,10 +17,10 @@
   $: providerComponent = dataProviderComponents.find(
     provider => provider._id === parameters.providerId
   )
-  $: schemaFields = getSchemaFields(providerComponent)
+  $: schemaFields = getSchemaFields($currentAsset, providerComponent)
 
-  const getSchemaFields = component => {
+  const getSchemaFields = (asset, component) => {
-    const datasource = getDatasourceForProvider(component)
+    const datasource = getDatasourceForProvider(asset, component)
     const { schema } = getSchemaForDatasource(datasource)
     return Object.values(schema || {})
   }

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte

@@ -5,13 +5,14 @@
     getDatasourceForProvider,
     getSchemaForDatasource,
   } from "builderStore/dataBinding"
+  import { currentAsset } from "builderStore"
 
   export let componentInstance = {}
   export let value = ""
   export let onChange = () => {}
   export let multiselect = false
 
-  $: datasource = getDatasourceForProvider(componentInstance)
+  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
   $: schema = getSchemaForDatasource(datasource).schema
   $: options = Object.keys(schema || {})
 </script>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte

@@ -7,6 +7,7 @@
     getSchemaForDatasource,
   } from "builderStore/dataBinding"
   import SaveFields from "./EventsEditor/actions/SaveFields.svelte"
+  import { currentAsset } from "builderStore"
 
   const dispatch = createEventDispatcher()
 
@@ -18,7 +19,7 @@
   $: schemaFields = getSchemaFields(componentInstance)
 
   const getSchemaFields = component => {
-    const datasource = getDatasourceForProvider(component)
+    const datasource = getDatasourceForProvider($currentAsset, component)
     const { schema } = getSchemaForDatasource(datasource)
     return Object.values(schema || {})
   }

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte

@@ -17,7 +17,7 @@
     componentInstance._id,
     component => component._component === "@budibase/standard-components/form"
   )
-  $: datasource = getDatasourceForProvider(form)
+  $: datasource = getDatasourceForProvider($currentAsset, form)
   $: schema = getSchemaForDatasource(datasource, true).schema
   $: options = getOptions(schema, type)
 

packages/standard-components/manifest.json

@@ -593,21 +593,21 @@
         "key": "title"
       },
       {
-        "type": "datasource",
+        "type": "dataProvider",
         "label": "Data",
-        "key": "datasource"
+        "key": "dataProvider"
       },
       {
         "type": "field",
         "label": "Label Col.",
         "key": "labelColumn",
-        "dependsOn": "datasource"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "multifield",
         "label": "Data Cols.",
         "key": "valueColumns",
-        "dependsOn": "datasource"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "select",
@@ -693,21 +693,21 @@
         "key": "title"
       },
       {
-        "type": "datasource",
+        "type": "dataProvider",
         "label": "Data",
-        "key": "datasource"
+        "key": "dataProvider"
       },
       {
         "type": "field",
         "label": "Label Col.",
         "key": "labelColumn",
-        "dependsOn": "datasource"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "multifield",
         "label": "Data Cols.",
         "key": "valueColumns",
-        "dependsOn": "datasource"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "select",
@@ -794,21 +794,21 @@
         "key": "title"
       },
       {
-        "type": "datasource",
+        "type": "dataProvider",
         "label": "Data",
-        "key": "datasource"
+        "key": "dataProvider"
       },
       {
         "type": "field",
         "label": "Label Col.",
         "key": "labelColumn",
-        "dependsOn": "datasource"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "multifield",
         "label": "Data Cols.",
         "key": "valueColumns",
-        "dependsOn": "datasource"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "select",
@@ -907,21 +907,21 @@
         "key": "title"
       },
       {
-        "type": "datasource",
+        "type": "dataProvider",
         "label": "Data",
-        "key": "datasource"
+        "key": "dataProvider"
       },
       {
         "type": "field",
         "label": "Label Col.",
         "key": "labelColumn",
-        "dependsOn": "datasource"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "field",
         "label": "Data Col.",
         "key": "valueColumn",
-        "dependsOn": "datasource"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "text",
@@ -984,21 +984,21 @@
         "key": "title"
       },
       {
-        "type": "datasource",
+        "type": "dataProvider",
         "label": "Data",
-        "key": "datasource"
+        "key": "dataProvider"
       },
       {
         "type": "field",
         "label": "Label Col.",
         "key": "labelColumn",
-        "dependsOn": "datasource"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "field",
         "label": "Data Col.",
         "key": "valueColumn",
-        "dependsOn": "datasource"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "text",
@@ -1061,21 +1061,21 @@
         "key": "title"
       },
       {
-        "type": "datasource",
+        "type": "dataProvider",
         "label": "Data",
-        "key": "datasource"
+        "key": "dataProvider"
       },
       {
         "type": "field",
         "label": "Date Col.",
         "key": "dateColumn",
-        "dependsOn": "datasource"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "field",
         "label": "Open Col.",
         "key": "openColumn",
-        "dependsOn": "datasource"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "field",
@@ -1520,6 +1520,10 @@
           "label": "Rows Length",
           "key": "rowsLength"
         },
+        {
+          "label": "Schema",
+          "key": "schema"
+        },
         {
           "label": "Loading",
           "key": "loading"

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

@@ -7,7 +7,7 @@
   const { API } = getContext("sdk")
 
   export let title
-  export let datasource
+  export let dataProvider
   export let labelColumn
   export let valueColumns
   export let xAxisLabel
@@ -24,20 +24,20 @@
 
   let options
 
-  // Fetch data on mount
+  $: setUpChart()
-  onMount(async () => {
+
+  const setUpChart = () => {
     const allCols = [labelColumn, ...(valueColumns || [null])]
-    if (isEmpty(datasource) || allCols.find(x => x == null)) {
+    if (!dataProvider || allCols.find(x => x == null)) {
       options = false
       return
     }
 
     // Fetch, filter and sort data
-    const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
+    const { schema, rows } = dataProvider
-    const result = await API.fetchDatasource(datasource)
     const reducer = row => (valid, column) => valid && row[column] != null
     const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = result
+    const data = rows
       .filter(row => hasAllColumns(row))
       .slice(0, 20)
       .sort((a, b) => (a[labelColumn] > b[labelColumn] ? 1 : -1))
@@ -63,7 +63,8 @@
 
     // Add data
     let useDates = false
-    if (datasource.type !== "view" && schema[labelColumn]) {
+    // datasource.type !== "view" &&
+    if (schema[labelColumn]) {
       const labelFieldType = schema[labelColumn].type
       builder = builder.xType(labelFieldType)
       useDates = labelFieldType === "datetime"
@@ -85,7 +86,7 @@
 
     // Build chart options
     options = builder.getOptions()
-  })
+  }
 </script>
 
 <ApexChart {options} />