From e40515b58644797652a8cf1944b4d1b5e35a8d14 Mon Sep 17 00:00:00 2001 From: Gift Nnko Date: Fri, 9 Aug 2024 11:53:14 +0300 Subject: [PATCH] chore: setting up specific targets view --- .../ScorecardViewPage/ScorecardViewPage.tsx | 2 +- .../ScorecardLegendsView.tsx | 11 +- .../components/ArrowLegendView.tsx | 2 +- .../components/LegendView.tsx | 0 .../components/SpecificTargetLegendsView.tsx | 208 ++++++++++++++++++ .../ScorecardLegendsView/index.ts | 0 packages/shared/src/utils/utils.ts | 13 +- 7 files changed, 231 insertions(+), 5 deletions(-) rename packages/app/src/modules/Main/components/ScorecardViewPage/{ => components}/ScorecardLegendsView/ScorecardLegendsView.tsx (68%) rename packages/app/src/modules/Main/components/ScorecardViewPage/{ => components}/ScorecardLegendsView/components/ArrowLegendView.tsx (91%) rename packages/app/src/modules/Main/components/ScorecardViewPage/{ => components}/ScorecardLegendsView/components/LegendView.tsx (100%) create mode 100644 packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardLegendsView/components/SpecificTargetLegendsView.tsx rename packages/app/src/modules/Main/components/ScorecardViewPage/{ => components}/ScorecardLegendsView/index.ts (100%) diff --git a/packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardViewPage.tsx b/packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardViewPage.tsx index f1fdb355a..cb7db16e4 100644 --- a/packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardViewPage.tsx +++ b/packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardViewPage.tsx @@ -10,7 +10,7 @@ import { ScorecardStateProvider } from "./state/state"; import { ScorecardView } from "./components/ScorecardView"; import { ScorecardConfigProvider } from "./state/config"; import { ScorecardHeader } from "./components/ScorecardHeader"; -import { ScorecardLegendsView } from "./ScorecardLegendsView"; +import { ScorecardLegendsView } from "./components/ScorecardLegendsView"; export function ScorecardViewPage() { const { setDimensions, orgUnit, periods } = useDimensions(); diff --git a/packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardLegendsView/ScorecardLegendsView.tsx b/packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardLegendsView/ScorecardLegendsView.tsx similarity index 68% rename from packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardLegendsView/ScorecardLegendsView.tsx rename to packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardLegendsView/ScorecardLegendsView.tsx index 21ac8265c..7d782749d 100644 --- a/packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardLegendsView/ScorecardLegendsView.tsx +++ b/packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardLegendsView/ScorecardLegendsView.tsx @@ -1,6 +1,7 @@ import { ArrowLegendsView } from "./components/ArrowLegendView"; import { ScorecardConfig } from "@hisptz/dhis2-analytics"; import { LegendView } from "./components/LegendView"; +import { SpecificTargetLegendsView } from "./components/SpecificTargetLegendsView"; export function ScorecardLegendsView({ config }: { config: ScorecardConfig }) { const legendDefinitions = config.legendDefinitions; @@ -21,7 +22,15 @@ export function ScorecardLegendsView({ config }: { config: ScorecardConfig }) { ))} - +
+
+ + +
+
); } diff --git a/packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardLegendsView/components/ArrowLegendView.tsx b/packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardLegendsView/components/ArrowLegendView.tsx similarity index 91% rename from packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardLegendsView/components/ArrowLegendView.tsx rename to packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardLegendsView/components/ArrowLegendView.tsx index 8e790c601..0c7e0bcb9 100644 --- a/packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardLegendsView/components/ArrowLegendView.tsx +++ b/packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardLegendsView/components/ArrowLegendView.tsx @@ -1,6 +1,6 @@ import { IconArrowDown24, IconArrowUp24 } from "@dhis2/ui"; import i18n from "@dhis2/d2-i18n"; -import { useScorecardState } from "../../state/state"; +import { useScorecardState } from "../../../state/state"; export function ArrowLegendsView(props: any) { const [state] = useScorecardState(); diff --git a/packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardLegendsView/components/LegendView.tsx b/packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardLegendsView/components/LegendView.tsx similarity index 100% rename from packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardLegendsView/components/LegendView.tsx rename to packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardLegendsView/components/LegendView.tsx diff --git a/packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardLegendsView/components/SpecificTargetLegendsView.tsx b/packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardLegendsView/components/SpecificTargetLegendsView.tsx new file mode 100644 index 000000000..5b06a91eb --- /dev/null +++ b/packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardLegendsView/components/SpecificTargetLegendsView.tsx @@ -0,0 +1,208 @@ +import { ScorecardConfig, ScorecardLegend } from "@hisptz/dhis2-analytics"; +import { getDataSourcesFromGroups } from "@scorecard/shared"; +import { find, isEmpty } from "lodash"; +import { + Button, + Modal, + ModalActions, + ModalContent, + ModalTitle, +} from "@dhis2/ui"; +import i18n from "@dhis2/d2-i18n"; +import { + OrgUnitSpecificTargetView, + PeriodSpecificTargetView, +} from "../../../../ScoreCardManagement/Components/DataConfiguration/Components/DataGroups/Components/DataSourceConfiguration/Components/TargetsArea/components/SpecificTargetView"; + +function LegendsView({ + legends, + config, +}: { + legends: ScorecardLegend[]; + config: ScorecardConfig; +}) { + const legendDefinitions = config.legendDefinitions; + + return ( +
+ + + + + + + + + + + + + {legends?.map((legend) => { + const legendDefinition = find(legendDefinitions, { + id: legend.legendDefinitionId, + }); + if (!legendDefinition) { + return ; + } + return ( + + + + + + ); + })} + +
{i18n.t("Legend")}{i18n.t("Min")}{i18n.t("Max")}
+ + + + + + + + + +
+
+
{legendDefinition.name}
+ 		{legend?.startValue}{legend?.endValue}
+
+ ); +} + +export function SpecificTargetsLibrary({ + config, +}: { + config: ScorecardConfig; +}) { + const specificTargetsDataSourcesByType = useMemo(() => { + const dataSourcesWithSpecificTargets = filter( + dataSources, + (ds) => ds.specificTargetsSet, + ); + const data = groupBy( + filter( + dataSourcesWithSpecificTargets, + (ds) => !isEmpty(ds.specificTargets), + ), + (ds) => head(ds.specificTargets)?.type, + ); + data["orgUnitLevel"] = dataSourcesWithSpecificTargets.filter((ds) => + isEmpty(ds.specificTargets), + ); + return data; + }, [dataSources]); + return ( + <> +
+ {!isEmpty(specificTargetsDataSourcesByType?.orgUnit) && ( +
+

{i18n.t("Organisation Units Specific targets")}

+
+ {specificTargetsDataSourcesByType?.orgUnit?.map( + (dataSource) => ( + <> + +
+ + ), + )} +
+
+
+ )} + {!isEmpty(specificTargetsDataSourcesByType?.period) && ( +
+

{i18n.t("Period Specific targets")}

+
+ {specificTargetsDataSourcesByType?.period?.map( + (dataSource) => ( + <> + +
+ + ), + )} +
+
+
+ )} + {!isEmpty(specificTargetsDataSourcesByType?.orgUnitLevell) && ( +
+

{i18n.t("Organisation unit level targets")}

+
+ {specificTargetsDataSourcesByType?.orgUnitLevel?.map( + (dataSource) => ( + + ), + )} +
+
+
+ )} +
+ + ); +} + +function SpecificTargetLegendsModal({ + hide, + onClose, +}: { + hide: boolean; + onClose: () => void; +}) { + return ( + + {i18n.t("Specific targets")} + + + + + + ); +} + +export function SpecificTargetLegendsView({ + config, +}: { + config: ScorecardConfig; +}) { + const dataSources = getDataSourcesFromGroups( + config.dataSelection.dataGroups, + ); + const dataSourcesWithSpecificTargets = dataSources.filter( + (dataSource) => + !!dataSource.specificTargets || !Array.isArray(dataSource.legends), + ); + + if (isEmpty(dataSourcesWithSpecificTargets)) { + return null; + } + + return ; +} diff --git a/packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardLegendsView/index.ts b/packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardLegendsView/index.ts similarity index 100% rename from packages/app/src/modules/Main/components/ScorecardViewPage/ScorecardLegendsView/index.ts rename to packages/app/src/modules/Main/components/ScorecardViewPage/components/ScorecardLegendsView/index.ts diff --git a/packages/shared/src/utils/utils.ts b/packages/shared/src/utils/utils.ts index 6aef1280c..cd8a9b9a2 100644 --- a/packages/shared/src/utils/utils.ts +++ b/packages/shared/src/utils/utils.ts @@ -17,6 +17,11 @@ import { ScorecardLegend } from "../models"; import { DefaultAuthority, TableSort } from "../constants"; import { D2User } from "../state/user"; import { Sharing } from "app/src/modules/Main/components/ScorecardList/hooks/authority"; +import { + ScorecardDataGroup, + ScorecardDataHolder, + ScorecardDataSource, +} from "@hisptz/dhis2-analytics"; export function getWindowDimensions() { const { innerWidth: width, innerHeight: height } = window; @@ -94,11 +99,15 @@ export function specificTargetsSet(dataSources: any) { ); } -export function getHoldersFromGroups(dataGroups = []) { +export function getHoldersFromGroups( + dataGroups: ScorecardDataGroup[] = [], +): ScorecardDataHolder[] { return flattenDeep(dataGroups?.map(({ dataHolders }) => dataHolders) ?? []); } -export function getDataSourcesFromGroups(dataGroups: any) { +export function getDataSourcesFromGroups( + dataGroups: ScorecardDataGroup[], +): ScorecardDataSource[] { const dataHolders = compact(getHoldersFromGroups(dataGroups)); return flattenDeep(dataHolders?.map(({ dataSources }) => dataSources)); }