@gravity-ui/charts 1.8.0 → 1.10.0

package/dist/cjs/components/Axis/AxisX.d.ts

@@ -7,7 +7,8 @@ type Props = {
     height: number;
     scale: ChartScale;
     split: PreparedSplit;
-    plotRef?: React.MutableRefObject<SVGGElement | null>;
+    plotBeforeRef?: React.MutableRefObject<SVGGElement | null>;
+    plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
     leftmostLimit?: number;
 };
 export declare function getTitlePosition(args: {

package/dist/cjs/components/Axis/AxisX.js

@@ -42,149 +42,155 @@ export function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisX = React.memo(function AxisX(props) {
-    const { axis, width, height: totalHeight, scale, split, plotRef, leftmostLimit } = props;
+    const { axis, width, height: totalHeight, scale, split, plotBeforeRef, plotAfterRef, leftmostLimit, } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
-        if (!ref.current) {
-            return;
-        }
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
-        const plotClassName = b('plot-x');
-        let plotContainer = null;
-        if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
-            plotContainer = select(plotRef.current);
-            plotContainer.selectAll(`.${plotClassName}`).remove();
-        }
-        if (!axis.visible) {
-            return;
-        }
-        let tickItems = [];
-        if (axis.grid.enabled) {
-            tickItems = new Array(split.plots.length || 1).fill(null).map((_, index) => {
-                var _a, _b;
-                const top = ((_a = split.plots[index]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-                const height = ((_b = split.plots[index]) === null || _b === void 0 ? void 0 : _b.height) || totalHeight;
-                return [-top, -(top + height)];
-            });
-        }
-        const axisScale = scale;
-        const xAxisGenerator = axisBottom({
-            leftmostLimit,
-            scale: axisScale,
-            ticks: {
-                items: tickItems,
-                labelFormat: getLabelFormatter({ axis, scale }),
-                labelsPaddings: axis.labels.padding,
-                labelsMargin: axis.labels.margin,
-                labelsStyle: axis.labels.style,
-                labelsMaxWidth: axis.labels.maxWidth,
-                labelsLineHeight: axis.labels.lineHeight,
-                count: getTicksCount({ axis, range: width }),
-                maxTickCount: getMaxTickCount({ axis, width }),
-                rotation: axis.labels.rotation,
-            },
-            domain: {
-                size: width,
-                color: axis.lineColor,
-            },
-        });
-        svgElement.call(xAxisGenerator).attr('class', b());
-        // add an axis header if necessary
-        if (axis.title.text) {
-            const titleRows = getAxisTitleRows({ axis, textMaxWidth: width });
-            svgElement
-                .append('text')
-                .attr('class', b('title'))
-                .attr('transform', () => {
-                const { x, y } = getTitlePosition({ axis, width, rowCount: titleRows.length });
-                return `translate(${x}, ${y})`;
-            })
-                .attr('font-size', axis.title.style.fontSize)
-                .attr('text-anchor', 'middle')
-                .selectAll('tspan')
-                .data(titleRows)
-                .join('tspan')
-                .attr('x', 0)
-                .attr('y', (d) => d.y)
-                .text((d) => d.text)
-                .each((_d, index, nodes) => {
-                if (index === axis.title.maxRowCount - 1) {
-                    handleOverflowingText(nodes[index], width);
-                }
+        (async () => {
+            if (!ref.current) {
+                return;
+            }
+            const svgElement = select(ref.current);
+            svgElement.selectAll('*').remove();
+            const plotDataAttr = 'data-plot-x';
+            let plotBeforeContainer = null;
+            let plotAfterContainer = null;
+            if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
+                plotBeforeContainer = select(plotBeforeRef.current);
+                plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
+            }
+            if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
+                plotAfterContainer = select(plotAfterRef.current);
+                plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
+            }
+            if (!axis.visible) {
+                return;
+            }
+            let tickItems = [];
+            if (axis.grid.enabled) {
+                tickItems = new Array(split.plots.length || 1).fill(null).map((_, index) => {
+                    var _a, _b;
+                    const top = ((_a = split.plots[index]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+                    const height = ((_b = split.plots[index]) === null || _b === void 0 ? void 0 : _b.height) || totalHeight;
+                    return [-top, -(top + height)];
+                });
+            }
+            const axisScale = scale;
+            const xAxisGenerator = await axisBottom({
+                leftmostLimit,
+                scale: axisScale,
+                ticks: {
+                    items: tickItems,
+                    labelFormat: getLabelFormatter({ axis, scale }),
+                    labelsPaddings: axis.labels.padding,
+                    labelsMargin: axis.labels.margin,
+                    labelsStyle: axis.labels.style,
+                    labelsMaxWidth: axis.labels.maxWidth,
+                    labelsLineHeight: axis.labels.lineHeight,
+                    count: getTicksCount({ axis, range: width }),
+                    maxTickCount: getMaxTickCount({ axis, width }),
+                    rotation: axis.labels.rotation,
+                },
+                domain: {
+                    size: width,
+                    color: axis.lineColor,
+                },
             });
-        }
-        // add plot bands
-        if (plotContainer && axis.plotBands.length > 0) {
-            const plotBandClassName = b('plot-x-band');
-            const plotBandsSelection = plotContainer
-                .selectAll(`.${plotBandClassName}-x`)
-                .data(axis.plotBands)
-                .join('g')
-                .attr('class', `${plotClassName} ${plotBandClassName}-x`);
-            plotBandsSelection
-                .append('rect')
-                .attr('x', (band) => {
-                var _a, _b;
-                const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
-                const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
-                const startPos = halfBandwidth + Math.min(from, to);
-                return Math.max(0, startPos);
-            })
-                .attr('width', (band) => {
-                const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
-                const startPos = width - Math.min(from, to);
-                const endPos = Math.min(Math.abs(to - from), startPos);
-                return Math.min(endPos, width);
-            })
-                .attr('y', 0)
-                .attr('height', totalHeight)
-                .attr('fill', (band) => band.color)
-                .attr('opacity', (band) => band.opacity);
-            plotBandsSelection.each((plotBandData, i, nodes) => {
-                const plotLineSelection = select(nodes[i]);
-                if (plotBandData.layerPlacement === 'before') {
-                    plotLineSelection.lower();
-                }
-                else {
-                    plotLineSelection.raise();
-                }
-            });
-        }
-        // add plot lines
-        if (plotContainer && axis.plotLines.length > 0) {
-            const plotLineClassName = b('plot-x-line');
-            const plotLinesSelection = plotContainer
-                .selectAll(`.${plotLineClassName}`)
-                .data(axis.plotLines)
-                .join('g')
-                .attr('class', `${plotClassName} ${plotLineClassName}`);
-            const lineGenerator = line();
-            plotLinesSelection
-                .append('path')
-                .attr('d', (plotLine) => {
-                const plotLineValue = Number(axisScale(plotLine.value));
-                const points = [
-                    [plotLineValue, 0],
-                    [plotLineValue, totalHeight],
-                ];
-                return lineGenerator(points);
-            })
-                .attr('stroke', (plotLine) => plotLine.color)
-                .attr('stroke-width', (plotLine) => plotLine.width)
-                .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
-                .attr('opacity', (plotLine) => plotLine.opacity);
-            // set layer placement
-            plotLinesSelection.each((plotLineData, i, nodes) => {
-                const plotLineSelection = select(nodes[i]);
-                if (plotLineData.layerPlacement === 'before') {
-                    plotLineSelection.lower();
-                }
-                else {
-                    plotLineSelection.raise();
-                }
-            });
-        }
-    }, [axis, width, totalHeight, scale, split, plotRef, leftmostLimit]);
+            svgElement.call(xAxisGenerator).attr('class', b());
+            // add an axis header if necessary
+            if (axis.title.text) {
+                const titleRows = await getAxisTitleRows({ axis, textMaxWidth: width });
+                svgElement
+                    .append('text')
+                    .attr('class', b('title'))
+                    .attr('transform', () => {
+                    const { x, y } = getTitlePosition({ axis, width, rowCount: titleRows.length });
+                    return `translate(${x}, ${y})`;
+                })
+                    .attr('font-size', axis.title.style.fontSize)
+                    .attr('text-anchor', 'middle')
+                    .selectAll('tspan')
+                    .data(titleRows)
+                    .join('tspan')
+                    .attr('x', 0)
+                    .attr('y', (d) => d.y)
+                    .text((d) => d.text)
+                    .each((_d, index, nodes) => {
+                    if (index === axis.title.maxRowCount - 1) {
+                        handleOverflowingText(nodes[index], width);
+                    }
+                });
+            }
+            // add plot bands
+            if (axis.plotBands.length > 0) {
+                const plotBandDataAttr = 'plot-x-band';
+                const setPlotBands = (plotContainer, plotBands) => {
+                    if (!plotContainer || !plotBands.length) {
+                        return;
+                    }
+                    const plotBandsSelection = plotContainer
+                        .selectAll(`[${plotBandDataAttr}]`)
+                        .remove()
+                        .data(plotBands)
+                        .join('g')
+                        .attr(plotDataAttr, 1)
+                        .attr(plotBandDataAttr, 1);
+                    plotBandsSelection
+                        .append('rect')
+                        .attr('x', (band) => {
+                        var _a, _b;
+                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
+                        const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
+                        const startPos = halfBandwidth + Math.min(from, to);
+                        return Math.max(0, startPos);
+                    })
+                        .attr('width', (band) => {
+                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
+                        const startPos = width - Math.min(from, to);
+                        const endPos = Math.min(Math.abs(to - from), startPos);
+                        return Math.min(endPos, width);
+                    })
+                        .attr('y', 0)
+                        .attr('height', totalHeight)
+                        .attr('fill', (band) => band.color)
+                        .attr('opacity', (band) => band.opacity);
+                };
+                setPlotBands(plotBeforeContainer, axis.plotBands.filter((d) => d.layerPlacement === 'before'));
+                setPlotBands(plotAfterContainer, axis.plotBands.filter((d) => d.layerPlacement === 'after'));
+            }
+            // add plot lines
+            if (axis.plotLines.length > 0) {
+                const plotLineDataAttr = 'plot-x-line';
+                const setPlotLines = (plotContainer, plotLines) => {
+                    if (!plotContainer || !plotLines.length) {
+                        return;
+                    }
+                    const plotLinesSelection = plotContainer
+                        .selectAll(`[${plotLineDataAttr}]`)
+                        .remove()
+                        .data(plotLines)
+                        .join('g')
+                        .attr(plotDataAttr, 1)
+                        .attr(plotLineDataAttr, 1);
+                    const lineGenerator = line();
+                    plotLinesSelection
+                        .append('path')
+                        .attr('d', (plotLine) => {
+                        const plotLineValue = Number(axisScale(plotLine.value));
+                        const points = [
+                            [plotLineValue, 0],
+                            [plotLineValue, totalHeight],
+                        ];
+                        return lineGenerator(points);
+                    })
+                        .attr('stroke', (plotLine) => plotLine.color)
+                        .attr('stroke-width', (plotLine) => plotLine.width)
+                        .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
+                        .attr('opacity', (plotLine) => plotLine.opacity);
+                };
+                setPlotLines(plotBeforeContainer, axis.plotLines.filter((d) => d.layerPlacement === 'before'));
+                setPlotLines(plotAfterContainer, axis.plotLines.filter((d) => d.layerPlacement === 'after'));
+            }
+        })();
+    }, [axis, width, totalHeight, scale, split, leftmostLimit, plotBeforeRef, plotAfterRef]);
     return React.createElement("g", { ref: ref });
 });

package/dist/cjs/components/Axis/AxisY.d.ts

@@ -7,7 +7,8 @@ type Props = {
     width: number;
     height: number;
     split: PreparedSplit;
-    plotRef?: React.MutableRefObject<SVGGElement | null>;
+    plotBeforeRef?: React.MutableRefObject<SVGGElement | null>;
+    plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
     bottomLimit?: number;
 };
 export declare const AxisY: (props: Props) => React.JSX.Element;

package/dist/cjs/components/Axis/AxisY.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { axisLeft, axisRight, line, select } from 'd3';
-import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
+import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisPlotsPosition, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
 import './styles.css';
 const b = block('axis');
 function transformLabel(args) {
@@ -85,7 +85,7 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes: allAxes, width, height: totalHeight, scale, split, plotRef, bottomLimit = 0, } = props;
+    const { axes: allAxes, width, height: totalHeight, scale, split, plotBeforeRef, plotAfterRef, bottomLimit = 0, } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     const lineGenerator = line();
@@ -96,40 +96,23 @@ export const AxisY = (props) => {
         const axes = allAxes.filter((a) => a.visible);
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
-        let plotContainer = null;
-        const plotClassName = b('plot-y');
-        if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
-            plotContainer = select(plotRef.current);
-            plotContainer.selectAll(`.${plotClassName}`).remove();
+        let plotBeforeContainer = null;
+        let plotAfterContainer = null;
+        const plotDataAttr = 'data-plot-y';
+        if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
+            plotBeforeContainer = select(plotBeforeRef.current);
+            plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
+        }
+        if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
+            plotAfterContainer = select(plotAfterRef.current);
+            plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
-        const getAxisPosition = (axis) => {
-            var _a;
-            const top = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-            if (axis.position === 'left') {
-                return `translate(0, ${top}px)`;
-            }
-            return `translate(${width}px, 0)`;
-        };
-        const plotLines = axes.reduce((acc, axis) => {
-            if (axis.plotLines.length) {
-                acc.push(...axis.plotLines.map((plotLine) => {
-                    return Object.assign(Object.assign({}, plotLine), { transform: getAxisPosition(axis) });
-                }));
-            }
-            return acc;
-        }, []);
-        const plotBands = axes.reduce((acc, axis) => {
-            if (axis.plotBands.length) {
-                acc.push(...axis.plotBands.map((plotBand) => (Object.assign(Object.assign({}, plotBand), { transform: getAxisPosition(axis) }))));
-            }
-            return acc;
-        }, []);
         const axisSelection = svgElement
             .selectAll('axis')
             .data(axes)
             .join('g')
             .attr('class', b())
-            .style('transform', (d) => getAxisPosition(d));
+            .style('transform', (d) => getAxisPlotsPosition(d, split, width));
         axisSelection.each((d, index, node) => {
             const seriesScale = scale[index];
             const axisItem = select(node[index]);
@@ -196,74 +179,74 @@ export const AxisY = (props) => {
                 })
                     .remove();
             }
-            if (plotContainer && d.plotBands.length > 0) {
-                const plotBandClassName = b('plot-y-band');
-                const plotBandsSelection = plotContainer
-                    .selectAll(`.${plotBandClassName}`)
-                    .data(plotBands)
-                    .join('g')
-                    .attr('class', `${plotClassName} ${plotBandClassName}`)
-                    .style('transform', (plotBand) => plotBand.transform);
-                plotBandsSelection
-                    .append('rect')
-                    .attr('x', 0)
-                    .attr('width', width)
-                    .attr('y', (band) => {
-                    var _a, _b;
-                    const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
-                    const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
-                    const startPos = halfBandwidth + Math.min(from, to);
-                    return Math.max(0, startPos);
-                })
-                    .attr('height', (band) => {
-                    const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
-                    const startPos = height - Math.min(from, to);
-                    const endPos = Math.min(Math.abs(to - from), startPos);
-                    return Math.min(endPos, height);
-                })
-                    .attr('fill', (band) => band.color)
-                    .attr('opacity', (band) => band.opacity);
-                plotBandsSelection.each((plotBandData, i, nodes) => {
-                    const plotLineSelection = select(nodes[i]);
-                    if (plotBandData.layerPlacement === 'before') {
-                        plotLineSelection.lower();
+            if (d.plotBands.length > 0) {
+                const plotBandDataAttr = `data-plot-y-band-${index}`;
+                const setPlotBands = (plotContainer, plotBands) => {
+                    if (!plotContainer || !plotBands.length) {
+                        return;
                     }
-                    else {
-                        plotLineSelection.raise();
-                    }
-                });
+                    const plotBandsSelection = plotContainer
+                        .selectAll(`[${plotBandDataAttr}]`)
+                        .remove()
+                        .data(plotBands)
+                        .join('g')
+                        .attr(plotDataAttr, 1)
+                        .attr(plotBandDataAttr, 1)
+                        .style('transform', getAxisPlotsPosition(d, split));
+                    plotBandsSelection
+                        .append('rect')
+                        .attr('x', 0)
+                        .attr('width', width)
+                        .attr('y', (band) => {
+                        var _a, _b;
+                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
+                        const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
+                        const startPos = halfBandwidth + Math.min(from, to);
+                        return Math.max(0, startPos);
+                    })
+                        .attr('height', (band) => {
+                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
+                        const startPos = height - Math.min(from, to);
+                        const endPos = Math.min(Math.abs(to - from), startPos);
+                        return Math.min(endPos, height);
+                    })
+                        .attr('fill', (band) => band.color)
+                        .attr('opacity', (band) => band.opacity);
+                };
+                setPlotBands(plotBeforeContainer, d.plotBands.filter((item) => item.layerPlacement === 'before'));
+                setPlotBands(plotAfterContainer, d.plotBands.filter((item) => item.layerPlacement === 'after'));
             }
-            if (plotContainer && d.plotLines.length > 0) {
-                const plotLineClassName = b('plot-y-line');
-                const plotLinesSelection = plotContainer
-                    .selectAll(`.${plotLineClassName}`)
-                    .data(plotLines)
-                    .join('g')
-                    .attr('class', `${plotClassName} ${plotLineClassName}`)
-                    .style('transform', (plotLine) => plotLine.transform);
-                plotLinesSelection
-                    .append('path')
-                    .attr('d', (plotLine) => {
-                    const plotLineValue = Number(axisScale(plotLine.value));
-                    const points = [
-                        [0, plotLineValue],
-                        [width, plotLineValue],
-                    ];
-                    return lineGenerator(points);
-                })
-                    .attr('stroke', (plotLine) => plotLine.color)
-                    .attr('stroke-width', (plotLine) => plotLine.width)
-                    .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
-                    .attr('opacity', (plotLine) => plotLine.opacity);
-                plotLinesSelection.each((plotLineData, i, nodes) => {
-                    const plotLineSelection = select(nodes[i]);
-                    if (plotLineData.layerPlacement === 'before') {
-                        plotLineSelection.lower();
-                    }
-                    else {
-                        plotLineSelection.raise();
+            if (d.plotLines.length > 0) {
+                const plotLineDataAttr = `data-plot-y-line-${index}`;
+                const setPlotLines = (plotContainer, plotLines) => {
+                    if (!plotContainer || !plotLines.length) {
+                        return;
                     }
-                });
+                    const plotLinesSelection = plotContainer
+                        .selectAll(`[${plotLineDataAttr}]`)
+                        .remove()
+                        .data(plotLines)
+                        .join('g')
+                        .attr(plotDataAttr, 1)
+                        .attr(plotLineDataAttr, 1)
+                        .style('transform', getAxisPlotsPosition(d, split));
+                    plotLinesSelection
+                        .append('path')
+                        .attr('d', (plotLine) => {
+                        const plotLineValue = Number(axisScale(plotLine.value));
+                        const points = [
+                            [0, plotLineValue],
+                            [width, plotLineValue],
+                        ];
+                        return lineGenerator(points);
+                    })
+                        .attr('stroke', (plotLine) => plotLine.color)
+                        .attr('stroke-width', (plotLine) => plotLine.width)
+                        .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
+                        .attr('opacity', (plotLine) => plotLine.opacity);
+                };
+                setPlotLines(plotBeforeContainer, d.plotLines.filter((item) => item.layerPlacement === 'before'));
+                setPlotLines(plotAfterContainer, d.plotLines.filter((item) => item.layerPlacement === 'after'));
             }
             return axisItem;
         });
@@ -289,28 +272,47 @@ export const AxisY = (props) => {
             .attr('class', b('title'))
             .attr('text-anchor', 'middle')
             .attr('font-size', (d) => d.title.style.fontSize)
-            .attr('transform', (d) => {
-            const titleRows = wrapText({
-                text: d.title.text,
-                style: d.title.style,
-                width: height,
+            .call(async (s) => {
+            s.each(async function prepareAxisTitle(d) {
+                if (!this) {
+                    return;
+                }
+                const selection = select(this);
+                const titleRows = await wrapText({
+                    text: d.title.text,
+                    style: d.title.style,
+                    width: height,
+                });
+                const rowCount = Math.min(titleRows.length, d.title.maxRowCount);
+                const { x, y } = getTitlePosition({ axis: d, axisHeight: height, rowCount });
+                const angle = d.position === 'left' ? -90 : 90;
+                selection.attr('transform', `translate(${x}, ${y}) rotate(${angle})`);
+                const axisTitleRows = await getAxisTitleRows({ axis: d, textMaxWidth: height });
+                selection
+                    .selectAll('tspan')
+                    .data(axisTitleRows)
+                    .join('tspan')
+                    .attr('x', 0)
+                    .attr('y', (titleRow) => titleRow.y)
+                    .text((titleRow) => titleRow.text)
+                    .each((_d, index, nodes) => {
+                    if (index === nodes.length - 1) {
+                        handleOverflowingText(nodes[index], height);
+                    }
+                });
             });
-            const rowCount = Math.min(titleRows.length, d.title.maxRowCount);
-            const { x, y } = getTitlePosition({ axis: d, axisHeight: height, rowCount });
-            const angle = d.position === 'left' ? -90 : 90;
-            return `translate(${x}, ${y}) rotate(${angle})`;
-        })
-            .selectAll('tspan')
-            .data((d) => getAxisTitleRows({ axis: d, textMaxWidth: height }))
-            .join('tspan')
-            .attr('x', 0)
-            .attr('y', (d) => d.y)
-            .text((d) => d.text)
-            .each((_d, index, nodes) => {
-            if (index === nodes.length - 1) {
-                handleOverflowingText(nodes[index], height);
-            }
+            return s;
         });
-    }, [allAxes, width, height, scale, split, bottomLimit]);
+    }, [
+        allAxes,
+        width,
+        height,
+        scale,
+        split,
+        bottomLimit,
+        lineGenerator,
+        plotBeforeRef,
+        plotAfterRef,
+    ]);
     return React.createElement("g", { ref: ref, className: b('container') });
 };