@gravity-ui/charts 1.48.1 → 1.48.2

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

@@ -1,10 +1,12 @@
 import type { ChartScale, PreparedAxis, PreparedSeries, PreparedSplit } from '../../hooks';
 import type { AxisXData } from './types';
-export declare function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, height, scale, series, split, yAxis, }: {
+export declare function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, chartMarginLeft, chartMarginRight, height, scale, series, split, yAxis, }: {
     axis: PreparedAxis;
     boundsOffsetLeft: number;
     boundsOffsetRight: number;
     boundsWidth: number;
+    chartMarginLeft: number;
+    chartMarginRight: number;
     height: number;
     scale: ChartScale;
     series: PreparedSeries[];

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

@@ -3,7 +3,7 @@ import { select } from 'd3-selection';
 import { calculateCos, calculateNumericProperty, calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, } from '../../core/utils';
 import { getXAxisTickValues } from '../../core/utils/axis/x-axis';
 import { getMultilineTitleContentRows } from '../utils/axis-title';
-async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWidth, axisWidth, boundsOffsetLeft, boundsOffsetRight, }) {
+async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWidth, axisWidth, boundsOffsetLeft, boundsOffsetRight, chartMarginLeft, chartMarginRight, }) {
     var _a;
     const rotation = axis.labels.rotation;
     const content = [];
@@ -13,8 +13,10 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
     let textMaxWidth = Infinity;
     if (a === 0) {
         textMaxWidth = Math.min(labelMaxWidth, 
-        // rightmost label
-        labelMaxWidth / 2 + axisWidth + boundsOffsetRight - left);
+        // rightmost label: may extend into the right Y-axis area but not into the right margin
+        labelMaxWidth / 2 + axisWidth + (boundsOffsetRight - chartMarginRight) - left, 
+        // leftmost label: when clamped at the margin boundary, don't bleed into next-tick territory
+        left + (boundsOffsetLeft - chartMarginLeft) + labelMaxWidth / 2);
     }
     else if (rotation > 0) {
         textMaxWidth = Math.min(axis.labels.height / calculateSin(a) - textSize.height * calculateSin(90 - a), 
@@ -23,8 +25,8 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
     }
     else {
         textMaxWidth = Math.min(axis.labels.height / calculateSin(a) - textSize.height * calculateSin(90 - a), 
-        // leftmostLabel
-        (boundsOffsetLeft + left) / calculateSin(a));
+        // leftmost label: may extend into the left Y-axis area but not into the left margin
+        (boundsOffsetLeft - chartMarginLeft + left) / calculateSin(a));
     }
     if (textSize.width > textMaxWidth) {
         rowText = await getTextWithElipsis({
@@ -65,13 +67,13 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
         content,
         style: axis.labels.style,
         size: textSize,
-        x: Math.max(-boundsOffsetLeft, x),
+        x: Math.max(-(boundsOffsetLeft - chartMarginLeft), x),
         y,
         angle: rotation,
     };
     return svgLabel;
 }
-export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, height, scale, series, split, yAxis, }) {
+export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, chartMarginLeft, chartMarginRight, height, scale, series, split, yAxis, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const xAxisItems = [];
     const splitPlots = (_a = split === null || split === void 0 ? void 0 : split.plots) !== null && _a !== void 0 ? _a : [];
@@ -167,6 +169,8 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                         axisWidth,
                         boundsOffsetLeft,
                         boundsOffsetRight,
+                        chartMarginLeft,
+                        chartMarginRight,
                     });
                 }
             }

package/dist/cjs/components/ChartInner/index.js

