1 <!DOCTYPE html> 2 <!-- 3 Copyright (c) 2016 The Chromium Authors. All rights reserved. 4 Use of this source code is governed by a BSD-style license that can be 5 found in the LICENSE file. 6 --> 7 8 <link rel="import" href="/tracing/ui/base/table.html"> 9 10 <polymer-element name="tr-ui-b-grouping-table"> 11 <template> 12 <style> 13 :host { 14 display: flex; 15 } 16 #table { 17 flex: 1 1 auto; 18 } 19 </style> 20 <tr-ui-b-table id="table"></tr-ui-b-table> 21 </template> 22 </polymer-element> 23 <script> 24 'use strict'; 25 26 tr.exportTo('tr.ui.b', function() { 27 28 function Row(title, data, groupingKeyFuncs, rowStatsConstructor) { 29 this.title = title; 30 this.data_ = data; 31 if (groupingKeyFuncs === undefined) 32 groupingKeyFuncs = []; 33 this.groupingKeyFuncs_ = groupingKeyFuncs; 34 this.rowStatsConstructor_ = rowStatsConstructor; 35 36 this.subRowsBuilt_ = false; 37 this.subRows_ = undefined; 38 39 this.rowStats_ = undefined; 40 } 41 42 Row.prototype = { 43 getCurrentGroupingKeyFunc_: function() { 44 if (this.groupingKeyFuncs_.length === 0) 45 return undefined; 46 return this.groupingKeyFuncs_[0]; 47 }, 48 49 get data() { 50 return this.data_; 51 }, 52 53 get rowStats() { 54 if (this.rowStats_ === undefined) { 55 this.rowStats_ = new this.rowStatsConstructor_(this); 56 } 57 return this.rowStats_; 58 }, 59 60 rebuildSubRowsIfNeeded_: function() { 61 if (this.subRowsBuilt_) 62 return; 63 this.subRowsBuilt_ = true; 64 65 var groupingKeyFunc = this.getCurrentGroupingKeyFunc_(); 66 if (groupingKeyFunc === undefined) { 67 this.subRows_ = undefined; 68 return; 69 } 70 71 var dataByKey = {}; 72 var hasValues = false; 73 this.data_.forEach(function(datum) { 74 var key = groupingKeyFunc(datum); 75 hasValues = hasValues || (key !== undefined); 76 if (dataByKey[key] === undefined) 77 dataByKey[key] = []; 78 dataByKey[key].push(datum); 79 }); 80 if (!hasValues) { 81 this.subRows_ = undefined; 82 return; 83 } 84 85 this.subRows_ = []; 86 for (var key in dataByKey) { 87 var row = new Row(key, 88 dataByKey[key], 89 this.groupingKeyFuncs_.slice(1), 90 this.rowStatsConstructor_); 91 this.subRows_.push(row); 92 } 93 }, 94 95 get isExpanded() { 96 return (this.subRows && 97 (this.subRows.length > 0) && 98 (this.subRows.length < 5)); 99 }, 100 101 get subRows() { 102 this.rebuildSubRowsIfNeeded_(); 103 return this.subRows_; 104 } 105 }; 106 107 Polymer('tr-ui-b-grouping-table', { 108 created: function() { 109 this.dataToGroup_ = undefined; 110 this.groupBy_ = undefined; 111 this.rowStatsConstructor_ = undefined; 112 }, 113 114 get tableColumns() { 115 return this.$.table.tableColumns; 116 }, 117 118 set tableColumns(tableColumns) { 119 this.$.table.tableColumns = tableColumns; 120 }, 121 122 get tableRows() { 123 return this.$.table.tableRows; 124 }, 125 126 get sortColumnIndex() { 127 return this.$.table.sortColumnIndex; 128 }, 129 130 set sortColumnIndex(sortColumnIndex) { 131 this.$.table.sortColumnIndex = sortColumnIndex; 132 }, 133 134 get sortDescending() { 135 return this.$.table.sortDescending; 136 }, 137 138 set sortDescending(sortDescending) { 139 this.$.table.sortDescending = sortDescending; 140 }, 141 142 get selectionMode() { 143 return this.$.table.selectionMode; 144 }, 145 146 set selectionMode(selectionMode) { 147 this.$.table.selectionMode = selectionMode; 148 }, 149 150 get rowHighlightStyle() { 151 return this.$.table.rowHighlightStyle; 152 }, 153 154 set rowHighlightStyle(rowHighlightStyle) { 155 this.$.table.rowHighlightStyle = rowHighlightStyle; 156 }, 157 158 get cellHighlightStyle() { 159 return this.$.table.cellHighlightStyle; 160 }, 161 162 set cellHighlightStyle(cellHighlightStyle) { 163 this.$.table.cellHighlightStyle = cellHighlightStyle; 164 }, 165 166 get selectedColumnIndex() { 167 return this.$.table.selectedColumnIndex; 168 }, 169 170 set selectedColumnIndex(selectedColumnIndex) { 171 this.$.table.selectedColumnIndex = selectedColumnIndex; 172 }, 173 174 get selectedTableRow() { 175 return this.$.table.selectedTableRow; 176 }, 177 178 set selectedTableRow(selectedTableRow) { 179 this.$.table.selectedTableRow = selectedTableRow; 180 }, 181 182 get groupBy() { 183 return this.groupBy_; 184 }, 185 186 set groupBy(groupBy) { 187 this.groupBy_ = groupBy; 188 this.updateContents_(); 189 }, 190 191 get dataToGroup() { 192 return this.dataToGroup_; 193 }, 194 195 set dataToGroup(dataToGroup) { 196 this.dataToGroup_ = dataToGroup; 197 this.updateContents_(); 198 }, 199 200 get rowStatsConstructor() { 201 return this.rowStatsConstructor_; 202 }, 203 204 set rowStatsConstructor(rowStatsConstructor) { 205 this.rowStatsConstructor_ = rowStatsConstructor; 206 this.updateContents_(); 207 }, 208 209 rebuild: function() { 210 this.$.table.rebuild(); 211 }, 212 213 updateContents_: function() { 214 var groupBy = this.groupBy_ || []; 215 var dataToGroup = this.dataToGroup_ || []; 216 var rowStatsConstructor = this.rowStatsConstructor_ || function() {}; 217 218 var superRow = new Row('', dataToGroup, groupBy, 219 rowStatsConstructor); 220 this.$.table.tableRows = superRow.subRows || []; 221 } 222 }); 223 224 return { 225 }; 226 }); 227 </script> 228
