| Index: tracing/tracing/ui/base/bar_chart.html
|
| diff --git a/tracing/tracing/ui/base/bar_chart.html b/tracing/tracing/ui/base/bar_chart.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..45fd174f70e514bc1613320275e229ad5471b4ad
|
| --- /dev/null
|
| +++ b/tracing/tracing/ui/base/bar_chart.html
|
| @@ -0,0 +1,139 @@
|
| +<!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>
|
|
|
Chromium Code Reviews
Issue 2329843002:
Add BarChart. (Closed)
