@gravity-ui/charts 1.17.0 → 1.18.0

package/dist/cjs/hooks/useShapes/area/prepare-data.d.ts

@@ -7,7 +7,7 @@ export declare const prepareAreaData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
     boundsHeight: number;
     isOutsideBounds: (x: number, y: number) => boolean;
 }) => Promise<PreparedAreaData[]>;

package/dist/cjs/hooks/useShapes/area/prepare-data.js

@@ -71,6 +71,9 @@ export const prepareAreaData = async (args) => {
             const yAxisIndex = s.yAxis;
             const seriesYAxis = yAxis[yAxisIndex];
             const seriesYScale = yScale[yAxisIndex];
+            if (!seriesYScale) {
+                continue;
+            }
             const yMin = getYValue({
                 point: { y: 0 },
                 points: s.data,

package/dist/cjs/hooks/useShapes/bar-x/prepare-data.d.ts

@@ -8,6 +8,6 @@ export declare const prepareBarXData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
     boundsHeight: number;
 }) => Promise<PreparedBarXData[]>;

package/dist/cjs/hooks/useShapes/bar-x/prepare-data.js

@@ -112,6 +112,9 @@ export const prepareBarXData = async (args) => {
                 const yValue = sortedData[yValueIndex];
                 const yAxisIndex = yValue.series.yAxis;
                 const seriesYScale = yScale[yAxisIndex];
+                if (!seriesYScale) {
+                    continue;
+                }
                 let xCenter;
                 if (xAxis.type === 'category') {
                     const xBandScale = xScale;

package/dist/cjs/hooks/useShapes/bar-y/prepare-data.d.ts

@@ -8,5 +8,5 @@ export declare const prepareBarYData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
 }) => Promise<BarYShapesArgs>;

package/dist/cjs/hooks/useShapes/bar-y/prepare-data.js

@@ -10,6 +10,13 @@ export const prepareBarYData = async (args) => {
     const stackGap = seriesOptions['bar-y'].stackGap;
     const xLinearScale = xScale;
     const yLinearScale = yScale;
+    if (!yLinearScale) {
+        return {
+            shapes: [],
+            labels: [],
+            htmlElements: [],
+        };
+    }
     const yScaleRange = yLinearScale.range();
     const plotHeight = Math.abs(yScaleRange[0] - yScaleRange[1]);
     const sortingOptions = get(seriesOptions, 'bar-y.dataSorting');
@@ -29,7 +36,7 @@ export const prepareBarYData = async (args) => {
     })();
     const groupedData = groupBarYDataByYValue(series, yAxis);
     const { bandSize, barGap, barSize } = yAxis[0].type === 'category'
-        ? getBarYLayoutForCategoryScale({ groupedData, seriesOptions, yScale })
+        ? getBarYLayoutForCategoryScale({ groupedData, seriesOptions, yScale: yLinearScale })
         : getBarYLayoutForNumericScale({
             groupedData,
             seriesOptions,

package/dist/cjs/hooks/useShapes/index.d.ts

@@ -25,7 +25,7 @@ type Args = {
     xAxis: PreparedAxis | null;
     yAxis: PreparedAxis[];
     xScale?: ChartScale;
-    yScale?: ChartScale[];
+    yScale?: (ChartScale | undefined)[];
     split: PreparedSplit;
     htmlLayout: HTMLElement | null;
     clipPathId: string;

package/dist/cjs/hooks/useShapes/line/prepare-data.d.ts

@@ -8,7 +8,7 @@ export declare const prepareLineData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
     split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;
 }) => Promise<PreparedLineData[]>;

package/dist/cjs/hooks/useShapes/line/prepare-data.js

@@ -50,6 +50,9 @@ export const prepareLineData = async (args) => {
         const seriesYAxis = yAxis[yAxisIndex];
         const yAxisTop = ((_a = split.plots[seriesYAxis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
         const seriesYScale = yScale[s.yAxis];
+        if (!seriesYScale) {
+            continue;
+        }
         const points = s.data.map((d) => ({
             x: getXValue({ point: d, points: s.data, xAxis, xScale }),
             y: yAxisTop +

package/dist/cjs/hooks/useShapes/scatter/prepare-data.d.ts

@@ -7,6 +7,6 @@ export declare const prepareScatterData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
     isOutsideBounds: (x: number, y: number) => boolean;
 }) => PreparedScatterData[];

package/dist/cjs/hooks/useShapes/scatter/prepare-data.js

@@ -9,6 +9,9 @@ export const prepareScatterData = (args) => {
         const yAxisIndex = get(s, 'yAxis', 0);
         const seriesYAxis = yAxis[yAxisIndex];
         const seriesYScale = yScale[yAxisIndex];
+        if (!seriesYScale) {
+            return acc;
+        }
         const filteredData = xAxis.type === 'category' || seriesYAxis.type === 'category'
             ? s.data
             : getFilteredLinearScatterData(s.data);
@@ -16,6 +19,9 @@ export const prepareScatterData = (args) => {
             var _a;
             const x = getXValue({ point: d, xAxis, xScale });
             const y = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale });
+            if (typeof x === 'undefined' || typeof y === 'undefined') {
+                return;
+            }
             acc.push({
                 point: {
                     data: d,

package/dist/cjs/hooks/useShapes/waterfall/prepare-data.d.ts

@@ -8,5 +8,5 @@ export declare const prepareWaterfallData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
 }) => Promise<PreparedWaterfallData[]>;

package/dist/cjs/hooks/useShapes/waterfall/prepare-data.js

@@ -55,6 +55,9 @@ function getBandWidth(args) {
 export const prepareWaterfallData = async (args) => {
     const { series, seriesOptions, xAxis, xScale, yAxis: [yAxis], yScale: [yScale], } = args;
     const yLinearScale = yScale;
+    if (!yLinearScale) {
+        return [];
+    }
     const plotHeight = yLinearScale(yLinearScale.domain()[0]);
     const barMaxWidth = get(seriesOptions, 'waterfall.barMaxWidth');
     const barPadding = get(seriesOptions, 'waterfall.barPadding');
@@ -72,7 +75,7 @@ export const prepareWaterfallData = async (args) => {
     const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(bandWidth - rectGap, barMaxWidth));
     const yZero = getYValue({
         point: { y: 0 },
-        yScale,
+        yScale: yLinearScale,
         yAxis,
     });
     let totalValue = 0;
@@ -92,7 +95,7 @@ export const prepareWaterfallData = async (args) => {
         const height = yZero -
             getYValue({
                 point: { y: Math.abs(yValue) },
-                yScale,
+                yScale: yLinearScale,
                 yAxis,
             });
         let y;
@@ -101,7 +104,7 @@ export const prepareWaterfallData = async (args) => {
                 point: {
                     y: yValue > 0 ? yValue : 0,
                 },
-                yScale,
+                yScale: yLinearScale,
                 yAxis,
             });
         }

package/dist/cjs/hooks/useZoom/index.d.ts

@@ -12,7 +12,7 @@ interface UseZoomProps {
     xAxis: PreparedAxis | null;
     xScale?: ChartScale;
     yAxis: PreparedAxis[];
-    yScale?: ChartScale[];
+    yScale?: (ChartScale | undefined)[];
 }
 export declare function useZoom(props: UseZoomProps): void;
 export {};

package/dist/cjs/hooks/useZoom/types.d.ts

@@ -15,5 +15,5 @@ export interface ZoomState {
      * or the category index from the categories array specified in the axis settings (if the axis type is `category`).
      * The second element is the corresponding maximum value.
      */
-    y: [number, number][];
+    y: ([number, number] | undefined)[];
 }

package/dist/cjs/hooks/useZoom/utils.d.ts

@@ -7,6 +7,6 @@ export declare function selectionToZoomBounds(args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxes: PreparedAxis[];
-    yScales: ChartScale[];
+    yScales: (ChartScale | undefined)[];
     zoomType: PreparedZoom['type'];
 }): Partial<ZoomState>;

package/dist/cjs/hooks/useZoom/utils.js

@@ -13,11 +13,17 @@ export function selectionToZoomBounds(args) {
                 if (!Array.isArray(zoomState.y)) {
                     zoomState.y = [];
                 }
-                zoomState.y.push(selectionYToZoomBounds({
-                    yAxis,
-                    yScale: yScales[index],
-                    selection: [y1, y0],
-                }));
+                const yScale = yScales[index];
+                if (yScale) {
+                    zoomState.y.push(selectionYToZoomBounds({
+                        yAxis,
+                        yScale,
+                        selection: [y1, y0],
+                    }));
+                }
+                else {
+                    zoomState.y.push(undefined);
+                }
             });
             break;
         }
@@ -29,11 +35,17 @@ export function selectionToZoomBounds(args) {
                 if (!Array.isArray(zoomState.y)) {
                     zoomState.y = [];
                 }
-                zoomState.y.push(selectionYToZoomBounds({
-                    yAxis,
-                    yScale: yScales[index],
-                    selection: [y0, y1],
-                }));
+                const yScale = yScales[index];
+                if (yScale) {
+                    zoomState.y.push(selectionYToZoomBounds({
+                        yAxis,
+                        yScale,
+                        selection: [y0, y1],
+                    }));
+                }
+                else {
+                    zoomState.y.push(undefined);
+                }
             });
             break;
         }

package/dist/cjs/types/chart/tooltip.d.ts

@@ -130,4 +130,7 @@ export interface ChartTooltip<T = MeaningfulAny> {
         /** Formatting settings for totals tooltip value. */
         valueFormat?: ValueFormat;
     };
+    /** Can be used for the UI automated test.
+     * It is assigned as a data-qa attribute to an element. */
+    qa?: string;
 }

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

@@ -0,0 +1 @@
+export declare function getMinSpaceBetween<T>(arr: T[], iterator: (item: T) => number): number;

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

@@ -0,0 +1,9 @@
+export function getMinSpaceBetween(arr, iterator) {
+    return arr.reduce((acc, item, index) => {
+        const prev = arr[index - 1];
+        if (prev) {
+            return Math.min(acc, Math.abs(iterator(prev) - iterator(item)));
+        }
+        return acc;
+    }, Infinity);
+}

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

@@ -1,6 +1,7 @@
 import type { BaseTextStyle, ChartSeries, ChartSeriesData } from '../../types';
 import type { AxisDirection } from './types';
 export * from './axis';
+export * from './array';
 export * from './color';
 export * from './format';
 export * from './labels';

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

@@ -6,6 +6,7 @@ import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../constants';
 import { getSeriesStackId } from '../../hooks/useSeries/utils';
 import { getWaterfallPointSubtotal } from './series/waterfall';
 export * from './axis';
+export * from './array';
 export * from './color';
 export * from './format';
 export * from './labels';

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

@@ -76,14 +76,20 @@ export function getZoomedSeriesData(args) {
                 const yAxisIndex = 'yAxis' in seriesItem && typeof seriesItem.yAxis === 'number'
                     ? seriesItem.yAxis
                     : 0;
-                const [yMin, yMax] = zoomState.y[yAxisIndex];
-                const y = 'y' in point ? point.y : undefined;
-                inYRange = isValueInRange({
-                    axis: yAxes === null || yAxes === void 0 ? void 0 : yAxes[yAxisIndex],
-                    value: y,
-                    min: yMin,
-                    max: yMax,
-                });
+                const zoomStateY = zoomState.y[yAxisIndex];
+                if (zoomStateY) {
+                    const [yMin, yMax] = zoomStateY;
+                    const y = 'y' in point ? point.y : undefined;
+                    inYRange = isValueInRange({
+                        axis: yAxes === null || yAxes === void 0 ? void 0 : yAxes[yAxisIndex],
+                        value: y,
+                        min: yMin,
+                        max: yMax,
+                    });
+                }
+                else {
+                    inYRange = false;
+                }
             }
             currentPointInRange = inXRange && inYRange;
             if (currentPointInRange) {

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

@@ -1,9 +1,10 @@
 import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
 import type { AxisYData } from './types';
-export declare function prepareAxisData({ axis, split, scale, width, height, }: {
+export declare function prepareAxisData({ axis, split, scale, top: topOffset, width, height, }: {
     axis: PreparedAxis;
     split: PreparedSplit;
     scale: ChartScale;
+    top: number;
     width: number;
     height: number;
 }): Promise<AxisYData>;

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

@@ -1,7 +1,7 @@
 import { getUniqId } from '@gravity-ui/uikit';
 import { calculateCos, calculateSin, getBandsPosition, getLabelFormatter, getLabelsSize, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../utils';
 import { getTickValues } from './utils';
-async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHeight, }) {
+async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHeight, topOffset, }) {
     var _a;
     const originalTextSize = await getTextSize(text);
     // Currently, a preliminary label calculation is used to build the chart - we cannot exceed it here.
@@ -17,7 +17,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
             width: labelMaxWidth,
             getTextSize,
         });
-        let topOffset = top;
+        let labelTopOffset = top;
         let newLabelWidth = 0;
         let newLabelHeight = 0;
         for (let textRowIndex = 0; textRowIndex < textRows.length; textRowIndex++) {
@@ -49,10 +49,10 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
                 content.push({
                     text: rowText,
                     x,
-                    y: topOffset,
+                    y: labelTopOffset,
                     size: textSize,
                 });
-                topOffset += textSize.height;
+                labelTopOffset += textSize.height;
             }
         }
         content.forEach((row) => {
@@ -68,7 +68,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
         content.push({
             text,
             x,
-            y: Math.max(0, top - size.height / 2),
+            y: Math.max(-topOffset, top - size.height / 2),
             size,
         });
     }
@@ -81,7 +81,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
     return svgLabel;
 }
 // eslint-disable-next-line complexity
-export async function prepareAxisData({ axis, split, scale, width, height, }) {
+export async function prepareAxisData({ axis, split, scale, top: topOffset, width, height, }) {
     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;
@@ -133,6 +133,7 @@ export async function prepareAxisData({ axis, split, scale, width, height, }) {
                     top: y,
                     left: domainX,
                     labelMaxHeight,
+                    topOffset,
                 });
             }
         }

package/dist/esm/components/AxisY/utils.js

@@ -1,4 +1,4 @@
-import { getTicksCount, isBandScale } from '../../utils';
+import { getMinSpaceBetween, getTicksCount, isBandScale } from '../../utils';
 function thinOut(items, delta) {
     const arr = [];
     for (let i = 0; i < items.length; i = i + delta) {
@@ -6,15 +6,6 @@ function thinOut(items, delta) {
     }
     return arr;
 }
-function getMinSpaceBetween(arr, iterator) {
-    return arr.reduce((acc, item, index) => {
-        const prev = arr[index - 1];
-        if (prev) {
-            return Math.min(acc, Math.abs(iterator(prev) - iterator(item)));
-        }
-        return acc;
-    }, Infinity);
-}
 export function getTickValues({ scale, axis, labelLineHeight, }) {
     if ('ticks' in scale && typeof scale.ticks === 'function') {
         const range = scale.range();

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

@@ -96,6 +96,7 @@ export const ChartInner = (props) => {
                     const axisData = await prepareAxisData({
                         axis,
                         scale,
+                        top: boundsOffsetTop,
                         width: boundsWidth,
                         height: boundsHeight,
                         split: preparedSplit,
@@ -107,7 +108,7 @@ export const ChartInner = (props) => {
                 setYAxisDataItems(items);
             }
         })();
-    }, [boundsHeight, boundsWidth, preparedSplit, yAxis, yScale]);
+    }, [boundsHeight, boundsOffsetTop, boundsWidth, preparedSplit, yAxis, yScale]);
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 
             // We use onPointerMove here because onMouseMove works incorrectly when the zoom setting is enabled:
@@ -121,10 +122,14 @@ export const ChartInner = (props) => {
                 return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
             })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
