@gravity-ui/charts 0.2.0 → 0.4.0

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

@@ -1,12 +1,13 @@
 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 { block, getD3Dispatcher } from '../../utils';
+import { EventType, block, getD3Dispatcher } from '../../utils';
 import { getClosestPoints } from '../../utils/chart/get-closest-data';
 import { AxisX, AxisY } from '../Axis';
 import { Legend } from '../Legend';
@@ -17,7 +18,7 @@ import './styles.css';
 const b = block('d3');
 const THROTTLE_DELAY = 50;
 export const ChartInner = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const htmlLayerRef = React.useRef(null);
@@ -73,39 +74,67 @@ export const ChartInner = (props) => {
         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;
     React.useEffect(() => {
         if (clickHandler) {
-            dispatcher.on('click-chart', clickHandler);
+            dispatcher.on(EventType.CLICK_CHART, clickHandler);
+        }
+        if (pointerMoveHandler) {
+            dispatcher.on(EventType.POINTERMOVE_CHART, (...args) => {
+                const [handlerData, event] = args;
+                pointerMoveHandler(handlerData, event);
+            });
         }
         return () => {
-            dispatcher.on('click-chart', null);
+            dispatcher.on(EventType.CLICK_CHART, null);
+            dispatcher.on(EventType.POINTERMOVE_CHART, null);
         };
-    }, [dispatcher, clickHandler]);
+    }, [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 handleMouseMove = (event) => {
-        const [pointerX, pointerY] = pointer(event, svgRef.current);
+    const handleMove = ([pointerX, pointerY], event) => {
         const x = pointerX - boundsOffsetLeft;
         const y = pointerY - boundsOffsetTop;
         if (isOutsideBounds(x, y)) {
-            dispatcher.call('hover-shape', {}, undefined);
+            dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
+            dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
             return;
         }
         const closest = getClosestPoints({
             position: [x, y],
             shapesData,
         });
-        dispatcher.call('hover-shape', event.target, closest, [pointerX, pointerY]);
+        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 throttledHandleMouseMove = throttle(handleMouseMove, THROTTLE_DELAY);
-    const handleMouseLeave = () => {
-        throttledHandleMouseMove.cancel();
-        dispatcher.call('hover-shape', {}, undefined);
+    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;
@@ -124,7 +153,7 @@ export const ChartInner = (props) => {
         dispatcher.call('click-chart', undefined, { point: selected.data, series: selected.series }, event);
     }, [boundsOffsetLeft, boundsOffsetTop, dispatcher, isOutsideBounds, shapesData]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onClick: handleChartClick },
+        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 })),
             React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
                 return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });

package/dist/cjs/components/Tooltip/ChartTooltipContent.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ChartTooltip, ChartXAxis, ChartYAxis, TooltipDataChunk } from '../../types';
+export type ChartTooltipContentProps = {
+    hovered?: TooltipDataChunk[];
+    xAxis?: ChartXAxis;
+    yAxis?: ChartYAxis;
+    renderer?: ChartTooltip['renderer'];
+};
+export declare const ChartTooltipContent: (props: ChartTooltipContentProps) => React.JSX.Element | null;

package/dist/cjs/components/Tooltip/ChartTooltipContent.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import isNil from 'lodash/isNil';
+import { DefaultContent } from './DefaultContent';
+export const ChartTooltipContent = (props) => {
+    const { hovered, xAxis, yAxis, renderer } = props;
+    if (!hovered) {
+        return null;
+    }
+    const customTooltip = renderer === null || renderer === void 0 ? void 0 : renderer({ hovered, xAxis, yAxis });
+    return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
+};

package/dist/cjs/components/Tooltip/DefaultContent.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import type { PreparedAxis } from '../../hooks';
-import type { TooltipDataChunk } from '../../types';
+import type { ChartXAxis, ChartYAxis, TooltipDataChunk } from '../../types';
 type Props = {
     hovered: TooltipDataChunk[];
-    xAxis: PreparedAxis;
-    yAxis: PreparedAxis;
+    xAxis?: ChartXAxis;
+    yAxis?: ChartYAxis;
 };
 export declare const DefaultContent: ({ hovered, xAxis, yAxis }: Props) => React.JSX.Element;
 export {};

