@gravity-ui/charts 1.51.7 → 1.52.0

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

@@ -93,14 +93,34 @@ export interface BaseSeries {
     };
 }
 export interface BaseSeriesData<T = MeaningfulAny> {
+    /** Individual color for the data chunk (point in scatter, segment in pie, bar etc) */
+    color?: string;
     /**
      * A reserved subspace to store options and values for customized functionality
      *
      * Here you can add additional data for your own event callbacks and formatter callbacks
      */
     custom?: T;
-    /** Individual color for the data chunk (point in scatter, segment in pie, bar etc) */
-    color?: string;
+    /** Per-point overrides for the series data label. */
+    dataLabels?: {
+        /**
+         * Per-point override of `series.dataLabels.enabled`. The point-level value takes precedence:
+         * `true` shows the label even when series-level labels are disabled,
+         * `false` hides the label even when series-level labels are enabled.
+         * @default series.dataLabels.enabled
+         */
+        enabled?: boolean;
+    };
+    /** Per-point overrides for the tooltip behavior. */
+    tooltip?: {
+        /**
+         * Per-point override of `series.tooltip.enabled`. The point-level value takes precedence:
+         * `true` shows the point in the tooltip even when the series is hidden from the tooltip,
+         * `false` hides the point even when the series is shown.
+         * @default series.tooltip.enabled
+         */
+        enabled?: boolean;
+    };
 }
 export interface BaseSeriesLegend extends ChartLegendItem {
     /**

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

@@ -62,8 +62,32 @@ export interface FunnelSeries<T = MeaningfulAny> extends Omit<BaseSeries, 'dataL
         areaOpacity?: number;
     };
     dataLabels?: Omit<BaseDataLabels, 'allowOverlap'> & {
-        /** Horizontal alignment of the data labels. */
+        /**
+         * Horizontal alignment of the data labels.
+         * @default 'center'
+         */
         align?: 'left' | 'center' | 'right';
+        /**
+         * Whether to align the data label inside or outside the shape.
+         * @default false
+         */
+        inside?: boolean;
+        /**
+         * Whether to shrink the funnel shapes to reserve space for outside labels.
+         * When true, the plot area is inset on the labelled side so labels do not overlap segments.
+         * When false, no space is reserved and labels are clamped to the plot area boundary if they overflow.
+         * Only relevant when `inside` is false.
+         * @default true
+         */
+        reserveSpace?: boolean;
+        /**
+         * The reference area for label alignment. Only relevant when `inside` is false.
+         *
+         * - `'shape'` - aligns relative to the data shape (e.g., funnel section).
+         * - `'plot'` - aligns relative to the chart plot area boundaries.
+         * @default 'plot'
+         */
+        anchor?: 'plot' | 'shape';
     };
     /** Individual series legend options. Has higher priority than legend options in widget data */
     legend?: ChartLegendItem & {

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

@@ -6,7 +6,7 @@ import type { AreaSeries, AreaSeriesData } from './area';
 import type { AxisPlotBand, AxisPlotLine, AxisPlotShape, ChartXAxis, ChartYAxis } from './axis';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
-import type { ValueFormat } from './base';
+import type { BaseSeries, ValueFormat } from './base';
 import type { FunnelSeries, FunnelSeriesData } from './funnel';
 import type { HeatmapSeries, HeatmapSeriesData } from './heatmap';
 import type { LineSeries, LineSeriesData } from './line';
@@ -31,6 +31,7 @@ export interface TooltipDataChunkPie<T = MeaningfulAny> {
         type: PieSeries['type'];
         id: string;
         name: string;
+        tooltip?: BaseSeries['tooltip'];
     };
 }
 export interface TooltipDataChunkScatter<T = MeaningfulAny> {
@@ -39,6 +40,7 @@ export interface TooltipDataChunkScatter<T = MeaningfulAny> {
         type: ScatterSeries['type'];
         id: string;
         name: string;
+        tooltip?: BaseSeries['tooltip'];
     };
 }
 export interface TooltipDataChunkLine<T = MeaningfulAny> {
@@ -47,6 +49,7 @@ export interface TooltipDataChunkLine<T = MeaningfulAny> {
         type: LineSeries['type'];
         id: string;
         name: string;
+        tooltip?: BaseSeries['tooltip'];
     };
     closest?: boolean;
 }
