Diff: frontend/kubus.js

Revision:

17:590d234a7ae6

Parent:

15:ce1b7c40ecb8

Child:

19:12f569bd8bdc

--- a/frontend/kubus.js	Fri Jan 06 02:30:34 2017 +0100
+++ b/frontend/kubus.js	Mon Jan 09 02:03:52 2017 +0100
@@ -15,26 +15,37 @@
         chartContainer.classList.add('chart');
 
         const title = document.createElement("h2");
-        title.innerHTML = "Sensor #1";
+        title.innerHTML = chart.getName();
         title.classList.add('chart__title');
 
         chartContainer.appendChild(title);
-        chartContainer.appendChild(chart);
+        chartContainer.appendChild(chart.getCanvas());
 
         this.container.appendChild(chartContainer);
     }
 }
 
 class SensorChart {
-    constructor() {
+    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");
+    }
+}
+
+class NumberChart extends SensorChart {
     render() {
         this.chart = new Chart(this.canvas, {
             type: 'line',
@@ -42,7 +53,7 @@
                 labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
                 datasets: [
                     {
-                        label: 'Sensor #1',
+                        label: this.name,
                         data: [12, 13, 90, 87, 15, 20, 19, 20, 14, 21]
                     }
                 ]
@@ -51,7 +62,28 @@
     }
 }
 
+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
+                    }
+                ]
+            }
+        });
+    }
+}
+
 const sensorCharts = new Charts("charts");
-const sensorChart = new SensorChart();
-sensorCharts.addChart(sensorChart.getCanvas());
-sensorChart.render();
+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