Update line chart to be reactive

This commit is contained in:
Andrew Kingston 2022-03-22 17:44:58 +00:00
parent cff11d4b8b
commit ede871dac2
1 changed files with 44 additions and 5 deletions

View File

@ -23,17 +23,56 @@
export let stacked
export let gradient
$: options = setUpChart(dataProvider)
$: options = setUpChart(
title,
dataProvider,
labelColumn,
valueColumns,
xAxisLabel,
yAxisLabel,
height,
width,
animate,
dataLabels,
curve,
legend,
yAxisUnits,
palette,
area,
stacked,
gradient
)
// Fetch data on mount
const setUpChart = provider => {
const setUpChart = (
title,
dataProvider,
labelColumn,
valueColumns,
xAxisLabel,
yAxisLabel,
height,
width,
animate,
dataLabels,
curve,
legend,
yAxisUnits,
palette,
area,
stacked,
gradient
) => {
const allCols = [labelColumn, ...(valueColumns || [null])]
if (!provider || !provider.rows?.length || allCols.find(x => x == null)) {
if (
!dataProvider ||
!dataProvider.rows?.length ||
allCols.find(x => x == null)
) {
return null
}
// Fetch, filter and sort data
const { schema, rows } = provider
const { schema, rows } = dataProvider
const reducer = row => (valid, column) => valid && row[column] != null
const hasAllColumns = row => allCols.reduce(reducer(row), true)
const data = rows.filter(row => hasAllColumns(row))