Diff: frontend/kubus.js

Revision:

20:bdb2bf657f29

Parent:

19:12f569bd8bdc

Child:

21:959de2c64d28

--- a/frontend/kubus.js	Mon Jan 09 15:31:38 2017 +0100
+++ b/frontend/kubus.js	Mon Jan 09 17:12:34 2017 +0100
@@ -5,20 +5,50 @@
 class Charts {
     constructor(containerId) {
         this.container = document.getElementById(containerId);
+        this.charts = {};
     }
 
-    addChart(chart) {
-        const chartContainer = document.createElement("div");
-        chartContainer.classList.add('chart');
+    addSensorData(sensors) {
+        for (let sensor of sensors) {
+            if (!(sensor.name in this.charts)) {
+                this._addChart(SensorChartFactory.create(sensor));
+            }
 
-        const title = document.createElement("h2");
-        title.innerHTML = chart.getName();
-        title.classList.add('chart__title');
+            this.charts[sensor.name].addDataPoint({
+                x: new Date(),
+                y: sensor.value
+            });
+        }
+    }
+
+    _addChart(chart) {
+        this.charts[chart.getName()] = chart;
+        this._addToContainer(chart);
+    }
+
+    _addToContainer(chart) {
+        const chartContainer = this._createChartContainer();
+        const title = this._createChartTitle(chart.getName());
 
         chartContainer.appendChild(title);
         chartContainer.appendChild(chart.getCanvas());
 
         this.container.appendChild(chartContainer);
+
+        chart.render();
+    }
+
+    _createChartContainer() {
+        const chartContainer = document.createElement("div");
+        chartContainer.classList.add('chart');
+        return chartContainer;
+    }
+
+    _createChartTitle(name) {
+        const title = document.createElement("h2");
+        title.innerHTML = name;
+        title.classList.add('chart__title');
+        return title;
     }
 }
 
@@ -27,6 +57,7 @@
         this.canvas = document.createElement("canvas");
         this.canvas.height = "70";
         this.name = name;
+        this.dataSize = 0;
     }
 
     getCanvas() {
@@ -41,6 +72,18 @@
         throw Error("Not implemented");
     }
 
+    addDataPoint(dataPoint) {
+        this.chart.data.datasets[0].data.push(dataPoint);
+        this.dataSize++;
+
+        if (this.dataSize > 10) {
+            this.chart.data.datasets[0].data.shift();
+            this.dataSize--;
+        }
+
+        this.chart.update();
+    }
+
     _getConfig(data) {
         return {
             type: 'line',
@@ -57,7 +100,7 @@
             options: {
                 scales: {
                     xAxes: [{
-                        type: 'linear',
+                        type: 'time',
                         position: 'bottom'
                     }]
                 },
@@ -71,17 +114,13 @@
 
 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}]
-        ));
+        this.chart = new Chart(this.canvas, this._getConfig([]));
     }
 }
 
 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}]
-        ));
+        this.chart = new Chart(this.canvas, this._getConfig([]));
     }
 
     _getConfig(data) {
@@ -91,10 +130,36 @@
     }
 }
 
+class SensorChartFactory {
+    static create(sensor) {
+        switch (sensor.type) {
+            case "number":
+                return new NumberChart(sensor.name);
+                break;
+            case "bool":
+                return new BoolChart(sensor.name);
+                break;
+            default:
+                throw Error(`Sensor type ${sensor.type} not supported`);
+        }
+    }
+}
+
 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();
\ No newline at end of file
+
+setInterval(() => {
+    sensorCharts.addSensorData([
+        {
+            name: "Distance at the entrance",
+            type: "number",
+            range: [0, 90],
+            unit: "cm",
+            value: Math.random() * 90,
+        },
+        {
+            name: "Motion at the stairway",
+            type: "bool",
+            value: Math.random() >= 0.5
+        }
+    ]);
+}, 5000);
\ No newline at end of file