From b5075dd46de0783f2dc6ee68ceba9da1faa1dd15 Mon Sep 17 00:00:00 2001 From: Dmitri Iershov <83976244+hi2dmitri@users.noreply.github.com> Date: Sat, 29 Jan 2022 18:09:31 +0000 Subject: [PATCH 1/2] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6121b58..1ea1bf1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@oslabs-beta/d3reactor", - "version": "0.0.6", + "version": "0.0.7", "description": "Open-source charting library for creating performant, responsive data visualizations in React", "main": "./dist/index.js", "types": "./dist/src/index.d.ts", From 7dd52dba294c3b2fa44e5f491fea905b0b653700 Mon Sep 17 00:00:00 2001 From: hi2dmitri Date: Sat, 29 Jan 2022 20:45:25 +0000 Subject: [PATCH 2/2] disabled scroll events and moved window accessors to useEffect --- package.json | 2 +- src/App.tsx | 2 +- src/components/Arc.tsx | 5 ++--- src/components/ListeningRect.tsx | 25 +++++++++++++------------ src/components/VoronoiCell.tsx | 24 ++++++++++++------------ src/hooks/useWindowDimensions.tsx | 17 +++++++++-------- 6 files changed, 38 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 6121b58..881b870 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@oslabs-beta/d3reactor", - "version": "0.0.6", + "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", 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);