@@ -173,6 +173,7 @@ export const ChartInner = (props) => {
     const axisDataReady = !(preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) || Boolean(legendConfig);
     const yAxisDataItems = useAsyncState([], setYAxisDataItems, axisDataReady);
     const setXAxisDataItems = React.useCallback(async () => {
+        var _a, _b;
         const items = [];
         const axis = xAxis;
         const scale = xScale;
@@ -182,6 +183,8 @@ export const ChartInner = (props) => {
                 boundsOffsetLeft: boundsOffsetLeft,
                 boundsOffsetRight: width - boundsWidth - boundsOffsetLeft,
                 boundsWidth,
+                chartMarginLeft: (_a = preparedChart === null || preparedChart === void 0 ? void 0 : preparedChart.margin.left) !== null && _a !== void 0 ? _a : 0,
+                chartMarginRight: (_b = preparedChart === null || preparedChart === void 0 ? void 0 : preparedChart.margin.right) !== null && _b !== void 0 ? _b : 0,
                 height: boundsHeight,
                 scale,
                 series: preparedSeries.filter((s) => s.visible),
@@ -204,6 +207,7 @@ export const ChartInner = (props) => {
         boundsHeight,
         boundsOffsetLeft,
         boundsWidth,
+        preparedChart,
         preparedSeries,
         preparedSplit,
         width,

package/dist/cjs/components/Tooltip/index.js

@@ -18,10 +18,9 @@ export const Tooltip = (props) => {
         if (!svgContainer)
             return undefined;
         const updateRect = (e) => {
-            // Skip synthetic events (e.g. the CustomEvent('scroll') dispatched by the
-            // sibling useEffect below to reposition the Popup). Only native browser
-            // scroll events have isTrusted === true, so those still update the rect.
-            if (e && !e.isTrusted)
+            // Skip the synthetic CustomEvent('scroll') dispatched below to reposition the Popup.
+            // All other events — including transitionend and animationend — should update the rect.
+            if (e instanceof CustomEvent)
                 return;
             containerRectRef.current = svgContainer.getBoundingClientRect();
         };
@@ -29,9 +28,13 @@ export const Tooltip = (props) => {
         const resizeObserver = new ResizeObserver(() => updateRect());
         resizeObserver.observe(svgContainer);
         window.addEventListener('scroll', updateRect, { passive: true, capture: true });
+        window.addEventListener('transitionend', updateRect, { capture: true });
+        window.addEventListener('animationend', updateRect, { capture: true });
         return () => {
             resizeObserver.disconnect();
             window.removeEventListener('scroll', updateRect, { capture: true });
+            window.removeEventListener('transitionend', updateRect, { capture: true });
+            window.removeEventListener('animationend', updateRect, { capture: true });
         };
     }, [svgContainer]);
     const containerRect = containerRectRef.current;

package/dist/cjs/components/index.js

@@ -7,6 +7,7 @@ import { validateData } from '../core/validation';
 import { ChartInner } from './ChartInner';
 export * from './Tooltip/ChartTooltipContent';
 export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
+    var _a, _b;
     const { data, lang, onResize, onReady } = props;
     const validatedData = React.useRef();
     const ref = React.useRef(null);
@@ -48,11 +49,15 @@ export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
         // https://github.com/d3/d3-selection/blob/main/README.md#handling-events
         const eventName = `resize.${getUniqId()}`;
         selection.on(eventName, debuncedHandleResize);
+        window.addEventListener('transitionend', handleResize, { capture: true });
+        window.addEventListener('animationend', handleResize, { capture: true });
         return () => {
             // https://d3js.org/d3-selection/events#selection_on
             selection.on(eventName, null);
+            window.removeEventListener('transitionend', handleResize, { capture: true });
+            window.removeEventListener('animationend', handleResize, { capture: true });
         };
-    }, [debuncedHandleResize]);
+    }, [debuncedHandleResize, handleResize]);
     React.useEffect(() => {
         if (typeof onResize === 'function') {
             onResize({ dimensions });
@@ -67,5 +72,5 @@ export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
             width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || '100%',
             height: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || '100%',
             position: 'relative',
-        } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (React.createElement(ChartInner, { height: dimensions === null || dimensions === void 0 ? void 0 : dimensions.height, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, data: data, onReady: onReady }))));
+        } }, Boolean((dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width)) && (React.createElement(ChartInner, { height: (_a = dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) !== null && _a !== void 0 ? _a : 0, width: (_b = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _b !== void 0 ? _b : 0, data: data, onReady: onReady }))));
 });

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

