Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(23)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: tracing/tracing/value/ui/breakdown_span.html

Issue 3001953002: Linkify sample Breakdowns via RelatedHistogramBreakdowns. (Closed)
Patch Set: Created 3 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | tracing/tracing/value/ui/breakdown_span_test.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <!-- 2 <!--
3 Copyright 2016 The Chromium Authors. All rights reserved. 3 Copyright 2016 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/fixed_color_scheme.html"> 8 <link rel="import" href="/tracing/base/fixed_color_scheme.html">
9 <link rel="import" href="/tracing/extras/chrome/chrome_user_friendly_category_dr iver.html"> 9 <link rel="import" href="/tracing/extras/chrome/chrome_user_friendly_category_dr iver.html">
10 <link rel="import" href="/tracing/metrics/all_fixed_color_schemes.html"> 10 <link rel="import" href="/tracing/metrics/all_fixed_color_schemes.html">
(...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after
78 get displayElement() { 78 get displayElement() {
79 return this.displayElement_; 79 return this.displayElement_;
80 } 80 }
81 81
82 get stringPercent() { 82 get stringPercent() {
83 return '100%'; 83 return '100%';
84 } 84 }
85 } 85 }
86 86
87 class BreakdownTableRow { 87 class BreakdownTableRow {
88 constructor(name, value, unit, color) { 88 constructor(name, value, related, unit, color) {
89 this.name_ = name; 89 this.name_ = name;
90 this.value = value; 90 this.value = value;
91 this.related = related;
91 this.unit = unit; 92 this.unit = unit;
92 93
93 if (!this.isHistogram && typeof value !== 'number') { 94 this.histogram = related;
95 if (value instanceof tr.v.Histogram) {
96 this.histogram = value;
97 this.unit = value.unit;
98 }
99
100 if (!this.histogram && typeof value !== 'number') {
94 throw new Error('unsupported value ' + value); 101 throw new Error('unsupported value ' + value);
95 } 102 }
96 103
97 this.tableSum_ = undefined; 104 this.tableSum_ = undefined;
98 this.keySpan_ = undefined; 105 this.keySpan_ = undefined;
99 106
100 this.color_ = color; 107 this.color_ = color;
101 const hsl = this.color.toHSL(); 108 const hsl = this.color.toHSL();
102 hsl.l *= 0.85; 109 hsl.l *= 0.85;
103 this.highlightedColor_ = tr.b.Color.fromHSL(hsl); 110 this.highlightedColor_ = tr.b.Color.fromHSL(hsl);
104 111
105 if (this.isHistogram) { 112 if (this.unit) {
106 this.displayElement_ = tr.v.ui.createScalarSpan(this.numberValue, { 113 this.displayElement_ = tr.v.ui.createScalarSpan(this.numberValue, {
107 unit: this.value.unit, 114 unit: this.unit,
108 }); 115 });
109 } else { 116 } else {
110 this.displayElement_ = tr.ui.b.createSpan({ 117 this.displayElement_ = tr.ui.b.createSpan({
111 textContent: this.stringValue, 118 textContent: this.stringValue,
112 }); 119 });
113 } 120 }
114 } 121 }
115 122
116 get isHistogram() { 123 get isHistogram() {
117 return this.value instanceof tr.v.Histogram; 124 return this.value instanceof tr.v.Histogram;
118 } 125 }
119 126
120 get name() { 127 get name() {
121 return this.name_; 128 return this.name_;
122 } 129 }
123 130
124 get color() { 131 get color() {
125 return this.color_; 132 return this.color_;
126 } 133 }
127 134
128 get highlightedColor() { 135 get highlightedColor() {
129 return this.highlightedColor_; 136 return this.highlightedColor_;
130 } 137 }
131 138
132 get keySpan() { 139 get keySpan() {
133 if (this.keySpan_ === undefined) { 140 if (this.keySpan_ === undefined) {
134 if (this.isHistogram) { 141 if (this.histogram) {
135 this.keySpan_ = document.createElement('tr-ui-a-analysis-link'); 142 this.keySpan_ = document.createElement('tr-ui-a-analysis-link');
136 this.keySpan_.setSelectionAndContent([this.value.name], this.name); 143 this.keySpan_.setSelectionAndContent(
144 [this.histogram.name], this.name);
137 this.keySpan_.color = this.color; 145 this.keySpan_.color = this.color;
138 this.keySpan_.title = this.value.name; 146 this.keySpan_.title = this.histogram.name;
139 } else { 147 } else {
140 this.keySpan_ = document.createElement('span'); 148 this.keySpan_ = document.createElement('span');
141 this.keySpan_.innerText = this.name; 149 this.keySpan_.innerText = this.name;
142 this.keySpan_.style.color = this.color; 150 this.keySpan_.style.color = this.color;
143 } 151 }
144 } 152 }
145 return this.keySpan_; 153 return this.keySpan_;
146 } 154 }
147 155
148 /** 156 /**
(...skipping 128 matching lines...) Expand 10 before | Expand all | Expand 10 after
277 cat = cat[cat.length - 1]; 285 cat = cat[cat.length - 1];
278 return tr.e.chrome.ChromeUserFriendlyCategoryDriver.getColor(cat); 286 return tr.e.chrome.ChromeUserFriendlyCategoryDriver.getColor(cat);
279 }; 287 };
280 } else if (this.diagnostic.colorScheme !== undefined) { 288 } else if (this.diagnostic.colorScheme !== undefined) {
281 colorScheme = (name) => tr.b.FixedColorSchemeRegistry.lookUp( 289 colorScheme = (name) => tr.b.FixedColorSchemeRegistry.lookUp(
282 this.diagnostic.colorScheme).getColor(name); 290 this.diagnostic.colorScheme).getColor(name);
283 } else { 291 } else {
284 colorScheme = (name) => DEFAULT_COLOR_SCHEME.colorForKey(name); 292 colorScheme = (name) => DEFAULT_COLOR_SCHEME.colorForKey(name);
285 } 293 }
286 294
295 let related = new Map();
296 if (this.diagnostic_ instanceof tr.v.d.Breakdown && this.histogram_) {
297 related = this.histogram_.diagnostics.get(this.name_);
298 }
299
287 const tableRows = []; 300 const tableRows = [];
288 let tableSum = 0; 301 let tableSum = 0;
289 const histogramNames = []; 302 const histogramNames = [];
290 for (const [name, value] of this.diagnostic) { 303 for (const [name, value] of this.diagnostic) {
291 const row = new BreakdownTableRow( 304 const row = new BreakdownTableRow(
292 name, value, this.chart_.unit, colorScheme(name)); 305 name,
306 value,
307 related.get(name),
308 this.chart_.unit,
309 colorScheme(name));
293 tableRows.push(row); 310 tableRows.push(row);
294 if (row.numberValue !== undefined) tableSum += row.numberValue; 311 if (row.numberValue !== undefined) tableSum += row.numberValue;
295 if (row.isHistogram) { 312 if (row.histogram) {
296 histogramNames.push(value.name); 313 histogramNames.push(row.histogram.name);
297 } 314 }
298 } 315 }
299 tableRows.sort((x, y) => x.compare(y)); 316 tableRows.sort((x, y) => x.compare(y));
300 317
301 if (tableSum > 0) { 318 if (tableSum > 0) {
302 let summaryDisplayElement = tableSum; 319 let summaryDisplayElement = tableSum;
303 if (this.chart_.unit !== undefined) { 320 if (this.chart_.unit !== undefined) {
304 summaryDisplayElement = this.chart_.unit.format(tableSum); 321 summaryDisplayElement = this.chart_.unit.format(tableSum);
305 } 322 }
306 summaryDisplayElement = tr.ui.b.createSpan({ 323 summaryDisplayElement = tr.ui.b.createSpan({
(...skipping 30 matching lines...) Expand all
337 this.$.container.style.display = 'block'; 354 this.$.container.style.display = 'block';
338 this.$.empty.style.display = 'none'; 355 this.$.empty.style.display = 'none';
339 this.chart_.data = [chartData]; 356 this.chart_.data = [chartData];
340 } 357 }
341 } 358 }
342 }); 359 });
343 360
344 return {}; 361 return {};
345 }); 362 });
346 </script> 363 </script>
OLDNEW
« no previous file with comments | « no previous file | tracing/tracing/value/ui/breakdown_span_test.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698