Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const choo = require('choo')
- const html = require('choo/html')
- const tenants = require('tenants')
- const d3 = require('d3')
- const app = choo()
- app.model({
- state: { values: [.3, .7, 1, .2], show: true },
- reducers: {
- random: (data, state) => ({ values: state.values.map(Math.random) }),
- add: (data, state) => ({ values: state.values.concat(Math.random())})
- }
- })
- let charts = tenants(function (element) {
- let svg = d3.select(element).append("svg").attr("width", 100).attr("height", 50)
- var rect = svg.append("rect").attr('fill','lightblue').attr("x", 0).attr("y", 0).attr("width", 23).attr("height", 50)
- // This is called on every view
- return function (key, value) {
- rect.transition().duration(750).attr('width', value * 100)
- return element
- }
- })
- const mainView = (state, prev, send) => html`
- <main>
- <h1>Value: ${state.values.length}</h1>
- <button onclick=${(e) => send('random')}>Randomize!</button>
- <button onclick=${(e) => send('add')}>Add!</button>
- ${ state.show ? state.values.map((value, index)=>charts(index, value)) : '' }
- </main>
- `
- app.router((route) => [
- route('/', mainView)
- ])
- const tree = app.start()
- document.body.appendChild(tree)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement