@gravity-ui/charts 0.4.1 → 0.6.0

package/dist/cjs/hooks/index.js

@@ -2,9 +2,10 @@ export * from './useChartDimensions';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
 export * from './useAxisScales';
+export * from './usePrevious';
 export * from './useSeries';
 export * from './useSeries/types';
 export * from './useShapes';
 export * from './useTooltip';
-export * from './useTooltip/types';
+export * from './useSplit';
 export * from './useSplit/types';

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

@@ -0,0 +1 @@
+export declare function usePrevious<T>(value: T): T | undefined;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export function usePrevious(value) {
+    const ref = React.useRef();
+    React.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}

package/dist/cjs/hooks/useSeries/prepare-legend.js

@@ -63,6 +63,7 @@ export const getPreparedLegend = (args) => {
             margin: titleMargin,
             style: titleStyle,
             height: titleHeight,
+            align: get(legend, 'title.align', 'left'),
         },
         width: legendWidth,
         ticks,

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

@@ -21,6 +21,7 @@ export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>>
         margin: number;
         style: BaseTextStyle;
         height: number;
+        align: Required<Required<ChartLegend>['title']>['align'];
     };
     ticks: {
         labelsMargin: number;

package/dist/cjs/hooks/useShapes/area/index.js

@@ -8,6 +8,7 @@ import { setActiveState } from '../utils';
 const b = block('d3-area');
 export const AreaSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         var _a;
@@ -72,7 +73,8 @@ export const AreaSeriesShapes = (args) => {
             .call(renderMarker);
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-        dispatcher.on('hover-shape.area', (data) => {
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
             const selected = (data === null || data === void 0 ? void 0 : data.filter((d) => d.series.type === 'area')) || [];
             const selectedDataItems = selected.map((d) => d.data);
             const selectedSeriesIds = selected.map((d) => { var _a; return (_a = d.series) === null || _a === void 0 ? void 0 : _a.id; });
@@ -132,7 +134,11 @@ export const AreaSeriesShapes = (args) => {
                 }
                 return d;
             });
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.area', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.area', null);
         };

package/dist/cjs/hooks/useShapes/bar-x/index.js

@@ -8,6 +8,7 @@ export * from './types';
 const b = block('d3-bar-x');
 export const BarXSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         var _a;
@@ -46,7 +47,8 @@ export const BarXSeriesShapes = (args) => {
             .style('font-size', (d) => d.style.fontSize)
             .style('font-weight', (d) => d.style.fontWeight || null)
             .style('fill', (d) => d.style.fontColor || null);
-        dispatcher.on('hover-shape.bar-x', (data) => {
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
             const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
             if (!data) {
@@ -84,7 +86,11 @@ export const BarXSeriesShapes = (args) => {
                         : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
                 });
             }
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.bar-x', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.bar-x', null);
         };

package/dist/cjs/hooks/useShapes/bar-y/index.js

