fix: Update dot layout on dimension change

KeyValueSoftwareSystems · Dec 7, 2023 · 55c7655 · 55c7655
1 parent 6c0f8e3
commit 55c7655
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/src/lib/dot-matrix/Chart.tsx b/src/lib/dot-matrix/Chart.tsx
@@ -25,7 +25,7 @@ const Chart = (props: ChartProps): JSX.Element => {
 
   const dotWidth = useMemo(
     () => (width ? width / columns - spaceBetweenDots : DEFAULT_DOT_WIDTH),
-    [width]
+    [width, columns, spaceBetweenDots]
   );
 
   return (

diff --git a/src/lib/dot-matrix/DotMatrix.tsx b/src/lib/dot-matrix/DotMatrix.tsx
@@ -30,7 +30,10 @@ const DotMatrix = (props: DotMatrixPropType): JSX.Element => {
 
   const width = useChartContainerWidth("dots-container", [
     showLegend,
-    legendPosition
+    legendPosition,
+    dimensions.rows,
+    dimensions.columns,
+    spaceBetweenDots
   ]);
 
   const [dotsToBeMapped, totalDots, fractionalDots] = useDotMatrix(

diff --git a/src/lib/dot-matrix/custom-hooks/useChartContainerWidth.ts b/src/lib/dot-matrix/custom-hooks/useChartContainerWidth.ts
@@ -5,14 +5,10 @@ import { findContainerWidth } from "../utils/utils";
 
 const useChartContainerWidth = (
   id: string,
-  dependencyArray: Array<boolean | string>
+  dependencyArray: Array<boolean | string | number | undefined>
 ): number => {
   const [width, setWidth] = useState<number>(DEFAULT_DOT_CONTAINER_WIDTH);
 
-  useEffect(() => {
-    updateContainerWidth();
-  }, []);
-
   useEffect(() => {
     updateContainerWidth();
   }, [...dependencyArray]);