@@ -56,6 +59,7 @@ export interface TooltipDataChunkArea<T = MeaningfulAny> {
         type: AreaSeries['type'];
         id: string;
         name: string;
+        tooltip?: BaseSeries['tooltip'];
     };
 }
 export interface TooltipDataChunkTreemap<T = MeaningfulAny> {
@@ -88,6 +92,7 @@ export interface TooltipDataChunkFunnel<T = MeaningfulAny> {
         type: FunnelSeries['type'];
         id: string;
         name: string;
+        tooltip?: BaseSeries['tooltip'];
     };
 }
 export interface TooltipDataChunkXRange<T = MeaningfulAny> {

package/dist/esm/core/utils/data-labels.d.ts

@@ -7,12 +7,46 @@ type PointLabelSeries = {
         html: boolean;
         padding: number;
         format?: ValueFormat;
+        enabled?: boolean;
     };
 };
+/**
+ * Resolves the effective dataLabels visibility for a point: point-level setting wins
+ * over series-level. Both default to `true` when unset.
+ */
+export declare function isPointDataLabelEnabled(args: {
+    data?: {
+        dataLabels?: {
+            enabled?: boolean;
+        };
+    } | null;
+    series?: {
+        dataLabels?: {
+            enabled?: boolean;
+        };
+    } | null;
+}): boolean;
+/**
+ * Returns `true` if the series should run its dataLabels prep pipeline:
+ * either series-level is enabled, or at least one point opts in via override.
+ */
+export declare function shouldPrepareSeriesDataLabels(series: {
+    dataLabels?: {
+        enabled?: boolean;
+    };
+    data?: ReadonlyArray<{
+        dataLabels?: {
+            enabled?: boolean;
+        };
+    }>;
+}): boolean;
 type LabelPoint = {
     x: number | null;
     y: number | null;
     data: {
+        dataLabels?: {
+            enabled?: boolean;
+        };
         label?: string | number | null;
         y?: string | number | null;
     };

package/dist/esm/core/utils/data-labels.js

@@ -1,5 +1,28 @@
 import { getFormattedValue } from './format';
 import { getLabelsSize, getTextSizeFn } from './text';
+/**
+ * Resolves the effective dataLabels visibility for a point: point-level setting wins
+ * over series-level. Both default to `true` when unset.
+ */
+export function isPointDataLabelEnabled(args) {
+    var _a, _b, _c, _d, _e;
+    const pointEnabled = (_b = (_a = args.data) === null || _a === void 0 ? void 0 : _a.dataLabels) === null || _b === void 0 ? void 0 : _b.enabled;
+    if (pointEnabled !== undefined) {
+        return pointEnabled;
+    }
+    return (_e = (_d = (_c = args.series) === null || _c === void 0 ? void 0 : _c.dataLabels) === null || _d === void 0 ? void 0 : _d.enabled) !== null && _e !== void 0 ? _e : true;
+}
+/**
+ * Returns `true` if the series should run its dataLabels prep pipeline:
+ * either series-level is enabled, or at least one point opts in via override.
+ */
+export function shouldPrepareSeriesDataLabels(series) {
+    var _a, _b;
+    if ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) {
+        return true;
+    }
+    return Boolean((_b = series.data) === null || _b === void 0 ? void 0 : _b.some((d) => { var _a; return ((_a = d.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) === true; }));
+}
 /**
  * Shared "above-point" dataLabels algorithm used by line, area, and scatter series.
  *
@@ -25,6 +48,9 @@ export async function preparePointDataLabels({ series, points, xMax, yAxisTop, i
         if (point.y === null || point.x === null || isOutsideBounds(point.x, point.y)) {
             continue;
         }
+        if (!isPointDataLabelEnabled({ data: point.data, series })) {
+            continue;
+        }
         const text = getFormattedValue(Object.assign({ value: (_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y }, series.dataLabels));
         const anchorY = point.y - anchorYOffset;
         if (series.dataLabels.html) {

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

@@ -1,8 +1,8 @@
-import type { ShapeData } from '../../hooks/useShapes';
 import type { TooltipDataChunk } from '../../types';
+import type { TooltipItemData } from '../shapes/types';
 type GetClosestPointsArgs = {
     position: [number, number];
-    shapesData: ShapeData[];
+    shapesData: TooltipItemData[];
     boundsHeight: number;
     boundsWidth: number;
 };

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

@@ -1,34 +1,7 @@
 import get from 'lodash/get';
 import groupBy from 'lodash/groupBy';
-import { getTooltipData as areaGetTooltipData } from '../shapes/area/get-tooltip-data';
-import { getTooltipData as barXGetTooltipData } from '../shapes/bar-x/get-tooltip-data';
-import { getTooltipData as barYGetTooltipData } from '../shapes/bar-y/get-tooltip-data';
-import { getTooltipData as funnelGetTooltipData } from '../shapes/funnel/get-tooltip-data';
-import { getTooltipData as heatmapGetTooltipData } from '../shapes/heatmap/get-tooltip-data';
-import { getTooltipData as lineGetTooltipData } from '../shapes/line/get-tooltip-data';
-import { getTooltipData as pieGetTooltipData } from '../shapes/pie/get-tooltip-data';
-import { getTooltipData as radarGetTooltipData } from '../shapes/radar/get-tooltip-data';
-import { getTooltipData as sankeyGetTooltipData } from '../shapes/sankey/get-tooltip-data';
-import { getTooltipData as scatterGetTooltipData } from '../shapes/scatter/get-tooltip-data';
-import { getTooltipData as treemapGetTooltipData } from '../shapes/treemap/get-tooltip-data';
-import { getTooltipData as waterfallGetTooltipData } from '../shapes/waterfall/get-tooltip-data';
-import { getTooltipData as xRangeGetTooltipData } from '../shapes/x-range/get-tooltip-data';
-import { getClosestPointsByXValue } from './tooltip-helpers';
-const tooltipFnByType = {
-    line: lineGetTooltipData,
-    area: areaGetTooltipData,
-    'bar-x': barXGetTooltipData,
-    'bar-y': barYGetTooltipData,
-    waterfall: waterfallGetTooltipData,
-    scatter: scatterGetTooltipData,
-    pie: pieGetTooltipData,
-    treemap: treemapGetTooltipData,
-    heatmap: heatmapGetTooltipData,
-    sankey: sankeyGetTooltipData,
-    radar: radarGetTooltipData,
-    funnel: funnelGetTooltipData,
-    'x-range': xRangeGetTooltipData,
-};
+import { getSeriesPlugin } from '../series/seriesRegistry';
+import { getClosestPointsByXValue, isPointTooltipEnabled } from './tooltip-helpers';
 function getSeriesType(shapeData) {
     return (get(shapeData, 'series.type') ||
         get(shapeData, 'point.series.type') ||
@@ -41,19 +14,26 @@ export function getClosestPoints(args) {
     const xLookupPoints = [];
     const groups = groupBy(shapesData, getSeriesType);
     for (const [seriesType, list] of Object.entries(groups)) {
-        const fn = tooltipFnByType[seriesType];
-        if (!fn) {
+        let plugin;
+        try {
+            plugin = getSeriesPlugin(seriesType);
+        }
+        catch (_a) {
             continue;
         }
-        const { chunks, xLookupPoints: seriesXLookupPoints } = fn({
+        const { chunks, xLookupPoints: seriesXLookupPoints } = plugin.getTooltipData({
             data: list,
             position,
             boundsWidth,
             boundsHeight,
         });
-        result.push(...chunks);
+        result.push(...chunks.filter((c) => isPointTooltipEnabled(c)));
         if (seriesXLookupPoints) {
-            xLookupPoints.push(...seriesXLookupPoints);
+            for (const p of seriesXLookupPoints) {
+                if (isPointTooltipEnabled(p)) {
+                    xLookupPoints.push(p);
+                }
+            }
         }
     }
     if (xLookupPoints.length) {

package/dist/esm/core/utils/tooltip-helpers.d.ts

@@ -30,6 +30,22 @@ export declare function getClosestPointsByXValue(x: number, y: number, points: S
     subTotal?: number;
     sourceX?: number;
 }[];
+/**
+ * Resolves the effective tooltip visibility for a point: point-level setting wins
+ * over series-level. Both default to `true` when unset.
+ */
+export declare function isPointTooltipEnabled(args: {
+    data?: {
+        tooltip?: {
+            enabled?: boolean;
+        };
+    } | null;
+    series?: {
+        tooltip?: {
+            enabled?: boolean;
+        };
+    } | null;
+}): boolean;
 export declare function isInsidePath(args: {
     path: string;
     point: [number, number];

package/dist/esm/core/utils/tooltip-helpers.js

@@ -50,6 +50,18 @@ export function getClosestPointsByXValue(x, y, points) {
     const closestYIndex = getClosestYIndex(closestPoints, y);
     return closestPoints.map((p, i) => (Object.assign(Object.assign({}, p), { closest: i === closestYIndex })));
 }
+/**
+ * Resolves the effective tooltip visibility for a point: point-level setting wins
+ * over series-level. Both default to `true` when unset.
+ */
+export function isPointTooltipEnabled(args) {
+    var _a, _b, _c, _d, _e;
+    const pointEnabled = (_b = (_a = args.data) === null || _a === void 0 ? void 0 : _a.tooltip) === null || _b === void 0 ? void 0 : _b.enabled;
+    if (pointEnabled !== undefined) {
+        return pointEnabled;
+    }
+    return (_e = (_d = (_c = args.series) === null || _c === void 0 ? void 0 : _c.tooltip) === null || _d === void 0 ? void 0 : _d.enabled) !== null && _e !== void 0 ? _e : true;
+}
 export function isInsidePath(args) {
     const { path, point, width, height, strokeWidth } = args;
     const canvas = document.createElement('canvas');

package/dist/esm/hooks/useShapes/AnnotationLayer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { AnnotationAnchor } from '../../core/series/types';
+interface Props {
+    annotations: AnnotationAnchor[];
+    boundsWidth: number;
+    boundsHeight: number;
+}
+export declare const AnnotationLayer: ({ annotations, boundsWidth, boundsHeight }: Props) => React.JSX.Element;
+export {};

package/dist/esm/hooks/useShapes/AnnotationLayer.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { select } from 'd3-selection';
+import { renderAnnotations } from '../../core/shapes/annotation';
+export const AnnotationLayer = ({ annotations, boundsWidth, boundsHeight }) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current)
+            return;
+        renderAnnotations({
+            anchors: annotations,
+            container: select(ref.current),
+            plotWidth: boundsWidth,
+            plotHeight: boundsHeight,
+        });
+    }, [annotations, boundsWidth, boundsHeight]);
+    return React.createElement("g", { ref: ref });
+};

