@gravity-ui/charts 1.39.0 → 1.40.0

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { ChartScale, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries, PreparedSplit, PreparedXAxis, RangeSliderState, ShapeData, ZoomState } from '../../hooks';
+import type { ChartScale, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries, PreparedSplit, PreparedXAxis, PreparedYAxis, RangeSliderState, ShapeData, ZoomState } from '../../hooks';
 import type { PreparedChart } from '../../hooks/types';
 import type { LegendConfig } from '../../types';
 import type { ChartInnerProps } from './types';
@@ -21,43 +21,7 @@ export declare function useChartInnerProps(props: Props): {
     boundsHeight: number;
     boundsWidth: number;
     xAxis: PreparedXAxis | null;
-    yAxis: (Omit<import("../../types").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
-        type: import("../../types").ChartAxisType;
-        labels: Omit<import("../../types").ChartAxisLabels, "style" | "enabled" | "padding" | "autoRotation"> & Required<Pick<import("../../types").ChartAxisLabels, "margin" | "enabled" | "html" | "rotation" | "padding">> & {
-            style: import("../../types").BaseTextStyle;
-            rotation: number;
-            height: number;
-            width: number;
-            lineHeight: number;
-            maxWidth: number;
-        };
-        title: {
-            height: number;
-            width: number;
-            text: string;
-            margin: number;
-            style: import("../../types").BaseTextStyle;
-            align: import("../../types").ChartAxisTitleAlignment;
-            maxRowCount: number;
-            rotation: number;
-            maxWidth: number;
-            html: boolean;
-        };
-        min?: number;
-        grid: {
-            enabled: boolean;
-        };
-        maxPadding: number;
-        ticks: {
-            pixelInterval?: number;
-        };
-        tickMarks: import("../../hooks").PreparedAxisTickMarks;
-        position: "left" | "right" | "top" | "bottom";
-        plotIndex: number;
-        plotLines: import("../../hooks").PreparedAxisPlotLine[];
-        plotBands: import("../../hooks").PreparedAxisPlotBand[];
-        crosshair: Required<import("../../types").AxisCrosshair>;
-    })[];
+    yAxis: PreparedYAxis[];
     shapesData: ShapeData[];
     shapesReady: boolean;
     handleLegendItemClick: OnLegendItemClick;

package/dist/cjs/components/ChartInner/utils/axis.d.ts

@@ -5,40 +5,4 @@ export declare function recalculateYAxisLabelsWidth(props: {
     seriesData: PreparedSeries[];
     yAxis: PreparedYAxis[];
     yScale?: (ChartScale | undefined)[];
-}): Promise<(Omit<import("../../..").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
-    type: import("../../..").ChartAxisType;
-    labels: Omit<import("../../..").ChartAxisLabels, "style" | "enabled" | "padding" | "autoRotation"> & Required<Pick<import("../../..").ChartAxisLabels, "margin" | "enabled" | "html" | "rotation" | "padding">> & {
-        style: import("../../..").BaseTextStyle;
-        rotation: number;
-        height: number;
-        width: number;
-        lineHeight: number;
-        maxWidth: number;
-    };
-    title: {
-        height: number;
-        width: number;
-        text: string;
-        margin: number;
-        style: import("../../..").BaseTextStyle;
-        align: import("../../..").ChartAxisTitleAlignment;
-        maxRowCount: number;
-        rotation: number;
-        maxWidth: number;
-        html: boolean;
-    };
-    min?: number;
-    grid: {
-        enabled: boolean;
-    };
-    maxPadding: number;
-    ticks: {
-        pixelInterval?: number;
-    };
-    tickMarks: import("../../../hooks").PreparedAxisTickMarks;
-    position: "left" | "right" | "top" | "bottom";
-    plotIndex: number;
-    plotLines: import("../../../hooks").PreparedAxisPlotLine[];
-    plotBands: import("../../../hooks").PreparedAxisPlotBand[];
-    crosshair: Required<import("../../..").AxisCrosshair>;
-})[]>;
+}): Promise<PreparedYAxis[]>;

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

@@ -35,6 +35,12 @@ export declare function getPreparedAggregation(args: {
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
 }): ChartTooltipTotalsBuiltInAggregation | (() => ChartTooltipTotalsAggregationValue);
