| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 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/column_chart.html"> |
| |
| <script> |
| 'use strict'; |
| |
| tr.exportTo('tr.ui.b', function() { |
| var ColumnChart = tr.ui.b.ColumnChart; |
| |
| // @constructor |
| var BarChart = tr.ui.b.define('bar-chart', ColumnChart); |
| |
| BarChart.prototype = { |
| __proto__: ColumnChart.prototype, |
| |
| decorate: function() { |
| ColumnChart.prototype.decorate.call(this); |
| Polymer.dom(this).classList.add('bar-chart'); |
| this.verticalScale_ = undefined; |
| this.horizontalScale_ = undefined; |
| }, |
| |
| updateScales_: function() { |
| ColumnChart.prototype.updateScales_.call(this); |
| this.yScale_.range([this.chartAreaSize.width, 0]); |
| this.xScale_.range([0, this.chartAreaSize.height]); |
| this.verticalScale_ = this.isYLogScale_ ? d3.scale.log(10) : |
| d3.scale.linear(); |
| this.verticalScale_.domain(this.xScale_.domain()); |
| this.verticalScale_.range([this.chartAreaSize.height, 0]); |
| this.horizontalScale_ = d3.scale.linear(); |
| this.horizontalScale_.domain(this.yScale_.domain()); |
| this.horizontalScale_.range([0, this.chartAreaSize.width]); |
| }, |
| |
| drawBrush_: function(brushRectsSel) { |
| brushRectsSel |
| .attr('x', 0) |
| .attr('y', function(d) { |
| return this.chartAreaSize.height - this.verticalScale_(d.min); |
| }.bind(this)) |
| .attr('width', this.chartAreaSize.width) |
| .attr('height', function(d) { |
| return (this.chartAreaSize.height - this.verticalScale_(d.max)) - |
| (this.chartAreaSize.height - this.verticalScale_(d.min)); |
| }.bind(this)); |
| }, |
| |
| getDataPointAtChartPoint_: function(p) { |
| return ColumnChart.prototype.getDataPointAtChartPoint_.call( |
| this, {x: p.y, y: p.x}); |
| }, |
| |
| drawXAxis_: function(xAxis) { |
| xAxis.attr('transform', 'translate(0,' + this.chartAreaSize.height + ')') |
| .call(d3.svg.axis() |
| .scale(this.horizontalScale_) |
| .orient('bottom')); |
| this.drawXAxisTicks_(xAxis); |
| }, |
| |
| drawYAxis_: function(yAxis) { |
| var axisModifier = d3.svg.axis() |
| .scale(this.verticalScale_) |
| .orient('left'); |
| yAxis.call(axisModifier); |
| this.drawYAxisTicks_(yAxis); |
| }, |
| |
| drawHoverValueBox_: function(rect) { |
| var seriesKeys = [...this.seriesByKey_.keys()]; |
| var chartAreaSel = d3.select(this.chartAreaElement); |
| chartAreaSel.selectAll('.hover').remove(); |
| var keyWidthPx = 0; |
| var keyHeightPx = 0; |
| if (seriesKeys.length > 1) { |
| keyWidthPx = tr.ui.b.getSVGTextWidth( |
| this.chartAreaElement, rect.key) + 5; |
| keyHeightPx = 16; |
| } |
| var valueWidthPx = tr.ui.b.getSVGTextWidth( |
| this.chartAreaElement, rect.value) + 5; |
| var valueHeightPx = 16; |
| var hoverWidthPx = Math.max(keyWidthPx, valueWidthPx); |
| var hoverTopPx = rect.topPx + (rect.heightPx / 2); |
| var hoverLeftPx = rect.leftPx + rect.widthPx - hoverWidthPx; |
| chartAreaSel |
| .append('rect') |
| .attr('class', 'hover') |
| .attr('fill', 'white') |
| .attr('x', hoverLeftPx) |
| .attr('y', hoverTopPx) |
| .attr('width', hoverWidthPx) |
| .attr('height', keyHeightPx + valueHeightPx); |
| if (seriesKeys.length > 1) { |
| chartAreaSel |
| .append('text') |
| .attr('class', 'hover') |
| .attr('fill', rect.color) |
| .attr('x', hoverLeftPx + 2) |
| .attr('y', hoverTopPx + keyHeightPx - 3) |
| .text(rect.key); |
| } |
| |
| chartAreaSel |
| .append('text') |
| .attr('class', 'hover') |
| .attr('fill', rect.color) |
| .attr('x', hoverLeftPx + 2) |
| .attr('y', hoverTopPx + keyHeightPx + valueHeightPx - 3) |
| .text(rect.value); |
| }, |
| |
| drawRect_: function(rect, sel) { |
| // Rotate |rect| 90 degrees counter-clockwise. |
| var colRect = { |
| key: rect.key, |
| value: rect.value, |
| color: rect.color, |
| topPx: rect.leftPx, |
| leftPx: this.chartAreaSize.width - rect.topPx - rect.heightPx, |
| widthPx: rect.heightPx, |
| heightPx: rect.widthPx, |
| }; |
| ColumnChart.prototype.drawRect_.call(this, colRect, sel); |
| } |
| }; |
| |
| return { |
| BarChart: BarChart |
| }; |
| }); |
| </script> |
