fix: slow throttle interval making chart feel laggy (#921)

* fix: slow throttle interval making chart feel laggy

* feat: make throttle ms a prop

src/feature/candlestick-chart/candlestick-chart.tsx

@@ -72,6 +72,7 @@ export type CandlestickChartProps = {
   interval: Interval;
   options?: Options;
   theme?: ThemeVariant;
+  drawThrottleMs?: number;
   onOptionsChanged?: (options: Options) => void;
   onPaneChanged?: (size: number[]) => void;
   onViewportChanged?: (viewport: Viewport) => void;
@@ -93,6 +94,7 @@ export const CandlestickChart = forwardRef(
       },
       initialViewport,
       theme = "dark",
+      drawThrottleMs = 16.67,
       onOptionsChanged = noop,
       onPaneChanged = noop,
       onViewportChanged = noop,
@@ -370,6 +372,7 @@ export const CandlestickChart = forwardRef(
             colors={colors}
             studySize={studySize}
             studySizes={studySizes}
+            drawThrottleMs={drawThrottleMs}
             onViewportChanged={handleViewportChanged}
             onGetDataRange={handleGetDataRange}
             onClosePane={handleClosePane}

src/ui/components/plot-container/plot-container.tsx

@@ -2,7 +2,6 @@ import "./plot-container.css";
 import "../../../lib/d3fc-element";
 
 import { Core } from "@ui/core";
-import { THROTTLE_INTERVAL } from "@util/constants";
 import { asyncSnapshot, calculatePreferredSize } from "@util/misc";
 import {
   Bounds,
@@ -45,6 +44,7 @@ export type PlotContainerProps = {
   colors: Colors;
   studySize: number | string;
   studySizes: Array<number | string>;
+  drawThrottleMs: number;
   onBoundsChanged?: (bounds: Bounds) => void;
   onViewportChanged?: (viewport: Viewport) => void;
   onRightClick?: (event: any) => void;
@@ -72,6 +72,7 @@ export const PlotContainer = forwardRef<
       colors,
       studySize,
       studySizes,
+      drawThrottleMs,
       onViewportChanged = () => {},
       onBoundsChanged = () => {},
       onRightClick = () => {},
@@ -117,7 +118,7 @@ export const PlotContainer = forwardRef<
     }, []);
 
     const throttleRequestRedraw = useMemo(
-      () => throttle(requestRedraw, THROTTLE_INTERVAL),
+      () => throttle(requestRedraw, drawThrottleMs),
       [requestRedraw],
     );
 
@@ -130,17 +131,17 @@ export const PlotContainer = forwardRef<
     );
 
     const handleThrottledBoundsChanged = useMemo(
-      () => throttle(handleBoundsChanged, THROTTLE_INTERVAL),
+      () => throttle(handleBoundsChanged, drawThrottleMs),
       [handleBoundsChanged],
     );
 
     const handleDataIndexChanged = useMemo(
-      () => throttle(setDataIndex, THROTTLE_INTERVAL),
+      () => throttle(setDataIndex, drawThrottleMs),
       [],
     );
 
     const handleViewportChanged = useMemo(
-      () => throttle(onViewportChanged, THROTTLE_INTERVAL),
+      () => throttle(onViewportChanged, drawThrottleMs),
       [onViewportChanged],
     );
 

src/util/constants/constants.ts

@@ -14,7 +14,6 @@ export const AXIS_HEIGHT = FONT_SIZE + 5;
 export const AXIS_WIDTH = FONT_SIZE + 60;
 
 export const Y_AXIS_WIDTH = 92;
-export const THROTTLE_INTERVAL = 150;
 export const INITIAL_NUM_CANDLES_TO_DISPLAY = 100;
 export const INITIAL_NUM_CANDLES_TO_FETCH = 10000;
 export const DEFAULT_INTERVAL_WIDTH = 10;