| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 2016 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <link rel="import" href="/tracing/ui/base/table.html"> |
| |
| <polymer-element name="tr-ui-b-grouping-table"> |
| <template> |
| <style> |
| :host { |
| display: flex; |
| } |
| #table { |
| flex: 1 1 auto; |
| } |
| </style> |
| <tr-ui-b-table id="table"></tr-ui-b-table> |
| </template> |
| </polymer-element> |
| <script> |
| 'use strict'; |
| |
| tr.exportTo('tr.ui.b', function() { |
| |
| function Row(title, data, groupingKeyFuncs, rowStatsConstructor) { |
| this.title = title; |
| this.data_ = data; |
| if (groupingKeyFuncs === undefined) |
| groupingKeyFuncs = []; |
| this.groupingKeyFuncs_ = groupingKeyFuncs; |
| this.rowStatsConstructor_ = rowStatsConstructor; |
| |
| this.subRowsBuilt_ = false; |
| this.subRows_ = undefined; |
| |
| this.rowStats_ = undefined; |
| } |
| |
| Row.prototype = { |
| getCurrentGroupingKeyFunc_: function() { |
| if (this.groupingKeyFuncs_.length === 0) |
| return undefined; |
| return this.groupingKeyFuncs_[0]; |
| }, |
| |
| get data() { |
| return this.data_; |
| }, |
| |
| get rowStats() { |
| if (this.rowStats_ === undefined) { |
| this.rowStats_ = new this.rowStatsConstructor_(this); |
| } |
| return this.rowStats_; |
| }, |
| |
| rebuildSubRowsIfNeeded_: function() { |
| if (this.subRowsBuilt_) |
| return; |
| this.subRowsBuilt_ = true; |
| |
| var groupingKeyFunc = this.getCurrentGroupingKeyFunc_(); |
| if (groupingKeyFunc === undefined) { |
| this.subRows_ = undefined; |
| return; |
| } |
| |
| var dataByKey = {}; |
| var hasValues = false; |
| this.data_.forEach(function(datum) { |
| var key = groupingKeyFunc(datum); |
| hasValues = hasValues || (key !== undefined); |
| if (dataByKey[key] === undefined) |
| dataByKey[key] = []; |
| dataByKey[key].push(datum); |
| }); |
| if (!hasValues) { |
| this.subRows_ = undefined; |
| return; |
| } |
| |
| this.subRows_ = []; |
| for (var key in dataByKey) { |
| var row = new Row(key, |
| dataByKey[key], |
| this.groupingKeyFuncs_.slice(1), |
| this.rowStatsConstructor_); |
| this.subRows_.push(row); |
| } |
| }, |
| |
| get isExpanded() { |
| return (this.subRows && |
| (this.subRows.length > 0) && |
| (this.subRows.length < 5)); |
| }, |
| |
| get subRows() { |
| this.rebuildSubRowsIfNeeded_(); |
| return this.subRows_; |
| } |
| }; |
| |
| Polymer('tr-ui-b-grouping-table', { |
| created: function() { |
| this.dataToGroup_ = undefined; |
| this.groupBy_ = undefined; |
| this.rowStatsConstructor_ = undefined; |
| }, |
| |
| get tableColumns() { |
| return this.$.table.tableColumns; |
| }, |
| |
| set tableColumns(tableColumns) { |
| this.$.table.tableColumns = tableColumns; |
| }, |
| |
| get tableRows() { |
| return this.$.table.tableRows; |
| }, |
| |
| get sortColumnIndex() { |
| return this.$.table.sortColumnIndex; |
| }, |
| |
| set sortColumnIndex(sortColumnIndex) { |
| this.$.table.sortColumnIndex = sortColumnIndex; |
| }, |
| |
| get sortDescending() { |
| return this.$.table.sortDescending; |
| }, |
| |
| set sortDescending(sortDescending) { |
| this.$.table.sortDescending = sortDescending; |
| }, |
| |
| get selectionMode() { |
| return this.$.table.selectionMode; |
| }, |
| |
| set selectionMode(selectionMode) { |
| this.$.table.selectionMode = selectionMode; |
| }, |
| |
| get rowHighlightStyle() { |
| return this.$.table.rowHighlightStyle; |
| }, |
| |
| set rowHighlightStyle(rowHighlightStyle) { |
| this.$.table.rowHighlightStyle = rowHighlightStyle; |
| }, |
| |
| get cellHighlightStyle() { |
| return this.$.table.cellHighlightStyle; |
| }, |
| |
| set cellHighlightStyle(cellHighlightStyle) { |
| this.$.table.cellHighlightStyle = cellHighlightStyle; |
| }, |
| |
| get selectedColumnIndex() { |
| return this.$.table.selectedColumnIndex; |
| }, |
| |
| set selectedColumnIndex(selectedColumnIndex) { |
| this.$.table.selectedColumnIndex = selectedColumnIndex; |
| }, |
| |
| get selectedTableRow() { |
| return this.$.table.selectedTableRow; |
| }, |
| |
| set selectedTableRow(selectedTableRow) { |
| this.$.table.selectedTableRow = selectedTableRow; |
| }, |
| |
| get groupBy() { |
| return this.groupBy_; |
| }, |
| |
| set groupBy(groupBy) { |
| this.groupBy_ = groupBy; |
| this.updateContents_(); |
| }, |
| |
| get dataToGroup() { |
| return this.dataToGroup_; |
| }, |
| |
| set dataToGroup(dataToGroup) { |
| this.dataToGroup_ = dataToGroup; |
| this.updateContents_(); |
| }, |
| |
| get rowStatsConstructor() { |
| return this.rowStatsConstructor_; |
| }, |
| |
| set rowStatsConstructor(rowStatsConstructor) { |
| this.rowStatsConstructor_ = rowStatsConstructor; |
| this.updateContents_(); |
| }, |
| |
| rebuild: function() { |
| this.$.table.rebuild(); |
| }, |
| |
| updateContents_: function() { |
| var groupBy = this.groupBy_ || []; |
| var dataToGroup = this.dataToGroup_ || []; |
| var rowStatsConstructor = this.rowStatsConstructor_ || function() {}; |
| |
| var superRow = new Row('', dataToGroup, groupBy, |
| rowStatsConstructor); |
| this.$.table.tableRows = superRow.subRows || []; |
| } |
| }); |
| |
| return { |
| }; |
| }); |
| </script> |