@@ -7,6 +7,7 @@ export { prepareBarYData } from './prepare-data';
 const b = block('d3-bar-y');
 export const BarYSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -46,7 +47,8 @@ export const BarYSeriesShapes = (args) => {
             .style('fill', (d) => d.style.fontColor || null);
         const hoverOptions = get(seriesOptions, 'bar-y.states.hover');
         const inactiveOptions = get(seriesOptions, 'bar-y.states.inactive');
-        dispatcher.on('hover-shape.bar-y', (data) => {
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
             if (hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled) {
                 const hovered = data === null || data === void 0 ? void 0 : data.reduce((acc, d) => {
                     acc.add(d.data.y);
@@ -73,7 +75,11 @@ export const BarYSeriesShapes = (args) => {
                 rectSelection.attr('opacity', newOpacity);
                 labelSelection.attr('opacity', newOpacity);
             }
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.bar-y', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.bar-y', null);
         };

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

@@ -8,6 +8,7 @@ import { getLineDashArray, setActiveState } from '../utils';
 const b = block('d3-line');
 export const LineSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         var _a;
@@ -60,7 +61,8 @@ export const LineSeriesShapes = (args) => {
             .call(renderMarker);
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-        dispatcher.on('hover-shape.line', (data) => {
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
             const selected = (data === null || data === void 0 ? void 0 : data.filter((d) => d.series.type === 'line')) || [];
             const selectedDataItems = selected.map((d) => d.data);
             const selectedSeriesIds = selected.map((d) => { var _a; return (_a = d.series) === null || _a === void 0 ? void 0 : _a.id; });
@@ -119,7 +121,11 @@ export const LineSeriesShapes = (args) => {
                 }
                 return d;
             });
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.line', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.line', null);
         };

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

@@ -9,6 +9,7 @@ export { prepareScatterData } from './prepare-data';
 const b = block('d3-scatter');
 export function ScatterSeriesShape(props) {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -28,8 +29,9 @@ export function ScatterSeriesShape(props) {
             .attr('cursor', (d) => d.point.series.cursor);
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-        dispatcher.on('hover-shape.scatter', (data) => {
+        function handleShapeHover(data) {
             var _a;
+            hoveredDataRef.current = data;
             const selected = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'scatter');
             const selectedDataItem = selected === null || selected === void 0 ? void 0 : selected.data;
             const selectedSeriesId = (_a = selected === null || selected === void 0 ? void 0 : selected.series) === null || _a === void 0 ? void 0 : _a.id;
@@ -58,7 +60,11 @@ export function ScatterSeriesShape(props) {
                 }
                 return d;
             });
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.scatter', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.scatter', null);
         };

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

@@ -6,6 +6,7 @@ import { HtmlLayer } from '../HtmlLayer';
 const b = block('d3-treemap');
 export const TreemapSeriesShape = (props) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -48,8 +49,9 @@ export const TreemapSeriesShape = (props) => {
         const eventName = `hover-shape.treemap`;
         const hoverOptions = get(seriesOptions, 'treemap.states.hover');
         const inactiveOptions = get(seriesOptions, 'treemap.states.inactive');
-        dispatcher.on(eventName, (data) => {
+        function handleShapeHover(data) {
             var _a;
+            hoveredDataRef.current = data;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
             const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
             const hoveredData = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.data;
@@ -87,7 +89,11 @@ export const TreemapSeriesShape = (props) => {
                 });
                 return d;
             });
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on(eventName, handleShapeHover);
         return () => {
             dispatcher.on(eventName, null);
         };

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

@@ -17,7 +17,7 @@ export declare function getYValue(args: {
     yAxis: PreparedAxis;
     yScale: ChartScale;
 }): number;
-export declare const shapeKey: (d: unknown) => string | -1;
+export declare function shapeKey(d: unknown): string | -1;
 export declare function setActiveState<T extends {
     active?: boolean;
 }>(args: {
@@ -26,4 +26,4 @@ export declare function setActiveState<T extends {
     state: BasicInactiveState | undefined;
     active: boolean;
 }): T;
-export declare const getLineDashArray: (dashStyle: DashStyle, strokeWidth?: number) => string;
+export declare function getLineDashArray(dashStyle: DashStyle, strokeWidth?: number): string;

package/dist/cjs/hooks/useShapes/utils.js

@@ -23,7 +23,9 @@ export function getYValue(args) {
     const yLinearScale = yScale;
     return yLinearScale(point.y);
 }
-export const shapeKey = (d) => d.id || -1;
+export function shapeKey(d) {
+    return d.id || -1;
+}
 export function setActiveState(args) {
     const { element, datum, state, active } = args;
     const elementSelection = select(element);
@@ -34,7 +36,7 @@ export function setActiveState(args) {
     }
     return datum;
 }
-export const getLineDashArray = (dashStyle, strokeWidth = 2) => {
+export function getLineDashArray(dashStyle, strokeWidth = 2) {
     const value = dashStyle.toLowerCase();
     const arrayValue = value
         .replace('shortdashdotdot', '3,1,1,1,1,1,')
@@ -50,4 +52,4 @@ export const getLineDashArray = (dashStyle, strokeWidth = 2) => {
         return `${parseInt(part, 10) * strokeWidth}`;
     });
     return arrayValue.join(',').replace(/NaN/g, 'none');
-};
+}

package/dist/cjs/hooks/useShapes/waterfall/index.js

@@ -10,6 +10,7 @@ export * from './types';
 const b = block('d3-waterfall');
 export const WaterfallSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     const connectorSelector = `.${b('connector')}`;
     React.useEffect(() => {
@@ -78,7 +79,8 @@ export const WaterfallSeriesShapes = (args) => {
         })
             .attr('stroke-width', 1)
             .attr('stroke-dasharray', () => getLineDashArray(DashStyle.Dash, 1));
-        dispatcher.on('hover-shape.waterfall', (data) => {
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
             const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
             if (!data) {
@@ -116,7 +118,11 @@ export const WaterfallSeriesShapes = (args) => {
                         : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
                 });
             }
-        });
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on('hover-shape.waterfall', handleShapeHover);
         return () => {
             dispatcher.on('hover-shape.waterfall', null);
         };

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

@@ -1,13 +1,12 @@
 import type { Dispatch } from 'd3';
-import type { TooltipDataChunk } from '../../types';
+import type { PointPosition, TooltipDataChunk } from '../../types';
 import type { PreparedTooltip } from '../useChartOptions/types';
-import type { PointerPosition } from './types';
 type Args = {
     dispatcher: Dispatch<object>;
     tooltip: PreparedTooltip;
 };
 export declare const useTooltip: ({ dispatcher, tooltip }: Args) => {
     hovered: TooltipDataChunk[] | undefined;
-    pointerPosition: PointerPosition | undefined;
+    pointerPosition: PointPosition | undefined;
 };
 export {};

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

@@ -1,5 +1,5 @@
 import type { MeaningfulAny } from '../misc';
-import type { ChartTooltipRendererData } from './tooltip';
+import type { ChartTooltipRendererArgs } from './tooltip';
 export type ChartMargin = {
     top: number;
     right: number;
@@ -13,6 +13,6 @@ export type ChartOptions = {
             point: MeaningfulAny;
             series: MeaningfulAny;
         }, event: PointerEvent) => void;
-        pointermove?: (data: ChartTooltipRendererData | undefined, event: PointerEvent) => void;
+        pointermove?: (data: ChartTooltipRendererArgs | undefined, event: PointerEvent) => void;
     };
 };

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

@@ -38,6 +38,8 @@ export type ChartLegend = {
          * Defaults to 4 for horizontal axes, 8 for vertical.
          * */
         margin?: number;
+        /** The horizontal alignment of the title. */
+        align?: 'left' | 'center' | 'right';
     };
     colorScale?: {
         stops?: number[];

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

@@ -16,7 +16,7 @@ export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSerie
 export type DataLabelRendererData<T = MeaningfulAny> = {
     data: ChartSeriesData<T>;
 };
-type BasicHoverState = {
+export type BasicHoverState = {
     /**
      * Enable separate styles for the hovered series.
      *
@@ -223,4 +223,3 @@ export type ChartSeriesOptions = {
         };
     };
 };
-export {};

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

@@ -59,7 +59,7 @@ export type TooltipDataChunkWaterfall<T = MeaningfulAny> = {
 export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkWaterfall<T>) & {
     closest?: boolean;
 };
-export type ChartTooltipRendererData<T = MeaningfulAny> = {
+export type ChartTooltipRendererArgs<T = MeaningfulAny> = {
     hovered: TooltipDataChunk<T>[];
     xAxis?: ChartXAxis;
     yAxis?: ChartYAxis;
@@ -67,9 +67,9 @@ export type ChartTooltipRendererData<T = MeaningfulAny> = {
 export type ChartTooltip<T = MeaningfulAny> = {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */
-    renderer?: (args: {
-        hovered: TooltipDataChunk<T>[];
-        xAxis?: ChartXAxis;
-        yAxis?: ChartYAxis;
-    }) => React.ReactElement | null;
+    renderer?: (args: ChartTooltipRendererArgs<T>) => React.ReactElement | null;
+    pin?: {
+        enabled?: boolean;
+        modifierKey?: 'altKey' | 'metaKey';
+    };
 };

package/dist/cjs/types/misc.d.ts

@@ -2,3 +2,4 @@
  * A utilitarian type to describe `any` when it does not contradict the typescript usage paradigm.
  */
 export type MeaningfulAny = any;
+export type PointPosition = [number, number];

package/dist/cjs/utils/misc.d.ts

@@ -1,2 +1,10 @@
-export declare const randomString: (length: number, chars: string) => string;
-export declare const getUniqId: () => string;
+export declare function randomString(length: number, chars: string): string;
+export declare function getUniqId(): string;
+/**
+ * Checks Macintosh hardware is used.
+ *
+ * Note: there is no better way to get this information as using depricated property `navigator.platform`.
+ *
+ * More details [here](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples).
+ */
+export declare function isMacintosh(): boolean;

package/dist/cjs/utils/misc.js

@@ -1,8 +1,20 @@
-export const randomString = (length, chars) => {
+export function randomString(length, chars) {
     let result = '';
     for (let i = length; i > 0; --i) {
         result += chars[Math.floor(Math.random() * chars.length)];
     }
     return result;
-};
-export const getUniqId = () => `gravity-chart.${randomString(5, '0123456789abcdefghijklmnopqrstuvwxyz')}`;
+}
+export function getUniqId() {
+    return `gravity-chart.${randomString(5, '0123456789abcdefghijklmnopqrstuvwxyz')}`;
+}
+/**
+ * Checks Macintosh hardware is used.
+ *
+ * Note: there is no better way to get this information as using depricated property `navigator.platform`.
+ *
+ * More details [here](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples).
+ */
+export function isMacintosh() {
+    return typeof navigator === 'undefined' ? false : /Mac|iP(hone|[oa]d)/.test(navigator.platform);
+}

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

@@ -1,10 +1,4 @@
 import React from 'react';
-import type { ChartData } from '../../types';
+import type { ChartInnerProps } from './types';
 import './styles.css';
-type Props = {
-    width: number;
-    height: number;
-    data: ChartData;
-};
-export declare const ChartInner: (props: Props) => React.JSX.Element;
-export {};
+export declare const ChartInner: (props: ChartInnerProps) => React.JSX.Element;

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

@@ -1,77 +1,39 @@
 import React from 'react';
-import { pointer } from 'd3';
-import throttle from 'lodash/throttle';
-import { IS_TOUCH_ENABLED } from '../../constants';
-import { useAxisScales, useChartDimensions, useChartOptions, useSeries, useShapes, } from '../../hooks';
-import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
-import { getPreparedXAxis } from '../../hooks/useChartOptions/x-axis';
-import { getPreparedYAxis } from '../../hooks/useChartOptions/y-axis';
-import { useSplit } from '../../hooks/useSplit';
 import { EventType, block, getD3Dispatcher } from '../../utils';
-import { getClosestPoints } from '../../utils/chart/get-closest-data';
 import { AxisX, AxisY } from '../Axis';
 import { Legend } from '../Legend';
 import { PlotTitle } from '../PlotTitle';
 import { Title } from '../Title';
 import { Tooltip } from '../Tooltip';
+import { useChartInnerHandlers } from './useChartInnerHandlers';
+import { useChartInnerProps } from './useChartInnerProps';
+import { useChartInnerState } from './useChartInnerState';
 import './styles.css';
 const b = block('d3');
-const THROTTLE_DELAY = 50;
 export const ChartInner = (props) => {
     var _a, _b, _c, _d;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const htmlLayerRef = React.useRef(null);
-    const dispatcher = React.useMemo(() => {
-        return getD3Dispatcher();
-    }, []);
-    const { chart, title, tooltip } = useChartOptions({
-        data,
-    });
-    const xAxis = React.useMemo(() => getPreparedXAxis({ xAxis: data.xAxis, width, series: data.series.data }), [data, width]);
-    const yAxis = React.useMemo(() => getPreparedYAxis({
-        series: data.series.data,
-        yAxis: data.yAxis,
-        height,
-    }), [data, height]);
-    const { legendItems, legendConfig, preparedSeries, preparedSeriesOptions, preparedLegend, handleLegendItemClick, } = useSeries({
-        chartWidth: width,
-        chartHeight: height,
-        chartMargin: chart.margin,
-        series: data.series,
-        legend: data.legend,
-        preparedYAxis: yAxis,
-    });
-    const { boundsWidth, boundsHeight } = useChartDimensions({
-        width,
-        height,
-        margin: chart.margin,
-        preparedLegend,
-        preparedXAxis: xAxis,
-        preparedYAxis: yAxis,
-        preparedSeries: preparedSeries,
+    const dispatcher = React.useMemo(() => getD3Dispatcher(), []);
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current }));
+    const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
+        dispatcher,
+        tooltip,
     });
-    const preparedSplit = useSplit({ split: data.split, boundsHeight, chartWidth: width });
-    const { xScale, yScale } = useAxisScales({
-        boundsWidth,
+    const { handleChartClick, handleMouseLeave, throttledHandleMouseMove, throttledHandleTouchMove } = useChartInnerHandlers({
         boundsHeight,
-        series: preparedSeries,
-        xAxis,
-        yAxis,
-        split: preparedSplit,
-    });
-    const { shapes, shapesData } = useShapes({
+        boundsOffsetLeft,
+        boundsOffsetTop,
         boundsWidth,
-        boundsHeight,
         dispatcher,
-        series: preparedSeries,
-        seriesOptions: preparedSeriesOptions,
+        shapesData,
+        svgContainer: svgRef.current,
+        togglePinTooltip,
+        tooltipPinned,
+        unpinTooltip,
         xAxis,
-        xScale,
         yAxis,
-        yScale,
-        split: preparedSplit,
-        htmlLayout: htmlLayerRef.current,
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
@@ -90,68 +52,11 @@ export const ChartInner = (props) => {
             dispatcher.on(EventType.POINTERMOVE_CHART, null);
         };
     }, [dispatcher, clickHandler, pointerMoveHandler]);
-    const boundsOffsetTop = chart.margin.top;
-    // We only need to consider the width of the first left axis
-    const boundsOffsetLeft = chart.margin.left + getYAxisWidth(yAxis[0]);
-    const isOutsideBounds = React.useCallback((x, y) => {
-        return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
-    }, [boundsHeight, boundsWidth]);
-    const handleMove = ([pointerX, pointerY], event) => {
-        const x = pointerX - boundsOffsetLeft;
-        const y = pointerY - boundsOffsetTop;
-        if (isOutsideBounds(x, y)) {
-            dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
-            dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
-            return;
-        }
-        const closest = getClosestPoints({
-            position: [x, y],
-            shapesData,
-        });
-        dispatcher.call(EventType.HOVER_SHAPE, event.target, closest, [pointerX, pointerY]);
-        dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
-            hovered: closest,
-            xAxis,
-            yAxis: yAxis[0],
-        }, event);
-    };
-    const handleMouseMove = (event) => {
-        const [pointerX, pointerY] = pointer(event, svgRef.current);
-        handleMove([pointerX, pointerY], event);
-    };
-    const throttledHandleMouseMove = IS_TOUCH_ENABLED
-        ? undefined
-        : throttle(handleMouseMove, THROTTLE_DELAY);
-    const handleMouseLeave = (event) => {
-        throttledHandleMouseMove === null || throttledHandleMouseMove === void 0 ? void 0 : throttledHandleMouseMove.cancel();
-        dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
-        dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
-    };
-    const handleTouchMove = (event) => {
-        const touch = event.touches[0];
-        const [pointerX, pointerY] = pointer(touch, svgRef.current);
-        handleMove([pointerX, pointerY], event);
-    };
-    const throttledHandleTouchMove = IS_TOUCH_ENABLED
-        ? throttle(handleTouchMove, THROTTLE_DELAY)
-        : undefined;
-    const handleChartClick = React.useCallback((event) => {
-        const [pointerX, pointerY] = pointer(event, svgRef.current);
-        const x = pointerX - boundsOffsetLeft;
-        const y = pointerY - boundsOffsetTop;
-        if (isOutsideBounds(x, y)) {
-            return;
-        }
-        const items = getClosestPoints({
-            position: [x, y],
-            shapesData,
-        });
-        const selected = items === null || items === void 0 ? void 0 : items.find((item) => item.closest);
-        if (!selected) {
-            return;
+    React.useEffect(() => {
+        if ((prevWidth !== width || prevHeight !== height) && tooltipPinned) {
+            unpinTooltip === null || unpinTooltip === void 0 ? void 0 : unpinTooltip();
         }
-        dispatcher.call('click-chart', undefined, { point: selected.data, series: selected.series }, event);
-    }, [boundsOffsetLeft, boundsOffsetTop, dispatcher, isOutsideBounds, shapesData]);
+    }, [prevWidth, width, prevHeight, height, tooltipPinned, unpinTooltip]);
     return (React.createElement(React.Fragment, null,
         React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick },
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
@@ -164,9 +69,9 @@ export const ChartInner = (props) => {
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit })))),
                 shapes),
-            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick }))),
+            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip }))),
         React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {
                 transform: `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),
-        React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0] })));
+        React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], onOutsideClick: unpinTooltip, tooltipPinned: tooltipPinned })));
 };

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

@@ -0,0 +1,6 @@
+import type { ChartData } from '../../types';
+export type ChartInnerProps = {
+    width: number;
+    height: number;
+    data: ChartData;
+};