| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <!-- | 2 <!-- |
| 3 Copyright (c) 2015 The Chromium Authors. All rights reserved. | 3 Copyright (c) 2015 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/statistics.html"> | 8 <link rel="import" href="/tracing/base/statistics.html"> |
| 9 <link rel="import" href="/tracing/ui/base/box_chart.html"> | 9 <link rel="import" href="/tracing/ui/base/box_chart.html"> |
| 10 <link rel="import" href="/tracing/ui/base/drag_handle.html"> | 10 <link rel="import" href="/tracing/ui/base/drag_handle.html"> |
| (...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 48 <input type="checkbox" id="merge_sample_diagnostics" checked on-change="
updateDiagnostics_"> | 48 <input type="checkbox" id="merge_sample_diagnostics" checked on-change="
updateDiagnostics_"> |
| 49 <label for="merge_sample_diagnostics">Merge Sample Diagnostics</label> | 49 <label for="merge_sample_diagnostics">Merge Sample Diagnostics</label> |
| 50 </div> | 50 </div> |
| 51 <tr-v-ui-diagnostic-map-table id="sample_diagnostics"></tr-v-ui-diagnostic
-map-table> | 51 <tr-v-ui-diagnostic-map-table id="sample_diagnostics"></tr-v-ui-diagnostic
-map-table> |
| 52 </div> | 52 </div> |
| 53 </template> | 53 </template> |
| 54 </dom-module> | 54 </dom-module> |
| 55 | 55 |
| 56 <script> | 56 <script> |
| 57 'use strict'; | 57 'use strict'; |
| 58 | 58 tr.exportTo('tr.v.ui', function() { |
| 59 const DELTA = String.fromCharCode(916); | 59 const DEFAULT_BAR_HEIGHT_PX = 5; |
| 60 | 60 const TRUNCATE_BIN_MARGIN = 0.15; |
| 61 const ABS_DELTA_AVG_NAME = 'abs' + DELTA + 'avg'; | 61 const IGNORE_DELTA_STATISTICS_NAMES = [ |
| 62 | 62 `${tr.v.DELTA}min`, |
| 63 const DEFAULT_BAR_HEIGHT_PX = 5; | 63 `%${tr.v.DELTA}min`, |
| 64 | 64 `${tr.v.DELTA}max`, |
| 65 const TRUNCATE_BIN_MARGIN = 0.15; | 65 `%${tr.v.DELTA}max`, |
| 66 | 66 `${tr.v.DELTA}sum`, |
| 67 Polymer({ | 67 `%${tr.v.DELTA}sum`, |
| 68 is: 'tr-v-ui-histogram-span', | 68 `${tr.v.DELTA}count`, |
| 69 | 69 `%${tr.v.DELTA}count`, |
| 70 created() { | 70 ]; |
| 71 this.histogram_ = undefined; | 71 |
| 72 this.referenceHistogram_ = undefined; | 72 Polymer({ |
| 73 this.graphWidth_ = undefined; | 73 is: 'tr-v-ui-histogram-span', |
| 74 this.graphHeight_ = undefined; | 74 |
| 75 this.mouseDownBin_ = undefined; | 75 created() { |
| 76 this.brushedBins_ = []; | 76 this.histogram_ = undefined; |
| 77 this.prevBrushedBins_ = []; | 77 this.referenceHistogram_ = undefined; |
| 78 this.canMergeSampleDiagnostics_ = true; | 78 this.graphWidth_ = undefined; |
| 79 }, | 79 this.graphHeight_ = undefined; |
| 80 | 80 this.mouseDownBin_ = undefined; |
| 81 ready() { | |
| 82 this.$.drag_handle.target = this.$.container; | |
| 83 this.$.drag_handle.addEventListener( | |
| 84 'drag-handle-resize', this.onResize_.bind(this)); | |
| 85 }, | |
| 86 | |
| 87 attached() { | |
| 88 if (this.histogram_ !== undefined) this.updateContents_(); | |
| 89 }, | |
| 90 | |
| 91 get canMergeSampleDiagnostics() { | |
| 92 return this.canMergeSampleDiagnostics_; | |
| 93 }, | |
| 94 | |
| 95 set canMergeSampleDiagnostics(merge) { | |
| 96 this.canMergeSampleDiagnostics_ = merge; | |
| 97 this.$.merge_sample_diagnostics_container.style.display = ( | |
| 98 merge ? '' : 'none'); | |
| 99 }, | |
| 100 | |
| 101 onResize_(event) { | |
| 102 event.stopPropagation(); | |
| 103 let heightPx = parseInt(this.$.container.style.height); | |
| 104 if (heightPx < this.defaultGraphHeight) { | |
| 105 heightPx = this.defaultGraphHeight; | |
| 106 this.$.container.style.height = this.defaultGraphHeight + 'px'; | |
| 107 } | |
| 108 this.chart_.graphHeight = heightPx - (this.chart_.margin.top + | |
| 109 this.chart_.margin.bottom); | |
| 110 }, | |
| 111 | |
| 112 /** | |
| 113 * Get the width in pixels of the widest bar in the bar chart, not the total | |
| 114 * bar chart svg tag, which includes margins containing axes and legend. | |
| 115 * | |
| 116 * @return {number} | |
| 117 */ | |
| 118 get graphWidth() { | |
| 119 return this.graphWidth_ || this.defaultGraphWidth; | |
| 120 }, | |
| 121 | |
| 122 /** | |
| 123 * Set the width in pixels of the widest bar in the bar chart, not the total | |
| 124 * bar chart svg tag, which includes margins containing axes and legend. | |
| 125 * | |
| 126 * @param {number} width | |
| 127 */ | |
| 128 set graphWidth(width) { | |
| 129 this.graphWidth_ = width; | |
| 130 }, | |
| 131 | |
| 132 /** | |
| 133 * Get the height in pixels of the bars in the bar chart, not the total | |
| 134 * bar chart svg tag, which includes margins containing axes and legend. | |
| 135 * | |
| 136 * @return {number} | |
| 137 */ | |
| 138 get graphHeight() { | |
| 139 return this.graphHeight_ || this.defaultGraphHeight; | |
| 140 }, | |
| 141 | |
| 142 /** | |
| 143 * Set the height in pixels of the bars in the bar chart, not the total | |
| 144 * bar chart svg tag, which includes margins containing axes and legend. | |
| 145 * | |
| 146 * @param {number} height | |
| 147 */ | |
| 148 set graphHeight(height) { | |
| 149 this.graphHeight_ = height; | |
| 150 }, | |
| 151 | |
| 152 /** | |
| 153 * Get the height in pixels of one bar in the bar chart. | |
| 154 * | |
| 155 * @return {number} | |
| 156 */ | |
| 157 get barHeight() { | |
| 158 return this.chart_.barHeight; | |
| 159 }, | |
| 160 | |
| 161 /** | |
| 162 * Set the height in pixels of one bar in the bar chart. | |
| 163 * | |
| 164 * @param {number} px | |
| 165 */ | |
| 166 set barHeight(px) { | |
| 167 this.graphHeight = this.computeChartHeight_(px); | |
| 168 }, | |
| 169 | |
| 170 computeChartHeight_(barHeightPx) { | |
| 171 return (this.chart_.margin.top + | |
| 172 this.chart_.margin.bottom + | |
| 173 (barHeightPx * this.histogram.allBins.length)); | |
| 174 }, | |
| 175 | |
| 176 get defaultGraphHeight() { | |
| 177 if (this.histogram && this.histogram.allBins.length === 1) { | |
| 178 return 150; | |
| 179 } | |
| 180 return this.computeChartHeight_(DEFAULT_BAR_HEIGHT_PX); | |
| 181 }, | |
| 182 | |
| 183 get defaultGraphWidth() { | |
| 184 if (this.histogram.allBins.length === 1) { | |
| 185 return 100; | |
| 186 } | |
| 187 return 300; | |
| 188 }, | |
| 189 | |
| 190 get brushedBins() { | |
| 191 return this.brushedBins_; | |
| 192 }, | |
| 193 | |
| 194 set brushedBins(bins) { | |
| 195 this.brushedBins_ = bins; | |
| 196 let brushedBinIndices = new tr.b.Range(); | |
| 197 for (let bin of bins) { | |
| 198 brushedBinIndices.addValue(this.histogram.allBins.indexOf(bin)); | |
| 199 } | |
| 200 this.chart_.brushedRange = brushedBinIndices; | |
| 201 this.updateDiagnostics_(); | |
| 202 }, | |
| 203 | |
| 204 updateBrushedRange_(binIndex) { | |
| 205 let brushedBinIndices = new tr.b.Range(); | |
| 206 brushedBinIndices.addValue(tr.b.clamp( | |
| 207 this.mouseDownBinIndex_, 0, this.histogram.allBins.length - 1)); | |
| 208 brushedBinIndices.addValue(tr.b.clamp( | |
| 209 binIndex, 0, this.histogram.allBins.length - 1)); | |
| 210 brushedBinIndices.max += 1; | |
| 211 this.chart_.brushedRange = brushedBinIndices; | |
| 212 | |
| 213 this.brushedBins_ = []; | |
| 214 for (let i = brushedBinIndices.min; i < brushedBinIndices.max; ++i) { | |
| 215 this.brushedBins.push(this.histogram.allBins[i]); | |
| 216 } | |
| 217 }, | |
| 218 | |
| 219 onMouseDown_(chartEvent) { | |
| 220 chartEvent.stopPropagation(); | |
| 221 if (!this.histogram) { | |
| 222 return; | |
| 223 } | |
| 224 this.prevBrushedBins_ = this.brushedBins_; | |
| 225 this.mouseDownBinIndex_ = chartEvent.y; | |
| 226 this.updateBrushedRange_(chartEvent.y); | |
| 227 }, | |
| 228 | |
| 229 onMouseMove_(chartEvent) { | |
| 230 chartEvent.stopPropagation(); | |
| 231 if (!this.histogram) { | |
| 232 return; | |
| 233 } | |
| 234 this.updateBrushedRange_(chartEvent.y); | |
| 235 }, | |
| 236 | |
| 237 onMouseUp_(chartEvent) { | |
| 238 chartEvent.stopPropagation(); | |
| 239 if (!this.histogram) { | |
| 240 return; | |
| 241 } | |
| 242 this.updateBrushedRange_(chartEvent.y); | |
| 243 if (this.prevBrushedBins_.length === 1 && | |
| 244 this.brushedBins_.length === 1 && | |
| 245 this.prevBrushedBins_[0] === this.brushedBins_[0]) { | |
| 246 this.brushedBins_ = []; | 81 this.brushedBins_ = []; |
| 247 this.chart_.brushedRange = new tr.b.Range(); | 82 this.prevBrushedBins_ = []; |
| 248 } | 83 this.canMergeSampleDiagnostics_ = true; |
| 249 this.updateDiagnostics_(); | 84 }, |
| 250 this.mouseDownBinIndex_ = undefined; | 85 |
| 251 }, | 86 ready() { |
| 252 | 87 this.$.drag_handle.target = this.$.container; |
| 253 updateDiagnostics_() { | 88 this.$.drag_handle.addEventListener( |
| 254 let maps = []; | 89 'drag-handle-resize', this.onResize_.bind(this)); |
| 255 for (let bin of this.brushedBins) { | 90 }, |
| 256 for (let map of bin.diagnosticMaps) { | 91 |
| 257 maps.push(map); | 92 attached() { |
| 258 } | 93 if (this.histogram_ !== undefined) this.updateContents_(); |
| 259 } | 94 }, |
| 260 | 95 |
| 261 if (maps.length === 0) { | 96 get canMergeSampleDiagnostics() { |
| 97 return this.canMergeSampleDiagnostics_; |
| 98 }, |
| 99 |
| 100 set canMergeSampleDiagnostics(merge) { |
| 101 this.canMergeSampleDiagnostics_ = merge; |
| 102 this.$.merge_sample_diagnostics_container.style.display = ( |
| 103 merge ? '' : 'none'); |
| 104 }, |
| 105 |
| 106 onResize_(event) { |
| 107 event.stopPropagation(); |
| 108 let heightPx = parseInt(this.$.container.style.height); |
| 109 if (heightPx < this.defaultGraphHeight) { |
| 110 heightPx = this.defaultGraphHeight; |
| 111 this.$.container.style.height = this.defaultGraphHeight + 'px'; |
| 112 } |
| 113 this.chart_.graphHeight = heightPx - (this.chart_.margin.top + |
| 114 this.chart_.margin.bottom); |
| 115 }, |
| 116 |
| 117 /** |
| 118 * Get the width in pixels of the widest bar in the bar chart, not the total |
| 119 * bar chart svg tag, which includes margins containing axes and legend. |
| 120 * |
| 121 * @return {number} |
| 122 */ |
| 123 get graphWidth() { |
| 124 return this.graphWidth_ || this.defaultGraphWidth; |
| 125 }, |
| 126 |
| 127 /** |
| 128 * Set the width in pixels of the widest bar in the bar chart, not the total |
| 129 * bar chart svg tag, which includes margins containing axes and legend. |
| 130 * |
| 131 * @param {number} width |
| 132 */ |
| 133 set graphWidth(width) { |
| 134 this.graphWidth_ = width; |
| 135 }, |
| 136 |
| 137 /** |
| 138 * Get the height in pixels of the bars in the bar chart, not the total |
| 139 * bar chart svg tag, which includes margins containing axes and legend. |
| 140 * |
| 141 * @return {number} |
| 142 */ |
| 143 get graphHeight() { |
| 144 return this.graphHeight_ || this.defaultGraphHeight; |
| 145 }, |
| 146 |
| 147 /** |
| 148 * Set the height in pixels of the bars in the bar chart, not the total |
| 149 * bar chart svg tag, which includes margins containing axes and legend. |
| 150 * |
| 151 * @param {number} height |
| 152 */ |
| 153 set graphHeight(height) { |
| 154 this.graphHeight_ = height; |
| 155 }, |
| 156 |
| 157 /** |
| 158 * Get the height in pixels of one bar in the bar chart. |
| 159 * |
| 160 * @return {number} |
| 161 */ |
| 162 get barHeight() { |
| 163 return this.chart_.barHeight; |
| 164 }, |
| 165 |
| 166 /** |
| 167 * Set the height in pixels of one bar in the bar chart. |
| 168 * |
| 169 * @param {number} px |
| 170 */ |
| 171 set barHeight(px) { |
| 172 this.graphHeight = this.computeChartHeight_(px); |
| 173 }, |
| 174 |
| 175 computeChartHeight_(barHeightPx) { |
| 176 return (this.chart_.margin.top + |
| 177 this.chart_.margin.bottom + |
| 178 (barHeightPx * this.histogram.allBins.length)); |
| 179 }, |
| 180 |
| 181 get defaultGraphHeight() { |
| 182 if (this.histogram && this.histogram.allBins.length === 1) { |
| 183 return 150; |
| 184 } |
| 185 return this.computeChartHeight_(DEFAULT_BAR_HEIGHT_PX); |
| 186 }, |
| 187 |
| 188 get defaultGraphWidth() { |
| 189 if (this.histogram.allBins.length === 1) { |
| 190 return 100; |
| 191 } |
| 192 return 300; |
| 193 }, |
| 194 |
| 195 get brushedBins() { |
| 196 return this.brushedBins_; |
| 197 }, |
| 198 |
| 199 set brushedBins(bins) { |
| 200 this.brushedBins_ = bins; |
| 201 let brushedBinIndices = new tr.b.Range(); |
| 202 for (let bin of bins) { |
| 203 brushedBinIndices.addValue(this.histogram.allBins.indexOf(bin)); |
| 204 } |
| 205 this.chart_.brushedRange = brushedBinIndices; |
| 206 this.updateDiagnostics_(); |
| 207 }, |
| 208 |
| 209 updateBrushedRange_(binIndex) { |
| 210 let brushedBinIndices = new tr.b.Range(); |
| 211 brushedBinIndices.addValue(tr.b.clamp( |
| 212 this.mouseDownBinIndex_, 0, this.histogram.allBins.length - 1)); |
| 213 brushedBinIndices.addValue(tr.b.clamp( |
| 214 binIndex, 0, this.histogram.allBins.length - 1)); |
| 215 brushedBinIndices.max += 1; |
| 216 this.chart_.brushedRange = brushedBinIndices; |
| 217 |
| 218 this.brushedBins_ = []; |
| 219 for (let i = brushedBinIndices.min; i < brushedBinIndices.max; ++i) { |
| 220 this.brushedBins.push(this.histogram.allBins[i]); |
| 221 } |
| 222 }, |
| 223 |
| 224 onMouseDown_(chartEvent) { |
| 225 chartEvent.stopPropagation(); |
| 226 if (!this.histogram) { |
| 227 return; |
| 228 } |
| 229 this.prevBrushedBins_ = this.brushedBins_; |
| 230 this.mouseDownBinIndex_ = chartEvent.y; |
| 231 this.updateBrushedRange_(chartEvent.y); |
| 232 }, |
| 233 |
| 234 onMouseMove_(chartEvent) { |
| 235 chartEvent.stopPropagation(); |
| 236 if (!this.histogram) { |
| 237 return; |
| 238 } |
| 239 this.updateBrushedRange_(chartEvent.y); |
| 240 }, |
| 241 |
| 242 onMouseUp_(chartEvent) { |
| 243 chartEvent.stopPropagation(); |
| 244 if (!this.histogram) { |
| 245 return; |
| 246 } |
| 247 this.updateBrushedRange_(chartEvent.y); |
| 248 if (this.prevBrushedBins_.length === 1 && |
| 249 this.brushedBins_.length === 1 && |
| 250 this.prevBrushedBins_[0] === this.brushedBins_[0]) { |
| 251 this.brushedBins_ = []; |
| 252 this.chart_.brushedRange = new tr.b.Range(); |
| 253 } |
| 254 this.updateDiagnostics_(); |
| 255 this.mouseDownBinIndex_ = undefined; |
| 256 }, |
| 257 |
| 258 updateDiagnostics_() { |
| 259 let maps = []; |
| 260 for (let bin of this.brushedBins) { |
| 261 for (let map of bin.diagnosticMaps) { |
| 262 maps.push(map); |
| 263 } |
| 264 } |
| 265 |
| 266 if (maps.length === 0) { |
| 267 this.$.sample_diagnostics_container.style.display = 'none'; |
| 268 return; |
| 269 } |
| 270 |
| 271 if (this.canMergeSampleDiagnostics && |
| 272 this.$.merge_sample_diagnostics.checked) { |
| 273 let merged = new tr.v.d.DiagnosticMap(); |
| 274 for (let map of maps) { |
| 275 merged.addDiagnostics(map); |
| 276 } |
| 277 maps = [merged]; |
| 278 } |
| 279 |
| 280 this.$.sample_diagnostics_container.style.display = 'block'; |
| 281 this.$.sample_diagnostics.diagnosticMaps = maps; |
| 282 }, |
| 283 |
| 284 get histogram() { |
| 285 return this.histogram_; |
| 286 }, |
| 287 |
| 288 set histogram(histogram) { |
| 289 if (histogram === this.histogram_) return; |
| 290 this.histogram_ = histogram; |
| 291 if (this.isAttached) this.updateContents_(); |
| 292 }, |
| 293 |
| 294 get referenceHistogram() { |
| 295 return this.referenceHistogram_; |
| 296 }, |
| 297 |
| 298 set referenceHistogram(histogram) { |
| 299 if (histogram === this.referenceHistogram_) { |
| 300 return; |
| 301 } |
| 302 this.referenceHistogram_ = histogram; |
| 303 if (this.histogram) this.updateContents_(); |
| 304 }, |
| 305 |
| 306 getDeltaScalars_(statNames, scalarMap) { |
| 307 if (!this.histogram.canCompare(this.referenceHistogram)) return; |
| 308 |
| 309 let mwu = tr.b.Statistics.mwu( |
| 310 this.histogram.sampleValues, this.referenceHistogram.sampleValues); |
| 311 |
| 312 for (let deltaStatName of tr.v.Histogram.getDeltaStatisticsNames( |
| 313 statNames)) { |
| 314 if (IGNORE_DELTA_STATISTICS_NAMES.includes(deltaStatName)) continue; |
| 315 let scalar = this.histogram.getStatisticScalar( |
| 316 deltaStatName, this.referenceHistogram, mwu); |
| 317 if (scalar === undefined) continue; |
| 318 scalarMap.set(deltaStatName, scalar); |
| 319 } |
| 320 |
| 321 if (this.histogram.unit.improvementDirection !== |
| 322 tr.b.ImprovementDirection.DONT_CARE) { |
| 323 this.$.stats.setSignificanceForKey( |
| 324 `${tr.v.DELTA}avg`, mwu.significance); |
| 325 } |
| 326 }, |
| 327 |
| 328 set isYLogScale(logScale) { |
| 329 this.chart_.isYLogScale = logScale; |
| 330 }, |
| 331 |
| 332 updateContents_() { |
| 333 this.$.chart.style.display = 'none'; |
| 334 this.$.drag_handle.style.display = 'none'; |
| 262 this.$.sample_diagnostics_container.style.display = 'none'; | 335 this.$.sample_diagnostics_container.style.display = 'none'; |
| 263 return; | 336 this.$.container.style.justifyContent = ''; |
| 264 } | 337 this.brushedBins_ = []; |
| 265 | 338 |
| 266 if (this.canMergeSampleDiagnostics && | 339 while (Polymer.dom(this.$.chart).lastChild) { |
| 267 this.$.merge_sample_diagnostics.checked) { | 340 Polymer.dom(this.$.chart).removeChild( |
| 268 let merged = new tr.v.d.DiagnosticMap(); | 341 Polymer.dom(this.$.chart).lastChild); |
| 269 for (let map of maps) { | 342 } |
| 270 merged.addDiagnostics(map); | 343 |
| 271 } | 344 if (!this.histogram) return; |
| 272 maps = [merged]; | 345 this.$.container.style.display = ''; |
| 273 } | 346 |
| 274 | 347 let scalarMap = new Map(); |
| 275 this.$.sample_diagnostics_container.style.display = 'block'; | 348 this.getDeltaScalars_(this.histogram.statisticsNames, scalarMap); |
| 276 this.$.sample_diagnostics.diagnosticMaps = maps; | 349 for (let [name, scalar] of this.histogram.statisticsScalars) { |
| 277 }, | 350 scalarMap.set(name, scalar); |
| 278 | 351 } |
| 279 get histogram() { | 352 this.$.stats.scalarMap = scalarMap; |
| 280 return this.histogram_; | 353 |
| 281 }, | 354 if (this.histogram.diagnostics.size > 0) { |
| 282 | 355 let diagnosticMap = new tr.v.d.DiagnosticMap(); |
| 283 set histogram(histogram) { | 356 for (let [key, diagnostic] of this.histogram.diagnostics) { |
| 284 if (histogram === this.histogram_) return; | 357 // Hide the 'merged from' and 'merged to' diagnostics, which are |
| 285 this.histogram_ = histogram; | 358 // implementation details. |
| 286 if (this.isAttached) this.updateContents_(); | 359 if (key !== tr.v.d.MERGED_FROM_DIAGNOSTIC_KEY && |
| 287 }, | 360 key !== tr.v.d.MERGED_TO_DIAGNOSTIC_KEY) { |
| 288 | 361 diagnosticMap.set(key, diagnostic); |
| 289 get referenceHistogram() { | 362 } |
| 290 return this.referenceHistogram_; | |
| 291 }, | |
| 292 | |
| 293 set referenceHistogram(histogram) { | |
| 294 if (histogram === this.referenceHistogram_) { | |
| 295 return; | |
| 296 } | |
| 297 this.referenceHistogram_ = histogram; | |
| 298 if (this.histogram) this.updateContents_(); | |
| 299 }, | |
| 300 | |
| 301 getDeltaScalars_(scalarMap) { | |
| 302 if (!(this.referenceHistogram instanceof tr.v.Histogram) || | |
| 303 (this.histogram.unit !== this.referenceHistogram.unit) || | |
| 304 (this.histogram.numValues === 0) && | |
| 305 (this.referenceHistogram.numValues === 0)) { | |
| 306 return; | |
| 307 } | |
| 308 | |
| 309 let mwu = tr.b.Statistics.mwu( | |
| 310 this.histogram.sampleValues, this.referenceHistogram.sampleValues); | |
| 311 | |
| 312 for (let deltaStatName of tr.v.DELTA_STATISTIC_NAMES) { | |
| 313 let scalar = this.histogram.getStatisticScalar( | |
| 314 deltaStatName, this.referenceHistogram, mwu); | |
| 315 if (scalar === undefined) continue; | |
| 316 scalarMap.set(deltaStatName, scalar); | |
| 317 } | |
| 318 | |
| 319 if (this.histogram.unit.improvementDirection !== | |
| 320 tr.b.ImprovementDirection.DONT_CARE) { | |
| 321 this.$.stats.setSignificanceForKey( | |
| 322 tr.v.ABS_DELTA_AVG_NAME, mwu.significance); | |
| 323 } | |
| 324 }, | |
| 325 | |
| 326 set isYLogScale(logScale) { | |
| 327 this.chart_.isYLogScale = logScale; | |
| 328 }, | |
| 329 | |
| 330 updateContents_() { | |
| 331 this.$.chart.style.display = 'none'; | |
| 332 this.$.drag_handle.style.display = 'none'; | |
| 333 this.$.sample_diagnostics_container.style.display = 'none'; | |
| 334 this.$.container.style.justifyContent = ''; | |
| 335 this.brushedBins_ = []; | |
| 336 | |
| 337 while (Polymer.dom(this.$.chart).lastChild) { | |
| 338 Polymer.dom(this.$.chart).removeChild( | |
| 339 Polymer.dom(this.$.chart).lastChild); | |
| 340 } | |
| 341 | |
| 342 if (!this.histogram) return; | |
| 343 this.$.container.style.display = ''; | |
| 344 | |
| 345 let scalarMap = new Map(); | |
| 346 this.getDeltaScalars_(scalarMap); | |
| 347 for (let [name, scalar] of this.histogram.statisticsScalars) { | |
| 348 scalarMap.set(name, scalar); | |
| 349 } | |
| 350 this.$.stats.scalarMap = scalarMap; | |
| 351 | |
| 352 if (this.histogram.diagnostics.size > 0) { | |
| 353 let diagnosticMap = new tr.v.d.DiagnosticMap(); | |
| 354 for (let [key, diagnostic] of this.histogram.diagnostics) { | |
| 355 // Hide the 'merged from' and 'merged to' diagnostics, which are | |
| 356 // implementation details. | |
| 357 if (key !== tr.v.d.MERGED_FROM_DIAGNOSTIC_KEY && | |
| 358 key !== tr.v.d.MERGED_TO_DIAGNOSTIC_KEY) { | |
| 359 diagnosticMap.set(key, diagnostic); | |
| 360 } | 363 } |
| 361 } | 364 this.$.histogram_diagnostics.diagnosticMaps = [diagnosticMap]; |
| 362 this.$.histogram_diagnostics.diagnosticMaps = [diagnosticMap]; | 365 this.$.histogram_diagnostics.style.display = 'block'; |
| 363 this.$.histogram_diagnostics.style.display = 'block'; | 366 } else { |
| 364 } else { | 367 this.$.histogram_diagnostics.style.display = 'none'; |
| 365 this.$.histogram_diagnostics.style.display = 'none'; | 368 } |
| 366 } | 369 |
| 367 | 370 if (this.histogram.numValues <= 1) { |
| 368 if (this.histogram.numValues <= 1) { | 371 this.brushedBins_ = this.histogram.allBins; |
| 369 this.brushedBins_ = this.histogram.allBins; | 372 this.updateDiagnostics_(); |
| 370 this.updateDiagnostics_(); | 373 this.$.container.style.justifyContent = 'flex-end'; |
| 371 this.$.container.style.justifyContent = 'flex-end'; | 374 return; |
| 372 return; | 375 } |
| 373 } | 376 |
| 374 | 377 this.$.chart.style.display = 'block'; |
| 375 this.$.chart.style.display = 'block'; | 378 this.$.drag_handle.style.display = 'block'; |
| 376 this.$.drag_handle.style.display = 'block'; | 379 |
| 377 | 380 if (this.histogram.allBins.length === 1) { |
| 378 if (this.histogram.allBins.length === 1) { | 381 this.chart_ = new tr.ui.b.BoxChart(); |
| 379 this.chart_ = new tr.ui.b.BoxChart(); | 382 Polymer.dom(this.$.chart).appendChild(this.chart_); |
| 383 this.chart_.graphWidth = this.graphWidth; |
| 384 this.chart_.graphHeight = this.graphHeight; |
| 385 this.chart_.hideXAxis = true; |
| 386 this.chart_.data = [ |
| 387 { |
| 388 x: '', |
| 389 color: 'blue', |
| 390 percentile_0: this.histogram.running.min, |
| 391 percentile_25: this.histogram.getApproximatePercentile(0.25), |
| 392 percentile_50: this.histogram.getApproximatePercentile(0.5), |
| 393 percentile_75: this.histogram.getApproximatePercentile(0.75), |
| 394 percentile_100: this.histogram.running.max, |
| 395 } |
| 396 ]; |
| 397 this.brushedBins_ = this.histogram.allBins; |
| 398 this.updateDiagnostics_(); |
| 399 return; |
| 400 } |
| 401 |
| 402 this.chart_ = new tr.ui.b.NameBarChart(); |
| 380 Polymer.dom(this.$.chart).appendChild(this.chart_); | 403 Polymer.dom(this.$.chart).appendChild(this.chart_); |
| 381 this.chart_.graphWidth = this.graphWidth; | 404 this.chart_.graphWidth = this.graphWidth; |
| 382 this.chart_.graphHeight = this.graphHeight; | 405 this.chart_.graphHeight = this.graphHeight; |
| 383 this.chart_.hideXAxis = true; | 406 this.chart_.addEventListener('item-mousedown', |
| 384 this.chart_.data = [ | 407 this.onMouseDown_.bind(this)); |
| 385 { | 408 this.chart_.addEventListener('item-mousemove', |
| 386 x: '', | 409 this.onMouseMove_.bind(this)); |
| 387 color: 'blue', | 410 this.chart_.addEventListener('item-mouseup', |
| 388 percentile_0: this.histogram.running.min, | 411 this.onMouseUp_.bind(this)); |
| 389 percentile_25: this.histogram.getApproximatePercentile(0.25), | 412 this.chart_.hideLegend = true; |
| 390 percentile_50: this.histogram.getApproximatePercentile(0.5), | 413 this.chart_.getDataSeries('y').color = 'blue'; |
| 391 percentile_75: this.histogram.getApproximatePercentile(0.75), | 414 this.chart_.xAxisLabel = '#'; |
| 392 percentile_100: this.histogram.running.max, | 415 this.chart_.brushedRange = new tr.b.Range(); |
| 416 |
| 417 let chartData = []; |
| 418 let binCounts = []; |
| 419 for (let bin of this.histogram.allBins) { |
| 420 let x = bin.range.min; |
| 421 if (x === -Number.MAX_VALUE) { |
| 422 x = '<' + new tr.b.Scalar( |
| 423 this.histogram.unit, bin.range.max).toString(); |
| 424 } else { |
| 425 x = new tr.b.Scalar(this.histogram.unit, x).toString(); |
| 393 } | 426 } |
| 394 ]; | 427 chartData.push({x: x, y: bin.count}); |
| 395 this.brushedBins_ = this.histogram.allBins; | 428 binCounts.push(bin.count); |
| 396 this.updateDiagnostics_(); | 429 } |
| 397 return; | 430 |
| 431 // If the largest 1 or 2 bins are more than twice as large as the next |
| 432 // largest bin, then set the dataRange max to TRUNCATE_BIN_MARGIN% more |
| 433 // than that next largest bin. |
| 434 binCounts.sort((x, y) => y - x); |
| 435 let dataRange = tr.b.Range.fromExplicitRange(0, binCounts[0]); |
| 436 if (binCounts[1] > 0 && binCounts[0] > (binCounts[1] * 2)) { |
| 437 dataRange.max = binCounts[1] * (1 + TRUNCATE_BIN_MARGIN); |
| 438 } |
| 439 if (binCounts[2] > 0 && binCounts[1] > (binCounts[2] * 2)) { |
| 440 dataRange.max = binCounts[2] * (1 + TRUNCATE_BIN_MARGIN); |
| 441 } |
| 442 this.chart_.overrideDataRange = dataRange; |
| 443 |
| 444 this.chart_.data = chartData; |
| 398 } | 445 } |
| 399 | 446 }); |
| 400 this.chart_ = new tr.ui.b.NameBarChart(); | |
| 401 Polymer.dom(this.$.chart).appendChild(this.chart_); | |
| 402 this.chart_.graphWidth = this.graphWidth; | |
| 403 this.chart_.graphHeight = this.graphHeight; | |
| 404 this.chart_.addEventListener('item-mousedown', | |
| 405 this.onMouseDown_.bind(this)); | |
| 406 this.chart_.addEventListener('item-mousemove', | |
| 407 this.onMouseMove_.bind(this)); | |
| 408 this.chart_.addEventListener('item-mouseup', | |
| 409 this.onMouseUp_.bind(this)); | |
| 410 this.chart_.hideLegend = true; | |
| 411 this.chart_.getDataSeries('y').color = 'blue'; | |
| 412 this.chart_.xAxisLabel = '#'; | |
| 413 this.chart_.brushedRange = new tr.b.Range(); | |
| 414 | |
| 415 let chartData = []; | |
| 416 let binCounts = []; | |
| 417 for (let bin of this.histogram.allBins) { | |
| 418 let x = bin.range.min; | |
| 419 if (x === -Number.MAX_VALUE) { | |
| 420 x = '<' + new tr.b.Scalar( | |
| 421 this.histogram.unit, bin.range.max).toString(); | |
| 422 } else { | |
| 423 x = new tr.b.Scalar(this.histogram.unit, x).toString(); | |
| 424 } | |
| 425 chartData.push({x: x, y: bin.count}); | |
| 426 binCounts.push(bin.count); | |
| 427 } | |
| 428 | |
| 429 // If the largest 1 or 2 bins are more than twice as large as the next | |
| 430 // largest bin, then set the dataRange max to TRUNCATE_BIN_MARGIN% more than | |
| 431 // that next largest bin. | |
| 432 binCounts.sort((x, y) => y - x); | |
| 433 let dataRange = tr.b.Range.fromExplicitRange(0, binCounts[0]); | |
| 434 if (binCounts[1] > 0 && binCounts[0] > (binCounts[1] * 2)) { | |
| 435 dataRange.max = binCounts[1] * (1 + TRUNCATE_BIN_MARGIN); | |
| 436 } | |
| 437 if (binCounts[2] > 0 && binCounts[1] > (binCounts[2] * 2)) { | |
| 438 dataRange.max = binCounts[2] * (1 + TRUNCATE_BIN_MARGIN); | |
| 439 } | |
| 440 this.chart_.overrideDataRange = dataRange; | |
| 441 | |
| 442 this.chart_.data = chartData; | |
| 443 } | |
| 444 }); | 447 }); |
| 445 </script> | 448 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2742163002:
Generalize delta statistics in Histogram. (Closed)
