PyData Hyperconvergence Tutorial: Graph Gadget HTML

gistfile1.txt

/*global window, rJS, console, RSVP, Dygraph */
/*jslint indent: 2, maxerr: 3 */
(function (rJS) {
  "use strict";

  var ARRAY_VALUE_LENGTH = 8,
    OPTION_DICT = {
      start_date: 0,
      time_factor: 1000,
      resolution: 1,
      xlabel: 'x',
      ylabel: 'y',
      key_list: ["Channel 1", "Date"],
      label_list: ["Date", "Channel 1"],
      series_dict: {
        "Channel 1": {
          axis : "y",
          color: "#00884B",
          pointSize: 1,
          visible : true,
          connectSeparatedPoints: true
        }
      },
      axis_dict: {
        y: {
          position : "left",
          axisLabelColor: "grey",
          axisLabelWidth : 40,
          pixelsPerLabel : 30
        },
        x: {
          drawAxis : true,
          axisLabelWidth : 60,
          axisLabelColor: "grey",
          pixelsPerLabel : 30
        }
      },
      connectSeparatedPoints: true
    };

  function generateInitialGraphData(label_list) {
    var i,
      data = [[]];
    for (i = 0; i < label_list.length; i += 1) {
      data[0].push(0);
    }
    return data;
  }

  function convertDateColToDate(gadget, array) {
    var label_list = gadget.property_dict.option_dict.label_list,
      time_factor = gadget.property_dict.option_dict.time_factor,
      time_offset = gadget.property_dict.option_dict.time_offset || 0,
      i,
      k;

    for (k = 0; k < label_list.length; k += 1) {
      if (label_list[k] === "Date") {
        for (i = 0; i < array.length; i += 1) {
          array[i] = [i, array[i]];
        }
      }
    }
    return array;
  }

  rJS(window)

    .ready(function (gadget) {
      gadget.property_dict = {};
      return gadget.getElement()
        .push(function (element) {
          gadget.property_dict.element = element;
          gadget.property_dict.option_dict = OPTION_DICT;
        });
    })

    .declareAcquiredMethod("jio_getAttachment", "jio_getAttachment")

    // render gadget
    .declareMethod('render', function () {
      var gadget = this,
        interaction_model = Dygraph.Interaction.defaultModel,
        option_dict = {},
        url;

      url = "http://softinst67202.host.slapos.org/erp5/web_site_module/pydata_runner/hateoas/data_array_module/27";

      return new RSVP.Queue()
        .push(function () {
          return gadget.jio_getAttachment("erp5", url, {
            start : 0,
            format : "array_buffer"
          });
        })
        .push(function (buffer) {
          var array_length,
          length,
          array,
          array_width = 1;

        array_length = Math.floor(
          buffer.byteLength / array_width / ARRAY_VALUE_LENGTH
        );
        length = buffer.byteLength - (buffer.byteLength % ARRAY_VALUE_LENGTH);
        if (length === buffer.byteLength) {
          array = new Float64Array(buffer);
        } else {
          array = new Float64Array(buffer, 0, length);
        }
        return nj.ndarray(array, [array_length, array_width]);
      })
      .push(function (result) {
        var i,
          data = [],
          ndarray = result,
          label_list =  gadget.property_dict.option_dict.label_list,
          key_list = gadget.property_dict.option_dict.key_list;

        for (i = 1; i < label_list.length; i += 1) {
          data = data.concat(
            nj.unpack(
              ndarray.pick(
                null,
                key_list.indexOf(label_list[i])
              )
            )
          );
        }

        data = convertDateColToDate(gadget, data);

        gadget.property_dict.data = data;
        return gadget
      });
    })

    .declareService(function () {
      var gadget = this;

      return gadget.property_dict.graph = new Dygraph(
        gadget.property_dict.element,
        gadget.property_dict.data,
        gadget.property_dict.option_dict
      );
    });

}(rJS));