Demo Modules 001

/*
Data format requirements - a Javascript object with structure:

{
    area:           'area-label',
    yearLabels:     ['year-1-label', 'year-2-label', ...],
    categoryLabels: ['category-1-label', 'category-2-label', ...],
    yearData: {
        'year-1-label': ["category-1-data", "category-2-data", ...],
        'year-2-label': ["category-1-data", "category-2-data", ...],
        ...
    }
}
*/

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

import * as frame from './simple-chart-frame.js';

const extractHighestAnnualMaximum = (yearLabels, yearData) => {

    let max = 0;

    for (let i = 0; i < yearLabels.length; i++) {

        let total = yearData[yearLabels[i]].reduce((a, v) => a + v, 0);
        if (total > max) max = total;
    }
    return ((Math.floor(max / 1000)) * 1000) + 1000;
};

const colorArray = ['#257394', '#947a25', '#fc0004', '#00fcbd', '#de9bc8', '#9bdeaf', '#970b99', '#0b9910', '#5f11f0', '#66f011', '#a09de0', '#d1e09d'];

let group,
    space,
    selectedColumn,
    selectedRow,
    currentData,
    currentDatapoint;

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

    space = namespace;
    selectedColumn = 0;
    selectedRow = 0;
    currentData = data;

    let area = data.area,
        yearLabels = data.yearLabels, 
        categoryLabels = data.categoryLabels, 
        yearData = data.yearData,

        gap = 1,

        graphWidth = frame.graphWidth,
        graphHeight = frame.graphHeight,
        graphBottom = frame.graphBottom,
        graphLeft = frame.graphLeft + (gap / 2),

        maximumBarTotal = extractHighestAnnualMaximum(yearLabels, yearData),
        numberOfYears = yearLabels.length,
        barDistance = graphWidth / numberOfYears,
        barWidth = `${barDistance - gap}%`,
        singleCrimeHeight = graphHeight / maximumBarTotal;

    group = scrawl.makeGroup({

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

    yearLabels.forEach((year, yearIndex) => {

        let xPosition = (barDistance * yearIndex) + graphLeft,
            localHeight = 0;

        const categoryLen = categoryLabels.length;

        categoryLabels.forEach((category, categoryIndex) => {

            let categoryItem = yearData[year][categoryIndex],
                crimeHeight = categoryItem * singleCrimeHeight;

            localHeight += crimeHeight;

            scrawl.makeBlock({

                name: `${namespace}-${year}-${category}`,
                group,

                width: barWidth,
                height: `${crimeHeight}%`,

                startX: `${xPosition}%`,
                startY: `${graphBottom - localHeight}%`,

                fillStyle: colorArray[categoryIndex % categoryLen],

                onEnter: function () {

                    selectedColumn = yearIndex;
                    selectedRow = categoryIndex;

                    updateSelected();
                },
            });
        });
    });

    currentDatapoint = scrawl.makeBlock({
        name: `${namespace}-dataframe`,
        group,
        mimic: `${namespace}-${selectedColumn}-${selectedRow}`,
        useMimicDimensions: true,
        useMimicStart: true,
        useMimicHandle: true,
        lockTo: 'mimic',
        lineWidth: 6,
        strokeStyle: 'yellow',
        method: 'draw',
    });

    frame.updateSubtitle('No data selected');
    frame.updateXLeft(yearLabels[0]);
    frame.updateXRight(yearLabels[numberOfYears - 1]);
    frame.updateYTop(maximumBarTotal.toLocaleString());

    frame.setArrowAction('up', () => doNavigation('up'));
    frame.setArrowAction('down', () => doNavigation('down'));
    frame.setArrowAction('left', () => doNavigation('left'));
    frame.setArrowAction('right', () => doNavigation('right'));

    updateSelected();
    show();
};

const doNavigation = (direction) => {

    const {yearLabels, categoryLabels} = currentData;

    const columnLen = yearLabels.length,
        rowLen = categoryLabels.length;

    switch (direction) {

        case 'up' : 
            selectedRow++;
            break;

        case 'down' : 
            selectedRow--;
            break;

        case 'left' : 
            selectedColumn--;
            break;

        case 'right' : 
            selectedColumn++;
            break;
    }

    if (selectedColumn < 0) selectedColumn = columnLen - 1;
    else if (selectedColumn >= columnLen) selectedColumn = 0;

    if (selectedRow < 0) selectedRow = rowLen - 1;
    else if (selectedRow >= rowLen) selectedRow = 0;

    updateSelected();
};

const updateSelected = () => {

    const {yearLabels, categoryLabels, yearData} = currentData;

    const category = categoryLabels[selectedRow],
        year = yearLabels[selectedColumn],
        data = yearData[year][selectedRow];

    currentDatapoint.set({
        mimic: `${space}-${year}-${category}`,
    });

    frame.updateSubtitle(`${category} in ${year}: §RED§${data.toLocaleString()}`);
};

const kill = () => group.kill(true);
const hide = () => group.visibility = false;
const show = () => group.visibility = true;

export {
    build,
    kill,

    hide,
    show,
}