simple-graph-lines.js

/*
Data supplied to graph module as Javascript object with structure:
{
    yearLabels: ['year-1-label', 'year-2-label', ...],
    data:       [year-1-data, year-2-data, ...],
}
*/

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

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

let graphWidth = frame.graphWidth,
    graphHeight = frame.graphHeight,
    graphBottom = frame.graphBottom,
    graphLeft = frame.graphLeft;

let positionGroup,
    lineGroup,
    pinGroup;

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

    if (!positionGroup) {

        let yearLabels = dataSet.yearLabels,
            xStep = graphWidth / yearLabels.length;

        positionGroup = scrawl.makeGroup({

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

        lineGroup = scrawl.makeGroup({

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

        pinGroup = scrawl.makeGroup({

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

        yearLabels.forEach((label, index) => {

            scrawl.makeBlock({

                name: `${namespace}-${index}-position`,
                group: positionGroup,

                width: 0,
                height: 0,
                method: 'none',

                startX: `${graphLeft + (xStep * index) + (xStep / 2)}%`,
                startY: `${graphBottom}%`,
            });

            if (index) {

                scrawl.makeLine({

                    name: `${namespace}-${index}-line`,
                    group: lineGroup,

                    pivot: `${namespace}-${index - 1}-position`,
                    lockTo: 'pivot',

                    endPivot: `${namespace}-${index}-position`,
                    endLockTo: 'pivot',

                    useStartAsControlPoint: true,

                    strokeStyle: 'blue',
                    lineWidth: 2,

                    method: 'draw',
                });
            }

            scrawl.makeWheel({

                name: `${namespace}-${index}-pin`,
                group: pinGroup,

                radius: 8,

                handleX: 'center',
                handleY: 'center',

                pivot: `${namespace}-${index}-position`,
                lockTo: 'pivot',

                fillStyle: 'aliceblue',
                strokeStyle: 'blue',
                lineWidth: 4,

                method: 'drawThenFill',
            });
        });

        update(namespace, dataSet);

        show();
    }
};

const calculateBatchValue = (val) => {

    if (val > 50000) return 10000;
    if (val > 25000) return 5000;
    if (val > 10000) return 2000;
    if (val > 5000) return 1000;
    if (val > 2500) return 500;
    if (val > 1000) return 200;
    if (val > 500) return 100;
    if (val > 250) return 50;
    if (val > 100) return 20;
    if (val > 50) return 10;
    if (val > 25) return 5;
    if (val > 10) return 2;
    return 1;
}

const update = (namespace, dataSet) => {

    if (positionGroup) {

        let yearLabels = dataSet.yearLabels,
            data = dataSet.data,
            max = Math.max(...data),
            min = Math.min(...data),
            batch = calculateBatchValue(max - min);

        max = ((Math.floor(max / batch)) * batch) + batch;
        min = (Math.floor(min / batch)) * batch;

        let categoryValue = graphHeight / (max - min),
            yDepth = graphBottom - graphHeight;

        let entity = scrawl.library.entity;

        pinGroup.setArtefacts({
            scale: 1,
            fillStyle: 'aliceblue',
        });

        yearLabels.forEach((label, index) => {

            let pointDepth = (data[index] - min) * categoryValue,
                yVal = yDepth + (graphHeight - pointDepth),
                tempName = `${namespace}-${index}`;

            entity[`${tempName}-position`].set({
                startY: `${yVal}%`,
            });

            entity[`${tempName}-pin`].set({

                onEnter: function () {

                    pinGroup.setArtefacts({
                        scale: 1,
                        fillStyle: 'aliceblue',
                    });

                    frame.updateSubtitle(`${label}: §RED§${data[index].toLocaleString()}`);

                    this.set({
                        scale: 1.5,
                        fillStyle: 'red',
                    });
                },
            });
        });

        frame.updateSubtitle('No data selected');
        frame.updateYTop(max.toLocaleString());
        frame.updateYBottom(min.toLocaleString());
        frame.updateXLeft(yearLabels[0]);
        frame.updateXRight(yearLabels[yearLabels.length - 1]);
    }
};

const kill = () => {

    if (positionGroup) {

        positionGroup.kill(true);
        lineGroup.kill(true);
        pinGroup.kill(true);

        positionGroup = false;
        lineGroup = false;
        pinGroup = false;
    }
};

const hide = () => {

    if (positionGroup) {

        positionGroup.visibility = false;
        lineGroup.visibility = false;
        pinGroup.visibility = false;
    }
};

const show = () => {

    if (positionGroup) {

        positionGroup.visibility = true;
        lineGroup.visibility = true;
        pinGroup.visibility = true;
    }
};

export {
    build,
    update,
    kill,
    hide,
    show,
}