fix(react-components): fixing TCs on data zoom

awslabs · Sep 11, 2023 · 379525c · 379525c
1 parent ddfc9c8
commit 379525c
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git a/packages/react-components/src/components/chart/hooks/useChartSetOptionSettings.ts b/packages/react-components/src/components/chart/hooks/useChartSetOptionSettings.ts
@@ -19,6 +19,6 @@ export const useChartSetOptionSettings = (datastreams: DataStream[]) => {
      */
     const settings = datastreamsDepsRef.current !== datastreamsDeps ? { replaceMerge: ['series'] } : undefined;
     datastreamsDepsRef.current = datastreamsDeps;
-    return settings;
+    return { ...settings, lazyUpdate: true };
   }, [datastreams]);
 };
diff --git a/packages/react-components/src/components/chart/hooks/useDataZoom.ts b/packages/react-components/src/components/chart/hooks/useDataZoom.ts
@@ -28,12 +28,9 @@ export const useDataZoom = (chartRef: MutableRefObject<EChartsType | null>, view
     const chart = chartRef.current;
     if (chart && (!isScrolling || lastUpdatedBy === 'date-picker')) {
       setIsScroling(false);
-      chart.setOption(
-        {
-          dataZoom: { ...DEFAULT_DATA_ZOOM, startValue: viewportInMs.initial, end: 100 },
-        },
-        { lazyUpdate: true }
-      );
+      chart.setOption({
+        dataZoom: { ...DEFAULT_DATA_ZOOM, startValue: viewportInMs.initial, end: 100 },
+      });
     }
   }, [chartRef, viewportInMs, isScrolling]);
 

diff --git a/packages/react-components/src/components/chart/hooks/useTrendCursorsEvents.ts b/packages/react-components/src/components/chart/hooks/useTrendCursorsEvents.ts
@@ -130,7 +130,10 @@ const useTrendCursorsEvents = ({
       // this is the ondrag handler of the trend cursor
       chartRef.current?.getZr().on('drag', (event) => {
         if (event.target.id.toString().startsWith('line')) {
+          // update user feedback
+          event.stop();
           chartRef.current?.getZr().setCursorStyle('grab');
+
           const graphicIndex = graphicRef.current.findIndex((g) => g.children[0].id === event.target.id);
           const timeInMs = calculateTimeStamp(event.offsetX ?? 0, chartRef);
           if (isInSyncModeRef.current) {

diff --git a/packages/react-components/src/components/chart/utils/handleViewport.ts b/packages/react-components/src/components/chart/utils/handleViewport.ts
@@ -21,6 +21,7 @@ export const handleViewport = ({
   series,
   chartRef,
   visualization,
+  size,
 }: handleViewportProps) => {
   const xAxisViewportInMsMinRef = useRef(viewportInMs.initial);
   const xAxisViewportInMsMaxRef = useRef(viewportInMs.end);
@@ -34,10 +35,11 @@ export const handleViewport = ({
 
       const x = calculateXFromTimestamp(g.timestampInMs, chartRef);
 
-      if (x < DEFAULT_MARGIN) {
-        // hiding the TC
+      if (x < DEFAULT_MARGIN || x > size.width - DEFAULT_MARGIN) {
+        // hiding the TC when it's beyond the viewport
         g.ignore = true;
       } else {
+        g.ignore = false;
         // update the markers because the y value may scale as the input value changes
         if (viewportInMs.isDurationViewport) {
           const { trendCursorsSeriesMakersValue, trendCursorsSeriesMakersInPixels } = calculateTrendCursorsSeriesMakers(