// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* A TimelineGraphView displays a timeline graph on a canvas element.
*/
var TimelineGraphView = (function() {
'use strict';
// We inherit from TopMidBottomView.
var superClass = TopMidBottomView;
// Default starting scale factor, in terms of milliseconds per pixel.
var DEFAULT_SCALE = 1000;
// Maximum number of labels placed vertically along the sides of the graph.
var MAX_VERTICAL_LABELS = 6;
// Vertical spacing between labels and between the graph and labels.
var LABEL_VERTICAL_SPACING = 4;
// Horizontal spacing between vertically placed labels and the edges of the
// graph.
var LABEL_HORIZONTAL_SPACING = 3;
// Horizintal spacing between two horitonally placed labels along the bottom
// of the graph.
var LABEL_LABEL_HORIZONTAL_SPACING = 25;
// Length of ticks, in pixels, next to y-axis labels. The x-axis only has
// one set of labels, so it can use lines instead.
var Y_AXIS_TICK_LENGTH = 10;
// The number of units mouse wheel deltas increase for each tick of the
// wheel.
var MOUSE_WHEEL_UNITS_PER_CLICK = 120;
// Amount we zoom for one vertical tick of the mouse wheel, as a ratio.
var MOUSE_WHEEL_ZOOM_RATE = 1.25;
// Amount we scroll for one horizontal tick of the mouse wheel, in pixels.
var MOUSE_WHEEL_SCROLL_RATE = MOUSE_WHEEL_UNITS_PER_CLICK;
// Number of pixels to scroll per pixel the mouse is dragged.
var MOUSE_WHEEL_DRAG_RATE = 3;
var GRID_COLOR = '#CCC';
var TEXT_COLOR = '#000';
var BACKGROUND_COLOR = '#FFF';
// Which side of the canvas y-axis labels should go on, for a given Graph.
// TODO(mmenke): Figure out a reasonable way to handle more than 2 sets
// of labels.
var LabelAlign = {
LEFT: 0,
RIGHT: 1
};
/**
* @constructor
*/
function TimelineGraphView(divId, canvasId, scrollbarId, scrollbarInnerId) {
this.scrollbar_ = new HorizontalScrollbarView(scrollbarId,
scrollbarInnerId,
this.onScroll_.bind(this));
// Call superclass's constructor.
superClass.call(this, null, new DivView(divId), this.scrollbar_);
this.graphDiv_ = $(divId);
this.canvas_ = $(canvasId);
this.canvas_.onmousewheel = this.onMouseWheel_.bind(this);
this.canvas_.onmousedown = this.onMouseDown_.bind(this);
this.canvas_.onmousemove = this.onMouseMove_.bind(this);
this.canvas_.onmouseup = this.onMouseUp_.bind(this);
this.canvas_.onmouseout = this.onMouseUp_.bind(this);
// Used for click and drag scrolling of graph. Drag-zooming not supported,
// for a more stable scrolling experience.
this.isDragging_ = false;
this.dragX_ = 0;
// Set the range and scale of the graph. Times are in milliseconds since
// the Unix epoch.
// All measurements we have must be after this time.
this.startTime_ = 0;
// The current rightmost position of the graph is always at most this.
// We may have some later events. When actively capturing new events, it's
// updated on a timer.
this.endTime_ = 1;
// Current scale, in terms of milliseconds per pixel. Each column of
// pixels represents a point in time |scale_| milliseconds after the
// previous one. We only display times that are of the form
// |startTime_| + K * |scale_| to avoid jittering, and the rightmost
// pixel that we can display has a time <= |endTime_|. Non-integer values
// are allowed.
this.scale_ = DEFAULT_SCALE;
this.graphs_ = [];
// Initialize the scrollbar.
this.updateScrollbarRange_(true);
}
// Smallest allowed scaling factor.
TimelineGraphView.MIN_SCALE = 5;
TimelineGraphView.prototype = {
// Inherit the superclass's methods.
__proto__: superClass.prototype,
setGeometry: function(left, top, width, height) {
superClass.prototype.setGeometry.call(this, left, top, width, height);
// The size of the canvas can only be set by using its |width| and
// |height| properties, which do not take padding into account, so we
// need to use them ourselves.
var style = getComputedStyle(this.canvas_);
var horizontalPadding = parseInt(style.paddingRight) +
parseInt(style.paddingLeft);
var verticalPadding = parseInt(style.paddingTop) +
parseInt(style.paddingBottom);
var canvasWidth =
parseInt(this.graphDiv_.style.width) - horizontalPadding;
// For unknown reasons, there's an extra 3 pixels border between the
// bottom of the canvas and the bottom margin of the enclosing div.
var canvasHeight =
parseInt(this.graphDiv_.style.height) - verticalPadding - 3;
// Protect against degenerates.
if (canvasWidth < 10)
canvasWidth = 10;
if (canvasHeight < 10)
canvasHeight = 10;
this.canvas_.width = canvasWidth;
this.canvas_.height = canvasHeight;
// Use the same font style for the canvas as we use elsewhere.
// Has to be updated every resize.
this.canvas_.getContext('2d').font = getComputedStyle(this.canvas_).font;
this.updateScrollbarRange_(this.graphScrolledToRightEdge_());
this.repaint();
},
show: function(isVisible) {
superClass.prototype.show.call(this, isVisible);
if (isVisible)
this.repaint();
},
// Returns the total length of the graph, in pixels.
getLength_: function() {
var timeRange = this.endTime_ - this.startTime_;
// Math.floor is used to ignore the last partial area, of length less
// than |scale_|.
return Math.floor(timeRange / this.scale_);
},
/**
* Returns true if the graph is scrolled all the way to the right.
*/
graphScrolledToRightEdge_: function() {
return this.scrollbar_.getPosition() == this.scrollbar_.getRange();
},
/**
* Update the range of the scrollbar. If |resetPosition| is true, also
* sets the slider to point at the rightmost position and triggers a
* repaint.
*/
updateScrollbarRange_: function(resetPosition) {
var scrollbarRange = this.getLength_() - this.canvas_.width;
if (scrollbarRange < 0)
scrollbarRange = 0;
// If we've decreased the range to less than the current scroll position,
// we need to move the scroll position.
if (this.scrollbar_.getPosition() > scrollbarRange)
resetPosition = true;
this.scrollbar_.setRange(scrollbarRange);
if (resetPosition) {
this.scrollbar_.setPosition(scrollbarRange);
this.repaint();
}
},
/**
* Sets the date range displayed on the graph, switches to the default
* scale factor, and moves the scrollbar all the way to the right.
*/
setDateRange: function(startDate, endDate) {
this.startTime_ = startDate.getTime();
this.endTime_ = endDate.getTime();
// Safety check.
if (this.endTime_ <= this.startTime_)
this.startTime_ = this.endTime_ - 1;
this.scale_ = DEFAULT_SCALE;
this.updateScrollbarRange_(true);
},
/**
* Updates the end time at the right of the graph to be the current time.
* Specifically, updates the scrollbar's range, and if the scrollbar is
* all the way to the right, keeps it all the way to the right. Otherwise,
* leaves the view as-is and doesn't redraw anything.
*/
updateEndDate: function() {
this.endTime_ = timeutil.getCurrentTime();
this.updateScrollbarRange_(this.graphScrolledToRightEdge_());
},
getStartDate: function() {
return new Date(this.startTime_);
},
/**
* Scrolls the graph horizontally by the specified amount.
*/
horizontalScroll_: function(delta) {
var newPosition = this.scrollbar_.getPosition() + Math.round(delta);
// Make sure the new position is in the right range.
if (newPosition < 0) {
newPosition = 0;
} else if (newPosition > this.scrollbar_.getRange()) {
newPosition = this.scrollbar_.getRange();
}
if (this.scrollbar_.getPosition() == newPosition)
return;
this.scrollbar_.setPosition(newPosition);
this.onScroll_();
},
/**
* Zooms the graph by the specified amount.
*/
zoom_: function(ratio) {
var oldScale = this.scale_;
this.scale_ *= ratio;
if (this.scale_ < TimelineGraphView.MIN_SCALE)
this.scale_ = TimelineGraphView.MIN_SCALE;
if (this.scale_ == oldScale)
return;
// If we were at the end of the range before, remain at the end of the
// range.
if (this.graphScrolledToRightEdge_()) {
this.updateScrollbarRange_(true);
return;
}
// Otherwise, do our best to maintain the old position. We use the
// position at the far right of the graph for consistency.
var oldMaxTime =
oldScale * (this.scrollbar_.getPosition() + this.canvas_.width);
var newMaxTime = Math.round(oldMaxTime / this.scale_);
var newPosition = newMaxTime - this.canvas_.width;
// Update range and scroll position.
this.updateScrollbarRange_(false);
this.horizontalScroll_(newPosition - this.scrollbar_.getPosition());
},
onMouseWheel_: function(event) {
event.preventDefault();
this.horizontalScroll_(
MOUSE_WHEEL_SCROLL_RATE *
-event.wheelDeltaX / MOUSE_WHEEL_UNITS_PER_CLICK);
this.zoom_(Math.pow(MOUSE_WHEEL_ZOOM_RATE,
-event.wheelDeltaY / MOUSE_WHEEL_UNITS_PER_CLICK));
},
onMouseDown_: function(event) {
event.preventDefault();
this.isDragging_ = true;
this.dragX_ = event.clientX;
},
onMouseMove_: function(event) {
if (!this.isDragging_)
return;
event.preventDefault();
this.horizontalScroll_(
MOUSE_WHEEL_DRAG_RATE * (event.clientX - this.dragX_));
this.dragX_ = event.clientX;
},
onMouseUp_: function(event) {
this.isDragging_ = false;
},
onScroll_: function() {
this.repaint();
},
/**
* Replaces the current TimelineDataSeries with |dataSeries|.
*/
setDataSeries: function(dataSeries) {
// Simplest just to recreate the Graphs.
this.graphs_ = [];
this.graphs_[TimelineDataType.BYTES_PER_SECOND] =
new Graph(TimelineDataType.BYTES_PER_SECOND, LabelAlign.RIGHT);
this.graphs_[TimelineDataType.SOURCE_COUNT] =
new Graph(TimelineDataType.SOURCE_COUNT, LabelAlign.LEFT);
for (var i = 0; i < dataSeries.length; ++i)
this.graphs_[dataSeries[i].getDataType()].addDataSeries(dataSeries[i]);
this.repaint();
},
/**
* Draws the graph on |canvas_|.
*/
repaint: function() {
this.repaintTimerRunning_ = false;
if (!this.isVisible())
return;
var width = this.canvas_.width;
var height = this.canvas_.height;
var context = this.canvas_.getContext('2d');
// Clear the canvas.
context.fillStyle = BACKGROUND_COLOR;
context.fillRect(0, 0, width, height);
// Try to get font height in pixels. Needed for layout.
var fontHeightString = context.font.match(/([0-9]+)px/)[1];
var fontHeight = parseInt(fontHeightString);
// Safety check, to avoid drawing anything too ugly.
if (fontHeightString.length == 0 || fontHeight <= 0 ||
fontHeight * 4 > height || width < 50) {
return;
}
// Save current transformation matrix so we can restore it later.
context.save();
// The center of an HTML canvas pixel is technically at (0.5, 0.5). This
// makes near straight lines look bad, due to anti-aliasing. This
// translation reduces the problem a little.
context.translate(0.5, 0.5);
// Figure out what time values to display.
var position = this.scrollbar_.getPosition();
// If the entire time range is being displayed, align the right edge of
// the graph to the end of the time range.
if (this.scrollbar_.getRange() == 0)
position = this.getLength_() - this.canvas_.width;
var visibleStartTime = this.startTime_ + position * this.scale_;
// Make space at the bottom of the graph for the time labels, and then
// draw the labels.
var textHeight = height;
height -= fontHeight + LABEL_VERTICAL_SPACING;
this.drawTimeLabels(context, width, height, textHeight, visibleStartTime);
// Draw outline of the main graph area.
context.strokeStyle = GRID_COLOR;
context.strokeRect(0, 0, width - 1, height - 1);
// Layout graphs and have them draw their tick marks.
for (var i = 0; i < this.graphs_.length; ++i) {
this.graphs_[i].layout(width, height, fontHeight, visibleStartTime,
this.scale_);
this.graphs_[i].drawTicks(context);
}
// Draw the lines of all graphs, and then draw their labels.
for (var i = 0; i < this.graphs_.length; ++i)
this.graphs_[i].drawLines(context);
for (var i = 0; i < this.graphs_.length; ++i)
this.graphs_[i].drawLabels(context);
// Restore original transformation matrix.
context.restore();
},
/**
* Draw time labels below the graph. Takes in start time as an argument
* since it may not be |startTime_|, when we're displaying the entire
* time range.
*/
drawTimeLabels: function(context, width, height, textHeight, startTime) {
// Text for a time string to use in determining how far apart
// to place text labels.
var sampleText = (new Date(startTime)).toLocaleTimeString();
// The desired spacing for text labels.
var targetSpacing = context.measureText(sampleText).width +
LABEL_LABEL_HORIZONTAL_SPACING;
// The allowed time step values between adjacent labels. Anything much
// over a couple minutes isn't terribly realistic, given how much memory
// we use, and how slow a lot of the net-internals code is.
var timeStepValues = [
1000, // 1 second
1000 * 5,
1000 * 30,
1000 * 60, // 1 minute
1000 * 60 * 5,
1000 * 60 * 30,
1000 * 60 * 60, // 1 hour
1000 * 60 * 60 * 5
];
// Find smallest time step value that gives us at least |targetSpacing|,
// if any.
var timeStep = null;
for (var i = 0; i < timeStepValues.length; ++i) {
if (timeStepValues[i] / this.scale_ >= targetSpacing) {
timeStep = timeStepValues[i];
break;
}
}
// If no such value, give up.
if (!timeStep)
return;
// Find the time for the first label. This time is a perfect multiple of
// timeStep because of how UTC times work.
var time = Math.ceil(startTime / timeStep) * timeStep;
context.textBaseline = 'bottom';
context.textAlign = 'center';
context.fillStyle = TEXT_COLOR;
context.strokeStyle = GRID_COLOR;
// Draw labels and vertical grid lines.
while (true) {
var x = Math.round((time - startTime) / this.scale_);
if (x >= width)
break;
var text = (new Date(time)).toLocaleTimeString();
context.fillText(text, x, textHeight);
context.beginPath();
context.lineTo(x, 0);
context.lineTo(x, height);
context.stroke();
time += timeStep;
}
}
};
/**
* A Graph is responsible for drawing all the TimelineDataSeries that have
* the same data type. Graphs are responsible for scaling the values, laying
* out labels, and drawing both labels and lines for its data series.
*/
var Graph = (function() {
/**
* |dataType| is the DataType that will be shared by all its DataSeries.
* |labelAlign| is the LabelAlign value indicating whether the labels
* should be aligned to the right of left of the graph.
* @constructor
*/
function Graph(dataType, labelAlign) {
this.dataType_ = dataType;
this.dataSeries_ = [];
this.labelAlign_ = labelAlign;
// Cached properties of the graph, set in layout.
this.width_ = 0;
this.height_ = 0;
this.fontHeight_ = 0;
this.startTime_ = 0;
this.scale_ = 0;
// At least the highest value in the displayed range of the graph.
// Used for scaling and setting labels. Set in layoutLabels.
this.max_ = 0;
// Cached text of equally spaced labels. Set in layoutLabels.
this.labels_ = [];
}
/**
* A Label is the label at a particular position along the y-axis.
* @constructor
*/
function Label(height, text) {
this.height = height;
this.text = text;
}
Graph.prototype = {
addDataSeries: function(dataSeries) {
this.dataSeries_.push(dataSeries);
},
/**
* Returns a list of all the values that should be displayed for a given
* data series, using the current graph layout.
*/
getValues: function(dataSeries) {
if (!dataSeries.isVisible())
return null;
return dataSeries.getValues(this.startTime_, this.scale_, this.width_);
},
/**
* Updates the graph's layout. In particular, both the max value and
* label positions are updated. Must be called before calling any of the
* drawing functions.
*/
layout: function(width, height, fontHeight, startTime, scale) {
this.width_ = width;
this.height_ = height;
this.fontHeight_ = fontHeight;
this.startTime_ = startTime;
this.scale_ = scale;
// Find largest value.
var max = 0;
for (var i = 0; i < this.dataSeries_.length; ++i) {
var values = this.getValues(this.dataSeries_[i]);
if (!values)
continue;
for (var j = 0; j < values.length; ++j) {
if (values[j] > max)
max = values[j];
}
}
this.layoutLabels_(max);
},
/**
* Lays out labels and sets |max_|, taking the time units into
* consideration. |maxValue| is the actual maximum value, and
* |max_| will be set to the value of the largest label, which
* will be at least |maxValue|.
*/
layoutLabels_: function(maxValue) {
if (this.dataType_ != TimelineDataType.BYTES_PER_SECOND) {
this.layoutLabelsBasic_(maxValue, 0);
return;
}
// Special handling for data rates.
// Find appropriate units to use.
var units = ['B/s', 'kB/s', 'MB/s', 'GB/s', 'TB/s', 'PB/s'];
// Units to use for labels. 0 is bytes, 1 is kilobytes, etc.
// We start with kilobytes, and work our way up.
var unit = 1;
// Update |maxValue| to be in the right units.
maxValue = maxValue / 1024;
while (units[unit + 1] && maxValue >= 999) {
maxValue /= 1024;
++unit;
}
// Calculate labels.
this.layoutLabelsBasic_(maxValue, 1);
// Append units to labels.
for (var i = 0; i < this.labels_.length; ++i)
this.labels_[i] += ' ' + units[unit];
// Convert |max_| back to bytes, so it can be used when scaling values
// for display.
this.max_ *= Math.pow(1024, unit);
},
/**
* Same as layoutLabels_, but ignores units. |maxDecimalDigits| is the
* maximum number of decimal digits allowed. The minimum allowed
* difference between two adjacent labels is 10^-|maxDecimalDigits|.
*/
layoutLabelsBasic_: function(maxValue, maxDecimalDigits) {
this.labels_ = [];
// No labels if |maxValue| is 0.
if (maxValue == 0) {
this.max_ = maxValue;
return;
}
// The maximum number of equally spaced labels allowed. |fontHeight_|
// is doubled because the top two labels are both drawn in the same
// gap.
var minLabelSpacing = 2 * this.fontHeight_ + LABEL_VERTICAL_SPACING;
// The + 1 is for the top label.
var maxLabels = 1 + this.height_ / minLabelSpacing;
if (maxLabels < 2) {
maxLabels = 2;
} else if (maxLabels > MAX_VERTICAL_LABELS) {
maxLabels = MAX_VERTICAL_LABELS;
}
// Initial try for step size between conecutive labels.
var stepSize = Math.pow(10, -maxDecimalDigits);
// Number of digits to the right of the decimal of |stepSize|.
// Used for formating label strings.
var stepSizeDecimalDigits = maxDecimalDigits;
// Pick a reasonable step size.
while (true) {
// If we use a step size of |stepSize| between labels, we'll need:
//
// Math.ceil(maxValue / stepSize) + 1
//
// labels. The + 1 is because we need labels at both at 0 and at
// the top of the graph.
// Check if we can use steps of size |stepSize|.
if (Math.ceil(maxValue / stepSize) + 1 <= maxLabels)
break;
// Check |stepSize| * 2.
if (Math.ceil(maxValue / (stepSize * 2)) + 1 <= maxLabels) {
stepSize *= 2;
break;
}
// Check |stepSize| * 5.
if (Math.ceil(maxValue / (stepSize * 5)) + 1 <= maxLabels) {
stepSize *= 5;
break;
}
stepSize *= 10;
if (stepSizeDecimalDigits > 0)
--stepSizeDecimalDigits;
}
// Set the max so it's an exact multiple of the chosen step size.
this.max_ = Math.ceil(maxValue / stepSize) * stepSize;
// Create labels.
for (var label = this.max_; label >= 0; label -= stepSize)
this.labels_.push(label.toFixed(stepSizeDecimalDigits));
},
/**
* Draws tick marks for each of the labels in |labels_|.
*/
drawTicks: function(context) {
var x1;
var x2;
if (this.labelAlign_ == LabelAlign.RIGHT) {
x1 = this.width_ - 1;
x2 = this.width_ - 1 - Y_AXIS_TICK_LENGTH;
} else {
x1 = 0;
x2 = Y_AXIS_TICK_LENGTH;
}
context.fillStyle = GRID_COLOR;
context.beginPath();
for (var i = 1; i < this.labels_.length - 1; ++i) {
// The rounding is needed to avoid ugly 2-pixel wide anti-aliased
// lines.
var y = Math.round(this.height_ * i / (this.labels_.length - 1));
context.moveTo(x1, y);
context.lineTo(x2, y);
}
context.stroke();
},
/**
* Draws a graph line for each of the data series.
*/
drawLines: function(context) {
// Factor by which to scale all values to convert them to a number from
// 0 to height - 1.
var scale = 0;
var bottom = this.height_ - 1;
if (this.max_)
scale = bottom / this.max_;
// Draw in reverse order, so earlier data series are drawn on top of
// subsequent ones.
for (var i = this.dataSeries_.length - 1; i >= 0; --i) {
var values = this.getValues(this.dataSeries_[i]);
if (!values)
continue;
context.strokeStyle = this.dataSeries_[i].getColor();
context.beginPath();
for (var x = 0; x < values.length; ++x) {
// The rounding is needed to avoid ugly 2-pixel wide anti-aliased
// horizontal lines.
context.lineTo(x, bottom - Math.round(values[x] * scale));
}
context.stroke();
}
},
/**
* Draw labels in |labels_|.
*/
drawLabels: function(context) {
if (this.labels_.length == 0)
return;
var x;
if (this.labelAlign_ == LabelAlign.RIGHT) {
x = this.width_ - LABEL_HORIZONTAL_SPACING;
} else {
// Find the width of the widest label.
var maxTextWidth = 0;
for (var i = 0; i < this.labels_.length; ++i) {
var textWidth = context.measureText(this.labels_[i]).width;
if (maxTextWidth < textWidth)
maxTextWidth = textWidth;
}
x = maxTextWidth + LABEL_HORIZONTAL_SPACING;
}
// Set up the context.
context.fillStyle = TEXT_COLOR;
context.textAlign = 'right';
// Draw top label, which is the only one that appears below its tick
// mark.
context.textBaseline = 'top';
context.fillText(this.labels_[0], x, 0);
// Draw all the other labels.
context.textBaseline = 'bottom';
var step = (this.height_ - 1) / (this.labels_.length - 1);
for (var i = 1; i < this.labels_.length; ++i)
context.fillText(this.labels_[i], x, step * i);
}
};
return Graph;
})();
return TimelineGraphView;
})();