@gravity-ui/charts 1.23.0 → 1.24.0

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

@@ -1,11 +1,14 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { PreparedSeries, PreparedSeriesOptions, PreparedSplit } from '../';
+import type { SeriesType } from '../../constants';
+import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales';
-import type { PreparedAxis } from '../useChartOptions/types';
+import type { PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
+import type { PreparedSplit } from '../useSplit/types';
 import type { PreparedAreaData } from './area/types';
 import type { PreparedBarXData } from './bar-x';
 import type { PreparedBarYData } from './bar-y/types';
+import type { PreparedFunnelData } from './funnel';
 import type { PreparedHeatmapData } from './heatmap';
 import type { PreparedLineData } from './line/types';
 import type { PreparedPieData } from './pie/types';
@@ -16,21 +19,23 @@ export type { PreparedBarXData } from './bar-x';
 export type { PreparedScatterData } from './scatter/types';
 import type { PreparedWaterfallData } from './waterfall';
 import './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData;
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData | PreparedFunnelData;
+export type ClipPathBySeriesType = Partial<Record<SeriesType, boolean>>;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;
-    dispatcher: Dispatch<object>;
+    clipPathId: string;
+    htmlLayout: HTMLElement | null;
     series: PreparedSeries[];
     seriesOptions: PreparedSeriesOptions;
-    xAxis: PreparedAxis | null;
-    yAxis: PreparedAxis[];
+    split: PreparedSplit;
+    xAxis: PreparedXAxis | null;
+    yAxis: PreparedYAxis[];
+    clipPathBySeriesType?: ClipPathBySeriesType;
+    dispatcher?: Dispatch<object>;
+    isOutsideBounds?: (x: number, y: number) => boolean;
     xScale?: ChartScale;
     yScale?: (ChartScale | undefined)[];
-    split: PreparedSplit;
-    htmlLayout: HTMLElement | null;
-    clipPathId: string;
-    isOutsideBounds: (x: number, y: number) => boolean;
 };
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import { group } from 'd3';
+import { SERIES_TYPE } from '../../constants';
 import { ChartError } from '../../libs';
 import { getOnlyVisibleSeries } from '../../utils';
 import { AreaSeriesShapes } from './area';
 import { prepareAreaData } from './area/prepare-data';
 import { BarXSeriesShapes, prepareBarXData } from './bar-x';
 import { BarYSeriesShapes, prepareBarYData } from './bar-y';
+import { FunnelSeriesShapes, prepareFunnelData } from './funnel';
 import { HeatmapSeriesShapes, prepareHeatmapData } from './heatmap';
 import { LineSeriesShapes } from './line';
 import { prepareLineData } from './line/prepare-data';
@@ -20,8 +22,15 @@ import { TreemapSeriesShape } from './treemap';
 import { prepareTreemapData } from './treemap/prepare-data';
 import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
 import './styles.css';
+function IS_OUTSIDE_BOUNDS() {
+    return false;
+}
+function shouldUseClipPathId(seriesType, clipPathBySeriesType) {
+    var _a;
+    return (_a = clipPathBySeriesType === null || clipPathBySeriesType === void 0 ? void 0 : clipPathBySeriesType[seriesType]) !== null && _a !== void 0 ? _a : true;
+}
 export const useShapes = (args) => {
-    const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, split, htmlLayout, clipPathId, isOutsideBounds, } = args;
+    const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, } = args;
     const [shapesElemens, setShapesElements] = React.useState([]);
     const [shapesElemensData, setShapesElemensData] = React.useState([]);
     const countedRef = React.useRef(0);
