GUI: New widget to display bottlenecks in demand planning

11931df4 · Jérome Perrin · d177534c · 11931df4 · 11931df4
Commit 11931df4 authored Apr 16, 2015 by Jérome Perrin
2 changed files
--- a/dream/platform/src/dream/Output_viewBottleneckGraph.html
+++ b/dream/platform/src/dream/Output_viewBottleneckGraph.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="../<%= curl.jqueryflottime.relative_dest %>"></script>
+    <script src="mixin_gadget.js" type="text/javascript"></script>
+    <script src="Output_viewBottleneckGraph.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div class="graph_container" style="float:left; width: 100%; height:300px"></div>
+    <div>
+      <label for="choices">Please select bottleneck:</label>
+      <select class="choices" name="choices"></select>
+    </div>
+  </body>
+</html>
--- a/dream/platform/src/dream/Output_viewBottleneckGraph.js
+++ b/dream/platform/src/dream/Output_viewBottleneckGraph.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")
+
+    /**
+     * Similar to Output_viewGraph, but to display a set of series with a drop down.
+     * XXX Can be renamed to something more generic !
+     */
+
+    /////////////////////////////////////////////////////////////////
+    // 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 () {
+      var first_option,
+        datasets=this.props.data,
+        graph_container=this.props.element.querySelector(".graph_container"),
+        select=$(this.props.element.querySelector("select.choices"));
+
+      function plotAccordingToChoices() {
+        var data;
+        if (select.val()) {
+          data = datasets[select.val()];
+          $.plot(graph_container, data.series, data.options);
+        }
+      }
+
+      // insert options in the select
+      $.each(datasets, function(key, val) {
+        select.append("<option value='" + key + "'>" + key + "</option>");
+      });
+      
+      first_option = $($("option", select).get(0));
+      first_option.attr('selected', 'selected');
+      select.selectmenu('refresh', true);
+
+      select.bind("change", plotAccordingToChoices);
+      plotAccordingToChoices();
+
+    });
+}(window, rJS, jQuery, initGadgetMixin));