@gravity-ui/charts 1.38.4 → 1.38.6

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

@@ -3,9 +3,8 @@ export interface ChartLegendItem {
     enabled?: boolean;
     /**
      * Defines the pixel distance between each legend item
-     *
      * @default 20
-     * */
+     */
     itemDistance?: number;
     /** CSS styles for each legend item */
     itemStyle?: BaseTextStyle;
@@ -15,32 +14,27 @@ export interface ChartLegend extends ChartLegendItem {
      * Different types for different color schemes.
      * If the color scheme is continuous, a gradient legend will be drawn.
      * Otherwise, samples for different point values
-     *
      * @default 'discrete'
      */
     type?: 'discrete' | 'continuous';
     /**
      * The horizontal alignment of the legend box within the chart area.
-     *
      * @default center
-     * */
+     */
     align?: 'left' | 'center' | 'right';
     /**
      * The vertical alignment of the legend box within the chart area.
      * Only applies when position is 'left' or 'right'.
-     *
      * @default top
-     * */
+     */
     verticalAlign?: 'top' | 'center' | 'bottom';
     /**
      * Defines how items should be positioned in the legend when overflowing (moving to the next line).
-     *
      * @default center
-     * */
+     */
     justifyContent?: 'start' | 'center';
     /**
      * The space between the legend and the axis labels or chart area.
-     *
      * @default 15
      */
     margin?: number;
@@ -48,10 +42,11 @@ export interface ChartLegend extends ChartLegendItem {
         text?: string;
         /** CSS styles for the title */
         style?: Partial<BaseTextStyle>;
-        /** The distance(in pixels) between the main content of the legend and its title
+        /**
+         * The distance(in pixels) between the main content of the legend and its title
          *
          * Defaults to 4 for horizontal axes, 8 for vertical.
-         * */
+         */
         margin?: number;
         /** The horizontal alignment of the title. */
         align?: 'left' | 'center' | 'right';
@@ -64,37 +59,32 @@ export interface ChartLegend extends ChartLegendItem {
     width?: number;
     /**
      * Allows to use any html-tags to display the content.
-     *
      * @default false
-     * */
+     */
     html?: boolean;
     /**
      * The position of the legend box within the chart area.
-     *
      * @default 'bottom'
-     * */
+     */
     position?: 'top' | 'bottom' | 'left' | 'right';
 }
 export interface BaseLegendSymbol {
     /**
      * The pixel padding between the legend item symbol and the legend item text.
-     *
      * @default 5
-     * */
+     */
     padding?: number;
 }
 export interface RectLegendSymbolOptions extends BaseLegendSymbol {
     /**
      * The pixel width of the symbol for series types that use a rectangle in the legend
-     *
      * @default 10
-     * */
+     */
     width?: number;
     /**
      * The pixel width of the symbol for series types that use a rectangle in the legend
-     *
      * @default 10
-     * */
+     */
     height?: number;
     /**
      * The border radius of the symbol for series types that use a rectangle in the legend.
@@ -106,16 +96,14 @@ export interface RectLegendSymbolOptions extends BaseLegendSymbol {
 export interface PathLegendSymbolOptions extends BaseLegendSymbol {
     /**
      * The pixel width of the symbol for series types that use a path in the legend
-     *
      * @default 16
-     * */
+     */
     width?: number;
 }
 export interface SymbolLegendSymbolOptions extends BaseLegendSymbol {
     /**
      * The pixel width of the symbol for series types that use a symbol in the legend
-     *
      * @default 8
-     * */
+     */
     width?: number;
 }

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

@@ -30,13 +30,14 @@ export interface LineSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     };
 }
 export interface LineSeriesLineBaseStyle {
-    /** Pixel width of the graph line.
-     *
+    /**
+     * Pixel width of the graph line.
      * @default 1 (for individual series).
      * For series within the range slider, values are inherited from the individual series by default.
      */
     lineWidth?: number;
-    /** Individual opacity for the line.
+    /**
+     * Individual opacity for the line.
      *
      * For series within the range slider, values are inherited from the individual series by default.
      */
@@ -69,7 +70,6 @@ export interface LineSeries<T = MeaningfulAny> extends BaseSeries, LineSeriesLin
      * - `'connect'`: Connect points across null values (skip nulls in rendering)
      * - `'zero'`: Treat null values as zero
      * - `'skip'`: Omit the data point (creates gap in line)
-     *
      * @default 'skip'
      */
     nullMode?: 'connect' | 'zero' | 'skip';

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

@@ -61,28 +61,24 @@ export interface PieSeries<T = MeaningfulAny> extends BaseSeries {
     dataLabels?: BaseSeries['dataLabels'] & {
         /**
          * The distance of the data label from the pie's edge.
-         *
          * @default 30
-         * */
+         */
         distance?: number;
         /**
          * The distance from the data label to the connector.
-         *
          * @default 5
-         * */
+         */
         connectorPadding?: number;
         /**
          * The method that is used to generate the connector path.
-         *
          * @default 'polyline'
-         * */
+         */
         connectorShape?: ConnectorShape;
         /**
          * How to interpolate between two-dimensional [x, y] points for a connector.
          * Works only if connectorShape equals to 'polyline'
-         *
          * @default 'basic'
-         * */
+         */
         connectorCurve?: ConnectorCurve;
     };
     /** Individual series legend options. Has higher priority than legend options in chart data */
@@ -91,9 +87,8 @@ export interface PieSeries<T = MeaningfulAny> extends BaseSeries {
     };
     /**
      * Function for adding custom svg nodes for a series
-     *
-     * @return BaseType
-     * */
+     * @returns BaseType
+     */
     renderCustomShape?: (args: {
         series: {
             innerRadius: number;
@@ -104,7 +99,6 @@ export interface PieSeries<T = MeaningfulAny> extends BaseSeries {
      *
      * - `'zero'`: Treat null values as zero
      * - `'skip'`: Omit segments with null values (don't render them)
-     *
      * @default 'skip'
      */
     nullMode?: 'zero' | 'skip';

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

@@ -20,7 +20,6 @@ export interface ScatterSeriesData<T = MeaningfulAny> extends BaseSeriesData<T>
     y?: string | number | null;
     /**
      * Corresponding value of axis category.
-     *
      * @deprecated use `x` or `y` instead
      */
     category?: string;
@@ -49,7 +48,6 @@ export interface ScatterSeries<T = MeaningfulAny> extends BaseSeries {
      *
      * - `'zero'`: Treat null values as zero
      * - `'skip'`: Omit data points with null values (don't render them)
-     *
      * @default 'skip'
      */
     nullMode?: 'zero' | 'skip';

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

@@ -23,16 +23,14 @@ export interface DataLabelRendererData<T = MeaningfulAny> {
 export interface BasicHoverState {
     /**
      * Enable separate styles for the hovered series.
-     *
      * @default true
-     * */
+     */
     enabled?: boolean;
     /**
      * How much to brighten/darken the point on hover. Use positive to brighten, negative to darken.
      * The behavior of this property is dependent on the implementing color space ([more details](https://d3js.org/d3-color#color_brighter)).
      * For example in case of using rgb color you can use floating point number from `-5.0` to `5.0`.
      * Rgb color space is used by default.
-     *
      * @default 0.3
      */
     brightness?: number;
@@ -40,15 +38,13 @@ export interface BasicHoverState {
 export interface BasicInactiveState {
     /**
      * Enable separate styles for the inactive series.
-     *
      * @default true
-     * */
+     */
     enabled?: boolean;
     /**
      * Opacity of series elements (bars, data labels)
-     *
      * @default 0.5
-     * */
+     */
     opacity?: number;
 }
 export interface ChartSeriesOptions {
@@ -60,19 +56,19 @@ export interface ChartSeriesOptions {
         renderer?: (args: DataLabelRendererData) => React.SVGTextElementAttributes<SVGTextElement>;
     };
     'bar-x'?: {
-        /** The maximum allowed pixel width for a column.
+        /**
+         * The maximum allowed pixel width for a column.
          * This prevents the columns from becoming too wide when there is a small number of points in the chart.
-         *
          * @default 50
          */
         barMaxWidth?: number;
-        /** Padding between each column or bar, in x axis units.
-         *
+        /**
+         * Padding between each column or bar, in x axis units.
          * @default 0.1
-         * */
+         */
         barPadding?: number;
-        /** Padding between each value groups, in x axis units
-         *
+        /**
+         * Padding between each value groups, in x axis units
          * @default 0.2
          */
         groupPadding?: number;
@@ -87,16 +83,16 @@ export interface ChartSeriesOptions {
          */
         stackGap?: number;
         dataSorting?: {
-            /** Determines what data value should be used to sort by.
+            /**
+             * Determines what data value should be used to sort by.
              * Possible values are undefined to disable, "name" to sort by series name or "y"
-             *
              * @default undefined
-             * */
+             */
             key?: 'name' | 'y' | undefined;
-            /** Sorting direction.
-             *
+            /**
+             * Sorting direction.
              * @default 'asc'
-             * */
+             */
             direction?: 'asc' | 'desc';
         };
         /** Options for the series states that provide additional styling information to the series. */
@@ -106,25 +102,24 @@ export interface ChartSeriesOptions {
         };
     };
     'bar-y'?: {
-        /** The maximum allowed pixel width for a column.
+        /**
+         * The maximum allowed pixel width for a column.
          * This prevents the columns from becoming too wide when there is a small number of points in the chart.
-         *
          * @default 50
          */
         barMaxWidth?: number;
-        /** Padding between each column or bar, in x axis units.
-         *
+        /**
+         * Padding between each column or bar, in x axis units.
          * @default 0.1
-         * */
+         */
         barPadding?: number;
-        /** Padding between each value groups, in x axis units
-         *
+        /**
+         * Padding between each value groups, in x axis units
          * @default 0.2
          */
         groupPadding?: number;
         /**
          * The width of the border surrounding each bar.
-         *
          * @default 0
          */
         borderWidth?: number;
@@ -143,16 +138,16 @@ export interface ChartSeriesOptions {
          */
         stackGap?: number;
         dataSorting?: {
-            /** Determines what data value should be used to sort by.
+            /**
+             * Determines what data value should be used to sort by.
              * Possible values are undefined to disable, "name" to sort by series name or "x"
-             *
              * @default undefined
-             * */
+             */
             key?: 'name' | 'x' | undefined;
-            /** Sorting direction.
-             *
+            /**
+             * Sorting direction.
              * @default 'asc'
-             * */
+             */
             direction?: 'asc' | 'desc';
         };
         /** Options for the series states that provide additional styling information to the series. */
@@ -184,10 +179,10 @@ export interface ChartSeriesOptions {
         };
     };
     line?: {
-        /** Pixel width of the graph line.
-         *
+        /**
+         * Pixel width of the graph line.
          * @default 1
-         * */
+         */
         lineWidth?: number;
         /** Options for the series states that provide additional styling information to the series. */
         states?: {
@@ -201,27 +196,27 @@ export interface ChartSeriesOptions {
         };
         /** Options for the point markers of line series */
         marker?: PointMarkerOptions;
-        /** Options for line style
-         *
+        /**
+         * Options for line style
          * @default 'Solid'
-         * */
+         */
         dashStyle?: DashStyle;
-        /** Options for line cap style
-         *
+        /**
+         * Options for line cap style
          * @default 'round' when dashStyle is not 'solid', 'none' when dashStyle is not 'solid'
-         * */
+         */
         linecap?: `${LineCap}`;
-        /** Defines the shape to be used at the corners of the line
-         *
+        /**
+         * Defines the shape to be used at the corners of the line
          * @default 'round' when dashStyle is not 'solid', 'unset' when dashStyle is not 'solid'
-         * */
+         */
         linejoin?: `${LineJoin}`;
     };
     area?: {
-        /** Pixel width of the graph line.
-         *
+        /**
+         * Pixel width of the graph line.
          * @default 1
-         * */
+         */
         lineWidth?: number;
         /** Options for the series states that provide additional styling information to the series. */
         states?: {
@@ -244,16 +239,16 @@ export interface ChartSeriesOptions {
         };
     };
     waterfall?: {
-        /** The maximum allowed pixel width for a column.
+        /**
+         * The maximum allowed pixel width for a column.
          * This prevents the columns from becoming too wide when there is a small number of points in the chart.
-         *
          * @default 50
          */
         barMaxWidth?: number;
-        /** Padding between each column or bar, in x axis units.
-         *
+        /**
+         * Padding between each column or bar, in x axis units.
          * @default 0.1
-         * */
+         */
         barPadding?: number;
         /** Options for the series states that provide additional styling information to the series. */
         states?: {
@@ -282,7 +277,6 @@ export interface ChartSeriesOptions {
         };
         /**
          * The width of the border surrounding each cell.
-         *
          * @default 0
          */
         borderWidth?: number;
@@ -301,7 +295,6 @@ export interface ChartSeriesOptions {
 export type ChartSeriesRangeSliderOptions = {
     /**
      * Enable or disable the visibility of this series in the Range Slider.
-     *
      * @default true
      */
     visible?: boolean;

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

@@ -2,7 +2,9 @@ import type { BaseTextStyle } from './base';
 export interface ChartTitle {
     text: string;
     style?: Partial<BaseTextStyle>;
-    /** Can be used for the UI automated test.
-     * It is assigned as a data-qa attribute to an element. */
+    /**
+     * Can be used for the UI automated test.
+     * It is assigned as a data-qa attribute to an element.
+     */
     qa?: string;
 }

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

@@ -119,9 +119,11 @@ export interface ChartTooltip<T = MeaningfulAny> {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */
     renderer?: (args: ChartTooltipRendererArgs<T>) => React.ReactElement | null;
-    /** Defines the way a single data/series is displayed (corresponding to a separate selected point/ruler/shape on the chart).
+    /**
+     * Defines the way a single data/series is displayed (corresponding to a separate selected point/ruler/shape on the chart).
      * It is useful in cases where you need to display additional information, but keep the general format of the tooltip.
-     * If a string is returned, it will be interpreted as raw HTML and inserted without escaping. */
+     * If a string is returned, it will be interpreted as raw HTML and inserted without escaping.
+     */
     rowRenderer?: ((args: ChartTooltipRowRendererArgs) => React.ReactElement | string) | null;
     pin?: {
         enabled?: boolean;
@@ -151,7 +153,9 @@ 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. */
+    /**
+     * Can be used for the UI automated test.
+     * It is assigned as a data-qa attribute to an element.
+     */
     qa?: string;
 }

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

@@ -38,18 +38,20 @@ export interface TreemapSeries<T = MeaningfulAny> extends BaseSeries {
     layoutAlgorithm?: `${LayoutAlgorithm}`;
     /**
      * Options for the series data labels, appearing next to each data point.
-     * */
+     */
     dataLabels?: BaseSeries['dataLabels'] & {
         /** Horizontal alignment of the data label inside the tile. */
         align?: 'left' | 'center' | 'right';
     };
-    /** Data sorting settings (affects the order in which blocks are displayed inside the chart).
-     * If the option is not specified, the data is displayed in the order defined by the user. */
+    /**
+     * Data sorting settings (affects the order in which blocks are displayed inside the chart).
+     * If the option is not specified, the data is displayed in the order defined by the user.
+     */
     sorting?: {
         /** Enable or disable sorting. */
         enabled?: boolean;
-        /** The sorting direction.
-         *
+        /**
+         * The sorting direction.
          * @default: 'desc'
          */
         direction?: 'asc' | 'desc';

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

@@ -51,7 +51,6 @@ export interface WaterfallSeries<T = MeaningfulAny> extends BaseSeries {
      *
      * - `'zero'`: Treat null values as zero
      * - `'skip'`: Omit data points with null values (don't render them)
-     *
      * @default 'skip'
      */
     nullMode?: 'zero' | 'skip';

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

@@ -38,13 +38,11 @@ export interface ChartZoom {
     resetButton?: {
         /**
          * The alignment of the button.
-         *
          * @default 'top-right'
          */
         align?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
         /**
          * The offset of the button.
-         *
          * @default {x: 0, y: 0}
          */
         offset?: {
@@ -55,7 +53,6 @@ export interface ChartZoom {
          * The box to which the button is positioned relative to.
          * - `chart-box` refers to the entire chart area, including titles and legends.
          * - `plot-box` refers to the area where the series are drawn.
-         *
          * @default 'chart-box'
          */
         relativeTo?: 'chart-box' | 'plot-box';

package/dist/esm/types/index.d.ts

@@ -75,10 +75,10 @@ export interface ChartData<T = MeaningfulAny> {
      * It can be used to visualize related information on multiple charts.
      */
     split?: ChartSplit;
-    /** The color list of palette.
+    /**
+     * The color list of palette.
      * If no color is set in series, the colors would be adopted sequentially and circularly from this list as the colors of series.
-     *
      * @default ['#4DA2F1', '#FF3D64', '#8AD554', '#FFC636', '#FFB9DD', '#84D1EE', '#FF91A1', '#54A520', '#DB9100', '#BA74B3', '#1F68A9', '#ED65A9', '#0FA08D', '#FF7E00', '#E8B0A4', '#52A6C5', '#BE2443', '#70C1AF', '#FFB46C', '#DCA3D7']
-     * */
+     */
     colors?: string[];
 }

package/dist/esm/utils/chart/get-closest-data.d.ts

@@ -13,6 +13,7 @@ export type ShapePoint = {
     data: ChartSeriesData;
     series: ChartSeries;
     subTotal?: number;
+    sourceX?: number;
 };
 export declare function getClosestPoints(args: GetClosestPointsArgs): TooltipDataChunk[];
 export {};

package/dist/esm/utils/chart/get-closest-data.js

@@ -21,6 +21,7 @@ function getClosestYIndex(items, y) {
     return closestYIndex;
 }
 function getClosestPointsByXValue(x, y, points) {
+    var _a;
     const sorted = sort(points, (p) => p.x);
     const closestXIndex = bisector((p) => p.x).center(sorted, x);
     if (sorted.length === 0 || closestXIndex === -1) {
@@ -34,6 +35,18 @@ function getClosestPointsByXValue(x, y, points) {
         return sortedByY[index === -1 ? 0 : index];
     });
     const closestPoints = sort(groupedBySeries, (p) => p.y0);
+    const pointsWithSourceX = closestPoints.filter((p) => p.sourceX !== undefined);
+    const uniqueSourceX = new Set(pointsWithSourceX.map((p) => p.sourceX));
+    if (pointsWithSourceX.length > 1 && uniqueSourceX.size > 1) {
+        const sortedBySourceX = sort(pointsWithSourceX, (p) => { var _a; return (_a = p.sourceX) !== null && _a !== void 0 ? _a : 0; });
+        const closestSourceXIdx = bisector((p) => { var _a; return (_a = p.sourceX) !== null && _a !== void 0 ? _a : 0; }).center(sortedBySourceX, x);
+        const closestSourceX = (_a = sortedBySourceX[closestSourceXIdx]) === null || _a === void 0 ? void 0 : _a.sourceX;
+        const candidates = closestPoints.filter((p) => p.sourceX === undefined || p.sourceX === closestSourceX);
+        const sortedCandidates = sort(candidates, (p) => p.y0);
+        const winnerIdx = getClosestYIndex(sortedCandidates, y);
+        const winner = sortedCandidates[winnerIdx === -1 ? 0 : winnerIdx];
+        return closestPoints.map((p) => (Object.assign(Object.assign({}, p), { closest: p === winner })));
+    }
     const closestYIndex = getClosestYIndex(closestPoints, y);
     return closestPoints.map((p, i) => (Object.assign(Object.assign({}, p), { closest: i === closestYIndex })));
 }
@@ -86,13 +99,22 @@ export function getClosestPoints(args) {
                 break;
             }
             case 'bar-x': {
-                const barXPoints = list.map((d) => ({
-                    data: d.data,
-                    series: d.series,
-                    x: d.x + d.width / 2,
-                    y0: d.y,
-                    y1: d.y + d.height,
-                }));
+                const barXList = list;
+                const barXGroups = groupBy(barXList, (d) => String(d.data.x));
+                const barXPoints = [];
+                Object.values(barXGroups).forEach((group) => {
+                    const groupCenterX = group.reduce((sum, d) => sum + d.x + d.width / 2, 0) / group.length;
+                    group.forEach((d) => {
+                        barXPoints.push({
+                            data: d.data,
+                            series: d.series,
+                            x: groupCenterX,
+                            y0: d.y,
+                            y1: d.y + d.height,
+                            sourceX: d.x + d.width / 2,
+                        });
+                    });
+                });
                 closestPointsByXValue.push(...barXPoints);
                 break;
             }

package/dist/esm/utils/chart/math.d.ts

@@ -1,10 +1,9 @@
 /**
  * Calculates a numeric property based on the given arguments.
- *
- * @param {Object} args - The arguments for the calculation.
+ * @param {object} args - The arguments for the calculation.
  * @param {string | number | null} args.value - The value to calculate the property for.
  * @param {number} args.base - The base value to use in the calculation.
- * @return {number | undefined} The calculated numeric property, or undefined if the value is invalid.
+ * @returns {number | undefined} The calculated numeric property, or undefined if the value is invalid.
  * @example
  * const result1 = calculateNumericProperty({value: 1});
  * console.log(result1); // Output: 1

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

@@ -7,11 +7,10 @@ const isStringValueInPixel = (value = '') => {
 };
 /**
  * Calculates a numeric property based on the given arguments.
- *
- * @param {Object} args - The arguments for the calculation.
+ * @param {object} args - The arguments for the calculation.
  * @param {string | number | null} args.value - The value to calculate the property for.
  * @param {number} args.base - The base value to use in the calculation.
- * @return {number | undefined} The calculated numeric property, or undefined if the value is invalid.
+ * @returns {number | undefined} The calculated numeric property, or undefined if the value is invalid.
  * @example
  * const result1 = calculateNumericProperty({value: 1});
  * console.log(result1); // Output: 1

package/dist/esm/utils/chart/series-type-guards.d.ts

@@ -5,7 +5,6 @@ export type UnknownSeries = {
 };
 /**
  * Checks whether the series should be drawn with axes.
- *
  * @param series - The series object to check.
  * @returns `true` if the series should be drawn with axes, `false` otherwise.
  */