@@ -38,7 +47,7 @@ export const useShapes = (args) => {
             Array.from(groupedSeries).map(async (item) => {
                 const [seriesType, chartSeries] = item;
                 switch (seriesType) {
-                    case 'bar-x': {
+                    case SERIES_TYPE.BarX: {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                             const preparedData = await prepareBarXData({
                                 series: chartSeries,
@@ -49,12 +58,12 @@ export const useShapes = (args) => {
                                 yScale,
                                 boundsHeight,
                             });
-                            shapes.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapes.push(React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData);
                         }
                         break;
                     }
-                    case 'bar-y': {
+                    case SERIES_TYPE.BarY: {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                             const preparedData = await prepareBarYData({
                                 boundsHeight,
@@ -66,12 +75,12 @@ export const useShapes = (args) => {
                                 yAxis,
                                 yScale,
                             });
-                            shapes.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapes.push(React.createElement(BarYSeriesShapes, { key: SERIES_TYPE.BarY, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData.shapes);
                         }
                         break;
                     }
-                    case 'waterfall': {
+                    case SERIES_TYPE.Waterfall: {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                             const preparedData = await prepareWaterfallData({
                                 series: chartSeries,
@@ -81,12 +90,12 @@ export const useShapes = (args) => {
                                 yAxis,
                                 yScale,
                             });
-                            shapes.push(React.createElement(WaterfallSeriesShapes, { key: "waterfall", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapes.push(React.createElement(WaterfallSeriesShapes, { key: SERIES_TYPE.Waterfall, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData);
                         }
                         break;
                     }
-                    case 'line': {
+                    case SERIES_TYPE.Line: {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                             const preparedData = await prepareLineData({
                                 series: chartSeries,
@@ -97,12 +106,12 @@ export const useShapes = (args) => {
                                 split,
                                 isOutsideBounds,
                             });
-                            shapes.push(React.createElement(LineSeriesShapes, { key: "line", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapes.push(React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData);
                         }
                         break;
                     }
-                    case 'area': {
+                    case SERIES_TYPE.Area: {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                             const preparedData = await prepareAreaData({
                                 series: chartSeries,
@@ -113,12 +122,12 @@ export const useShapes = (args) => {
                                 boundsHeight,
                                 isOutsideBounds,
                             });
-                            shapes.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapes.push(React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData);
                         }
                         break;
                     }
-                    case 'scatter': {
+                    case SERIES_TYPE.Scatter: {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                             const preparedData = prepareScatterData({
                                 series: chartSeries,
@@ -128,22 +137,24 @@ export const useShapes = (args) => {
                                 yScale,
                                 isOutsideBounds,
                             });
-                            shapes.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                            shapes.push(React.createElement(ScatterSeriesShape, { key: SERIES_TYPE.Scatter, clipPathId: shouldUseClipPathId(SERIES_TYPE.Scatter, clipPathBySeriesType)
+                                    ? clipPathId
+                                    : undefined, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                             shapesData.push(...preparedData);
                         }
                         break;
                     }
-                    case 'pie': {
+                    case SERIES_TYPE.Pie: {
                         const preparedData = await preparePieData({
                             series: chartSeries,
                             boundsWidth,
                             boundsHeight,
                         });
-                        shapes.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(PieSeriesShapes, { key: SERIES_TYPE.Pie, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                         break;
                     }
-                    case 'treemap': {
+                    case SERIES_TYPE.Treemap: {
                         const preparedData = await prepareTreemapData({
                             // We should have exactly one series with "treemap" type
                             // Otherwise data validation should emit an error
@@ -151,31 +162,31 @@ export const useShapes = (args) => {
                             width: boundsWidth,
                             height: boundsHeight,
                         });
-                        shapes.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(TreemapSeriesShape, { key: SERIES_TYPE.Treemap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                         shapesData.push(preparedData);
                         break;
                     }
-                    case 'sankey': {
+                    case SERIES_TYPE.Sankey: {
                         const preparedData = prepareSankeyData({
                             series: chartSeries[0],
                             width: boundsWidth,
                             height: boundsHeight,
                         });
-                        shapes.push(React.createElement(SankeySeriesShape, { key: "sankey", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(SankeySeriesShape, { key: SERIES_TYPE.Sankey, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                         shapesData.push(preparedData);
                         break;
                     }
-                    case 'radar': {
+                    case SERIES_TYPE.Radar: {
                         const preparedData = await prepareRadarData({
                             series: chartSeries,
                             boundsWidth,
                             boundsHeight,
                         });
-                        shapes.push(React.createElement(RadarSeriesShapes, { key: "radar", dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(RadarSeriesShapes, { key: SERIES_TYPE.Radar, dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                         break;
                     }
-                    case 'heatmap': {
+                    case SERIES_TYPE.Heatmap: {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale[0])) {
                             const preparedData = await prepareHeatmapData({
                                 series: chartSeries[0],
@@ -184,11 +195,21 @@ export const useShapes = (args) => {
                                 yAxis: yAxis[0],
                                 yScale: yScale[0],
                             });
-                            shapes.push(React.createElement(HeatmapSeriesShapes, { key: "heatmap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                            shapes.push(React.createElement(HeatmapSeriesShapes, { key: SERIES_TYPE.Heatmap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                             shapesData.push(preparedData);
                         }
                         break;
                     }
+                    case 'funnel': {
+                        const preparedData = await prepareFunnelData({
+                            series: chartSeries,
+                            boundsWidth,
+                            boundsHeight,
+                        });
+                        shapes.push(React.createElement(FunnelSeriesShapes, { key: "funnel", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.push(preparedData);
+                        break;
+                    }
                     default: {
                         throw new ChartError({
                             message: `The display method is not defined for a series with type "${seriesType}"`,
@@ -204,8 +225,11 @@ export const useShapes = (args) => {
     }, [
         boundsHeight,
         boundsWidth,
+        clipPathId,
+        clipPathBySeriesType,
         dispatcher,
         htmlLayout,
+        isOutsideBounds,
         series,
         seriesOptions,
         split,
@@ -213,8 +237,6 @@ export const useShapes = (args) => {
         xScale,
         yAxis,
         yScale,
-        clipPathId,
-        isOutsideBounds,
     ]);
     return { shapes: shapesElemens, shapesData: shapesElemensData };
 };

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

@@ -3,11 +3,11 @@ import type { Dispatch } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedLineData } from './types';
 type Args = {
-    dispatcher: Dispatch<object>;
+    clipPathId: string;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedLineData[];
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
-    clipPathId: string;
+    dispatcher?: Dispatch<object>;
 };
 export declare const LineSeriesShapes: (args: Args) => React.JSX.Element;
 export {};

package/dist/esm/hooks/useShapes/line/index.js

@@ -129,9 +129,9 @@ export const LineSeriesShapes = (args) => {
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
         }
-        dispatcher.on('hover-shape.line', handleShapeHover);
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.line', handleShapeHover);
         return () => {
-            dispatcher.on('hover-shape.line', null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.line', null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,

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

@@ -1,13 +1,13 @@
+import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
 import type { ChartScale } from '../../useAxisScales';
-import type { PreparedAxis } from '../../useChartOptions/types';
 import type { PreparedLineSeries } from '../../useSeries/types';
 import type { PreparedSplit } from '../../useSplit/types';
 import type { PreparedLineData } from './types';
 export declare const prepareLineData: (args: {
     series: PreparedLineSeries[];
-    xAxis: PreparedAxis;
+    xAxis: PreparedXAxis;
     xScale: ChartScale;
-    yAxis: PreparedAxis[];
+    yAxis: PreparedYAxis[];
     yScale: (ChartScale | undefined)[];
     split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;

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

@@ -1,32 +1,6 @@
-import { getLabelsSize, getLeftPosition } from '../../../utils';
+import { getLabelsSize, getTextSizeFn } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { getXValue, getYValue } from '../utils';
-async function getLabelData(point, series, xMax) {
-    const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, series.dataLabels));
-    const style = series.dataLabels.style;
-    const size = await getLabelsSize({ labels: [text], style });
-    const labelData = {
-        text,
-        x: point.x,
-        y: point.y - series.dataLabels.padding,
-        style,
-        size: { width: size.maxWidth, height: size.maxHeight },
-        textAnchor: 'middle',
-        series: series,
-        active: true,
-    };
-    const left = getLeftPosition(labelData);
-    if (left < 0) {
-        labelData.x = labelData.x + Math.abs(left);
-    }
-    else {
-        const right = left + labelData.size.width;
-        if (right > xMax) {
-            labelData.x = labelData.x - xMax - right;
-        }
-    }
-    return labelData;
-}
 async function getHtmlLabel(point, series, xMax) {
     const content = String(point.data.label || point.data.y);
     const size = await getLabelsSize({ labels: [content], html: true });
@@ -69,7 +43,7 @@ export const prepareLineData = async (args) => {
             };
         });
         const htmlElements = [];
-        let labels = [];
+        const labels = [];
         if (s.dataLabels.enabled) {
             if (s.dataLabels.html) {
                 const list = await Promise.all(points.reduce((result, p) => {
@@ -82,13 +56,28 @@ export const prepareLineData = async (args) => {
                 htmlElements.push(...list);
             }
             else {
-                labels = await Promise.all(points.reduce((result, p) => {
-                    if (p.y === null) {
-                        return result;
+                const getTextSize = getTextSizeFn({ style: s.dataLabels.style });
+                for (let index = 0; index < points.length; index++) {
+                    const point = points[index];
+                    if (point.y !== null && point.x !== null) {
+                        const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, s.dataLabels));
+                        const labelSize = await getTextSize(text);
+                        const style = s.dataLabels.style;
+                        const y = Math.max(yAxisTop, point.y - s.dataLabels.padding - labelSize.height);
+                        const x = Math.min(xMax - labelSize.width, Math.max(0, point.x - labelSize.width / 2));
+                        const labelData = {
+                            text,
+                            x,
+                            y,
+                            style,
+                            size: labelSize,
+                            textAnchor: 'start',
+                            series: s,
+                            active: true,
+                        };
+                        labels.push(labelData);
                     }
-                    result.push(getLabelData(p, s, xMax));
-                    return result;
-                }, []));
+                }
             }
         }
         let markers = [];

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

@@ -3,10 +3,10 @@ import type { Dispatch, PieArcDatum } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedPieData, SegmentData } from './types';
 type PreparePieSeriesArgs = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedPieData[];
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    dispatcher?: Dispatch<object>;
 };
 export declare function getHaloVisibility(d: PieArcDatum<SegmentData>): "" | "hidden";
 export declare function PieSeriesShapes(args: PreparePieSeriesArgs): React.JSX.Element;

package/dist/esm/hooks/useShapes/pie/index.js

@@ -112,7 +112,7 @@ export function PieSeriesShapes(args) {
         const eventName = `hover-shape.pie`;
         const hoverOptions = get(seriesOptions, 'pie.states.hover');
         const inactiveOptions = get(seriesOptions, 'pie.states.inactive');
-        dispatcher.on(eventName, (data) => {
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, (data) => {
             var _a, _b;
             const selectedSeriesId = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.id;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
@@ -162,7 +162,7 @@ export function PieSeriesShapes(args) {
             });
         });
         return () => {
-            dispatcher.on(eventName, null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     const htmlElements = preparedData.map((d) => d.htmlLabels).flat();

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

@@ -3,10 +3,10 @@ import type { Dispatch } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedRadarData } from './types';
 type PrepareRadarSeriesArgs = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     series: PreparedRadarData[];
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    dispatcher?: Dispatch<object>;
 };
 export declare function RadarSeriesShapes(args: PrepareRadarSeriesArgs): React.JSX.Element;
 export {};

package/dist/esm/hooks/useShapes/radar/index.js

@@ -81,7 +81,7 @@ export function RadarSeriesShapes(args) {
         const eventName = `hover-shape.radar`;
         const hoverOptions = get(seriesOptions, 'radar.states.hover');
         const inactiveOptions = get(seriesOptions, 'radar.states.inactive');
-        dispatcher.on(eventName, (data) => {
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, (data) => {
             const closest = data === null || data === void 0 ? void 0 : data.find((d) => d.closest);
             const selectedSeries = closest === null || closest === void 0 ? void 0 : closest.series;
             const selectedSeriesData = closest === null || closest === void 0 ? void 0 : closest.data;
@@ -126,7 +126,7 @@ export function RadarSeriesShapes(args) {
             });
         });
         return () => {
-            dispatcher.on(eventName, null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     const htmlElements = preparedData.map((d) => d.htmlLabels).flat();

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

@@ -3,10 +3,10 @@ import type { Dispatch } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedSankeyData } from './types';
 type ShapeProps = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedSankeyData;
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    dispatcher?: Dispatch<object>;
 };
 export declare const SankeySeriesShape: (props: ShapeProps) => React.JSX.Element;
 export {};

package/dist/esm/hooks/useShapes/sankey/index.js

@@ -56,9 +56,9 @@ export const SankeySeriesShape = (props) => {
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
         }
-        dispatcher.on(eventName, handleShapeHover);
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, handleShapeHover);
         return () => {
-            dispatcher.on(eventName, null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,

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

@@ -4,9 +4,10 @@ import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedScatterData } from './types';
 export { prepareScatterData } from './prepare-data';
 type ScatterSeriesShapeProps = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedScatterData[];
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    clipPathId?: string;
+    dispatcher?: Dispatch<object>;
 };
 export declare function ScatterSeriesShape(props: ScatterSeriesShapeProps): React.JSX.Element;

package/dist/esm/hooks/useShapes/scatter/index.js

@@ -8,7 +8,7 @@ import { setActiveState, shapeKey } from '../utils';
 export { prepareScatterData } from './prepare-data';
 const b = block('scatter');
 export function ScatterSeriesShape(props) {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
+    const { clipPathId, dispatcher, preparedData, seriesOptions, htmlLayout } = props;
     const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -63,12 +63,12 @@ export function ScatterSeriesShape(props) {
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
         }
-        dispatcher.on('hover-shape.scatter', handleShapeHover);
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.scatter', handleShapeHover);
         return () => {
-            dispatcher.on('hover-shape.scatter', null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.scatter', null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement("g", { ref: ref, className: b(), clipPath: clipPathId ? `url(#${clipPathId})` : undefined }),
         React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 }

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

@@ -1,12 +1,12 @@
+import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
 import type { ChartScale } from '../../useAxisScales';
-import type { PreparedAxis } from '../../useChartOptions/types';
 import type { PreparedScatterSeries } from '../../useSeries/types';
 import type { PreparedScatterData } from './types';
 export declare function prepareScatterData(args: {
     series: PreparedScatterSeries[];
-    xAxis: PreparedAxis;
+    xAxis: PreparedXAxis;
     xScale: ChartScale;
-    yAxis: PreparedAxis[];
+    yAxis: PreparedYAxis[];
     yScale: (ChartScale | undefined)[];
     isOutsideBounds: (x: number, y: number) => boolean;
 }): PreparedScatterData[];

package/dist/esm/hooks/useShapes/styles.css

@@ -1,3 +1,7 @@
+.gcharts-line__label {
+  dominant-baseline: text-before-edge;
+}
+
 .gcharts-scatter__point {
   stroke-width: 1px;
 }
@@ -40,4 +44,8 @@
 
 .gcharts-heatmap__label {
   dominant-baseline: text-before-edge;
+}
+
+.gcharts-funnel__label {
+  dominant-baseline: text-before-edge;
 }

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

@@ -3,10 +3,10 @@ import type { Dispatch } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedTreemapData } from './types';
 type ShapeProps = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedTreemapData;
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    dispatcher?: Dispatch<object>;
 };
 export declare const TreemapSeriesShape: (props: ShapeProps) => React.JSX.Element;
 export {};

package/dist/esm/hooks/useShapes/treemap/index.js

@@ -92,9 +92,9 @@ export const TreemapSeriesShape = (props) => {
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
         }
-        dispatcher.on(eventName, handleShapeHover);
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, handleShapeHover);
         return () => {
-            dispatcher.on(eventName, null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,

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

@@ -1,7 +1,7 @@
 import type { BaseType } from 'd3';
 import type { BasicInactiveState } from '../../types';
+import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales';
-import type { PreparedAxis } from '../useChartOptions/types';
 export declare function getXValue(args: {
     point: {
         x?: number | string | null;
@@ -9,7 +9,7 @@ export declare function getXValue(args: {
     points?: {
         x?: number | string | null;
     }[];
-    xAxis: PreparedAxis;
+    xAxis: PreparedXAxis;
     xScale: ChartScale;
 }): number | null;
 export declare function getYValue(args: {
@@ -19,7 +19,7 @@ export declare function getYValue(args: {
     points?: {
         y?: number | string | null;
     }[];
-    yAxis: PreparedAxis;
+    yAxis: PreparedYAxis;
     yScale: ChartScale;
 }): number | null;
 export declare function shapeKey(d: unknown): string | -1;

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

@@ -5,10 +5,10 @@ import type { PreparedWaterfallData } from './types';
 export { prepareWaterfallData } from './prepare-data';
 export * from './types';
 type Args = {
-    dispatcher: Dispatch<object>;
+    clipPathId: string;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedWaterfallData[];
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
-    clipPathId: string;
+    dispatcher?: Dispatch<object>;
 };
 export declare const WaterfallSeriesShapes: (args: Args) => React.JSX.Element;