Refactored the bar, scatter, and line to position the cursor based on the bounds of the chart rather than the window.

Author: Robert Crocker

src/charts/BarChart/BarChart.tsx

@@ -301,6 +301,7 @@ export default function BarChart({
                               : 0
                           }
                           margin={margin}
+                          cWidth={cWidth}
                           fill={colorScale(layer.key[i])}
                           setTooltip={setTooltip}
                         />
@@ -330,6 +331,7 @@ export default function BarChart({
                       margin={margin}
                       fill={colorScale(yKey)}
                       setTooltip={setTooltip}
+                      cWidth={cWidth}
                     />
                   );
                 })}

src/charts/LineChart/LineChart.tsx

@@ -302,6 +302,7 @@ export default function LineChart({
                 yAccessor={yAccessor}
                 setTooltip={setTooltip}
                 margin={margin}
+                cWidth={cWidth}
               />
             )}
 

src/charts/ScatterPlot/ScatterPlot.tsx

@@ -286,6 +286,7 @@ export default function ScatterPlot({
                 yAccessor={yAccessor}
                 setTooltip={setTooltip}
                 margin={margin}
+                cWidth={cWidth}
               />
             )}
 

src/components/Rectangle.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 import React from 'react';
 import { RectangleProps } from '../../types';
-import useWindowDimensions from '../hooks/useWindowDimensions';
 
 import styled from 'styled-components';
 const Bar = styled.rect`
@@ -16,10 +15,11 @@ const RectangleComp = ({
   width,
   height,
   margin,
+  cWidth,
   fill,
   setTooltip,
 }: RectangleProps): JSX.Element => {
-  const clientWidth = useWindowDimensions().width;
+
   let tooltipState = {
     cursorX: 0,
     cursorY: 0,
@@ -45,7 +45,7 @@ const RectangleComp = ({
         cursorY: e.pageY - e.nativeEvent.offsetY + (y ?? 0),
         distanceFromTop: offsetFromTop + margin.top + rectTop,
         distanceFromRight:
-          clientWidth - (offsetFromLeft + margin.left + rectMidPoint),
+          (margin.left + cWidth + margin.right) - (offsetFromLeft + margin.left + rectMidPoint),
         distanceFromLeft: offsetFromLeft + margin.left + rectMidPoint,
         data,
       };

src/components/VoronoiCell.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 import React from 'react';
 import { VoronoiProps } from '../../types';
-import useWindowDimensions from '../hooks/useWindowDimensions';
 
 export const VoronoiCell = ({
   fill,
@@ -12,8 +11,8 @@ export const VoronoiCell = ({
   setTooltip,
   data,
   margin,
+  cWidth,
 }: VoronoiProps): JSX.Element => {
-  const { width } = useWindowDimensions();
 
   // The code below was commented out because of the performance issues we ran
   // into when charts are taking in large data sets
@@ -54,7 +53,7 @@ export const VoronoiCell = ({
 
     tooltipState.distanceFromTop = cellCenter.cy + margin.top;
     tooltipState.distanceFromRight =
-      width - (margin.left + tooltipState.cursorX);
+      (margin.left + cWidth + margin.right) - (margin.left + tooltipState.cursorX);
     tooltipState.distanceFromLeft = margin.left + tooltipState.cursorX;
 
     setTooltip ? setTooltip(tooltipState) : null;

src/components/VoronoiWrapper.tsx

@@ -12,6 +12,7 @@ export const VoronoiWrapper = React.memo(
     yAccessor,
     setTooltip,
     margin,
+    cWidth
   }: VoronoiBody): JSX.Element => {
     return (
       <g className="voronoi-wrapper">
@@ -28,6 +29,7 @@ export const VoronoiWrapper = React.memo(
               tooltipData: element,
             }}
             margin={margin}
+            cWidth={cWidth}
             setTooltip={setTooltip}
             data={element}
           />

types.ts

@@ -321,6 +321,7 @@ export interface RectangleProps {
   width: number;
   height: number;
   margin: Margin;
+  cWidth: number;
   fill: string;
   setTooltip?: React.Dispatch<any>;
 }
@@ -356,6 +357,7 @@ export interface VoronoiProps {
   data?: any;
   setTooltip?: React.Dispatch<any>;
   margin: Margin;
+  cWidth: number;
 }
 
 export type ColorScale = d3.ScaleOrdinal<string, string, never>;
@@ -418,5 +420,6 @@ export interface VoronoiBody {
   yAccessor: yAccessorFunc;
   setTooltip: React.Dispatch<any> | undefined;
   margin: Margin;
+  cWidth: number;
 }
 export type GroupAccessorFunc = (d: any) => number | Date;