File content as of revision 19:12f569bd8bdc:

Chart.defaults.global.defaultFontFamily = "triplicate, Courier, 'Courier New', monospace";
Chart.defaults.global.defaultFontSize = 15;
Chart.defaults.global.defaultFontColor = "#efefef";

class Charts {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
    }

    addChart(chart) {
        const chartContainer = document.createElement("div");
        chartContainer.classList.add('chart');

        const title = document.createElement("h2");
        title.innerHTML = chart.getName();
        title.classList.add('chart__title');

        chartContainer.appendChild(title);
        chartContainer.appendChild(chart.getCanvas());

        this.container.appendChild(chartContainer);
    }
}

class SensorChart {
    constructor(name) {
        this.canvas = document.createElement("canvas");
        this.canvas.height = "70";
        this.name = name;
    }

    getCanvas() {
        return this.canvas;
    }

    getName() {
        return this.name;
    }

    render() {
        throw Error("Not implemented");
    }

    _getConfig(data) {
        return {
            type: 'line',
            data: {
                datasets: [
                    {
                        label: this.name,
                        data: data,
                        backgroundColor: "rgba(75, 192, 192, 0.1)",
                        borderColor: "rgba(75, 192, 192, 1)"
                    }
                ]
            },
            options: {
                scales: {
                    xAxes: [{
                        type: 'linear',
                        position: 'bottom'
                    }]
                },
                legend: {
                    display: false
                }
            }
        }
    }
}

class NumberChart extends SensorChart {
    render() {
        this.chart = new Chart(this.canvas, this._getConfig(
            [{x: 1, y: 12}, {x: 2, y: 13}, {x: 3, y: 90}, {x: 4, y: 87}, {x: 5, y: 15}, {x: 6, y: 20}, {x: 7, y: 19}, {x: 8, y: 20}, {x: 9, y: 14}, {x: 10, y: 21}]
        ));
    }
}

class BoolChart extends SensorChart {
    render() {
        this.chart = new Chart(this.canvas, this._getConfig(
            [{x: 1, y: false}, {x: 2, y: false}, {x: 3, y: true}]
        ));
    }

    _getConfig(data) {
        const config = super._getConfig(data);
        config.data.datasets[0].steppedLine = true;
        return config;
    }
}

const sensorCharts = new Charts("charts");
const numberChart = new NumberChart("Number");
const boolChart = new BoolChart("Bool");
sensorCharts.addChart(numberChart);
sensorCharts.addChart(boolChart);
numberChart.render();
boolChart.render();