OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <!-- |
| 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 |
| 5 found in the LICENSE file. |
| 6 --> |
| 7 |
| 8 <link rel="import" href="/tracing/ui/base/bar_chart.html"> |
| 9 <link rel="import" href="/tracing/ui/base/drag_handle.html"> |
| 10 |
| 11 <dom-module id="tr-v-ui-composition-span"> |
| 12 <template> |
| 13 <div id="container"></div> |
| 14 <tr-ui-b-drag-handle id="drag_handle"></tr-ui-b-drag-handle> |
| 15 </template> |
| 16 </dom-module> |
| 17 <script> |
| 18 'use strict'; |
| 19 Polymer({ |
| 20 is: 'tr-v-ui-composition-span', |
| 21 |
| 22 created: function() { |
| 23 this.diagnostic_ = undefined; |
| 24 this.chart_ = new tr.ui.b.BarChart(); |
| 25 this.chart_.width = 190; |
| 26 this.chart_.height = 200; |
| 27 this.chart_.isStacked = true; |
| 28 this.chart_.hideXAxis = true; |
| 29 this.chart_.margin.top = 10; |
| 30 this.chart_.margin.bottom = 10; |
| 31 this.chart_.margin.right = 120; |
| 32 this.minHeightPx_ = 40; |
| 33 }, |
| 34 |
| 35 ready: function() { |
| 36 Polymer.dom(this.$.container).appendChild(this.chart_); |
| 37 this.$.drag_handle.target = this.$.container; |
| 38 this.$.drag_handle.addEventListener( |
| 39 'drag-handle-resize', this.onResize_.bind(this)); |
| 40 }, |
| 41 |
| 42 onResize_: function(event) { |
| 43 event.stopPropagation(); |
| 44 var heightPx = parseInt(this.$.container.style.height); |
| 45 if (heightPx < this.minHeightPx_) { |
| 46 heightPx = this.minHeightPx_; |
| 47 this.$.container.style.height = this.minHeightPx_ + 'px'; |
| 48 } |
| 49 this.chart_.height = heightPx; |
| 50 }, |
| 51 |
| 52 get diagnostic() { |
| 53 return this.diagnostic_; |
| 54 }, |
| 55 |
| 56 set diagnostic(d) { |
| 57 this.diagnostic_ = d; |
| 58 this.updateContents_(); |
| 59 }, |
| 60 |
| 61 updateContents_: function() { |
| 62 if (!this.diagnostic_) { |
| 63 this.chart_.data = []; |
| 64 return; |
| 65 } |
| 66 var data = {x: 0}; |
| 67 this.minHeightPx_ = 20; |
| 68 this.diagnostic_.iterItems(function(name, value) { |
| 69 this.chart_.getDataSeries(name).target = value; |
| 70 this.chart_.getDataSeries(name).optional = true; |
| 71 this.minHeightPx_ += 20; |
| 72 |
| 73 value = value.numeric; |
| 74 if (value instanceof tr.v.ScalarNumeric) |
| 75 data[name] = value.value; |
| 76 else if (value instanceof tr.v.Numeric) |
| 77 data[name] = value.sum; |
| 78 |
| 79 }, this); |
| 80 this.chart_.data = [data]; |
| 81 } |
| 82 }); |
| 83 </script> |
OLD | NEW |