@gravity-ui/charts 1.26.1 → 1.27.1

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

@@ -1,26 +1,11 @@
 import React from 'react';
-import type { ChartScale, PreparedSplit, PreparedXAxis } from '../../hooks';
+import type { AxisXData } from './types';
 import './styles.css';
-type Props = {
-    axis: PreparedXAxis;
-    boundsOffsetLeft: number;
-    boundsOffsetTop: number;
-    height: number;
+interface Props {
+    preparedAxisData: AxisXData;
     htmlLayout: HTMLElement | null;
-    scale: ChartScale;
-    split: PreparedSplit;
-    width: number;
-    leftmostLimit?: number;
     plotBeforeRef?: React.MutableRefObject<SVGGElement | null>;
     plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
-};
-export declare function getTitlePosition(args: {
-    axis: PreparedXAxis;
-    width: number;
-    rowCount: number;
-}): {
-    x: number;
-    y: number;
-};
-export declare const AxisX: React.NamedExoticComponent<Props>;
+}
+export declare const AxisX: (props: Props) => React.JSX.Element;
 export {};

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

@@ -1,227 +1,182 @@
 import React from 'react';
 import { line, select } from 'd3';
-import { block, getAxisTitleRows, getBandsPosition, getLabelFormatter, getLineDashArray, getMaxTickCount, getTicksCount, handleOverflowingText, } from '../../utils';
-import { axisBottom } from '../../utils/chart/axis-generators';
+import { HtmlLayer } from '../../hooks/useShapes/HtmlLayer';
+import { block, getLineDashArray } from '../../utils';
 import './styles.css';
