Demo Modules 001

/*
Data fetched from server as JSON String with structure:
{
    "area": "area-label",
    "years": ["year-1-label", "year-2-label", ...],
    "crimesByCategory": {
        "category-1-label": [year-1-data, year-2-data, ...],
        "category-2-label": [year-1-data, year-2-data, ...],
        ...
    }
}

Data supplied to graph module as 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 { api as frame } from './simple-chart-frame.js';

import { api as graph } from './simple-graph-stacked-bars.js';

export const api = {};

const getRawData = (file) => {

    return new Promise ((resolve, reject) => {

        fetch (new Request(file))
        .then (response => {

            if (!response.ok) throw new Error(`Network Error ${response.status}: ${response.statusText}`);
            return response.json();
        })
        .then (rawData => resolve(rawData))
        .catch (e => reject(e));
    });
}

const extractDataByYear = (yearLabels, categoryLabels, categoryData) => {

    const d = {};

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

        d[yearLabels[i]] = [];
    }

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

        let cData = categoryData[categoryLabels[i]];

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

            d[yearLabels[j]].push(cData[j]);
        }
    }
    return d;
};

api.build = (items) => {

    const { namespace, canvas, dataSource, scrawl } = items;

    if (namespace && canvas && dataSource && scrawl) {

        api.kill = () => {
            console.log('killing namespace', namespace);
            scrawl.library.purge(namespace);
        };

        getRawData (dataSource)
        .then (rawData => {

            const area = rawData.area,
                yearLabels = rawData.years,
                categoryData = rawData.crimesByCategory,
                categoryLabels = Object.keys(categoryData),
                yearData = extractDataByYear(yearLabels, categoryLabels, categoryData);

            const data = {
                area,
                yearLabels,
                categoryLabels,
                yearData,
            };

            graph.build ({
                namespace, 
                canvas, 
                data,
                scrawl,
            });

            frame.updateTitle (`${data.area} Crime Statistics - Overview`);
            frame.updateBackground (data.area);
        })
        .catch (error => console.log(error.message));
    }
};