diff --git a/package.json b/package.json index 1ea1bf1..bf83d25 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { "name": "@oslabs-beta/d3reactor", - "version": "0.0.7", + "version": "0.0.8", "description": "Open-source charting library for creating performant, responsive data visualizations in React", "main": "./dist/index.js", - "types": "./dist/src/index.d.ts", + "types": "./dist/types/src/index.d.ts", "files": [ "dist/**/*" ], diff --git a/src/App.tsx b/src/App.tsx index 6a7619e..e74be29 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -46,7 +46,7 @@ function App() { xAxisLabel="GDP per capita" yKey="Life expectancy" yGrid={true} - yAxis="left" + yAxis="right" yAxisLabel="Life Expectancy" /> { + const onMouseLeave = () => { if (setTooltip) { setTooltip ? setTooltip(false) : null; } @@ -54,7 +53,7 @@ export const Arc = React.memo( strokeWidth={strokeWidth} d={d} onMouseMove={(e) => onMouseMove(e)} - onMouseLeave={(e) => onMouseLeave(e)} + onMouseLeave={() => onMouseLeave()} /> ); } diff --git a/src/components/ListeningRect.tsx b/src/components/ListeningRect.tsx index f5caf88..022de8c 100644 --- a/src/components/ListeningRect.tsx +++ b/src/components/ListeningRect.tsx @@ -41,20 +41,21 @@ export default function ListeningRect({ }) { const anchor = useRef(null); - const [scrollPosition, setScrollPosition] = useState(0); + // const [scrollPosition, setScrollPosition] = useState(0); - const handleScroll = () => { - const position = window.pageYOffset; - setScrollPosition(position); - }; + // const handleScroll = () => { + // const position = window.pageYOffset; + // setScrollPosition(position); + // }; - useEffect(() => { - window.addEventListener('scroll', handleScroll, { passive: true }); + // useEffect(() => { + // window.addEventListener('scroll', handleScroll, { passive: true }); + + // return () => { + // window.removeEventListener('scroll', handleScroll); + // }; + // }, []); - return () => { - window.removeEventListener('scroll', handleScroll); - }; - }, []); const tooltipState: toolTipState = { cursorX: 0, cursorY: 0, @@ -123,7 +124,7 @@ export default function ListeningRect({ } tooltipState.distanceFromTop = - tooltipState.cursorY + margin.top - scrollPosition; + tooltipState.cursorY + margin.top; tooltipState.distanceFromRight = width - (margin.left + tooltipState.cursorX); tooltipState.distanceFromLeft = margin.left + tooltipState.cursorX; diff --git a/src/components/VoronoiCell.tsx b/src/components/VoronoiCell.tsx index 3b36daf..c5669e5 100644 --- a/src/components/VoronoiCell.tsx +++ b/src/components/VoronoiCell.tsx @@ -14,20 +14,20 @@ export const VoronoiCell = ({ margin, }: VoronoiProps): JSX.Element => { const { width } = useWindowDimensions(); - const [scrollPosition, setScrollPosition] = useState(0); + // const [scrollPosition, setScrollPosition] = useState(0); - const handleScroll = () => { - const position = window.pageYOffset; - setScrollPosition(position); - }; + // const handleScroll = () => { + // const position = window.pageYOffset; + // setScrollPosition(position); + // }; - useEffect(() => { - window.addEventListener('scroll', handleScroll, { passive: true }); + // useEffect(() => { + // window.addEventListener('scroll', handleScroll, { passive: true }); - return () => { - window.removeEventListener('scroll', handleScroll); - }; - }, []); + // return () => { + // window.removeEventListener('scroll', handleScroll); + // }; + // }, []); const tooltipState = { cursorX: 0, @@ -49,7 +49,7 @@ export const VoronoiCell = ({ }; tooltipState.distanceFromTop = - tooltipState.cursorY + margin.top - scrollPosition; + tooltipState.cursorY + margin.top; tooltipState.distanceFromRight = width - (margin.left + tooltipState.cursorX); tooltipState.distanceFromLeft = margin.left + tooltipState.cursorX; diff --git a/src/hooks/useWindowDimensions.tsx b/src/hooks/useWindowDimensions.tsx index a2dc8de..1f9e1aa 100644 --- a/src/hooks/useWindowDimensions.tsx +++ b/src/hooks/useWindowDimensions.tsx @@ -1,22 +1,23 @@ import { useState, useEffect } from 'react'; -function getWindowDimensions() { - const { innerWidth: width, innerHeight: height } = window; - return { - width, - height, - }; -} export default function useWindowDimensions() { const [windowDimensions, setWindowDimensions] = useState( - getWindowDimensions() + {width: 0, height: 0} ); useEffect(() => { + function getWindowDimensions() { + const { innerWidth: width, innerHeight: height } = window; + return { + width, + height, + }; + } function handleResize() { setWindowDimensions(getWindowDimensions()); } + handleResize() window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize);