scrawl.addNativeListener('touchmove', (e) => {
e.preventDefault();
e.returnValue = false;
}, canvas.domElement);
let currentGraphType = 'bars',
currentArea = 'Hackney',
currentCategory = 'Burglary';
let crimeCategoryInput = document.querySelector('#crime-categories');
scrawl.addNativeListener(['input', 'change'], function (e) {
if (e && e.target) {
e.preventDefault();
e.stopPropagation();
let target = e.target.id,
value = e.target.value;
switch (target) {
case 'areas' :
if (value !== currentArea) {
currentArea = value;
if (currentGraphType === 'bars') {
barGraph.kill();
barGraph.build(
`${namespace}-bars`,
canvas,
`data/crimes-in-${currentArea.toLowerCase()}.json`
);
}
else if (currentGraphType === 'lines') {
lineGraph.kill();
lineGraph.build(
`${namespace}-lines`,
canvas,
`data/crimes-in-${currentArea.toLowerCase()}.json`,
currentCategory
);
}
}
break;
case 'graph-types' :
if (value !== currentGraphType) {
currentGraphType = value;
if (currentGraphType === 'bars') {
lineGraph.kill();
barGraph.build(
`${namespace}-bars`,
canvas,
`data/crimes-in-${currentArea.toLowerCase()}.json`
);
crimeCategoryInput.setAttribute('disabled', '');
}
else if (currentGraphType === 'lines') {
barGraph.kill();
lineGraph.build(
`${namespace}-lines`,
canvas,
`data/crimes-in-${currentArea.toLowerCase()}.json`,
currentCategory
);
crimeCategoryInput.removeAttribute('disabled');
}
}
break;
case 'crime-categories' :
if (currentGraphType === 'lines' && value !== currentCategory) {
currentCategory = value;
lineGraph.update(
`${namespace}-lines`,
canvas,
currentCategory
);
}
break;
}
}
}, '.control-item');