OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <!-- | 2 <!-- |
3 Copyright (c) 2014 The Chromium Authors. All rights reserved. | 3 Copyright (c) 2014 The Chromium Authors. All rights reserved. |
4 Use of this source code is governed by a BSD-style license that can be | 4 Use of this source code is governed by a BSD-style license that can be |
5 found in the LICENSE file. | 5 found in the LICENSE file. |
6 --> | 6 --> |
7 | 7 |
8 <link rel="import" href="/tracing/base/iteration_helpers.html"> | 8 <link rel="import" href="/tracing/base/iteration_helpers.html"> |
9 <link rel="import" href="/tracing/base/math.html"> | 9 <link rel="import" href="/tracing/base/math/math.html"> |
| 10 <link rel="import" href="/tracing/base/math/range.html"> |
| 11 <link rel="import" href="/tracing/base/math/statistics.html"> |
10 <link rel="import" href="/tracing/base/raf.html"> | 12 <link rel="import" href="/tracing/base/raf.html"> |
11 <link rel="import" href="/tracing/base/range.html"> | |
12 <link rel="import" href="/tracing/base/statistics.html"> | |
13 <link rel="import" href="/tracing/ui/base/chart_base.html"> | 13 <link rel="import" href="/tracing/ui/base/chart_base.html"> |
14 <link rel="import" href="/tracing/ui/base/mouse_tracker.html"> | 14 <link rel="import" href="/tracing/ui/base/mouse_tracker.html"> |
15 | 15 |
16 <style> | 16 <style> |
17 * /deep/ .chart-base-2d.updating-brushing-state #brushes > * { | 17 * /deep/ .chart-base-2d.updating-brushing-state #brushes > * { |
18 fill: rgb(103, 199, 165) | 18 fill: rgb(103, 199, 165) |
19 } | 19 } |
20 | 20 |
21 * /deep/ .chart-base-2d #brushes { | 21 * /deep/ .chart-base-2d #brushes { |
22 fill: rgb(213, 236, 229) | 22 fill: rgb(213, 236, 229) |
(...skipping 23 matching lines...) Expand all Loading... |
46 __proto__: tr.ui.b.ChartBase.prototype, | 46 __proto__: tr.ui.b.ChartBase.prototype, |
47 | 47 |
48 decorate() { | 48 decorate() { |
49 super.decorate(); | 49 super.decorate(); |
50 Polymer.dom(this).classList.add('chart-base-2d'); | 50 Polymer.dom(this).classList.add('chart-base-2d'); |
51 | 51 |
52 this.xScale_ = d3.scale.linear(); | 52 this.xScale_ = d3.scale.linear(); |
53 this.yScale_ = d3.scale.linear(); | 53 this.yScale_ = d3.scale.linear(); |
54 this.isYLogScale_ = false; | 54 this.isYLogScale_ = false; |
55 this.yLogScaleMin_ = undefined; | 55 this.yLogScaleMin_ = undefined; |
56 this.autoDataRange_ = new tr.b.Range(); | 56 this.autoDataRange_ = new tr.b.math.Range(); |
57 this.overrideDataRange_ = undefined; | 57 this.overrideDataRange_ = undefined; |
58 this.hideXAxis_ = false; | 58 this.hideXAxis_ = false; |
59 this.hideYAxis_ = false; | 59 this.hideYAxis_ = false; |
60 this.data_ = []; | 60 this.data_ = []; |
61 this.xAxisLabel_ = ''; | 61 this.xAxisLabel_ = ''; |
62 this.yAxisLabel_ = ''; | 62 this.yAxisLabel_ = ''; |
63 this.textHeightPx_ = 0; | 63 this.textHeightPx_ = 0; |
64 | 64 |
65 d3.select(this.chartAreaElement) | 65 d3.select(this.chartAreaElement) |
66 .append('g') | 66 .append('g') |
(...skipping 92 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
159 leftIndex = Math.max(index - 1, 0); | 159 leftIndex = Math.max(index - 1, 0); |
160 rightIndex = index; | 160 rightIndex = index; |
161 } else { | 161 } else { |
162 leftIndex = index; | 162 leftIndex = index; |
163 rightIndex = Math.min(index + 1, data.length - 1); | 163 rightIndex = Math.min(index + 1, data.length - 1); |
164 } | 164 } |
165 var leftWidth = this.getXForDatum_(data[index], index) - | 165 var leftWidth = this.getXForDatum_(data[index], index) - |
166 this.getXForDatum_(data[leftIndex], leftIndex); | 166 this.getXForDatum_(data[leftIndex], leftIndex); |
167 var rightWidth = this.getXForDatum_(data[rightIndex], rightIndex) - | 167 var rightWidth = this.getXForDatum_(data[rightIndex], rightIndex) - |
168 this.getXForDatum_(data[index], index); | 168 this.getXForDatum_(data[index], index); |
169 return tr.b.Statistics.mean([leftWidth, rightWidth]); | 169 return tr.b.math.Statistics.mean([leftWidth, rightWidth]); |
170 }, | 170 }, |
171 | 171 |
172 updateSeriesKeys_() { | 172 updateSeriesKeys_() { |
173 // Don't clear seriesByKey_; the caller might have put state in it using | 173 // Don't clear seriesByKey_; the caller might have put state in it using |
174 // getDataSeries() before setting data. | 174 // getDataSeries() before setting data. |
175 this.data_.forEach(function(datum) { | 175 this.data_.forEach(function(datum) { |
176 Object.keys(datum).forEach(function(key) { | 176 Object.keys(datum).forEach(function(key) { |
177 if (this.isDatumFieldSeries_(key)) | 177 if (this.isDatumFieldSeries_(key)) |
178 this.getDataSeries(key); | 178 this.getDataSeries(key); |
179 }, this); | 179 }, this); |
(...skipping 138 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
318 } | 318 } |
319 | 319 |
320 // Choose the closest power of 10, rounded down, as the smallest tick | 320 // Choose the closest power of 10, rounded down, as the smallest tick |
321 // to display. | 321 // to display. |
322 this.yLogScaleMin_ = undefined; | 322 this.yLogScaleMin_ = undefined; |
323 if (this.autoDataRange_.min !== undefined) { | 323 if (this.autoDataRange_.min !== undefined) { |
324 var minValue = this.autoDataRange_.min; | 324 var minValue = this.autoDataRange_.min; |
325 if (minValue === 0) | 325 if (minValue === 0) |
326 minValue = 1; | 326 minValue = 1; |
327 | 327 |
328 var onePowerLess = tr.b.lesserPower(minValue / 10); | 328 var onePowerLess = tr.b.math.lesserPower(minValue / 10); |
329 this.yLogScaleMin_ = onePowerLess; | 329 this.yLogScaleMin_ = onePowerLess; |
330 } | 330 } |
331 }, | 331 }, |
332 | 332 |
333 updateYAxis_(yAxis) { | 333 updateYAxis_(yAxis) { |
334 yAxis.selectAll('*').remove(); | 334 yAxis.selectAll('*').remove(); |
335 yAxis[0][0].style.opacity = 0; | 335 yAxis[0][0].style.opacity = 0; |
336 if (this.hideYAxis) return; | 336 if (this.hideYAxis) return; |
337 | 337 |
338 this.drawYAxis_(yAxis); | 338 this.drawYAxis_(yAxis); |
(...skipping 123 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
462 getChartPointAtClientPoint_(clientPoint) { | 462 getChartPointAtClientPoint_(clientPoint) { |
463 var rect = this.getBoundingClientRect(); | 463 var rect = this.getBoundingClientRect(); |
464 return { | 464 return { |
465 x: clientPoint.x - rect.left - this.margin.left, | 465 x: clientPoint.x - rect.left - this.margin.left, |
466 y: clientPoint.y - rect.top - this.margin.top | 466 y: clientPoint.y - rect.top - this.margin.top |
467 }; | 467 }; |
468 }, | 468 }, |
469 | 469 |
470 getDataPointAtChartPoint_(chartPoint) { | 470 getDataPointAtChartPoint_(chartPoint) { |
471 return { | 471 return { |
472 x: tr.b.clamp(this.xScale_.invert(chartPoint.x), | 472 x: tr.b.math.clamp(this.xScale_.invert(chartPoint.x), |
473 this.xScale_.domain()[0], this.xScale_.domain()[1]), | 473 this.xScale_.domain()[0], this.xScale_.domain()[1]), |
474 y: tr.b.clamp(this.yScale_.invert(chartPoint.y), | 474 y: tr.b.math.clamp(this.yScale_.invert(chartPoint.y), |
475 this.yScale_.domain()[0], this.yScale_.domain()[1]) | 475 this.yScale_.domain()[0], this.yScale_.domain()[1]) |
476 }; | 476 }; |
477 }, | 477 }, |
478 | 478 |
479 getDataPointAtClientPoint_(clientX, clientY) { | 479 getDataPointAtClientPoint_(clientX, clientY) { |
480 var chartPoint = this.getChartPointAtClientPoint_( | 480 var chartPoint = this.getChartPointAtClientPoint_( |
481 {x: clientX, y: clientY}); | 481 {x: clientX, y: clientY}); |
482 return this.getDataPointAtChartPoint_(chartPoint); | 482 return this.getDataPointAtChartPoint_(chartPoint); |
483 }, | 483 }, |
484 | 484 |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
522 this.dispatchEvent(dataEvent); | 522 this.dispatchEvent(dataEvent); |
523 Polymer.dom(this).classList.remove('updating-brushing-state'); | 523 Polymer.dom(this).classList.remove('updating-brushing-state'); |
524 } | 524 } |
525 }; | 525 }; |
526 | 526 |
527 return { | 527 return { |
528 ChartBase2D, | 528 ChartBase2D, |
529 }; | 529 }; |
530 }); | 530 }); |
531 </script> | 531 </script> |
OLD | NEW |