chart_base_2d_brushable_x.html revision 8d2b206a675ec20ea07100c35df34e65ee1e45e8 
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