main.ts

let screen_width = null;
let screen_height = null;

const COLOR_DICT = {
    blue : 'rgb(31, 119, 180)',
    orange : 'rgb(255, 127, 14)',
    green : 'rgb(44, 160, 44)',
    red : 'rgb(214, 39, 40)',
    purple : 'rgb(148, 103, 189)',
    brown : 'rgb(140, 86, 75)',
    pink : 'rgb(227, 119, 194)',
    gray : 'rgb(127, 127, 127)',
    olive : 'rgb(188, 189, 34)',
    cyan : 'rgb(23, 190, 207)',
}

// This function is called when the app navigates to this view (using a link)
function init() {
    // initialize any data here that should be available when the view is shown
    view.sample_table = OnlineDB.sample.all();
    // console.log();
    component.html().on('init', async function() {
        var data = await view.sample_table.toArray();
        // var typedData: DB.sample[] = await view.sample_table.toArray();
        // let myString: string = 'foo';
        // myString = 3; //breaks
        await view.sample_table.orderBy('-timestamp').skip(540).destroyAll();
        populate_graphs(data);
        return 'success';
    });    
}

// This function is called when the user returns to this view from another view
function resume(from) {
    // from.back       (true/false) if true, the user pressed the "Back" button to return to this view
    // from.dismissed  (true/false) if true, the app dismissed to return to this view
    // from.path       contains the path of the view that the user returned from
    // if any data needs to be refreshed when the user returns to this view, you can do that here:
    view.sample_table = DB.sample.all();
    var data = view.sample_table.toArray();
    populate_graphs(data);
}

async function size_canvas() {
    var wh = await view.getSize();
    console.log(wh);
    screen_width = parseInt(wh['width'].toString());
    screen_height = parseInt(wh['height'].toString());
    var height = screen_height - 150;
    return height.toString() + 'px';
}

async function buttonPress() {
    view.sample_table = OnlineDB.sample.all();
    // OnlineDB.sample.where(query)
    var data = await view.sample_table.toArray();

    await view.sample_table.orderBy('-timestamp').skip(540).destroyAll()
    
    populate_graphs(data);
}

function build_config() {
    console.log(screen_width, screen_height);
    const fs = get_fontsize('big');
    var config = {
        type: 'line',
        options: {
            title: {
                display: true,
                fontSize: fs,
                text: 'UNK',
            },
            responsive: true,
            tooltips: {
                mode: 'index',
                intersect: true,
                enabled: false,
            },
            hover: {
                mode: 'point',
                intersect: true
            },
            scales: {
                xAxes: [{
                    type: 'time',
                    position: 'bottom',
                    scaleLabel: {
                        display: false,
                        labelString: 'time',
                        fontSize: fs,
                    },
                    ticks: {
                        maxTicksLimit: 7,
                        fontSize: fs,
                    }
                }],
                yAxes: [{
                    display: true,
                    type: 'linear',
                    scaleLabel: {
                        display: true,
                        labelString: '[ppm]',
                        fontSize: fs,
                    },
                    ticks: {
                        maxTicksLimit: 8,
                        fontSize: fs,
                        beginAtZero: false
                    }
                }]
            },
            legend: {
                display: false,
                labels: {
                    fontSize: fs
                }
            }
        }
	};
    return config;
}

function build_eco2_graph(data) {

    var eco2_data = data.map(function (a) {
        return {x: a.timestamp, y: a.eco_2_ppm}
    });

    var eco2_jsdata = {
        datasets: [{
            label: 'eCO2',
            data: eco2_data,
            fill: false,
            borderColor:"rgb(210, 9, 237)",
            pointRadius: 0,
            borderWidth: 1,
        }]
    }

    var config = build_config();
    config['data'] = eco2_jsdata
    config['options']['title']['text'] =  'eCO2';

    component.html().post('make-graph', config, 'eco2-chart', null);
}

function build_co2_graph(data) {

    var co2_data = data.map(function (a) {
        return {x: a.timestamp, y: a.co_2_ppm}
    });

    var co2_jsdata = {
        datasets: [{
            label: 'CO2',
            data: co2_data,
            fill: false,
            borderColor:"rgb(84, 4, 189)",
            pointRadius: 0,
            borderWidth: 1,
        }]
    }

    var config = build_config();
    config['data'] = co2_jsdata
    config['options']['title']['text'] =  'CO2';
    

    component.html().post('make-graph', config, 'co2-chart', null);
}

