Index: tracing/tracing/value/ui/histogram_span.html |
diff --git a/tracing/tracing/value/ui/histogram_span.html b/tracing/tracing/value/ui/histogram_span.html |
index 3cbf4bfc353ad4384f23fed7cd151425d968d484..45767f460d725b69e8f1da03a43836dbf7d3aeb9 100644 |
--- a/tracing/tracing/value/ui/histogram_span.html |
+++ b/tracing/tracing/value/ui/histogram_span.html |
@@ -55,391 +55,394 @@ found in the LICENSE file. |
<script> |
'use strict'; |
+tr.exportTo('tr.v.ui', function() { |
+ const DEFAULT_BAR_HEIGHT_PX = 5; |
+ const TRUNCATE_BIN_MARGIN = 0.15; |
+ const IGNORE_DELTA_STATISTICS_NAMES = [ |
+ `${tr.v.DELTA}min`, |
+ `%${tr.v.DELTA}min`, |
+ `${tr.v.DELTA}max`, |
+ `%${tr.v.DELTA}max`, |
+ `${tr.v.DELTA}sum`, |
+ `%${tr.v.DELTA}sum`, |
+ `${tr.v.DELTA}count`, |
+ `%${tr.v.DELTA}count`, |
+ ]; |
+ |
+ Polymer({ |
+ is: 'tr-v-ui-histogram-span', |
+ |
+ created() { |
+ this.histogram_ = undefined; |
+ this.referenceHistogram_ = undefined; |
+ this.graphWidth_ = undefined; |
+ this.graphHeight_ = undefined; |
+ this.mouseDownBin_ = undefined; |
+ this.brushedBins_ = []; |
+ this.prevBrushedBins_ = []; |
+ this.canMergeSampleDiagnostics_ = true; |
+ }, |
+ |
+ ready() { |
+ this.$.drag_handle.target = this.$.container; |
+ this.$.drag_handle.addEventListener( |
+ 'drag-handle-resize', this.onResize_.bind(this)); |
+ }, |
+ |
+ attached() { |
+ if (this.histogram_ !== undefined) this.updateContents_(); |
+ }, |
+ |
+ get canMergeSampleDiagnostics() { |
+ return this.canMergeSampleDiagnostics_; |
+ }, |
+ |
+ set canMergeSampleDiagnostics(merge) { |
+ this.canMergeSampleDiagnostics_ = merge; |
+ this.$.merge_sample_diagnostics_container.style.display = ( |
+ merge ? '' : 'none'); |
+ }, |
+ |
+ onResize_(event) { |
+ event.stopPropagation(); |
+ let heightPx = parseInt(this.$.container.style.height); |
+ if (heightPx < this.defaultGraphHeight) { |
+ heightPx = this.defaultGraphHeight; |
+ this.$.container.style.height = this.defaultGraphHeight + 'px'; |
+ } |
+ this.chart_.graphHeight = heightPx - (this.chart_.margin.top + |
+ this.chart_.margin.bottom); |
+ }, |
+ |
+ /** |
+ * Get the width in pixels of the widest bar in the bar chart, not the total |
+ * bar chart svg tag, which includes margins containing axes and legend. |
+ * |
+ * @return {number} |
+ */ |
+ get graphWidth() { |
+ return this.graphWidth_ || this.defaultGraphWidth; |
+ }, |
+ |
+ /** |
+ * Set the width in pixels of the widest bar in the bar chart, not the total |
+ * bar chart svg tag, which includes margins containing axes and legend. |
+ * |
+ * @param {number} width |
+ */ |
+ set graphWidth(width) { |
+ this.graphWidth_ = width; |
+ }, |
+ |
+ /** |
+ * Get the height in pixels of the bars in the bar chart, not the total |
+ * bar chart svg tag, which includes margins containing axes and legend. |
+ * |
+ * @return {number} |
+ */ |
+ get graphHeight() { |
+ return this.graphHeight_ || this.defaultGraphHeight; |
+ }, |
+ |
+ /** |
+ * Set the height in pixels of the bars in the bar chart, not the total |
+ * bar chart svg tag, which includes margins containing axes and legend. |
+ * |
+ * @param {number} height |
+ */ |
+ set graphHeight(height) { |
+ this.graphHeight_ = height; |
+ }, |
+ |
+ /** |
+ * Get the height in pixels of one bar in the bar chart. |
+ * |
+ * @return {number} |
+ */ |
+ get barHeight() { |
+ return this.chart_.barHeight; |
+ }, |
+ |
+ /** |
+ * Set the height in pixels of one bar in the bar chart. |
+ * |
+ * @param {number} px |
+ */ |
+ set barHeight(px) { |
+ this.graphHeight = this.computeChartHeight_(px); |
+ }, |
+ |
+ computeChartHeight_(barHeightPx) { |
+ return (this.chart_.margin.top + |
+ this.chart_.margin.bottom + |
+ (barHeightPx * this.histogram.allBins.length)); |
+ }, |
+ |
+ get defaultGraphHeight() { |
+ if (this.histogram && this.histogram.allBins.length === 1) { |
+ return 150; |
+ } |
+ return this.computeChartHeight_(DEFAULT_BAR_HEIGHT_PX); |
+ }, |
-const DELTA = String.fromCharCode(916); |
- |
-const ABS_DELTA_AVG_NAME = 'abs' + DELTA + 'avg'; |
- |
-const DEFAULT_BAR_HEIGHT_PX = 5; |
- |
-const TRUNCATE_BIN_MARGIN = 0.15; |
- |
-Polymer({ |
- is: 'tr-v-ui-histogram-span', |
- |
- created() { |
- this.histogram_ = undefined; |
- this.referenceHistogram_ = undefined; |
- this.graphWidth_ = undefined; |
- this.graphHeight_ = undefined; |
- this.mouseDownBin_ = undefined; |
- this.brushedBins_ = []; |
- this.prevBrushedBins_ = []; |
- this.canMergeSampleDiagnostics_ = true; |
- }, |
- |
- ready() { |
- this.$.drag_handle.target = this.$.container; |
- this.$.drag_handle.addEventListener( |
- 'drag-handle-resize', this.onResize_.bind(this)); |
- }, |
- |
- attached() { |
- if (this.histogram_ !== undefined) this.updateContents_(); |
- }, |
- |
- get canMergeSampleDiagnostics() { |
- return this.canMergeSampleDiagnostics_; |
- }, |
- |
- set canMergeSampleDiagnostics(merge) { |
- this.canMergeSampleDiagnostics_ = merge; |
- this.$.merge_sample_diagnostics_container.style.display = ( |
- merge ? '' : 'none'); |
- }, |
- |
- onResize_(event) { |
- event.stopPropagation(); |
- let heightPx = parseInt(this.$.container.style.height); |
- if (heightPx < this.defaultGraphHeight) { |
- heightPx = this.defaultGraphHeight; |
- this.$.container.style.height = this.defaultGraphHeight + 'px'; |
- } |
- this.chart_.graphHeight = heightPx - (this.chart_.margin.top + |
- this.chart_.margin.bottom); |
- }, |
- |
- /** |
- * Get the width in pixels of the widest bar in the bar chart, not the total |
- * bar chart svg tag, which includes margins containing axes and legend. |
- * |
- * @return {number} |
- */ |
- get graphWidth() { |
- return this.graphWidth_ || this.defaultGraphWidth; |
- }, |
- |
- /** |
- * Set the width in pixels of the widest bar in the bar chart, not the total |
- * bar chart svg tag, which includes margins containing axes and legend. |
- * |
- * @param {number} width |
- */ |
- set graphWidth(width) { |
- this.graphWidth_ = width; |
- }, |
- |
- /** |
- * Get the height in pixels of the bars in the bar chart, not the total |
- * bar chart svg tag, which includes margins containing axes and legend. |
- * |
- * @return {number} |
- */ |
- get graphHeight() { |
- return this.graphHeight_ || this.defaultGraphHeight; |
- }, |
- |
- /** |
- * Set the height in pixels of the bars in the bar chart, not the total |
- * bar chart svg tag, which includes margins containing axes and legend. |
- * |
- * @param {number} height |
- */ |
- set graphHeight(height) { |
- this.graphHeight_ = height; |
- }, |
- |
- /** |
- * Get the height in pixels of one bar in the bar chart. |
- * |
- * @return {number} |
- */ |
- get barHeight() { |
- return this.chart_.barHeight; |
- }, |
- |
- /** |
- * Set the height in pixels of one bar in the bar chart. |
- * |
- * @param {number} px |
- */ |
- set barHeight(px) { |
- this.graphHeight = this.computeChartHeight_(px); |
- }, |
- |
- computeChartHeight_(barHeightPx) { |
- return (this.chart_.margin.top + |
- this.chart_.margin.bottom + |
- (barHeightPx * this.histogram.allBins.length)); |
- }, |
- |
- get defaultGraphHeight() { |
- if (this.histogram && this.histogram.allBins.length === 1) { |
- return 150; |
- } |
- return this.computeChartHeight_(DEFAULT_BAR_HEIGHT_PX); |
- }, |
- |
- get defaultGraphWidth() { |
- if (this.histogram.allBins.length === 1) { |
- return 100; |
- } |
- return 300; |
- }, |
- |
- get brushedBins() { |
- return this.brushedBins_; |
- }, |
- |
- set brushedBins(bins) { |
- this.brushedBins_ = bins; |
- let brushedBinIndices = new tr.b.Range(); |
- for (let bin of bins) { |
- brushedBinIndices.addValue(this.histogram.allBins.indexOf(bin)); |
- } |
- this.chart_.brushedRange = brushedBinIndices; |
- this.updateDiagnostics_(); |
- }, |
- |
- updateBrushedRange_(binIndex) { |
- let brushedBinIndices = new tr.b.Range(); |
- brushedBinIndices.addValue(tr.b.clamp( |
- this.mouseDownBinIndex_, 0, this.histogram.allBins.length - 1)); |
- brushedBinIndices.addValue(tr.b.clamp( |
- binIndex, 0, this.histogram.allBins.length - 1)); |
- brushedBinIndices.max += 1; |
- this.chart_.brushedRange = brushedBinIndices; |
- |
- this.brushedBins_ = []; |
- for (let i = brushedBinIndices.min; i < brushedBinIndices.max; ++i) { |
- this.brushedBins.push(this.histogram.allBins[i]); |
- } |
- }, |
+ get defaultGraphWidth() { |
+ if (this.histogram.allBins.length === 1) { |
+ return 100; |
+ } |
+ return 300; |
+ }, |
+ |
+ get brushedBins() { |
+ return this.brushedBins_; |
+ }, |
+ |
+ set brushedBins(bins) { |
+ this.brushedBins_ = bins; |
+ let brushedBinIndices = new tr.b.Range(); |
+ for (let bin of bins) { |
+ brushedBinIndices.addValue(this.histogram.allBins.indexOf(bin)); |
+ } |
+ this.chart_.brushedRange = brushedBinIndices; |
+ this.updateDiagnostics_(); |
+ }, |
- onMouseDown_(chartEvent) { |
- chartEvent.stopPropagation(); |
- if (!this.histogram) { |
- return; |
- } |
- this.prevBrushedBins_ = this.brushedBins_; |
- this.mouseDownBinIndex_ = chartEvent.y; |
- this.updateBrushedRange_(chartEvent.y); |
- }, |
- |
- onMouseMove_(chartEvent) { |
- chartEvent.stopPropagation(); |
- if (!this.histogram) { |
- return; |
- } |
- this.updateBrushedRange_(chartEvent.y); |
- }, |
+ updateBrushedRange_(binIndex) { |
+ let brushedBinIndices = new tr.b.Range(); |
+ brushedBinIndices.addValue(tr.b.clamp( |
+ this.mouseDownBinIndex_, 0, this.histogram.allBins.length - 1)); |
+ brushedBinIndices.addValue(tr.b.clamp( |
+ binIndex, 0, this.histogram.allBins.length - 1)); |
+ brushedBinIndices.max += 1; |
+ this.chart_.brushedRange = brushedBinIndices; |
- onMouseUp_(chartEvent) { |
- chartEvent.stopPropagation(); |
- if (!this.histogram) { |
- return; |
- } |
- this.updateBrushedRange_(chartEvent.y); |
- if (this.prevBrushedBins_.length === 1 && |
- this.brushedBins_.length === 1 && |
- this.prevBrushedBins_[0] === this.brushedBins_[0]) { |
this.brushedBins_ = []; |
- this.chart_.brushedRange = new tr.b.Range(); |
- } |
- this.updateDiagnostics_(); |
- this.mouseDownBinIndex_ = undefined; |
- }, |
- |
- updateDiagnostics_() { |
- let maps = []; |
- for (let bin of this.brushedBins) { |
- for (let map of bin.diagnosticMaps) { |
- maps.push(map); |
+ for (let i = brushedBinIndices.min; i < brushedBinIndices.max; ++i) { |
+ this.brushedBins.push(this.histogram.allBins[i]); |
} |
- } |
+ }, |
- if (maps.length === 0) { |
- this.$.sample_diagnostics_container.style.display = 'none'; |
- return; |
- } |
+ onMouseDown_(chartEvent) { |
+ chartEvent.stopPropagation(); |
+ if (!this.histogram) { |
+ return; |
+ } |
+ this.prevBrushedBins_ = this.brushedBins_; |
+ this.mouseDownBinIndex_ = chartEvent.y; |
+ this.updateBrushedRange_(chartEvent.y); |
+ }, |
+ |
+ onMouseMove_(chartEvent) { |
+ chartEvent.stopPropagation(); |
+ if (!this.histogram) { |
+ return; |
+ } |
+ this.updateBrushedRange_(chartEvent.y); |
+ }, |
- if (this.canMergeSampleDiagnostics && |
- this.$.merge_sample_diagnostics.checked) { |
- let merged = new tr.v.d.DiagnosticMap(); |
- for (let map of maps) { |
- merged.addDiagnostics(map); |
+ onMouseUp_(chartEvent) { |
+ chartEvent.stopPropagation(); |
+ if (!this.histogram) { |
+ return; |
+ } |
+ this.updateBrushedRange_(chartEvent.y); |
+ if (this.prevBrushedBins_.length === 1 && |
+ this.brushedBins_.length === 1 && |
+ this.prevBrushedBins_[0] === this.brushedBins_[0]) { |
+ this.brushedBins_ = []; |
+ this.chart_.brushedRange = new tr.b.Range(); |
+ } |
+ this.updateDiagnostics_(); |
+ this.mouseDownBinIndex_ = undefined; |
+ }, |
+ |
+ updateDiagnostics_() { |
+ let maps = []; |
+ for (let bin of this.brushedBins) { |
+ for (let map of bin.diagnosticMaps) { |
+ maps.push(map); |
+ } |
} |
- maps = [merged]; |
- } |
- this.$.sample_diagnostics_container.style.display = 'block'; |
- this.$.sample_diagnostics.diagnosticMaps = maps; |
- }, |
+ if (maps.length === 0) { |
+ this.$.sample_diagnostics_container.style.display = 'none'; |
+ return; |
+ } |
- get histogram() { |
- return this.histogram_; |
- }, |
+ if (this.canMergeSampleDiagnostics && |
+ this.$.merge_sample_diagnostics.checked) { |
+ let merged = new tr.v.d.DiagnosticMap(); |
+ for (let map of maps) { |
+ merged.addDiagnostics(map); |
+ } |
+ maps = [merged]; |
+ } |
- set histogram(histogram) { |
- if (histogram === this.histogram_) return; |
- this.histogram_ = histogram; |
- if (this.isAttached) this.updateContents_(); |
- }, |
+ this.$.sample_diagnostics_container.style.display = 'block'; |
+ this.$.sample_diagnostics.diagnosticMaps = maps; |
+ }, |
- get referenceHistogram() { |
- return this.referenceHistogram_; |
- }, |
+ get histogram() { |
+ return this.histogram_; |
+ }, |
- set referenceHistogram(histogram) { |
- if (histogram === this.referenceHistogram_) { |
- return; |
- } |
- this.referenceHistogram_ = histogram; |
- if (this.histogram) this.updateContents_(); |
- }, |
- |
- getDeltaScalars_(scalarMap) { |
- if (!(this.referenceHistogram instanceof tr.v.Histogram) || |
- (this.histogram.unit !== this.referenceHistogram.unit) || |
- (this.histogram.numValues === 0) && |
- (this.referenceHistogram.numValues === 0)) { |
- return; |
- } |
+ set histogram(histogram) { |
+ if (histogram === this.histogram_) return; |
+ this.histogram_ = histogram; |
+ if (this.isAttached) this.updateContents_(); |
+ }, |
- let mwu = tr.b.Statistics.mwu( |
- this.histogram.sampleValues, this.referenceHistogram.sampleValues); |
+ get referenceHistogram() { |
+ return this.referenceHistogram_; |
+ }, |
- for (let deltaStatName of tr.v.DELTA_STATISTIC_NAMES) { |
- let scalar = this.histogram.getStatisticScalar( |
- deltaStatName, this.referenceHistogram, mwu); |
- if (scalar === undefined) continue; |
- scalarMap.set(deltaStatName, scalar); |
- } |
+ set referenceHistogram(histogram) { |
+ if (histogram === this.referenceHistogram_) { |
+ return; |
+ } |
+ this.referenceHistogram_ = histogram; |
+ if (this.histogram) this.updateContents_(); |
+ }, |
+ |
+ getDeltaScalars_(statNames, scalarMap) { |
+ if (!this.histogram.canCompare(this.referenceHistogram)) return; |
+ |
+ let mwu = tr.b.Statistics.mwu( |
+ this.histogram.sampleValues, this.referenceHistogram.sampleValues); |
+ |
+ for (let deltaStatName of tr.v.Histogram.getDeltaStatisticsNames( |
+ statNames)) { |
+ if (IGNORE_DELTA_STATISTICS_NAMES.includes(deltaStatName)) continue; |
+ let scalar = this.histogram.getStatisticScalar( |
+ deltaStatName, this.referenceHistogram, mwu); |
+ if (scalar === undefined) continue; |
+ scalarMap.set(deltaStatName, scalar); |
+ } |
- if (this.histogram.unit.improvementDirection !== |
- tr.b.ImprovementDirection.DONT_CARE) { |
- this.$.stats.setSignificanceForKey( |
- tr.v.ABS_DELTA_AVG_NAME, mwu.significance); |
- } |
- }, |
- |
- set isYLogScale(logScale) { |
- this.chart_.isYLogScale = logScale; |
- }, |
- |
- updateContents_() { |
- this.$.chart.style.display = 'none'; |
- this.$.drag_handle.style.display = 'none'; |
- this.$.sample_diagnostics_container.style.display = 'none'; |
- this.$.container.style.justifyContent = ''; |
- this.brushedBins_ = []; |
- |
- while (Polymer.dom(this.$.chart).lastChild) { |
- Polymer.dom(this.$.chart).removeChild( |
- Polymer.dom(this.$.chart).lastChild); |
- } |
+ if (this.histogram.unit.improvementDirection !== |
+ tr.b.ImprovementDirection.DONT_CARE) { |
+ this.$.stats.setSignificanceForKey( |
+ `${tr.v.DELTA}avg`, mwu.significance); |
+ } |
+ }, |
- if (!this.histogram) return; |
- this.$.container.style.display = ''; |
+ set isYLogScale(logScale) { |
+ this.chart_.isYLogScale = logScale; |
+ }, |
- let scalarMap = new Map(); |
- this.getDeltaScalars_(scalarMap); |
- for (let [name, scalar] of this.histogram.statisticsScalars) { |
- scalarMap.set(name, scalar); |
- } |
- this.$.stats.scalarMap = scalarMap; |
- |
- if (this.histogram.diagnostics.size > 0) { |
- let diagnosticMap = new tr.v.d.DiagnosticMap(); |
- for (let [key, diagnostic] of this.histogram.diagnostics) { |
- // Hide the 'merged from' and 'merged to' diagnostics, which are |
- // implementation details. |
- if (key !== tr.v.d.MERGED_FROM_DIAGNOSTIC_KEY && |
- key !== tr.v.d.MERGED_TO_DIAGNOSTIC_KEY) { |
- diagnosticMap.set(key, diagnostic); |
+ updateContents_() { |
+ this.$.chart.style.display = 'none'; |
+ this.$.drag_handle.style.display = 'none'; |
+ this.$.sample_diagnostics_container.style.display = 'none'; |
+ this.$.container.style.justifyContent = ''; |
+ this.brushedBins_ = []; |
+ |
+ while (Polymer.dom(this.$.chart).lastChild) { |
+ Polymer.dom(this.$.chart).removeChild( |
+ Polymer.dom(this.$.chart).lastChild); |
+ } |
+ |
+ if (!this.histogram) return; |
+ this.$.container.style.display = ''; |
+ |
+ let scalarMap = new Map(); |
+ this.getDeltaScalars_(this.histogram.statisticsNames, scalarMap); |
+ for (let [name, scalar] of this.histogram.statisticsScalars) { |
+ scalarMap.set(name, scalar); |
+ } |
+ this.$.stats.scalarMap = scalarMap; |
+ |
+ if (this.histogram.diagnostics.size > 0) { |
+ let diagnosticMap = new tr.v.d.DiagnosticMap(); |
+ for (let [key, diagnostic] of this.histogram.diagnostics) { |
+ // Hide the 'merged from' and 'merged to' diagnostics, which are |
+ // implementation details. |
+ if (key !== tr.v.d.MERGED_FROM_DIAGNOSTIC_KEY && |
+ key !== tr.v.d.MERGED_TO_DIAGNOSTIC_KEY) { |
+ diagnosticMap.set(key, diagnostic); |
+ } |
} |
+ this.$.histogram_diagnostics.diagnosticMaps = [diagnosticMap]; |
+ this.$.histogram_diagnostics.style.display = 'block'; |
+ } else { |
+ this.$.histogram_diagnostics.style.display = 'none'; |
} |
- this.$.histogram_diagnostics.diagnosticMaps = [diagnosticMap]; |
- this.$.histogram_diagnostics.style.display = 'block'; |
- } else { |
- this.$.histogram_diagnostics.style.display = 'none'; |
- } |
- if (this.histogram.numValues <= 1) { |
- this.brushedBins_ = this.histogram.allBins; |
- this.updateDiagnostics_(); |
- this.$.container.style.justifyContent = 'flex-end'; |
- return; |
- } |
+ if (this.histogram.numValues <= 1) { |
+ this.brushedBins_ = this.histogram.allBins; |
+ this.updateDiagnostics_(); |
+ this.$.container.style.justifyContent = 'flex-end'; |
+ return; |
+ } |
- this.$.chart.style.display = 'block'; |
- this.$.drag_handle.style.display = 'block'; |
+ this.$.chart.style.display = 'block'; |
+ this.$.drag_handle.style.display = 'block'; |
+ |
+ if (this.histogram.allBins.length === 1) { |
+ this.chart_ = new tr.ui.b.BoxChart(); |
+ Polymer.dom(this.$.chart).appendChild(this.chart_); |
+ this.chart_.graphWidth = this.graphWidth; |
+ this.chart_.graphHeight = this.graphHeight; |
+ this.chart_.hideXAxis = true; |
+ this.chart_.data = [ |
+ { |
+ x: '', |
+ color: 'blue', |
+ percentile_0: this.histogram.running.min, |
+ percentile_25: this.histogram.getApproximatePercentile(0.25), |
+ percentile_50: this.histogram.getApproximatePercentile(0.5), |
+ percentile_75: this.histogram.getApproximatePercentile(0.75), |
+ percentile_100: this.histogram.running.max, |
+ } |
+ ]; |
+ this.brushedBins_ = this.histogram.allBins; |
+ this.updateDiagnostics_(); |
+ return; |
+ } |
- if (this.histogram.allBins.length === 1) { |
- this.chart_ = new tr.ui.b.BoxChart(); |
+ this.chart_ = new tr.ui.b.NameBarChart(); |
Polymer.dom(this.$.chart).appendChild(this.chart_); |
this.chart_.graphWidth = this.graphWidth; |
this.chart_.graphHeight = this.graphHeight; |
- this.chart_.hideXAxis = true; |
- this.chart_.data = [ |
- { |
- x: '', |
- color: 'blue', |
- percentile_0: this.histogram.running.min, |
- percentile_25: this.histogram.getApproximatePercentile(0.25), |
- percentile_50: this.histogram.getApproximatePercentile(0.5), |
- percentile_75: this.histogram.getApproximatePercentile(0.75), |
- percentile_100: this.histogram.running.max, |
+ this.chart_.addEventListener('item-mousedown', |
+ this.onMouseDown_.bind(this)); |
+ this.chart_.addEventListener('item-mousemove', |
+ this.onMouseMove_.bind(this)); |
+ this.chart_.addEventListener('item-mouseup', |
+ this.onMouseUp_.bind(this)); |
+ this.chart_.hideLegend = true; |
+ this.chart_.getDataSeries('y').color = 'blue'; |
+ this.chart_.xAxisLabel = '#'; |
+ this.chart_.brushedRange = new tr.b.Range(); |
+ |
+ let chartData = []; |
+ let binCounts = []; |
+ for (let bin of this.histogram.allBins) { |
+ let x = bin.range.min; |
+ if (x === -Number.MAX_VALUE) { |
+ x = '<' + new tr.b.Scalar( |
+ this.histogram.unit, bin.range.max).toString(); |
+ } else { |
+ x = new tr.b.Scalar(this.histogram.unit, x).toString(); |
} |
- ]; |
- this.brushedBins_ = this.histogram.allBins; |
- this.updateDiagnostics_(); |
- return; |
- } |
+ chartData.push({x: x, y: bin.count}); |
+ binCounts.push(bin.count); |
+ } |
- this.chart_ = new tr.ui.b.NameBarChart(); |
- Polymer.dom(this.$.chart).appendChild(this.chart_); |
- this.chart_.graphWidth = this.graphWidth; |
- this.chart_.graphHeight = this.graphHeight; |
- this.chart_.addEventListener('item-mousedown', |
- this.onMouseDown_.bind(this)); |
- this.chart_.addEventListener('item-mousemove', |
- this.onMouseMove_.bind(this)); |
- this.chart_.addEventListener('item-mouseup', |
- this.onMouseUp_.bind(this)); |
- this.chart_.hideLegend = true; |
- this.chart_.getDataSeries('y').color = 'blue'; |
- this.chart_.xAxisLabel = '#'; |
- this.chart_.brushedRange = new tr.b.Range(); |
- |
- let chartData = []; |
- let binCounts = []; |
- for (let bin of this.histogram.allBins) { |
- let x = bin.range.min; |
- if (x === -Number.MAX_VALUE) { |
- x = '<' + new tr.b.Scalar( |
- this.histogram.unit, bin.range.max).toString(); |
- } else { |
- x = new tr.b.Scalar(this.histogram.unit, x).toString(); |
+ // If the largest 1 or 2 bins are more than twice as large as the next |
+ // largest bin, then set the dataRange max to TRUNCATE_BIN_MARGIN% more |
+ // than that next largest bin. |
+ binCounts.sort((x, y) => y - x); |
+ let dataRange = tr.b.Range.fromExplicitRange(0, binCounts[0]); |
+ if (binCounts[1] > 0 && binCounts[0] > (binCounts[1] * 2)) { |
+ dataRange.max = binCounts[1] * (1 + TRUNCATE_BIN_MARGIN); |
} |
- chartData.push({x: x, y: bin.count}); |
- binCounts.push(bin.count); |
- } |
+ if (binCounts[2] > 0 && binCounts[1] > (binCounts[2] * 2)) { |
+ dataRange.max = binCounts[2] * (1 + TRUNCATE_BIN_MARGIN); |
+ } |
+ this.chart_.overrideDataRange = dataRange; |
- // If the largest 1 or 2 bins are more than twice as large as the next |
- // largest bin, then set the dataRange max to TRUNCATE_BIN_MARGIN% more than |
- // that next largest bin. |
- binCounts.sort((x, y) => y - x); |
- let dataRange = tr.b.Range.fromExplicitRange(0, binCounts[0]); |
- if (binCounts[1] > 0 && binCounts[0] > (binCounts[1] * 2)) { |
- dataRange.max = binCounts[1] * (1 + TRUNCATE_BIN_MARGIN); |
- } |
- if (binCounts[2] > 0 && binCounts[1] > (binCounts[2] * 2)) { |
- dataRange.max = binCounts[2] * (1 + TRUNCATE_BIN_MARGIN); |
+ this.chart_.data = chartData; |
} |
- this.chart_.overrideDataRange = dataRange; |
- |
- this.chart_.data = chartData; |
- } |
+ }); |
}); |
</script> |