Merge pull request #293 from adobe/widthHeightIntegers

Width height integers

src/hooks/useChartHeight.tsx

@@ -17,14 +17,16 @@ export default function useChartHeight(containerHeight: number, maxHeight: numbe
 	return useMemo(() => {
 		let targetHeight = minHeight;
 		if (typeof height === 'number') {
-			targetHeight = height;
+			// integers only, decimal values can cause performance issues with vega.
+			return Math.round(height);
 		} else if (/^\d+%$/.exec(height)) {
 			targetHeight = (containerHeight * Number(height.slice(0, -1))) / 100;
 		} else {
 			console.error(
 				`height of ${height} is not a valid height. Please provide a valid number or percentage ex. 75%`
 			);
 		}
-		return targetHeight === 0 ? 0 : Math.min(maxHeight, Math.max(minHeight, targetHeight));
+		// integers only, decimal values can cause performance issues with vega.
+		return targetHeight === 0 ? 0 : Math.round(Math.min(maxHeight, Math.max(minHeight, targetHeight)));
 	}, [containerHeight, maxHeight, minHeight, height]);
 }

src/hooks/useChartWidth.tsx

@@ -20,7 +20,8 @@ export default function useChartWidth(
 	return useMemo(() => {
 		let targetWidth = minWidth;
 		if (typeof width === 'number') {
-			targetWidth = width;
+			// integers only, decimal values can cause performance issues with vega.
+			return Math.round(width);
 		} else if (width === 'auto') {
 			targetWidth = containerWidth;
 		} else if (width.match(/^\d+%$/)) {
@@ -30,6 +31,7 @@ export default function useChartWidth(
 				`width of ${width} is not a valid width. Please provide a valid number, 'auto' or percentage ex. 75%`
 			);
 		}
-		return targetWidth === 0 ? 0 : Math.min(maxWidth, Math.max(minWidth, targetWidth));
+		// integers only, decimal values can cause performance issues with vega.
+		return targetWidth === 0 ? 0 : Math.round(Math.min(maxWidth, Math.max(minWidth, targetWidth)));
 	}, [containerWidth, maxWidth, minWidth, width]);
 }