package/dist/cjs/components/Tooltip/DefaultContent.js

@@ -5,8 +5,8 @@ import { formatNumber } from '../../libs';
 import { block, getDataCategoryValue, getWaterfallPointSubtotal } from '../../utils';
 const b = block('d3-tooltip');
 const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
-const getRowData = (fieldName, axis, data) => {
-    switch (axis.type) {
+const getRowData = (fieldName, data, axis) => {
+    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
         case 'category': {
             const categories = get(axis, 'categories', []);
             return getDataCategoryValue({ axisDirection: fieldName, categories, data });
@@ -25,17 +25,17 @@ const getRowData = (fieldName, axis, data) => {
         }
     }
 };
-const getXRowData = (xAxis, data) => getRowData('x', xAxis, data);
-const getYRowData = (yAxis, data) => getRowData('y', yAxis, data);
+const getXRowData = (data, xAxis) => getRowData('x', data, xAxis);
+const getYRowData = (data, yAxis) => getRowData('y', data, yAxis);
 const getMeasureValue = (data, xAxis, yAxis) => {
     var _a, _b;
     if (data.every((item) => ['pie', 'treemap', 'waterfall'].includes(item.series.type))) {
         return null;
     }
     if (data.some((item) => item.series.type === 'bar-y')) {
-        return getYRowData(yAxis, (_a = data[0]) === null || _a === void 0 ? void 0 : _a.data);
+        return getYRowData((_a = data[0]) === null || _a === void 0 ? void 0 : _a.data, yAxis);
     }
-    return getXRowData(xAxis, (_b = data[0]) === null || _b === void 0 ? void 0 : _b.data);
+    return getXRowData((_b = data[0]) === null || _b === void 0 ? void 0 : _b.data, xAxis);
 };
 export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
     const measureValue = getMeasureValue(hovered, xAxis, yAxis);
@@ -52,7 +52,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                     const value = (React.createElement(React.Fragment, null,
                         series.name,
                         ": ",
-                        getYRowData(yAxis, data)));
+                        getYRowData(data, yAxis)));
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
                         React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
@@ -63,12 +63,12 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                     return (React.createElement("div", { key: `${id}_${get(data, 'x')}` },
                         !isTotal && (React.createElement(React.Fragment, null,
                             React.createElement("div", { key: id, className: b('content-row') },
-                                React.createElement("b", null, getXRowData(xAxis, data))),
+                                React.createElement("b", null, getXRowData(data, xAxis))),
                             React.createElement("div", { className: b('content-row') },
                                 React.createElement("span", null,
                                     series.name,
                                     "\u00A0"),
-                                React.createElement("span", null, getYRowData(yAxis, data))))),
+                                React.createElement("span", null, getYRowData(data, yAxis))))),
                         React.createElement("div", { key: id, className: b('content-row') },
                             isTotal ? 'Total' : 'Subtotal',
                             ": ",
@@ -78,7 +78,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                     const value = (React.createElement(React.Fragment, null,
                         series.name,
                         ": ",
-                        getXRowData(xAxis, data)));
+                        getXRowData(data, xAxis)));
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
                         React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));

package/dist/cjs/components/Tooltip/index.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
-import isNil from 'lodash/isNil';
 import { useTooltip } from '../../hooks';
 import { block } from '../../utils';
-import { DefaultContent } from './DefaultContent';
+import { ChartTooltipContent } from './ChartTooltipContent';
 import './styles.css';
 const b = block('d3-tooltip');
 export const Tooltip = (props) => {
@@ -13,17 +12,10 @@ export const Tooltip = (props) => {
     const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;
     const top = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) || 0) + containerRect.top;
     const anchorRef = useVirtualElementRef({ rect: { top, left } });