package/dist/esm/hooks/useShapes/HoverMarkerLayer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { Dispatch } from 'd3-dispatch';
+import type { SeriesShapeData } from '../../core/shapes/types';
+interface Props {
+    preparedData: SeriesShapeData[];
+    dispatcher?: Dispatch<object>;
+    namespace: string;
+}
+export declare const HoverMarkerLayer: ({ preparedData, dispatcher, namespace }: Props) => React.JSX.Element;
+export {};

package/dist/esm/hooks/useShapes/HoverMarkerLayer.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { select } from 'd3-selection';
+import { renderHoverMarkers } from '../../core/shapes/marker';
+export const HoverMarkerLayer = ({ preparedData, dispatcher, namespace }) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current)
+            return () => { };
+        const container = select(ref.current);
+        function handleHover(data) {
+            var _a;
+            const hoveredData = (_a = data === null || data === void 0 ? void 0 : data.map((d) => d.data)) !== null && _a !== void 0 ? _a : [];
+            const items = preparedData.flatMap((d) => d.getHoverMarkers(hoveredData));
+            renderHoverMarkers(container, items);
+        }
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(`hover-shape.${namespace}`, handleHover);
+        return () => {
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(`hover-shape.${namespace}`, null);
+        };
+    }, [preparedData, dispatcher, namespace]);
+    return React.createElement("g", { ref: ref });
+};

