old-tfm/app/client/log.js

function sensor_data_collection() {
  var controllerId = Session.get('controller_id');
  return SensorData.find({
    controllerId: controllerId
  }, {
    sort: {
      created_at: 1
    },
    limit: 100
  });
}

Template.log.helpers({
  sensorDataCollection: sensor_data_collection
});

Template.log.events({
  'click clear_log': function() {
    Meteor.call('clearLog');
  }
});

var tempHolder = {};

var createChart = function() {

  var self = tempHolder;
  self.labels = [];
  self.temperatures = [];
  Tracker.autorun(function() {
    var sdc = sensor_data_collection();

    sdc.forEach(function(sensorReading) {
      if (sensorReading.temperatures) {
        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]);
        }
      }
    });
  });

  if(self.temperatures.length <= 0) { return; } /// there are no temperatures


  // 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)")
  },

  all_temperatures: function(temperatures) {
    var result = '';
    if (temperatures.length > 0) {
      for (var i in temperatures) {
        result += '' + parseFloat(temperatures[i]).toFixed(1) + ' °C  ';
      }
    }
    return result;
  }
});