From cd7dae503e89a7641e475ee40036139535a6bab5 Mon Sep 17 00:00:00 2001 From: "UseDaphne@23" Date: Thu, 1 Aug 2024 01:17:18 +0300 Subject: [PATCH 1/3] Adding Maximizing funtionality --- package.json | 1 + .../data-visualizer.component.tsx | 965 +- src/data-visualizer/data-visualizer.scss | 283 +- yarn.lock | 11748 ++++++++-------- 4 files changed, 6769 insertions(+), 6228 deletions(-) diff --git a/package.json b/package.json index 08764ca..56e69dd 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "dependencies": { "@carbon/react": "^1.36.0", "lodash-es": "^4.17.21", + "react-full-screen": "^1.1.1", "react-grid-layout": "^1.4.1" }, "peerDependencies": { diff --git a/src/data-visualizer/data-visualizer.component.tsx b/src/data-visualizer/data-visualizer.component.tsx index b0ff274..3656f1e 100644 --- a/src/data-visualizer/data-visualizer.component.tsx +++ b/src/data-visualizer/data-visualizer.component.tsx @@ -14,10 +14,10 @@ import { SendAlt, DocumentDownload, Save, + Maximize, + Minimize, } from "@carbon/react/icons"; import { - Accordion, - AccordionItem, Button, ComboBox, ContentSwitcher, @@ -27,6 +27,7 @@ import { Form, FormGroup, FormLabel, + IconButton, Layer, Modal, RadioButton, @@ -72,12 +73,17 @@ import { } from "./data-visualizer.resource"; import dayjs from "dayjs"; import { showNotification, showToast } from "@openmrs/esm-framework"; +import { FullScreen, useFullScreenHandle } from "react-full-screen"; +import { useTranslation } from "react-i18next"; + type ChartType = "list" | "pivot" | "aggregate"; type ReportingDuration = "fixed" | "relative"; export type CQIReportingCohort = | "Patients with encounters" | "Patients on appointment"; + const DataVisualizer: React.FC = () => { + const { t } = useTranslation(); const PlotlyRenderers = createPlotlyRenderers(Plot); const [tableHeaders, setTableHeaders] = useState([]); const [downloadHeaders, setDownloadHeaders] = useState([]); @@ -99,6 +105,8 @@ const DataVisualizer: React.FC = () => { const [cqiReportingCohort, setCQIReportingCohort] = useState("Patients with encounters"); + const handle = useFullScreenHandle(); // Create the full screen handle + useEffect(() => { let initialSelectedReport; @@ -154,6 +162,19 @@ const DataVisualizer: React.FC = () => { const { encounterConcepts, isLoadingEncounterConcepts } = useGetEncounterConcepts(selectedIndicators?.id); const [isDownloading, setIsDownloading] = useState(false); + const [isFullScreen, setIsFullScreen] = useState(false); + + const handleFullScreen = () => { + if (isFullScreen) { + handle.exit(); + } else { + handle.enter(); + } + }; + + useEffect(() => { + setIsFullScreen(handle.active); + }, [handle.active]); const handleChartTypeChange = ({ name }) => { setChartType(name); @@ -508,520 +529,516 @@ const DataVisualizer: React.FC = () => { } />
- - -
-
-
- +
Report Filters
+
+
+ + + + Type of report + + + + + + + {reportType === "fixed" && ( + <> - Type of report + Which kind of report do you want to show? - - - - + item.id === reportCategory.category + )[0] + } + /> - {reportType === "fixed" && ( - <> - - - Which kind of report do you want to show? - - item.id === reportCategory.category - )[0] - } - /> - - - {reportCategory.category === "facility" && ( - - - Facility Reports - - - - )} - - {reportCategory.category === "national" && ( - - - National Reports - - - - )} - - {reportCategory.category === "donor" && ( - - - Donor Reports - - - - )} - - {reportCategory.category === "cqi" && ( - - - CQI Reports - - - - )} - - {reportCategory.category === "integration" && ( - - - Integration Data Exports - - - - )} - + {reportCategory.category === "facility" && ( + + + Facility Reports + + + )} - {reportType === "dynamic" && ( - - - - Dynamic report type - - - - - - - - Indicators - - - - - -
- -
    - {availableParameters.map((parameter) => ( -
  • - moveAllFromLeftToRight(parameter) - } - > - {parameter.label} -
    • - ))} -
- -
-
- -
    - {selectedParameters.map((parameter) => ( -
  • - moveAllFromRightToLeft(parameter) - } - > - {parameter.label} -
    • - ))} -
- -
- + {reportCategory.category === "national" && ( + + + National Reports + + + )} - {reportCategory.category === "cqi" && ( + {reportCategory.category === "donor" && ( - Select your cohort of interest + Donor Reports - - - - + )} - - -
-
-
- - - - Do you want your report to cover a fixed reporting - period or a relative one? - - - - + + CQI Reports + + - - - {reportingDuration === "fixed" && ( - - - - -
- - - )} - {reportingDuration === "relative" && ( + + {reportCategory.category === "integration" && ( - Select your desired reporting period + Integration Data Exports - )} + + )} + + {reportType === "dynamic" && ( + + + + Dynamic report type + + + + + + + Indicators + + + + +
+ +
    + {availableParameters.map((parameter) => ( +
  • moveAllFromLeftToRight(parameter)} + > + {parameter.label} +
    • + ))} +
+ +
+
+ +
    + {selectedParameters.map((parameter) => ( +
  • moveAllFromRightToLeft(parameter)} + > + {parameter.label} +
    • + ))} +
+ +
- -
-
- - -
+ )} -
-
- - -
- - Patient list -
- - -
- - Pivot table -
- - -
- - Aggregate Report -
- - + {reportCategory.category === "cqi" && ( + + + Select your cohort of interest + + + + + + + )} + + +
+
+
+ + + + Do you want your report to cover a fixed reporting period or + a relative one? + + + + + + + {reportingDuration === "fixed" && ( + + + + +
+ + + + + )} + {reportingDuration === "relative" && ( + + + Select your desired reporting period + + + + + )} + +
+
-
- - - {data.length > 0 || htmlContent != "" ? ( - <> - {chartType === "pivot" ? ( -
- {reportType === "fixed" ? ( - isDownloading ? ( - - ) : ( + +
+
+ + +
+ + Patient list +
+ + +
+ + Pivot table +
+ + +
+ + Aggregate Report +
+ + +
+
+ + +
-
- - {showLineList ? ( - <> - {loading && } - - {chartType === "list" && !loading && ( -
-

- {reportName} ({dayjs(startDate).format("DD/MM/YYYY")} -{" "} - {dayjs(endDate).format("DD/MM/YYYY")}) -

-
- {reportCategory.category === "cqi" ? ( - - ) : ( - - )} -
-
- )} - - {chartType === "list" && - !loading && - selectedReport.id === "bf79f017-8591-4eaf-88c9-1cde33226517" && ( - <> -
- -
- - )} + ) : null} + + ) : null} + +
+ - {chartType === "pivot" && ( -
-

Pivot Table

- setPivotTableData(s)} - renderers={{ ...TableRenderers, ...PlotlyRenderers }} - {...pivotTableData} - /> -
- )} + {showLineList ? ( + <> + {loading && } - {chartType === "aggregate" && !loading && ( -
-
+ {chartType === "list" && !loading && ( +

{reportName} ({dayjs(startDate).format("DD/MM/YYYY")} -{" "} {dayjs(endDate).format("DD/MM/YYYY")})

-
-
-
- )} - - {saveReportModal && ( - -
- -