{
let wrapper = html`<div class="wrapper">
<div>
<input type="text" class="text" size="10">
</div>
<div>
<input type="button" class="undo" value="undo">
<input type="button" class="redo" value="redo">
</div>
<div class=visibilityFilterBoxDiv></div>
<div class=todoList></div>
</div>`
function updateData() {
// update selection
const item = d3.select('.todoList')
.selectAll('.item')
.data(store.getState().todos.present.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)
// update selection checkboxes
const updateItemBox = item.select('.itemBox')
// enter selection
const itemEnter = item.enter()
.append('div')
.attr('class', d => `item ${d.text}`)
.style('text-align', 'center')
.style('font-family', 'monospace')
// enter selection checkboxes + merge with update checkboxes
const itemBox = itemEnter.append('input')
.attr('class', 'itemBox')
.attr('type', 'checkbox')
.merge(updateItemBox)
.each(function(d){
if (d.completed) {
d3.select(this).attr('checked', true)
} else {
d3.select(this).attr('checked', null)
}
})
.on('click', d => {
store.dispatch(toggleTodo(d.index))
updateData()
})
// enter selection text
const itemText = itemEnter.append('label')
.attr('class', 'itemText')
.attr('for', d => d.text)
.text(d => d.text)
// exit selection
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.present.length
store.dispatch(addTodo(this.value, index))
updateData()
this.value = ''
})
const undoButton = d3.select(wrapper).select('.undo')
.on('click', () => {
store.dispatch(ActionCreators.undo())
updateData()
})
const redoButton = d3.select(wrapper).select('.redo')
.on('click', () => {
store.dispatch(ActionCreators.redo())
updateData()
})
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.
