Removed dependancy on the window object form the Arc.

Author: Robert Crocker

src/App.tsx

@@ -19,9 +19,8 @@ function App() {
         data={fruit}
         label="label"
         value="value"
-        legend="top-right"
+        legend="top-left"
         outerRadius={240}
-        legendLabel="fruit"
         pieLabel={true}
       />
       <BarChart

src/charts/PieChart/PieChart.tsx

@@ -268,6 +268,8 @@ export default function PieChart({
                   d={arcGenerator(d)}
                   id={`arc- + ${i}`}
                   setTooltip={setTooltip}
+                  margin={margin}
+                  cWidth={cWidth}
                 />
                 {pieLabel && (
                   <PieLabel

src/components/Arc.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { ArcProps } from '../../types';
-import useWindowDimensions from '../hooks/useWindowDimensions';
 
 export const Arc = React.memo(
   ({
@@ -12,8 +11,9 @@ export const Arc = React.memo(
     strokeWidth = '1px',
     d,
     setTooltip,
+    margin,
+    cWidth,
   }: ArcProps): JSX.Element => {
-    const { width } = useWindowDimensions();
 
     let tooltipState = {
       cursorX: 0,
@@ -29,7 +29,7 @@ export const Arc = React.memo(
           cursorX: e.pageX,
           cursorY: e.pageY,
           distanceFromTop: e.clientY,
-          distanceFromRight: width - e.pageX,
+          distanceFromRight: (margin.left + cWidth + margin.right) - cWidth,
           distanceFromLeft: e.pageX,
           data,
         };

types.ts

@@ -345,6 +345,8 @@ export interface ArcProps {
   id?: string | number;
   cellCenter?: { cx: number; cy: number; tooltipData: Data };
   setTooltip?: React.Dispatch<any>;
+  margin: Margin;
+  cWidth: number;
 }
 
 // eslint-disable-next-line import/export