| 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>
|
|
|