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:

{
    yearLabels: ['year-1-label', 'year-2-label', ...],
    data:       [year-1-data, year-2-data, ...],
}
*/

import { api as frame } from './simple-chart-frame.js';

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

export const api = {};

let currentData, isBuilt;

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 getData = (category) => {

    return {
        yearLabels: currentData.years,
        data: currentData.crimesByCategory[category]
    };
};

api.build = function (items) {

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

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

        const update = api.update = (items) => {

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

            if (currentData && namespace && canvas && category && scrawl) {

                let myData = getData(category);

                if (!isBuilt) {

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

                    isBuilt = true;
                }
                else graph.update(myData);

                frame.updateTitle(`${currentData.area} Crimes: ${category}`);
                frame.updateBackground(category);
            }
        };

        api.kill = () => {

            scrawl.library.purge(namespace);
            currentData = false;
            isBuilt = false;
        }

        if (!isBuilt) {

            getRawData (dataSource)
            .then (rawData => {

                currentData = rawData;

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

                isBuilt = true;

                update({
                    namespace,
                    category,
                    canvas,
                    scrawl,
                });
            })
            .catch(e => console.log(e.message));
        }
    }
};