1<!DOCTYPE html> 2<!-- 3Copyright (c) 2014 The Chromium Authors. All rights reserved. 4Use of this source code is governed by a BSD-style license that can be 5found in the LICENSE file. 6--> 7 8<link rel="import" href="/tracing/ui/base/chart_base_2d.html"> 9 10<script> 11'use strict'; 12 13tr.exportTo('tr.ui.b', function() { 14 var ChartBase2D = tr.ui.b.ChartBase2D; 15 var ChartBase2DBrushX = tr.ui.b.define('chart-base-2d-brush-1d', ChartBase2D); 16 17 ChartBase2DBrushX.prototype = { 18 __proto__: ChartBase2D.prototype, 19 20 decorate: function() { 21 ChartBase2D.prototype.decorate.call(this); 22 this.brushedRange_ = new tr.b.Range(); 23 }, 24 25 // Note: range can only be set, not retrieved. It needs to be immutable 26 // or else odd data binding effects will result. 27 set brushedRange(range) { 28 this.brushedRange_.reset(); 29 this.brushedRange_.addRange(range); 30 this.updateContents_(); 31 }, 32 33 computeBrushRangeFromIndices: function(indexA, indexB) { 34 indexA = tr.b.clamp(indexA, 0, this.data_.length - 1); 35 indexB = tr.b.clamp(indexB, 0, this.data_.length - 1); 36 var leftIndex = Math.min(indexA, indexB); 37 var rightIndex = Math.max(indexA, indexB); 38 39 var r = new tr.b.Range(); 40 r.addValue(this.getXForDatum_(this.data_[leftIndex], leftIndex) - 41 this.getSampleWidth_(this.data_, leftIndex, true)); 42 r.addValue(this.getXForDatum_(this.data_[rightIndex], rightIndex) + 43 this.getSampleWidth_(this.data_, rightIndex, false)); 44 return r; 45 }, 46 47 getDataIndex_: function(dataX) { 48 if (!this.data_) 49 return undefined; 50 var bisect = d3.bisector(this.getXForDatum_.bind(this)).right; 51 return bisect(this.data_, dataX) - 1; 52 }, 53 54 prepareDataEvent_: function(mouseEvent, dataEvent) { 55 ChartBase2D.prototype.prepareDataEvent_.call( 56 this, mouseEvent, dataEvent); 57 dataEvent.index = this.getDataIndex_(dataEvent.x); 58 if (dataEvent.index !== undefined) 59 dataEvent.data = this.data_[dataEvent.index]; 60 }, 61 62 updateBrushContents_: function(brushSel) { 63 brushSel.selectAll('*').remove(); 64 var brushes = this.brushedRange_.isEmpty ? [] : [this.brushedRange_]; 65 var brushRectsSel = brushSel.selectAll('rect').data(brushes); 66 brushRectsSel.enter().append('rect'); 67 brushRectsSel.exit().remove(); 68 brushRectsSel 69 .attr('x', function(d) { 70 return this.xScale_(d.min); 71 }.bind(this)) 72 .attr('y', 0) 73 .attr('width', function(d) { 74 return this.xScale_(d.max) - this.xScale_(d.min); 75 }.bind(this)) 76 .attr('height', this.chartAreaSize.height); 77 } 78 }; 79 80 return { 81 ChartBase2DBrushX: ChartBase2DBrushX 82 }; 83}); 84</script> 85