fix(OH2-417): Fix dashboard widgets and refactor size change handler

SteveGT96 · Dec 3, 2024 · 512dd55 · 512dd55
1 parent 4733480
commit 512dd55
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 131 deletions.
diff --git a/src/components/accessories/dashboard/admissions/admissionByAgeType/AdmissionByAgeType.tsx b/src/components/accessories/dashboard/admissions/admissionByAgeType/AdmissionByAgeType.tsx
@@ -1,5 +1,5 @@
 import { useAppDispatch } from "libraries/hooks/redux";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdmByAgeTypeData } from "../../../../../libraries/dashboardUtils/admissions/useAdmByAgeTypeData";
 import { getAdmissions } from "../../../../../state/admissions";
@@ -14,6 +14,7 @@ import { IOwnProps } from "../types";
 import { Skeleton } from "@mui/material";
 import { getAgeTypes } from "state/types/ageTypes";
 import "../../card/styles.scss";
+import { useDisplaySize } from "../../hooks";
 
 export const AdmissionsByAgeType: FC<TDashboardComponentProps & IOwnProps> = ({
   onRemove,
@@ -35,14 +36,7 @@ export const AdmissionsByAgeType: FC<TDashboardComponentProps & IOwnProps> = ({
   const { total, success, status, ageTypeStatus, data, csvData } =
     useAdmByAgeTypeData();
 
-  const [displaySize, setDisplaySize] = useState<{
-    width: number;
-    height: number;
-  }>();
-
-  const onSizeChange = (width: number, height: number) => {
-    setDisplaySize({ width: width - 1, height: height - 73 });
-  };
+  const { displaySize, onSizeChange } = useDisplaySize();
 
   const downloadOptions = (
     <DataDownloadButton
@@ -75,11 +69,7 @@ export const AdmissionsByAgeType: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Barchart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Barchart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("admission.admregistered")}
             value={total.toString()}

diff --git a/src/components/accessories/dashboard/admissions/admissionBySex/AdmissionBySex.tsx b/src/components/accessories/dashboard/admissions/admissionBySex/AdmissionBySex.tsx
@@ -69,11 +69,7 @@ export const AdmissionsBySex: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Piechart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Piechart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("admission.admregistered")}
             value={total.toString()}

diff --git a/src/components/accessories/dashboard/admissions/admissionByTypes/AdmissionByTypes.tsx b/src/components/accessories/dashboard/admissions/admissionByTypes/AdmissionByTypes.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdmByAdmTypeData } from "../../../../../libraries/dashboardUtils/admissions/useAdmByAdmTypeData";
 import { getAdmissions } from "../../../../../state/admissions";
@@ -14,6 +14,7 @@ import { IOwnProps } from "../types";
 
 import { getAdmissionTypes } from "../../../../../state/types/admissions";
 import "../../card/styles.scss";
+import { useDisplaySize } from "../../hooks";
 
 export const AdmissionsByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   onRemove,
@@ -35,14 +36,7 @@ export const AdmissionsByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   const { total, success, status, admissionTypeStatus, data, csvData } =
     useAdmByAdmTypeData();
 
-  const [displaySize, setDisplaySize] = useState<{
-    width: number;
-    height: number;
-  }>();
-
-  const onSizeChange = (width: number, height: number) => {
-    setDisplaySize({ width: width - 1, height: height - 73 });
-  };
+  const { displaySize, onSizeChange } = useDisplaySize();
 
   const downloadOptions = (
     <DataDownloadButton
@@ -75,11 +69,7 @@ export const AdmissionsByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Piechart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Piechart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("admission.admregistered")}
             value={total.toString()}

diff --git a/src/components/accessories/dashboard/admissions/admissionByWards/AdmissionByWards.tsx b/src/components/accessories/dashboard/admissions/admissionByWards/AdmissionByWards.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdmByAdmWardData } from "../../../../../libraries/dashboardUtils/admissions/useAdmByWardData";
 import { getAdmissions } from "../../../../../state/admissions";
@@ -14,6 +14,7 @@ import { DataSummary } from "../../summary/DataSummary";
 import { IOwnProps } from "../types";
 
 import "../../card/styles.scss";
+import { useDisplaySize } from "../../hooks";
 
 export const AdmissionsByWards: FC<TDashboardComponentProps & IOwnProps> = ({
   onRemove,
@@ -35,14 +36,7 @@ export const AdmissionsByWards: FC<TDashboardComponentProps & IOwnProps> = ({
   const { total, success, status, wardStatus, data, csvData } =
     useAdmByAdmWardData();
 
-  const [displaySize, setDisplaySize] = useState<{
-    width: number;
-    height: number;
-  }>();
-
-  const onSizeChange = (width: number, height: number) => {
-    setDisplaySize({ width: width - 1, height: height - 73 });
-  };
+  const { displaySize, onSizeChange } = useDisplaySize();
 
   const downloadOptions = (
     <DataDownloadButton
@@ -75,11 +69,7 @@ export const AdmissionsByWards: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Barchart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Barchart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("admission.admregistered")}
             value={total.toString()}

diff --git a/...components/accessories/dashboard/discharges/dischargesByAgeTypes/DischargesByAgeTypes.tsx b/...components/accessories/dashboard/discharges/dischargesByAgeTypes/DischargesByAgeTypes.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { getAgeTypes } from "state/types/ageTypes";
 import { useDisByAgeTypeData } from "../../../../../libraries/dashboardUtils/discharges/useDisByAgeTypeData";
@@ -14,6 +14,7 @@ import { DataSummary } from "../../summary/DataSummary";
 import { IOwnProps } from "../types";
 
 import "../../card/styles.scss";
+import { useDisplaySize } from "../../hooks";
 
 export const DischargesByAgeTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   onRemove,
@@ -35,14 +36,7 @@ export const DischargesByAgeTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   const { total, success, status, ageTypeStatus, data, csvData } =
     useDisByAgeTypeData();
 
-  const [displaySize, setDisplaySize] = useState<{
-    width: number;
-    height: number;
-  }>();
-
-  const onSizeChange = (width: number, height: number) => {
-    setDisplaySize({ width: width - 1, height: height - 73 });
-  };
+  const { displaySize, onSizeChange } = useDisplaySize();
 
   const downloadOptions = (
     <DataDownloadButton
@@ -73,11 +67,7 @@ export const DischargesByAgeTypes: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Barchart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Barchart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("admission.disregistered")}
             value={total.toString()}

diff --git a/src/components/accessories/dashboard/discharges/dischargesBySex/DischargesBySex.tsx b/src/components/accessories/dashboard/discharges/dischargesBySex/DischargesBySex.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { getDischarges } from "../../../../../state/admissions";
 import { DashboardCard } from "../../card/DashboardCard";
@@ -13,6 +13,7 @@ import { useDisBySexData } from "../../../../../libraries/dashboardUtils/dischar
 import { Piechart } from "../../../charts/pie/Piechart";
 import DataDownloadButton from "../../../dataDownloadButton/DataDownloadButton";
 import "../../card/styles.scss";
+import { useDisplaySize } from "../../hooks";
 
 export const DischargesBySex: FC<TDashboardComponentProps & IOwnProps> = ({
   onRemove,
@@ -29,14 +30,7 @@ export const DischargesBySex: FC<TDashboardComponentProps & IOwnProps> = ({
 
   const { total, success, status, data, csvData } = useDisBySexData();
 
-  const [displaySize, setDisplaySize] = useState<{
-    width: number;
-    height: number;
-  }>();
-
-  const onSizeChange = (width: number, height: number) => {
-    setDisplaySize({ width: width - 1, height: height - 73 });
-  };
+  const { displaySize, onSizeChange } = useDisplaySize();
 
   const downloadOptions = (
     <DataDownloadButton
@@ -67,11 +61,7 @@ export const DischargesBySex: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Piechart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Piechart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("admission.disregistered")}
             value={total.toString()}

diff --git a/src/components/accessories/dashboard/discharges/dischargesByTypes/DischargesByTypes.tsx b/src/components/accessories/dashboard/discharges/dischargesByTypes/DischargesByTypes.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useDisByDisTypeData } from "../../../../../libraries/dashboardUtils/discharges/useDisByDisTypeData";
 import { getDischarges } from "../../../../../state/admissions";
@@ -14,6 +14,7 @@ import { IOwnProps } from "../types";
 
 import { getDischargeTypes } from "../../../../../state/types/discharges";
 import "../../card/styles.scss";
+import { useDisplaySize } from "../../hooks";
 
 export const DischargesByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   onRemove,
@@ -35,14 +36,7 @@ export const DischargesByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   const { total, success, status, dischargeTypeStatus, data, csvData } =
     useDisByDisTypeData();
 
-  const [displaySize, setDisplaySize] = useState<{
-    width: number;
-    height: number;
-  }>();
-
-  const onSizeChange = (width: number, height: number) => {
-    setDisplaySize({ width: width - 1, height: height - 73 });
-  };
+  const { displaySize, onSizeChange } = useDisplaySize();
 
   const downloadOptions = (
     <DataDownloadButton
@@ -73,11 +67,7 @@ export const DischargesByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Piechart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Piechart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("admission.disregistered")}
             value={total.toString()}

diff --git a/src/components/accessories/dashboard/discharges/dischargesByWards/DischargesByWards.tsx b/src/components/accessories/dashboard/discharges/dischargesByWards/DischargesByWards.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useDisByWardData } from "../../../../../libraries/dashboardUtils/discharges/useDisByWardData";
 import { getDischarges } from "../../../../../state/admissions";
@@ -14,6 +14,7 @@ import { DataSummary } from "../../summary/DataSummary";
 import { IOwnProps } from "../types";
 
 import "../../card/styles.scss";
+import { useDisplaySize } from "../../hooks";
 
 export const DischargesByWards: FC<TDashboardComponentProps & IOwnProps> = ({
   onRemove,
@@ -36,14 +37,7 @@ export const DischargesByWards: FC<TDashboardComponentProps & IOwnProps> = ({
     useDisByWardData();
   const cardRef = useRef<HTMLDivElement>(null);
 
-  const [displaySize, setDisplaySize] = useState<{
-    width: number;
-    height: number;
-  }>();
-
-  const onSizeChange = (width: number, height: number) => {
-    setDisplaySize({ width: width - 1, height: height - 73 });
-  };
+  const { displaySize, onSizeChange } = useDisplaySize();
 
   const downloadOptions = (
     <DataDownloadButton
@@ -74,11 +68,7 @@ export const DischargesByWards: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Barchart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Barchart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("admission.disregistered")}
             value={total.toString()}

diff --git a/src/components/accessories/dashboard/hooks/index.ts b/src/components/accessories/dashboard/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./useDisplaySize";
diff --git a/src/components/accessories/dashboard/hooks/useDisplaySize.ts b/src/components/accessories/dashboard/hooks/useDisplaySize.ts
@@ -0,0 +1,17 @@
+import { useCallback, useState } from "react";
+
+export const useDisplaySize = () => {
+  const [displaySize, setDisplaySize] = useState<{
+    width: number;
+    height: number;
+  }>();
+
+  const onSizeChange = useCallback(
+    (width: number, height: number) => {
+      setDisplaySize({ width: width - 1, height: height - 73 });
+    },
+    [setDisplaySize]
+  );
+
+  return { displaySize, onSizeChange };
+};
diff --git a/src/components/accessories/dashboard/opds/opdByAgeTypes/OpdByAgeTypes.tsx b/src/components/accessories/dashboard/opds/opdByAgeTypes/OpdByAgeTypes.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from "@mui/material";
 import { useAppDispatch } from "libraries/hooks/redux";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useOpdByAgeTypeData } from "../../../../../libraries/dashboardUtils/opds/useOpdByAgeTypeData";
 import { searchOpds } from "../../../../../state/opds";
@@ -14,6 +14,7 @@ import { IOwnProps } from "../types";
 
 import { getAgeTypes } from "state/types/ageTypes";
 import "../../card/styles.scss";
+import { useDisplaySize } from "../../hooks";
 
 export const OpdByAgeTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   onRemove,
@@ -32,14 +33,7 @@ export const OpdByAgeTypes: FC<TDashboardComponentProps & IOwnProps> = ({
   const { status, ageTypeStatus, data, success, total, csvData } =
     useOpdByAgeTypeData();
 
-  const [displaySize, setDisplaySize] = useState<{
-    width: number;
-    height: number;
-  }>();
-
-  const onSizeChange = (width: number, height: number) => {
-    setDisplaySize({ width: width - 1, height: height - 73 });
-  };
+  const { displaySize, onSizeChange } = useDisplaySize();
 
   const downloadOptions = (
     <DataDownloadButton
@@ -71,11 +65,7 @@ export const OpdByAgeTypes: FC<TDashboardComponentProps & IOwnProps> = ({
           actions={actions}
           sizeChangeHandler={onSizeChange}
         >
-          <Barchart
-            data={data}
-            width={displaySize?.width ? `${displaySize.width}px` : "320px"}
-            height={displaySize?.height ? `${displaySize.height}px` : "320px"}
-          />
+          <Barchart data={data} width={"100%"} height={"calc(100% - 75px)"} />
           <DataSummary
             label={t("opd.opdregistered")}
             value={total.toString()}