feat: add tooltip throttle option (#52)

Author: kuzmadom

src/components/ChartInner/index.tsx

@@ -62,6 +62,7 @@ export const ChartInner = (props: ChartInnerProps) => {
             unpinTooltip,
             xAxis,
             yAxis,
+            tooltipThrottle: tooltip.throttle,
         });
     const clickHandler = data.chart?.events?.click;
     const pointerMoveHandler = data.chart?.events?.pointermove;

src/components/ChartInner/useChartInnerHandlers.ts

@@ -12,8 +12,6 @@ import {getClosestPoints} from '../../utils/chart/get-closest-data';
 
 import type {useChartInnerState} from './useChartInnerState';
 
-const THROTTLE_DELAY = 50;
-
 type ChartInnerState = ReturnType<typeof useChartInnerState>;
 
 type Props = {
@@ -29,6 +27,7 @@ type Props = {
     unpinTooltip: ChartInnerState['unpinTooltip'];
     xAxis: PreparedAxis;
     yAxis: PreparedAxis[];
+    tooltipThrottle: number;
 };
 
 export function useChartInnerHandlers(props: Props) {
@@ -45,6 +44,7 @@ export function useChartInnerHandlers(props: Props) {
         unpinTooltip,
         xAxis,
         yAxis,
+        tooltipThrottle,
     } = props;
 
     const isOutsideBounds = React.useCallback(
@@ -96,7 +96,7 @@ export function useChartInnerHandlers(props: Props) {
 
     const throttledHandleMouseMove = IS_TOUCH_ENABLED
         ? undefined
-        : throttle(handleMouseMove, THROTTLE_DELAY);
+        : throttle(handleMouseMove, tooltipThrottle);
 
     const handleMouseLeave: React.MouseEventHandler<SVGSVGElement> = (event) => {
         if (tooltipPinned) {
@@ -115,7 +115,7 @@ export function useChartInnerHandlers(props: Props) {
     };
 
     const throttledHandleTouchMove = IS_TOUCH_ENABLED
-        ? throttle(handleTouchMove, THROTTLE_DELAY)
+        ? throttle(handleTouchMove, tooltipThrottle)
         : undefined;
 
     const handleChartClick = (event: React.MouseEvent<SVGSVGElement>) => {

src/hooks/useChartOptions/tooltip.ts

@@ -10,5 +10,6 @@ export const getPreparedTooltip = (args: {tooltip: ChartData['tooltip']}): Prepa
     return {
         ...tooltip,
         enabled: get(tooltip, 'enabled', true),
+        throttle: tooltip?.throttle ?? 0,
     };
 };

src/hooks/useChartOptions/types.ts

@@ -65,6 +65,7 @@ export type PreparedTitle = ChartData['title'] & {
 
 export type PreparedTooltip = ChartData['tooltip'] & {
     enabled: boolean;
+    throttle: number;
 };
 
 export type ChartOptions = {

src/types/chart/tooltip.ts

@@ -99,4 +99,6 @@ export interface ChartTooltip<T = MeaningfulAny> {
         enabled?: boolean;
         modifierKey?: 'altKey' | 'metaKey';
     };
+    /** Show tooltip at most once per every ```throttle``` milliseconds */
+    throttle?: number;
 }