Update line chart to be reactive

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

View File

@ -23,17 +23,56 @@
export let stacked export let stacked
export let gradient 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 = (
const setUpChart = provider => { title,
dataProvider,
labelColumn,
valueColumns,
xAxisLabel,
yAxisLabel,
height,
width,
animate,
dataLabels,
curve,
legend,
yAxisUnits,
palette,
area,
stacked,
gradient
) => {
const allCols = [labelColumn, ...(valueColumns || [null])] 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 return null
} }
// Fetch, filter and sort data // Fetch, filter and sort data
const { schema, rows } = provider const { schema, rows } = dataProvider
const reducer = row => (valid, column) => valid && row[column] != null const reducer = row => (valid, column) => valid && row[column] != null
const hasAllColumns = row => allCols.reduce(reducer(row), true) const hasAllColumns = row => allCols.reduce(reducer(row), true)
const data = rows.filter(row => hasAllColumns(row)) const data = rows.filter(row => hasAllColumns(row))