package/dist/esm/hooks/useShapes/MarkerLayer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { MarkerItem } from '../../core/shapes/types';
+interface Props {
+    markers: MarkerItem[];
+}
+export declare const MarkerLayer: ({ markers }: Props) => React.JSX.Element;
+export {};

package/dist/esm/hooks/useShapes/MarkerLayer.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { select } from 'd3-selection';
+import { renderMarkers } from '../../core/shapes/marker';
+export const MarkerLayer = ({ markers }) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (ref.current) {
+            renderMarkers(select(ref.current), markers);
+        }
+    }, [markers]);
+    return React.createElement("g", { ref: ref });
+};

package/dist/esm/hooks/useShapes/SeriesShapes.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Dispatch } from 'd3-dispatch';
+import type { SeriesPlugin } from '../../core/series/plugin';
+import type { PreparedSeriesOptions } from '../../core/series/types';
+import type { SeriesShapeData } from '../../core/shapes/types';
+interface Props {
+    boundsHeight: number;
+    boundsWidth: number;
+    clipPathId?: string;
+    dispatcher?: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
+    namespace: string;
+    plugin: SeriesPlugin;
+    preparedData: SeriesShapeData[];
+    seriesOptions: PreparedSeriesOptions;
+}
+export declare const SeriesShapes: ({ boundsHeight, boundsWidth, clipPathId, dispatcher, htmlLayout, namespace, plugin, preparedData, seriesOptions, }: Props) => React.JSX.Element;
+export {};