-                xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    yAxisDataItems.map((axisData, index) => (React.createElement(AxisY, { key: index, htmlLayout: htmlLayout, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, preparedAxisData: axisData }))),
-                    xAxis && (React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { axis: xAxis, boundsOffsetLeft: boundsOffsetLeft, boundsOffsetTop: boundsOffsetTop, height: boundsHeight, htmlLayout: htmlLayout, leftmostLimit: svgXPos, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, scale: xScale, split: preparedSplit, width: boundsWidth }))))),
+                xScale && xAxis && (React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
+                    React.createElement(AxisX, { axis: xAxis, boundsOffsetLeft: boundsOffsetLeft, boundsOffsetTop: boundsOffsetTop, height: boundsHeight, htmlLayout: htmlLayout, leftmostLimit: svgXPos, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, scale: xScale, split: preparedSplit, width: boundsWidth }))),
+                Boolean(yAxisDataItems.length) && (React.createElement(React.Fragment, null, yAxisDataItems.map((axisData, index) => {
+                    if (!axisData) {
+                        return null;
+                    }
+                    return (React.createElement(AxisY, { key: index, htmlLayout: htmlLayout, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, preparedAxisData: axisData }));
+                }))),
                 React.createElement("g", { ref: plotBeforeRef }),
                 shapes,
                 React.createElement("g", { ref: plotAfterRef })),

