@gravity-ui/charts 1.51.0 → 1.51.3

package/dist/esm/core/shapes/line/types.d.ts

@@ -1,6 +1,7 @@
-import type { HtmlItem, LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
+import type { LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
 import type { DashStyle, LineCap, LineJoin } from '../../constants';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedLineSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PointData = {
     annotation?: PreparedAnnotation;
     color?: string;
@@ -29,9 +30,8 @@ export type PreparedLineData = {
     hovered: boolean;
     active: boolean;
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
     color: string;
     dashStyle: DashStyle;
     linecap: LineCap;
     linejoin: LineJoin;
-} & Required<LineSeriesLineBaseStyle>;
+} & Required<LineSeriesLineBaseStyle> & SeriesShapeData;

package/dist/esm/core/shapes/pie/get-tooltip-data.d.ts

@@ -0,0 +1,3 @@
+import type { GetTooltipDataArgs, GetTooltipDataResult } from '../../utils/tooltip-helpers';
+import type { PreparedPieData } from './types';
+export declare function getTooltipData(args: GetTooltipDataArgs<PreparedPieData>): GetTooltipDataResult;

package/dist/esm/core/shapes/pie/get-tooltip-data.js

@@ -0,0 +1,27 @@
+import { getRadius } from '../../utils/tooltip-helpers';
+export function getTooltipData(args) {
+    const { data, position } = args;
+    const [pointerX, pointerY] = position;
+    const points = data.flatMap((d) => d.segments);
+    const closestPoint = points.find((p) => {
+        const { center } = p.data.pie;
+        const x = pointerX - center[0];
+        const y = pointerY - center[1];
+        let angle = Math.atan2(y, x) + 0.5 * Math.PI;
+        angle = angle < 0 ? Math.PI * 2 + angle : angle;
+        const polarRadius = getRadius({ center, pointer: [pointerX, pointerY] });
+        return angle >= p.startAngle && angle <= p.endAngle && polarRadius < p.data.radius;
+    });
+    if (!closestPoint) {
+        return { chunks: [] };
+    }
+    return {
+        chunks: [
+            {
+                data: closestPoint.data.series.data,
+                series: closestPoint.data.series,
+                closest: true,
+            },
+        ],
+    };
+}

package/dist/esm/core/shapes/pie/types.d.ts

@@ -1,6 +1,7 @@
 import type { PieArcDatum } from 'd3-shape';
-import type { ConnectorCurve, HtmlItem, LabelData } from '../../../types';
+import type { ConnectorCurve, LabelData } from '../../../types';
 import type { PreparedPieSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type SegmentData = {
     value: number;
     color: string;
@@ -37,5 +38,4 @@ export type PreparedPieData = {
         opacity: number;
         size: number;
     };
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/radar/get-tooltip-data.d.ts

@@ -0,0 +1,3 @@
+import type { GetTooltipDataArgs, GetTooltipDataResult } from '../../utils/tooltip-helpers';
+import type { PreparedRadarData } from './types';
+export declare function getTooltipData(args: GetTooltipDataArgs<PreparedRadarData>): GetTooltipDataResult;

package/dist/esm/core/shapes/radar/get-tooltip-data.js

@@ -0,0 +1,35 @@
+import { Delaunay } from 'd3-delaunay';
+import { getRadius, isInsidePath } from '../../utils/tooltip-helpers';
+export function getTooltipData(args) {
+    const { data, position, boundsWidth, boundsHeight } = args;
+    const [pointerX, pointerY] = position;
+    const [radarData] = data;
+    if (!radarData) {
+        return { chunks: [] };
+    }
+    const radius = getRadius({ center: radarData.center, pointer: [pointerX, pointerY] });
+    if (radius > radarData.radius) {
+        return { chunks: [] };
+    }
+    const radarShapes = radarData.shapes.filter((shape) => isInsidePath({
+        path: shape.path,
+        point: [pointerX, pointerY],
+        width: boundsWidth,
+        height: boundsHeight,
+        strokeWidth: shape.borderWidth,
+    }));
+    const points = radarShapes.flatMap((shape) => shape.points);
+    const delaunay = Delaunay.from(points, (d) => d.position[0], (d) => d.position[1]);
+    const closestPoint = points[delaunay.find(pointerX, pointerY)];
+    if (!closestPoint) {
+        return { chunks: [] };
+    }
+    return {
+        chunks: radarData.shapes.map((shape) => ({
+            data: shape.points[closestPoint.index].data,
+            series: shape.series,
+            category: shape.series.categories[closestPoint.index],
+            closest: shape.series === closestPoint.series,
+        })),
+    };
+}

package/dist/esm/core/shapes/radar/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, RadarSeriesData } from '../../../types';
+import type { LabelData, RadarSeriesData } from '../../../types';
 import type { PreparedRadarSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type RadarLabelData = LabelData & {
     maxWidth: number;
 };
@@ -54,6 +55,5 @@ export type PreparedRadarData = {
     grid: RadarGridData[];
     center: [number, number];
     radius: number;
-    htmlLabels: HtmlItem[];
     cursor: string | null;
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/sankey/get-tooltip-data.d.ts

@@ -0,0 +1,3 @@
+import type { GetTooltipDataArgs, GetTooltipDataResult } from '../../utils/tooltip-helpers';
+import type { PreparedSankeyData } from './types';
+export declare function getTooltipData(args: GetTooltipDataArgs<PreparedSankeyData>): GetTooltipDataResult;

package/dist/esm/core/shapes/sankey/get-tooltip-data.js

@@ -0,0 +1,32 @@
+import { isInsidePath } from '../../utils/tooltip-helpers';
+export function getTooltipData(args) {
+    const { data, position, boundsWidth, boundsHeight } = args;
+    const [pointerX, pointerY] = position;
+    const [sankeyData] = data;
+    if (!sankeyData) {
+        return { chunks: [] };
+    }
+    const closestLink = sankeyData.links.find((d) => {
+        var _a;
+        return isInsidePath({
+            path: (_a = d.path) !== null && _a !== void 0 ? _a : '',
+            strokeWidth: d.strokeWidth,
+            point: [pointerX, pointerY],
+            width: boundsWidth,
+            height: boundsHeight,
+        });
+    });
+    if (!closestLink) {
+        return { chunks: [] };
+    }
+    return {
+        chunks: [
+            {
+                data: closestLink.source,
+                target: closestLink.target,
+                series: sankeyData.series,
+                closest: true,
+            },
+        ],
+    };
+}

package/dist/esm/core/shapes/sankey/prepare-data.js

@@ -2,7 +2,7 @@ import { getFormattedValue } from '../../utils/format';
 import { sankey, sankeyLinkHorizontal } from './sankey-layout';
 export function prepareSankeyData(args) {
     const { series, width, height } = args;
-    const htmlElements = [];
+    const htmlLabels = [];
     const sankeyGenerator = sankey()
         .nodeId((d) => d.name)
         .nodeSort((a, b) => { var _a, _b; return ((_a = a.index) !== null && _a !== void 0 ? _a : 0) - ((_b = b.index) !== null && _b !== void 0 ? _b : 0); })
@@ -70,5 +70,5 @@ export function prepareSankeyData(args) {
         });
         dataLabels.push(...labels);
     }
-    return { series, nodes: sankeyNodes, links: sankeyLinks, htmlElements, labels: dataLabels };
+    return { series, nodes: sankeyNodes, links: sankeyLinks, htmlLabels, labels: dataLabels };
 }

package/dist/esm/core/shapes/sankey/types.d.ts

@@ -1,5 +1,6 @@
-import type { BaseTextStyle, HtmlItem, SankeySeriesData } from '../../../types';
+import type { BaseTextStyle, SankeySeriesData } from '../../../types';
 import type { PreparedSankeySeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type SankeyDataLabel = {
     text: string;
     x: number;
@@ -26,8 +27,7 @@ export type SankeyLink = {
 };
 export type PreparedSankeyData = {
     series: PreparedSankeySeries;
-    htmlElements: HtmlItem[];
     nodes: SankeyNode[];
     links: SankeyLink[];
     labels: SankeyDataLabel[];
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/scatter/get-tooltip-data.d.ts

@@ -0,0 +1,3 @@
+import type { GetTooltipDataArgs, GetTooltipDataResult } from '../../utils/tooltip-helpers';
+import type { PreparedScatterData } from './types';
+export declare function getTooltipData(args: GetTooltipDataArgs<PreparedScatterData>): GetTooltipDataResult;

package/dist/esm/core/shapes/scatter/get-tooltip-data.js

@@ -0,0 +1,19 @@
+import { Delaunay } from 'd3-delaunay';
+export function getTooltipData(args) {
+    const { data, position } = args;
+    const [pointerX, pointerY] = position;
+    const delaunay = Delaunay.from(data, (d) => d.point.x, (d) => d.point.y);
+    const closestPoint = data[delaunay.find(pointerX, pointerY)];
+    if (!closestPoint) {
+        return { chunks: [] };
+    }
+    return {
+        chunks: [
+            {
+                data: closestPoint.point.data,
+                series: closestPoint.point.series,
+                closest: true,
+            },
+        ],
+    };
+}

package/dist/esm/core/shapes/scatter/types.d.ts

@@ -1,5 +1,6 @@
 import type { HtmlItem, LabelData, ScatterSeriesData } from '../../../types';
 import type { PreparedScatterSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 type PointData = {
     x: number;
     y: number;
@@ -19,6 +20,5 @@ export type PreparedScatterData = MarkerData;
 export type PreparedScatterShapeData = {
     markers: PreparedScatterData[];
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;
 export {};

package/dist/esm/core/shapes/treemap/get-tooltip-data.d.ts

@@ -0,0 +1,3 @@
+import type { GetTooltipDataArgs, GetTooltipDataResult } from '../../utils/tooltip-helpers';
+import type { PreparedTreemapData } from './types';
+export declare function getTooltipData(args: GetTooltipDataArgs<PreparedTreemapData>): GetTooltipDataResult;

package/dist/esm/core/shapes/treemap/get-tooltip-data.js

@@ -0,0 +1,18 @@
+export function getTooltipData(args) {
+    var _a;
+    const { data, position } = args;
+    const [pointerX, pointerY] = position;
+    const closestPoint = (_a = data[0]) === null || _a === void 0 ? void 0 : _a.leaves.find((l) => pointerX >= l.x0 && pointerX <= l.x1 && pointerY >= l.y0 && pointerY <= l.y1);
+    if (!closestPoint) {
+        return { chunks: [] };
+    }
+    return {
+        chunks: [
+            {
+                data: closestPoint.data,
+                series: data[0].series,
+                closest: true,
+            },
+        ],
+    };
+}

package/dist/esm/core/shapes/treemap/prepare-data.js

@@ -148,17 +148,17 @@ export async function prepareTreemapData(args) {
     })(hierarchy);
     const leaves = root.leaves();
     let labelData = [];
-    const htmlElements = [];
+    const htmlLabels = [];
     if ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) {
         const { html, style: dataLabelsStyle } = series.dataLabels;
         const labels = await getLabels({ data: leaves, options: series.dataLabels });
         if (html) {
             const htmlItems = labels.map((l) => (Object.assign({ style: Object.assign(Object.assign({}, dataLabelsStyle), { maxWidth: l.size.width, maxHeight: l.size.height, overflow: 'hidden' }) }, l)));
-            htmlElements.push(...htmlItems);
+            htmlLabels.push(...htmlItems);
         }
         else {
             labelData = labels;
         }
     }
-    return { labelData, leaves, series, htmlElements };
+    return { labelData, leaves, series, htmlLabels };
 }

package/dist/esm/core/shapes/treemap/types.d.ts

@@ -1,6 +1,7 @@
 import type { HierarchyRectangularNode } from 'd3-hierarchy';
-import type { HtmlItem, TreemapSeriesData } from '../../../types';
+import type { TreemapSeriesData } from '../../../types';
 import type { PreparedTreemapSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type TreemapLabelData = {
     text: string;
     x: number;
@@ -11,5 +12,4 @@ export type PreparedTreemapData = {
     labelData: TreemapLabelData[];
     leaves: HierarchyRectangularNode<TreemapSeriesData<any>>[];
     series: PreparedTreemapSeries;
-    htmlElements: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/types.d.ts

@@ -0,0 +1,4 @@
+import type { HtmlItem } from '../../types';
+export interface SeriesShapeData {
+    htmlLabels: HtmlItem[];
+}

package/dist/esm/core/shapes/types.js

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

package/dist/esm/core/shapes/waterfall/get-tooltip-data.d.ts

@@ -0,0 +1,3 @@
+import type { GetTooltipDataArgs, GetTooltipDataResult } from '../../utils/tooltip-helpers';
+import type { PreparedWaterfallData } from './types';
+export declare function getTooltipData(args: GetTooltipDataArgs<PreparedWaterfallData>): GetTooltipDataResult;

package/dist/esm/core/shapes/waterfall/get-tooltip-data.js

@@ -0,0 +1,15 @@
+import { getClosestPointsByXValue } from '../../utils/tooltip-helpers';
+export function getTooltipData(args) {
+    const { data, position } = args;
+    const [pointerX, pointerY] = position;
+    const points = data.map((d) => ({
+        data: d.data,
+        series: d.series,
+        x: d.x + d.width / 2,
+        y0: d.y,
+        y1: d.y + d.height,
+        subTotal: d.subTotal,
+    }));
+    const chunks = getClosestPointsByXValue(pointerX, pointerY, points);
+    return { chunks };
+}

package/dist/esm/core/shapes/waterfall/prepare-data.js

@@ -144,7 +144,7 @@ export const prepareWaterfallData = async (args) => {
             data: item.data,
             series: item.series,
             subTotal: totalValue,
-            htmlElements: [],
+            htmlLabels: [],
         };
         preparedData.label = await getLabelData(preparedData, plotHeight);
         result.push(preparedData);

package/dist/esm/core/shapes/waterfall/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, WaterfallSeriesData } from '../../../types';
+import type { LabelData, WaterfallSeriesData } from '../../../types';
 import type { PreparedWaterfallSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PreparedWaterfallData = {
     x: number;
     y: number;
@@ -10,5 +11,4 @@ export type PreparedWaterfallData = {
     data: WaterfallSeriesData;
     label?: LabelData;
     subTotal: number;
-    htmlElements: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/x-range/get-tooltip-data.d.ts

@@ -0,0 +1,3 @@
+import type { GetTooltipDataArgs, GetTooltipDataResult } from '../../utils/tooltip-helpers';
+import type { PreparedXRangeData } from './types';
+export declare function getTooltipData(args: GetTooltipDataArgs<PreparedXRangeData>): GetTooltipDataResult;

package/dist/esm/core/shapes/x-range/get-tooltip-data.js

@@ -0,0 +1,22 @@
+import { sort } from 'd3-array';
+export function getTooltipData(args) {
+    const { data, position } = args;
+    const [pointerX, pointerY] = position;
+    const pointsInRange = data.filter((d) => pointerX >= d.x &&
+        pointerX <= d.x + d.width &&
+        pointerY >= d.y &&
+        pointerY <= d.y + d.height);
+    if (pointsInRange.length === 0) {
+        return { chunks: [] };
+    }
+    const closestByX = pointsInRange.length === 1
+        ? pointsInRange[0]
+        : sort(pointsInRange, (d) => Math.abs(d.x + d.width / 2 - pointerX))[0];
+    return {
+        chunks: pointsInRange.map((d) => ({
+            data: d.data,
+            series: d.series,
+            closest: d === closestByX,
+        })),
+    };
+}

package/dist/esm/core/shapes/x-range/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, TooltipDataChunkXRange } from '../../../types';
+import type { LabelData, TooltipDataChunkXRange } from '../../../types';
 import type { PreparedXRangeSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PreparedXRangeData = Omit<TooltipDataChunkXRange, 'series'> & {
     x: number;
     y: number;
@@ -8,5 +9,4 @@ export type PreparedXRangeData = Omit<TooltipDataChunkXRange, 'series'> & {
     color: string;
     series: PreparedXRangeSeries;
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/esm/core/types/chart/funnel.d.ts

@@ -34,18 +34,23 @@ export interface FunnelSeries<T = MeaningfulAny> extends Omit<BaseSeries, 'dataL
      *   width alone, exaggerating differences between large and small values. Use only for
      *   decorative purposes or when visual familiarity with the funnel metaphor is more
      *   important than analytical precision.
-     *
      * @default 'rectangle'
      */
     shape?: 'rectangle' | 'trapezoid';
     /** Lines or areas connecting the funnel segments. */
     connectors?: {
         enabled?: boolean;
-        /** The height of the connector area relative to the funnel segment. */
+        /**
+         * The height of the connector area between funnel segments.
+         * Accepts a pixel number, a pixel string (e.g. `'10px'`), or a percentage string
+         * (e.g. `'25%'`) relative to the segment band height.
+         *
+         * Defaults to `0` for `'trapezoid'` and `'25%'` for `'rectangle'`.
+         */
         height?: string | number;
         /** Option for line stroke style */
         lineDashStyle?: DashStyle;
-        /** Opacity for the connector line. */
+        /** Opacity for the connector line. Defaults to `0` for `'trapezoid'`, `1` for `'rectangle'`. */
         lineOpacity?: number;
         /** Connector line color. */
         lineColor?: string;
@@ -53,7 +58,7 @@ export interface FunnelSeries<T = MeaningfulAny> extends Omit<BaseSeries, 'dataL
         lineWidth?: number;
         /** Connector area color. */
         areaColor?: string;
-        /** Opacity for the connector area. */
+        /** Opacity for the connector area fill. Defaults to `0` for `'trapezoid'`, `0.25` for `'rectangle'`. */
         areaOpacity?: number;
     };
     dataLabels?: Omit<BaseDataLabels, 'allowOverlap'> & {

package/dist/esm/core/utils/axis/x-axis.js

@@ -55,8 +55,13 @@ export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
         let result = originalTickValues;
         let availableSpaceForLabel = getMinSpaceBetween(result, (d) => d.x) - axis.labels.padding * 2;
         let ticksCount = result.length - 1;
+        let lastMultiTickResult = result;
+        const triedCounts = new Set();
         while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
             ticksCount = ticksCount ? ticksCount - 1 : result.length - 1;
+            if (triedCounts.has(ticksCount))
+                break;
+            triedCounts.add(ticksCount);
             const newScaleTicks = getScaleTicks({ scale, ticksCount, dateTimeLabelFormats });
             result = newScaleTicks.map((t) => ({
                 x: scale(t),
@@ -64,16 +69,23 @@ export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
             }));
             availableSpaceForLabel =
                 getMinSpaceBetween(result, (d) => d.x) - axis.labels.padding * 2;
+            if (result.length > 1) {
+                lastMultiTickResult = result;
+            }
         }
         // when this is not possible (for example, such values cannot be selected for the logarithmic axis with a small range)
-        // just thin out the originally proposed result
-        if (!result.length) {
-            result = originalTickValues;
+        // just thin out the last result that had multiple ticks
+        // For log scales, 1 tick is also a failure: d3 only places ticks at powers of the base,
+        // so a sub-decade range legitimately yields 1 tick despite having room for more.
+        // For linear scales, 1 tick is a valid result meaning the chart is simply too small.
+        const isLogScale = axis.type === 'logarithmic';
+        if ((isLogScale ? result.length <= 1 : !result.length) && lastMultiTickResult.length > 1) {
+            result = lastMultiTickResult;
             availableSpaceForLabel =
                 getMinSpaceBetween(result, (d) => d.x) - axis.labels.padding * 2;
             let delta = 2;
             while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
-                result = thinOut(result, delta);
+                result = thinOut(lastMultiTickResult, delta);
                 if (result.length > 1) {
                     delta += 1;
                     availableSpaceForLabel =

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

@@ -1,19 +1,10 @@
 import type { ShapeData } from '../../hooks/useShapes';
-import type { ChartSeries, ChartSeriesData, TooltipDataChunk } from '../../types';
+import type { TooltipDataChunk } from '../../types';
 type GetClosestPointsArgs = {
     position: [number, number];
     shapesData: ShapeData[];
     boundsHeight: number;
     boundsWidth: number;
 };
-export type ShapePoint = {
-    x: number;
-    y0: number;
-    y1: number;
-    data: ChartSeriesData;
-    series: ChartSeries;
-    subTotal?: number;
-    sourceX?: number;
-};
+export type { ShapePoint } from './tooltip-helpers';
 export declare function getClosestPoints(args: GetClosestPointsArgs): TooltipDataChunk[];
-export {};