package/dist/esm/hooks/useShapes/SeriesShapes.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { block } from '../../utils';
+import { AnnotationLayer } from './AnnotationLayer';
+import { HoverMarkerLayer } from './HoverMarkerLayer';
+import { HtmlLayer } from './HtmlLayer';
+import { MarkerLayer } from './MarkerLayer';
+export const SeriesShapes = ({ boundsHeight, boundsWidth, clipPathId, dispatcher, htmlLayout, namespace, plugin, preparedData, seriesOptions, }) => {
+    const b = block(plugin.type);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        if (!ref.current)
+            return () => { };
+        return ((_a = plugin.renderShapes({
+            plot: ref.current,
+            preparedData,
+            seriesOptions,
+            boundsWidth,
+            boundsHeight,
+            dispatcher,
+        })) !== null && _a !== void 0 ? _a : undefined);
+    }, [boundsHeight, boundsWidth, dispatcher, plugin, preparedData, seriesOptions]);
+    const markers = React.useMemo(() => preparedData.flatMap((d) => d.markers), [preparedData]);
+    const annotations = React.useMemo(() => preparedData.flatMap((d) => d.annotations), [preparedData]);
+    const htmlLayerData = React.useMemo(() => ({ htmlElements: preparedData.flatMap((d) => d.htmlLabels) }), [preparedData]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b(), clipPath: clipPathId ? `url(#${clipPathId})` : undefined }),
+        React.createElement(MarkerLayer, { markers: markers }),
+        React.createElement(HoverMarkerLayer, { preparedData: preparedData, dispatcher: dispatcher, namespace: namespace }),
+        React.createElement(AnnotationLayer, { annotations: annotations, boundsWidth: boundsWidth, boundsHeight: boundsHeight }),
+        React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
+};

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

@@ -1,26 +1,14 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
-import type { SeriesType } from '../../core/constants';
 import type { PreparedSplit } from '../../core/layout/split-types';
 import type { ChartScale } from '../../core/scales/types';
 import type { PreparedSeries, PreparedSeriesOptions } from '../../core/series/types';
-import type { PreparedAreaData } from '../../core/shapes/area/types';
-import type { PreparedBarXData } from '../../core/shapes/bar-x/types';
-import type { PreparedBarYData } from '../../core/shapes/bar-y/types';
-import type { PreparedFunnelData } from '../../core/shapes/funnel/types';
-import type { PreparedHeatmapData } from '../../core/shapes/heatmap/types';
-import type { PreparedLineData } from '../../core/shapes/line/types';
-import type { PreparedPieData } from '../../core/shapes/pie/types';
-import type { PreparedRadarData } from '../../core/shapes/radar/types';
-import type { PreparedSankeyData } from '../../core/shapes/sankey/types';
-import type { PreparedScatterData } from '../../core/shapes/scatter/types';
-import type { PreparedWaterfallData } from '../../core/shapes/waterfall/types';
-import type { PreparedXRangeData } from '../../core/shapes/x-range/types';
+import type { TooltipItemData } from '../../core/shapes/types';
 import type { ZoomState } from '../../core/zoom/types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData | PreparedFunnelData | PreparedXRangeData;
-export type ClipPathBySeriesType = Partial<Record<SeriesType, boolean>>;
+export type { TooltipItemData };
+export type ClipPathBySeriesType = Partial<Record<string, boolean>>;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;
@@ -41,11 +29,10 @@ type Args = {
 };
 export declare function getShapes(args: Args): Promise<{
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-    shapesData: ShapeData[];
+    shapesData: TooltipItemData[];
 }>;
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-    shapesData: ShapeData[];
+    shapesData: TooltipItemData[];
     shapesReady: boolean;
 };
-export {};