rusefi
/
hyper-tuner-cloud
mirror of https://github.com/rusefi/hyper-tuner-cloud.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Calculate canvas width on resize

This commit is contained in:
Piotr Rogowski 2021-12-29 23:42:29 +01:00
parent 45924c8d04
commit 4c19e143ea
No known key found for this signature in database
GPG Key ID: 4A842D702D9C6F8F
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Dialog/Curve.tsx
View File

@ -3,6 +3,7 @@ import {
Grid,
} from 'antd';
import {
useCallback,
useEffect,
useRef,
useState,
@ -38,11 +39,14 @@ const Curve = ({
const { sm } = useBreakpoint();
const [options, setOptions] = useState<uPlot.Options>();
const [plotData, setPlotData] = useState<uPlot.AlignedData>();
const [canvasWidth, setCanvasWidth] = useState(0);
const calculateWidth = useCallback(() => setCanvasWidth(containerRef.current?.clientWidth || 0), []);
useEffect(() => {
setPlotData([xData, yData]);
setOptions({
width: containerRef.current?.clientWidth || 0,
width: canvasWidth,
height: 350,
scales: {
x: { time: false },
@ -76,7 +80,12 @@ const Curve = ({
points: { size: 9 },
},
});
}, [xData, xLabel, xUnits, yData, yLabel, yUnits, sm]);
calculateWidth();
window.addEventListener('resize', calculateWidth);
return () => window.removeEventListener('resize', calculateWidth);
}, [xData, xLabel, xUnits, yData, yLabel, yUnits, sm, canvasWidth, calculateWidth]);
if (!sm) {
return <LandscapeNotice />;