Skip to content

Commit c244480

Browse files
SteveGT96SteveGT96
SteveGT96
and
SteveGT96
authored
OH2-417 | Fix dashboard widgets and refactor size change handler (#708)
* fix(OH2-417): Fix dashboard widgets and refactor size change handler * styles: Fix pie chart form * styles: Fix pie chart form * styles: Update pie chart styles * styles: Update pie chart component * styles: Update pie chart styles * fix: Fix pie chart --------- Co-authored-by: SteveGT96 <steve.tsala@intesys.it>
1 parent 3f172ec commit c244480

File tree

15 files changed

+83
-142
lines changed

15 files changed

+83
-142
lines changed

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,5 +149,8 @@
149149
},
150150
"_moduleAliases": {
151151
"@": "./dist"
152+
},
153+
"volta": {
154+
"node": "18.20.5"
152155
}
153156
}

‎src/components/accessories/charts/pie/styles.scss‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
@import "../../../../styles/variables";
2-
@import "../../../../../node_modules/susy/sass/susy";
3-
4-
// .pie {
5-
// max-width: 300px;
6-
// max-height: 300px;
7-
// }
1+
@import "../../../../styles/variables";
2+
@import "../../../../../node_modules/susy/sass/susy";
3+
4+
// .pie {
5+
// max-width: 300px;
6+
// max-height: 300px;
7+
// }
8+
9+
canvas {
10+
height: unset !important;
11+
width: unset !important;
12+
}

‎src/components/accessories/dashboard/admissions/admissionByAgeType/AdmissionByAgeType.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useAppDispatch } from "libraries/hooks/redux";
2-
import React, { FC, useEffect, useRef, useState } from "react";
2+
import React, { FC, useEffect, useRef } from "react";
33
import { useTranslation } from "react-i18next";
44
import { useAdmByAgeTypeData } from "../../../../../libraries/dashboardUtils/admissions/useAdmByAgeTypeData";
55
import { getAdmissions } from "../../../../../state/admissions";
@@ -14,6 +14,7 @@ import { IOwnProps } from "../types";
1414
import { Skeleton } from "@mui/material";
1515
import { getAgeTypes } from "state/types/ageTypes";
1616
import "../../card/styles.scss";
17+
import { useDisplaySize } from "../../hooks";
1718