@@ -1,10 +1,12 @@
 import type { ChartScale, PreparedAxis, PreparedSeries, PreparedSplit } from '../../hooks';
 import type { AxisXData } from './types';
-export declare function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, height, scale, series, split, yAxis, }: {
+export declare function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, chartMarginLeft, chartMarginRight, height, scale, series, split, yAxis, }: {
     axis: PreparedAxis;
     boundsOffsetLeft: number;
     boundsOffsetRight: number;
     boundsWidth: number;
+    chartMarginLeft: number;
+    chartMarginRight: number;
     height: number;
     scale: ChartScale;
     series: PreparedSeries[];

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

@@ -3,7 +3,7 @@ import { select } from 'd3-selection';
 import { calculateCos, calculateNumericProperty, calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, } from '../../core/utils';
 import { getXAxisTickValues } from '../../core/utils/axis/x-axis';
 import { getMultilineTitleContentRows } from '../utils/axis-title';
-async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWidth, axisWidth, boundsOffsetLeft, boundsOffsetRight, }) {
+async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWidth, axisWidth, boundsOffsetLeft, boundsOffsetRight, chartMarginLeft, chartMarginRight, }) {
     var _a;
     const rotation = axis.labels.rotation;
     const content = [];
@@ -13,8 +13,10 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
     let textMaxWidth = Infinity;
     if (a === 0) {
         textMaxWidth = Math.min(labelMaxWidth, 
-        // rightmost label
-        labelMaxWidth / 2 + axisWidth + boundsOffsetRight - left);
+        // rightmost label: may extend into the right Y-axis area but not into the right margin
+        labelMaxWidth / 2 + axisWidth + (boundsOffsetRight - chartMarginRight) - left, 
+        // leftmost label: when clamped at the margin boundary, don't bleed into next-tick territory
+        left + (boundsOffsetLeft - chartMarginLeft) + labelMaxWidth / 2);
     }
     else if (rotation > 0) {
         textMaxWidth = Math.min(axis.labels.height / calculateSin(a) - textSize.height * calculateSin(90 - a), 
@@ -23,8 +25,8 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
     }
     else {
         textMaxWidth = Math.min(axis.labels.height / calculateSin(a) - textSize.height * calculateSin(90 - a), 
-        // leftmostLabel
-        (boundsOffsetLeft + left) / calculateSin(a));
+        // leftmost label: may extend into the left Y-axis area but not into the left margin
+        (boundsOffsetLeft - chartMarginLeft + left) / calculateSin(a));
     }
     if (textSize.width > textMaxWidth) {
         rowText = await getTextWithElipsis({
@@ -65,13 +67,13 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
         content,
         style: axis.labels.style,
         size: textSize,
-        x: Math.max(-boundsOffsetLeft, x),
+        x: Math.max(-(boundsOffsetLeft - chartMarginLeft), x),
         y,
         angle: rotation,
     };
     return svgLabel;
 }
-export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, height, scale, series, split, yAxis, }) {
+export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, chartMarginLeft, chartMarginRight, height, scale, series, split, yAxis, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const xAxisItems = [];
     const splitPlots = (_a = split === null || split === void 0 ? void 0 : split.plots) !== null && _a !== void 0 ? _a : [];
@@ -167,6 +169,8 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                         axisWidth,
                         boundsOffsetLeft,
                         boundsOffsetRight,
+                        chartMarginLeft,
+                        chartMarginRight,
                     });
                 }
             }

package/dist/esm/components/ChartInner/index.js

