Update line chart to be reactive
This commit is contained in:
parent
e1aea10567
commit
84cdfa5eac
|
@ -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))
|
||||||
|
|
Loading…
Reference in New Issue