function build_tvoc_graph(data) {
    var tvoc_data = data.map(function (a) {
        return {x: a.timestamp, y: a.tvoc_ppb}
    });

    var co2_jsdata = {
        datasets: [{
            label: 'total volatile organic compounds',
            data: tvoc_data,
            fill: false,
            borderColor:"rgb(237, 34, 12)",
            pointRadius: 0,
            borderWidth: 1,
        }]
    }

    var config = build_config();
    config['data'] = co2_jsdata;
    config['options']['title']['text'] =  'tVOC';
    config['options']['scales']['yAxes'][0]['scaleLabel']['labelString'] = '[ppb]';

    component.html().post('make-graph', config, 'tvoc-chart', null);
}

function build_temp_graph(data) {

    var data = data.map(function (a) {
        return {x: a.timestamp, y: a.temp_c}
    });

    var jsdata = {
        datasets: [{
            data: data,
            fill: false,
            borderColor: COLOR_DICT['blue'],
            pointRadius: 0,
            borderWidth: 1,
        }]
    }

    var config = build_config();
    config['data'] = jsdata
    config['options']['title']['text'] =  'Temperature';
    config['options']['scales']['yAxes'][0]['scaleLabel']['labelString'] = '[°C]';

    component.html().post('make-graph', config, 'temp-chart', null);
}

function build_pressure_graph(data) {

    var data = data.map(function (a) {
        return {x: a.timestamp, y: a.pressure_kpa}
    });

    var jsdata = {
        datasets: [{
            data: data,
            fill: false,
            borderColor: COLOR_DICT['gray'],
            pointRadius: 0,
            borderWidth: 1,
        }]
    }

    var config = build_config();
    config['data'] = jsdata
    config['options']['title']['text'] =  'Pressure';
    config['options']['scales']['yAxes'][0]['scaleLabel']['labelString'] = '[kPa]';

    component.html().post('make-graph', config, 'pressure-chart', null);
}

function build_humidity_graph(data) {

    var data = data.map(function (a) {
        return {x: a.timestamp, y: a.humidity_perc}
    });

    var jsdata = {
        datasets: [{
            data: data,
            fill: false,
            borderColor: COLOR_DICT['green'],
            pointRadius: 0,
            borderWidth: 1,
        }]
    }

    var config = build_config();
    config['data'] = jsdata
    config['options']['title']['text'] =  'Humidity';
    config['options']['scales']['yAxes'][0]['scaleLabel']['labelString'] = '[% relative]';

    component.html().post('make-graph', config, 'humidity-chart', null);
}

function build_pm_graph(data) {

    const p1_data = data.map(function (a) {
        return {x: a.timestamp, y: a.pm_1}
    });
    const p2_data = data.map(function (a) {
        return {x: a.timestamp, y: a.pm_2_5}
    });
    const p10_data = data.map(function (a) {
        return {x: a.timestamp, y: a.pm_10}
    });

    var jsdata = {
        datasets: [{
            label: "PM <1.0μm",
            data: p1_data,
            fill: false,
            borderColor: 'rgb(255, 215, 0)', // gold
            pointRadius: 0,
            borderWidth: 1,
        },
        {
            label: "PM <2.5μm",
            data: p2_data,
            fill: false,
            borderColor: 'rgb(255, 140, 0)', // darkorange
            pointRadius: 0,
            borderWidth: 1,
        },
        {
            label: "PM <10μm",
            data: p10_data,
            fill: false,
            borderColor: 'rgb(218, 165, 32)', // goldenrod
            pointRadius: 0,
            borderWidth: 1,
        }]
    }

    var config = build_config();
    config['data'] = jsdata
    config['options']['maintainAspectRatio'] = false;
    config['options']['legend']['display'] = true;
    config['options']['title']['text'] =  'Particulate matter';
    config['options']['scales']['yAxes'][0]['scaleLabel']['labelString'] = '[μg/m³]';

    component.html().post('make-graph', config, 'pm-chart', null);
}