@@ -173,6 +173,7 @@ export const ChartInner = (props) => {
     const axisDataReady = !(preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) || Boolean(legendConfig);
     const yAxisDataItems = useAsyncState([], setYAxisDataItems, axisDataReady);
     const setXAxisDataItems = React.useCallback(async () => {
+        var _a, _b;
         const items = [];
         const axis = xAxis;
         const scale = xScale;
@@ -182,6 +183,8 @@ export const ChartInner = (props) => {
                 boundsOffsetLeft: boundsOffsetLeft,
                 boundsOffsetRight: width - boundsWidth - boundsOffsetLeft,
                 boundsWidth,
+                chartMarginLeft: (_a = preparedChart === null || preparedChart === void 0 ? void 0 : preparedChart.margin.left) !== null && _a !== void 0 ? _a : 0,
+                chartMarginRight: (_b = preparedChart === null || preparedChart === void 0 ? void 0 : preparedChart.margin.right) !== null && _b !== void 0 ? _b : 0,
                 height: boundsHeight,
                 scale,
                 series: preparedSeries.filter((s) => s.visible),
@@ -204,6 +207,7 @@ export const ChartInner = (props) => {
         boundsHeight,
         boundsOffsetLeft,
         boundsWidth,
+        preparedChart,
         preparedSeries,
         preparedSplit,
         width,

package/dist/esm/components/Tooltip/index.js

@@ -18,10 +18,9 @@ export const Tooltip = (props) => {
         if (!svgContainer)
             return undefined;
         const updateRect = (e) => {
-            // Skip synthetic events (e.g. the CustomEvent('scroll') dispatched by the
-            // sibling useEffect below to reposition the Popup). Only native browser
-            // scroll events have isTrusted === true, so those still update the rect.
-            if (e && !e.isTrusted)
+            // Skip the synthetic CustomEvent('scroll') dispatched below to reposition the Popup.
+            // All other events — including transitionend and animationend — should update the rect.
+            if (e instanceof CustomEvent)
                 return;
             containerRectRef.current = svgContainer.getBoundingClientRect();
         };
@@ -29,9 +28,13 @@ export const Tooltip = (props) => {
         const resizeObserver = new ResizeObserver(() => updateRect());
         resizeObserver.observe(svgContainer);
         window.addEventListener('scroll', updateRect, { passive: true, capture: true });
+        window.addEventListener('transitionend', updateRect, { capture: true });
+        window.addEventListener('animationend', updateRect, { capture: true });
         return () => {
             resizeObserver.disconnect();
             window.removeEventListener('scroll', updateRect, { capture: true });
+            window.removeEventListener('transitionend', updateRect, { capture: true });
+            window.removeEventListener('animationend', updateRect, { capture: true });
         };
     }, [svgContainer]);
     const containerRect = containerRectRef.current;

package/dist/esm/components/index.js

@@ -7,6 +7,7 @@ import { validateData } from '../core/validation';
 import { ChartInner } from './ChartInner';
 export * from './Tooltip/ChartTooltipContent';
 export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
+    var _a, _b;
     const { data, lang, onResize, onReady } = props;
     const validatedData = React.useRef();
     const ref = React.useRef(null);
@@ -48,11 +49,15 @@ export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
         // https://github.com/d3/d3-selection/blob/main/README.md#handling-events
         const eventName = `resize.${getUniqId()}`;
         selection.on(eventName, debuncedHandleResize);
+        window.addEventListener('transitionend', handleResize, { capture: true });
+        window.addEventListener('animationend', handleResize, { capture: true });
         return () => {
             // https://d3js.org/d3-selection/events#selection_on
             selection.on(eventName, null);
+            window.removeEventListener('transitionend', handleResize, { capture: true });
+            window.removeEventListener('animationend', handleResize, { capture: true });
         };
-    }, [debuncedHandleResize]);
+    }, [debuncedHandleResize, handleResize]);
     React.useEffect(() => {
         if (typeof onResize === 'function') {
             onResize({ dimensions });
@@ -67,5 +72,5 @@ export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
             width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || '100%',
             height: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || '100%',
             position: 'relative',
-        } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (React.createElement(ChartInner, { height: dimensions === null || dimensions === void 0 ? void 0 : dimensions.height, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, data: data, onReady: onReady }))));
+        } }, Boolean((dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width)) && (React.createElement(ChartInner, { height: (_a = dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) !== null && _a !== void 0 ? _a : 0, width: (_b = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _b !== void 0 ? _b : 0, data: data, onReady: onReady }))));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.48.1",
+  "version": "1.48.2",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",