+export declare function getSortedHovered(args: {
+    hovered: TooltipDataChunk[];
+    sorting?: ChartTooltip['sorting'];
+    xAxis?: ChartXAxis | null;
+    yAxis?: ChartYAxis;
+}): TooltipDataChunk[];
 export declare function getTooltipRowColorSymbol({ series, color, height, width, }: {
     color?: string;
     series?: TooltipDataChunk['series'];

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

@@ -130,6 +130,47 @@ export function getPreparedAggregation(args) {
     }
     return 'sum';
 }
+export function getSortedHovered(args) {
+    var _a;
+    const { hovered, sorting, xAxis, yAxis } = args;
+    if (!sorting) {
+        return hovered;
+    }
+    if (typeof sorting === 'function') {
+        return [...hovered].sort(sorting);
+    }
+    switch (sorting.key) {
+        case 'value': {
+            const values = getHoveredValues({ hovered, xAxis, yAxis });
+            const direction = (_a = sorting.direction) !== null && _a !== void 0 ? _a : 'asc';
+            const compareValue = (a, b) => {
+                const aNil = a === null || a === undefined;
+                const bNil = b === null || b === undefined;
+                if (aNil && bNil) {
+                    return 0;
+                }
+                if (aNil) {
+                    return -1;
+                }
+                if (bNil) {
+                    return 1;
+                }
+                if (typeof a === 'number' && typeof b === 'number') {
+                    return a - b;
+                }
+                return String(a).localeCompare(String(b));
+            };
+            const indices = hovered.map((_, i) => i);
+            indices.sort((i, j) => direction === 'asc'
+                ? compareValue(values[i], values[j])
+                : compareValue(values[j], values[i]));
+            return indices.map((i) => hovered[i]);
+        }
+        default: {
+            return hovered;
+        }
+    }
+}
 export function getTooltipRowColorSymbol({ series, color, height = 8, width = 16, }) {
     if ((series === null || series === void 0 ? void 0 : series.type) === 'line') {
         const colorSymbol = create('svg').attr('height', height).attr('width', width);

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

@@ -10,6 +10,8 @@ export const Tooltip = (props) => {
     const { hovered, hoveredPlotLines, hoveredPlotBands, pointerPosition } = useTooltip({
         dispatcher,
         tooltip,
+        xAxis,
+        yAxis,
     });
     const containerRect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
     const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;

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

@@ -16,43 +16,7 @@ interface UseAxesProps {
 }
 export declare function getAxes(props: UseAxesProps): Promise<{
     xAxis: import("./types").PreparedXAxis | null;
-    yAxis: (Omit<import("../../types").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
-        type: import("../../types").ChartAxisType;
-        labels: Omit<import("../../types").ChartAxisLabels, "style" | "enabled" | "padding" | "autoRotation"> & Required<Pick<import("../../types").ChartAxisLabels, "margin" | "enabled" | "html" | "rotation" | "padding">> & {
-            style: import("../../types").BaseTextStyle;
-            rotation: number;
-            height: number;
-            width: number;
-            lineHeight: number;
-            maxWidth: number;
-        };
-        title: {
-            height: number;
-            width: number;
-            text: string;
-            margin: number;
-            style: import("../../types").BaseTextStyle;
-            align: import("../../types").ChartAxisTitleAlignment;
-            maxRowCount: number;
-            rotation: number;
-            maxWidth: number;
-            html: boolean;
-        };
-        min?: number;
-        grid: {
-            enabled: boolean;
-        };
-        maxPadding: number;
-        ticks: {
-            pixelInterval?: number;
-        };
-        tickMarks: import("./types").PreparedAxisTickMarks;
-        position: "left" | "right" | "top" | "bottom";
-        plotIndex: number;
-        plotLines: import("./types").PreparedAxisPlotLine[];
-        plotBands: import("./types").PreparedAxisPlotBand[];
-        crosshair: Required<import("../../types").AxisCrosshair>;
-    })[];
+    yAxis: import("./types").PreparedYAxis[];
 }>;
 export declare function useAxis(props: UseAxesProps): AxesState;
 export {};

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

@@ -1,5 +1,5 @@
 import type { DashStyle } from '../../constants';
-import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisRangeSlider, ChartAxisTitleAlignment, ChartAxisType, DeepRequired, MeaningfulAny, PlotLayerPlacement } from '../../types';
+import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisRangeSlider, ChartAxisTitleAlignment, ChartAxisTitleRotation, ChartAxisType, DeepRequired, MeaningfulAny, PlotLayerPlacement } from '../../types';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation' | 'html'>> & {
     style: BaseTextStyle;
     rotation: number;
@@ -51,7 +51,7 @@ type PreparedBaseAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotB
         style: BaseTextStyle;
         align: ChartAxisTitleAlignment;
         maxRowCount: number;
-        rotation: number;
+        rotation: ChartAxisTitleRotation;
         maxWidth: number;
         html: boolean;
     };
@@ -64,7 +64,6 @@ type PreparedBaseAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotB
         pixelInterval?: number;
     };
     tickMarks: PreparedAxisTickMarks;
-    position: 'left' | 'right' | 'top' | 'bottom';
     plotIndex: number;
     plotLines: PreparedAxisPlotLine[];
     plotBands: PreparedAxisPlotBand[];
@@ -72,8 +71,11 @@ type PreparedBaseAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotB
 };
 export type PreparedXAxis = PreparedBaseAxis & {
     rangeSlider: PreparedRangeSlider;
+    position: 'bottom';
+};
+export type PreparedYAxis = PreparedBaseAxis & {
+    position: 'left' | 'right';
 };