1819
export const AdmissionsByAgeType: FC<TDashboardComponentProps & IOwnProps> = ({
1920
onRemove,
@@ -35,14 +36,7 @@ export const AdmissionsByAgeType: FC<TDashboardComponentProps & IOwnProps> = ({
3536
const { total, success, status, ageTypeStatus, data, csvData } =
3637
useAdmByAgeTypeData();
3738

38-
const [displaySize, setDisplaySize] = useState<{
39-
width: number;
40-
height: number;
41-
}>();
42-
43-
const onSizeChange = (width: number, height: number) => {
44-
setDisplaySize({ width: width - 1, height: height - 73 });
45-
};
39+
const { displaySize, onSizeChange } = useDisplaySize();
4640

4741
const downloadOptions = (
4842
<DataDownloadButton
@@ -75,11 +69,7 @@ export const AdmissionsByAgeType: FC<TDashboardComponentProps & IOwnProps> = ({
7569
actions={actions}
7670
sizeChangeHandler={onSizeChange}
7771
>
78-
<Barchart
79-
data={data}
80-
width={displaySize?.width ? `${displaySize.width}px` : "320px"}
81-
height={displaySize?.height ? `${displaySize.height}px` : "320px"}
82-
/>
72+
<Barchart data={data} width={"100%"} height={"calc(100% - 75px)"} />
8373
<DataSummary
8474
label={t("admission.admregistered")}
8575
value={total.toString()}

‎src/components/accessories/dashboard/admissions/admissionBySex/AdmissionBySex.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,7 @@ export const AdmissionsBySex: FC<TDashboardComponentProps & IOwnProps> = ({
6969
actions={actions}
7070
sizeChangeHandler={onSizeChange}
7171
>
72-
<Piechart
73-
data={data}
74-
width={displaySize?.width ? `${displaySize.width}px` : "320px"}
75-
height={displaySize?.height ? `${displaySize.height}px` : "320px"}
76-
/>
72+
<Piechart data={data} width={"100%"} height={"calc(100% - 75px)"} />
7773
<DataSummary
7874
label={t("admission.admregistered")}
7975
value={total.toString()}

‎src/components/accessories/dashboard/admissions/admissionByTypes/AdmissionByTypes.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Skeleton } from "@mui/material";
22
import { useAppDispatch } from "libraries/hooks/redux";
3-
import React, { FC, useEffect, useRef, useState } from "react";
3+
import React, { FC, useEffect, useRef } from "react";
44
import { useTranslation } from "react-i18next";
55
import { useAdmByAdmTypeData } from "../../../../../libraries/dashboardUtils/admissions/useAdmByAdmTypeData";
66
import { getAdmissions } from "../../../../../state/admissions";
@@ -14,6 +14,7 @@ import { IOwnProps } from "../types";
1414

1515
import { getAdmissionTypes } from "../../../../../state/types/admissions";
1616
import "../../card/styles.scss";
17+
import { useDisplaySize } from "../../hooks";
1718

1819
export const AdmissionsByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
1920
onRemove,
@@ -35,14 +36,7 @@ export const AdmissionsByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
3536
const { total, success, status, admissionTypeStatus, data, csvData } =
3637
useAdmByAdmTypeData();
3738

38-
const [displaySize, setDisplaySize] = useState<{
39-
width: number;
40-
height: number;
41-
}>();
42-
43-
const onSizeChange = (width: number, height: number) => {
44-
setDisplaySize({ width: width - 1, height: height - 73 });
45-
};
39+
const { displaySize, onSizeChange } = useDisplaySize();
4640

4741
const downloadOptions = (
4842
<DataDownloadButton
@@ -75,11 +69,7 @@ export const AdmissionsByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
7569
actions={actions}
7670
sizeChangeHandler={onSizeChange}
7771
>
78-
<Piechart
79-
data={data}
80-
width={displaySize?.width ? `${displaySize.width}px` : "320px"}
81-
height={displaySize?.height ? `${displaySize.height}px` : "320px"}
82-
/>
72+
<Piechart data={data} width={"100%"} height={"calc(100% - 75px)"} />
8373
<DataSummary
8474
label={t("admission.admregistered")}
8575
value={total.toString()}

‎src/components/accessories/dashboard/admissions/admissionByWards/AdmissionByWards.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Skeleton } from "@mui/material";
22
import { useAppDispatch } from "libraries/hooks/redux";
3-
import React, { FC, useEffect, useRef, useState } from "react";
3+
import React, { FC, useEffect, useRef } from "react";
44
import { useTranslation } from "react-i18next";
55
import { useAdmByAdmWardData } from "../../../../../libraries/dashboardUtils/admissions/useAdmByWardData";
66
import { getAdmissions } from "../../../../../state/admissions";
@@ -14,6 +14,7 @@ import { DataSummary } from "../../summary/DataSummary";
1414
import { IOwnProps } from "../types";
1515

1616
import "../../card/styles.scss";
17+
import { useDisplaySize } from "../../hooks";
1718

1819
export const AdmissionsByWards: FC<TDashboardComponentProps & IOwnProps> = ({
1920
onRemove,
@@ -35,14 +36,7 @@ export const AdmissionsByWards: FC<TDashboardComponentProps & IOwnProps> = ({
3536
const { total, success, status, wardStatus, data, csvData } =
3637
useAdmByAdmWardData();
3738

38-
const [displaySize, setDisplaySize] = useState<{
39-
width: number;
40-
height: number;
41-
}>();
42-
43-
const onSizeChange = (width: number, height: number) => {
44-
setDisplaySize({ width: width - 1, height: height - 73 });
45-
};
39+
const { displaySize, onSizeChange } = useDisplaySize();
4640

4741
const downloadOptions = (
4842
<DataDownloadButton
@@ -75,11 +69,7 @@ export const AdmissionsByWards: FC<TDashboardComponentProps & IOwnProps> = ({
7569
actions={actions}
7670
sizeChangeHandler={onSizeChange}
7771
>
78-
<Barchart
79-
data={data}
80-
width={displaySize?.width ? `${displaySize.width}px` : "320px"}
81-
height={displaySize?.height ? `${displaySize.height}px` : "320px"}
82-
/>
72+
<Barchart data={data} width={"100%"} height={"calc(100% - 75px)"} />
8373
<DataSummary
8474
label={t("admission.admregistered")}
8575
value={total.toString()}

‎src/components/accessories/dashboard/card/styles.scss‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,26 @@
22
.MuiListItemIcon-root {
33
min-width: 30px !important;
44
}
5-
5+
66
display: flex;
77
align-items: center;
88
text-decoration: none;
99
}
1010

11-
.DashboardCard-item{
11+
.DashboardCard-item {
1212
display: flex;
1313
flex-direction: column;
1414
max-height: 100%;
1515

16+
.MuiCardContent-root {
17+
display: flex;
18+
flex-direction: column;
19+
justify-content: end;
20+
canvas {
21+
justify-self: center;
22+
}
23+
}
24+
1625
.DashboardCard-item-header {
1726
padding: 1px 16px 8px 16px;
1827
align-items: center;
@@ -24,12 +33,12 @@
2433
flex: 1 1 auto;
2534
max-height: calc(100% - 40px);
2635
}
27-
36+
2837
.MuiCardHeader-action {
2938
margin-top: 0;
3039

3140
.MuiIconButton-root {
3241
padding: 5px !important;
3342
}
3443
}
35-
}
44+
}

‎src/components/accessories/dashboard/discharges/dischargesByAgeTypes/DischargesByAgeTypes.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Skeleton } from "@mui/material";
22
import { useAppDispatch } from "libraries/hooks/redux";
3-
import React, { FC, useEffect, useRef, useState } from "react";
3+
import React, { FC, useEffect, useRef } from "react";
44
import { useTranslation } from "react-i18next";
55
import { getAgeTypes } from "state/types/ageTypes";
66
import { useDisByAgeTypeData } from "../../../../../libraries/dashboardUtils/discharges/useDisByAgeTypeData";
@@ -14,6 +14,7 @@ import { DataSummary } from "../../summary/DataSummary";
1414
import { IOwnProps } from "../types";
1515

1616
import "../../card/styles.scss";
17+
import { useDisplaySize } from "../../hooks";
1718

1819
export const DischargesByAgeTypes: FC<TDashboardComponentProps & IOwnProps> = ({
1920
onRemove,
@@ -35,14 +36,7 @@ export const DischargesByAgeTypes: FC<TDashboardComponentProps & IOwnProps> = ({
3536
const { total, success, status, ageTypeStatus, data, csvData } =
3637
useDisByAgeTypeData();
3738

38-
const [displaySize, setDisplaySize] = useState<{
39-
width: number;
40-
height: number;
41-
}>();
42-
43-
const onSizeChange = (width: number, height: number) => {
44-
setDisplaySize({ width: width - 1, height: height - 73 });
45-
};
39+
const { displaySize, onSizeChange } = useDisplaySize();
4640

4741
const downloadOptions = (
4842
<DataDownloadButton
@@ -73,11 +67,7 @@ export const DischargesByAgeTypes: FC<TDashboardComponentProps & IOwnProps> = ({
7367
actions={actions}
7468
sizeChangeHandler={onSizeChange}
7569
>
76-
<Barchart
77-
data={data}
78-
width={displaySize?.width ? `${displaySize.width}px` : "320px"}
79-
height={displaySize?.height ? `${displaySize.height}px` : "320px"}
80-
/>
70+
<Barchart data={data} width={"100%"} height={"calc(100% - 75px)"} />
8171
<DataSummary
8272
label={t("admission.disregistered")}
8373
value={total.toString()}

‎src/components/accessories/dashboard/discharges/dischargesBySex/DischargesBySex.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Skeleton } from "@mui/material";
22
import { useAppDispatch } from "libraries/hooks/redux";
3-
import React, { FC, useEffect, useRef, useState } from "react";
3+
import React, { FC, useEffect, useRef } from "react";
44
import { useTranslation } from "react-i18next";
55
import { getDischarges } from "../../../../../state/admissions";
66
import { DashboardCard } from "../../card/DashboardCard";
@@ -13,6 +13,7 @@ import { useDisBySexData } from "../../../../../libraries/dashboardUtils/dischar
1313
import { Piechart } from "../../../charts/pie/Piechart";
1414
import DataDownloadButton from "../../../dataDownloadButton/DataDownloadButton";
1515
import "../../card/styles.scss";
16+
import { useDisplaySize } from "../../hooks";
1617

1718
export const DischargesBySex: FC<TDashboardComponentProps & IOwnProps> = ({
1819
onRemove,
@@ -29,14 +30,7 @@ export const DischargesBySex: FC<TDashboardComponentProps & IOwnProps> = ({
2930

3031
const { total, success, status, data, csvData } = useDisBySexData();
3132

32-
const [displaySize, setDisplaySize] = useState<{
33-
width: number;
34-
height: number;
35-
}>();
36-
37-
const onSizeChange = (width: number, height: number) => {
38-
setDisplaySize({ width: width - 1, height: height - 73 });
39-
};
33+
const { displaySize, onSizeChange } = useDisplaySize();
4034

4135
const downloadOptions = (
4236
<DataDownloadButton
@@ -67,11 +61,7 @@ export const DischargesBySex: FC<TDashboardComponentProps & IOwnProps> = ({
6761
actions={actions}
6862
sizeChangeHandler={onSizeChange}
6963
>
70-
<Piechart
71-
data={data}
72-
width={displaySize?.width ? `${displaySize.width}px` : "320px"}
73-
height={displaySize?.height ? `${displaySize.height}px` : "320px"}
74-
/>
64+
<Piechart data={data} width={"100%"} height={"calc(100% - 75px)"} />
7565
<DataSummary
7666
label={t("admission.disregistered")}
7767
value={total.toString()}

‎src/components/accessories/dashboard/discharges/dischargesByTypes/DischargesByTypes.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Skeleton } from "@mui/material";
22
import { useAppDispatch } from "libraries/hooks/redux";
3-
import React, { FC, useEffect, useRef, useState } from "react";
3+
import React, { FC, useEffect, useRef } from "react";
44
import { useTranslation } from "react-i18next";
55
import { useDisByDisTypeData } from "../../../../../libraries/dashboardUtils/discharges/useDisByDisTypeData";
66
import { getDischarges } from "../../../../../state/admissions";
@@ -14,6 +14,7 @@ import { IOwnProps } from "../types";
1414

1515
import { getDischargeTypes } from "../../../../../state/types/discharges";
1616
import "../../card/styles.scss";
17+
import { useDisplaySize } from "../../hooks";
1718

1819
export const DischargesByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
1920
onRemove,
@@ -35,14 +36,7 @@ export const DischargesByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
3536
const { total, success, status, dischargeTypeStatus, data, csvData } =
3637
useDisByDisTypeData();
3738

38-
const [displaySize, setDisplaySize] = useState<{
39-
width: number;
40-
height: number;
41-
}>();
42-
43-
const onSizeChange = (width: number, height: number) => {
44-
setDisplaySize({ width: width - 1, height: height - 73 });
45-
};
39+
const { displaySize, onSizeChange } = useDisplaySize();
4640

4741
const downloadOptions = (
4842
<DataDownloadButton
@@ -73,11 +67,7 @@ export const DischargesByTypes: FC<TDashboardComponentProps & IOwnProps> = ({
7367
actions={actions}
7468
sizeChangeHandler={onSizeChange}
7569
>
76-
<Piechart
77-
data={data}
78-
width={displaySize?.width ? `${displaySize.width}px` : "320px"}
79-
height={displaySize?.height ? `${displaySize.height}px` : "320px"}
80-
/>
70+
<Piechart data={data} width={"100%"} height={"calc(100% - 75px)"} />
8171
<DataSummary
8272
label={t("admission.disregistered")}
8373
value={total.toString()}

0 commit comments

Comments
 (0)