Index: tracing/tracing/ui/value_set_view.html |
diff --git a/tracing/tracing/ui/value_set_view.html b/tracing/tracing/ui/value_set_view.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..1af1f90f424dd09004217d7569058b420cca4438 |
--- /dev/null |
+++ b/tracing/tracing/ui/value_set_view.html |
@@ -0,0 +1,113 @@ |
+<!DOCTYPE html> |
+<!-- |
+Copyright 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"> |
+<link rel="import" href="/tracing/value/ui/scalar_span.html"> |
+<link rel="import" href="/tracing/value/unit.html"> |
+ |
+<polymer-element name='tr-ui-value-set-view'> |
+ <template> |
+ <style> |
+ :host { |
+ display: flex; |
+ flex-direction: column; |
+ width: 400px; |
+ } |
+ table-container { |
+ display: flex; |
+ min-height: 0px; |
+ overflow-y: auto; |
+ } |
+ div#error { |
+ color: red; |
+ } |
+ </style> |
+ |
+ <div id="error"></div> |
+ <table-container> |
+ <tr-ui-b-table id="table"></tr-ui-b-table> |
+ </table-container> |
+ </template> |
+</polymer-element> |
+ |
+<script> |
+'use strict'; |
+tr.exportTo('tr.ui', function() { |
+ Polymer('tr-ui-value-set-view', { |
+ ready: function() { |
+ this.$.table.sortDescending = true; |
+ this.$.table.selectionMode = tr.ui.b.TableFormat.SelectionMode.ROW; |
+ this.$.table.tableColumns = [ |
+ { |
+ title: 'Name', |
+ value: function(value) { |
+ var nameEl = document.createElement('span'); |
+ nameEl.textContent = value.name; |
+ nameEl.title = value.description; |
+ nameEl.style.textOverflow = 'ellipsis'; |
+ return nameEl; |
+ }, |
+ cmp: function(a, b) { |
+ return a.name.localeCompare(b.name); |
+ }, |
+ width: '200px' |
+ }, |
+ { |
+ title: 'Value', |
+ textAlign: 'right', |
+ value: function(value) { |
+ if (value.unit) { |
+ return tr.v.ui.createScalarSpan( |
+ value.value, {unit: value.unit}); |
+ } |
+ return value.value; |
+ }, |
+ cmp: function(a, b) { |
+ return a.value - b.value; |
+ }, |
+ width: '80px' |
+ } |
+ ]; |
+ this.$.table.sortColumnIndex = 1; |
+ }, |
+ |
+ set error(err) { |
+ this.$.error.textContent = err; |
+ this.$.table.tableRows = []; |
+ this.$.table.rebuild(); |
+ }, |
+ |
+ set values(values) { |
+ this.$.error.textContent = ''; |
+ |
+ this.$.table.tableRows = values.map(function(value) { |
+ var row = { |
+ name: value.name, |
+ value: '', |
+ unit: undefined, |
+ description: value.description, |
+ }; |
+ |
+ if (value.numeric) { |
+ row.unit = value.numeric.unit; |
+ if (value.numeric.value) { |
+ row.value = value.numeric.value; |
+ } else if (value.numeric.average) { |
+ row.value = value.numeric.average; |
+ } |
+ } |
+ |
+ return row; |
+ }); |
+ |
+ this.$.table.rebuild(); |
+ } |
+ }); |
+ |
+ return {}; |
+}); |
+</script> |