-    const content = React.useMemo(() => {
-        var _a;
-        if (!hovered) {
-            return null;
-        }
-        const customTooltip = (_a = tooltip.renderer) === null || _a === void 0 ? void 0 : _a.call(tooltip, { hovered });
-        return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
-    }, [hovered, tooltip, xAxis, yAxis]);
     React.useEffect(() => {
         window.dispatchEvent(new CustomEvent('scroll'));
     }, [left, top]);
     return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b(), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }] },
-        React.createElement("div", { className: b('content') }, content))) : null;
+        React.createElement("div", { className: b('content') },
+            React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer })))) : null;
 };

package/dist/cjs/components/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { ChartData } from '../types';
+export * from './Tooltip/ChartTooltipContent';
 export type ChartRef = {
     reflow: () => void;
 };
@@ -15,4 +16,3 @@ export type ChartProps = {
     }) => void;
 };
 export declare const Chart: React.ForwardRefExoticComponent<ChartProps & React.RefAttributes<ChartRef>>;
-export {};

package/dist/cjs/components/index.js

@@ -5,6 +5,7 @@ import { i18nFactory } from '../i18n';
 import { getUniqId } from '../utils';
 import { validateData } from '../validation';
 import { ChartInner } from './ChartInner';
+export * from './Tooltip/ChartTooltipContent';
 export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
     const { data, lang, onResize } = props;
     const validatedData = React.useRef();

package/dist/cjs/constants/index.d.ts

@@ -1,4 +1,5 @@
 export * from './defaults';
+export * from './misc';
 export declare const SeriesType: {
     readonly Area: "area";
     readonly BarX: "bar-x";

package/dist/cjs/constants/index.js

@@ -1,4 +1,5 @@
 export * from './defaults';
+export * from './misc';
 export const SeriesType = {
     Area: 'area',
     BarX: 'bar-x',

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

@@ -0,0 +1 @@
+export declare const IS_TOUCH_ENABLED: boolean;

package/dist/cjs/constants/misc.js

@@ -0,0 +1,7 @@
+function isTouchEnabled() {
+    if (typeof window !== 'object') {
+        return false;
+    }
+    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+}
+export const IS_TOUCH_ENABLED = isTouchEnabled();

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

@@ -1,3 +1,5 @@
+import type { MeaningfulAny } from '../misc';
+import type { ChartTooltipRendererData } from './tooltip';
 export type ChartMargin = {
     top: number;
     right: number;
@@ -8,8 +10,9 @@ export type ChartOptions = {
     margin?: Partial<ChartMargin>;
     events?: {
         click?: (data: {
-            point: unknown;
-            series: unknown;
+            point: MeaningfulAny;
+            series: MeaningfulAny;
         }, event: PointerEvent) => void;
+        pointermove?: (data: ChartTooltipRendererData | undefined, event: PointerEvent) => void;
     };
 };

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

@@ -1,5 +1,6 @@
 import type { MeaningfulAny } from '../misc';
 import type { AreaSeries, AreaSeriesData } from './area';
+import type { ChartXAxis, ChartYAxis } from './axis';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
 import type { LineSeries, LineSeriesData } from './line';
@@ -58,10 +59,17 @@ 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> = {
+    hovered: TooltipDataChunk<T>[];
+    xAxis?: ChartXAxis;
+    yAxis?: ChartYAxis;
+};
 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;
 };

package/dist/cjs/utils/d3-dispatcher.d.ts

@@ -1 +1,6 @@
+export declare const EventType: {
+    CLICK_CHART: string;
+    HOVER_SHAPE: string;
+    POINTERMOVE_CHART: string;
+};
 export declare const getD3Dispatcher: () => import("d3-dispatch").Dispatch<object>;

package/dist/cjs/utils/d3-dispatcher.js

@@ -1,4 +1,9 @@
 import { dispatch } from 'd3';
+export const EventType = {
+    CLICK_CHART: 'click-chart',
+    HOVER_SHAPE: 'hover-shape',
+    POINTERMOVE_CHART: 'pointermove-chart',
+};
 export const getD3Dispatcher = () => {
-    return dispatch('hover-shape', 'click-chart');
+    return dispatch(EventType.CLICK_CHART, EventType.HOVER_SHAPE, EventType.POINTERMOVE_CHART);
 };

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

@@ -1,12 +1,13 @@
 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 { block, getD3Dispatcher } from '../../utils';
+import { EventType, block, getD3Dispatcher } from '../../utils';
 import { getClosestPoints } from '../../utils/chart/get-closest-data';
 import { AxisX, AxisY } from '../Axis';
 import { Legend } from '../Legend';
@@ -17,7 +18,7 @@ import './styles.css';
 const b = block('d3');
 const THROTTLE_DELAY = 50;
 export const ChartInner = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const htmlLayerRef = React.useRef(null);
@@ -73,39 +74,67 @@ export const ChartInner = (props) => {
         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;
     React.useEffect(() => {
         if (clickHandler) {
-            dispatcher.on('click-chart', clickHandler);
+            dispatcher.on(EventType.CLICK_CHART, clickHandler);
+        }
+        if (pointerMoveHandler) {
+            dispatcher.on(EventType.POINTERMOVE_CHART, (...args) => {
+                const [handlerData, event] = args;
+                pointerMoveHandler(handlerData, event);
+            });
         }
         return () => {
-            dispatcher.on('click-chart', null);
+            dispatcher.on(EventType.CLICK_CHART, null);
+            dispatcher.on(EventType.POINTERMOVE_CHART, null);
         };
-    }, [dispatcher, clickHandler]);
+    }, [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 handleMouseMove = (event) => {
-        const [pointerX, pointerY] = pointer(event, svgRef.current);
+    const handleMove = ([pointerX, pointerY], event) => {
         const x = pointerX - boundsOffsetLeft;
         const y = pointerY - boundsOffsetTop;
         if (isOutsideBounds(x, y)) {
-            dispatcher.call('hover-shape', {}, undefined);
+            dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
+            dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
             return;
         }
         const closest = getClosestPoints({
             position: [x, y],
             shapesData,
         });
-        dispatcher.call('hover-shape', event.target, closest, [pointerX, pointerY]);
+        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 throttledHandleMouseMove = throttle(handleMouseMove, THROTTLE_DELAY);
-    const handleMouseLeave = () => {
-        throttledHandleMouseMove.cancel();
-        dispatcher.call('hover-shape', {}, undefined);
+    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;
@@ -124,7 +153,7 @@ export const ChartInner = (props) => {
         dispatcher.call('click-chart', undefined, { point: selected.data, series: selected.series }, event);
     }, [boundsOffsetLeft, boundsOffsetTop, dispatcher, isOutsideBounds, shapesData]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onClick: handleChartClick },
+        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 })),
             React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
                 return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });

