Diff: frontend/kubus.js

Revision:

15:ce1b7c40ecb8

Child:

17:590d234a7ae6

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/frontend/kubus.js	Fri Jan 06 02:30:34 2017 +0100
@@ -0,0 +1,57 @@
+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) {
+        this.container = document.getElementById(containerId);
+    }
+
+    addChart(chart) {
+        const chartContainer = document.createElement("div");
+        chartContainer.classList.add('chart');
+
+        const title = document.createElement("h2");
+        title.innerHTML = "Sensor #1";
+        title.classList.add('chart__title');
+
+        chartContainer.appendChild(title);
+        chartContainer.appendChild(chart);
+
+        this.container.appendChild(chartContainer);
+    }
+}
+
+class SensorChart {
+    constructor() {
+        this.canvas = document.createElement("canvas");
+        this.canvas.height = "70";
+    }
+
+    getCanvas() {
+        return this.canvas;
+    }
+
+    render() {
+        this.chart = new Chart(this.canvas, {
+            type: 'line',
+            data: {
+                labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
+                datasets: [
+                    {
+                        label: 'Sensor #1',
+                        data: [12, 13, 90, 87, 15, 20, 19, 20, 14, 21]
+                    }
+                ]
+            }
+        });
+    }
+}
+
+const sensorCharts = new Charts("charts");
+const sensorChart = new SensorChart();
+sensorCharts.addChart(sensorChart.getCanvas());
+sensorChart.render();