package/dist/esm/components/ChartInner/useChartInnerProps.d.ts

@@ -51,6 +51,6 @@ export declare function useChartInnerProps(props: Props): {
     xAxis: PreparedAxis | null;
     xScale: import("../../hooks").ChartScale | undefined;
     yAxis: PreparedAxis[];
-    yScale: import("../../hooks").ChartScale[] | undefined;
+    yScale: (import("../../hooks").ChartScale | undefined)[] | undefined;
 };
 export {};

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

@@ -20,6 +20,8 @@ export function useChartInnerProps(props) {
         colors: data.colors,
         title: data.title,
         tooltip: data.tooltip,
+        xAxis: data.xAxis,
+        yAxes: data.yAxis,
     });
     const preparedSeriesOptions = React.useMemo(() => {
         return getPreparedOptions(data.series.options);

package/dist/esm/components/Tooltip/ChartTooltipContent.d.ts

@@ -10,5 +10,6 @@ export interface ChartTooltipContentProps {
     totals?: ChartTooltip['totals'];
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
+    qa?: string;
 }
 export declare const ChartTooltipContent: (props: ChartTooltipContentProps) => React.JSX.Element | null;

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

@@ -2,10 +2,10 @@ import React from 'react';
 import isNil from 'lodash/isNil';
 import { DefaultTooltipContent } from './DefaultTooltipContent';
 export const ChartTooltipContent = (props) => {
-    const { hovered, xAxis, yAxis, renderer, rowRenderer, valueFormat, headerFormat, totals, pinned, } = props;
+    const { hovered, xAxis, yAxis, renderer, rowRenderer, valueFormat, headerFormat, totals, pinned, qa, } = props;
     if (!hovered) {
         return null;
     }
     const customTooltip = renderer === null || renderer === void 0 ? void 0 : renderer({ hovered, xAxis, yAxis });
-    return isNil(customTooltip) ? (React.createElement(DefaultTooltipContent, { hovered: hovered, pinned: pinned, rowRenderer: rowRenderer, totals: totals, valueFormat: valueFormat, headerFormat: headerFormat, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
+    return isNil(customTooltip) ? (React.createElement(DefaultTooltipContent, { hovered: hovered, pinned: pinned, rowRenderer: rowRenderer, totals: totals, valueFormat: valueFormat, headerFormat: headerFormat, xAxis: xAxis, yAxis: yAxis, qa: qa })) : (customTooltip);
 };

package/dist/esm/components/Tooltip/DefaultTooltipContent/index.d.ts

@@ -9,6 +9,7 @@ type Props = {
     headerFormat?: ChartTooltip['headerFormat'];
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
+    qa?: string;
 };
-export declare const DefaultTooltipContent: ({ hovered, pinned, rowRenderer, totals, valueFormat, headerFormat, xAxis, yAxis, }: Props) => React.JSX.Element;
+export declare const DefaultTooltipContent: ({ hovered, pinned, rowRenderer, totals, valueFormat, headerFormat, xAxis, yAxis, qa, }: Props) => React.JSX.Element;
 export {};

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

@@ -10,13 +10,13 @@ import { Row } from './Row';
 import { RowWithAggregation } from './RowWithAggregation';
 import { getDefaultValueFormat, getHoveredValues, getMeasureValue, getPreparedAggregation, getXRowData, } from './utils';
 const b = block('tooltip');
-export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, valueFormat, headerFormat, xAxis, yAxis, }) => {
+export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, valueFormat, headerFormat, xAxis, yAxis, qa, }) => {
     var _a;
     const [visibleRows, setVisibleRows] = React.useState();
     const [maxContentRowsHeight, setMaxContentRowsHeight] = React.useState();
     const [scrollBarWidth, setScrollBarWidth] = React.useState(0);
     const contentRowsRef = React.useRef(null);
-    const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis });
+    const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis, headerFormat });
     const hoveredValues = getHoveredValues({ hovered, xAxis, yAxis });
     const prevHoveredValues = usePrevious(hoveredValues);
     const visibleHovered = pinned || !visibleRows ? hovered : hovered.slice(0, visibleRows);
