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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: dashboard/dashboard/elements/chart-legend.html

Issue 1929973002: [Polymer10] Port chart-legend.html to Polymer 1.0 (Closed) Base URL: git@github.com:catapult-project/catapult.git@polymer10-migration
Patch Set: Created 4 years, 7 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 | no next file » | 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="/components/core-icon-button/core-icon-button.html"> 8 <link rel="import" href="/components/iron-flex-layout/iron-flex-layout.html">
9 <link rel="import" href="/components/core-selector/core-selector.html"> 9 <link rel="import" href="/components/iron-selector/iron-selector.html">
10 <link rel="import" href="/components/paper-icon-button/paper-icon-button.html"> 10 <link rel="import" href="/components/paper-icon-button/paper-icon-button.html">
11 <link rel="import" href="/components/paper-shadow/paper-shadow.html"> 11 <link rel="import" href="/components/paper-material/paper-material.html">
12 <link rel="import" href="/components/paper-spinner/paper-spinner.html"> 12 <link rel="import" href="/components/paper-spinner/paper-spinner.html">
13 13
14 <link rel="import" href="/dashboard/elements/tooltip-test-description.html"> 14 <link rel="import" href="/dashboard/elements/tooltip-test-description.html">
15 15
16 <polymer-element name="chart-legend" 16 <dom-module id="chart-legend">
17 attributes="seriesGroupList indicesToGraph showCompact
18 collapseLegend deltaAbsolute deltaPercent showDelta ">
19 <template> 17 <template>
20 <style> 18 <style>
21 .row { 19 .row {
22 margin-bottom: 2px; 20 margin-bottom: 2px;
23 opacity: 1; 21 opacity: 1;
24 } 22 }
25 23
26 .row:hover core-icon.info { 24 .row:hover core-icon.info {
27 visibility: visible; 25 visibility: visible;
28 } 26 }
29 27
30 .row[loading] { 28 .row[loading] {
31 opacity: 0.5; 29 opacity: 0.5;
32 } 30 }
33 31
34 .last-important-test { 32 .last-important-test {
35 border-bottom: 1px solid #ebebeb; 33 border-bottom: 1px solid #ebebeb;
36 margin-bottom: 10px; 34 margin-bottom: 10px;
37 } 35 }
38 36
39 .series-set { 37 .series-set {
40 background: #f5f5f5; 38 background: #f5f5f5;
41 box-sizing: border-box; 39 box-sizing: border-box;
42 margin: 1px 1px 5px 1px; 40 margin: 1px 1px 5px 1px;
43 padding: 3px; 41 padding: 3px;
44 width: 293px; 42 width: 293px;
45 } 43 }
46 44
47 core-icon.info { 45 iron-icon.info {
48 height: 15px; 46 height: 15px;
49 width: 15px; 47 width: 15px;
50 opacity: .75; 48 opacity: .75;
51 margin-left: 5px; 49 margin-left: 5px;
52 cursor: pointer; 50 cursor: pointer;
53 visibility: hidden; 51 visibility: hidden;
54 } 52 }
55 53
56 .close-icon { 54 .close-icon {
57 cursor: pointer; 55 cursor: pointer;
(...skipping 105 matching lines...) Expand 10 before | Expand all | Expand 10 after
163 width: 18px; 161 width: 18px;
164 height: 18px; 162 height: 18px;
165 } 163 }
166 164
167 .sg-loading { 165 .sg-loading {
168 text-align:center; 166 text-align:center;
169 padding-bottom: 2px; 167 padding-bottom: 2px;
170 } 168 }
171 </style> 169 </style>
172 170
173 <div id="rhs" compact?="{{showCompact}}" collapse-legend?="{{collapseLegend} }"> 171 <div id="rhs" compact$="{{showCompact}}" collapse-legend$="{{collapseLegend} }">
174 <paper-icon-button id="expand-legend-btn" icon="arrow-drop-down" 172 <paper-icon-button id="expand-legend-btn" icon="arrow-drop-down"
175 title="legend" role="button" 173 title="legend" role="button"
176 on-click="{{toggleLegend}}"></paper-icon-button> 174 on-click="toggleLegend"></paper-icon-button>
177 175
178 <core-collapse id="collapsible-legend" opened?="{{!collapseLegend}}"> 176 <iron-collapse id="collapsible-legend" opened$="{{!collapseLegend}}">
179 177
180 <template bind if="{{!showDelta}}"> 178 <template is="dom-if" if="{{!showDelta}}">
181 <div id="delta-off">Click and drag graph to measure or zoom.</div> 179 <div id="delta-off">Click and drag graph to measure or zoom.</div>
182 </template> 180 </template>
183 <template bind if="{{showDelta}}"> 181 <template is="dom-if" if="{{showDelta}}">
184 Delta: {{deltaAbsolute}} or {{deltaPercent}}%.<br> 182 Delta: {{deltaAbsolute}} or {{deltaPercent}}%.<br>
185 Click selected range to zoom. 183 Click selected range to zoom.
186 </template> 184 </template>
187 185
188 <div id="traces">Traces: 186 <div id="traces">Traces:
189 <a href="javascript:void(0);" 187 <a href="javascript:void(0);"
190 class="trace-link" 188 class="trace-link"
191 on-click="{{onSelectAll}}">select all</a> 189 on-click="onSelectAll">select all</a>
192 &#124; 190 &#124;
193 <a href="javascript:void(0);" 191 <a href="javascript:void(0);"
194 class="trace-link" 192 class="trace-link"
195 on-click="{{onDeselectAll}}">deselect all</a> 193 on-click="onDeselectAll">deselect all</a>
196 &#124; 194 &#124;
197 <a href="javascript:void(0);" 195 <a href="javascript:void(0);"
198 class="trace-link" 196 class="trace-link"
199 on-click="{{onSelectCore}}">core only</a> 197 on-click="onSelectCore">core only</a>
200 </div> 198 </div>
201 199
202 <!-- List of series group boxes starts here. --> 200 <!-- List of series group boxes starts here. -->
203 <div id="sg-container"> 201 <div id="sg-container">
204 <template repeat="{{seriesGroup, groupIndex in seriesGroupList}}"> 202 <template is="dom-repeat" items="{{seriesGroupList}}" as="seriesGroup" index-as="groupIndex">
205 203
206 <paper-shadow z="1" 204 <paper-material elevation="1"
207 class="series-set" 205 class="series-set"
208 draggable="true" 206 draggable="true"
209 on-dragstart="{{onSeriesDragStart}}" 207 on-dragstart="onSeriesDragStart"
210 on-dragend="{{onSeriesDragEnd}}"> 208 on-dragend="onSeriesDragEnd">
211 209
212 <div horizontal layout> 210 <div class="horizontal layout">
213 <input type="checkbox" 211 <input type="checkbox"
214 on-change="{{onCheckAllCheckboxClicked}}" 212 on-change="onCheckAllCheckboxClicked"
215 checked="{{seriesGroup.selection == 'all'}}" 213 checked="{{computeSelectionIsAll(seriesGroup)}}"
216 hidden?="{{seriesGroup.tests.length == 0}}"> 214 hidden?="{{!seriesGroup.tests.length}}">
217 <span flex four></span> 215 <span flex four></span>
218 <div class="close-icon" on-click="{{onCloseSeriesGroupClicked}}" > 216 <div class="close-icon" on-click="onCloseSeriesGroupClicked">
219 ❌ <!-- cross mark U+274C --> 217 ❌ <!-- cross mark U+274C -->
220 </div> 218 </div>
221 </div> 219 </div>
222 220
223 <core-selector class="list" selected="{{multiSelected}}" multi> 221 <iron-selector class="list" selected="{{multiSelected}}" multi>
224 222
225 <template repeat="{{test, testIndex in seriesGroup.tests}}"> 223 <template is="dom-repeat" items="{{in seriesGroup.tests}}" as="t est">
226 <div class="row" id="{{test.index}}" 224 <div class="row" id="{{test.index}}"
227 loading?="{{test.index == undefined}}" 225 loading$="{{computeIsUndefined(test.index)}}"
228 hidden?="{{test.hidden}}"> 226 hidden$="{{test.hidden}}">
229 227
230 <label horizontal layout center> 228 <label class="horizontal layout center">
231 229
232 <input type="checkbox" 230 <input type="checkbox"
233 checked="{{test.selected}}" 231 checked="{{test.selected}}"
234 on-change="{{onCheckboxClicked}}" 232 on-change="onCheckboxClicked"
235 disabled?="{{test.index == undefined}}"> 233 disabled$="{{computeIsUndefined(test.index)}}">
236 <span class="test-name" 234 <span class="test-name"
237 important?="{{test.important}}" 235 important$="{{test.important}}"
238 style="color:{{test.color}};" 236 style="color:{{test.color}};"
239 on-mouseover='{{seriesMouseover}}' 237 on-mouseover='seriesMouseover'
240 on-mouseout='{{seriesMouseout}}'> 238 on-mouseout='seriesMouseout'>
241 {{test.name}} 239 {{test.name}}
242 <core-icon icon="info-outline" class="info" 240 <iron-icon icon="info-outline" class="info"
243 on-click="{{toggleDescription}}"></core-icon> 241 on-click="toggleDescription"></iron-icon>
244 </span> 242 </span>
245 </label> 243 </label>
246 244
247 </div> 245 </div>
248 246
249 </template> 247 </template>
250 248
251 </core-selector> 249 </iron-selector>
252 250
253 <div horizontal end-justified layout> 251 <div class="horizontal end-justified layout">
254 <template if="{{seriesGroup.numHidden > 0}}"> 252 <template is="dom-if" if="{{computeIsPositive(seriesGroup.numHid den)}}">
255 <a href="javascript:void(0);" class="expand-link" 253 <a href="javascript:void(0);" class="expand-link"
256 on-click="{{onExpandSeriesClicked}}">{{seriesGroup.numHidde n}} more</a> 254 on-click="onExpandSeriesClicked">{{seriesGroup.numHidden}} more</a>
257 </template> 255 </template>
258 <template if="{{seriesGroup.numHidden == 0}}"> 256 <template is="dom-if" if="{{!seriesGroup.numHidden}}">
259 <a href="javascript:void(0);" class="expand-link" 257 <a href="javascript:void(0);" class="expand-link"
260 on-click="{{onExpandSeriesClicked}}">less</a> 258 on-click="onExpandSeriesClicked">less</a>
261 </template> 259 </template>
262 </div> 260 </div>
263 261
264 <template if="{{seriesGroup.numPendingRequests > 0}}"> 262 <template is="dom-if" if="{{computeIsPositive(seriesGroup.numPendi ngRequests)}}">
265 <div class="sg-loading"> 263 <div class="sg-loading">
266 <paper-spinner active></paper-spinner> 264 <paper-spinner active></paper-spinner>
267 </div> 265 </div>
268 </template> 266 </template>
269 </paper-shadow> 267 </paper-material>
270 </template> 268 </template>
271 </div> 269 </div>
272 270
273 271
274 </core-collapse> 272 </iron-collapse>
275 </div> 273 </div>
276 274
277 </template> 275 </template>
278 <script> 276 <script>
279 'use strict'; 277 'use strict';
280 Polymer('chart-legend', { 278 Polymer({
279
280 is: 'chart-legend',
281 properties: {
282 collapseLegend: { notify: true },
283 deltaAbsolute: { notify: true },
284 deltaPercent: { notify: true },
285 indicesToGraph: { notify: true },
286 seriesGroupList: { notify: true },
287 showCompact: { notify: true },
288 showDelta: { notify: true }
289 },
290
291 computeIsPositive: n => n > 0,
292 computeIsUndefined: x => x === undefined,
293 computeSelectionIsAll: seriesGroup => seriesGroup.selection == 'all',
281 294
282 /** 295 /**
283 * Shows or hides the detailed description for an item in the legend. 296 * Shows or hides the detailed description for an item in the legend.
284 */ 297 */
285 toggleDescription: function(event, detail, sender) { 298 toggleDescription: function(event, detail, sender) {
286 event.preventDefault(); 299 event.preventDefault();
287 var model = event.target.templateInstance.model; 300 var model = event.target.templateInstance.model;
288 var seriesGroup = this.seriesGroupList[model.groupIndex]; 301 var seriesGroup = this.seriesGroupList[model.groupIndex];
289 var test = seriesGroup.tests[model.testIndex]; 302 var test = seriesGroup.tests[model.testIndex];
290 if (test.index == undefined) { 303 if (test.index == undefined) {
(...skipping 285 matching lines...) Expand 10 before | Expand all | Expand 10 after
576 /** 589 /**
577 * Toggles legend window to collapse or expand. 590 * Toggles legend window to collapse or expand.
578 */ 591 */
579 toggleLegend: function() { 592 toggleLegend: function() {
580 this.$['collapsible-legend'].toggle(); 593 this.$['collapsible-legend'].toggle();
581 this.collapseLegend = !this.collapseLegend; 594 this.collapseLegend = !this.collapseLegend;
582 } 595 }
583 }); 596 });
584 </script> 597 </script>
585 </polymer-element> 598 </polymer-element>
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698