Published
Edited
Sep 23, 2019
5 forks
1 star
{
let wrapper = html`<div class="wrapper">
<div>
<input type="text" class="text" size="10">
</div>
<div class=visibilityFilterBoxDiv></div>
<div class=todoList></div>
</div>`
function updateData() {
const item = d3.select('.todoList')
.selectAll('.item')
.data(store.getState().todos.filter(todo => {
switch (store.getState().visibilityFilter) {
case 'SHOW_ALL':
return todo
case 'SHOW_COMPLETED':
return todo.completed === true
case 'SHOW_ACIVE':
return todo.completed === false
default:
console.warn('Unexpected visibilityFilter state')
return todo
}
}), d => d.index)
const itemEnter = item.enter()
.append('div')
.attr('class', d => `item ${d.text}`)
.style('text-align', 'center')
.style('font-family', 'monospace')
const itemBox = itemEnter.append('input')
.attr('class', 'itemBox')
.attr('type', 'checkbox')
.each(function(d) { if (d.completed) d3.select(this).attr('checked', true) })
.on('click', d => {
store.dispatch(toggleTodo(d.index))
updateData()
})
const itemText = itemEnter.append('label')
.attr('class', 'itemText')
.attr('for', d => d.text)
.text(d => d.text)
const itemExit = item.exit().remove()
}
const visibilityFilterBoxes = d3.select(wrapper)
.select('.visibilityFilterBoxDiv')
.selectAll('.visibilityFilters')
.data(Object.values(VisibilityFilters))
.join('div')
const visibilityCheckboxes = visibilityFilterBoxes.append('input')
.attr('class', 'visibilityCheckboxes')
.attr('type', 'radio')
.attr('name', 'visibilityCheckboxes')
.attr('id', d => d)
.attr('value', d => d)
.on('click', d => {
store.dispatch(setVisibilityFilter(d))
updateData()
})
.each(function(d) {
if (store.getState().visibilityFilter === d) d3.select(this).attr('checked', true)
})
const visibilityLabels = visibilityFilterBoxes.append('label')
.attr('class', 'visibilityLabels')
.attr('for', d => d)
.text(d => d.charAt(0) + d.replace('_', ' ').toLowerCase().slice(1))
.style('font-family', 'Helvetica')
d3.select(wrapper).select('.text')
.on('change', function() {
const index = store.getState().todos.length
store.dispatch(addTodo(this.value, index))
updateData()
this.value = ''
})
return wrapper
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
