From 6d7cb8d6ba9eddfb948d6e86b8fffcc5ec9d4a8c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 18 Mar 2021 17:34:51 +0000 Subject: [PATCH] Update bar chart to work with new data provider --- .../builder/src/builderStore/dataBinding.js | 19 ++++++- .../EventsEditor/actions/DeleteRow.svelte | 5 +- .../EventsEditor/actions/SaveRow.svelte | 6 +-- .../PropertyControls/FieldSelect.svelte | 3 +- .../PropertyControls/FilterEditor.svelte | 3 +- .../PropertyControls/FormFieldSelect.svelte | 2 +- packages/standard-components/manifest.json | 52 ++++++++++--------- .../src/charts/BarChart.svelte | 19 +++---- 8 files changed, 67 insertions(+), 42 deletions(-) diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 074c893a9d..b81e7c9485 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/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 diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte index 425c6f9c58..ca8cd561bf 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte +++ b/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 diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte index bea93615c2..94b1e9645b 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte +++ b/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 datasource = getDatasourceForProvider(component) + const getSchemaFields = (asset, component) => { + const datasource = getDatasourceForProvider(asset, component) const { schema } = getSchemaForDatasource(datasource) return Object.values(schema || {}) } diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte index 32935d8d0a..d3183636d6 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte +++ b/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 || {}) diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte index 616a0196c0..cefeb50e63 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte +++ b/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 || {}) } diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte index 0e72cc4665..5a903e0b10 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte +++ b/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) diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index c268be3ecd..02b31d5b1a 100644 --- a/packages/standard-components/manifest.json +++ b/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" diff --git a/packages/standard-components/src/charts/BarChart.svelte b/packages/standard-components/src/charts/BarChart.svelte index 872f7e624d..4bebdf1407 100644 --- a/packages/standard-components/src/charts/BarChart.svelte +++ b/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 - onMount(async () => { + $: setUpChart() + + 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 result = await API.fetchDatasource(datasource) + const { schema, rows } = dataProvider 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() - }) + }