@@ -83,7 +83,7 @@ export const DefaultTooltipContent = ({ hovered, pinned, rowRenderer, totals, va
             setScrollBarWidth(0);
         }
     }, [pinned]);
-    return (React.createElement("div", { className: b('content') },
+    return (React.createElement("div", { className: b('content'), "data-qa": qa },
         formattedHeadValue && (React.createElement("div", { className: b('series-name'), dangerouslySetInnerHTML: { __html: formattedHeadValue } })),
         React.createElement("div", { className: b('content-rows', { pinned }), ref: contentRowsRef, style: { maxHeight: maxContentRowsHeight } },
             visibleHovered.map((seriesItem, i) => {

package/dist/esm/components/Tooltip/DefaultTooltipContent/utils.d.ts

@@ -1,14 +1,15 @@
 import type { ChartSeriesData, ChartTooltip, ChartTooltipTotalsAggregationValue, ChartTooltipTotalsBuiltInAggregation, ChartXAxis, ChartYAxis, TooltipDataChunk, ValueFormat } from '../../../types';
 export type HoveredValue = string | number | null | undefined;
 export declare function getXRowData(data: ChartSeriesData, xAxis?: ChartXAxis | null): string | number | undefined;
-export declare function getDefaultValueFormat({ axis, }: {
+export declare function getDefaultValueFormat({ axis, closestPointsRange, }: {
     axis?: ChartXAxis | ChartYAxis | null;
+    closestPointsRange?: number;
 }): ValueFormat | undefined;
-export declare const getMeasureValue: ({ data, xAxis, yAxis, valueFormat, }: {
+export declare const getMeasureValue: ({ data, xAxis, yAxis, headerFormat, }: {
     data: TooltipDataChunk[];
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
-    valueFormat?: ValueFormat;
+    headerFormat?: ChartTooltip["headerFormat"];
 }) => {
     value: string | null;
     formattedValue?: undefined;

package/dist/esm/components/Tooltip/DefaultTooltipContent/utils.js

@@ -1,7 +1,6 @@
 import get from 'lodash/get';
-import { DEFAULT_DATE_FORMAT } from '../../../constants';
 import { i18n } from '../../../i18n';
-import { getDataCategoryValue } from '../../../utils';
+import { getDataCategoryValue, getDefaultDateFormat } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 function getRowData(fieldName, data, axis) {
     switch (axis === null || axis === void 0 ? void 0 : axis.type) {
@@ -20,7 +19,7 @@ export function getXRowData(data, xAxis) {
 function getYRowData(data, yAxis) {
     return getRowData('y', data, yAxis);
 }
-export function getDefaultValueFormat({ axis, }) {
+export function getDefaultValueFormat({ axis, closestPointsRange, }) {
     switch (axis === null || axis === void 0 ? void 0 : axis.type) {
         case 'linear':
         case 'logarithmic': {
@@ -31,14 +30,14 @@ export function getDefaultValueFormat({ axis, }) {
         case 'datetime': {
             return {
                 type: 'date',
-                format: DEFAULT_DATE_FORMAT,
+                format: getDefaultDateFormat(closestPointsRange),
             };
         }
         default:
             return undefined;
     }
 }
-export const getMeasureValue = ({ data, xAxis, yAxis, valueFormat, }) => {
+export const getMeasureValue = ({ data, xAxis, yAxis, headerFormat, }) => {
     var _a, _b, _c, _d, _e, _f;
     if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))) {
         return null;
@@ -49,18 +48,16 @@ export const getMeasureValue = ({ data, xAxis, yAxis, valueFormat, }) => {
     }
     if (data.some((item) => item.series.type === 'bar-y')) {
         const value = getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis);
-        const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
         const formattedValue = getFormattedValue({
             value: getYRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, yAxis),
-            format,
+            format: headerFormat,
         });
         return { value, formattedValue };
     }
     const value = getXRowData((_e = data[0]) === null || _e === void 0 ? void 0 : _e.data, xAxis);
-    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
     const formattedValue = getFormattedValue({
         value: getXRowData((_f = data[0]) === null || _f === void 0 ? void 0 : _f.data, xAxis),
-        format,
+        format: headerFormat,
     });
     return { value, formattedValue };
 };

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

@@ -23,5 +23,5 @@ export const Tooltip = (props) => {
     }, [left, top]);
     return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { anchorElement: anchor, className: b({ pinned: tooltipPinned }), disableTransition: true, floatingStyles: tooltipPinned ? undefined : { pointerEvents: 'none' }, offset: { mainAxis: 20 }, onOpenChange: tooltipPinned ? handleOnOpenChange : undefined, open: true, placement: ['right', 'left', 'top', 'bottom'] },
         React.createElement("div", { className: b('popup-content') },
-            React.createElement(ChartTooltipContent, { hovered: hovered, pinned: tooltipPinned, renderer: tooltip.renderer, rowRenderer: tooltip.rowRenderer, totals: tooltip.totals, valueFormat: tooltip.valueFormat, headerFormat: tooltip.headerFormat, xAxis: xAxis, yAxis: yAxis })))) : null;
+            React.createElement(ChartTooltipContent, { hovered: hovered, pinned: tooltipPinned, renderer: tooltip.renderer, rowRenderer: tooltip.rowRenderer, totals: tooltip.totals, valueFormat: tooltip.valueFormat, headerFormat: tooltip.headerFormat, xAxis: xAxis, yAxis: yAxis, qa: tooltip.qa })))) : null;
 };