trace-viewer/trace_viewer/base/ui/line_chart.html - platform/external/chromium-trace - Git at Google

 <!DOCTYPE html>
 <!--
 Copyright (c) 2014 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.
 -->
 <link rel="import" href="/base/range.html">
 <link rel="import" href="/base/ui/d3.html">
 <link rel="import" href="/base/ui/chart_base.html">
 <link rel="import" href="/base/ui/mouse_tracker.html">
 <link rel="stylesheet" href="/base/ui/line_chart.css">
 <script>
 'use strict';

 tr.exportTo('tr.b.ui', function() {
   var ChartBase = tr.b.ui.ChartBase;
   var getColorOfKey = tr.b.ui.getColorOfKey;

   function getSampleWidth(data, index, leftSide) {
     var leftIndex, rightIndex;
     if (leftSide) {
       leftIndex = Math.max(index - 1, 0);
       rightIndex = index;
     } else {
       leftIndex = index;
       rightIndex = Math.min(index + 1, data.length - 1);
     }
     var leftWidth = data[index].x - data[leftIndex].x;
     var rightWidth = data[rightIndex].x - data[index].x;
     return leftWidth * 0.5 + rightWidth * 0.5;
   }

   /**
    * @constructor
    */
   var LineChart = tr.b.ui.define('line-chart', ChartBase);

   LineChart.prototype = {
     __proto__: ChartBase.prototype,

     decorate: function() {
       ChartBase.prototype.decorate.call(this);
       this.classList.add('line-chart');

       this.brushedRange_ = new tr.b.Range();

       this.xScale_ = d3.scale.linear();
       this.yScale_ = d3.scale.linear();
       d3.select(this.chartAreaElement)
           .append('g')
           .attr('id', 'brushes');
       d3.select(this.chartAreaElement)
           .append('g')
           .attr('id', 'series');

       this.addEventListener('mousedown', this.onMouseDown_.bind(this));
     },

     /**
      * Sets the data array for the object
      *
      * @param {Array} data The data. Each element must be an object, with at
      * least an x property. All other properties become series names in the
      * chart.
      */
     set data(data) {
       if (data.length == 0)
         throw new Error('Data must be nonzero. Pass undefined.');

       var keys;
       if (data !== undefined) {
         var d = data[0];
         if (d.x === undefined)
           throw new Error('Elements must have "x" fields');
         keys = d3.keys(data[0]);
         keys.splice(keys.indexOf('x'), 1);
         if (keys.length == 0)
           throw new Error('Elements must have at least one other field than X');
       } else {
         keys = undefined;
       }
       this.data_ = data;
       this.seriesKeys_ = keys;

       this.updateContents_();
     },

     // Note: range can only be set, not retrieved. It needs to be immutable
     // or else odd data binding effects will result.
     set brushedRange(range) {
       this.brushedRange_.reset();
       this.brushedRange_.addRange(range);
       this.updateContents_();
     },

     computeBrushRangeFromIndices: function(indexA, indexB) {
       var r = new tr.b.Range();
       var leftIndex = Math.min(indexA, indexB);
       var rightIndex = Math.max(indexA, indexB);
       leftIndex = Math.max(0, leftIndex);
       rightIndex = Math.min(this.data_.length - 1, rightIndex);
       r.addValue(this.data_[leftIndex].x -
           getSampleWidth(this.data_, leftIndex, true));
       r.addValue(this.data_[rightIndex].x +
           getSampleWidth(this.data_, rightIndex, false));
       return r;
     },

     getLegendKeys_: function() {
       if (this.seriesKeys_ &&
           this.seriesKeys_.length > 1)
         return this.seriesKeys_.slice();
       return [];
     },

     updateScales_: function(width, height) {
       if (this.data_ === undefined)
         return;

       // X.
       this.xScale_.range([0, width]);
       this.xScale_.domain(d3.extent(this.data_, function(d) { return d.x; }));

       // Y.
       var yRange = new tr.b.Range();
       this.data_.forEach(function(d) {
         this.seriesKeys_.forEach(function(k) {
           yRange.addValue(d[k]);
         });
       }, this);

       this.yScale_.range([height, 0]);
       this.yScale_.domain([yRange.min, yRange.max]);
     },

     updateContents_: function() {
       ChartBase.prototype.updateContents_.call(this);
       if (!this.data_)
         return;

       var chartAreaSel = d3.select(this.chartAreaElement);

       var brushes = this.brushedRange_.isEmpty ? [] : [this.brushedRange_];

       var brushRectsSel = chartAreaSel.select('#brushes')
           .selectAll('rect').data(brushes);
       brushRectsSel.enter()
           .append('rect');
       brushRectsSel.exit().remove();
       brushRectsSel
         .attr('x', function(d) {
             return this.xScale_(d.min);
           }.bind(this))
         .attr('y', 0)
         .attr('width', function(d) {
             return this.xScale_(d.max) - this.xScale_(d.min);
           }.bind(this))
         .attr('height', this.chartAreaSize.height);


       var seriesSel = chartAreaSel.select('#series');
       var pathsSel = seriesSel.selectAll('path').data(this.seriesKeys_);
       pathsSel.enter()
           .append('path')
           .attr('class', 'line')
           .style('stroke', function(key) {
             return getColorOfKey(key);
           })
           .attr('d', function(key) {
             var line = d3.svg.line()
               .x(function(d) { return this.xScale_(d.x); }.bind(this))
               .y(function(d) { return this.yScale_(d[key]); }.bind(this));
             return line(this.data_);
           }.bind(this));
       pathsSel.exit().remove();
     },

     getDataIndexAtClientPoint_: function(clientX, clientY, clipToY) {
       var rect = this.getBoundingClientRect();
       var margin = this.margin;
       var chartAreaSize = this.chartAreaSize;

       var x = clientX - rect.left - margin.left;
       var y = clientY - rect.top - margin.top;

       // Don't check width: let people select the left- and right-most data
       // points.
       if (clipToY) {
         if (y < 0 ||
             y >= chartAreaSize.height)
           return undefined;
       }

       var dataX = this.xScale_.invert(x);

       var index;
       if (this.data_) {
         var bisect = d3.bisector(function(d) { return d.x; }).right;
         index = bisect(this.data_, dataX) - 1;
       }

       return index;
     },

     onMouseDown_: function(e) {
       var index = this.getDataIndexAtClientPoint_(e.clientX, e.clientY, true);

       if (index !== undefined) {
         tr.b.ui.trackMouseMovesUntilMouseUp(
             this.onMouseMove_.bind(this, e.button),
             this.onMouseUp_.bind(this, e.button));
       }
       e.preventDefault();
       e.stopPropagation();

       var event = new Event('item-mousedown');
       event.data = this.data_[index];
       event.index = index;
       event.buttons = e.buttons;
       this.dispatchEvent(event);
     },

     onMouseMove_: function(button, e) {
       var index = this.getDataIndexAtClientPoint_(e.clientX, e.clientY, false);
       if (e.buttons !== undefined) {
         e.preventDefault();
         e.stopPropagation();
       }

       var event = new Event('item-mousemove');
       event.data = this.data_[index];
       event.index = index;
       event.button = button;
       this.dispatchEvent(event);
     },

     onMouseUp_: function(button, e) {
       var index = this.getDataIndexAtClientPoint_(e.clientX, e.clientY, false);
       e.preventDefault();
       e.stopPropagation();

       var event = new Event('item-mouseup');
       event.data = this.data_[index];
       event.index = index;
       event.button = button;
       this.dispatchEvent(event);
     }
   };

   return {
     LineChart: LineChart
   };
 });
 </script>
	<!DOCTYPE html>
	<!--
	Copyright (c) 2014 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.
	-->
	<link rel="import" href="/base/range.html">
	<link rel="import" href="/base/ui/d3.html">
	<link rel="import" href="/base/ui/chart_base.html">
	<link rel="import" href="/base/ui/mouse_tracker.html">
	<link rel="stylesheet" href="/base/ui/line_chart.css">
	<script>
	'use strict';

	tr.exportTo('tr.b.ui', function() {
	var ChartBase = tr.b.ui.ChartBase;
	var getColorOfKey = tr.b.ui.getColorOfKey;

	function getSampleWidth(data, index, leftSide) {
	var leftIndex, rightIndex;
	if (leftSide) {
	leftIndex = Math.max(index - 1, 0);
	rightIndex = index;
	} else {
	leftIndex = index;
	rightIndex = Math.min(index + 1, data.length - 1);
	}
	var leftWidth = data[index].x - data[leftIndex].x;
	var rightWidth = data[rightIndex].x - data[index].x;
	return leftWidth * 0.5 + rightWidth * 0.5;
	}

	/**
	* @constructor
	*/
	var LineChart = tr.b.ui.define('line-chart', ChartBase);

	LineChart.prototype = {
	__proto__: ChartBase.prototype,

	decorate: function() {
	ChartBase.prototype.decorate.call(this);
	this.classList.add('line-chart');

	this.brushedRange_ = new tr.b.Range();

	this.xScale_ = d3.scale.linear();
	this.yScale_ = d3.scale.linear();
	d3.select(this.chartAreaElement)
	.append('g')
	.attr('id', 'brushes');
	d3.select(this.chartAreaElement)
	.append('g')
	.attr('id', 'series');

	this.addEventListener('mousedown', this.onMouseDown_.bind(this));
	},

	/**
	* Sets the data array for the object
	*
	* @param {Array} data The data. Each element must be an object, with at
	* least an x property. All other properties become series names in the
	* chart.
	*/
	set data(data) {
	if (data.length == 0)
	throw new Error('Data must be nonzero. Pass undefined.');

	var keys;
	if (data !== undefined) {
	var d = data[0];
	if (d.x === undefined)
	throw new Error('Elements must have "x" fields');
	keys = d3.keys(data[0]);
	keys.splice(keys.indexOf('x'), 1);
	if (keys.length == 0)
	throw new Error('Elements must have at least one other field than X');
	} else {
	keys = undefined;
	}
	this.data_ = data;
	this.seriesKeys_ = keys;

	this.updateContents_();
	},

	// Note: range can only be set, not retrieved. It needs to be immutable
	// or else odd data binding effects will result.
	set brushedRange(range) {
	this.brushedRange_.reset();
	this.brushedRange_.addRange(range);
	this.updateContents_();
	},

	computeBrushRangeFromIndices: function(indexA, indexB) {
	var r = new tr.b.Range();
	var leftIndex = Math.min(indexA, indexB);
	var rightIndex = Math.max(indexA, indexB);
	leftIndex = Math.max(0, leftIndex);
	rightIndex = Math.min(this.data_.length - 1, rightIndex);
	r.addValue(this.data_[leftIndex].x -
	getSampleWidth(this.data_, leftIndex, true));
	r.addValue(this.data_[rightIndex].x +
	getSampleWidth(this.data_, rightIndex, false));
	return r;
	},

	getLegendKeys_: function() {
	if (this.seriesKeys_ &&
	this.seriesKeys_.length > 1)
	return this.seriesKeys_.slice();
	return [];
	},

	updateScales_: function(width, height) {
	if (this.data_ === undefined)
	return;

	// X.
	this.xScale_.range([0, width]);
	this.xScale_.domain(d3.extent(this.data_, function(d) { return d.x; }));

	// Y.
	var yRange = new tr.b.Range();
	this.data_.forEach(function(d) {
	this.seriesKeys_.forEach(function(k) {
	yRange.addValue(d[k]);
	});
	}, this);

	this.yScale_.range([height, 0]);
	this.yScale_.domain([yRange.min, yRange.max]);
	},

	updateContents_: function() {
	ChartBase.prototype.updateContents_.call(this);
	if (!this.data_)
	return;

	var chartAreaSel = d3.select(this.chartAreaElement);

	var brushes = this.brushedRange_.isEmpty ? [] : [this.brushedRange_];

	var brushRectsSel = chartAreaSel.select('#brushes')
	.selectAll('rect').data(brushes);
	brushRectsSel.enter()
	.append('rect');
	brushRectsSel.exit().remove();
	brushRectsSel
	.attr('x', function(d) {
	return this.xScale_(d.min);
	}.bind(this))
	.attr('y', 0)
	.attr('width', function(d) {
	return this.xScale_(d.max) - this.xScale_(d.min);
	}.bind(this))
	.attr('height', this.chartAreaSize.height);


	var seriesSel = chartAreaSel.select('#series');
	var pathsSel = seriesSel.selectAll('path').data(this.seriesKeys_);
	pathsSel.enter()
	.append('path')
	.attr('class', 'line')
	.style('stroke', function(key) {
	return getColorOfKey(key);
	})
	.attr('d', function(key) {
	var line = d3.svg.line()
	.x(function(d) { return this.xScale_(d.x); }.bind(this))
	.y(function(d) { return this.yScale_(d[key]); }.bind(this));
	return line(this.data_);
	}.bind(this));
	pathsSel.exit().remove();
	},

	getDataIndexAtClientPoint_: function(clientX, clientY, clipToY) {
	var rect = this.getBoundingClientRect();
	var margin = this.margin;
	var chartAreaSize = this.chartAreaSize;

	var x = clientX - rect.left - margin.left;
	var y = clientY - rect.top - margin.top;

	// Don't check width: let people select the left- and right-most data
	// points.
	if (clipToY) {
	if (y < 0 \|\|
	y >= chartAreaSize.height)
	return undefined;
	}

	var dataX = this.xScale_.invert(x);

	var index;
	if (this.data_) {
	var bisect = d3.bisector(function(d) { return d.x; }).right;
	index = bisect(this.data_, dataX) - 1;
	}

	return index;
	},

	onMouseDown_: function(e) {
	var index = this.getDataIndexAtClientPoint_(e.clientX, e.clientY, true);

	if (index !== undefined) {
	tr.b.ui.trackMouseMovesUntilMouseUp(
	this.onMouseMove_.bind(this, e.button),
	this.onMouseUp_.bind(this, e.button));
	}
	e.preventDefault();
	e.stopPropagation();

	var event = new Event('item-mousedown');
	event.data = this.data_[index];
	event.index = index;
	event.buttons = e.buttons;
	this.dispatchEvent(event);
	},

	onMouseMove_: function(button, e) {
	var index = this.getDataIndexAtClientPoint_(e.clientX, e.clientY, false);
	if (e.buttons !== undefined) {
	e.preventDefault();
	e.stopPropagation();
	}

	var event = new Event('item-mousemove');
	event.data = this.data_[index];
	event.index = index;
	event.button = button;
	this.dispatchEvent(event);
	},

	onMouseUp_: function(button, e) {
	var index = this.getDataIndexAtClientPoint_(e.clientX, e.clientY, false);
	e.preventDefault();
	e.stopPropagation();

	var event = new Event('item-mouseup');
	event.data = this.data_[index];
	event.index = index;
	event.button = button;
	this.dispatchEvent(event);
	}
	};

	return {
	LineChart: LineChart
	};
	});
	</script>