| <!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/extras/chrome/chrome_user_friendly_category_driver.html"> |
| <link rel="import" href="/tracing/ui/base/column_chart.html"> |
| <link rel="import" href="/tracing/ui/base/drag_handle.html"> |
| |
| <dom-module id="tr-v-ui-breakdown-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-breakdown-span', |
| |
| created: function() { |
| this.diagnostic_ = undefined; |
| this.chart_ = new tr.ui.b.ColumnChart(); |
| 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; |
| for (var [name, value] of this.diagnostic) { |
| this.minHeightPx_ += 20; |
| |
| var dataSeries = this.chart_.getDataSeries(name); |
| dataSeries.optional = true; |
| |
| if (this.diagnostic.colorScheme === |
| tr.v.d.COLOR_SCHEME_CHROME_USER_FRIENDLY_CATEGORY_DRIVER) { |
| var cat = name.split(' '); |
| cat = cat[cat.length - 1]; |
| var color = tr.e.chrome.ChromeUserFriendlyCategoryDriver.getColor(cat); |
| var hsl = color.toHSL(); |
| hsl.l *= 0.85; |
| var highlightedColor = tr.b.Color.fromHSL(hsl); |
| dataSeries.highlightedColor = highlightedColor; |
| dataSeries.color = color; |
| } |
| |
| if (value instanceof tr.v.Histogram) { |
| dataSeries.target = value; |
| data[name] = value.sum; |
| } else if (typeof value === 'number') { |
| data[name] = value; |
| } else { |
| throw new Error('unsupported value ' + value); |
| } |
| } |
| this.chart_.data = [data]; |
| } |
| }); |
| </script> |
