@gravity-ui/charts 1.13.2 → 1.14.0

package/dist/cjs/utils/chart/axis-generators/bottom.js

@@ -2,6 +2,7 @@ import { path, select } from 'd3';
 import { getXAxisItems, getXAxisOffset, getXTickPosition } from '../axis';
 import { calculateCos, calculateSin } from '../math';
 import { getLabelsSize, setEllipsisForOverflowText } from '../text';
+const AXIS_BOTTOM_HTML_LABELS_DATA_ATTR = 'data-axis-bottom-html-labels';
 function addDomain(selection, options) {
     const { size, color } = options;
     const domainPath = selection
@@ -15,8 +16,139 @@ function addDomain(selection, options) {
         domainPath.style('stroke', color);
     }
 }
+function appendSvgLabels(args) {
+    var _a;
+    const { leftmostLimit, right, ticksSelection, ticks, transform, translateY, x } = args;
+    ticksSelection
+        .append('text')
+        .html(ticks.labelFormat)
+        .style('font-size', ((_a = ticks.labelsStyle) === null || _a === void 0 ? void 0 : _a.fontSize) || '')
+        .attr('fill', 'currentColor')
+        .attr('text-anchor', () => {
+        if (ticks.rotation) {
+            return ticks.rotation > 0 ? 'start' : 'end';
+        }
+        return 'middle';
+    })
+        .style('transform', transform)
+        .style('dominant-baseline', 'text-after-edge');
+    const labels = ticksSelection.selectAll('.tick text');
+    // FIXME: handle rotated overlapping labels (with a smarter approach)
+    if (ticks.rotation) {
+        const maxWidth = ticks.labelsMaxWidth * calculateCos(ticks.rotation) +
+            ticks.labelsLineHeight * calculateSin(ticks.rotation);
+        labels.each(function () {
+            setEllipsisForOverflowText(select(this), maxWidth);
+        });
+    }
+    else {
+        let elementX = 0;
+        // add an ellipsis to the labels that go beyond the boundaries of the chart
+        // and remove overlapping labels
+        labels
+            .nodes()
+            .map((element) => {
+            const r = element.getBoundingClientRect();
+            return {
+                left: r.left,
+                right: r.right,
+                node: element,
+            };
+        }, {})
+            .sort((a, b) => {
+            return a.left - b.left;
+        })
+            .forEach(function (item, i, nodes) {
+            var _a, _b, _c, _d;
+            const { node, left, right: currentElementPositionRigth } = item;
+            const currentElement = node;
+            if (i === 0) {
+                const text = select(currentElement);
+                const nextElement = (_a = nodes[i + 1]) === null || _a === void 0 ? void 0 : _a.node;
+                const nextElementPosition = nextElement === null || nextElement === void 0 ? void 0 : nextElement.getBoundingClientRect();
+                if (left < leftmostLimit) {
+                    const rightmostPossiblePoint = (_b = nextElementPosition === null || nextElementPosition === void 0 ? void 0 : nextElementPosition.left) !== null && _b !== void 0 ? _b : right;
+                    const remainSpace = rightmostPossiblePoint -
+                        currentElementPositionRigth +
+                        x -
+                        ticks.labelsMargin;
+                    text.attr('text-anchor', 'start');
+                    setEllipsisForOverflowText(text, remainSpace);
+                }
+            }
+            else {
+                if (left < elementX) {
+                    (_c = currentElement.closest('.tick')) === null || _c === void 0 ? void 0 : _c.remove();
+                    return;
+                }
+                elementX = currentElementPositionRigth + ticks.labelsPaddings;
+                if (i === nodes.length - 1) {
+                    const prevElement = (_d = nodes[i - 1]) === null || _d === void 0 ? void 0 : _d.node;
+                    const text = select(currentElement);
+                    const prevElementPosition = prevElement === null || prevElement === void 0 ? void 0 : prevElement.getBoundingClientRect();
+                    const lackingSpace = Math.max(0, currentElementPositionRigth - right);
+                    if (lackingSpace) {
+                        const remainSpace = right - ((prevElementPosition === null || prevElementPosition === void 0 ? void 0 : prevElementPosition.right) || 0) - ticks.labelsPaddings;
+                        const translateX = -lackingSpace;
+                        text.style('transform', `translate(${translateX}px,${translateY}px)`);
+                        setEllipsisForOverflowText(text, remainSpace);
+                    }
+                }
+            }
+        });
+    }
+}
+function appendHtmlLabels(args) {
+    const { htmlSelection, labelsData, right, ticks } = args;
+    htmlSelection
+        .append('div')
+        .attr(AXIS_BOTTOM_HTML_LABELS_DATA_ATTR, 1)
+        .style('position', 'absolute');
+    labelsData.forEach((label) => {
+        var _a;
+        htmlSelection
+            .selectAll(`[${AXIS_BOTTOM_HTML_LABELS_DATA_ATTR}]`)
+            .data([label])
+            .append('div')
+            .html(function (d) {
+            return ticks.labelFormat(d.content);
+        })
+            .style('font-size', ((_a = ticks.labelsStyle) === null || _a === void 0 ? void 0 : _a.fontSize) || '')
+            .style('position', 'absolute')
+            .style('white-space', 'nowrap')
+            .style('color', 'var(--g-color-text-secondary)')
+            .style('overflow', 'hidden')
+            .style('text-overflow', 'ellipsis')
+            .style('left', function (d) {
+            const rect = this.getBoundingClientRect();
+            return `${d.left - rect.width / 2}px`;
+        })
+            .style('top', function (d) {
+            return `${d.top}px`;
+        });
+    });
+    const labelNodes = htmlSelection
+        .selectAll(`[${AXIS_BOTTOM_HTML_LABELS_DATA_ATTR}] > div`)
+        .nodes();
+    labelNodes.forEach((node, i, nodes) => {
+        var _a;
+        if (i === nodes.length - 1) {
+            const prevNodeSelection = select(nodes[i - 1]);
+            const prevRect = (_a = prevNodeSelection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const nodeSelection = select(node);
+            const rect = node.getBoundingClientRect();
+            if (prevRect && prevRect.right + ticks.labelsPaddings > rect.left) {
+                const maxWidth = right - prevRect.right - ticks.labelsPaddings;
+                const leftMin = prevRect.right - ticks.labelsPaddings / 2;
+                nodeSelection.style('left', `${leftMin}px`);
+                nodeSelection.style('max-width', `${maxWidth}px`);
+            }
+        }
+    });
+}
 export async function axisBottom(args) {
-    const { leftmostLimit = 0, scale, ticks: { labelFormat = (value) => String(value), labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation = 0, tickColor, }, domain, } = args;
+    const { boundsOffsetLeft = 0, boundsOffsetTop = 0, domain, htmlLayout, leftmostLimit = 0, scale, ticks: { count: ticksCount, items: tickItems, labelFormat = (value) => String(value), labelsHeight = 0, labelsHtml, labelsLineHeight, labelsMargin = 0, labelsMaxWidth = Infinity, labelsPaddings = 0, labelsStyle, maxTickCount, rotation = 0, tickColor, }, } = args;
+    const htmlSelection = select(htmlLayout);
     const offset = getXAxisOffset();
     const position = getXTickPosition({ scale, offset });
     const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
@@ -27,6 +159,7 @@ export async function axisBottom(args) {
     return function (selection) {
         var _a, _b, _c;
         selection.selectAll('.tick, .domain').remove();
+        htmlSelection.selectAll(`[${AXIS_BOTTOM_HTML_LABELS_DATA_ATTR}]`).remove();
         const rect = (_a = selection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
         const x = (rect === null || rect === void 0 ? void 0 : rect.x) || 0;
         const right = x + domain.size;
@@ -46,6 +179,16 @@ export async function axisBottom(args) {
             tickPath.moveTo(0, start);
             tickPath.lineTo(0, end);
         });
+        const htmlLabelsData = labelsHtml
+            ? values.map((v) => {
+                var _a;
+                return {
+                    content: v,
+                    left: position(v) + offset + boundsOffsetLeft,
+                    top: Math.abs(((_a = tickItems === null || tickItems === void 0 ? void 0 : tickItems[0]) === null || _a === void 0 ? void 0 : _a[1]) || 0) + labelsMargin + boundsOffsetTop,
+                };
+            })
+            : [];
         const ticks = selection
             .selectAll('.tick')
             .data(values)
@@ -60,19 +203,6 @@ export async function axisBottom(args) {
             .append('path')
             .attr('d', tickPath.toString())
             .attr('stroke', tickColor !== null && tickColor !== void 0 ? tickColor : 'currentColor');
-        ticks
-            .append('text')
-            .text(labelFormat)
-            .style('font-size', (labelsStyle === null || labelsStyle === void 0 ? void 0 : labelsStyle.fontSize) || '')
-            .attr('fill', 'currentColor')
-            .attr('text-anchor', () => {
-            if (rotation) {
-                return rotation > 0 ? 'start' : 'end';
-            }
-            return 'middle';
-        })
-            .style('transform', transform)
-            .style('dominant-baseline', 'text-after-edge');
         // Remove tick that has the same x coordinate like domain
         selection
             .selectAll('.tick')
@@ -81,68 +211,38 @@ export async function axisBottom(args) {
         })
             .select('path')
             .remove();
-        const labels = selection.selectAll('.tick text');
-        // FIXME: handle rotated overlapping labels (with a smarter approach)
-        if (rotation) {
-            const maxWidth = labelsMaxWidth * calculateCos(rotation) + labelsLineHeight * calculateSin(rotation);
-            labels.each(function () {
-                setEllipsisForOverflowText(select(this), maxWidth);
+        if (labelsHtml) {
+            appendHtmlLabels({
+                htmlSelection,
+                labelsData: htmlLabelsData,
+                right,
+                ticks: {
+                    labelFormat,
+                    labelsHeight,
+                    labelsMaxWidth,
+                    labelsPaddings,
+                    labelsStyle,
+                    rotation,
+                },
             });
         }
         else {
-            let elementX = 0;
-            // add an ellipsis to the labels that go beyond the boundaries of the chart
-            // and remove overlapping labels
-            labels
-                .nodes()
-                .map((element) => {
-                const r = element.getBoundingClientRect();
-                return {
-                    left: r.left,
-                    right: r.right,
-                    node: element,
-                };
-            }, {})
-                .sort((a, b) => {
-                return a.left - b.left;
-            })
-                .forEach(function (item, i, nodes) {
-                var _a, _b, _c, _d;
-                const { node, left, right: currentElementPositionRigth } = item;
-                const currentElement = node;
-                if (i === 0) {
-                    const text = select(currentElement);
-                    const nextElement = (_a = nodes[i + 1]) === null || _a === void 0 ? void 0 : _a.node;
-                    const nextElementPosition = nextElement === null || nextElement === void 0 ? void 0 : nextElement.getBoundingClientRect();
-                    if (left < leftmostLimit) {
-                        const rightmostPossiblePoint = (_b = nextElementPosition === null || nextElementPosition === void 0 ? void 0 : nextElementPosition.left) !== null && _b !== void 0 ? _b : right;
-                        const remainSpace = rightmostPossiblePoint -
-                            currentElementPositionRigth +
-                            x -
-                            labelsMargin;
-                        text.attr('text-anchor', 'start');
-                        setEllipsisForOverflowText(text, remainSpace);
-                    }
-                }
-                else {
-                    if (left < elementX) {
-                        (_c = currentElement.closest('.tick')) === null || _c === void 0 ? void 0 : _c.remove();
-                        return;
-                    }
-                    elementX = currentElementPositionRigth + labelsPaddings;
-                    if (i === nodes.length - 1) {
-                        const prevElement = (_d = nodes[i - 1]) === null || _d === void 0 ? void 0 : _d.node;
-                        const text = select(currentElement);
-                        const prevElementPosition = prevElement === null || prevElement === void 0 ? void 0 : prevElement.getBoundingClientRect();
-                        const lackingSpace = Math.max(0, currentElementPositionRigth - right);
-                        if (lackingSpace) {
-                            const remainSpace = right - ((prevElementPosition === null || prevElementPosition === void 0 ? void 0 : prevElementPosition.right) || 0) - labelsPaddings;
-                            const translateX = -lackingSpace;
-                            text.style('transform', `translate(${translateX}px,${translateY}px)`);
-                            setEllipsisForOverflowText(text, remainSpace);
-                        }
-                    }
-                }
+            appendSvgLabels({
+                leftmostLimit,
+                right,
+                ticksSelection: ticks,
+                ticks: {
+                    labelFormat,
+                    labelsLineHeight,
+                    labelsMaxWidth,
+                    labelsMargin,
+                    labelsPaddings,
+                    labelsStyle,
+                    rotation,
+                },
+                transform,
+                translateY,
+                x,
             });
         }
         const { size: domainSize, color: domainColor } = domain;

package/dist/cjs/utils/chart/index.d.ts

@@ -61,15 +61,11 @@ export declare const formatAxisTickLabel: (args: {
     value: AxisDomain;
     step?: number;
 }) => string;
-/**
- * Calculates the height of a text element in a horizontal SVG layout.
- *
- * @param {Object} args - The arguments for the function.
- * @param {string} args.text - The text to be measured.
- * @param {Partial<BaseTextStyle>} args.style - Optional style properties for the text element.
- * @return {number} The height of the text element.
- */
-export declare const getHorisontalSvgTextHeight: (args: {
+export declare const getHorizontalHtmlTextHeight: (args: {
+    text: string;
+    style?: Partial<BaseTextStyle>;
+}) => number;
+export declare const getHorizontalSvgTextHeight: (args: {
     text: string;
     style?: Partial<BaseTextStyle>;
 }) => number;

package/dist/cjs/utils/chart/index.js

@@ -190,15 +190,24 @@ export const formatAxisTickLabel = (args) => {
         }
     }
 };
-/**
- * Calculates the height of a text element in a horizontal SVG layout.
- *
- * @param {Object} args - The arguments for the function.
- * @param {string} args.text - The text to be measured.
- * @param {Partial<BaseTextStyle>} args.style - Optional style properties for the text element.
- * @return {number} The height of the text element.
- */
-export const getHorisontalSvgTextHeight = (args) => {
+export const getHorizontalHtmlTextHeight = (args) => {
+    var _a;
+    const { text, style } = args;
+    const container = select(document.body).append('div');
+    const fontSize = get(style, 'fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE);
+    container
+        .style('position', 'absolute')
+        .style('visibility', 'hidden')
+        .style('white-space', 'nowrap')
+        .html(text);
+    if (fontSize) {
+        container.style('font-size', fontSize);
+    }
+    const height = ((_a = container.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
+    container.remove();
+    return height;
+};
+export const getHorizontalSvgTextHeight = (args) => {
     var _a;
     const { text, style } = args;
     const container = select(document.body).append('svg');

package/dist/cjs/validation/index.js

@@ -1,35 +1,15 @@
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
-import { AXIS_TYPE, DEFAULT_AXIS_TYPE, SeriesType, TOOLTIP_TOTALS_BUILT_IN_AGGREGATION, } from '../constants';
+import { DEFAULT_AXIS_TYPE, SeriesType, TOOLTIP_TOTALS_BUILT_IN_AGGREGATION } from '../constants';
 import { i18n } from '../i18n';
 import { CHART_ERROR_CODE, ChartError } from '../libs';
+import { validateAxes } from './validate-axes';
 function getTypeOf(value) {
     return typeof value;
 }
 const AVAILABLE_SERIES_TYPES = Object.values(SeriesType);
 const AVAILABLE_TOOLTIP_TOTALS_BUILT_IN_AGGREGATIONS = Object.values(TOOLTIP_TOTALS_BUILT_IN_AGGREGATION);
 const AVAILABLE_TOOLTIP_TOTALS_AGGREGATION_TYPES = ['function', 'string'];
-const AVAILABLE_AXIS_TYPES = Object.values(AXIS_TYPE);
-function validateAxisType({ axis, key }) {
-    if (axis.type && !AVAILABLE_AXIS_TYPES.includes(axis.type)) {
-        throw new ChartError({
-            code: CHART_ERROR_CODE.INVALID_DATA,
-            message: i18n('error', 'label_invalid-axis-type', {
-                key,
-                values: AVAILABLE_AXIS_TYPES,
-            }),
-        });
-    }
-}
-function validateAxes(args) {
-    const { xAxis, yAxis = [] } = args;
-    if (xAxis) {
-        validateAxisType({ axis: xAxis, key: 'x' });
-    }
-    yAxis.forEach((axis) => {
-        validateAxisType({ axis, key: 'y' });
-    });
-}
 function validateXYSeries(args) {
     const { series, xAxis, yAxis = [] } = args;
     const yAxisIndex = get(series, 'yAxis', 0);

package/dist/cjs/validation/validate-axes.d.ts

@@ -0,0 +1,5 @@
+import type { ChartXAxis, ChartYAxis } from '../types';
+export declare function validateAxes(args: {
+    xAxis?: ChartXAxis;
+    yAxis?: ChartYAxis[];
+}): void;

package/dist/cjs/validation/validate-axes.js

@@ -0,0 +1,46 @@
+import { AXIS_TYPE } from '../constants';
+import { i18n } from '../i18n';
+import { CHART_ERROR_CODE, ChartError } from '../libs';
+const AVAILABLE_AXIS_TYPES = Object.values(AXIS_TYPE);
+function validateAxisType({ axis, key }) {
+    if (axis.type && !AVAILABLE_AXIS_TYPES.includes(axis.type)) {
+        throw new ChartError({
+            code: CHART_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_invalid-axis-type', {
+                key,
+                values: AVAILABLE_AXIS_TYPES,
+            }),
+        });
+    }
+}
+function validateLabelsHtmlOptions(args) {
+    var _a;
+    const { axis } = args;
+    const html = (_a = axis.labels) === null || _a === void 0 ? void 0 : _a.html;
+    if (typeof html === 'undefined') {
+        return;
+    }
+    if (typeof html !== 'boolean') {
+        throw new ChartError({
+            code: CHART_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_invalid-axis-labels-html-type'),
+        });
+    }
+    if (html && axis.type !== 'category') {
+        throw new ChartError({
+            code: CHART_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_invalid-axis-labels-html-not-supported-axis-type'),
+        });
+    }
+}
+export function validateAxes(args) {
+    const { xAxis, yAxis = [] } = args;
+    if (xAxis) {
+        validateAxisType({ axis: xAxis, key: 'x' });
+        validateLabelsHtmlOptions({ axis: xAxis });
+    }
+    yAxis.forEach((axis) => {
+        validateAxisType({ axis, key: 'y' });
+        validateLabelsHtmlOptions({ axis });
+    });
+}

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

@@ -3,13 +3,16 @@ import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
 import './styles.css';
 type Props = {
     axis: PreparedAxis;
-    width: number;
+    boundsOffsetLeft: number;
+    boundsOffsetTop: number;
     height: number;
+    htmlLayout: HTMLElement | null;
     scale: ChartScale;
     split: PreparedSplit;
+    width: number;
+    leftmostLimit?: number;
     plotBeforeRef?: React.MutableRefObject<SVGGElement | null>;
     plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
-    leftmostLimit?: number;
 };
 export declare function getTitlePosition(args: {
     axis: PreparedAxis;

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

@@ -42,11 +42,11 @@ export function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisX = React.memo(function AxisX(props) {
-    const { axis, width, height: totalHeight, scale, split, plotBeforeRef, plotAfterRef, leftmostLimit, } = 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) {
+            if (!ref.current || !htmlLayout) {
                 return;
             }
             const svgElement = select(ref.current);
@@ -65,24 +65,29 @@ export const AxisX = React.memo(function AxisX(props) {
             }
             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 }),
-                    labelsPaddings: axis.labels.padding,
+                    labelsHeight: axis.labels.height,
+                    labelsLineHeight: axis.labels.lineHeight,
                     labelsMargin: axis.labels.margin,
-                    labelsStyle: axis.labels.style,
                     labelsMaxWidth: axis.labels.maxWidth,
-                    labelsLineHeight: axis.labels.lineHeight,
-                    count: getTicksCount({ axis, range: width }),
+                    labelsPaddings: axis.labels.padding,
+                    labelsStyle: axis.labels.style,
                     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
@@ -219,6 +224,18 @@ export const AxisX = React.memo(function AxisX(props) {
                 setPlotLines(plotAfterContainer, axis.plotLines.filter((d) => d.layerPlacement === 'after'));
             }
         })();
-    }, [axis, width, totalHeight, scale, split, leftmostLimit, plotBeforeRef, plotAfterRef]);
+    }, [
+        axis,
+        boundsOffsetLeft,
+        boundsOffsetTop,
+        htmlLayout,
+        leftmostLimit,
+        plotAfterRef,
+        plotBeforeRef,
+        scale,
+        split,
+        totalHeight,
+        width,
+    ]);
     return React.createElement("g", { ref: ref });
 });

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

@@ -1,16 +1,19 @@
 import React from 'react';
 import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
 import './styles.css';
-type Props = {
+interface Props {
     axes: PreparedAxis[];
+    boundsOffsetTop: number;
+    boundsOffsetLeft: number;
     scale: ChartScale[];
     width: number;
     height: number;
+    htmlLayout: HTMLElement | null;
     split: PreparedSplit;
     plotBeforeRef?: React.MutableRefObject<SVGGElement | null>;
     plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
     bottomLimit?: number;
     topLimit?: number;
-};
+}
 export declare const AxisY: (props: Props) => React.JSX.Element;
 export {};