Index: tracing/tracing/value/ui/composition_span.html |
diff --git a/tracing/tracing/value/ui/composition_span.html b/tracing/tracing/value/ui/composition_span.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..0a99ece202c94b5482a3f1e02238cdf4f2f2dc00 |
--- /dev/null |
+++ b/tracing/tracing/value/ui/composition_span.html |
@@ -0,0 +1,83 @@ |
+<!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/bar_chart.html"> |
+<link rel="import" href="/tracing/ui/base/drag_handle.html"> |
+ |
+<dom-module id="tr-v-ui-composition-span"> |
+ <template> |
+ <div id="container"></div> |
+ <tr-ui-b-drag-handle id="drag_handle"></tr-ui-b-drag-handle> |
+ </template> |
+</dom-module> |
+<script> |
+'use strict'; |
+Polymer({ |
+ is: 'tr-v-ui-composition-span', |
+ |
+ created: function() { |
+ this.diagnostic_ = undefined; |
+ this.chart_ = new tr.ui.b.BarChart(); |
+ this.chart_.width = 190; |
+ this.chart_.height = 200; |
+ this.chart_.isStacked = true; |
+ this.chart_.hideXAxis = true; |
+ this.chart_.margin.top = 10; |
+ this.chart_.margin.bottom = 10; |
+ this.chart_.margin.right = 120; |
+ this.minHeightPx_ = 40; |
+ }, |
+ |
+ ready: function() { |
+ Polymer.dom(this.$.container).appendChild(this.chart_); |
+ this.$.drag_handle.target = this.$.container; |
+ this.$.drag_handle.addEventListener( |
+ 'drag-handle-resize', this.onResize_.bind(this)); |
+ }, |
+ |
+ onResize_: function(event) { |
+ event.stopPropagation(); |
+ var heightPx = parseInt(this.$.container.style.height); |
+ if (heightPx < this.minHeightPx_) { |
+ heightPx = this.minHeightPx_; |
+ this.$.container.style.height = this.minHeightPx_ + 'px'; |
+ } |
+ this.chart_.height = heightPx; |
+ }, |
+ |
+ get diagnostic() { |
+ return this.diagnostic_; |
+ }, |
+ |
+ set diagnostic(d) { |
+ this.diagnostic_ = d; |
+ this.updateContents_(); |
+ }, |
+ |
+ updateContents_: function() { |
+ if (!this.diagnostic_) { |
+ this.chart_.data = []; |
+ return; |
+ } |
+ var data = {x: 0}; |
+ this.minHeightPx_ = 20; |
+ this.diagnostic_.iterItems(function(name, value) { |
+ this.chart_.getDataSeries(name).target = value; |
+ this.chart_.getDataSeries(name).optional = true; |
+ this.minHeightPx_ += 20; |
+ |
+ value = value.numeric; |
+ if (value instanceof tr.v.ScalarNumeric) |
+ data[name] = value.value; |
+ else if (value instanceof tr.v.Numeric) |
+ data[name] = value.sum; |
+ |
+ }, this); |
+ this.chart_.data = [data]; |
+ } |
+}); |
+</script> |