charts are up

app/client/log.js

@@ -20,10 +20,188 @@ Template.log.events({
   }
 });
 
+
+
+var createChart = function() {
+
+  var self = this;
+  self.labels = [];
+  self.temperatures = [];
+  Tracker.autorun(function() {
+    sensor_data_collection().forEach(function(sensorReading) {
+      self.labels.push(moment(sensorReading.lastBoxContact).format('ddd DD.MM. HH:mm:ss'));
+      for (var i = 0; i < sensorReading.temperatures.length; i++) {
+        if (!self.temperatures[i]) {
+          self.temperatures[i] = [];
+        }
+        self.temperatures[i].push(sensorReading.temperatures[i]);
+      }
+    });
+  });
+
+
+  // Get the context of the canvas element we want to select
+  var chartCanvas = document.getElementById("temperatureChart");
+  var lengthOfTemperatures = self.temperatures[0].length * 40 + 10;
+  chartCanvas.width = (window.innerWidth > lengthOfTemperatures) ? window.innerWidth : lengthOfTemperatures;
+  var heightOfElementsBefore = chartCanvas.getBoundingClientRect().top;
+  chartCanvas.height = window.innerHeight - heightOfElementsBefore;
+  var ctx = chartCanvas.getContext("2d");
+
+
+
+  // Set the options
+  var options = {
+
+    ///Boolean - Whether grid lines are shown across the chart
+    scaleShowGridLines: true,
+
+    //String - Colour of the grid lines
+    scaleGridLineColor: "rgba(0,0,0,.05)",
+
+    //Number - Width of the grid lines
+    scaleGridLineWidth: 1,
+
+    //Boolean - Whether to show horizontal lines (except X axis)
+    scaleShowHorizontalLines: true,
+
+    //Boolean - Whether to show vertical lines (except Y axis)
+    scaleShowVerticalLines: true,
+
+    //Boolean - Whether the line is curved between points
+    bezierCurve: true,
+
+    //Number - Tension of the bezier curve between points
+    bezierCurveTension: 0.4,
+
+    //Boolean - Whether to show a dot for each point
+    pointDot: true,
+
+    //Number - Radius of each point dot in pixels
+    pointDotRadius: 4,
+
+    //Number - Pixel width of point dot stroke
+    pointDotStrokeWidth: 1,
+
+    //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
+    pointHitDetectionRadius: 20,
+
+    //Boolean - Whether to show a stroke for datasets
+    datasetStroke: true,
+
+    //Number - Pixel width of dataset stroke
+    datasetStrokeWidth: 2,
+
+    //Boolean - Whether to fill the dataset with a colour
+    datasetFill: true,
+
+    //String - A legend template
+    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%> aaa </ul>"
+
+  };
+
+  var random = function() {
+    return Math.random() * (100 - 1) + 1;
+  }
+
+  var colours = [{ // blue
+      fillColor: "rgba(151,187,205,0.2)",
+      strokeColor: "rgba(151,187,205,1)",
+      pointColor: "rgba(151,187,205,1)",
+      pointStrokeColor: "#fff",
+      pointHighlightFill: "#fff",
+      pointHighlightStroke: "rgba(151,187,205,0.8)"
+    }, { // red
+      fillColor: "rgba(247,70,74,0.2)",
+      strokeColor: "rgba(247,70,74,1)",
+      pointColor: "rgba(247,70,74,1)",
+      pointStrokeColor: "#fff",
+      pointHighlightFill: "#fff",
+      pointHighlightStroke: "rgba(247,70,74,0.8)"
+    }, { // green
+      fillColor: "rgba(70,191,189,0.2)",
+      strokeColor: "rgba(70,191,189,1)",
+      pointColor: "rgba(70,191,189,1)",
+      pointStrokeColor: "#fff",
+      pointHighlightFill: "#fff",
+      pointHighlightStroke: "rgba(70,191,189,0.8)"
+    }, { // light grey
+      fillColor: "rgba(220,220,220,0.2)",
+      strokeColor: "rgba(220,220,220,1)",
+      pointColor: "rgba(220,220,220,1)",
+      pointStrokeColor: "#fff",
+      pointHighlightFill: "#fff",
+      pointHighlightStroke: "rgba(220,220,220,0.8)"
+    },
+
+    { // yellow
+      fillColor: "rgba(253,180,92,0.2)",
+      strokeColor: "rgba(253,180,92,1)",
+      pointColor: "rgba(253,180,92,1)",
+      pointStrokeColor: "#fff",
+      pointHighlightFill: "#fff",
+      pointHighlightStroke: "rgba(253,180,92,0.8)"
+    }, { // grey
+      fillColor: "rgba(148,159,177,0.2)",
+      strokeColor: "rgba(148,159,177,1)",
+      pointColor: "rgba(148,159,177,1)",
+      pointStrokeColor: "#fff",
+      pointHighlightFill: "#fff",
+      pointHighlightStroke: "rgba(148,159,177,0.8)"
+    }, { // dark grey
+      fillColor: "rgba(77,83,96,0.2)",
+      strokeColor: "rgba(77,83,96,1)",
+      pointColor: "rgba(77,83,96,1)",
+      pointStrokeColor: "#fff",
+      pointHighlightFill: "#fff",
+      pointHighlightStroke: "rgba(77,83,96,1)"
+    }
+  ];
+  var datasets = [];
+
+  for (var i = 0; i < self.temperatures.length; i++) {
+    // repeat colors once you run out
+    var colour = colours[i % colours.length];
+    var dataset = Object.assign({
+      label: "Senzor #",
+      data: self.temperatures[i]
+    }, colour);
+    datasets.push(dataset);
+  }
+
+  // Set the data
+  var data = {
+    labels: self.labels,
+    datasets: datasets
+  };
+
+  // draw the charts
+  var myLineChart = new Chart(ctx).Line(data, options);
+
+
+};
+
+Template.log.onRendered(function() {
+  createChart();
+});
+
+Template.log.resized = function() {
+  createChart();
+
+  return Session.get('resize');
+}
+
+Template.log.orientation = function() {
+  createChart();
+  return Session.get('orientation');
+}
+
+
 Template.sensorData.helpers({
   created_at_formatted: function() {
-    return moment(this.created_at).format(/*"DD.MM.YYYY, */ " (HH:mm)")
+    return moment(this.created_at).format( /*"DD.MM.YYYY, */ " (HH:mm)")
   },
+
   all_temperatures: function(temperatures) {
     var result = '';
     if (temperatures.length > 0) {