1
0
Fork 0
mirror of synced 2024-06-16 17:34:41 +12:00

Update all charts to work with new data provider

This commit is contained in:
Andrew Kingston 2021-03-18 18:45:11 +00:00
parent 87fd743f75
commit 951491006b
6 changed files with 54 additions and 89 deletions

View file

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

View file

@ -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>

View file

@ -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>

View file

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

View file

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

View file

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