in packages/timebrush/src/TimeBrush.ts [554:624]
private renderYAxis(margin: any) {
const actualDims = this.element[0].getBoundingClientRect();
const actualWidth = actualDims.right - actualDims.left;
// Default to 1 if we have no data
const scale = actualWidth > 0 && this.dimensions.width > 0 ? this.dimensions.width / actualWidth : 1;
// Add some padding for the y axis labels and legend
const legendHeight = this.legendHeight();
margin.top = (this.showYAxis || legendHeight > 0) ? 10 * scale : 0;
// Update the y axis scale
const height = this._dimensions.height - margin.top - margin.bottom;
const tickCount = Math.max(height / 50, 1);
this.y
// Setting domain here, because `nice` alters the domain
// So if we don't keep setting the domain, nice will keep altering the domain such that it becomes huge
// You basically see this if you resize timebrush too small repeatedly
.domain(this.yDomain.slice(0))
.range([height, 0 + legendHeight])
.nice(tickCount);
// hide/show the y axis
this.yAxis.style("display", this.showYAxis ? null : "none");
if (this.showYAxis) {
const orientation = this.yAxisPosition === AxisPosition.Left ? "left" : "right";
this.yAxis
.call(d3.svg.axis()
.scale(this.y)
.orient(orientation)
.ticks(tickCount))
.call((sel) => {
let yAxisWidth = 0;
const axisPadding = 10;
// Do some calculations to know how much to strink the chart area
sel.selectAll("text").each(function() {
const rect = (<Element>this).getBoundingClientRect();
const textWidth = rect.right - rect.left;
if (textWidth > yAxisWidth) {
yAxisWidth = textWidth;
}
});
yAxisWidth *= scale;
margin[orientation] = axisPadding + yAxisWidth;
const width = this._dimensions.width - margin.left - margin.right;
// Right now we don't need to see the domain line (the vertical line next to the Y axis labels)
sel.select(".domain").remove();
// If we are supposed to render reference lines, then color and size them appropriately
const referenceLines = sel.selectAll("line");
if (this.showYAxisReferenceLines) {
const refWidth = width - (axisPadding / 2);
referenceLines
.style("stroke", this.yAxisReferenceLineColor)
.attr("x2", orientation === "left" ? refWidth : -refWidth);
}
referenceLines.style("display", this.showYAxisReferenceLines ? null : "none");
const yAxisPosition =
orientation === "left" ?
axisPadding / 2 :
this.dimensions.width - yAxisWidth - margin.left - (axisPadding * 1.5);
// Moves the axis to the correct position
sel.attr("transform", () => `translate(${yAxisPosition}, 0)`);
});
}
}