-const b = block('axis');
-export function getTitlePosition(args) {
-    const { axis, width, rowCount } = args;
-    if (rowCount < 1) {
-        return { x: 0, y: 0 };
-    }
-    let x;
-    const y = axis.title.height / rowCount + axis.title.margin + axis.labels.height + axis.labels.margin;
-    switch (axis.title.align) {
-        case 'left': {
-            x = axis.title.width / 2;
-            break;
+const b = block('x-axis');
+export const AxisX = (props) => {
+    const { htmlLayout, plotBeforeRef, plotAfterRef, preparedAxisData } = props;
+    const ref = React.useRef(null);
+    const lineGenerator = line();
+    const htmlLabels = preparedAxisData.ticks.map((d) => d.htmlLabel).filter(Boolean);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
         }
-        case 'right': {
-            x = width - axis.title.width / 2;
-            break;
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        let plotBeforeContainer = null;
+        let plotAfterContainer = null;
+        const plotDataAttr = 'data-plot-x';
+        if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
+            plotBeforeContainer = select(plotBeforeRef.current);
+            plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
-        case 'center': {
-            x = width / 2;
-            break;
+        if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
+            plotAfterContainer = select(plotAfterRef.current);
+            plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
-    }
-    return { x, y };
-}
-export const AxisX = React.memo(function AxisX(props) {
-    const { axis, boundsOffsetLeft, boundsOffsetTop, height: totalHeight, htmlLayout, leftmostLimit, plotAfterRef, plotBeforeRef, split, scale, width, } = props;
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        (async () => {
-            if (!ref.current || !htmlLayout) {
-                return;
-            }
-            const svgElement = select(ref.current);
-            svgElement.selectAll('*').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)];
-                });
+        if (preparedAxisData.title) {
+            svgElement
+                .append('g')
+                .attr('class', b('title'))
+                .append('text')
+                .attr('text-anchor', 'start')
+                .style('dominant-baseline', 'text-after-edge')
+                .style('transform', `translate(${preparedAxisData.title.x}px, ${preparedAxisData.title.y}px) rotate(${preparedAxisData.title.rotate}deg) translate(0px, ${preparedAxisData.title.offset}px)`)
+                .attr('font-size', preparedAxisData.title.style.fontSize)
+                .selectAll('tspan')
+                .data(preparedAxisData.title.content)
+                .join('tspan')
+                .html((d) => d.text)
+                .attr('x', (d) => d.x)
+                .attr('y', (d) => d.y)
+                .attr('text-anchor', 'start');
+        }
+        if (preparedAxisData.domain) {
+            svgElement
+                .append('path')
+                .attr('class', b('domain'))
+                .attr('d', lineGenerator([preparedAxisData.domain.start, preparedAxisData.domain.end]))
+                .style('stroke', preparedAxisData.domain.lineColor);
+        }
+        const tickClassName = b('tick');
+        const ticks = svgElement
+            .selectAll(`.${tickClassName}`)
+            .remove()
+            .data(preparedAxisData.ticks)
+            .join('g')
+            .attr('class', tickClassName);
+        const labelClassName = b('label');
+        ticks.each(function () {
+            var _a;
+            const tickSelection = select(this);
+            const tickData = tickSelection.datum();
+            if (tickData.line) {
+                tickSelection.append('path').attr('d', lineGenerator(tickData.line.points));
             }
-            const axisScale = scale;
-            const xAxisGenerator = await axisBottom({
-                boundsOffsetLeft,
-                boundsOffsetTop,
-                domain: {
-                    size: width,
-                    color: axis.lineColor,
-                },
-                htmlLayout,
-                leftmostLimit,
-                scale: axisScale,
-                ticks: {
-                    count: getTicksCount({ axis, range: width }),
-                    labelsHtml: axis.labels.html,
-                    items: tickItems,
-                    labelFormat: getLabelFormatter({ axis, scale }),
-                    labelsHeight: axis.labels.height,
-                    labelsLineHeight: axis.labels.lineHeight,
-                    labelsMargin: axis.labels.margin,
-                    labelsMaxWidth: axis.labels.maxWidth,
-                    labelsPaddings: axis.labels.padding,
-                    labelsStyle: axis.labels.style,
-                    maxTickCount: getMaxTickCount({ axis, width }),
-                    rotation: axis.labels.rotation,
-                },
-            });
-            svgElement.call(xAxisGenerator).attr('class', b());
-            // add an axis header if necessary
-            if (axis.title.text) {
-                const titleRows = await getAxisTitleRows({ axis, textMaxWidth: width });
-                const titleClassName = b('title');
-                svgElement.selectAll(`.${titleClassName}`).remove();
-                svgElement
+            if (tickData.svgLabel) {
+                const label = tickData.svgLabel;
+                const textSelection = tickSelection
                     .append('text')
-                    .attr('class', titleClassName)
-                    .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')
+                    .style('transform', [
+                    `translate(${label.x}px, ${label.y}px)`,
+                    label.angle ? `rotate(${label.angle}deg)` : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '));
+                if (label.title) {
+                    textSelection.append('title').html(label.title);
+                }
+                textSelection
                     .selectAll('tspan')
-                    .data(titleRows)
+                    .data(label.content)
                     .join('tspan')
-                    .attr('x', 0)
+                    .html((d) => d.text)
+                    .attr('x', (d) => d.x)
                     .attr('y', (d) => d.y)
-                    .text((d) => d.text)
-                    .each((_d, index, nodes) => {
-                    if (index === axis.title.maxRowCount - 1) {
-                        handleOverflowingText(nodes[index], width);
-                    }
-                });
+                    .attr('text-anchor', 'start')
+                    .attr('class', labelClassName)
+                    .style('dominant-baseline', 'text-before-edge')
+                    .style('font-size', label.style.fontSize)
+                    .style('fill', (_a = label.style.fontColor) !== null && _a !== void 0 ? _a : '');
             }
-            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();
-            }
-            // 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.each(function () {
-                        var _a, _b, _c, _e;
-                        const plotBandSelection = select(this);
-                        const band = plotBandSelection.datum();
-                        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);
-                        const x = Math.max(0, startPos);
+        });
+        if (preparedAxisData.plotBands.length > 0) {
+            const plotBandDataAttr = `data-plot-x-band-${preparedAxisData.id}`;
+            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)
+                    .style('transform', (d) => `translate(${d.x}px, ${d.y}px)`);
+                plotBandsSelection
+                    .append('rect')
+                    .attr('width', (d) => d.width)
+                    .attr('height', (d) => d.height)
+                    .attr('fill', (d) => d.color)
+                    .attr('opacity', (d) => d.opacity);
+                plotBandsSelection.each(function () {
+                    var _a, _b;
+                    const plotBandSelection = select(this);
+                    const band = plotBandSelection.datum();
+                    const label = band.label;
+                    if (label) {
                         plotBandSelection
-                            .append('rect')
-                            .attr('x', x)
-                            .attr('width', () => {
-                            const endPos = Math.min(Math.abs(to - from), width - Math.min(from, to));
-                            return Math.min(endPos, width);
-                        })
-                            .attr('y', 0)
-                            .attr('height', totalHeight)
-                            .attr('fill', () => band.color)
-                            .attr('opacity', () => band.opacity);
-                        if (band.label.text) {
-                            const labelPadding = (_e = (_c = band.label) === null || _c === void 0 ? void 0 : _c.padding) !== null && _e !== void 0 ? _e : 0;
-                            plotBandSelection
-                                .append('text')
-                                .text(band.label.text)
-                                .style('fill', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontColor) !== null && _b !== void 0 ? _b : null; })
-                                .style('font-size', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : null; })
-                                .style('font-weight', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontWeight) !== null && _b !== void 0 ? _b : null; })
-                                .style('dominant-baseline', 'text-before-edge')
-                                .style('text-anchor', 'end')
-                                .style('transform', `translate(${x + labelPadding}px, ${labelPadding}px) rotate(-90deg)`);
-                        }
-                    });
-                };
-                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;
+                            .append('text')
+                            .html(label.text)
+                            .style('fill', (_a = label.style.fontColor) !== null && _a !== void 0 ? _a : '')
+                            .style('font-size', label.style.fontSize)
+                            .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
+                            .style('dominant-baseline', 'text-before-edge')
+                            .style('text-anchor', 'start')
+                            .style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`);
                     }
-                    const plotLinesSelection = plotContainer
-                        .selectAll(`[${plotLineDataAttr}]`)
-                        .remove()
-                        .data(plotLines)
-                        .join('g')
-                        .attr(plotDataAttr, 1)
-                        .attr(plotLineDataAttr, 1);
-                    const lineGenerator = line();
-                    plotLinesSelection.each(function () {
-                        const itemSelection = select(this);
-                        const plotLine = itemSelection.datum();
-                        const plotLineValue = Number(axisScale(plotLine.value));
-                        const points = [
-                            [plotLineValue, 0],
-                            [plotLineValue, totalHeight],
-                        ];
+                });
+            };
+            setPlotBands(plotBeforeContainer, preparedAxisData.plotBands.filter((item) => item.layerPlacement === 'before'));
+            setPlotBands(plotAfterContainer, preparedAxisData.plotBands.filter((item) => item.layerPlacement === 'after'));
+        }
+        if (preparedAxisData.plotLines.length > 0) {
+            const plotLineDataAttr = `data-plot-x-line-${preparedAxisData.id}`;
+            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', (d) => `translate(${d.x}px, ${d.y}px)`);
+                plotLinesSelection
+                    .append('path')
+                    .attr('d', (d) => lineGenerator(d.points))
+                    .attr('stroke', (d) => d.color)
+                    .attr('stroke-width', (d) => d.lineWidth)
+                    .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
+                    .attr('opacity', (d) => d.opacity);
+                plotLinesSelection.each(function () {
+                    var _a, _b;
+                    const itemSelection = select(this);
+                    const plotLine = itemSelection.datum();
+                    const label = plotLine.label;
+                    if (label) {
                         itemSelection
-                            .append('path')
-                            .attr('d', lineGenerator(points))
-                            .attr('stroke', plotLine.color)
-                            .attr('stroke-width', plotLine.width)
-                            .attr('stroke-dasharray', getLineDashArray(plotLine.dashStyle, plotLine.width))
-                            .attr('opacity', plotLine.opacity);
-                        if (plotLine.label.text) {
-                            itemSelection
-                                .append('text')
-                                .text(plotLine.label.text)
-                                .style('fill', () => { var _a; return (_a = plotLine.label.style.fontColor) !== null && _a !== void 0 ? _a : null; })
-                                .attr('font-size', plotLine.label.style.fontSize)
-                                .style('font-weight', () => { var _a; return (_a = plotLine.label.style.fontWeight) !== null && _a !== void 0 ? _a : null; })
-                                .style('dominant-baseline', 'text-after-edge')
-                                .style('text-anchor', 'end')
-                                .style('transform', `translate(${plotLineValue - plotLine.label.padding}px, ${plotLine.label.padding}px) rotate(-90deg)`);
-                        }
-                    });
-                };
-                setPlotLines(plotBeforeContainer, axis.plotLines.filter((d) => d.layerPlacement === 'before'));
-                setPlotLines(plotAfterContainer, axis.plotLines.filter((d) => d.layerPlacement === 'after'));
-            }
-        })();
-    }, [
-        axis,
-        boundsOffsetLeft,
-        boundsOffsetTop,
-        htmlLayout,
-        leftmostLimit,
-        plotAfterRef,
-        plotBeforeRef,
-        scale,
-        split,
-        totalHeight,
-        width,
-    ]);
-    return React.createElement("g", { ref: ref });
-});
+                            .append('text')
+                            .text(label.text)
+                            .style('fill', (_a = label.style.fontColor) !== null && _a !== void 0 ? _a : '')
+                            .style('font-size', label.style.fontSize)
+                            .style('font-weight', (_b = label.style.fontWeight) !== null && _b !== void 0 ? _b : '')
+                            .style('dominant-baseline', 'text-before-edge')
+                            .style('text-anchor', 'start')
+                            .style('transform', `translate(${label.x}px, ${label.y}px) rotate(${label.rotate}deg)`);
+                    }
+                });
+            };
+            setPlotLines(plotBeforeContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'before'));
+            setPlotLines(plotAfterContainer, preparedAxisData.plotLines.filter((item) => item.layerPlacement === 'after'));
+        }
+    }, [lineGenerator, plotAfterRef, plotBeforeRef, preparedAxisData]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HtmlLayer, { preparedData: { htmlElements: htmlLabels }, htmlLayout: htmlLayout }),
+        React.createElement("g", { ref: ref, className: b() })));
+};

package/dist/cjs/components/AxisX/prepare-axis-data.d.ts

@@ -0,0 +1,12 @@
+import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
+import type { AxisXData } from './types';
+export declare function prepareXAxisData({ axis, yAxis, scale, boundsWidth, boundsOffsetLeft, boundsOffsetRight, height, split, }: {
+    axis: PreparedAxis;
+    yAxis: PreparedAxis[];
+    scale: ChartScale;
+    boundsWidth: number;
+    boundsOffsetLeft: number;
+    boundsOffsetRight: number;
+    height: number;
+    split: PreparedSplit;
+}): Promise<AxisXData[]>;