Last active
August 14, 2016 04:10
-
-
Save rexmortus/1b1d0dba9330f39bc6affb5d6560109a to your computer and use it in GitHub Desktop.
Basic `choo-chartist` example (destroys chart)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const html = require('choo/html') | |
const Chartist = require('chartist') | |
let chartist; | |
const data = { | |
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], | |
series: [ | |
[12, 9, 7, 8, 5], | |
] | |
} | |
const options = { | |
fullWidth: true, | |
chartPadding: { | |
right: 40 | |
} | |
} | |
const type = 'Line' | |
const conf = { type: type, data: data, options: options } | |
function onLoad() { | |
updateChart(conf) | |
} | |
function updateChart(config) { | |
let { type, data } = config; | |
let options = config.options || {}; | |
let responsiveOptions = config.responsiveOptions || []; | |
if (chartist) { | |
chartist.update(data, options, responsiveOptions); | |
} else { | |
chartist = new Chartist[type]('.ct-chart', data, options, responsiveOptions); | |
} | |
} | |
module.exports = function (state, prev, send) { | |
if (chartist) { | |
updateChart(conf) | |
} | |
return html` | |
<div onload=${(el) => {onLoad()}} class="ct-chart"/> | |
` | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
At the moment,
onload
triggersupdateChart()
which creates aChartist
which eventually attaches itself to the.ct-chart
element. This renders, but when the component receives new state, thesvg
contents of the container element are removed.I understand the basics of virtual dom/diffing, but I'm insufficiently experienced or knowledgeable to understand what precisely is going on behind the scenes, and how my approach should change to see that chart persist across state changes.