Generic flot graph widget

b81baa76 · Jérome Perrin · caa07336 · b81baa76 · b81baa76
Commit b81baa76 authored Feb 19, 2015 by Jérome Perrin
Showing with 66 additions and 0 deletions

dream/platform/src/dream/Output_viewChart.html dream/platform/src/dream/Output_viewChart.html +18 -0

dream/platform/src/dream/Output_viewChart.js dream/platform/src/dream/Output_viewChart.js +48 -0

No files found.
--- a/dream/platform/src/dream/Output_viewChart.html
+++ b/dream/platform/src/dream/Output_viewChart.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Graph</title>
+    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
+    <script src="../<%= curl.jqueryflot.relative_dest %>"></script>
+    <script src="../<%= curl.jqueryflotstack.relative_dest %>"></script>
+    <script src="mixin_gadget.js" type="text/javascript"></script>
+    <script src="Output_viewChart.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div class="graph_container" style="width: 100%;height:300px"></div>
+  </body>
+</html>
--- a/dream/platform/src/dream/Output_viewChart.js
+++ b/dream/platform/src/dream/Output_viewChart.js
+/*global rJS, jQuery, initGadgetMixin, console */
+/*jslint unparam: true */
+(function (window, rJS, $, initGadgetMixin) {
+  "use strict";
+
+  var gadget_klass = rJS(window);
+  initGadgetMixin(gadget_klass);
+  gadget_klass
+    /////////////////////////////////////////////////////////////////
+    // Acquired methods
+    /////////////////////////////////////////////////////////////////
+    .declareAcquiredMethod("aq_getAttachment", "jio_getAttachment")
+
+    /**
+     * Stacked flot graph widget, as seen on http://www.flotcharts.org/flot/examples/stacking/index.html
+     * The data is an object with two attributes "series" ( a list ) and "options" (a mapping of flot options).
+     */
+
+    /////////////////////////////////////////////////////////////////
+    // declared methods
+    /////////////////////////////////////////////////////////////////
+    .declareMethod("render", function (options) {
+      var jio_key = options.id,
+        gadget = this;
+      gadget.props.jio_key = jio_key;
+      gadget.props.result = options.result;
+
+      return gadget.aq_getAttachment({
+        "_id": gadget.props.jio_key,
+        "_attachment": "body.json"
+      })
+        .push(function (simulation_json) {
+          var json_data = JSON.parse(simulation_json);
+          gadget.props.data = json_data.result.result_list[options.result][
+            options.action_definition.configuration.output_id];
+        });
+    })
+
+    .declareMethod("startService", function () {
+
+      // XXX Manually calculate width and height when resizing
+      $.plot(
+        this.props.element.querySelector(".graph_container"),
+        this.props.data.series,
+        this.props.data.options
+      );
+    });
+}(window, rJS, jQuery, initGadgetMixin));