import scrawl from '../source/scrawl.js';
let canvas = scrawl.library.canvas.mycanvas,
namespace = 'London-crimes';
import * as frame from './components/simple-chart-frame.js';
import * as barGraph from './components/london-crime-stacked-bars.js';
import * as lineGraph from './components/london-crime-lines.js';
canvas.set({
backgroundColor: 'lemonchiffon',
label: 'Crime statistics for London areas - from 1999 to 2017',
description: 'Interactive graphic showing crimes recorded in various London areas, broken down into crime types. Data taken from https://data.london.gov.uk/dataset/recorded_crime_rates',
fit: 'contain',
checkForResize: true,
}).setBase({
width: 600,
height: 600,
});
let report = function () {
let assets = scrawl.library.assetnames,
groups = scrawl.library.groupnames,
entitys = scrawl.library.entitynames,
reporter = document.querySelector('#library-reporter');
return function () {
reporter.textContent = `Assets:
${assets.join(', ')}
Groups:
${groups.join(', ')}
Entitys:
${entitys.join(', ')}`;
}
}();
scrawl.makeRender({
name: `${namespace}-animation`,
target: canvas,
afterShow: report,
});
scrawl.addListener(
'move',
() => canvas.cascadeEventAction('move'),
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,
`packets/crimes-in-${currentArea.toLowerCase()}.json`
);
}
else if (currentGraphType === 'lines') {
lineGraph.kill();
lineGraph.build(
`${namespace}-lines`,
canvas,
`packets/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,
`packets/crimes-in-${currentArea.toLowerCase()}.json`
);
crimeCategoryInput.setAttribute('disabled', '');
}
else if (currentGraphType === 'lines') {
barGraph.kill();
lineGraph.build(
`${namespace}-lines`,
canvas,
`packets/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');