Issue #2493511: Graph sensor data

modules/farm/farm_sensor/farm_sensor_listener/farm_sensor_listener.css

@@ -0,0 +1,6 @@
+@media (min-width: 992px) {
+  .farm-sensor-graph {
+    width: 50%;
+    float: left;
+  }
+}

modules/farm/farm_sensor/farm_sensor_listener/farm_sensor_listener.js

@@ -0,0 +1,44 @@
+(function ($) {
+  Drupal.behaviors.farm_area_generate = {
+    attach: function (context, settings) {
+
+      // Iterate through the graphs.
+      for (var i = 0; i < settings.farm_sensor_listener.graphs.length; i++) {
+
+        // Get the graph name, id, and data.
+        var name = settings.farm_sensor_listener.graphs[i]['name'];
+        var id = settings.farm_sensor_listener.graphs[i]['id'];
+        var data = settings.farm_sensor_listener.graphs[i]['data'];
+
+        // Initialize variables.
+        var dates=[];
+        var values=[];
+
+        // Iterate through the data and put it into the arrays.
+        for (var j = 0; j < data.length; j++) {
+          var date = new Date(data[j].timestamp * 1000).toISOString();
+          dates.push(date);
+          values.push(data[j][name]);
+        }
+
+        // Assemble variables for plotly.
+        var graph_data=[{
+          x: dates,
+          y: values,
+          name: name,
+          type: 'scatter'
+        }];
+        var layout = {
+          title: name,
+          height: 400,
+          xaxis: { title: 'date' },
+          yaxis: { title: name }
+        };
+
+        // Draw the graph to the element.
+        element = document.getElementById(id);
+        Plotly.newPlot(element, graph_data, layout);
+      }
+    }
+  };
+}(jQuery));

modules/farm/farm_sensor/farm_sensor_listener/farm_sensor_listener.module

@@ -649,3 +649,68 @@ function farm_sensor_listener_farm_ui_entity_views($entity_type, $bundle, $entit
   }
   return $views;
 }
+
+/**
+ * Implements hook_entity_view_alter().
+ */
+function farm_sensor_listener_entity_view_alter(&$build, $type) {
+
+  /*
+   * Alter sensor asset page to display graph(s).
+   */
+
+  // If it's not a farm_asset, bail.
+  if ($type != 'farm_asset') {
+    return;
+  }
+
+  // If the entity information isn't available, bail.
+  if (empty($build['#entity'])) {
+    return;
+  }
+  $asset = $build['#entity'];
+
+  // If the sensor is not a listener, bail.
+  if (empty($asset->sensor_type) || $asset->sensor_type != 'listener') {
+    return;
+  }
+
+  // Query all the distinct value names this sensor has stored.
+  $names = array();
+  $result = db_query('SELECT name FROM {farm_sensor_data} WHERE id = :id GROUP BY name', array(':id' => $asset->id));
+  foreach ($result as $row) {
+    $names[] = $row->name;
+  }
+
+  // Iterate through the names, load the most recent 100 values for each,
+  // generate markup DIV ids, and store it all in JS settings.
+  $markup = array();
+  $graphs = array();
+  foreach ($names as $name) {
+    $id = drupal_html_id('sensor-data-' . $name);
+    $markup[] = '<div id="' . $id . '" class="farm-sensor-graph"></div>';
+    $graph = array(
+      'name' => $name,
+      'id' => $id,
+      'data' => farm_sensor_listener_data($asset->id, $name, NULL, NULL,100),
+    );
+    $graphs[] = $graph;
+  }
+
+  // Add Javascript and CSS to build the graphs.
+  $settings = array(
+    'farm_sensor_listener' => array(
+      'graphs' => $graphs,
+    ),
+  );
+  drupal_add_js($settings, 'setting');
+  drupal_add_js(drupal_get_path('module', 'farm_sensor_listener') . '/farm_sensor_listener.js');
+  drupal_add_js('https://cdn.plot.ly/plotly-latest.min.js', 'external');
+  drupal_add_css(drupal_get_path('module', 'farm_sensor_listener') . '/farm_sensor_listener.css');
+
+  // Output the markup.
+  $build['views']['graph'] = array(
+    '#markup' => '<div class="farm-sensor-graphs clearfix">' . implode('', $markup) . '</div>',
+    '#weight' => -1,
+  );
+}