Advertisement
Guest User

Untitled

a guest
Aug 29th, 2016
62
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.18 KB | None | 0 0
  1. const choo = require('choo')
  2. const html = require('choo/html')
  3. const tenants = require('tenants')
  4. const d3 = require('d3')
  5.  
  6. const app = choo()
  7.  
  8. app.model({
  9. state: { values: [.3, .7, 1, .2], show: true },
  10. reducers: {
  11. random: (data, state) => ({ values: state.values.map(Math.random) }),
  12. add: (data, state) => ({ values: state.values.concat(Math.random())})
  13. }
  14. })
  15.  
  16. let charts = tenants(function (element) {
  17. let svg = d3.select(element).append("svg").attr("width", 100).attr("height", 50)
  18. var rect = svg.append("rect").attr('fill','lightblue').attr("x", 0).attr("y", 0).attr("width", 23).attr("height", 50)
  19.  
  20. // This is called on every view
  21. return function (key, value) {
  22. rect.transition().duration(750).attr('width', value * 100)
  23.  
  24. return element
  25. }
  26. })
  27.  
  28. const mainView = (state, prev, send) => html`
  29. <main>
  30. <h1>Value: ${state.values.length}</h1>
  31. <button onclick=${(e) => send('random')}>Randomize!</button>
  32. <button onclick=${(e) => send('add')}>Add!</button>
  33. ${ state.show ? state.values.map((value, index)=>charts(index, value)) : '' }
  34. </main>
  35. `
  36.  
  37. app.router((route) => [
  38. route('/', mainView)
  39. ])
  40.  
  41. const tree = app.start()
  42. document.body.appendChild(tree)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement