repo_description: Interactive visualizations of time series using JavaScript and the HTML canvas tag
repo_topics: canvas charting-library dygraphs timeseries visualization
code: 'use strict';
  
  /**
   * @license
   * Copyright 2011 Dan Vanderkam ([REDACTED_EMAIL])
   * MIT-licenced: https://opensource.org/licenses/MIT
   */
  
  /**
   * @fileoverview Based on PlotKitLayout, but modified to meet the needs of
   * dygraphs.
   */
  
  /*global Dygraph:false */
  
  import * as utils from './dygraph-utils';
  
  /**
   * Creates a new DygraphLayout object.
   *
   * This class contains all the data to be charted.
   * It uses data coordinates, but also records the chart range (in data
   * coordinates) and hence is able to calculate percentage positions ('In this
   * view, Point A lies 25% down the x-axis.')
   *
   * Two things that it does not do are:
   * 1. Record pixel coordinates for anything.
   * 2. (oddly) determine anything about the layout of chart elements.
   *
   * The naming is a vestige of Dygraph's original PlotKit roots.
   *
   * @constructor
   */
  var DygraphLayout = function(dygraph) {
    this.dygraph_ = dygraph;
    /**
     * Array of points for each series.
     *
     * [series index][row index in series] = |Point| structure,
     * where series index refers to visible series only, and the
     * point index is for the reduced set of points for the current
     * zoom region (including one point just outside the window).
     * All points in the same row index share the same X value.
     *
     * @type {Array.<Array.<Dygraph.PointType>>}
     */
    this.points = [];
    this.setNames = [];
    this.annotations = [];
    this.yAxes_ = null;
  
    // TODO(danvk): it's odd that xTicks_ and yTicks_ are inputs,
    // but xticks and yticks are outputs. Clean this up.
    this.xTicks_ = null;
    this.yTicks_ = null;
  };
  
  /**
   * Add points for a single series.
   *
   * @param {string} setname Name of the series.
   * @param {Array.<Dygraph.PointType>} set_xy Points for the series.
   */
  DygraphLayout.prototype.addDataset = function(setname, set_xy) {
    this.points.push(set_xy);
    this.setNames.push(setname);
  };
  
  /**
   * Returns the box which the chart should be drawn in. This is the canvas's
   * box, less space needed for the axis and chart labels.
   *
   * @return {{x: number, y: number, w: number, h: number}}
   */
  DygraphLayout.prototype.getPlotArea = function() {
    return this.area_;
  };
  
  // Compute the box which the chart should be drawn in. This is the canvas's
  // box, less space needed for axis, chart labels, and other plug-ins.
  // NOTE: This should only be called by Dygraph.predraw_().
  DygraphLayout.prototype.computePlotArea = function() {
    var area = {
      // TODO(danvk): per-axis setting.
      x: 0,
      y: 0
    };
  
    area.w = this.dygraph_.width_ - area.x - this.dygraph_.getOption('rightGap');
    area.h = this.dygraph_.height_;
  
    // Let plugins reserve space.
    var e = {
      chart_div: this.dygraph_.graphDiv,
      reserveSpaceLeft: function(px) {
        var r = {
          x: area.x,
          y: area.y,
          w: px,
          h: area.h
        };
        area.x += px;
        area.w -= px;
        return r;
      },
      reserveSpaceRight: function(px) {
        var r = {
          x: area.x + area.w - px,
          y: area.y,
          w: px,
          h: area.h
        };
        area.w -= px;
        return r;
      },
      reserveSpaceTop: function(px) {
        var r = {
          x: area.x,
          y: area.y,
          w: area.w,
          h: px
        };
        area.y += px;
        area.h -= px;
        return r;
      },
      reserveSpaceBottom: function(px) {
        var r = {
          x: area.x,
          y: area.y + area.h - px,
          w: area.w,
          h: px
        };
        area.h -= px;
        return r;
      },
      chartRect: function() {
        return {x:area.x, y:area.y, w:area.w, h:area.h};
      }
    };
    this.dygraph_.cascadeEvents_('layout', e);
  
    this.area_ = area;
  };
  
  DygraphLayout.prototype.setAnnotations = function(ann) {
    // The Dygraph object's annotations aren't parsed. We parse them here and
    // save a copy. If there is no parser, then the user must be using raw format.
    this.annotations = [];
    var parse = this.dygraph_.getOption('xValueParser') || function(x) { return x; };
    for (var i = 0; i < ann.length; i++) {
      var a = {};
      if (!ann[i].xval && ann[i].x === undefined) {
        console.error("Annotations must have an 'x' property");
        return;
      }
      if (ann[i].icon &&
          !(ann[i].hasOwnProperty('width') &&
            ann[i].hasOwnProperty('height'))) {
        console.error("Must set width and height when setting " +
                      "annotation.icon property");
        return;
      }
      utils.update(a, ann[i]);
      if (!a.xval) a.xval = parse(a.x);
      this.annotations.push(a);
    }
  };
  
  DygraphLayout.prototype.setXTicks = function(xTicks) {
    this.xTicks_ = xTicks;
  };
  
  // TODO(danvk): add this to the Dygraph object's API or move it into Layout.
  DygraphLayout.prototype.setYAxes = function (yAxes) {
    this.yAxes_ = yAxes;
  };
  
  DygraphLayout.prototype.evaluate = function() {
    this._xAxis = {};
    this._evaluateLimits();
    this._evaluateLineCharts();
    this._evaluateLineTicks();
    this._evaluateAnnotations();
  };
  
  DygraphLayout.prototype._evaluateLimits = function() {
    var xlimits = this.dygraph_.xAxisRange();
    this._xAxis.minval = xlimits[0];
    this._xAxis.maxval = xlimits[1];
    var xrange = xlimits[1] - xlimits[0];
    this._xAxis.scale = (xrange !== 0 ? 1 / xrange : 1.0);
  
    if (this.dygraph_.getOptionForAxis("logscale", 'x')) {
      this._xAxis.xlogrange = utils.log10(this._xAxis.maxval) - utils.log10(this._xAxis.minval);
      this._xAxis.xlogscale = (this._xAxis.xlogrange !== 0 ? 1.0 / this._xAxis.xlogrange : 1.0);
    }
    for (var i = 0; i < this.yAxes_.length; i++) {
      var axis = this.yAxes_[i];
      axis.minyval = axis.computedValueRange[0];
      axis.maxyval = axis.computedValueRange[1];
      axis.yrange = axis.maxyval - axis.minyval;
      axis.yscale = (axis.yrange !== 0 ? 1.0 / axis.yrange : 1.0);
  
      if (this.dygraph_.getOption("logscale") || axis.logscale) {
        axis.ylogrange = utils.log10(axis.maxyval) - utils.log10(axis.minyval);
        axis.ylogscale = (axis.ylogrange !== 0 ? 1.0 / axis.ylogrange : 1.0);
        if (!isFinite(axis.ylogrange) || isNaN(axis.ylogrange)) {
          console.error('axis ' + i + ' of graph at ' + axis.g +
                        ' can\'t be displayed in log scale for range [' +
                        axis.minyval + ' - ' + axis.maxyval + ']');
        }
      }
    }
  };
  
  DygraphLayout.calcXNormal_ = function(value, xAxis, logscale) {
    if (logscale) {
      return ((utils.log10(value) - utils.log10(xAxis.minval)) * xAxis.xlogscale);
    } else {
      return (value - xAxis.minval) * xAxis.scale;
    }
  };
  
  /**
   * @param {DygraphAxisType} axis
   * @param {number} value
   * @param {boolean} logscale
   * @return {number}
   */
  DygraphLayout.calcYNormal_ = function(axis, value, logscale) {
    if (logscale) {
      var x = 1.0 - ((utils.log10(value) - utils.log10(axis.minyval)) * axis.ylogscale);
      return isFinite(x) ? x : NaN;  // shim for v8 issue; see pull request 276
    } else {
      return 1.0 - ((value - axis.minyval) * axis.yscale);
    }
  };
  
  DygraphLayout.prototype._evaluateLineCharts = function() {
    var isStacked = this.dygraph_.getOption("stackedGraph");
    var isLogscaleForX = this.dygraph_.getOptionForAxis("logscale", 'x');
  
    for (var setIdx = 0; setIdx < this.points.length; setIdx++) {
      var points = this.points[setIdx];
      var setName = this.setNames[setIdx];
      var connectSeparated = this.dygraph_.getOption('connectSeparatedPoints', setName);
      var axis = this.dygraph_.axisPropertiesForSeries(setName);
      // TODO (konigsberg): use optionsForAxis instead.
      var logscale = this.dygraph_.attributes_.getForSeries("logscale", setName);
      var outOfXBounds = 0, outOfYBounds = 0;
  
      for (var j = 0; j < points.length; j++) {
        var point = points[j];
  
        // Range from 0-1 where 0 represents left and 1 represents right.
        point.x = DygraphLayout.calcXNormal_(point.xval, this._xAxis, isLogscaleForX);
        outOfXBounds += (point.x < 0) || (point.x > 1);
        // Range from 0-1 where 0 represents top and 1 represents bottom
        var yval = point.yval;
        if (isStacked) {
          point.y_stacked = DygraphLayout.calcYNormal_(
              axis, point.yval_stacked, logscale);
          if (yval !== null && !isNaN(yval)) {
            yval = point.yval_stacked;
          }
        }
        if (yval === null) {
          yval = NaN;
          if (!connectSeparated) {
            point.yval = NaN;
          }
        }
        point.y = DygraphLayout.calcYNormal_(axis, yval, logscale);
        outOfYBounds += (point.y < 0) || (point.y > 1);
      }
  
      if (outOfXBounds > 2) {
        console.warn(outOfXBounds + ' points out of X bounds:' + this._xAxis.minval + ' - ' + this._xAxis.maxval);
      }
      if (outOfYBounds > 0) {
        console.warn(outOfYBounds + ' points out of Y bounds:' + axis.minyval + ' - ' + axis.maxyval);
      }
  
      this.dygraph_.dataHandler_.onLineEvaluated(points, axis, logscale);
    }
  };
  
  DygraphLayout.prototype._evaluateLineTicks = function() {
    var i, tick, label, pos, v, has_tick;
    this.xticks = [];
    for (i = 0; i < this.xTicks_.length; i++) {
      tick = this.xTicks_[i];
      label = tick.label;
      has_tick = !('label_v' in tick);
      v = has_tick ? tick.v : tick.label_v;
      pos = this.dygraph_.toPercentXCoord(v);
      if ((pos >= 0.0) && (pos < 1.0)) {
        this.xticks.push({pos, label, has_tick});
      }
    }
  
    this.yticks = [];
    for (i = 0; i < this.yAxes_.length; i++ ) {
      var axis = this.yAxes_[i];
      for (var j = 0; j < axis.ticks.length; j++) {
        tick = axis.ticks[j];
        label = tick.label;
        has_tick = !('label_v' in tick);
        v = has_tick ? tick.v : tick.label_v;
        pos = this.dygraph_.toPercentYCoord(v, i);
        if ((pos > 0.0) && (pos <= 1.0)) {
          this.yticks.push({axis: i, pos, label, has_tick});
        }
      }
    }
  };
  
  DygraphLayout.prototype._evaluateAnnotations = function() {
    // Add the annotations to the point to which they belong.
    // Make a map from (setName, xval) to annotation for quick lookups.
    var i;
    var annotations = {};
    for (i = 0; i < this.annotations.length; i++) {
      var a = this.annotations[i];
      annotations[a.xval + "," + a.series] = a;
    }
  
    this.annotated_points = [];
  
    // Exit the function early if there are no annotations.
    if (!this.annotations || !this.annotations.length) {
      return;
    }
  
    // TODO(antrob): loop through annotations not points.
    for (var setIdx = 0; setIdx < this.points.length; setIdx++) {
      var points = this.points[setIdx];
      for (i = 0; i < points.length; i++) {
        var p = points[i];
        var k = p.xval + "," + p.name;
        if (k in annotations) {
          p.annotation = annotations[k];
          this.annotated_points.push(p);
          //if there are multiple same x-valued points, the annotation would be rendered multiple times
          //remove already rendered annotation
          delete annotations[k];
        }
      }
    }
  };
  
  /**
   * Convenience function to remove all the data sets from a graph
   */
  DygraphLayout.prototype.removeAllDatasets = function() {
    delete this.points;
    delete this.setNames;
    delete this.setPointsLengths;
    delete this.setPointsOffsets;
    this.points = [];
    this.setNames = [];
    this.setPointsLengths = [];
    this.setPointsOffsets = [];
  };
  
  export default DygraphLayout;
  