Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(311)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: tracing/tracing/ui/base/name_bar_chart.html

Issue 2162963002: [polymer] Merge of master into polymer10-migration (Closed) Base URL: git@github.com:catapult-project/catapult.git@polymer10-migration
Patch Set: Merge polymer10-migration int polymer10-merge Created 4 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « tracing/tracing/ui/base/line_chart.html ('k') | tracing/tracing/ui/base/overlay.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <!-- 2 <!--
3 Copyright (c) 2014 The Chromium Authors. All rights reserved. 3 Copyright (c) 2014 The Chromium Authors. All rights reserved.
4 Use of this source code is governed by a BSD-style license that can be 4 Use of this source code is governed by a BSD-style license that can be
5 found in the LICENSE file. 5 found in the LICENSE file.
6 --> 6 -->
7 7
8 <link rel="import" href="/tracing/base/range.html"> 8 <link rel="import" href="/tracing/base/raf.html">
9 <link rel="import" href="/tracing/ui/base/bar_chart.html"> 9 <link rel="import" href="/tracing/ui/base/bar_chart.html">
10 <link rel="import" href="/tracing/ui/base/d3.html"> 10 <link rel="import" href="/tracing/ui/base/d3.html">
11 11
12 <script> 12 <script>
13 'use strict'; 13 'use strict';
14 14
15 tr.exportTo('tr.ui.b', function() { 15 tr.exportTo('tr.ui.b', function() {
16 var BarChart = tr.ui.b.BarChart; 16 var BarChart = tr.ui.b.BarChart;
17 17
18 // @constructor 18 // @constructor
19 var NameBarChart = tr.ui.b.define('name-bar-chart', BarChart); 19 var NameBarChart = tr.ui.b.define('name-bar-chart', BarChart);
20 20
21 NameBarChart.prototype = { 21 NameBarChart.prototype = {
22 __proto__: BarChart.prototype, 22 __proto__: BarChart.prototype,
23 23
24 decorate: function() { 24 decorate: function() {
25 BarChart.prototype.decorate.call(this); 25 BarChart.prototype.decorate.call(this);
26 Polymer.dom(this).classList.remove('bar-chart'); 26 Polymer.dom(this).classList.remove('bar-chart');
27 Polymer.dom(this).classList.add('name-bar-chart'); 27 Polymer.dom(this).classList.add('name-bar-chart');
28 this.bottomMargin_ = 40;
29 }, 28 },
30 29
31 isDatumFieldSeries_: function(fieldName) { 30 isDatumFieldSeries_: function(fieldName) {
32 return fieldName != 'x'; 31 return fieldName != 'x';
33 }, 32 },
34 33
35 getXForDatum_: function(datum, index) { 34 getXForDatum_: function(datum, index) {
36 return index; 35 return index;
37 }, 36 },
38 37
39 getMargin_: function() {
40 var margin = BarChart.prototype.getMargin_.call(this);
41 margin.bottom = this.bottomMargin_;
42 return margin;
43 },
44
45 updateXAxis_: function(xAxis) { 38 updateXAxis_: function(xAxis) {
46 xAxis.selectAll('*').remove(); 39 xAxis.selectAll('*').remove();
47 var y = this.chartAreaSize.height + 10; 40 var y = this.chartAreaSize.height + 10;
48 var nameTexts = xAxis.selectAll('text') 41 var nameTexts = xAxis.selectAll('text')
49 .data(this.data_); 42 .data(this.data_);
50 nameTexts 43 nameTexts
51 .enter() 44 .enter()
52 .append('text') 45 .append('text')
53 .attr('transform', function(d, index) { 46 .attr('transform', function(d, index) {
54 var cx = this.xScale_(index); 47 var cx = this.xScale_(index);
55 // If you change the angle, then check the Math.cos() below. 48 // If you change the angle, then check the Math.cos() below.
56 return 'rotate(45 ' + cx + ' ' + y + ')'; 49 return 'rotate(45 ' + cx + ' ' + y + ')';
57 }.bind(this)) 50 }.bind(this))
58 .attr('x', function(d, index) { 51 .attr('x', function(d, index) {
59 return this.xScale_(index); 52 return this.xScale_(index);
60 }.bind(this)) 53 }.bind(this))
61 .attr('y', function(d) { 54 .attr('y', function(d) {
62 return y; 55 return y;
63 }.bind(this)) 56 }.bind(this))
64 .text(function(d, index) { 57 .text(function(d, index) {
65 return d.x; 58 return d.x;
66 }.bind(this)); 59 }.bind(this));
67 nameTexts.exit().remove(); 60 nameTexts.exit().remove();
68 61
69 // If the nameTexts extend past the bottom of the chart, then increase 62 // If the nameTexts extend past the bottom of the chart, then increase
70 // this.bottomMargin_ and re-render. 63 // this.bottomMargin_ and re-render.
71 var bottomMargin = this.bottomMargin_; 64 // TODO(benjhayden): Refactor with the code that is very similar to this
72 window.requestAnimationFrame(function() { 65 // in chart_base_2d.
66 var bottomMargin = this.margin.bottom;
67 tr.b.requestAnimationFrame(function() {
73 nameTexts[0].forEach(function(t) { 68 nameTexts[0].forEach(function(t) {
74 var box = t.getBBox(); 69 var box = t.getBBox();
75 // When the text is rotated, its height is the hypotenuse 70 // When the text is rotated, its height is the hypotenuse
76 // of a small triangle H, and its width is the hypotenuse of a larger 71 // of a small triangle H, and its width is the hypotenuse of a larger
77 // triangle W. The bottomMargin must be equal to a side of H plus a 72 // triangle W. The bottomMargin must be equal to a side of H plus a
78 // side of W. 73 // side of W.
79 var h = Math.cos(Math.PI / 4) * (box.height + box.width); 74 var h = Math.cos(Math.PI / 4) * (box.height + box.width);
80 bottomMargin = Math.max(this.bottomMargin_, h); 75 bottomMargin = Math.max(bottomMargin, h);
81 }, this); 76 }, this);
82 77
83 if (Math.round(bottomMargin) !== Math.round(this.bottomMargin_)) { 78 bottomMargin = parseInt(Math.ceil(bottomMargin));
84 this.bottomMargin_ = bottomMargin; 79 if (bottomMargin > this.margin.bottom) {
80 this.margin.bottom = bottomMargin;
85 this.updateContents_(); 81 this.updateContents_();
86 } 82 }
87 }.bind(this)); 83 }, this);
88 } 84 }
89 }; 85 };
90 86
91 return { 87 return {
92 NameBarChart: NameBarChart 88 NameBarChart: NameBarChart
93 }; 89 };
94 }); 90 });
95 </script> 91 </script>
OLDNEW
« no previous file with comments | « tracing/tracing/ui/base/line_chart.html ('k') | tracing/tracing/ui/base/overlay.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698