c3js-chart-widget.js

// Generated by CoffeeScript 1.10.0
(function() {
  var BLOCK_HEIGHT, LineChartWidget,
    bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
    indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };

  BLOCK_HEIGHT = 62;

  freeboard.loadWidgetPlugin({
    "type_name": "line_chart",
    "display_name": "Line Chart",
    "description": "Line Chart widget powered by C3.js, " + "written by Tomas Sandven",
    "external_scripts": ["https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js", "https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"],
    "fill_size": true,
    "settings": [
      {
        name: "height",
        display_name: "Height (in blocks)",
        type: "number",
        default_value: 5
      }, {
        name: "columns",
        display_name: "Columns",
        type: "calculated"
      }, {
        name: "flow",
        display_name: "Flow data",
        type: "boolean",
        "default": false,
        description: "Displays a neat animation when data flows from right to left.\nOnly set this to true if past data never changes."
      }, {
        name: "chart_type",
        display_name: "Chart type",
        type: "option",
        default_value: "area",
        options: [
          {
            name: "Area chart",
            value: "area"
          }, {
            name: "Bar chart",
            value: "bar"
          }, {
            name: "Line chart",
            value: "line"
          }, {
            name: "Pie chart",
            value: "pie"
          }, {
            name: "Donut chart",
            value: "donut"
          }
        ]
      }, {
        name: "legend_position",
        display_name: "Legend position",
        type: "option",
        default_value: "bottom",
        options: [
          {
            name: "Bottom",
            value: "bottom"
          }, {
            name: "Right",
            value: "right"
          }, {
            name: "Inset",
            value: "inset"
          }
        ]
      }, {
        name: "time_format",
        display_name: "X Axis Time Format",
        type: "text",
        default_value: "%Y-%m-%d %H:%M:%S"
      }, {
        name: "display_markers",
        display_name: "Display Time Markers",
        type: "boolean"
      }, {
        name: "marker_interval",
        display_name: "Time Markers: Interval",
        type: "option",
        options: [
          {
            name: "Every 30 seconds",
            value: 30
          }, {
            name: "Every minute",
            value: 60
          }, {
            name: "Every 10 minutes",
            value: 60 * 10
          }, {
            name: "Every 30 minutes",
            value: 60 * 30
          }, {
            name: "Every hour",
            value: 60 * 60
          }, {
            name: "Every 2 hours",
            value: 60 * 60 * 2
          }, {
            name: "Every 3 hours",
            value: 60 * 60 * 3
          }, {
            name: "Every 4 hours",
            value: 60 * 60 * 4
          }, {
            name: "Every 6 hours",
            value: 60 * 60 * 6
          }, {
            name: "Every day",
            value: 60 * 60 * 24
          }, {
            name: "Every 3 days",
            value: 60 * 60 * 24 * 3
          }
        ]
      }, {
        name: "marker_time_format",
        display_name: "Time Markers: Format",
        type: "text",
        default_value: "%Y-%m-%d %H:%M:%S"
      }
    ],
    "newInstance": function(settings, newInstanceCallback) {
      return newInstanceCallback(new LineChartWidget(settings));
    }
  });

  LineChartWidget = (function() {
    function LineChartWidget(settings) {
      this.onCalculatedValueChanged = bind(this.onCalculatedValueChanged, this);
      this.onSettingsChanged = bind(this.onSettingsChanged, this);
      this.getHeight = bind(this.getHeight, this);
      this.render = bind(this.render, this);
      this.displayLoading = bind(this.displayLoading, this);
      this.updateTimeMarkers = bind(this.updateTimeMarkers, this);
      this.flowChartData = bind(this.flowChartData, this);
      this.updateChart = bind(this.updateChart, this);
      this.createChart = bind(this.createChart, this);
      this.setSettings = bind(this.setSettings, this);
      this.setSettings(settings);
    }

    LineChartWidget.prototype.setSettings = function(newSettings) {
      var oldSettings, size;
      oldSettings = this.settings;
      this.settings = newSettings;
      if (this.chart) {
        size = {
          width: this.chartElement.outerWidth(),
          height: this.settings["height"] * BLOCK_HEIGHT
        };
        if (this.settings["size"] !== size) {
          this.chart.resize(size);
        }
        if (oldSettings["chart_type"] !== newSettings["chart_type"]) {
          this.chart.transform(this.settings["chart_type"]);
        }
        if (oldSettings["legend_position"] !== newSettings["legend_position"]) {
          this.chart.destroy();
          this.chart = this.createChart();
        }
      }
      return this.updateTimeMarkers();
    };

    LineChartWidget.prototype.createChart = function() {
      var chart;
      chart = c3.generate({
        bindto: this.chartElement[0],
        size: {
          width: this.chartElement.outerWidth(),
          height: Number(this.settings["height"]) * BLOCK_HEIGHT
        },
        data: {
          type: this.settings["chart_type"],
          x: "x",
          xFormat: this.settings["time_format"],
          columns: this.columns
        },
        axis: {
          x: {
            type: "timeseries",
            show: false,
            tick: {
              format: "%Y-%m-%d %H:%M:%S",
              culling: true,
              fit: true,
              rotate: 45
            }
          }
        },
        legend: {
          position: this.settings["legend_position"]
        },
        interaction: {
          enabled: false
        },
        transition: {
          duration: 0
        }
      });
      return chart;
    };

    LineChartWidget.prototype.updateChart = function(oldColumns, newColumns) {
      if (oldColumns === newColumns) {
        return;
      }
      if (this.settings["flow"]) {
        return this.flowChartData(oldColumns, newColumns);
      } else {
        return this.chart.load({
          "columns": newColumns,
          "unload": true
        });
      }
    };

    LineChartWidget.prototype.flowChartData = function(oldColumns, newColumns) {
      var additions, deleteCount, xColumn, xColumnOld;
      additions = [];
      $(newColumns).each(function(index, column) {
        return additions.push(column.slice(0));
      });
      xColumn = newColumns[0];
      xColumnOld = oldColumns[0];
      deleteCount = xColumn.length - 1;
      $(xColumn.slice(0).reverse()).each(function(index, value) {
        if (index === xColumn.length - 1) {
          return false;
        }
        if (indexOf.call(xColumnOld, value) < 0) {
          deleteCount -= 1;
        } else {
          return false;
        }
        return null;
      });
      $(additions).each(function(index, value) {
        return value.splice(1, deleteCount);
      });
      return this.chart.flow({
        columns: additions
      });
    };

    LineChartWidget.prototype.updateTimeMarkers = function() {
      var cursor, date, day, first, firstDate, firstMark, firstMarkDate, format, interval, last, lastDate, lastMark, lastMarkDate, marks, overflow, parse, tzOffset;
      if (!this.chart) {
        return;
      }
      if (!this.settings["display_markers"]) {
        this.chart.xgrids.remove();
        return;
      }
      parse = d3.time.format(this.settings["time_format"]).parse;
      format = d3.time.format(this.settings["marker_time_format"]);
      tzOffset = new Date().getTimezoneOffset() * 60;
      firstDate = parse(this.columns[0][1]);
      lastDate = parse(this.columns[0][this.columns[0].length - 1]);
      first = firstDate.valueOf() / 1000;
      last = lastDate.valueOf() / 1000;
      interval = Number(this.settings["marker_interval"]);
      overflow = first % interval;
      firstMark = first - overflow;
      firstMarkDate = new Date(firstMark * 1000);
      overflow = (last + interval) % interval;
      lastMark = (last + interval) - overflow;
      lastMarkDate = new Date(lastMark * 1000);
      marks = [];
      day = 60 * 60 * 24;
      cursor = firstMark - (firstMark % day);
      while (true) {
        if (cursor > lastMark) {
          break;
        }
        if (cursor < firstMark) {
          cursor += interval;
          continue;
        }
        if (interval > 3600) {
          date = new Date((cursor + tzOffset) * 1000);
        } else {
          date = new Date(cursor * 1000);
        }
        marks.push({
          value: date,
          text: format(date)
        });
        cursor += interval;
      }
      this.chart.xgrids(marks);
      return null;
    };

    LineChartWidget.prototype.displayLoading = function() {
      var text, textContainer;
      this.container.empty();
      textContainer = $("<div>").css({
        "display": "flex",
        "height": this.settings["height"] * BLOCK_HEIGHT,
        "justify-content": "center",
        "align-items": "center",
        "font-size": "2em"
      }).appendTo(this.container);
      return text = $("<div>").text("Loading data...").appendTo(textContainer);
    };

    LineChartWidget.prototype.render = function(containerElement) {
      if (containerElement) {
        this.container = $(containerElement);
      }
      if (!this.columns) {
        this.displayLoading();
        return null;
      }
      if (!this.chart) {
        this.container.empty();
        this.chartElement = $("<div>");
        this.container.append(this.chartElement);
        this.chart = this.createChart();
        this.updateTimeMarkers();
      }
      return null;
    };

    LineChartWidget.prototype.getHeight = function() {
      return this.settings["height"];
    };

    LineChartWidget.prototype.onSettingsChanged = function(newSettings) {
      this.setSettings(newSettings);
      return null;
    };

    LineChartWidget.prototype.onCalculatedValueChanged = function(settingName, newValue) {
      var oldColumns;
      if (settingName === "columns") {
        oldColumns = this.columns;
        this.columns = newValue;
        if (!oldColumns) {
          setTimeout(this.render, 1000);
        } else {
          this.updateChart(oldColumns, this.columns);
        }
      }
      this.updateTimeMarkers();
      return null;
    };

    return LineChartWidget;

  })();

}).call(this);