-export type PreparedYAxis = PreparedBaseAxis;
 export type PreparedAxis = PreparedXAxis | PreparedYAxis;
 export type AxesState = {
     xAxis: PreparedXAxis | null;

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

@@ -1,4 +1,4 @@
-import type { PreparedAxis, PreparedSeries, PreparedSplit, RangeSliderState, ZoomState } from '../../hooks';
+import type { PreparedAxis, PreparedSeries, PreparedSplit, PreparedYAxis, RangeSliderState, ZoomState } from '../../hooks';
 import type { ChartScale } from './types';
 export { createXScale } from './x-scale';
 export { createYScale } from './y-scale';
@@ -7,7 +7,7 @@ type Args = {
     boundsHeight: number;
     series: PreparedSeries[];
     xAxis: PreparedAxis | null;
-    yAxis: PreparedAxis[];
+    yAxis: PreparedYAxis[];
     split: PreparedSplit;
     isRangeSlider?: boolean;
     rangeSliderState?: RangeSliderState;

package/dist/cjs/hooks/useCrosshair/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { line, select } from 'd3';
 import { getAxisPlotsPosition, getLineDashArray } from '../../utils';
+import { getXValue, getYValue } from '../useShapes/utils';
 import { useCrosshairHover } from './useCrosshairHover';
 export const useCrosshair = (props) => {
     var _a, _b;
@@ -29,15 +30,18 @@ export const useCrosshair = (props) => {
             crosshairSelection
                 .append('path')
                 .attr('d', (hoveredElement) => {
-                var _a, _b, _c;
                 let lineValue = 0;
-                if (xAxis.crosshair.snap) {
-                    const offset = ((_b = (_a = xAxisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(xAxisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
-                    if (typeof hoveredElement.data === 'object' && 'x' in hoveredElement.data) {
-                        lineValue = Number(xAxisScale((_c = hoveredElement.data.x) !== null && _c !== void 0 ? _c : 0)) + offset;
-                    }
+                if (xAxis.crosshair.snap &&
+                    typeof hoveredElement.data === 'object' &&
+                    'x' in hoveredElement.data) {
+                    const xVal = getXValue({
+                        point: hoveredElement.data,
+                        xAxis,
+                        xScale: xAxisScale,
+                    });
+                    lineValue = xVal !== null && !Number.isNaN(xVal) ? xVal : lineValue;
                 }
-                else {
+                else if (!xAxis.crosshair.snap) {
                     lineValue = pointerXPos - boundsOffsetLeft;
                 }
                 const points = [
@@ -89,16 +93,18 @@ export const useCrosshair = (props) => {
                 crosshairSelection
                     .append('path')
                     .attr('d', (hoveredElement) => {
-                    var _a, _b, _c;
                     let lineValue = 0;
-                    if (yAxis.crosshair.snap) {
-                        const offset = ((_b = (_a = yAxisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(yAxisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
-                        if (typeof hoveredElement.data === 'object' &&
-                            'y' in hoveredElement.data) {
-                            lineValue = Number(yAxisScale((_c = hoveredElement.data.y) !== null && _c !== void 0 ? _c : 0)) + offset;
-                        }
+                    if (yAxis.crosshair.snap &&
+                        typeof hoveredElement.data === 'object' &&
+                        'y' in hoveredElement.data) {
+                        const yVal = getYValue({
+                            point: hoveredElement.data,
+                            yAxis,
+                            yScale: yAxisScale,
+                        });
+                        lineValue = yVal !== null && !Number.isNaN(yVal) ? yVal : lineValue;
                     }
-                    else {
+                    else if (!yAxis.crosshair.snap) {
                         lineValue = pointerYPos - boundsOffsetTop;
                     }
                     const points = [

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

@@ -178,7 +178,7 @@ export const prepareBarXData = async (args) => {
                 }
                 if (series.some((s) => s.stacking === 'percent')) {
                     let acc = 0;
-                    const ratio = plotHeight / (positiveStackHeight - stackItems.length);
+                    const ratio = plotHeight / (positiveStackHeight - (stackItems.length - 1) * stackGap);
                     stackItems.forEach((item) => {
                         item.height = item.height * ratio;
                         item.y = plotHeight - item.height - acc;

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

@@ -1,11 +1,14 @@
 import type { Dispatch } from 'd3';
 import type { AxisPlotBand, AxisPlotLine, PointPosition, TooltipDataChunk } from '../../types';
 import type { PreparedTooltip } from '../types';
+import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 type Args = {
     dispatcher: Dispatch<object>;
     tooltip: PreparedTooltip;
+    xAxis?: PreparedXAxis | null;
+    yAxis?: PreparedYAxis;
 };
-export declare const useTooltip: ({ dispatcher, tooltip }: Args) => {
+export declare const useTooltip: ({ dispatcher, tooltip, xAxis, yAxis }: Args) => {
     hovered: TooltipDataChunk[] | undefined;
     hoveredPlotLines: AxisPlotLine[] | undefined;
     hoveredPlotBands: AxisPlotBand[] | undefined;

package/dist/cjs/hooks/useTooltip/index.js

@@ -1,21 +1,28 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
-export const useTooltip = ({ dispatcher, tooltip }) => {
+import { getSortedHovered } from '../../components/Tooltip/DefaultTooltipContent/utils';
+export const useTooltip = ({ dispatcher, tooltip, xAxis, yAxis }) => {
     const [{ hovered, hoveredPlotLines, hoveredPlotBands, pointerPosition }, setTooltipState] = React.useState({});
     const prevHovered = React.useRef(hovered);
     React.useEffect(() => {
         if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled) {
             dispatcher.on('hover-shape.tooltip', (nextHovered, nextPointerPosition, nextHoveredPlots) => {
                 const filteredNextHovered = nextHovered === null || nextHovered === void 0 ? void 0 : nextHovered.filter((item) => 'y' in item.data ? item.data.y !== null : true);
-                const isHoveredChanged = !isEqual(prevHovered.current, filteredNextHovered);
+                const sortedHovered = getSortedHovered({
+                    hovered: filteredNextHovered !== null && filteredNextHovered !== void 0 ? filteredNextHovered : [],
+                    sorting: tooltip === null || tooltip === void 0 ? void 0 : tooltip.sorting,
+                    xAxis,
+                    yAxis,
+                });
+                const isHoveredChanged = !isEqual(prevHovered.current, sortedHovered);
                 const newTooltipState = {
-                    hovered: isHoveredChanged ? filteredNextHovered : prevHovered.current,
+                    hovered: isHoveredChanged ? sortedHovered : prevHovered.current,
                     hoveredPlotLines: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.lines,
                     hoveredPlotBands: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.bands,
                     pointerPosition: nextPointerPosition,
                 };
                 if (isHoveredChanged) {
-                    prevHovered.current = filteredNextHovered;
+                    prevHovered.current = sortedHovered;
                 }
                 setTooltipState(newTooltipState);
             });
@@ -25,7 +32,7 @@ export const useTooltip = ({ dispatcher, tooltip }) => {
                 dispatcher.on('hover-shape.tooltip', null);
             }
         };
-    }, [dispatcher, tooltip]);
+    }, [dispatcher, tooltip, xAxis, yAxis]);
     return {
         hovered,
         hoveredPlotLines,

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

@@ -6,6 +6,7 @@ import type { BaseTextStyle } from './base';
 import type { ChartBrush } from './brush';
 export type ChartAxisType = (typeof AXIS_TYPE)[keyof typeof AXIS_TYPE];
 export type ChartAxisTitleAlignment = 'left' | 'center' | 'right';
+export type ChartAxisTitleRotation = 0 | 90 | -90;
 export interface ChartAxisLabels {
     /** Enable or disable the axis labels. */
     enabled?: boolean;
@@ -314,7 +315,7 @@ export interface ChartYAxisTitle extends ChartAxisTitle {
      *
      * The default values are -90 for the left axis and 90 for the right.
      */
-    rotation?: 0 | 90 | -90;
+    rotation?: ChartAxisTitleRotation;
     /**
      * Interval of the tick marks(absolute or relative to the chart area).
      *

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

@@ -115,6 +115,7 @@ export type ChartTooltipRowRendererArgs = {
     hovered?: TooltipDataChunk<unknown>[];
     className?: string;
 };
+export type ChartTooltipSortComparator<T = MeaningfulAny> = (a: TooltipDataChunk<T>, b: TooltipDataChunk<T>) => number;
 export interface ChartTooltip<T = MeaningfulAny> {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */
@@ -158,4 +159,23 @@ export interface ChartTooltip<T = MeaningfulAny> {
      * It is assigned as a data-qa attribute to an element.
      */
     qa?: string;
+    /**
+     * Controls the order of tooltip rows. Applied to `hovered` before rendering.
+     * Use a custom comparator `(a, b) => number` for arbitrary ordering.
+     */
+    sorting?: {
+        /**
+         * Determines what data should be used to sort by.
+         * `'value'` uses the numeric value of each series point: `y` for most series
+         * (line, area, bar-x, scatter, waterfall), `x` for bar-y, and `value` for
+         * pie, radar, heatmap, treemap, funnel. `null` values are sorted as lowest.
+         * @default undefined (sorting disabled)
+         */
+        key?: 'value' | undefined;
+        /**
+         * Sorting direction.
+         * @default 'asc'
+         */
+        direction?: 'asc' | 'desc';
+    } | ChartTooltipSortComparator<T>;
 }

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

@@ -50,9 +50,9 @@ export function getZoomedSeriesData(args) {
     }
     const zoomedSeriesData = [];
     const zoomedShapesSeriesData = [];
-    let prevPointInRange = false;
-    let currentPointInRange = false;
     seriesData.forEach((seriesItem) => {
+        let prevPointInRange = false;
+        let currentPointInRange = false;
         const filteredData = [];
         const filteredShapesData = SERIES_TYPE_WITH_HIDDEN_POINTS.includes(seriesItem.type) && (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) !== 'category'
             ? []

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { ChartScale, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries, PreparedSplit, PreparedXAxis, RangeSliderState, ShapeData, ZoomState } from '../../hooks';
+import type { ChartScale, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries, PreparedSplit, PreparedXAxis, PreparedYAxis, RangeSliderState, ShapeData, ZoomState } from '../../hooks';
 import type { PreparedChart } from '../../hooks/types';
 import type { LegendConfig } from '../../types';
 import type { ChartInnerProps } from './types';
@@ -21,43 +21,7 @@ export declare function useChartInnerProps(props: Props): {
     boundsHeight: number;
     boundsWidth: number;
     xAxis: PreparedXAxis | null;
-    yAxis: (Omit<import("../..").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
-        type: import("../..").ChartAxisType;
-        labels: Omit<import("../..").ChartAxisLabels, "style" | "enabled" | "padding" | "autoRotation"> & Required<Pick<import("../..").ChartAxisLabels, "margin" | "enabled" | "html" | "rotation" | "padding">> & {
-            style: import("../..").BaseTextStyle;
-            rotation: number;
-            height: number;
-            width: number;
-            lineHeight: number;
-            maxWidth: number;
-        };
-        title: {
-            height: number;
-            width: number;
-            text: string;
-            margin: number;
-            style: import("../..").BaseTextStyle;
-            align: import("../..").ChartAxisTitleAlignment;
-            maxRowCount: number;
-            rotation: number;
-            maxWidth: number;
-            html: boolean;
-        };
-        min?: number;
-        grid: {
-            enabled: boolean;
-        };
-        maxPadding: number;
-        ticks: {
-            pixelInterval?: number;
-        };
-        tickMarks: import("../../hooks").PreparedAxisTickMarks;
-        position: "left" | "right" | "top" | "bottom";
-        plotIndex: number;
-        plotLines: import("../../hooks").PreparedAxisPlotLine[];
-        plotBands: import("../../hooks").PreparedAxisPlotBand[];
-        crosshair: Required<import("../..").AxisCrosshair>;
-    })[];
+    yAxis: PreparedYAxis[];
     shapesData: ShapeData[];
     shapesReady: boolean;
     handleLegendItemClick: OnLegendItemClick;

package/dist/esm/components/ChartInner/utils/axis.d.ts

@@ -5,40 +5,4 @@ export declare function recalculateYAxisLabelsWidth(props: {
     seriesData: PreparedSeries[];
     yAxis: PreparedYAxis[];
     yScale?: (ChartScale | undefined)[];
-}): Promise<(Omit<import("../../..").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
-    type: import("../../..").ChartAxisType;
-    labels: Omit<import("../../..").ChartAxisLabels, "style" | "enabled" | "padding" | "autoRotation"> & Required<Pick<import("../../..").ChartAxisLabels, "margin" | "enabled" | "html" | "rotation" | "padding">> & {
-        style: import("../../..").BaseTextStyle;
-        rotation: number;
-        height: number;
-        width: number;
-        lineHeight: number;
-        maxWidth: number;
-    };
-    title: {
-        height: number;
-        width: number;
-        text: string;
-        margin: number;
-        style: import("../../..").BaseTextStyle;
-        align: import("../../..").ChartAxisTitleAlignment;
-        maxRowCount: number;
-        rotation: number;
-        maxWidth: number;
-        html: boolean;
-    };
-    min?: number;
-    grid: {
-        enabled: boolean;
-    };
-    maxPadding: number;
-    ticks: {
-        pixelInterval?: number;
-    };
-    tickMarks: import("../../../hooks").PreparedAxisTickMarks;
-    position: "left" | "right" | "top" | "bottom";
-    plotIndex: number;
-    plotLines: import("../../../hooks").PreparedAxisPlotLine[];
-    plotBands: import("../../../hooks").PreparedAxisPlotBand[];
-    crosshair: Required<import("../../..").AxisCrosshair>;
-})[]>;
+}): Promise<PreparedYAxis[]>;

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

@@ -35,6 +35,12 @@ export declare function getPreparedAggregation(args: {
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
 }): ChartTooltipTotalsBuiltInAggregation | (() => ChartTooltipTotalsAggregationValue);
+export declare function getSortedHovered(args: {
+    hovered: TooltipDataChunk[];
+    sorting?: ChartTooltip['sorting'];
+    xAxis?: ChartXAxis | null;
+    yAxis?: ChartYAxis;
+}): TooltipDataChunk[];
 export declare function getTooltipRowColorSymbol({ series, color, height, width, }: {
     color?: string;
     series?: TooltipDataChunk['series'];

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

@@ -130,6 +130,47 @@ export function getPreparedAggregation(args) {
     }
     return 'sum';
 }
+export function getSortedHovered(args) {
+    var _a;
+    const { hovered, sorting, xAxis, yAxis } = args;
+    if (!sorting) {
+        return hovered;
+    }
+    if (typeof sorting === 'function') {
+        return [...hovered].sort(sorting);
+    }
+    switch (sorting.key) {
+        case 'value': {
+            const values = getHoveredValues({ hovered, xAxis, yAxis });
+            const direction = (_a = sorting.direction) !== null && _a !== void 0 ? _a : 'asc';
+            const compareValue = (a, b) => {
+                const aNil = a === null || a === undefined;
+                const bNil = b === null || b === undefined;
+                if (aNil && bNil) {
+                    return 0;
+                }
+                if (aNil) {
+                    return -1;
+                }
+                if (bNil) {
+                    return 1;
+                }
+                if (typeof a === 'number' && typeof b === 'number') {
+                    return a - b;
+                }
+                return String(a).localeCompare(String(b));
+            };
+            const indices = hovered.map((_, i) => i);
+            indices.sort((i, j) => direction === 'asc'
+                ? compareValue(values[i], values[j])
+                : compareValue(values[j], values[i]));
+            return indices.map((i) => hovered[i]);
+        }
+        default: {
+            return hovered;
+        }
+    }
+}
 export function getTooltipRowColorSymbol({ series, color, height = 8, width = 16, }) {
     if ((series === null || series === void 0 ? void 0 : series.type) === 'line') {
         const colorSymbol = create('svg').attr('height', height).attr('width', width);

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

@@ -10,6 +10,8 @@ export const Tooltip = (props) => {
     const { hovered, hoveredPlotLines, hoveredPlotBands, pointerPosition } = useTooltip({
         dispatcher,
         tooltip,
+        xAxis,
+        yAxis,
     });
     const containerRect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
     const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;

package/dist/esm/hooks/useAxis/index.d.ts

@@ -16,43 +16,7 @@ interface UseAxesProps {
 }
 export declare function getAxes(props: UseAxesProps): Promise<{
     xAxis: import("./types").PreparedXAxis | null;
-    yAxis: (Omit<import("../..").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
-        type: import("../..").ChartAxisType;
-        labels: Omit<import("../..").ChartAxisLabels, "style" | "enabled" | "padding" | "autoRotation"> & Required<Pick<import("../..").ChartAxisLabels, "margin" | "enabled" | "html" | "rotation" | "padding">> & {
-            style: import("../..").BaseTextStyle;
-            rotation: number;
-            height: number;
-            width: number;
-            lineHeight: number;
-            maxWidth: number;
-        };
-        title: {
-            height: number;
-            width: number;
-            text: string;
-            margin: number;
-            style: import("../..").BaseTextStyle;
-            align: import("../..").ChartAxisTitleAlignment;
-            maxRowCount: number;
-            rotation: number;
-            maxWidth: number;
-            html: boolean;
-        };
-        min?: number;
-        grid: {
-            enabled: boolean;
-        };
-        maxPadding: number;
-        ticks: {
-            pixelInterval?: number;
-        };
-        tickMarks: import("./types").PreparedAxisTickMarks;
-        position: "left" | "right" | "top" | "bottom";
-        plotIndex: number;
-        plotLines: import("./types").PreparedAxisPlotLine[];
-        plotBands: import("./types").PreparedAxisPlotBand[];
-        crosshair: Required<import("../..").AxisCrosshair>;
-    })[];
+    yAxis: import("./types").PreparedYAxis[];
 }>;
 export declare function useAxis(props: UseAxesProps): AxesState;
 export {};

package/dist/esm/hooks/useAxis/types.d.ts

@@ -1,5 +1,5 @@
 import type { DashStyle } from '../../constants';
-import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisRangeSlider, ChartAxisTitleAlignment, ChartAxisType, DeepRequired, MeaningfulAny, PlotLayerPlacement } from '../../types';
+import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisRangeSlider, ChartAxisTitleAlignment, ChartAxisTitleRotation, ChartAxisType, DeepRequired, MeaningfulAny, PlotLayerPlacement } from '../../types';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation' | 'html'>> & {
     style: BaseTextStyle;
     rotation: number;
@@ -51,7 +51,7 @@ type PreparedBaseAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotB
         style: BaseTextStyle;
         align: ChartAxisTitleAlignment;
         maxRowCount: number;
-        rotation: number;
+        rotation: ChartAxisTitleRotation;
         maxWidth: number;
         html: boolean;
     };
@@ -64,7 +64,6 @@ type PreparedBaseAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotB
         pixelInterval?: number;
     };
     tickMarks: PreparedAxisTickMarks;
-    position: 'left' | 'right' | 'top' | 'bottom';
     plotIndex: number;
     plotLines: PreparedAxisPlotLine[];
     plotBands: PreparedAxisPlotBand[];
@@ -72,8 +71,11 @@ type PreparedBaseAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotB
 };
 export type PreparedXAxis = PreparedBaseAxis & {
     rangeSlider: PreparedRangeSlider;
+    position: 'bottom';
+};
+export type PreparedYAxis = PreparedBaseAxis & {
+    position: 'left' | 'right';
 };
-export type PreparedYAxis = PreparedBaseAxis;
 export type PreparedAxis = PreparedXAxis | PreparedYAxis;
 export type AxesState = {
     xAxis: PreparedXAxis | null;

package/dist/esm/hooks/useAxisScales/index.d.ts

@@ -1,4 +1,4 @@
-import type { PreparedAxis, PreparedSeries, PreparedSplit, RangeSliderState, ZoomState } from '../../hooks';
+import type { PreparedAxis, PreparedSeries, PreparedSplit, PreparedYAxis, RangeSliderState, ZoomState } from '../../hooks';
 import type { ChartScale } from './types';
 export { createXScale } from './x-scale';
 export { createYScale } from './y-scale';
@@ -7,7 +7,7 @@ type Args = {
     boundsHeight: number;
     series: PreparedSeries[];
     xAxis: PreparedAxis | null;
-    yAxis: PreparedAxis[];
+    yAxis: PreparedYAxis[];
     split: PreparedSplit;
     isRangeSlider?: boolean;
     rangeSliderState?: RangeSliderState;

package/dist/esm/hooks/useCrosshair/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { line, select } from 'd3';
 import { getAxisPlotsPosition, getLineDashArray } from '../../utils';
+import { getXValue, getYValue } from '../useShapes/utils';
 import { useCrosshairHover } from './useCrosshairHover';
 export const useCrosshair = (props) => {
     var _a, _b;
@@ -29,15 +30,18 @@ export const useCrosshair = (props) => {
             crosshairSelection
                 .append('path')
                 .attr('d', (hoveredElement) => {
-                var _a, _b, _c;
                 let lineValue = 0;
-                if (xAxis.crosshair.snap) {
-                    const offset = ((_b = (_a = xAxisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(xAxisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
-                    if (typeof hoveredElement.data === 'object' && 'x' in hoveredElement.data) {
-                        lineValue = Number(xAxisScale((_c = hoveredElement.data.x) !== null && _c !== void 0 ? _c : 0)) + offset;
-                    }
+                if (xAxis.crosshair.snap &&
+                    typeof hoveredElement.data === 'object' &&
+                    'x' in hoveredElement.data) {
+                    const xVal = getXValue({
+                        point: hoveredElement.data,
+                        xAxis,
+                        xScale: xAxisScale,
+                    });
+                    lineValue = xVal !== null && !Number.isNaN(xVal) ? xVal : lineValue;
                 }
-                else {
+                else if (!xAxis.crosshair.snap) {
                     lineValue = pointerXPos - boundsOffsetLeft;
                 }
                 const points = [
@@ -89,16 +93,18 @@ export const useCrosshair = (props) => {
                 crosshairSelection
                     .append('path')
                     .attr('d', (hoveredElement) => {
-                    var _a, _b, _c;
                     let lineValue = 0;
-                    if (yAxis.crosshair.snap) {
-                        const offset = ((_b = (_a = yAxisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(yAxisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
-                        if (typeof hoveredElement.data === 'object' &&
-                            'y' in hoveredElement.data) {
-                            lineValue = Number(yAxisScale((_c = hoveredElement.data.y) !== null && _c !== void 0 ? _c : 0)) + offset;
-                        }
+                    if (yAxis.crosshair.snap &&
+                        typeof hoveredElement.data === 'object' &&
+                        'y' in hoveredElement.data) {
+                        const yVal = getYValue({
+                            point: hoveredElement.data,
+                            yAxis,
+                            yScale: yAxisScale,
+                        });
+                        lineValue = yVal !== null && !Number.isNaN(yVal) ? yVal : lineValue;
                     }
-                    else {
+                    else if (!yAxis.crosshair.snap) {
                         lineValue = pointerYPos - boundsOffsetTop;
                     }
                     const points = [

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

@@ -178,7 +178,7 @@ export const prepareBarXData = async (args) => {
                 }
                 if (series.some((s) => s.stacking === 'percent')) {
                     let acc = 0;
-                    const ratio = plotHeight / (positiveStackHeight - stackItems.length);
+                    const ratio = plotHeight / (positiveStackHeight - (stackItems.length - 1) * stackGap);
                     stackItems.forEach((item) => {
                         item.height = item.height * ratio;
                         item.y = plotHeight - item.height - acc;

package/dist/esm/hooks/useTooltip/index.d.ts

@@ -1,11 +1,14 @@
 import type { Dispatch } from 'd3';
 import type { AxisPlotBand, AxisPlotLine, PointPosition, TooltipDataChunk } from '../../types';
 import type { PreparedTooltip } from '../types';
+import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 type Args = {
     dispatcher: Dispatch<object>;
     tooltip: PreparedTooltip;
+    xAxis?: PreparedXAxis | null;
+    yAxis?: PreparedYAxis;
 };
-export declare const useTooltip: ({ dispatcher, tooltip }: Args) => {
+export declare const useTooltip: ({ dispatcher, tooltip, xAxis, yAxis }: Args) => {
     hovered: TooltipDataChunk[] | undefined;
     hoveredPlotLines: AxisPlotLine[] | undefined;
     hoveredPlotBands: AxisPlotBand[] | undefined;

package/dist/esm/hooks/useTooltip/index.js

@@ -1,21 +1,28 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
-export const useTooltip = ({ dispatcher, tooltip }) => {
+import { getSortedHovered } from '../../components/Tooltip/DefaultTooltipContent/utils';
+export const useTooltip = ({ dispatcher, tooltip, xAxis, yAxis }) => {
     const [{ hovered, hoveredPlotLines, hoveredPlotBands, pointerPosition }, setTooltipState] = React.useState({});
     const prevHovered = React.useRef(hovered);
     React.useEffect(() => {
         if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled) {
             dispatcher.on('hover-shape.tooltip', (nextHovered, nextPointerPosition, nextHoveredPlots) => {
                 const filteredNextHovered = nextHovered === null || nextHovered === void 0 ? void 0 : nextHovered.filter((item) => 'y' in item.data ? item.data.y !== null : true);
-                const isHoveredChanged = !isEqual(prevHovered.current, filteredNextHovered);
+                const sortedHovered = getSortedHovered({
+                    hovered: filteredNextHovered !== null && filteredNextHovered !== void 0 ? filteredNextHovered : [],
+                    sorting: tooltip === null || tooltip === void 0 ? void 0 : tooltip.sorting,
+                    xAxis,
+                    yAxis,
+                });
+                const isHoveredChanged = !isEqual(prevHovered.current, sortedHovered);
                 const newTooltipState = {
-                    hovered: isHoveredChanged ? filteredNextHovered : prevHovered.current,
+                    hovered: isHoveredChanged ? sortedHovered : prevHovered.current,
                     hoveredPlotLines: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.lines,
                     hoveredPlotBands: nextHoveredPlots === null || nextHoveredPlots === void 0 ? void 0 : nextHoveredPlots.bands,
                     pointerPosition: nextPointerPosition,
                 };
                 if (isHoveredChanged) {
-                    prevHovered.current = filteredNextHovered;
+                    prevHovered.current = sortedHovered;
                 }
                 setTooltipState(newTooltipState);
             });
@@ -25,7 +32,7 @@ export const useTooltip = ({ dispatcher, tooltip }) => {
                 dispatcher.on('hover-shape.tooltip', null);
             }
         };
-    }, [dispatcher, tooltip]);
+    }, [dispatcher, tooltip, xAxis, yAxis]);
     return {
         hovered,
         hoveredPlotLines,

package/dist/esm/types/chart/axis.d.ts

@@ -6,6 +6,7 @@ import type { BaseTextStyle } from './base';
 import type { ChartBrush } from './brush';
 export type ChartAxisType = (typeof AXIS_TYPE)[keyof typeof AXIS_TYPE];
 export type ChartAxisTitleAlignment = 'left' | 'center' | 'right';
+export type ChartAxisTitleRotation = 0 | 90 | -90;
 export interface ChartAxisLabels {
     /** Enable or disable the axis labels. */
     enabled?: boolean;
@@ -314,7 +315,7 @@ export interface ChartYAxisTitle extends ChartAxisTitle {
      *
      * The default values are -90 for the left axis and 90 for the right.
      */
-    rotation?: 0 | 90 | -90;
+    rotation?: ChartAxisTitleRotation;
     /**
      * Interval of the tick marks(absolute or relative to the chart area).
      *

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

@@ -115,6 +115,7 @@ export type ChartTooltipRowRendererArgs = {
     hovered?: TooltipDataChunk<unknown>[];
     className?: string;
 };
+export type ChartTooltipSortComparator<T = MeaningfulAny> = (a: TooltipDataChunk<T>, b: TooltipDataChunk<T>) => number;
 export interface ChartTooltip<T = MeaningfulAny> {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */
@@ -158,4 +159,23 @@ export interface ChartTooltip<T = MeaningfulAny> {
      * It is assigned as a data-qa attribute to an element.
      */
     qa?: string;
+    /**
+     * Controls the order of tooltip rows. Applied to `hovered` before rendering.
+     * Use a custom comparator `(a, b) => number` for arbitrary ordering.
+     */
+    sorting?: {
+        /**
+         * Determines what data should be used to sort by.
+         * `'value'` uses the numeric value of each series point: `y` for most series
+         * (line, area, bar-x, scatter, waterfall), `x` for bar-y, and `value` for
+         * pie, radar, heatmap, treemap, funnel. `null` values are sorted as lowest.
+         * @default undefined (sorting disabled)
+         */
+        key?: 'value' | undefined;
+        /**
+         * Sorting direction.
+         * @default 'asc'
+         */
+        direction?: 'asc' | 'desc';
+    } | ChartTooltipSortComparator<T>;
 }

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

@@ -50,9 +50,9 @@ export function getZoomedSeriesData(args) {
     }
     const zoomedSeriesData = [];
     const zoomedShapesSeriesData = [];
-    let prevPointInRange = false;
-    let currentPointInRange = false;
     seriesData.forEach((seriesItem) => {
+        let prevPointInRange = false;
+        let currentPointInRange = false;
         const filteredData = [];
         const filteredShapesData = SERIES_TYPE_WITH_HIDDEN_POINTS.includes(seriesItem.type) && (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) !== 'category'
             ? []

package/package.json

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