package/dist/esm/components/Tooltip/ChartTooltipContent.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ChartTooltip, ChartXAxis, ChartYAxis, TooltipDataChunk } from '../../types';
+export type ChartTooltipContentProps = {
+    hovered?: TooltipDataChunk[];
+    xAxis?: ChartXAxis;
+    yAxis?: ChartYAxis;
+    renderer?: ChartTooltip['renderer'];
+};
+export declare const ChartTooltipContent: (props: ChartTooltipContentProps) => React.JSX.Element | null;

package/dist/esm/components/Tooltip/ChartTooltipContent.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import isNil from 'lodash/isNil';
+import { DefaultContent } from './DefaultContent';
+export const ChartTooltipContent = (props) => {
+    const { hovered, xAxis, yAxis, renderer } = props;
+    if (!hovered) {
+        return null;
+    }
+    const customTooltip = renderer === null || renderer === void 0 ? void 0 : renderer({ hovered, xAxis, yAxis });
+    return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
+};

package/dist/esm/components/Tooltip/DefaultContent.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import type { PreparedAxis } from '../../hooks';
-import type { TooltipDataChunk } from '../../types';
+import type { ChartXAxis, ChartYAxis, TooltipDataChunk } from '../../types';
 type Props = {
     hovered: TooltipDataChunk[];
-    xAxis: PreparedAxis;
-    yAxis: PreparedAxis;
+    xAxis?: ChartXAxis;
+    yAxis?: ChartYAxis;
 };
 export declare const DefaultContent: ({ hovered, xAxis, yAxis }: Props) => React.JSX.Element;
 export {};