function build_particulate03_graph(data) {

    const p1_data = data.map(function (a) {
        return {x: a.timestamp, y: a.particles_0_3}
    });

    var jsdata = {
        datasets: [{
            label: "diameter > 0.3um",
            data: p1_data,
            fill: false,
            borderColor: COLOR_DICT['cyan'], // gold
            pointRadius: 0,
            borderWidth: 1,
        }]
    }

    var config = build_config();
    config['data'] = jsdata
    //config['options']['legend']['display'] = true;
    config['options']['title']['text'] =  'Particles >0.3μm';
    config['options']['scales']['yAxes'][0]['scaleLabel']['labelString'] = '[particles/0.1L]';

    component.html().post('make-graph', config, 'pg03-chart', null);
}

function build_particulate05_graph(data) {

    const p1_data = data.map(function (a) {
        return {x: a.timestamp, y: a.particles_0_5}
    });

    var jsdata = {
        datasets: [{
            label: "diameter > 0.5um",
            data: p1_data,
            fill: false,
            borderColor: 'rgb(0, 191, 255)', // gold
            pointRadius: 0,
            borderWidth: 1,
        }]
    }

    var config = build_config();
    config['data'] = jsdata
    //config['options']['legend']['display'] = true;
    config['options']['title']['text'] =  'Particles >0.5μm';
    config['options']['scales']['yAxes'][0]['scaleLabel']['labelString'] = '[particles/0.1L]';

    component.html().post('make-graph', config, 'pg05-chart', null);
}

function build_particulate1_graph(data) {

    const p1_data = data.map(function (a) {
        return {x: a.timestamp, y: a.particles_1}
    });

    var jsdata = {
        datasets: [{
            label: "diameter > 1um",
            data: p1_data,
            fill: false,
            borderColor: 'rgb(30, 144, 255)',
            pointRadius: 0,
            borderWidth: 1,
        }]
    }

    var config = build_config();
    config['data'] = jsdata
    //config['options']['legend']['display'] = true;
    config['options']['title']['text'] =  'Particles >1μm';
    config['options']['scales']['yAxes'][0]['scaleLabel']['labelString'] = '[particles/0.1L]';

    component.html().post('make-graph', config, 'pg1-chart', null);
}

function build_particulate25_graph(data) {

    const p1_data = data.map(function (a) {
        return {x: a.timestamp, y: a.particles_2_5}
    });

    var jsdata = {
        datasets: [{
            label: "diameter > 2.5um",
            data: p1_data,
            fill: false,
            borderColor: 'rgb(0, 0, 128)',
            pointRadius: 0,
            borderWidth: 1,
        }]
    }

    var config = build_config();
    config['data'] = jsdata
    //config['options']['legend']['display'] = true;
    config['options']['title']['text'] =  'Particles >2.5μm';
    config['options']['scales']['yAxes'][0]['scaleLabel']['labelString'] = '[particles/0.1L]';

    component.html().post('make-graph', config, 'pg025-chart', null);
}

function build_particulate10_graph(data) {

    const p1_data = data.map(function (a) {
        return {x: a.timestamp, y: a.particles_5}
    });
    const p2_data = data.map(function (a) {
        return {x: a.timestamp, y: a.particles_10}
    });

    var jsdata = {
        datasets: [{
            label: ">5μm",
            data: p1_data,
            fill: false,
            borderColor: 'rgb(75, 0, 130)',
            pointRadius: 0,
            borderWidth: 1,
        },
        {
            label: ">10μm",
            data: p2_data,
            fill: false,
            borderColor: 'rgb(0, 0, 0)',
            pointRadius: 0,
            borderWidth: 1,
        }]
    }

    var config = build_config();
    config['data'] = jsdata
    config['options']['legend']['display'] = true;
    config['options']['title']['text'] =  'Large particle count';
    config['options']['scales']['yAxes'][0]['scaleLabel']['labelString'] = '[particles/0.1L]';

    component.html().post('make-graph', config, 'pg10-chart', null);
}

function populate_graphs(data) {
    build_co2_graph(data);
    build_eco2_graph(data);
    build_tvoc_graph(data);
    build_pressure_graph(data);
    build_temp_graph(data);
    build_humidity_graph(data);

    build_pm_graph(data);
    build_particulate03_graph(data);
    build_particulate05_graph(data);
    build_particulate1_graph(data);
    build_particulate25_graph(data);
    build_particulate10_graph(data);
}

function get_fontsize(size) {
    let fs = 12;
    if(screen_width > screen_height) {
        // we are on desktop or landscape mobile, use smaller font
        fs = 12;
    }
    return fs;
}