scrawl-canvas/demo/modules/simple-chart-frame.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';

scrawl.importDomImage('.crime');

let background, 
    title, subtitle, 
    yLabelTop, yLabelBottom, 
    xLabelLeft, xLabelRight, 
    group,
    navigation;

// Magic numbers to define where the chart will go within the grid
const graphWidth = 90;
const graphHeight = 80;
const graphBottom = 95;
const graphLeft = 10;

const build = function (namespace, canvas, backgroundImage) {


    // Accessibility
    canvas.set({
        includeInTabNavigation: true,
    });

    navigation = addArrowNavigation(canvas);


    // Build out the frame
    group = scrawl.makeGroup({

        name: `${namespace}-group`,
        host: canvas.base.name,
        order: 1,
        visibility: false,
    });

    background = scrawl.makePicture({

        name: `${namespace}-background`,
        group: group,
        order: 0,

        width: '100%',
        height: '100%',

        copyWidth: '100%',
        copyHeight: '100%',

        globalAlpha: 0.65,

        asset: backgroundImage,
    });

    title = scrawl.makePhrase({

        name: `${namespace}-title`,
        group: group,
        order: 1,

        text: 'No title',

        width: '100%',
        justify: 'center',

        startY: '3%',

        font: '1.5rem Roboto, Arial, sans-serif',

        fillStyle: 'black',
    });

    subtitle = title.clone({

        name: `${namespace}-subtitle`,
        text: 'No data selected',

        startY: '9%',
        size: '1.2rem',
    });
    subtitle.addSectionClass('RED', { fill: 'darkred' });

    yLabelTop = scrawl.makePhrase({

        name: `${namespace}-y-top`,
        group: group,
        order: 1,

        text: '0',

        startX: '1%',
        startY: '12%',

        font: '0.9rem Roboto, Arial, sans-serif',

        fillStyle: 'darkred',
    });

    yLabelBottom = yLabelTop.clone({

        name: `${namespace}-y-bottom`,
        startY: '92%',
    });

    xLabelLeft = yLabelTop.clone({

        name: `${namespace}-x-left`,
        startX: '10%',
        startY: '96%',
    });

    xLabelRight = xLabelLeft.clone({

        name: `${namespace}-x-right`,
        startX: '89%',
    });

    scrawl.makeLine({

        name: `${namespace}-upperline`,
        group: group,
        order: 1,

        startX: 0,
        startY: `${graphBottom - graphHeight}%`,

        endX: '100%',
        endY: `${graphBottom - graphHeight}%`,

        strokeStyle: 'red',
        method: 'draw',

        lineWidth: 1,

    }).clone({

        name: `${namespace}-lowerline`,

        startY: `${graphBottom}%`,
        endY: `${graphBottom}%`,

    }).clone({

        name: `${namespace}-leftline`,

        startX: `${graphLeft}%`,
        endX: `${graphLeft}%`,

        startY: `${graphBottom - graphHeight}%`,
        endY: `${graphBottom}%`,
    });

    show();
};

// Accessibility
const arrowActions = {
    up: () => {},
    right: () => {},
    down: () => {},
    left: () => {},
};

const setArrowAction = (key, action) => {

    if (key != null && action != null) {

        arrowActions[key] = action;
    }
};

const addArrowNavigation = (canvas) => {

    const entityNavigationKeysDown = (e) => {

        const { key } = e;

        // Tab, Enter/Return, Esc
        if ('Tab' === key || 'Escape' === key) {
            canvas.domElement.blur();
            return;
        }

        // Prevent various combikey events interfering with navigation functionality
        if ('Shift' === key || 'Alt' === key || 'Ctrl' === key|| 'Meta' === key) return;

        else if ('ArrowLeft' === key) arrowActions.left();
        else if ('ArrowUp' === key) arrowActions.up();
        else if ('ArrowRight' === key) arrowActions.right();
        else if ('ArrowDown' === key) arrowActions.down();

        e.preventDefault();
    }

    return scrawl.addNativeListener('keydown', entityNavigationKeysDown, canvas.domElement);
};



// API
const kill = () => {

    if (group != null && navigation != null) {

        group.kill(true);
        navigation();
    }
}

const hide = () => {

    if (group != null) group.set({
        visibility: false,
    });
};
const show = () => {

    if (group != null) group.set({
        visibility: true,
    });
};

const updateTextHelper = function (item, text) {

    if (item != null && text != null) item.set({ text });
};

const updateTitle = (text) => updateTextHelper(title, text);
const updateSubtitle = (text) => updateTextHelper(subtitle, text);
const updateYTop = (text) => updateTextHelper(yLabelTop, text);
const updateYBottom = (text) => updateTextHelper(yLabelBottom, text);
const updateXLeft = (text) => updateTextHelper(xLabelLeft, text);
const updateXRight = (text) => updateTextHelper(xLabelRight, text);

const updateBackground = function (asset) {

    if (background != null && asset != null) background.set({ asset });
};

export {
    graphWidth,
    graphHeight,
    graphBottom,
    graphLeft,

    build,
    kill,

    hide,
    show,

    updateTitle,
    updateSubtitle,
    updateYTop,
    updateYBottom,
    updateXLeft,
    updateXRight,

    updateBackground,

    setArrowAction,
};