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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2341623002: Display Histograms in value-set-table-cells. (Closed)
Patch Set: . Created 4 years, 2 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/base/unit.html ('k') | tracing/tracing/ui/base/chart_base.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) 2016 The Chromium Authors. All rights reserved. 3 Copyright (c) 2016 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/ui/base/column_chart.html"> 8 <link rel="import" href="/tracing/ui/base/column_chart.html">
9 9
10 <script> 10 <script>
(...skipping 24 matching lines...) Expand all
35 this.verticalScale_.domain(this.xScale_.domain()); 35 this.verticalScale_.domain(this.xScale_.domain());
36 this.verticalScale_.range([this.chartAreaSize.height, 0]); 36 this.verticalScale_.range([this.chartAreaSize.height, 0]);
37 this.horizontalScale_ = d3.scale.linear(); 37 this.horizontalScale_ = d3.scale.linear();
38 this.horizontalScale_.domain(this.yScale_.domain()); 38 this.horizontalScale_.domain(this.yScale_.domain());
39 this.horizontalScale_.range([0, this.chartAreaSize.width]); 39 this.horizontalScale_.range([0, this.chartAreaSize.width]);
40 }, 40 },
41 41
42 drawBrush_: function(brushRectsSel) { 42 drawBrush_: function(brushRectsSel) {
43 brushRectsSel 43 brushRectsSel
44 .attr('x', 0) 44 .attr('x', 0)
45 .attr('width', this.chartAreaSize.width)
45 .attr('y', function(d) { 46 .attr('y', function(d) {
46 return this.chartAreaSize.height - this.verticalScale_(d.min); 47 return this.verticalScale_(d.max);
47 }.bind(this)) 48 }.bind(this))
48 .attr('width', this.chartAreaSize.width)
49 .attr('height', function(d) { 49 .attr('height', function(d) {
50 return (this.chartAreaSize.height - this.verticalScale_(d.max)) - 50 return this.verticalScale_(d.min) - this.verticalScale_(d.max);
51 (this.chartAreaSize.height - this.verticalScale_(d.min));
52 }.bind(this)); 51 }.bind(this));
53 }, 52 },
54 53
55 getDataPointAtChartPoint_: function(p) { 54 getDataPointAtChartPoint_: function(chartPoint) {
55 var flippedPoint = {
56 x: this.chartAreaSize.height - chartPoint.y,
57 y: this.chartAreaSize.width - chartPoint.x
58 };
56 return ColumnChart.prototype.getDataPointAtChartPoint_.call( 59 return ColumnChart.prototype.getDataPointAtChartPoint_.call(
57 this, {x: p.y, y: p.x}); 60 this, flippedPoint);
58 }, 61 },
59 62
60 drawXAxis_: function(xAxis) { 63 drawXAxis_: function(xAxis) {
61 xAxis.attr('transform', 'translate(0,' + this.chartAreaSize.height + ')') 64 xAxis.attr('transform', 'translate(0,' + this.chartAreaSize.height + ')')
62 .call(d3.svg.axis() 65 .call(d3.svg.axis()
63 .scale(this.horizontalScale_) 66 .scale(this.horizontalScale_)
64 .orient('bottom')); 67 .orient('bottom'));
65 this.drawXAxisTicks_(xAxis);
66 }, 68 },
67 69
68 drawYAxis_: function(yAxis) { 70 drawYAxis_: function(yAxis) {
69 var axisModifier = d3.svg.axis() 71 var axisModifier = d3.svg.axis()
70 .scale(this.verticalScale_) 72 .scale(this.verticalScale_)
71 .orient('left'); 73 .orient('left');
72 yAxis.call(axisModifier); 74 yAxis.call(axisModifier);
73 this.drawYAxisTicks_(yAxis);
74 }, 75 },
75 76
76 drawHoverValueBox_: function(rect) { 77 drawHoverValueBox_: function(rect) {
77 var seriesKeys = [...this.seriesByKey_.keys()]; 78 var seriesKeys = [...this.seriesByKey_.keys()];
78 var chartAreaSel = d3.select(this.chartAreaElement); 79 var chartAreaSel = d3.select(this.chartAreaElement);
79 chartAreaSel.selectAll('.hover').remove(); 80 chartAreaSel.selectAll('.hover').remove();
80 var keyWidthPx = 0; 81 var keyWidthPx = 0;
81 var keyHeightPx = 0; 82 var keyHeightPx = 0;
82 if (seriesKeys.length > 1) { 83 if (seriesKeys.length > 1) {
83 keyWidthPx = tr.ui.b.getSVGTextWidth( 84 keyWidthPx = tr.ui.b.getSVGTextWidth(
(...skipping 27 matching lines...) Expand all
111 chartAreaSel 112 chartAreaSel
112 .append('text') 113 .append('text')
113 .attr('class', 'hover') 114 .attr('class', 'hover')
114 .attr('fill', rect.color) 115 .attr('fill', rect.color)
115 .attr('x', hoverLeftPx + 2) 116 .attr('x', hoverLeftPx + 2)
116 .attr('y', hoverTopPx + keyHeightPx + valueHeightPx - 3) 117 .attr('y', hoverTopPx + keyHeightPx + valueHeightPx - 3)
117 .text(rect.value); 118 .text(rect.value);
118 }, 119 },
119 120
120 drawRect_: function(rect, sel) { 121 drawRect_: function(rect, sel) {
121 // Rotate |rect| 90 degrees counter-clockwise. 122 // Flip |rect| around |y=x|.
122 var colRect = { 123 var colRect = {
123 key: rect.key, 124 key: rect.key,
124 value: rect.value, 125 value: rect.value,
125 color: rect.color, 126 color: rect.color,
126 topPx: rect.leftPx, 127 topPx: this.chartAreaSize.height - rect.leftPx - rect.widthPx,
127 leftPx: this.chartAreaSize.width - rect.topPx - rect.heightPx, 128 leftPx: this.chartAreaSize.width - rect.topPx - rect.heightPx,
128 widthPx: rect.heightPx, 129 widthPx: rect.heightPx,
129 heightPx: rect.widthPx, 130 heightPx: rect.widthPx,
130 }; 131 };
131 ColumnChart.prototype.drawRect_.call(this, colRect, sel); 132 ColumnChart.prototype.drawRect_.call(this, colRect, sel);
132 } 133 }
133 }; 134 };
134 135
135 return { 136 return {
136 BarChart: BarChart 137 BarChart: BarChart
137 }; 138 };
138 }); 139 });
139 </script> 140 </script>
OLDNEW
« no previous file with comments | « tracing/tracing/base/unit.html ('k') | tracing/tracing/ui/base/chart_base.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698