src/chrome/test/functional/perf/endure_graphs/js/coordinates.js

   1 /*
   2   Copyright (c) 2012 The Chromium Authors. All rights reserved.
   3   Use of this source code is governed by a BSD-style license that can be
   4   found in the LICENSE file.
   5 */
   6
   7 /**
   8  * @fileoverview Class and functions to handle positioning of plot data points.
   9  */
  10
  11 /**
  12  * Class that handles plot data positioning.
  13  * @constructor
  14  *
  15  * @param {Array} plotData Data that will be plotted.  It is an array of lines,
  16  *     where each line is an array of points, and each point is a length-2 array
  17  *     representing an (x, y) pair.
  18  */
  19 function Coordinates(plotData) {
  20   this.plotData = plotData;
  21
  22   height = window.innerHeight - 16;
  23   width = window.innerWidth - 16;
  24
  25   this.widthMax = width;
  26   this.heightMax = Math.min(400, height - 85);
  27
  28   this.processValues_('x');
  29   this.processValues_('y');
  30 }
  31
  32 /**
  33  * Determines the min/max x or y values in the plot, accounting for some extra
  34  * buffer space.
  35  *
  36  * @param {string} type The type of value to process, either 'x' or 'y'.
  37  */
  38 Coordinates.prototype.processValues_ = function (type) {
  39   var merged = [];
  40   for (var i = 0; i < this.plotData.length; i++)
  41     for (var j = 0; j < this.plotData[i].length; j++) {
  42       if (type == 'x')
  43         merged.push(parseFloat(this.plotData[i][j][0]));  // Index 0 is x value.
  44       else
  45         merged.push(parseFloat(this.plotData[i][j][1]));  // Index 1 is y value.
  46     }
  47
  48   min = merged[0];
  49   max = merged[0];
  50   for (var i = 1; i < merged.length; ++i) {
  51     if (isNaN(min) || merged[i] < min)
  52       min = merged[i];
  53     if (isNaN(max) || merged[i] > max)
  54       max = merged[i];
  55   }
  56
  57   var bufferSpace = 0.02 * (max - min);
  58
  59   if (type == 'x') {
  60     this.xBufferSpace_ = bufferSpace;
  61     this.xMinValue_ = min;
  62     this.xMaxValue_ = max;
  63   } else {
  64     this.yBufferSpace_ = bufferSpace;
  65     this.yMinValue_ = min;
  66     this.yMaxValue_ = max;
  67   }
  68 };
  69
  70 /**
  71  * Difference between horizontal upper and lower limit values.
  72  *
  73  * @return {number} The x value range.
  74  */
  75 Coordinates.prototype.xValueRange = function() {
  76   return this.xUpperLimitValue() - this.xLowerLimitValue();
  77 };
  78
  79 /**
  80  * Difference between vertical upper and lower limit values.
  81  *
  82  * @return {number} The y value range.
  83  */
  84 Coordinates.prototype.yValueRange = function() {
  85   return this.yUpperLimitValue() - this.yLowerLimitValue();
  86 };
  87
  88 /**
  89  * Converts horizontal data value to pixel value on canvas.
  90  *
  91  * @param {number} value The x data value.
  92  * @return {number} The corresponding x pixel value on the canvas.
  93  */
  94 Coordinates.prototype.xPixel = function(value) {
  95   return this.widthMax *
  96       ((value - this.xLowerLimitValue()) / this.xValueRange());
  97 };
  98
  99 /**
 100  * Converts vertical data value to pixel value on canvas.
 101  *
 102  * @param {number} value The y data value.
 103  * @return {number} The corresponding y pixel value on the canvas.
 104  */
 105 Coordinates.prototype.yPixel = function(value) {
 106   if (this.yValueRange() == 0) {
 107     // Completely horizontal lines should be centered horizontally.
 108     return this.heightMax / 2;
 109   } else {
 110     return this.heightMax -
 111         (this.heightMax *
 112          (value - this.yLowerLimitValue()) / this.yValueRange());
 113   }
 114 };
 115
 116 /**
 117  * Converts x point on canvas to data value it represents.
 118  *
 119  * @param {number} position The x pixel value on the canvas.
 120  * @return {number} The corresponding x data value.
 121  */
 122 Coordinates.prototype.xValue = function(position) {
 123   return this.xLowerLimitValue() +
 124       (position / this.widthMax * this.xValueRange());
 125 };
 126
 127 /**
 128  * Converts y point on canvas to data value it represents.
 129  *
 130  * @param {number} position The y pixel value on the canvas.
 131  * @return {number} The corresponding y data value.
 132  */
 133 Coordinates.prototype.yValue = function(position) {
 134   var ratio = this.heightMax / (this.heightMax - position);
 135   return this.yLowerLimitValue() + (this.yValueRange() / ratio);
 136 };
 137
 138 /**
 139  * Returns the minimum x value of all the data points.
 140  *
 141  * @return {number} The minimum x value of all the data points.
 142  */
 143 Coordinates.prototype.xMinValue = function() {
 144   return this.xMinValue_;
 145 };
 146
 147 /**
 148  * Returns the maximum x value of all the data points.
 149  *
 150  * @return {number} The maximum x value of all the data points.
 151  */
 152 Coordinates.prototype.xMaxValue = function() {
 153   return this.xMaxValue_;
 154 };
 155
 156 /**
 157  * Returns the minimum y value of all the data points.
 158  *
 159  * @return {number} The minimum y value of all the data points.
 160  */
 161 Coordinates.prototype.yMinValue = function() {
 162   return this.yMinValue_;
 163 };
 164
 165 /**
 166  * Returns the maximum y value of all the data points.
 167  *
 168  * @return {number} The maximum y value of all the data points.
 169  */
 170 Coordinates.prototype.yMaxValue = function() {
 171   return this.yMaxValue_;
 172 };
 173
 174 /**
 175  * Returns the x value at the lower limit of the bounding box of the canvas.
 176  *
 177  * @return {number} The x value at the lower limit of the bounding box of
 178  *     the canvas.
 179  */
 180 Coordinates.prototype.xLowerLimitValue = function() {
 181   return this.xMinValue_ - this.xBufferSpace_;
 182 };
 183
 184 /**
 185  * Returns the x value at the upper limit of the bounding box of the canvas.
 186  *
 187  * @return {number} The x value at the upper limit of the bounding box of
 188  *     the canvas.
 189  */
 190 Coordinates.prototype.xUpperLimitValue = function() {
 191   return this.xMaxValue_ + this.xBufferSpace_;
 192 };
 193
 194 /**
 195  * Returns the y value at the lower limit of the bounding box of the canvas.
 196  *
 197  * @return {number} The y value at the lower limit of the bounding box of
 198  *     the canvas.
 199  */
 200 Coordinates.prototype.yLowerLimitValue = function() {
 201   return this.yMinValue_ - this.yBufferSpace_;
 202 };
 203
 204 /**
 205  * Returns the y value at the upper limit of the bounding box of the canvas.
 206  *
 207  * @return {number} The y value at the upper limit of the bounding box of
 208  *     the canvas.
 209  */
 210 Coordinates.prototype.yUpperLimitValue = function() {
 211   return this.yMaxValue_ + this.yBufferSpace_;
 212 };