Diff: frontend/kubus.js

Revision:

19:12f569bd8bdc

Parent:

17:590d234a7ae6

Child:

20:bdb2bf657f29

--- a/frontend/kubus.js	Mon Jan 09 02:05:38 2017 +0100
+++ b/frontend/kubus.js	Mon Jan 09 15:31:38 2017 +0100
@@ -1,9 +1,6 @@
 Chart.defaults.global.defaultFontFamily = "triplicate, Courier, 'Courier New', monospace";
 Chart.defaults.global.defaultFontSize = 15;
 Chart.defaults.global.defaultFontColor = "#efefef";
-Chart.defaults.global.legend.display = false;
-Chart.defaults.global.elements.line.backgroundColor = "rgba(75, 192, 192, 0.1)";
-Chart.defaults.global.elements.line.borderColor = "rgba(75, 192, 192, 1)";
 
 class Charts {
     constructor(containerId) {
@@ -43,40 +40,54 @@
     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, {
-            type: 'line',
-            data: {
-                labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
-                datasets: [
-                    {
-                        label: this.name,
-                        data: [12, 13, 90, 87, 15, 20, 19, 20, 14, 21]
-                    }
-                ]
-            }
-        });
+        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, {
-            type: 'line',
-            data: {
-                labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
-                datasets: [
-                    {
-                        label: this.name,
-                        data: [true, false, false, true, true, false, true, false, false, true],
-                        steppedLine: true
-                    }
-                ]
-            }
-        });
+        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;
     }
 }