package/dist/esm/components/Tooltip/DefaultContent.js

@@ -5,8 +5,8 @@ import { formatNumber } from '../../libs';
 import { block, getDataCategoryValue, getWaterfallPointSubtotal } from '../../utils';
 const b = block('d3-tooltip');
 const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
-const getRowData = (fieldName, axis, data) => {
-    switch (axis.type) {
+const getRowData = (fieldName, data, axis) => {
+    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
         case 'category': {
             const categories = get(axis, 'categories', []);
             return getDataCategoryValue({ axisDirection: fieldName, categories, data });
@@ -25,17 +25,17 @@ const getRowData = (fieldName, axis, data) => {
         }
     }
 };
-const getXRowData = (xAxis, data) => getRowData('x', xAxis, data);
-const getYRowData = (yAxis, data) => getRowData('y', yAxis, data);
+const getXRowData = (data, xAxis) => getRowData('x', data, xAxis);
+const getYRowData = (data, yAxis) => getRowData('y', data, yAxis);
 const getMeasureValue = (data, xAxis, yAxis) => {
     var _a, _b;
     if (data.every((item) => ['pie', 'treemap', 'waterfall'].includes(item.series.type))) {
         return null;
     }
     if (data.some((item) => item.series.type === 'bar-y')) {
-        return getYRowData(yAxis, (_a = data[0]) === null || _a === void 0 ? void 0 : _a.data);
+        return getYRowData((_a = data[0]) === null || _a === void 0 ? void 0 : _a.data, yAxis);
     }
-    return getXRowData(xAxis, (_b = data[0]) === null || _b === void 0 ? void 0 : _b.data);
+    return getXRowData((_b = data[0]) === null || _b === void 0 ? void 0 : _b.data, xAxis);
 };
 export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
     const measureValue = getMeasureValue(hovered, xAxis, yAxis);
@@ -52,7 +52,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                     const value = (React.createElement(React.Fragment, null,
                         series.name,
                         ": ",
-                        getYRowData(yAxis, data)));
+                        getYRowData(data, yAxis)));
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
                         React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
@@ -63,12 +63,12 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                     return (React.createElement("div", { key: `${id}_${get(data, 'x')}` },
                         !isTotal && (React.createElement(React.Fragment, null,
                             React.createElement("div", { key: id, className: b('content-row') },
-                                React.createElement("b", null, getXRowData(xAxis, data))),
+                                React.createElement("b", null, getXRowData(data, xAxis))),
                             React.createElement("div", { className: b('content-row') },
                                 React.createElement("span", null,
                                     series.name,
                                     "\u00A0"),
-                                React.createElement("span", null, getYRowData(yAxis, data))))),
+                                React.createElement("span", null, getYRowData(data, yAxis))))),
                         React.createElement("div", { key: id, className: b('content-row') },
                             isTotal ? 'Total' : 'Subtotal',
                             ": ",
@@ -78,7 +78,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                     const value = (React.createElement(React.Fragment, null,
                         series.name,
                         ": ",
-                        getXRowData(xAxis, data)));
+                        getXRowData(data, xAxis)));
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
                         React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
-import isNil from 'lodash/isNil';
 import { useTooltip } from '../../hooks';
 import { block } from '../../utils';
-import { DefaultContent } from './DefaultContent';
+import { ChartTooltipContent } from './ChartTooltipContent';
 import './styles.css';
 const b = block('d3-tooltip');
 export const Tooltip = (props) => {
@@ -13,17 +12,10 @@ export const Tooltip = (props) => {
     const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;
     const top = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) || 0) + containerRect.top;
     const anchorRef = useVirtualElementRef({ rect: { top, left } });
-    const content = React.useMemo(() => {
-        var _a;
-        if (!hovered) {
-            return null;
-        }
-        const customTooltip = (_a = tooltip.renderer) === null || _a === void 0 ? void 0 : _a.call(tooltip, { hovered });
-        return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
-    }, [hovered, tooltip, xAxis, yAxis]);
     React.useEffect(() => {
         window.dispatchEvent(new CustomEvent('scroll'));
     }, [left, top]);
     return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b(), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }] },
