make a function for each widget

dream/platform/static/src/dream.js

@@ -21,6 +21,462 @@
 
 (function (scope, $, jsPlumb, console) {
   "use strict";
+
+  function station_utilisation_graph_widget(input_data, output_data) {
+    var blockage_data = [],
+      waiting_data = [],
+      failure_data = [],
+      working_data = [],
+      ticks = [],
+      counter = 1;
+
+    // XXX output is still elementList ???
+    $.each(output_data.elementList.sort(
+            function(a,b) {return a.id < b.id ? -1 : 1}),
+      function (idx, obj) {
+        // add each object that has a working ratio
+      if (obj.results !== undefined && obj.results.working_ratio !== undefined) {
+        /* when there is only one replication, the ratio is given as a float,
+            otherwise we have a mapping avg, ub lb */
+        var blockage_ratio = 0.0;
+        if (obj.results.blockage_ratio !== undefined) {
+          if (obj.results.blockage_ratio.avg !== undefined) {
+            blockage_ratio = obj.results.blockage_ratio.avg;
+          } else {
+            blockage_ratio = obj.results.blockage_ratio;
+          }
+        }
+        blockage_data.push([counter, blockage_ratio]);
+
+        // XXX merge setup & loading ratio in working ratio for now
+        var working_ratio = 0.0;
+        if (obj.results.setup_ratio !== undefined) {
+          if (obj.results.setup_ratio.avg !== undefined) {
+            working_ratio += obj.results.setup_ratio.avg;
+          } else {
+            working_ratio += obj.results.setup_ratio;
+          }
+        }
+        if (obj.results.loading_ratio !== undefined) {
+          if (obj.results.loading_ratio.avg !== undefined) {
+            working_ratio += obj.results.loading_ratio.avg;
+          } else {
+            working_ratio += obj.results.loading_ratio;
+          }
+        }
+        if (obj.results.working_ratio !== undefined) {
+          if (obj.results.working_ratio.avg !== undefined) {
+            working_ratio += obj.results.working_ratio.avg;
+          } else {
+            working_ratio += obj.results.working_ratio;
+          }
+        }
+        working_data.push([counter, working_ratio]);
+
+        var waiting_ratio = 0.0;
+        if (obj.results.waiting_ratio !== undefined) {
+          if (obj.results.waiting_ratio.avg !== undefined) {
+            waiting_ratio = obj.results.waiting_ratio.avg;
+          } else {
+            waiting_ratio = obj.results.waiting_ratio;
+          }
+        }
+        waiting_data.push([counter, waiting_ratio]);
+
+        var failure_ratio = 0.0;
+        if (obj.results.failure_ratio !== undefined) {
+          if (obj.results.failure_ratio.avg !== undefined) {
+            failure_ratio = obj.results.failure_ratio.avg;
+          } else {
+            failure_ratio = obj.results.failure_ratio;
+          }
+        }
+        failure_data.push([counter, failure_ratio]);
+
+        ticks.push([counter, obj.id]);
+        counter++;
+      }
+    });
+
+    var series = [{
+      label: "Working",
+      data: working_data
+    }, {
+      label: "Waiting",
+      data: waiting_data
+    }, {
+      label: "Failures",
+      data: failure_data
+    }, {
+      label: "Blockage",
+      data: blockage_data
+    }];
+
+    var options = {
+      xaxis: {
+        minTickSize: 1,
+        ticks: ticks
+      },
+      yaxis: {
+        max: 100
+      },
+      series: {
+        bars: {
+          show: true,
+          barWidth: 0.8,
+          align: "center"
+        },
+        stack: true
+      }
+    };
+    $.plot("#graph", series, options);
+  };
+
+  function queue_stat_widget(input_data, output_data) {
+    /* FIXME: does not support more than one replic.
+     * + see george email to integrate without the need of an EG
+     */
+    var queue_stat = $("#queue_stat");
+    var series = [];
+    $.each(output_data.elementList, function(idx, el){
+      if (el._class == 'Dream.Queue'){
+        series.push({label: el.name || el.id,
+                     data: el.wip_stat_list})
+      }
+    })
+    $.plot("#queue_stat_graph", series);
+  }
+
+  function exit_stat_widget(input_data, output_data) {
+    var exit_stat = $("#exit_stat").find('div').empty();
+    $.each(output_data.elementList, function(idx, el){
+      if (el._class == 'Dream.Exit'){
+        var text = exit_stat.html() + "<table><tr><th colspan='2'>" + (
+                el.name || el.id) + "</th></tr>";
+        $.each(el.results, function(metric, value){
+          if (metric == 'intervalThroughputList') {
+            var attainment_list = [],
+                general = that.getData().general,
+                throughputTarget = parseFloat(general.throughputTarget);
+              text += "<tr><td>Daily Attainment</td><td>"
+              $.each(value, function(i, intervalValue) {
+                var icon = "fa-frown-o";
+                attainment_list.push((intervalValue/throughputTarget));
+                if (intervalValue > throughputTarget) {
+                  icon = "fa-smile-o"
+                }
+                text += intervalValue + ' <i class="fa ' + icon + '"/><br/>';
+              })
+              text += "</td></tr>";
+
+              text += "<tr><td>Average Daily Line Attainment</td><td>" + (
+                (attainment_list.reduce(function(a, b){return a+b}) / attainment_list.length ) * 100).toFixed(2) + "%</td></tr>";
+          } else {
+            if (typeof value == "object") {
+               if (value.ub == value.lb) {
+                  value = value.ub;
+               } else {
+                 var ci_text = "<table width='100%'><tbody>"
+                 ci_text += "<tr><td>Average</td><td>" + value.avg.toFixed(2) + "</td></tr>"
+                 ci_text += "<tr><td>Lower Bound</td><td>" + value.lb.toFixed(2) + "</td></tr>"
+                 ci_text += "<tr><td>Upper Bound</td><td>" + value.ub.toFixed(2) + "</td></tr>"
+                 ci_text += "</tbody></table>"
+                 value = ci_text;
+               }
+            }
+            if (typeof value == "number") {
+               value = value.toFixed(2)
+            }
+            // Rename some metric to something more meaningful
+            if (metric == "lifespan" ){
+              metric = "Cycle Time"
+            }
+            if (metric == "takt_time" ){
+              metric = "Average Departure Rate"
+            }
+            text += "<tr><td>" + metric + "</td><td>" + value + "</td></tr>";
+          }
+        })
+        exit_stat.html(text + "</table>");
+      }
+    })
+  }
+  
+  function job_schedule_spreadsheet_widget(input_data, output_data) {
+    var now = new Date();
+    // XXX why ?
+    now.setHours(0);
+    now.setMinutes(0);
+    now.setSeconds(0);
+
+    var spreadsheet_data = [],
+      spreadsheet_header = [
+        [
+          "Jobs",
+          "ID",
+          "Project Manager",
+          "Due Date",
+          "Priority",
+          "Entrance Time",
+          "Processing Time",
+          "Station ID",
+          "Step No."
+        ]
+      ],
+      simulation_start_date = new Date(input_data.general.currentDate || now.getTime());
+      // TODO: time unit for later 
+      //       or an utility function to map sim time to real time & vice
+      //       versa.
+
+      $.each(output_data.elementList, function(idx, obj) {
+        if (obj._class === 'Dream.Job') {
+          var input_job, input_order, job_index = parseInt(obj["id"]);
+
+          // TODO: do not read spreadsheet, use input JSON to get data
+          // ... afterall why ?
+          
+          input_job = input_data.wip_part_spreadsheet[job_index];
+          // If this line is an order component, find the order.
+          var i = job_index;
+          while (input_data.wip_part_spreadsheet[i][0] === null ||
+                 input_data.wip_part_spreadsheet[i][0] === "") {
+            i = i-1;
+          }
+          input_order = input_data.wip_part_spreadsheet[i];
+          $.each(obj['results']['schedule'], function (i, schedule) {
+            var entrance_date = new Date(simulation_start_date.getTime() +
+                                          // TODO: time unit
+                                         schedule['entranceTime'] * 1000 * 3600);
+
+            spreadsheet_data.push([
+              input_order[0] + "-" + input_job[4],
+              obj['id'],
+              input_order[3], // operator
+              input_order[1], // dueDate
+              input_order[2], // priority
+              moment(entrance_date).format("MMM/DD HH:mm"),
+              input_job[7].split('-')[i] || 0, // processing time
+              schedule['stationId'],
+              i
+            ]);
+          });
+        }
+      });
+
+      if (spreadsheet_data.length > 1) {
+        var job_schedule_spreadsheet = $('#job_schedule_spreadsheet');
+        // Sort the spreadsheet data to an order convenient for end users
+        // TODO: search for a default cmp in javascript
+        spreadsheet_data.sort( function(a, b) {
+          var result = 0,
+              order_id_a, order_id_b, entrance_a, entrance_b;
+          order_id_a = a[0].split('-')[0];
+          order_id_b = b[0].split('-')[0];
+          if (order_id_a !== order_id_b) {
+            if (order_id_a > order_id_b) {
+              result = 1;
+            } else {
+              result = -1;
+            }
+          } else {
+            entrance_a = a[4];
+            entrance_b = b[4];
+            if (entrance_a > entrance_b) {
+              result = 1;
+            } else if (entrance_a < entrance_b) {
+              result = -1;
+            } else {
+              result = 0;
+            }
+          }
+          return result;
+        });
+
+      job_schedule_spreadsheet.show();
+      job_schedule_spreadsheet.handsontable({
+        data: spreadsheet_header.concat(spreadsheet_data),
+        width: function () {
+            return $(window).width() -
+                  job_schedule_spreadsheet.offset().left +
+                  $(window).scrollLeft();
+        },
+        readOnly: true
+      });
+      job_schedule_spreadsheet.find('.htCore').width(job_schedule_spreadsheet.width());
+    }
+  }
+
+  function job_gantt_widget(input_data, output_data) {
+
+      // temporary hack
+      var now = new Date();
+      now.setHours(0);
+      now.setMinutes(0);
+      now.setSeconds(0);
+
+      var start_date,
+        gantt_data = {
+          data: [
+          {
+            id: "by_order",
+            text: "By Order",
+            start_date: start_date,
+            duration: 0,
+            project: 1,
+            open: true
+          },
+          {
+            id: "by_station",
+            text: "By Station",
+            start_date: start_date,
+            duration: 0,
+            project: 1,
+            open: true
+          }
+          ],
+          link: []
+        };
+
+      start_date = input_data.general.currentDate;
+      if (start_date !== undefined && start_date !== "") {
+        start_date = new Date(start_date);
+      } else {
+        start_date =  new Date(now.getTime())
+      }
+
+      $.each(output_data.elementList.sort(function(a,b) {return a.id < b.id ? -1 : 1}),
+        function (idx, obj) {
+
+        var isVisibleStation = function (station) {
+          // we should be able to define in the backend which station is visible
+          return input_data.nodes[station]._class != "Dream.QueueManagedJob";
+        };
+
+        if (obj._class === 'Dream.Job') {
+          // find the corresponding input
+          var input_job, input_order;
+          var job_index = parseInt(obj["id"]);
+          // TODO: do not read spreadsheet, use input JSON to get data
+          input_job = input_data.wip_part_spreadsheet[job_index];
+          var i = job_index;
+          while (input_data.wip_part_spreadsheet[i][0] === null ||
+                 input_data.wip_part_spreadsheet[i][0] === "") {
+            i = i-1;
+          }
+          input_order = input_data.wip_part_spreadsheet[i];
+
+          var duration = 0;
+          if (input_job == input_order) { // if we are on the order definition
+            gantt_data.data.push({
+              id: input_order[0],
+              text: input_order[0],
+              project: 1,
+              open: false,
+              parent: "by_order"
+            });
+          }
+
+          var seen_parts = {};
+          $.each(obj['results']['schedule'], function (i, schedule) {
+            // Filter intermediate steps in part job shop
+            if (isVisibleStation(schedule['stationId'])) {
+              var entrance_date = new Date(start_date.getTime());
+              entrance_date.setTime(entrance_date.getTime() + schedule['entranceTime']*1000*3600);
+              if (obj['results']['schedule'][i + 1]) {
+                duration = obj['results']['schedule'][i + 1]['entranceTime'] - schedule['entranceTime'];
+              } else {
+                duration = obj['results'].completionTime - schedule['entranceTime'];
+              }
+              if (duration > 0.0) {
+                var task_start_date = new Date(start_date.getTime());
+                // for simulation time unit as days
+                // task_start_date.setDate(task_start_date.getDate() + schedule['entranceTime']);
+                // for simulation time unit as days hours
+                task_start_date.setTime(task_start_date.getTime() + schedule['entranceTime']*1000*3600);
+                if (seen_parts[input_job[4] + "." + input_order[0]] === undefined){
+                  gantt_data.data.push({
+                    id: input_job[4] + "." + input_order[0],
+                    text: input_job[4],
+                    parent: input_order[0]
+                  });
+                  seen_parts[input_job[4] + "." + input_order[0]] = 1;
+                }
+                gantt_data.data.push({
+                  id: input_order[0] + '.' + idx + '_' + i,
+                  text: schedule['stationId'],
+                  start_date: task_start_date,
+                  duration: duration,
+                  parent: input_job[4] + "." + input_order[0]
+                });
+                gantt_data.data.push({
+                  id: 'job.' + obj['id'] + '.' + idx + '_' + i,
+                  text: input_order[0] + "-" + input_job[4],
+                  start_date: task_start_date,
+                  duration: duration,
+                  parent: schedule['stationId'],
+                  by_station:1
+                });
+              }
+            }
+          });
+        } else {
+          if (isVisibleStation(obj['id'])) {
+            gantt_data.data.push({
+              id: obj['id'],
+              text: obj['id'],
+              project: 1,
+              open: false,
+              parent: "by_station"
+            });
+          };
+        }
+      });
+
+      gantt.templates.task_class = function (start, end, obj) {
+        return obj.parent ? "sub_task" : "";
+      };
+      try {
+        gantt.clearAll();
+      } catch (e) {}
+
+      var gantt_output_height = 35 * (gantt_data.data.length + 1) + 1;
+      gantt_data.data.sort(function (a, b) {
+        // sort gantt data in a chronological order
+        var result;
+        if (a.start_date === undefined && b.start_date !== undefined) {
+          result = 1;
+        } else if (a.start_date !== undefined && b.start_date === undefined) {
+          result = - 1;
+        } else if (a.start_date === undefined && b.start_date === undefined) {
+          result = 0;
+        } else if (a.start_date > b.start_date) {
+          result = 1;
+        } else if (a.start_date < b.start_date) {
+          result = -1;
+        } else {
+          result = 0;
+        }
+        return result;
+      });
+
+          $('#job_gantt').show().dhx_gantt({
+            data: gantt_data,
+            readonly: true,
+            /* for days has simulation time unit
+            scale_unit: 'day',
+            step: 7
+            */
+            // for hours has simulation time unit
+            scale_unit: 'day',
+            duration_unit: 60*60*1000,
+            //date_grid: "%H:%i",
+            date_scale: "%M/%d",
+            step: 1,
+            subscales: [{unit:"hour", step:4, date:"%H:%i" }]
+          });
+  }
+
+
   scope.Dream = function (configuration) {
     var that = jsonPlumb(),
       priv = {};
@@ -310,7 +766,7 @@
 
     that.displayResult = function (idx) {
       var active_tab = $("#reports").data("ui-tabs") ?
-        $("#reports").tabs("option", "active") : 0;
+        $("#reports").tabs("option", "active") : 0; // XXX should not be 0, but the first enabled one
       var result = JSON.parse($("#json_result").val())[idx]['result'];
 
       $('li.result').removeClass('active');
@@ -319,457 +775,52 @@
         $("#reports").tabs("destroy"); 
       }
 
-      function showReport(report_id) {
-        $("li > a[href='#" + report_id  + "']").parent().show();
-      }
-      function hideReport(report_id) {
-        $("li > a[href='#" + report_id  + "']").parent().hide();
-      }
-
-      // XXX : use same name and make it a loop
-      if (configuration['Dream-Configuration'].gui.debug_json){
-        showReport("debug_json")
-      } else {
-        hideReport("debug_json")
-      }
-      if (configuration['Dream-Configuration'].gui.station_utilisation_graph){
-        showReport("station_utilisation_graph")
-      } else {
-        hideReport("station_utilisation_graph")
-      }
-      if (configuration['Dream-Configuration'].gui.job_schedule_spreadsheet){
-        showReport("job_schedule_spreadsheet")
-      } else {
-        hideReport("job_schedule_spreadsheet")
-      }
-      if (configuration['Dream-Configuration'].gui.job_gantt){
-        showReport("job_gantt")
-      } else {
-        hideReport("job_gantt")
-      }
-      if (configuration['Dream-Configuration'].gui.exit_stat){
-        showReport("exit_stat")
-      } else {
-        hideReport("exit_stat")
-      }
-      if (configuration['Dream-Configuration'].gui.queue_stat){
-        showReport("queue_stat")
-      } else {
-        hideReport("queue_stat")
-      }
-
-      // temporary hack
-      // TODO: use the date specified in general input
-      var now = new Date();
-      now.setHours(0);
-      now.setMinutes(0);
-      now.setSeconds(0);
-
-      var blockage_data = [],
-        waiting_data = [],
-        failure_data = [],
-        working_data = [],
-        ticks = [],
-        counter = 1,
-        spreadsheet_data = [],
-        spreadsheet_header = [
-          [
-            "Jobs",
-            "ID",
-            "Project Manager",
-            "Due Date",
-            "Priority",
-            "Entrance Time",
-            "Processing Time",
-            "Station ID",
-            "Step No."
-          ]
-        ],
-        start_date,
-        gantt_data = {
-          data: [
-          {
-            id: "by_order",
-            text: "By Order",
-            start_date: start_date,
-            duration: 0,
-            project: 1,
-            open: true
-          },
-          {
-            id: "by_station",
-            text: "By Station",
-            start_date: start_date,
-            duration: 0,
-            project: 1,
-            open: true
-          }
-          ],
-          link: []
-        };
-
-      start_date = that.getData().general.currentDate;
-      if (start_date !== undefined && start_date !== "") {
-        start_date = new Date(start_date);
-      } else {
-        start_date =  new Date(now.getTime())
-      }
-
-      $.each(result.elementList.sort(function(a,b) {return a.id < b.id ? -1 : 1}),
-        function (idx, obj) {
-        if (obj.results !== undefined && obj.results.working_ratio !== undefined) {
-          /* when there is only one replication, the ratio is given as a float,
-              otherwise we have a mapping avg, ub lb */
-          var blockage_ratio = 0.0;
-          if (obj.results.blockage_ratio !== undefined) {
-            if (obj.results.blockage_ratio.avg !== undefined) {
-              blockage_ratio = obj.results.blockage_ratio.avg;
-            } else {
-              blockage_ratio = obj.results.blockage_ratio;
-            }
-          }
-          blockage_data.push([counter, blockage_ratio]);
-
-// XXX merge setup & loading ratio in working ratio for now
-          var working_ratio = 0.0;
-          if (obj.results.setup_ratio !== undefined) {
-            if (obj.results.setup_ratio.avg !== undefined) {
-              working_ratio += obj.results.setup_ratio.avg;
-            } else {
-              working_ratio += obj.results.setup_ratio;
-            }
-          }
-          if (obj.results.loading_ratio !== undefined) {
-            if (obj.results.loading_ratio.avg !== undefined) {
-              working_ratio += obj.results.loading_ratio.avg;
-            } else {
-              working_ratio += obj.results.loading_ratio;
-            }
-          }
-          if (obj.results.working_ratio !== undefined) {
-            if (obj.results.working_ratio.avg !== undefined) {
-              working_ratio += obj.results.working_ratio.avg;
-            } else {
-              working_ratio += obj.results.working_ratio;
-            }
-          }
-          working_data.push([counter, working_ratio]);
-
-          var waiting_ratio = 0.0;
-          if (obj.results.waiting_ratio !== undefined) {
-            if (obj.results.waiting_ratio.avg !== undefined) {
-              waiting_ratio = obj.results.waiting_ratio.avg;
-            } else {
-              waiting_ratio = obj.results.waiting_ratio;
-            }
-          }
-          waiting_data.push([counter, waiting_ratio]);
-
-          var failure_ratio = 0.0;
-          if (obj.results.failure_ratio !== undefined) {
-            if (obj.results.failure_ratio.avg !== undefined) {
-              failure_ratio = obj.results.failure_ratio.avg;
-            } else {
-              failure_ratio = obj.results.failure_ratio;
-            }
-          }
-          failure_data.push([counter, failure_ratio]);
-
-          ticks.push([counter, obj.id]);
-          counter++;
-        }
-
-        var isVisibleStation = function (station) {
-          // we should be able to define in the backend which station is visible
-          return that.getData().nodes[station]._class != "Dream.QueueManagedJob";
-        };
-
-        if (obj._class === 'Dream.Job') {
-          // find the corresponding input
-          var data = that.getData(),
-              input_job, input_order;
-          var job_index = parseInt(obj["id"]);
-          // TODO: do not read spreadsheet, use input JSON to get data
-          input_job = data.wip_part_spreadsheet[job_index];
-          var i = job_index;
-          while (data.wip_part_spreadsheet[i][0] === null || data.wip_part_spreadsheet[i][0] === "") {
-            i = i-1;
-          }
-          input_order = data.wip_part_spreadsheet[i];
-
-          var duration = 0;
-          if (input_job == input_order) { // if we are on the order definition
-            gantt_data.data.push({
-              id: input_order[0],
-              text: input_order[0],
-              project: 1,
-              open: false,
-              parent: "by_order"
-            });
-          }
-
-          var seen_parts = {};
-          $.each(obj['results']['schedule'], function (i, schedule) {
-            // Filter intermediate steps in part job shop
-            if (isVisibleStation(schedule['stationId'])) {
-              var entrance_date = new Date(start_date.getTime());
-              entrance_date.setTime(entrance_date.getTime() + schedule['entranceTime']*1000*3600);
-              spreadsheet_data.push([
-                input_order[0] + "-" + input_job[4],
-                obj['id'],
-                input_order[3], // operator
-                input_order[1], // dueDate
-                input_order[2], // priority
-                moment(entrance_date).format("MMM/DD HH:mm"),
-                input_job[7].split('-')[i] || 0, // processing time
-                schedule['stationId'],
-                i
-              ]);
-              if (obj['results']['schedule'][i + 1]) {
-                duration = obj['results']['schedule'][i + 1]['entranceTime'] - schedule['entranceTime'];
-              } else {
-                duration = obj['results'].completionTime - schedule['entranceTime'];
-              }
-              if (duration > 0.0) {
-                var task_start_date = new Date(start_date.getTime());
-                // for simulation time unit as days
-                // task_start_date.setDate(task_start_date.getDate() + schedule['entranceTime']);
-                // for simulation time unit as days hours
-                task_start_date.setTime(task_start_date.getTime() + schedule['entranceTime']*1000*3600);
-                if (seen_parts[input_job[4] + "." + input_order[0]] === undefined){
-                  gantt_data.data.push({
-                    id: input_job[4] + "." + input_order[0],
-                    text: input_job[4],
-                    parent: input_order[0]
-                  });
-                  seen_parts[input_job[4] + "." + input_order[0]] = 1;
-                }
-                gantt_data.data.push({
-                  id: input_order[0] + '.' + idx + '_' + i,
-                  text: schedule['stationId'],
-                  start_date: task_start_date,
-                  duration: duration,
-                  parent: input_job[4] + "." + input_order[0]
-                });
-                gantt_data.data.push({
-                  id: 'job.' + obj['id'] + '.' + idx + '_' + i,
-                  text: input_order[0] + "-" + input_job[4],
-                  start_date: task_start_date,
-                  duration: duration,
-                  parent: schedule['stationId'],
-                  by_station:1
-                });
-              }
-            }
-          });
+      var available_widget_list = [
+        'debug_json',
+        'station_utilisation_graph',
+        'job_schedule_spreadsheet',
+        'job_gantt',
+        'exit_stat',
+        'queue_stat',
+      ];
+
+      for (var i in available_widget_list) {
+        var widget_name = available_widget_list[i];
+        if (configuration['Dream-Configuration'].gui[widget_name]) {
+          $("li > a[href='#" + widget_name  + "']").parent().show();
         } else {
-          if (isVisibleStation(obj['id'])) {
-            gantt_data.data.push({
-              id: obj['id'],
-              text: obj['id'],
-              project: 1,
-              open: false,
-              parent: "by_station"
-            });
-          };
+          $("li > a[href='#" + widget_name  + "']").parent().hide();
         }
-      });
+      }
 
-      var series = [{
-        label: "Working",
-        data: working_data
-      }, {
-        label: "Waiting",
-        data: waiting_data
-      }, {
-        label: "Failures",
-        data: failure_data
-      }, {
-        label: "Blockage",
-        data: blockage_data
-      }];
-
-      var options = {
-        xaxis: {
-          minTickSize: 1,
-          ticks: ticks
-        },
-        yaxis: {
-          max: 100
-        },
-        series: {
-          bars: {
-            show: true,
-            barWidth: 0.8,
-            align: "center"
-          },
-          stack: true
-        }
-      };
+      var input = that.getData(); // XXX how to get input json ?
+
+      // display each of the enabled widget
       if (configuration['Dream-Configuration'].gui.station_utilisation_graph){
-        // XXX no need to prepare data
-        $.plot("#graph", series, options);
+        station_utilisation_graph_widget(input, result);
       }
-
       if (configuration['Dream-Configuration'].gui.queue_stat){
-        var queue_stat = $("#queue_stat");
-        var series = [];
-        $.each(result.elementList, function(idx, el){
-          if (el._class == 'Dream.Queue'){
-            series.push({label: el.name || el.id,
-                         data: el.wip_stat_list})
-          }
-        })
-        $.plot("#queue_stat_graph", series);
+        queue_stat_widget(input, result);
       }
-
       if (configuration['Dream-Configuration'].gui.exit_stat){
-        var exit_stat = $("#exit_stat").find('div').empty();
-        $.each(result.elementList, function(idx, el){
-          if (el._class == 'Dream.Exit'){
-            var text = exit_stat.html() + "<table><tr><th colspan='2'>" + (
-                    el.name || el.id) + "</th></tr>";
-            $.each(el.results, function(metric, value){
-              if (metric == 'intervalThroughputList') {
-                var attainment_list = [],
-                    general = that.getData().general,
-                    throughputTarget = parseFloat(general.throughputTarget);
-                  text += "<tr><td>Daily Attainment</td><td>"
-                  $.each(value, function(i, intervalValue) {
-                    var icon = "fa-frown-o";
-                    attainment_list.push((intervalValue/throughputTarget));
-                    if (intervalValue > throughputTarget) {
-                      icon = "fa-smile-o"
-                    }
-                    text += intervalValue + ' <i class="fa ' + icon + '"/><br/>';
-                  })
-                  text += "</td></tr>";
-
-                  text += "<tr><td>Average Daily Line Attainment</td><td>" + (
-                    (attainment_list.reduce(function(a, b){return a+b}) / attainment_list.length ) * 100).toFixed(2) + "%</td></tr>";
-              } else {
-                if (typeof value == "object") {
-                   if (value.ub == value.lb) {
-                      value = value.ub;
-                   } else {
-                     var ci_text = "<table width='100%'><tbody>"
-                     ci_text += "<tr><td>Average</td><td>" + value.avg.toFixed(2) + "</td></tr>"
-                     ci_text += "<tr><td>Lower Bound</td><td>" + value.lb.toFixed(2) + "</td></tr>"
-                     ci_text += "<tr><td>Upper Bound</td><td>" + value.ub.toFixed(2) + "</td></tr>"
-                     ci_text += "</tbody></table>"
-                     value = ci_text;
-                   }
-                }
-                if (typeof value == "number") {
-                   value = value.toFixed(2)
-                }
-                // Rename some metric to something more meaningful
-                if (metric == "lifespan" ){
-                  metric = "Cycle Time"
-                }
-                if (metric == "takt_time" ){
-                  metric = "Average Departure Rate"
-                }
-                text += "<tr><td>" + metric + "</td><td>" + value + "</td></tr>";
-              }
-            })
-            exit_stat.html(text + "</table>");
-          }
-        })
+        exit_stat_widget(input, result);
       }
-
-      if (spreadsheet_data.length > 1) {
-        var job_schedule_spreadsheet = $('#job_schedule_spreadsheet');
-        // Sort the spreadsheet data to an order convenient for end users
-        spreadsheet_data.sort( function(a, b) {
-          var result = 0,
-              order_id_a, order_id_b, entrance_a, entrance_b;
-          order_id_a = a[0].split('-')[0];
-          order_id_b = b[0].split('-')[0];
-          if (order_id_a !== order_id_b) {
-            if (order_id_a > order_id_b) {
-              result = 1;
-            } else {
-              result = -1;
-            }
-          } else {
-            entrance_a = a[4];
-            entrance_b = b[4];
-            if (entrance_a > entrance_b) {
-              result = 1;
-            } else if (entrance_a < entrance_b) {
-              result = -1;
-            } else {
-              result = 0;
-            }
-          }
-          return result;
-        });
-        if (configuration['Dream-Configuration'].gui.job_schedule_spreadsheet){
-          job_schedule_spreadsheet.show();
-          job_schedule_spreadsheet.handsontable({
-            data: spreadsheet_header.concat(spreadsheet_data),
-            width: function () {
-                return $(window).width() -
-                      job_schedule_spreadsheet.offset().left +
-                      $(window).scrollLeft();
-            },
-            readOnly: true
-          });
-          job_schedule_spreadsheet.find('.htCore').width(job_schedule_spreadsheet.width());
-        }
-        gantt.templates.task_class = function (start, end, obj) {
-          return obj.parent ? "sub_task" : "";
-        };
-        try {
-          gantt.clearAll();
-        } catch (e) {}
-
-        var gantt_output_height = 35 * (gantt_data.data.length + 1) + 1;
-        gantt_data.data.sort(function (a, b) {
-          // sort gantt data in a chronological order
-          var result;
-          if (a.start_date === undefined && b.start_date !== undefined) {
-            result = 1;
-          } else if (a.start_date !== undefined && b.start_date === undefined) {
-            result = - 1;
-          } else if (a.start_date === undefined && b.start_date === undefined) {
-            result = 0;
-          } else if (a.start_date > b.start_date) {
-            result = 1;
-          } else if (a.start_date < b.start_date) {
-            result = -1;
-          } else {
-            result = 0;
-          }
-          return result;
-        });
-        if (configuration['Dream-Configuration'].gui.job_gantt){
-          $('#job_gantt').show().dhx_gantt({
-            data: gantt_data,
-            readonly: true,
-            /* for days has simulation time unit
-            scale_unit: 'day',
-            step: 7
-            */
-            // for hours has simulation time unit
-            scale_unit: 'day',
-            duration_unit: 60*60*1000,
-            //date_grid: "%H:%i",
-            date_scale: "%M/%d",
-            step: 1,
-            subscales: [{unit:"hour", step:4, date:"%H:%i" }]
-          });
-          //$('#gantt_grid').width(1000);
-        }
+      if (configuration['Dream-Configuration'].gui.job_schedule_spreadsheet){
+        job_schedule_spreadsheet_widget(input, result);
+      }
+      if (configuration['Dream-Configuration'].gui.job_gantt){
+        job_gantt_widget(input, result);
       }
-      // make the tabs full width
+
+      // hack: make the tabs full width
       $("#reports li").width((100/$("#reports li:visible").length) - 1 +'%');
       $("#reports li a").width('100%').css({'text-align': 'left'});
 
       $("#reports").show().tabs({ active: active_tab });
-    };
+    }
+
     return that;
   };
-
 }(window, jQuery, jsPlumb, console));
+
+