content/browser/resources/media/timeline_graph_view.js

   1 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * A TimelineGraphView displays a timeline graph on a canvas element.
   7  */
   8 var TimelineGraphView = (function() {
   9   'use strict';
  10
  11   // Maximum number of labels placed vertically along the sides of the graph.
  12   var MAX_VERTICAL_LABELS = 6;
  13
  14   // Vertical spacing between labels and between the graph and labels.
  15   var LABEL_VERTICAL_SPACING = 4;
  16   // Horizontal spacing between vertically placed labels and the edges of the
  17   // graph.
  18   var LABEL_HORIZONTAL_SPACING = 3;
  19   // Horizintal spacing between two horitonally placed labels along the bottom
  20   // of the graph.
  21   var LABEL_LABEL_HORIZONTAL_SPACING = 25;
  22
  23   // Length of ticks, in pixels, next to y-axis labels.  The x-axis only has
  24   // one set of labels, so it can use lines instead.
  25   var Y_AXIS_TICK_LENGTH = 10;
  26
  27   var GRID_COLOR = '#CCC';
  28   var TEXT_COLOR = '#000';
  29   var BACKGROUND_COLOR = '#FFF';
  30
  31   var MAX_DECIMAL_PRECISION = 2;
  32   /**
  33    * @constructor
  34    */
  35   function TimelineGraphView(divId, canvasId) {
  36     this.scrollbar_ = {position_: 0, range_: 0};
  37
  38     this.graphDiv_ = $(divId);
  39     this.canvas_ = $(canvasId);
  40
  41     // Set the range and scale of the graph.  Times are in milliseconds since
  42     // the Unix epoch.
  43
  44     // All measurements we have must be after this time.
  45     this.startTime_ = 0;
  46     // The current rightmost position of the graph is always at most this.
  47     this.endTime_ = 1;
  48
  49     this.graph_ = null;
  50
  51     // Horizontal scale factor, in terms of milliseconds per pixel.
  52     this.scale_ = 1000;
  53
  54     // Initialize the scrollbar.
  55     this.updateScrollbarRange_(true);
  56   }
  57
  58   TimelineGraphView.prototype = {
  59     setScale: function(scale) {
  60       this.scale_ = scale;
  61     },
  62
  63     // Returns the total length of the graph, in pixels.
  64     getLength_: function() {
  65       var timeRange = this.endTime_ - this.startTime_;
  66       // Math.floor is used to ignore the last partial area, of length less
  67       // than this.scale_.
  68       return Math.floor(timeRange / this.scale_);
  69     },
  70
  71     /**
  72      * Returns true if the graph is scrolled all the way to the right.
  73      */
  74     graphScrolledToRightEdge_: function() {
  75       return this.scrollbar_.position_ == this.scrollbar_.range_;
  76     },
  77
  78     /**
  79      * Update the range of the scrollbar.  If |resetPosition| is true, also
  80      * sets the slider to point at the rightmost position and triggers a
  81      * repaint.
  82      */
  83     updateScrollbarRange_: function(resetPosition) {
  84       var scrollbarRange = this.getLength_() - this.canvas_.width;
  85       if (scrollbarRange < 0)
  86         scrollbarRange = 0;
  87
  88       // If we've decreased the range to less than the current scroll position,
  89       // we need to move the scroll position.
  90       if (this.scrollbar_.position_ > scrollbarRange)
  91         resetPosition = true;
  92
  93       this.scrollbar_.range_ = scrollbarRange;
  94       if (resetPosition) {
  95         this.scrollbar_.position_ = scrollbarRange;
  96         this.repaint();
  97       }
  98     },
  99
 100     /**
 101      * Sets the date range displayed on the graph, switches to the default
 102      * scale factor, and moves the scrollbar all the way to the right.
 103      */
 104     setDateRange: function(startDate, endDate) {
 105       this.startTime_ = startDate.getTime();
 106       this.endTime_ = endDate.getTime();
 107
 108       // Safety check.
 109       if (this.endTime_ <= this.startTime_)
 110         this.startTime_ = this.endTime_ - 1;
 111
 112       this.updateScrollbarRange_(true);
 113     },
 114
 115     /**
 116      * Updates the end time at the right of the graph to be the current time.
 117      * Specifically, updates the scrollbar's range, and if the scrollbar is
 118      * all the way to the right, keeps it all the way to the right.  Otherwise,
 119      * leaves the view as-is and doesn't redraw anything.
 120      */
 121     updateEndDate: function(opt_date) {
 122       this.endTime_ = opt_date || (new Date()).getTime();
 123       this.updateScrollbarRange_(this.graphScrolledToRightEdge_());
 124     },
 125
 126     getStartDate: function() {
 127       return new Date(this.startTime_);
 128     },
 129
 130     /**
 131      * Replaces the current TimelineDataSeries with |dataSeries|.
 132      */
 133     setDataSeries: function(dataSeries) {
 134       // Simply recreates the Graph.
 135       this.graph_ = new Graph();
 136       for (var i = 0; i < dataSeries.length; ++i)
 137         this.graph_.addDataSeries(dataSeries[i]);
 138       this.repaint();
 139     },
 140
 141     /**
 142     * Adds |dataSeries| to the current graph.
 143     */
 144     addDataSeries: function(dataSeries) {
 145       if (!this.graph_)
 146         this.graph_ = new Graph();
 147       this.graph_.addDataSeries(dataSeries);
 148       this.repaint();
 149     },
 150
 151     /**
 152      * Draws the graph on |canvas_|.
 153      */
 154     repaint: function() {
 155       this.repaintTimerRunning_ = false;
 156
 157       var width = this.canvas_.width;
 158       var height = this.canvas_.height;
 159       var context = this.canvas_.getContext('2d');
 160
 161       // Clear the canvas.
 162       context.fillStyle = BACKGROUND_COLOR;
 163       context.fillRect(0, 0, width, height);
 164
 165       // Try to get font height in pixels.  Needed for layout.
 166       var fontHeightString = context.font.match(/([0-9]+)px/)[1];
 167       var fontHeight = parseInt(fontHeightString);
 168
 169       // Safety check, to avoid drawing anything too ugly.
 170       if (fontHeightString.length == 0 || fontHeight <= 0 ||
 171           fontHeight * 4 > height || width < 50) {
 172         return;
 173       }
 174
 175       // Save current transformation matrix so we can restore it later.
 176       context.save();
 177
 178       // The center of an HTML canvas pixel is technically at (0.5, 0.5).  This
 179       // makes near straight lines look bad, due to anti-aliasing.  This
 180       // translation reduces the problem a little.
 181       context.translate(0.5, 0.5);
 182
 183       // Figure out what time values to display.
 184       var position = this.scrollbar_.position_;
 185       // If the entire time range is being displayed, align the right edge of
 186       // the graph to the end of the time range.
 187       if (this.scrollbar_.range_ == 0)
 188         position = this.getLength_() - this.canvas_.width;
 189       var visibleStartTime = this.startTime_ + position * this.scale_;
 190
 191       // Make space at the bottom of the graph for the time labels, and then
 192       // draw the labels.
 193       var textHeight = height;
 194       height -= fontHeight + LABEL_VERTICAL_SPACING;
 195       this.drawTimeLabels(context, width, height, textHeight, visibleStartTime);
 196
 197       // Draw outline of the main graph area.
 198       context.strokeStyle = GRID_COLOR;
 199       context.strokeRect(0, 0, width - 1, height - 1);
 200
 201       if (this.graph_) {
 202         // Layout graph and have them draw their tick marks.
 203         this.graph_.layout(
 204             width, height, fontHeight, visibleStartTime, this.scale_);
 205         this.graph_.drawTicks(context);
 206
 207         // Draw the lines of all graphs, and then draw their labels.
 208         this.graph_.drawLines(context);
 209         this.graph_.drawLabels(context);
 210       }
 211
 212       // Restore original transformation matrix.
 213       context.restore();
 214     },
 215
 216     /**
 217      * Draw time labels below the graph.  Takes in start time as an argument
 218      * since it may not be |startTime_|, when we're displaying the entire
 219      * time range.
 220      */
 221     drawTimeLabels: function(context, width, height, textHeight, startTime) {
 222       // Draw the labels 1 minute apart.
 223       var timeStep = 1000 * 60;
 224
 225       // Find the time for the first label.  This time is a perfect multiple of
 226       // timeStep because of how UTC times work.
 227       var time = Math.ceil(startTime / timeStep) * timeStep;
 228
 229       context.textBaseline = 'bottom';
 230       context.textAlign = 'center';
 231       context.fillStyle = TEXT_COLOR;
 232       context.strokeStyle = GRID_COLOR;
 233
 234       // Draw labels and vertical grid lines.
 235       while (true) {
 236         var x = Math.round((time - startTime) / this.scale_);
 237         if (x >= width)
 238           break;
 239         var text = (new Date(time)).toLocaleTimeString();
 240         context.fillText(text, x, textHeight);
 241         context.beginPath();
 242         context.lineTo(x, 0);
 243         context.lineTo(x, height);
 244         context.stroke();
 245         time += timeStep;
 246       }
 247     },
 248
 249     getDataSeriesCount: function() {
 250       if (this.graph_)
 251         return this.graph_.dataSeries_.length;
 252       return 0;
 253     },
 254
 255     hasDataSeries: function(dataSeries) {
 256       if (this.graph_)
 257         return this.graph_.hasDataSeries(dataSeries);
 258       return false;
 259     },
 260
 261   };
 262
 263   /**
 264    * A Graph is responsible for drawing all the TimelineDataSeries that have
 265    * the same data type.  Graphs are responsible for scaling the values, laying
 266    * out labels, and drawing both labels and lines for its data series.
 267    */
 268   var Graph = (function() {
 269     /**
 270      * @constructor
 271      */
 272     function Graph() {
 273       this.dataSeries_ = [];
 274
 275       // Cached properties of the graph, set in layout.
 276       this.width_ = 0;
 277       this.height_ = 0;
 278       this.fontHeight_ = 0;
 279       this.startTime_ = 0;
 280       this.scale_ = 0;
 281
 282       // The lowest/highest values adjusted by the vertical label step size
 283       // in the displayed range of the graph. Used for scaling and setting
 284       // labels.  Set in layoutLabels.
 285       this.min_ = 0;
 286       this.max_ = 0;
 287
 288       // Cached text of equally spaced labels.  Set in layoutLabels.
 289       this.labels_ = [];
 290     }
 291
 292     /**
 293      * A Label is the label at a particular position along the y-axis.
 294      * @constructor
 295      */
 296     function Label(height, text) {
 297       this.height = height;
 298       this.text = text;
 299     }
 300
 301     Graph.prototype = {
 302       addDataSeries: function(dataSeries) {
 303         this.dataSeries_.push(dataSeries);
 304       },
 305
 306       hasDataSeries: function(dataSeries) {
 307         for (var i = 0; i < this.dataSeries_.length; ++i) {
 308           if (this.dataSeries_[i] == dataSeries)
 309             return true;
 310         }
 311         return false;
 312       },
 313
 314       /**
 315        * Returns a list of all the values that should be displayed for a given
 316        * data series, using the current graph layout.
 317        */
 318       getValues: function(dataSeries) {
 319         if (!dataSeries.isVisible())
 320           return null;
 321         return dataSeries.getValues(this.startTime_, this.scale_, this.width_);
 322       },
 323
 324       /**
 325        * Updates the graph's layout.  In particular, both the max value and
 326        * label positions are updated.  Must be called before calling any of the
 327        * drawing functions.
 328        */
 329       layout: function(width, height, fontHeight, startTime, scale) {
 330         this.width_ = width;
 331         this.height_ = height;
 332         this.fontHeight_ = fontHeight;
 333         this.startTime_ = startTime;
 334         this.scale_ = scale;
 335
 336         // Find largest value.
 337         var max = 0, min = 0;
 338         for (var i = 0; i < this.dataSeries_.length; ++i) {
 339           var values = this.getValues(this.dataSeries_[i]);
 340           if (!values)
 341             continue;
 342           for (var j = 0; j < values.length; ++j) {
 343             if (values[j] > max)
 344               max = values[j];
 345             else if (values[j] < min)
 346               min = values[j];
 347           }
 348         }
 349
 350         this.layoutLabels_(min, max);
 351       },
 352
 353       /**
 354        * Lays out labels and sets |max_|/|min_|, taking the time units into
 355        * consideration.  |maxValue| is the actual maximum value, and
 356        * |max_| will be set to the value of the largest label, which
 357        * will be at least |maxValue|. Similar for |min_|.
 358        */
 359       layoutLabels_: function(minValue, maxValue) {
 360         if (maxValue - minValue < 1024) {
 361           this.layoutLabelsBasic_(minValue, maxValue, MAX_DECIMAL_PRECISION);
 362           return;
 363         }
 364
 365         // Find appropriate units to use.
 366         var units = ['', 'k', 'M', 'G', 'T', 'P'];
 367         // Units to use for labels.  0 is '1', 1 is K, etc.
 368         // We start with 1, and work our way up.
 369         var unit = 1;
 370         minValue /= 1024;
 371         maxValue /= 1024;
 372         while (units[unit + 1] && maxValue - minValue >= 1024) {
 373           minValue /= 1024;
 374           maxValue /= 1024;
 375           ++unit;
 376         }
 377
 378         // Calculate labels.
 379         this.layoutLabelsBasic_(minValue, maxValue, MAX_DECIMAL_PRECISION);
 380
 381         // Append units to labels.
 382         for (var i = 0; i < this.labels_.length; ++i)
 383           this.labels_[i] += ' ' + units[unit];
 384
 385         // Convert |min_|/|max_| back to unit '1'.
 386         this.min_ *= Math.pow(1024, unit);
 387         this.max_ *= Math.pow(1024, unit);
 388       },
 389
 390       /**
 391        * Same as layoutLabels_, but ignores units.  |maxDecimalDigits| is the
 392        * maximum number of decimal digits allowed.  The minimum allowed
 393        * difference between two adjacent labels is 10^-|maxDecimalDigits|.
 394        */
 395       layoutLabelsBasic_: function(minValue, maxValue, maxDecimalDigits) {
 396         this.labels_ = [];
 397         var range = maxValue - minValue;
 398         // No labels if the range is 0.
 399         if (range == 0) {
 400           this.min_ = this.max_ = maxValue;
 401           return;
 402         }
 403
 404         // The maximum number of equally spaced labels allowed.  |fontHeight_|
 405         // is doubled because the top two labels are both drawn in the same
 406         // gap.
 407         var minLabelSpacing = 2 * this.fontHeight_ + LABEL_VERTICAL_SPACING;
 408
 409         // The + 1 is for the top label.
 410         var maxLabels = 1 + this.height_ / minLabelSpacing;
 411         if (maxLabels < 2) {
 412           maxLabels = 2;
 413         } else if (maxLabels > MAX_VERTICAL_LABELS) {
 414           maxLabels = MAX_VERTICAL_LABELS;
 415         }
 416
 417         // Initial try for step size between conecutive labels.
 418         var stepSize = Math.pow(10, -maxDecimalDigits);
 419         // Number of digits to the right of the decimal of |stepSize|.
 420         // Used for formating label strings.
 421         var stepSizeDecimalDigits = maxDecimalDigits;
 422
 423         // Pick a reasonable step size.
 424         while (true) {
 425           // If we use a step size of |stepSize| between labels, we'll need:
 426           //
 427           // Math.ceil(range / stepSize) + 1
 428           //
 429           // labels.  The + 1 is because we need labels at both at 0 and at
 430           // the top of the graph.
 431
 432           // Check if we can use steps of size |stepSize|.
 433           if (Math.ceil(range / stepSize) + 1 <= maxLabels)
 434             break;
 435           // Check |stepSize| * 2.
 436           if (Math.ceil(range / (stepSize * 2)) + 1 <= maxLabels) {
 437             stepSize *= 2;
 438             break;
 439           }
 440           // Check |stepSize| * 5.
 441           if (Math.ceil(range / (stepSize * 5)) + 1 <= maxLabels) {
 442             stepSize *= 5;
 443             break;
 444           }
 445           stepSize *= 10;
 446           if (stepSizeDecimalDigits > 0)
 447             --stepSizeDecimalDigits;
 448         }
 449
 450         // Set the min/max so it's an exact multiple of the chosen step size.
 451         this.max_ = Math.ceil(maxValue / stepSize) * stepSize;
 452         this.min_ = Math.floor(minValue / stepSize) * stepSize;
 453
 454         // Create labels.
 455         for (var label = this.max_; label >= this.min_; label -= stepSize)
 456           this.labels_.push(label.toFixed(stepSizeDecimalDigits));
 457       },
 458
 459       /**
 460        * Draws tick marks for each of the labels in |labels_|.
 461        */
 462       drawTicks: function(context) {
 463         var x1;
 464         var x2;
 465         x1 = this.width_ - 1;
 466         x2 = this.width_ - 1 - Y_AXIS_TICK_LENGTH;
 467
 468         context.fillStyle = GRID_COLOR;
 469         context.beginPath();
 470         for (var i = 1; i < this.labels_.length - 1; ++i) {
 471           // The rounding is needed to avoid ugly 2-pixel wide anti-aliased
 472           // lines.
 473           var y = Math.round(this.height_ * i / (this.labels_.length - 1));
 474           context.moveTo(x1, y);
 475           context.lineTo(x2, y);
 476         }
 477         context.stroke();
 478       },
 479
 480       /**
 481        * Draws a graph line for each of the data series.
 482        */
 483       drawLines: function(context) {
 484         // Factor by which to scale all values to convert them to a number from
 485         // 0 to height - 1.
 486         var scale = 0;
 487         var bottom = this.height_ - 1;
 488         if (this.max_)
 489           scale = bottom / (this.max_ - this.min_);
 490
 491         // Draw in reverse order, so earlier data series are drawn on top of
 492         // subsequent ones.
 493         for (var i = this.dataSeries_.length - 1; i >= 0; --i) {
 494           var values = this.getValues(this.dataSeries_[i]);
 495           if (!values)
 496             continue;
 497           context.strokeStyle = this.dataSeries_[i].getColor();
 498           context.beginPath();
 499           for (var x = 0; x < values.length; ++x) {
 500             // The rounding is needed to avoid ugly 2-pixel wide anti-aliased
 501             // horizontal lines.
 502             context.lineTo(
 503                 x, bottom - Math.round((values[x] - this.min_) * scale));
 504           }
 505           context.stroke();
 506         }
 507       },
 508
 509       /**
 510        * Draw labels in |labels_|.
 511        */
 512       drawLabels: function(context) {
 513         if (this.labels_.length == 0)
 514           return;
 515         var x = this.width_ - LABEL_HORIZONTAL_SPACING;
 516
 517         // Set up the context.
 518         context.fillStyle = TEXT_COLOR;
 519         context.textAlign = 'right';
 520
 521         // Draw top label, which is the only one that appears below its tick
 522         // mark.
 523         context.textBaseline = 'top';
 524         context.fillText(this.labels_[0], x, 0);
 525
 526         // Draw all the other labels.
 527         context.textBaseline = 'bottom';
 528         var step = (this.height_ - 1) / (this.labels_.length - 1);
 529         for (var i = 1; i < this.labels_.length; ++i)
 530           context.fillText(this.labels_[i], x, step * i);
 531       }
 532     };
 533
 534     return Graph;
 535   })();
 536
 537   return TimelineGraphView;
 538 })();