-        React.createElement("div", { className: b('content') }, content))) : null;
+        React.createElement("div", { className: b('content') },
+            React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer })))) : null;
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { ChartData } from '../types';
+export * from './Tooltip/ChartTooltipContent';
 export type ChartRef = {
     reflow: () => void;
 };
@@ -15,4 +16,3 @@ export type ChartProps = {
     }) => void;
 };
 export declare const Chart: React.ForwardRefExoticComponent<ChartProps & React.RefAttributes<ChartRef>>;
-export {};

package/dist/esm/components/index.js

@@ -5,6 +5,7 @@ import { i18nFactory } from '../i18n';
 import { getUniqId } from '../utils';
 import { validateData } from '../validation';
 import { ChartInner } from './ChartInner';
+export * from './Tooltip/ChartTooltipContent';
 export const Chart = React.forwardRef(function Chart(props, forwardedRef) {
     const { data, lang, onResize } = props;
     const validatedData = React.useRef();

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

@@ -1,4 +1,5 @@
 export * from './defaults';
+export * from './misc';
 export declare const SeriesType: {
     readonly Area: "area";
     readonly BarX: "bar-x";

package/dist/esm/constants/index.js

@@ -1,4 +1,5 @@
 export * from './defaults';
+export * from './misc';
 export const SeriesType = {
     Area: 'area',
     BarX: 'bar-x',

package/dist/esm/constants/misc.d.ts

@@ -0,0 +1 @@
+export declare const IS_TOUCH_ENABLED: boolean;

package/dist/esm/constants/misc.js

@@ -0,0 +1,7 @@
+function isTouchEnabled() {
+    if (typeof window !== 'object') {
+        return false;
+    }
+    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+}
+export const IS_TOUCH_ENABLED = isTouchEnabled();

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

@@ -1,3 +1,5 @@
+import type { MeaningfulAny } from '../misc';
+import type { ChartTooltipRendererData } from './tooltip';
 export type ChartMargin = {
     top: number;
     right: number;
@@ -8,8 +10,9 @@ export type ChartOptions = {
     margin?: Partial<ChartMargin>;
     events?: {
         click?: (data: {
-            point: unknown;
-            series: unknown;
+            point: MeaningfulAny;
+            series: MeaningfulAny;
         }, event: PointerEvent) => void;
+        pointermove?: (data: ChartTooltipRendererData | undefined, event: PointerEvent) => void;
     };
 };

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

@@ -1,5 +1,6 @@
 import type { MeaningfulAny } from '../misc';
 import type { AreaSeries, AreaSeriesData } from './area';
+import type { ChartXAxis, ChartYAxis } from './axis';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
 import type { LineSeries, LineSeriesData } from './line';
@@ -58,10 +59,17 @@ 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> = {
+    hovered: TooltipDataChunk<T>[];
+    xAxis?: ChartXAxis;
+    yAxis?: ChartYAxis;
+};
 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;
 };

package/dist/esm/utils/d3-dispatcher.d.ts

@@ -1 +1,6 @@
+export declare const EventType: {
+    CLICK_CHART: string;
+    HOVER_SHAPE: string;
+    POINTERMOVE_CHART: string;
+};
 export declare const getD3Dispatcher: () => import("d3-dispatch").Dispatch<object>;

package/dist/esm/utils/d3-dispatcher.js

@@ -1,4 +1,9 @@
 import { dispatch } from 'd3';
+export const EventType = {
+    CLICK_CHART: 'click-chart',
+    HOVER_SHAPE: 'hover-shape',
+    POINTERMOVE_CHART: 'pointermove-chart',
+};
 export const getD3Dispatcher = () => {
-    return dispatch('hover-shape', 'click-chart');
+    return dispatch(EventType.CLICK_CHART, EventType.HOVER_SHAPE, EventType.POINTERMOVE_CHART);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",