private renderYAxis()

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)`);
                });
        }
    }