scrawl-canvas/demo/modules/london-crime-graphic.js

Version 8.9.4 - 19 Nov 2022

// # Demo Modules 001
// Scrawl-canvas modularized code - London crime charts
//
// Related files:
// + [London crime charts - main module](../modules-001.html)
// + [London crime graphic module](./london-crime-graphic.html)
// + [London crime lines module](./london-crime-lines.html)
// + [London crime stacked bar module](./london-crime-stacked-bars.html)
// + [Simple chart frame module](./simple-chart-frame.html)
// + [Simple chart frame tests module](./simple-chart-frame-tests.html)
// + [Simple graph lines module](./simple-graph-lines.html)
// + [Simple graph stacked bars module](./simple-graph-stacked-bars.html)

import * as scrawl from './source/scrawl.js';

let canvas = scrawl.library.canvas.mycanvas,
    namespace = 'London-crimes';

import * as frame from './simple-chart-frame.js';
// import * as tests from './simple-chart-frame-tests.js';
import * as barGraph from './london-crime-stacked-bars.js';
import * as lineGraph from './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 
);

// tests.activateButton(
//     `${namespace}-frame`, 
//     canvas, 
//     document.querySelector('#test-controls'),
//     document.querySelector('#tests-button'),
//     'Other Notifiable Offences');

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, 
                            `crimes-in-${currentArea.toLowerCase()}.json`
                        );
                    }
                    else if (currentGraphType === 'lines') {

                        lineGraph.kill();

                        lineGraph.build(
                            `${namespace}-lines`, 
                            canvas, 
                            `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, 
                            `crimes-in-${currentArea.toLowerCase()}.json`
                        );

                        crimeCategoryInput.setAttribute('disabled', '');
                    }
                    else if (currentGraphType === 'lines') {

                        barGraph.kill();

                        lineGraph.build(
                            `${namespace}-lines`, 
                            canvas, 
                            `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');

// Initial display
frame.build(`${namespace}-frame`, canvas, 'Hackney');
barGraph.build(`${namespace}-bars`, canvas, 'crimes-in-hackney.json');

crimeCategoryInput.value = 'Burglary';
crimeCategoryInput.setAttribute('disabled', '');

console.log(scrawl.library);