@gravity-ui/charts 1.26.0 → 1.27.0

package/dist/cjs/components/AxisX/prepare-axis-data.js

@@ -0,0 +1,267 @@
+import { getUniqId } from '@gravity-ui/uikit';
+import { calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../utils';
+import { getXAxisTickValues } from '../../utils/chart/axis/x-axis';
+async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWidth, axisWidth, boundsOffsetLeft, boundsOffsetRight, }) {
+    var _a;
+    const rotation = axis.labels.rotation;
+    const content = [];
+    let rowText = text;
+    let textSize = await getTextSize(text);
+    const a = (360 + rotation) % 90;
+    const textMaxWidth = a === 0
+        ? Math.min(labelMaxWidth, 
+        // rightmost label
+        labelMaxWidth / 2 + axisWidth + boundsOffsetRight - left)
+        : Math.min(axis.labels.height / calculateSin(a) - textSize.height * calculateSin(90 - a), 
+        // leftmostLabel
+        (boundsOffsetLeft + left) / calculateSin(a));
+    if (textSize.width > textMaxWidth) {
+        rowText = await getTextWithElipsis({
+            text: rowText,
+            getTextWidth: async (str) => (await getTextSize(str)).width,
+            maxWidth: textMaxWidth,
+        });
+        textSize = await getTextSize(rowText);
+    }
+    const actualTextWidth = a
+        ? textSize.width * calculateSin(90 - a) + textSize.height * calculateSin(a)
+        : textSize.width;
+    const xOffset = a ? (textSize.width * calculateSin(90 - a)) / 2 : 0;
+    const yOffset = textSize.width * calculateSin(a);
+    content.push({
+        text: rowText,
+        x: 0,
+        y: 0,
+        size: textSize,
+    });
+    const x = Math.max(-boundsOffsetLeft, Math.min(left - actualTextWidth / 2 - xOffset, axisWidth - actualTextWidth));
+    const y = top + yOffset + axis.labels.margin;
+    const svgLabel = {
+        title: ((_a = content[0]) === null || _a === void 0 ? void 0 : _a.text) === text ? undefined : text,
+        content,
+        style: axis.labels.style,
+        size: textSize,
+        x,
+        y,
+        angle: rotation,
+    };
+    return svgLabel;
+}
+// eslint-disable-next-line complexity
+export async function prepareXAxisData({ axis, scale, boundsWidth, boundsOffsetLeft, boundsOffsetRight, height, }) {
+    var _a, _b, _c, _d;
+    const axisHeight = height;
+    const axisWidth = boundsWidth;
+    let domain = null;
+    if (axis.visible) {
+        domain = {
+            start: [0, height],
+            end: [axisWidth, height],
+            lineColor: (_a = axis.lineColor) !== null && _a !== void 0 ? _a : '',
+        };
+    }
+    const ticks = [];
+    const getTextSize = getTextSizeFn({ style: axis.labels.style });
+    const labelLineHeight = (await getTextSize('Tmp')).height;
+    const values = getXAxisTickValues({ scale, axis, labelLineHeight });
+    const tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
+    const labelMaxWidth = values.length > 1
+        ? Math.abs(values[0].x - values[1].x) - axis.labels.padding * 2
+        : axisWidth;
+    for (let i = 0; i < values.length; i++) {
+        const tickValue = values[i];
+        let svgLabel = null;
+        let htmlLabel = null;
+        if (axis.labels.enabled) {
+            if (axis.labels.html) {
+                const content = String(tickValue.value);
+                const labelSize = await getLabelsSize({
+                    labels: [content],
+                    html: true,
+                    style: axis.labels.style,
+                });
+                const size = { width: labelSize.maxWidth, height: labelSize.maxHeight };
+                htmlLabel = {
+                    content,
+                    x: tickValue.x - size.width / 2,
+                    y: height + axis.labels.margin,
+                    size,
+                    style: axis.labels.style,
+                };
+            }
+            else {
+                const text = formatAxisTickLabel({ value: tickValue.value, axis, step: tickStep });
+                svgLabel = await getSvgAxisLabel({
+                    getTextSize,
+                    text,
+                    axis,
+                    top: height,
+                    left: tickValue.x,
+                    labelMaxWidth,
+                    axisWidth,
+                    boundsOffsetLeft,
+                    boundsOffsetRight,
+                });
+            }
+        }
+        const tickLine = axis.grid.enabled
+            ? {
+                points: [
+                    [tickValue.x, 0],
+                    [tickValue.x, height],
+                ],
+            }
+            : null;
+        ticks.push({
+            line: tickLine,
+            svgLabel,
+            htmlLabel,
+        });
+    }
+    let title = null;
+    if (axis.title.text) {
+        const getTitleTextSize = getTextSizeFn({ style: axis.title.style });
+        const titleContent = [];
+        const titleMaxWidth = axisWidth;
+        if (axis.title.maxRowCount > 1) {
+            const titleTextRows = await wrapText({
+                text: axis.title.text,
+                style: axis.title.style,
+                width: titleMaxWidth,
+                getTextSize: getTitleTextSize,
+            });
+            for (let i = 0; i < axis.title.maxRowCount && i < titleTextRows.length; i++) {
+                const textRow = titleTextRows[i];
+                const textRowContent = textRow.text.trim();
+                const textRowSize = await getTitleTextSize(textRowContent);
+                titleContent.push({
+                    text: textRowContent,
+                    x: 0,
+                    y: textRow.y,
+                    size: textRowSize,
+                });
+            }
+        }
+        else {
+            const text = await getTextWithElipsis({
+                text: axis.title.text,
+                maxWidth: titleMaxWidth,
+                getTextWidth: async (s) => (await getTitleTextSize(s)).width,
+            });
+            titleContent.push({
+                text,
+                x: 0,
+                y: 0,
+                size: await getTitleTextSize(text),
+            });
+        }
+        const titleTextSize = titleContent.reduce((acc, item) => {
+            acc.width = Math.max(acc.width, item.size.width);
+            acc.height += item.size.height;
+            return acc;
+        }, { width: 0, height: 0 });
+        let x = 0;
+        switch (axis.title.align) {
+            case 'left': {
+                x = 0;
+                break;
+            }
+            case 'center': {
+                x = Math.max(axisWidth / 2 - titleTextSize.width / 2);
+                break;
+            }
+            case 'right': {
+                x = Math.max(0, axisWidth - titleTextSize.width);
+                break;
+            }
+        }
+        title = {
+            content: titleContent,
+            style: axis.title.style,
+            size: titleTextSize,
+            x,
+            y: height +
+                axis.labels.margin +
+                axis.labels.height +
+                axis.title.margin +
+                titleTextSize.height,
+            rotate: 0,
+            offset: 0,
+        };
+    }
+    const plotBands = [];
+    for (let i = 0; i < axis.plotBands.length; i++) {
+        const plotBand = axis.plotBands[i];
+        const axisScale = scale;
+        const { from, to } = getBandsPosition({
+            band: plotBand,
+            axisScale,
+            axis: 'x',
+        });
+        const halfBandwidth = ((_c = (_b = axisScale.bandwidth) === null || _b === void 0 ? void 0 : _b.call(axisScale)) !== null && _c !== void 0 ? _c : 0) / 2;
+        const startPos = halfBandwidth + Math.min(from, to);
+        const endPos = Math.min(Math.abs(to - from), axisWidth - Math.min(from, to));
+        const getPlotLabelSize = getTextSizeFn({ style: plotBand.label.style });
+        const labelSize = plotBand.label.text ? await getPlotLabelSize(plotBand.label.text) : null;
+        plotBands.push({
+            layerPlacement: plotBand.layerPlacement,
+            x: Math.max(0, startPos),
+            y: 0,
+            width: Math.min(endPos, axisWidth),
+            height: axisHeight,
+            color: plotBand.color,
+            opacity: plotBand.opacity,
+            label: plotBand.label.text
+                ? {
+                    text: plotBand.label.text,
+                    style: plotBand.label.style,
+                    x: plotBand.label.padding,
+                    y: plotBand.label.padding + ((_d = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _d !== void 0 ? _d : 0),
+                    rotate: -90,
+                }
+                : null,
+        });
+    }
+    const plotLines = [];
+    for (let i = 0; i < axis.plotLines.length; i++) {
+        const plotLine = axis.plotLines[i];
+        const axisScale = scale;
+        const plotLineValue = Number(axisScale(plotLine.value));
+        const points = [
+            [plotLineValue, 0],
+            [plotLineValue, axisHeight],
+        ];
+        let label = null;
+        if (plotLine.label.text) {
+            const getTitleTextSize = getTextSizeFn({ style: plotLine.label.style });
+            const size = await getTitleTextSize(plotLine.label.text);
+            label = {
+                text: plotLine.label.text,
+                style: plotLine.label.style,
+                x: plotLineValue - plotLine.label.padding - size.height,
+                y: plotLine.label.padding + size.width,
+                rotate: -90,
+            };
+        }
+        plotLines.push({
+            layerPlacement: plotLine.layerPlacement,
+            x: 0,
+            y: 0,
+            width: axisWidth,
+            color: plotLine.color,
+            opacity: plotLine.opacity,
+            label,
+            points,
+            lineWidth: plotLine.width,
+            dashStyle: plotLine.dashStyle,
+        });
+    }
+    return {
+        id: getUniqId(),
+        title,
+        ticks,
+        domain,
+        plotBands,
+        plotLines,
+    };
+}

package/dist/cjs/components/AxisX/styles.css

@@ -1,17 +1,14 @@
-.gcharts-axis .domain {
+.gcharts-x-axis__domain {
   stroke: var(--g-color-line-generic-active);
 }
-.gcharts-axis .tick text {
-  color: var(--g-color-text-secondary);
-  dominant-baseline: text-after-edge;
+.gcharts-x-axis__label {
+  fill: var(--g-color-text-secondary);
+  stroke: none;
 }
-.gcharts-axis .tick line, .gcharts-axis .tick path {
+.gcharts-x-axis__tick {
   stroke: var(--g-color-line-generic);
 }
-.gcharts-axis__title {
-  dominant-baseline: text-after-edge;
+.gcharts-x-axis__title {
+  dominant-baseline: text-before-edge;
   fill: var(--g-color-text-secondary);
-}
-.gcharts-axis__title tspan {
-  dominant-baseline: text-after-edge;
 }

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

@@ -0,0 +1,85 @@
+import type { DashStyle } from 'src/constants';
+import type { BaseTextStyle, HtmlItem, PlotLayerPlacement, PointPosition } from '../../types';
+export type TextRowData = {
+    text: string;
+    x: number;
+    y: number;
+    size: {
+        width: number;
+        height: number;
+    };
+};
+export type AxisSvgLabelData = {
+    x: number;
+    y: number;
+    angle: number;
+    content: TextRowData[];
+    title?: string;
+    style: BaseTextStyle;
+    size: {
+        width: number;
+        height: number;
+    };
+};
+export type AxisTickLine = {
+    points: PointPosition[];
+};
+export type AxisTickData = {
+    line: AxisTickLine | null;
+    svgLabel: AxisSvgLabelData | null;
+    htmlLabel: HtmlItem | null;
+};
+export type AxisTitleData = {
+    content: TextRowData[];
+    style: BaseTextStyle;
+    size: {
+        width: number;
+        height: number;
+    };
+    x: number;
+    y: number;
+    rotate: number;
+    offset: number;
+};
+export type AxisPlotLineLabel = {
+    text: string;
+    rotate: number;
+    style: BaseTextStyle;
+    x: number;
+    y: number;
+};
+export type AxisPlotLineData = {
+    layerPlacement: PlotLayerPlacement;
+    x: number;
+    y: number;
+    width: number;
+    points: [number, number][];
+    color: string;
+    lineWidth: number;
+    opacity: number;
+    label: AxisPlotLineLabel | null;
+    dashStyle: DashStyle;
+};
+export type AxisPlotBandData = {
+    layerPlacement: PlotLayerPlacement;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    opacity: number;
+    label: AxisPlotLineLabel | null;
+};
+export type AxisDomainData = {
+    start: [number, number];
+    end: [number, number];
+    lineColor: string;
+};
+export type AxisXData = {
+    id: string;
+    title: AxisTitleData | null;
+    domain: AxisDomainData | null;
+    ticks: AxisTickData[];
+    plotLines: AxisPlotLineData[];
+    plotBands: AxisPlotBandData[];
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -5,11 +5,17 @@ import { block, getLineDashArray } from '../../utils';
 import './styles.css';
 const b = block('y-axis');
 export const AxisY = (props) => {
+    var _a;
     const { htmlLayout, plotBeforeRef, plotAfterRef, preparedAxisData } = props;
     const ref = React.useRef(null);
     const lineGenerator = line();
-    const htmlLabels = preparedAxisData.ticks.map((d) => d.htmlLabel).filter(Boolean);
+    const htmlElements = [];
+    htmlElements.push(...preparedAxisData.ticks.map((d) => d.htmlLabel).filter(Boolean));
+    if ((_a = preparedAxisData.title) === null || _a === void 0 ? void 0 : _a.html) {
+        htmlElements.push(preparedAxisData.title);
+    }
     React.useEffect(() => {
+        var _a;
         if (!ref.current) {
             return;
         }
@@ -26,7 +32,7 @@ export const AxisY = (props) => {
             plotAfterContainer = select(plotAfterRef.current);
             plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
         }
-        if (preparedAxisData.title) {
+        if (((_a = preparedAxisData.title) === null || _a === void 0 ? void 0 : _a.html) === false) {
             svgElement
                 .append('g')
                 .attr('class', b('title'))
@@ -177,6 +183,6 @@ export const AxisY = (props) => {
         }
     }, [lineGenerator, plotAfterRef, plotBeforeRef, preparedAxisData]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(HtmlLayer, { preparedData: { htmlElements: htmlLabels }, htmlLayout: htmlLayout }),
+        React.createElement(HtmlLayer, { preparedData: { htmlElements }, htmlLayout: htmlLayout }),
         React.createElement("g", { ref: ref, className: b() })));
 };

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

@@ -1,6 +1,6 @@
 import type { ChartScale, PreparedAxis, PreparedSeries, PreparedSplit } from '../../hooks';
 import type { AxisYData } from './types';
-export declare function prepareAxisData({ axis, split, scale, top: topOffset, width, height, series, }: {
+export declare function prepareYAxisData({ axis, split, scale, top: topOffset, width, height, series, }: {
     axis: PreparedAxis;
     split: PreparedSplit;
     scale: ChartScale;

package/dist/cjs/components/AxisY/prepare-axis-data.js

@@ -1,5 +1,6 @@
 import { getUniqId } from '@gravity-ui/uikit';
 import { calculateCos, calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../utils';
+import { prepareHtmlYAxisTitle, prepareSvgYAxisTitle } from './prepare-axis-title';
 import { getTickValues } from './utils';
 async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHeight, topOffset, }) {
     var _a;
@@ -107,8 +108,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
     };
     return svgLabel;
 }
-// eslint-disable-next-line complexity
-export async function prepareAxisData({ axis, split, scale, top: topOffset, width, height, series, }) {
+export async function prepareYAxisData({ axis, split, scale, top: topOffset, width, height, series, }) {
     var _a, _b, _c;
     const axisPlotTopPosition = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
     const axisHeight = ((_b = split.plots[axis.plotIndex]) === null || _b === void 0 ? void 0 : _b.height) || height;
@@ -183,85 +183,21 @@ export async function prepareAxisData({ axis, split, scale, top: topOffset, widt
     }
     let labelsWidth = ticks.reduce((acc, item) => { var _a, _b, _c, _d; return Math.max(acc, (_d = (_b = (_a = item.svgLabel) === null || _a === void 0 ? void 0 : _a.size.width) !== null && _b !== void 0 ? _b : (_c = item.htmlLabel) === null || _c === void 0 ? void 0 : _c.size.width) !== null && _d !== void 0 ? _d : 0); }, 0);
     labelsWidth = Math.min(axis.labels.width, labelsWidth);
-    let title = null;
-    if (axis.title.text) {
-        const getTitleTextSize = getTextSizeFn({ style: axis.title.style });
-        const rotateAngle = axis.position === 'left' ? -90 : 90;
-        const sin = Math.abs(calculateSin(rotateAngle));
-        const cos = Math.abs(calculateCos(rotateAngle));
-        const titleContent = [];
-        const titleMaxWidth = sin * axisHeight;
-        if (axis.title.maxRowCount > 1) {
-            const titleTextRows = await wrapText({
-                text: axis.title.text,
-                style: axis.title.style,
-                width: titleMaxWidth,
-                getTextSize: getTitleTextSize,
-            });
-            for (let i = 0; i < axis.title.maxRowCount && i < titleTextRows.length; i++) {
-                const textRow = titleTextRows[i];
-                const textRowContent = textRow.text.trim();
-                const textRowSize = await getTitleTextSize(textRowContent);
-                titleContent.push({
-                    text: textRowContent,
-                    x: 0,
-                    y: textRow.y,
-                    size: textRowSize,
-                });
-            }
-        }
-        else {
-            const text = await getTextWithElipsis({
-                text: axis.title.text,
-                maxWidth: titleMaxWidth,
-                getTextWidth: async (s) => (await getTitleTextSize(s)).width,
-            });
-            titleContent.push({
-                text,
-                x: 0,
-                y: 0,
-                size: await getTitleTextSize(text),
-            });
-        }
-        const originalTextSize = titleContent.reduce((acc, item) => {
-            acc.width = Math.max(acc.width, item.size.width);
-            acc.height += item.size.height;
-            return acc;
-        }, { width: 0, height: 0 });
-        const rotatedTitleSize = {
-            width: sin * originalTextSize.height + cos * originalTextSize.width,
-            height: sin * originalTextSize.width + cos * originalTextSize.height,
-        };
-        const bottom = Math.max(0, calculateSin(rotateAngle) * originalTextSize.width);
-        let y = 0;
-        switch (axis.title.align) {
-            case 'left': {
-                y = -bottom + axisHeight;
-                break;
-            }
-            case 'center': {
-                y = -bottom + axisHeight / 2 + rotatedTitleSize.height / 2;
-                break;
-            }
-            case 'right': {
-                y = -bottom + rotatedTitleSize.height;
-                break;
-            }
-        }
-        const left = Math.min(0, calculateCos(rotateAngle) * originalTextSize.width);
-        const x = axis.position === 'left'
-            ? -left - labelsWidth - axis.labels.margin - axis.title.margin
-            : -left + width + labelsWidth + axis.labels.margin + axis.title.margin;
-        title = {
-            content: titleContent,
-            style: axis.title.style,
-            size: rotatedTitleSize,
-            x,
-            y: axisPlotTopPosition + y,
-            rotate: rotateAngle,
-            offset: -(originalTextSize.height / titleContent.length) * (titleContent.length - 1),
-        };
-    }
+    const title = axis.title.html
+        ? await prepareHtmlYAxisTitle({
+            axis,
+            axisTop: axisPlotTopPosition,
+            axisWidth: width,
+            axisHeight,
+            axisLabelsWidth: labelsWidth,
+        })
+        : await prepareSvgYAxisTitle({
+            axis,
+            axisTop: axisPlotTopPosition,
+            axisWidth: width,
+            axisHeight,
+            axisLabelsWidth: labelsWidth,
+        });
     const plotBands = [];
     axis.plotBands.forEach((plotBand) => {
         var _a, _b;

package/dist/cjs/components/AxisY/prepare-axis-title.d.ts

@@ -0,0 +1,16 @@
+import type { PreparedAxis } from 'src/hooks';
+import type { HtmlAxisTitleData, SvgAxisTitleData } from './types';
+export declare function prepareSvgYAxisTitle({ axis, axisTop, axisHeight, axisWidth, axisLabelsWidth, }: {
+    axis: PreparedAxis;
+    axisTop: number;
+    axisHeight: number;
+    axisWidth: number;
+    axisLabelsWidth: number;
+}): Promise<SvgAxisTitleData | null>;
+export declare function prepareHtmlYAxisTitle({ axis, axisTop, axisHeight, axisWidth, axisLabelsWidth, }: {
+    axis: PreparedAxis;
+    axisTop: number;
+    axisHeight: number;
+    axisWidth: number;
+    axisLabelsWidth: number;
+}): Promise<HtmlAxisTitleData | null>;