npm - @hisptz/dhis2-scorecard - Versions diffs - 1.2.24 → 1.2.25 - Mend

@hisptz/dhis2-scorecard 1.2.24 → 1.2.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/dist/components/ScorecardLegendsView/components/SpecificTargetLegendsView.js CHANGED Viewed

@@ -22,7 +22,7 @@ function SpecificTargetsLibrary() {
   const dataSources$1 = dataSources.getDataSourcesFromGroups(
     config.dataSelection.dataGroups
   );
-  const specificTargetsDataSourcesByType = react.useMemo(() => {
+  const { orgUnit, orgUnitLevel, periods } = react.useMemo(() => {
     const dataSourcesWithSpecificTargets = dataSources$1.filter(
       (ds) => ds.specificTargetsSet
     );
@@ -33,67 +33,83 @@ function SpecificTargetsLibrary() {
       ),
       (ds) => lodash.head(ds.specificTargets)?.type
     );
+    console.log({ data });
     data["orgUnitLevel"] = dataSourcesWithSpecificTargets.filter(
       (ds) => lodash.isEmpty(ds.specificTargets)
     );
     return data;
   }, [dataSources$1]);
+  const [activeTab, setActiveTab] = react.useState(
+    !lodash.isEmpty(orgUnit) ? "orgUnit" : !lodash.isEmpty("orgUnitLevel") ? "orgUnitLevel" : "period"
+  );
   const getDataSourceLabel = hooks.useGetDataSourceLabel();
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "column gap-16", children: [
-    !lodash.isEmpty(specificTargetsDataSourcesByType?.orgUnit) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.TabBar, { children: [
+      !lodash.isEmpty(orgUnit) && /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Tab,
+        {
+          selected: activeTab === "orgUnit",
+          onClick: () => setActiveTab("orgUnit"),
+          children: i18n__default.default.t("Organisation Units")
+        }
+      ),
+      !lodash.isEmpty(orgUnitLevel) && /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Tab,
+        {
+          selected: activeTab === "orgUnitLevel",
+          onClick: () => setActiveTab("orgUnitLevel"),
+          children: i18n__default.default.t("Organisation Unit Level")
+        }
+      ),
+      !lodash.isEmpty(periods) && /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Tab,
+        {
+          selected: activeTab === "period",
+          onClick: () => setActiveTab("period"),
+          children: i18n__default.default.t("Period")
+        }
+      )
+    ] }),
+    activeTab === "orgUnit" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { children: i18n__default.default.t("Organisation Units Specific targets") }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row gap-16", children: specificTargetsDataSourcesByType?.orgUnit?.map(
-        (dataSource) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            OrgUnitSpecificTargetView.OrgUnitSpecificTargetView,
-            {
-              specificTarget: lodash.head(
-                dataSource.specificTargets
-              ),
-              label: getDataSourceLabel(
-                dataSource
-              )
-            },
-            `${dataSource.id}-orgUnit-specific-target`
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "page-break" })
-        ] })
-      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row gap-16", children: orgUnit?.map((dataSource) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          OrgUnitSpecificTargetView.OrgUnitSpecificTargetView,
+          {
+            specificTarget: lodash.head(dataSource.specificTargets),
+            label: getDataSourceLabel(dataSource)
+          },
+          `${dataSource.id}-orgUnit-specific-target`
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "page-break" })
+      ] })) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "page-break" })
     ] }),
-    !lodash.isEmpty(specificTargetsDataSourcesByType?.period) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    activeTab === "period" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { children: i18n__default.default.t("Period Specific targets") }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row gap-16", children: specificTargetsDataSourcesByType?.period?.map(
-        (dataSource) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            PeriodSpecificTargetView.PeriodSpecificTargetView,
-            {
-              specificTarget: lodash.head(
-                dataSource.specificTargets
-              ),
-              label: getDataSourceLabel(
-                dataSource
-              )
-            },
-            `${dataSource.id}-orgUnit-specific-target`
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "page-break" })
-        ] })
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "page-break" })
-    ] }),
-    !lodash.isEmpty(specificTargetsDataSourcesByType.orgUnitLevel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { children: i18n__default.default.t("Organisation unit level targets") }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "column gap-16", children: specificTargetsDataSourcesByType?.orgUnitLevel.map(
-        (dataSource) => /* @__PURE__ */ jsxRuntime.jsx(
-          OrgUnitLevelSpecificTargetView.OrgUnitLevelSpecificTargetView,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row gap-16", children: periods?.map((dataSource) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PeriodSpecificTargetView.PeriodSpecificTargetView,
           {
-            specificTarget: dataSource.legends,
+            specificTarget: lodash.head(dataSource.specificTargets),
             label: getDataSourceLabel(dataSource)
           },
           `${dataSource.id}-orgUnit-specific-target`
-        )
-      ) }),
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "page-break" })
+      ] })) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "page-break" })
+    ] }),
+    activeTab === "orgUnitLevel" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { children: i18n__default.default.t("Organisation Unit Level Targets") }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "column gap-16", children: orgUnitLevel.map((dataSource) => /* @__PURE__ */ jsxRuntime.jsx(
+        OrgUnitLevelSpecificTargetView.OrgUnitLevelSpecificTargetView,
+        {
+          specificTarget: dataSource.legends,
+          label: getDataSourceLabel(dataSource)
+        },
+        `${dataSource.id}-orgUnit-specific-target`
+      )) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "page-break" })
     ] })
   ] }) });

package/dist/components/ScorecardLegendsView/components/SpecificTargetLegendsView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ScorecardLegendsView/components/SpecificTargetLegendsView.tsx"],"names":["useScorecardConfig","dataSources","getDataSourcesFromGroups","useMemo","groupBy","filter","isEmpty","head","useGetDataSourceLabel","jsx","Fragment","jsxs","i18n","OrgUnitSpecificTargetView","PeriodSpecificTargetView","OrgUnitLevelSpecificTargetView","Modal","ModalTitle","ModalContent","ModalActions","Button","useBoolean"],"mappings":"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","file":"SpecificTargetLegendsView.js","sourcesContent":["import { filter, groupBy, head, isEmpty } from \"lodash\";\nimport {\n\tButton,\n\tModal,\n\tModalActions,\n\tModalContent,\n\tModalTitle,\n} from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useMemo } from \"react\";\nimport { OrgUnitSpecificTargetView } from \"./OrgUnitSpecificTargetView\";\nimport { PeriodSpecificTargetView } from \"./PeriodSpecificTargetView\";\nimport { useBoolean } from \"usehooks-ts\";\nimport { OrgUnitLevelSpecificTargetView } from \"./OrgUnitLevelSpecificTargetView\";\nimport { getDataSourcesFromGroups } from \"../../../utils/dataSources\";\nimport { useScorecardConfig } from \"../../ConfigProvider\";\nimport type {\n\tOrgUnitLevelLegend,\n\tScorecardDataSource,\n} from \"../../../schemas/config\";\nimport { useGetDataSourceLabel } from \"../../../hooks\";\n\nexport function SpecificTargetsLibrary() {\n\tconst config = useScorecardConfig();\n\tconst dataSources = getDataSourcesFromGroups(\n\t\tconfig.dataSelection.dataGroups,\n\t);\n\tconst specificTargetsDataSourcesByType = useMemo(() => {\n\t\tconst dataSourcesWithSpecificTargets = dataSources.filter(\n\t\t\t(ds) => ds.specificTargetsSet,\n\t\t);\n\t\tconst data = groupBy(\n\t\t\tfilter(\n\t\t\t\tdataSourcesWithSpecificTargets,\n\t\t\t\t(ds) => !isEmpty(ds.specificTargets),\n\t\t\t),\n\t\t\t(ds) => head(ds.specificTargets)?.type,\n\t\t);\n\t\tdata[\"orgUnitLevel\"] = dataSourcesWithSpecificTargets.filter((ds) =>\n\t\t\tisEmpty(ds.specificTargets),\n\t\t);\n\t\treturn data as {\n\t\t\tperiod: Array<ScorecardDataSource> \| undefined;\n\t\t\torgUnit: Array<ScorecardDataSource> \| undefined;\n\t\t\torgUnitLevel: Array<ScorecardDataSource>;\n\t\t};\n\t}, [dataSources]);\n\n\tconst getDataSourceLabel = useGetDataSourceLabel();\n\treturn (\n\t\t<>\n\t\t\t<div className=\"column gap-16\">\n\t\t\t\t{!isEmpty(specificTargetsDataSourcesByType?.orgUnit) && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3>{i18n.t(\"Organisation Units Specific targets\")}</h3>\n\t\t\t\t\t\t<div className=\"row gap-16\">\n\t\t\t\t\t\t\t{specificTargetsDataSourcesByType?.orgUnit?.map(\n\t\t\t\t\t\t\t\t(dataSource) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<OrgUnitSpecificTargetView\n\t\t\t\t\t\t\t\t\t\t\tkey={`${dataSource.id}-orgUnit-specific-target`}\n\t\t\t\t\t\t\t\t\t\t\tspecificTarget={\n\t\t\t\t\t\t\t\t\t\t\t\thead(\n\t\t\t\t\t\t\t\t\t\t\t\t\tdataSource.specificTargets,\n\t\t\t\t\t\t\t\t\t\t\t\t)!\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tlabel={getDataSourceLabel(\n\t\t\t\t\t\t\t\t\t\t\t\tdataSource,\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<div className=\"page-break\" />\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"page-break\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{!isEmpty(specificTargetsDataSourcesByType?.period) && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3>{i18n.t(\"Period Specific targets\")}</h3>\n\t\t\t\t\t\t<div className=\"row gap-16\">\n\t\t\t\t\t\t\t{specificTargetsDataSourcesByType?.period?.map(\n\t\t\t\t\t\t\t\t(dataSource) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<PeriodSpecificTargetView\n\t\t\t\t\t\t\t\t\t\t\tkey={`${dataSource.id}-orgUnit-specific-target`}\n\t\t\t\t\t\t\t\t\t\t\tspecificTarget={\n\t\t\t\t\t\t\t\t\t\t\t\thead(\n\t\t\t\t\t\t\t\t\t\t\t\t\tdataSource.specificTargets,\n\t\t\t\t\t\t\t\t\t\t\t\t)!\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tlabel={getDataSourceLabel(\n\t\t\t\t\t\t\t\t\t\t\t\tdataSource,\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<div className=\"page-break\" />\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"page-break\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{!isEmpty(specificTargetsDataSourcesByType.orgUnitLevel) && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3>{i18n.t(\"Organisation unit level targets\")}</h3>\n\t\t\t\t\t\t<div className=\"column gap-16\">\n\t\t\t\t\t\t\t{specificTargetsDataSourcesByType?.orgUnitLevel.map(\n\t\t\t\t\t\t\t\t(dataSource) => (\n\t\t\t\t\t\t\t\t\t<OrgUnitLevelSpecificTargetView\n\t\t\t\t\t\t\t\t\t\tkey={`${dataSource.id}-orgUnit-specific-target`}\n\t\t\t\t\t\t\t\t\t\tspecificTarget={\n\t\t\t\t\t\t\t\t\t\t\tdataSource.legends as OrgUnitLevelLegend\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={getDataSourceLabel(dataSource)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"page-break\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nfunction SpecificTargetLegendsModal({\n\thide,\n\tonClose,\n}: {\n\thide: boolean;\n\tonClose: () => void;\n}) {\n\treturn (\n\t\t<Modal large position=\"middle\" hide={hide} onClose={onClose}>\n\t\t\t<ModalTitle>{i18n.t(\"Specific targets\")}</ModalTitle>\n\t\t\t<ModalContent>\n\t\t\t\t<SpecificTargetsLibrary />\n\t\t\t</ModalContent>\n\t\t\t<ModalActions>\n\t\t\t\t<Button onClick={onClose}>{i18n.t(\"Close\")}</Button>\n\t\t\t</ModalActions>\n\t\t</Modal>\n\t);\n}\n\nexport function SpecificTargetLegendsView() {\n\tconst config = useScorecardConfig();\n\tconst {\n\t\tvalue: hide,\n\t\tsetTrue: onClose,\n\t\tsetFalse: onShow,\n\t} = useBoolean(true);\n\tconst dataSources = getDataSourcesFromGroups(\n\t\tconfig.dataSelection.dataGroups,\n\t);\n\tconst dataSourcesWithSpecificTargets = dataSources.filter(\n\t\t(dataSource) =>\n\t\t\t!isEmpty(dataSource.specificTargets) \|\|\n\t\t\t!Array.isArray(dataSource.legends),\n\t);\n\n\tif (isEmpty(dataSourcesWithSpecificTargets)) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{!hide && (\n\t\t\t\t<SpecificTargetLegendsModal hide={hide} onClose={onClose} />\n\t\t\t)}\n\t\t\t<Button className=\"print-hide\" onClick={onShow}>\n\t\t\t\t{i18n.t(\"Specific Targets Library\")}\n\t\t\t</Button>\n\t\t</>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["../../../../src/components/ScorecardLegendsView/components/SpecificTargetLegendsView.tsx"],"names":["useScorecardConfig","dataSources","getDataSourcesFromGroups","useMemo","groupBy","filter","isEmpty","head","useState","useGetDataSourceLabel","jsx","Fragment","jsxs","TabBar","Tab","i18n","OrgUnitSpecificTargetView","PeriodSpecificTargetView","OrgUnitLevelSpecificTargetView","Modal","ModalTitle","ModalContent","ModalActions","Button","useBoolean"],"mappings":"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","file":"SpecificTargetLegendsView.js","sourcesContent":["import { filter, groupBy, head, isEmpty } from \"lodash\";\nimport {\n\tButton,\n\tModal,\n\tModalActions,\n\tModalContent,\n\tModalTitle,\n\tTab,\n\tTabBar,\n} from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useMemo, useState } from \"react\";\nimport { OrgUnitSpecificTargetView } from \"./OrgUnitSpecificTargetView\";\nimport { PeriodSpecificTargetView } from \"./PeriodSpecificTargetView\";\nimport { useBoolean } from \"usehooks-ts\";\nimport { OrgUnitLevelSpecificTargetView } from \"./OrgUnitLevelSpecificTargetView\";\nimport { getDataSourcesFromGroups } from \"../../../utils/dataSources\";\nimport { useScorecardConfig } from \"../../ConfigProvider\";\nimport type {\n\tOrgUnitLevelLegend,\n\tScorecardDataSource,\n} from \"../../../schemas/config\";\nimport { useGetDataSourceLabel } from \"../../../hooks\";\n\nexport function SpecificTargetsLibrary() {\n\tconst config = useScorecardConfig();\n\tconst dataSources = getDataSourcesFromGroups(\n\t\tconfig.dataSelection.dataGroups,\n\t);\n\tconst { orgUnit, orgUnitLevel, periods } = useMemo(() => {\n\t\tconst dataSourcesWithSpecificTargets = dataSources.filter(\n\t\t\t(ds) => ds.specificTargetsSet,\n\t\t);\n\t\tconst data = groupBy(\n\t\t\tfilter(\n\t\t\t\tdataSourcesWithSpecificTargets,\n\t\t\t\t(ds) => !isEmpty(ds.specificTargets),\n\t\t\t),\n\t\t\t(ds) => head(ds.specificTargets)?.type,\n\t\t);\n\n\t\tconsole.log({ data });\n\n\t\tdata[\"orgUnitLevel\"] = dataSourcesWithSpecificTargets.filter((ds) =>\n\t\t\tisEmpty(ds.specificTargets),\n\t\t);\n\t\treturn data as {\n\t\t\tperiods: Array<ScorecardDataSource> \| undefined;\n\t\t\torgUnit: Array<ScorecardDataSource> \| undefined;\n\t\t\torgUnitLevel: Array<ScorecardDataSource>;\n\t\t};\n\t}, [dataSources]);\n\n\tconst [activeTab, setActiveTab] = useState<\n\t\t\"period\" \| \"orgUnit\" \| \"orgUnitLevel\"\n\t>(\n\t\t!isEmpty(orgUnit)\n\t\t\t? \"orgUnit\"\n\t\t\t: !isEmpty(\"orgUnitLevel\")\n\t\t\t\t? \"orgUnitLevel\"\n\t\t\t\t: \"period\",\n\t);\n\n\tconst getDataSourceLabel = useGetDataSourceLabel();\n\treturn (\n\t\t<>\n\t\t\t<div className=\"column gap-16\">\n\t\t\t\t<TabBar>\n\t\t\t\t\t{!isEmpty(orgUnit) && (\n\t\t\t\t\t\t<Tab\n\t\t\t\t\t\t\tselected={activeTab === \"orgUnit\"}\n\t\t\t\t\t\t\tonClick={() => setActiveTab(\"orgUnit\")}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{i18n.t(\"Organisation Units\")}\n\t\t\t\t\t\t</Tab>\n\t\t\t\t\t)}\n\t\t\t\t\t{!isEmpty(orgUnitLevel) && (\n\t\t\t\t\t\t<Tab\n\t\t\t\t\t\t\tselected={activeTab === \"orgUnitLevel\"}\n\t\t\t\t\t\t\tonClick={() => setActiveTab(\"orgUnitLevel\")}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{i18n.t(\"Organisation Unit Level\")}\n\t\t\t\t\t\t</Tab>\n\t\t\t\t\t)}\n\t\t\t\t\t{!isEmpty(periods) && (\n\t\t\t\t\t\t<Tab\n\t\t\t\t\t\t\tselected={activeTab === \"period\"}\n\t\t\t\t\t\t\tonClick={() => setActiveTab(\"period\")}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{i18n.t(\"Period\")}\n\t\t\t\t\t\t</Tab>\n\t\t\t\t\t)}\n\t\t\t\t</TabBar>\n\t\t\t\t{activeTab === \"orgUnit\" && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3>{i18n.t(\"Organisation Units Specific targets\")}</h3>\n\t\t\t\t\t\t<div className=\"row gap-16\">\n\t\t\t\t\t\t\t{orgUnit?.map((dataSource) => (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<OrgUnitSpecificTargetView\n\t\t\t\t\t\t\t\t\t\tkey={`${dataSource.id}-orgUnit-specific-target`}\n\t\t\t\t\t\t\t\t\t\tspecificTarget={\n\t\t\t\t\t\t\t\t\t\t\thead(dataSource.specificTargets)!\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={getDataSourceLabel(dataSource)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<div className=\"page-break\" />\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"page-break\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{activeTab === \"period\" && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3>{i18n.t(\"Period Specific targets\")}</h3>\n\t\t\t\t\t\t<div className=\"row gap-16\">\n\t\t\t\t\t\t\t{periods?.map((dataSource) => (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<PeriodSpecificTargetView\n\t\t\t\t\t\t\t\t\t\tkey={`${dataSource.id}-orgUnit-specific-target`}\n\t\t\t\t\t\t\t\t\t\tspecificTarget={\n\t\t\t\t\t\t\t\t\t\t\thead(dataSource.specificTargets)!\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={getDataSourceLabel(dataSource)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<div className=\"page-break\" />\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"page-break\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{activeTab === \"orgUnitLevel\" && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3>{i18n.t(\"Organisation Unit Level Targets\")}</h3>\n\t\t\t\t\t\t<div className=\"column gap-16\">\n\t\t\t\t\t\t\t{orgUnitLevel.map((dataSource) => (\n\t\t\t\t\t\t\t\t<OrgUnitLevelSpecificTargetView\n\t\t\t\t\t\t\t\t\tkey={`${dataSource.id}-orgUnit-specific-target`}\n\t\t\t\t\t\t\t\t\tspecificTarget={\n\t\t\t\t\t\t\t\t\t\tdataSource.legends as OrgUnitLevelLegend\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tlabel={getDataSourceLabel(dataSource)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"page-break\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nfunction SpecificTargetLegendsModal({\n\thide,\n\tonClose,\n}: {\n\thide: boolean;\n\tonClose: () => void;\n}) {\n\treturn (\n\t\t<Modal large position=\"middle\" hide={hide} onClose={onClose}>\n\t\t\t<ModalTitle>{i18n.t(\"Specific targets\")}</ModalTitle>\n\t\t\t<ModalContent>\n\t\t\t\t<SpecificTargetsLibrary />\n\t\t\t</ModalContent>\n\t\t\t<ModalActions>\n\t\t\t\t<Button onClick={onClose}>{i18n.t(\"Close\")}</Button>\n\t\t\t</ModalActions>\n\t\t</Modal>\n\t);\n}\n\nexport function SpecificTargetLegendsView() {\n\tconst config = useScorecardConfig();\n\tconst {\n\t\tvalue: hide,\n\t\tsetTrue: onClose,\n\t\tsetFalse: onShow,\n\t} = useBoolean(true);\n\tconst dataSources = getDataSourcesFromGroups(\n\t\tconfig.dataSelection.dataGroups,\n\t);\n\tconst dataSourcesWithSpecificTargets = dataSources.filter(\n\t\t(dataSource) =>\n\t\t\t!isEmpty(dataSource.specificTargets) \|\|\n\t\t\t!Array.isArray(dataSource.legends),\n\t);\n\n\tif (isEmpty(dataSourcesWithSpecificTargets)) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{!hide && (\n\t\t\t\t<SpecificTargetLegendsModal hide={hide} onClose={onClose} />\n\t\t\t)}\n\t\t\t<Button className=\"print-hide\" onClick={onShow}>\n\t\t\t\t{i18n.t(\"Specific Targets Library\")}\n\t\t\t</Button>\n\t\t</>\n\t);\n}\n"]}

package/dist/components/ScorecardTable/components/PaginatedToolbar.js CHANGED Viewed

@@ -4,7 +4,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@dhis2/ui');
 var TableStateProvider = require('../../TableStateProvider');
 var react = require('react');
-var usehooksTs = require('usehooks-ts');
 function PaginatedToolbar() {
   const [isPending, startTransition] = react.useTransition();
@@ -24,7 +23,7 @@ function PaginatedToolbar() {
       table.setPageSize(pageSize2);
     });
   };
-  usehooksTs.useUpdateEffect(() => {
+  react.useEffect(() => {
     toggleTableLoading();
   }, [isPending]);
   if (rowCount <= 50 || table.options.meta?.disablePagination) {

package/dist/components/ScorecardTable/components/PaginatedToolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ScorecardTable/components/PaginatedToolbar.tsx"],"names":["useTransition","useTableState","useToggleTableLoadingState","page","pageSize","~~useUpdateEffect~~","jsx","DataTableToolbar","Pagination"],"mappings":"~~;;;;;;;;AAQO~~,SAAS,gBAAA,GAAmB;AAClC,EAAA,MAAM,CAAC,SAAA,EAAW,eAAe,CAAA,GAAIA,mBAAA,EAAc;AACnD,EAAA,MAAM,QAAQC,gCAAA,EAAc;AAC5B,EAAA,MAAM,QAAA,GAAW,MAAM,WAAA,EAAY;AACnC,EAAA,MAAM,IAAA,GAAO,KAAA,CAAM,QAAA,EAAS,CAAE,WAAW,SAAA,GAAY,CAAA;AACrD,EAAA,MAAM,QAAA,GAAW,KAAA,CAAM,QAAA,EAAS,CAAE,UAAA,CAAW,QAAA;AAC7C,EAAA,MAAM,SAAA,GAAY,MAAM,YAAA,EAAa;AACrC,EAAA,MAAM,qBAAqBC,6CAAA,EAA2B;AAEtD,EAAA,MAAM,YAAA,GAAe,CAACC,KAAAA,KAAiB;AACtC,IAAA,eAAA,CAAgB,MAAM;AACrB,MAAA,KAAA,CAAM,YAAA,CAAaA,QAAO,CAAC,CAAA;AAAA,IAC5B,CAAC,CAAA;AAAA,EACF,CAAA;AACA,EAAA,MAAM,gBAAA,GAAmB,CAACC,SAAAA,KAAqB;AAC9C,IAAA,eAAA,CAAgB,MAAM;AACrB,MAAA,KAAA,CAAM,YAAYA,SAAQ,CAAA;AAAA,IAC3B,CAAC,CAAA;AAAA,EACF,CAAA;AAEA,EAAAC,~~0BAAA~~,~~CAAgB~~,MAAM;~~AACrB~~,IAAA,kBAAA,EAAmB;AAAA,EACpB,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,IACC,QAAA,IAAY,EAAA,IACX,KAAA,CAAM,OAAA,CAAQ,MACZ,iBAAA,EACF;AACD,IAAA,OAAO,IAAA;AAAA,EACR;AAEA,EAAA,uBACCC,cAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MAGA,KAAA,EAAO,EAAE,QAAA,EAAU,OAAA,EAAQ;AAAA,MAC3B,QAAA,EAAS,QAAA;AAAA,MAET,yCAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,KAAA,EAAO,WAAU,EAC9B,QAAA,kBAAAD,cAAA;AAAA,QAACE,aAAA;AAAA,QAAA;AAAA,UACA,KAAA,EAAO,QAAA;AAAA,UACP,SAAA;AAAA,UACA,SAAA,EAAW,CAAC,EAAA,EAAI,EAAA,EAAI,IAAI,EAAA,EAAI,EAAA,EAAI,GAAG,CAAA,CAAE,GAAA;AAAA,YAAI,CAAC,IAAA,KACzC,IAAA,CAAK,QAAA;AAAS,WACf;AAAA,UACA,IAAA;AAAA,UACA,QAAA;AAAA,UACA,YAAA;AAAA,UACA;AAAA;AAAA,OACD,EACD;AAAA;AAAA,GACD;AAEF","file":"PaginatedToolbar.js","sourcesContent":["import { DataTableToolbar, Pagination } from \"@dhis2/ui\";\nimport {\n\tuseTableState,\n\tuseToggleTableLoadingState,\n} from \"../../TableStateProvider\";\nimport { useTransition } from \"react\";\~~nimport { useUpdateEffect } from \"usehooks-ts\";\~~n\nexport function PaginatedToolbar() {\n\tconst [isPending, startTransition] = useTransition();\n\tconst table = useTableState();\n\tconst rowCount = table.getRowCount();\n\tconst page = table.getState().pagination.pageIndex + 1;\n\tconst pageSize = table.getState().pagination.pageSize;\n\tconst pageCount = table.getPageCount();\n\tconst toggleTableLoading = useToggleTableLoadingState();\n\n\tconst onPageChange = (page: number) => {\n\t\tstartTransition(() => {\n\t\t\ttable.setPageIndex(page - 1);\n\t\t});\n\t};\n\tconst onPageSizeChange = (pageSize: number) => {\n\t\tstartTransition(() => {\n\t\t\ttable.setPageSize(pageSize);\n\t\t});\n\t};\n\n\~~tuseUpdateEffect~~(() => {\n\t\ttoggleTableLoading();\n\t}, [isPending]);\n\n\tif (\n\t\trowCount <= 50 \|\|\n\t\t(table.options.meta as { disablePagination?: boolean })\n\t\t\t?.disablePagination\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DataTableToolbar\n\t\t\t/\n\t\t\t// @ts-ignore /\n\t\t\tstyle={{ position: \"unset\" }}\n\t\t\tposition=\"bottom\"\n\t\t>\n\t\t\t<div style={{ width: \"stretch\" }}>\n\t\t\t\t<Pagination\n\t\t\t\t\ttotal={rowCount}\n\t\t\t\t\tpageCount={pageCount}\n\t\t\t\t\tpageSizes={[10, 20, 30, 40, 50, 100].map((size) =>\n\t\t\t\t\t\tsize.toString(),\n\t\t\t\t\t)}\n\t\t\t\t\tpage={page}\n\t\t\t\t\tpageSize={pageSize}\n\t\t\t\t\tonPageChange={onPageChange}\n\t\t\t\t\tonPageSizeChange={onPageSizeChange}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</DataTableToolbar>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["../../../../src/components/ScorecardTable/components/PaginatedToolbar.tsx"],"names":["useTransition","useTableState","useToggleTableLoadingState","page","pageSize","useEffect","jsx","DataTableToolbar","Pagination"],"mappings":";;;;;;;AAOO,SAAS,gBAAA,GAAmB;AAClC,EAAA,MAAM,CAAC,SAAA,EAAW,eAAe,CAAA,GAAIA,mBAAA,EAAc;AACnD,EAAA,MAAM,QAAQC,gCAAA,EAAc;AAC5B,EAAA,MAAM,QAAA,GAAW,MAAM,WAAA,EAAY;AACnC,EAAA,MAAM,IAAA,GAAO,KAAA,CAAM,QAAA,EAAS,CAAE,WAAW,SAAA,GAAY,CAAA;AACrD,EAAA,MAAM,QAAA,GAAW,KAAA,CAAM,QAAA,EAAS,CAAE,UAAA,CAAW,QAAA;AAC7C,EAAA,MAAM,SAAA,GAAY,MAAM,YAAA,EAAa;AACrC,EAAA,MAAM,qBAAqBC,6CAAA,EAA2B;AAEtD,EAAA,MAAM,YAAA,GAAe,CAACC,KAAAA,KAAiB;AACtC,IAAA,eAAA,CAAgB,MAAM;AACrB,MAAA,KAAA,CAAM,YAAA,CAAaA,QAAO,CAAC,CAAA;AAAA,IAC5B,CAAC,CAAA;AAAA,EACF,CAAA;AACA,EAAA,MAAM,gBAAA,GAAmB,CAACC,SAAAA,KAAqB;AAC9C,IAAA,eAAA,CAAgB,MAAM;AACrB,MAAA,KAAA,CAAM,YAAYA,SAAQ,CAAA;AAAA,IAC3B,CAAC,CAAA;AAAA,EACF,CAAA;AAEA,EAAAC,eAAA,CAAU,MAAM;AACf,IAAA,kBAAA,EAAmB;AAAA,EACpB,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,IACC,QAAA,IAAY,EAAA,IACX,KAAA,CAAM,OAAA,CAAQ,MACZ,iBAAA,EACF;AACD,IAAA,OAAO,IAAA;AAAA,EACR;AAEA,EAAA,uBACCC,cAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MAGA,KAAA,EAAO,EAAE,QAAA,EAAU,OAAA,EAAQ;AAAA,MAC3B,QAAA,EAAS,QAAA;AAAA,MAET,yCAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,KAAA,EAAO,WAAU,EAC9B,QAAA,kBAAAD,cAAA;AAAA,QAACE,aAAA;AAAA,QAAA;AAAA,UACA,KAAA,EAAO,QAAA;AAAA,UACP,SAAA;AAAA,UACA,SAAA,EAAW,CAAC,EAAA,EAAI,EAAA,EAAI,IAAI,EAAA,EAAI,EAAA,EAAI,GAAG,CAAA,CAAE,GAAA;AAAA,YAAI,CAAC,IAAA,KACzC,IAAA,CAAK,QAAA;AAAS,WACf;AAAA,UACA,IAAA;AAAA,UACA,QAAA;AAAA,UACA,YAAA;AAAA,UACA;AAAA;AAAA,OACD,EACD;AAAA;AAAA,GACD;AAEF","file":"PaginatedToolbar.js","sourcesContent":["import { DataTableToolbar, Pagination } from \"@dhis2/ui\";\nimport {\n\tuseTableState,\n\tuseToggleTableLoadingState,\n} from \"../../TableStateProvider\";\nimport { useEffect, useTransition } from \"react\";\n\nexport function PaginatedToolbar() {\n\tconst [isPending, startTransition] = useTransition();\n\tconst table = useTableState();\n\tconst rowCount = table.getRowCount();\n\tconst page = table.getState().pagination.pageIndex + 1;\n\tconst pageSize = table.getState().pagination.pageSize;\n\tconst pageCount = table.getPageCount();\n\tconst toggleTableLoading = useToggleTableLoadingState();\n\n\tconst onPageChange = (page: number) => {\n\t\tstartTransition(() => {\n\t\t\ttable.setPageIndex(page - 1);\n\t\t});\n\t};\n\tconst onPageSizeChange = (pageSize: number) => {\n\t\tstartTransition(() => {\n\t\t\ttable.setPageSize(pageSize);\n\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\ttoggleTableLoading();\n\t}, [isPending]);\n\n\tif (\n\t\trowCount <= 50 \|\|\n\t\t(table.options.meta as { disablePagination?: boolean })\n\t\t\t?.disablePagination\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DataTableToolbar\n\t\t\t/\n\t\t\t// @ts-ignore /\n\t\t\tstyle={{ position: \"unset\" }}\n\t\t\tposition=\"bottom\"\n\t\t>\n\t\t\t<div style={{ width: \"stretch\" }}>\n\t\t\t\t<Pagination\n\t\t\t\t\ttotal={rowCount}\n\t\t\t\t\tpageCount={pageCount}\n\t\t\t\t\tpageSizes={[10, 20, 30, 40, 50, 100].map((size) =>\n\t\t\t\t\t\tsize.toString(),\n\t\t\t\t\t)}\n\t\t\t\t\tpage={page}\n\t\t\t\t\tpageSize={pageSize}\n\t\t\t\t\tonPageChange={onPageChange}\n\t\t\t\t\tonPageSizeChange={onPageSizeChange}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</DataTableToolbar>\n\t);\n}\n"]}

package/dist/components/index.js CHANGED Viewed

@@ -10,6 +10,7 @@ var ScorecardHeader = require('./ScorecardHeader');
 var ScorecardLegendsView = require('./ScorecardLegendsView');
 var StateProvider = require('./StateProvider');
 var TableStateProvider = require('./TableStateProvider');
+var HighlightedItems = require('./HighlightedItems');
@@ -73,5 +74,11 @@ Object.keys(TableStateProvider).forEach(function (k) {
 		get: function () { return TableStateProvider[k]; }
 	});
 });
+Object.keys(HighlightedItems).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return HighlightedItems[k]; }
+	});
+});
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/components/HighlightedItems/components/HighlightedItem.js ADDED Viewed

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { getLegend, getTextColorFromBackgroundColor } from '../../../utils/legends';
+import { useScorecardMeta } from '../../MetaProvider';
+import { useScorecardConfig } from '../../ConfigProvider';
+import { colors } from '@dhis2/ui';
+function HighlightedItem({
+  item,
+  data
+}) {
+  const config = useScorecardConfig();
+  const meta = useScorecardMeta();
+  const legendDefinition = useMemo(() => {
+    return data ? getLegend({
+      dataSource: item,
+      value: parseFloat(data),
+      orgUnitLevels: meta.orgUnitLevels,
+      config
+    }) : void 0;
+  }, [item, data, meta, config]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: 16,
+        justifyContent: "space-between",
+        border: `1px solid ${colors.grey500}`,
+        borderRadius: 4,
+        minHeight: 48,
+        alignItems: "center",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { padding: 8, fontSize: 14 }, children: item.label ?? item.name }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              minHeight: 48,
+              height: "100%",
+              width: 100,
+              display: "flex",
+              justifyContent: "center",
+              borderLeft: `1px solid ${colors.grey500}`,
+              alignItems: "center",
+              padding: 8,
+              background: legendDefinition?.color,
+              color: legendDefinition?.color ? getTextColorFromBackgroundColor(
+                legendDefinition?.color
+              ) : void 0
+            },
+            children: /* @__PURE__ */ jsx("b", { children: data })
+          }
+        )
+      ]
+    }
+  );
+}
+export { HighlightedItem };
+//# sourceMappingURL=HighlightedItem.js.map
+//# sourceMappingURL=HighlightedItem.js.map

package/dist/esm/components/HighlightedItems/components/HighlightedItem.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/components/HighlightedItems/components/HighlightedItem.tsx"],"names":[],"mappings":";;;;;;;AAUO,SAAS,eAAA,CAAgB;AAAA,EAC/B,IAAA;AAAA,EACA;AACD,CAAA,EAGG;AACF,EAAA,MAAM,SAAS,kBAAA,EAAmB;AAClC,EAAA,MAAM,OAAO,gBAAA,EAAiB;AAC9B,EAAA,MAAM,gBAAA,GAAmB,QAAQ,MAAM;AACtC,IAAA,OAAO,OACJ,SAAA,CAAU;AAAA,MACV,UAAA,EAAY,IAAA;AAAA,MACZ,KAAA,EAAO,WAAW,IAAI,CAAA;AAAA,MACtB,eAAe,IAAA,CAAM,aAAA;AAAA,MACrB;AAAA,KACA,CAAA,GACA,MAAA;AAAA,EACJ,GAAG,CAAC,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,CAAC,CAAA;AAE7B,EAAA,uBACC,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,OAAA,EAAS,MAAA;AAAA,QACT,GAAA,EAAK,EAAA;AAAA,QACL,cAAA,EAAgB,eAAA;AAAA,QAChB,MAAA,EAAQ,CAAA,UAAA,EAAa,MAAA,CAAO,OAAO,CAAA,CAAA;AAAA,QACnC,YAAA,EAAc,CAAA;AAAA,QACd,SAAA,EAAW,EAAA;AAAA,QACX,UAAA,EAAY,QAAA;AAAA,QACZ,KAAA,EAAO;AAAA,OACR;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,OAAA,EAAS,CAAA,EAAG,QAAA,EAAU,EAAA,EAAG,EACtC,QAAA,EAAA,IAAA,CAAK,KAAA,IAAS,IAAA,CAAK,IAAA,EACrB,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACA,KAAA,EAAO;AAAA,cACN,SAAA,EAAW,EAAA;AAAA,cACX,MAAA,EAAQ,MAAA;AAAA,cACR,KAAA,EAAO,GAAA;AAAA,cACP,OAAA,EAAS,MAAA;AAAA,cACT,cAAA,EAAgB,QAAA;AAAA,cAChB,UAAA,EAAY,CAAA,UAAA,EAAa,MAAA,CAAO,OAAO,CAAA,CAAA;AAAA,cACvC,UAAA,EAAY,QAAA;AAAA,cACZ,OAAA,EAAS,CAAA;AAAA,cACT,YAAY,gBAAA,EAAkB,KAAA;AAAA,cAC9B,KAAA,EAAO,kBAAkB,KAAA,GACtB,+BAAA;AAAA,gBACA,gBAAA,EAAkB;AAAA,eACnB,GACC;AAAA,aACJ;AAAA,YAEA,QAAA,kBAAA,GAAA,CAAC,OAAG,QAAA,EAAA,IAAA,EAAK;AAAA;AAAA;AACV;AAAA;AAAA,GACD;AAEF","file":"HighlightedItem.js","sourcesContent":["import type { ScorecardDataSource } from \"../../../schemas/config\";\nimport { useMemo } from \"react\";\nimport {\n\tgetLegend,\n\tgetTextColorFromBackgroundColor,\n} from \"../../../utils/legends\";\nimport { useScorecardMeta } from \"../../MetaProvider\";\nimport { useScorecardConfig } from \"../../ConfigProvider\";\nimport { colors } from \"@dhis2/ui\";\n\nexport function HighlightedItem({\n\titem,\n\tdata,\n}: {\n\titem: ScorecardDataSource;\n\tdata?: string;\n}) {\n\tconst config = useScorecardConfig();\n\tconst meta = useScorecardMeta();\n\tconst legendDefinition = useMemo(() => {\n\t\treturn data\n\t\t\t? getLegend({\n\t\t\t\t\tdataSource: item,\n\t\t\t\t\tvalue: parseFloat(data),\n\t\t\t\t\torgUnitLevels: meta!.orgUnitLevels,\n\t\t\t\t\tconfig: config!,\n\t\t\t\t})\n\t\t\t: undefined;\n\t}, [item, data, meta, config]);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tgap: 16,\n\t\t\t\tjustifyContent: \"space-between\",\n\t\t\t\tborder: `1px solid ${colors.grey500}`,\n\t\t\t\tborderRadius: 4,\n\t\t\t\tminHeight: 48,\n\t\t\t\talignItems: \"center\",\n\t\t\t\twidth: \"100%\",\n\t\t\t}}\n\t\t>\n\t\t\t<span style={{ padding: 8, fontSize: 14 }}>\n\t\t\t\t{item.label ?? item.name}\n\t\t\t</span>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tminHeight: 48,\n\t\t\t\t\theight: \"100%\",\n\t\t\t\t\twidth: 100,\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\tjustifyContent: \"center\",\n\t\t\t\t\tborderLeft: `1px solid ${colors.grey500}`,\n\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\tpadding: 8,\n\t\t\t\t\tbackground: legendDefinition?.color,\n\t\t\t\t\tcolor: legendDefinition?.color\n\t\t\t\t\t\t? getTextColorFromBackgroundColor(\n\t\t\t\t\t\t\t\tlegendDefinition?.color,\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t: undefined,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<b>{data}</b>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/esm/components/HighlightedItems/hooks/data.js ADDED Viewed

@@ -0,0 +1,49 @@
+import { useScorecardMeta } from '../../MetaProvider';
+import { useScorecardConfig } from '../../ConfigProvider';
+import { useMemo } from 'react';
+import { useDataQuery } from '@dhis2/app-runtime';
+const query = {
+  data: {
+    resource: "analytics",
+    params: ({
+      periods,
+      orgUnits,
+      dataItems
+    }) => {
+      return {
+        skipMeta: true,
+        dimension: [`dx:${dataItems.join(";")}`],
+        filter: [`ou:${orgUnits.join(";")}`, `pe:${periods.join(";")}`]
+      };
+    }
+  }
+};
+function useHighlightedItemsData() {
+  const meta = useScorecardMeta();
+  const { highlightedIndicators } = useScorecardConfig();
+  const dimensions = useMemo(() => {
+    const periods = meta?.periods.map((period) => period.uid) || [];
+    const orgUnits = meta?.orgUnits.map((orgUnit) => orgUnit.uid) || [];
+    const dataItems = highlightedIndicators.map(
+      (indicator) => indicator.id
+    );
+    return {
+      periods,
+      orgUnits,
+      dataItems
+    };
+  }, [highlightedIndicators, meta]);
+  const { data, loading, error } = useDataQuery(query, {
+    variables: dimensions
+  });
+  return {
+    data: data?.data,
+    loading,
+    error
+  };
+}
+export { useHighlightedItemsData };
+//# sourceMappingURL=data.js.map
+//# sourceMappingURL=data.js.map

package/dist/esm/components/HighlightedItems/hooks/data.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/components/HighlightedItems/hooks/data.ts"],"names":[],"mappings":";;;;;AAMA,MAAM,KAAA,GAAa;AAAA,EAClB,IAAA,EAAM;AAAA,IACL,QAAA,EAAU,WAAA;AAAA,IACV,QAAQ,CAAC;AAAA,MACR,OAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACD,KAIM;AACL,MAAA,OAAO;AAAA,QACN,QAAA,EAAU,IAAA;AAAA,QACV,WAAW,CAAC,CAAA,GAAA,EAAM,UAAU,IAAA,CAAK,GAAG,CAAC,CAAA,CAAE,CAAA;AAAA,QACvC,MAAA,EAAQ,CAAC,CAAA,GAAA,EAAM,QAAA,CAAS,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA,EAAI,CAAA,GAAA,EAAM,OAAA,CAAQ,IAAA,CAAK,GAAG,CAAC,CAAA,CAAE;AAAA,OAC/D;AAAA,IACD;AAAA;AAEF,CAAA;AAEO,SAAS,uBAAA,GAA0B;AACzC,EAAA,MAAM,OAAO,gBAAA,EAAiB;AAE9B,EAAA,MAAM,EAAE,qBAAA,EAAsB,GAAI,kBAAA,EAAmB;AACrD,EAAA,MAAM,UAAA,GAAa,QAAQ,MAAM;AAChC,IAAA,MAAM,OAAA,GAAU,MAAM,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,KAAW,MAAA,CAAO,GAAG,CAAA,IAAK,EAAC;AAC9D,IAAA,MAAM,QAAA,GAAW,MAAM,QAAA,CAAS,GAAA,CAAI,CAAC,OAAA,KAAY,OAAA,CAAQ,GAAG,CAAA,IAAK,EAAC;AAClE,IAAA,MAAM,YAAY,qBAAA,CAAsB,GAAA;AAAA,MACvC,CAAC,cAAc,SAAA,CAAU;AAAA,KAC1B;AACA,IAAA,OAAO;AAAA,MACN,OAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACD;AAAA,EACD,CAAA,EAAG,CAAC,qBAAA,EAAuB,IAAI,CAAC,CAAA;AAChC,EAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAS,KAAA,EAAM,GAAI,aAAkC,KAAA,EAAO;AAAA,IACzE,SAAA,EAAW;AAAA,GACX,CAAA;AAED,EAAA,OAAO;AAAA,IACN,MAAM,IAAA,EAAM,IAAA;AAAA,IACZ,OAAA;AAAA,IACA;AAAA,GACD;AACD","file":"data.js","sourcesContent":["import { useScorecardMeta } from \"../../MetaProvider\";\nimport { useScorecardConfig } from \"../../ConfigProvider\";\nimport { useMemo } from \"react\";\nimport { useDataQuery } from \"@dhis2/app-runtime\";\nimport type { Analytics } from \"@hisptz/dhis2-utils\";\n\nconst query: any = {\n\tdata: {\n\t\tresource: \"analytics\",\n\t\tparams: ({\n\t\t\tperiods,\n\t\t\torgUnits,\n\t\t\tdataItems,\n\t\t}: {\n\t\t\tperiods: string[];\n\t\t\torgUnits: string[];\n\t\t\tdataItems: string[];\n\t\t}) => {\n\t\t\treturn {\n\t\t\t\tskipMeta: true,\n\t\t\t\tdimension: [`dx:${dataItems.join(\";\")}`],\n\t\t\t\tfilter: [`ou:${orgUnits.join(\";\")}`, `pe:${periods.join(\";\")}`],\n\t\t\t};\n\t\t},\n\t},\n};\n\nexport function useHighlightedItemsData() {\n\tconst meta = useScorecardMeta();\n\n\tconst { highlightedIndicators } = useScorecardConfig();\n\tconst dimensions = useMemo(() => {\n\t\tconst periods = meta?.periods.map((period) => period.uid) || [];\n\t\tconst orgUnits = meta?.orgUnits.map((orgUnit) => orgUnit.uid) || [];\n\t\tconst dataItems = highlightedIndicators.map(\n\t\t\t(indicator) => indicator.id,\n\t\t);\n\t\treturn {\n\t\t\tperiods,\n\t\t\torgUnits,\n\t\t\tdataItems,\n\t\t};\n\t}, [highlightedIndicators, meta]);\n\tconst { data, loading, error } = useDataQuery<{ data: Analytics }>(query, {\n\t\tvariables: dimensions,\n\t});\n\n\treturn {\n\t\tdata: data?.data,\n\t\tloading,\n\t\terror,\n\t};\n}\n"]}

package/dist/esm/components/HighlightedItems/index.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { useHighlightedItemsData } from './hooks/data';
+import { CircularLoader } from '@dhis2/ui';
+import { useScorecardConfig } from '../ConfigProvider';
+import { HighlightedItem } from './components/HighlightedItem';
+function HighlightedItems() {
+  const { highlightedIndicators } = useScorecardConfig();
+  const { loading, error, data } = useHighlightedItemsData();
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CircularLoader, { small: true }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gap: 16,
+        gridTemplateColumns: "repeat(auto-fill, minmax(400px, 1fr))"
+      },
+      children: highlightedIndicators?.map((item) => {
+        const value = data?.rows?.find(
+          (row) => row.includes(item.id)
+        )?.[1];
+        return /* @__PURE__ */ jsx(HighlightedItem, { item, data: value }, item.id);
+      })
+    }
+  );
+}
+export { HighlightedItems };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/components/HighlightedItems/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/components/HighlightedItems/index.tsx"],"names":[],"mappings":";;;;;;AAKO,SAAS,gBAAA,GAAmB;AAClC,EAAA,MAAM,EAAE,qBAAA,EAAsB,GAAI,kBAAA,EAAmB;AACrD,EAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,IAAA,KAAS,uBAAA,EAAwB;AAEzD,EAAA,IAAI,OAAA,EAAS;AACZ,IAAA,2BACE,KAAA,EAAA,EACA,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAK,MAAC,CAAA,EACvB,CAAA;AAAA,EAEF;AAEA,EAAA,uBACC,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,OAAA,EAAS,MAAA;AAAA,QACT,GAAA,EAAK,EAAA;AAAA,QACL,mBAAA,EAAqB;AAAA,OACtB;AAAA,MAEC,QAAA,EAAA,qBAAA,EAAuB,GAAA,CAAI,CAAC,IAAA,KAAS;AACrC,QAAA,MAAM,KAAA,GAAQ,MAAM,IAAA,EAAM,IAAA;AAAA,UAAK,CAAC,GAAA,KAC/B,GAAA,CAAI,QAAA,CAAS,KAAK,EAAE;AAAA,YACjB,CAAC,CAAA;AACL,QAAA,2BACE,eAAA,EAAA,EAA8B,IAAA,EAAY,IAAA,EAAM,KAAA,EAAA,EAA3B,KAAK,EAA6B,CAAA;AAAA,MAE1D,CAAC;AAAA;AAAA,GACF;AAEF","file":"index.js","sourcesContent":["import { useHighlightedItemsData } from \"./hooks/data\";\nimport { CircularLoader } from \"@dhis2/ui\";\nimport { useScorecardConfig } from \"../ConfigProvider\";\nimport { HighlightedItem } from \"./components/HighlightedItem\";\n\nexport function HighlightedItems() {\n\tconst { highlightedIndicators } = useScorecardConfig();\n\tconst { loading, error, data } = useHighlightedItemsData();\n\n\tif (loading) {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<CircularLoader small />\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: \"grid\",\n\t\t\t\tgap: 16,\n\t\t\t\tgridTemplateColumns: \"repeat(auto-fill, minmax(400px, 1fr))\",\n\t\t\t}}\n\t\t>\n\t\t\t{highlightedIndicators?.map((item) => {\n\t\t\t\tconst value = data?.rows?.find((row) =>\n\t\t\t\t\trow.includes(item.id),\n\t\t\t\t)?.[1];\n\t\t\t\treturn (\n\t\t\t\t\t<HighlightedItem key={item.id} item={item} data={value} />\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n"]}

package/dist/esm/components/ScorecardLegendsView/components/LegendView.js CHANGED Viewed

@@ -10,7 +10,7 @@ function LegendsView({ legends }) {
     /* @__PURE__ */ jsx("col", { width: "60%" }),
     /* @__PURE__ */ jsx("col", { width: "20%" }),
     /* @__PURE__ */ jsx("col", { width: "20%" }),
-    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+    /* @__PURE__ */ jsx("thead", { style: { fontSize: 14 }, children: /* @__PURE__ */ jsxs("tr", { children: [
       /* @__PURE__ */ jsx("th", { align: "left", children: i18n.t("Legend") }),
       /* @__PURE__ */ jsx("th", { children: i18n.t("Min") }),
       /* @__PURE__ */ jsx("th", { children: i18n.t("Max") })
@@ -19,27 +19,43 @@ function LegendsView({ legends }) {
       const legendDefinition = find(legendDefinitions, {
         id: legend.legendDefinitionId
       });
-      return /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("table", { children: [
-          /* @__PURE__ */ jsx("col", { width: "20%" }),
-          /* @__PURE__ */ jsx("col", { width: "80%" }),
-          /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs(
+        "tr",
+        {
+          style: {
+            fontSize: 14
+          },
+          children: [
+            /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs(
               "div",
               {
                 style: {
-                  height: 24,
-                  width: 32,
-                  background: legendDefinition?.color
-                }
+                  display: "grid",
+                  alignItems: "center",
+                  gap: 8,
+                  gridTemplateColumns: "32px 1fr"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        height: 24,
+                        width: 32,
+                        background: legendDefinition?.color
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { children: legendDefinition?.name })
+                ]
               }
             ) }),
-            /* @__PURE__ */ jsx("td", { children: legendDefinition?.name })
-          ] }) })
-        ] }) }),
-        /* @__PURE__ */ jsx("td", { align: "center", children: legend?.startValue }),
-        /* @__PURE__ */ jsx("td", { align: "center", children: legend?.endValue })
-      ] }, `${legend.id}-view`);
+            /* @__PURE__ */ jsx("td", { align: "center", children: legend?.startValue }),
+            /* @__PURE__ */ jsx("td", { align: "center", children: legend?.endValue })
+          ]
+        },
+        `${legend.id}-view`
+      );
     }) })
   ] }) });
 }

package/dist/esm/components/ScorecardLegendsView/components/LegendView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/ScorecardLegendsView/components/LegendView.tsx"],"names":[],"mappings":";;;;;AAYO,SAAS,WAAA,CAAY,EAAE,OAAA,EAAQ,EAAqB;AAC1D,EAAA,MAAM,SAAS,kBAAA,EAAmB;AAClC,EAAA,MAAM,iBAAA,GAAoB,MAAA,CAAO,iBAAA,IAAqB,EAAC;AAEvD,EAAA,uBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EACd,+BAAC,OAAA,EAAA,EACA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,OAAM,KAAA,EAAM,CAAA;AAAA,oBACjB,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,KAAA,EAAM,CAAA;AAAA,oBACjB,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,KAAA,EAAM,CAAA;AAAA,oBACjB,GAAA,CAAC,~~OAAA~~,~~EAAA~~,~~EACA~~,~~QAAA~~,~~kBAAA~~,~~IAAA~~,~~CAAC~~,IAAA,EAAA,EACA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAG,KAAA,EAAM,MAAA,EAAQ,QAAA,EAAA,IAAA,CAAK,CAAA,CAAE,QAAQ,CAAA,EAAE,CAAA;AAAA,sBACnC,GAAA,CAAC,IAAA,EAAA,EAAI,QAAA,EAAA,IAAA,CAAK,CAAA,CAAE,KAAK,CAAA,EAAE,CAAA;AAAA,sBACnB,GAAA,CAAC,IAAA,EAAA,EAAI,QAAA,EAAA,IAAA,CAAK,CAAA,CAAE,KAAK,CAAA,EAAE;AAAA,KAAA,EACpB,CAAA,EACD,CAAA;AAAA,oBACA,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA,OAAA,EAAS,GAAA,CAAI,CAAC,MAAA,KAAW;AACzB,MAAA,MAAM,gBAAA,GAAmB,KAAK,iBAAA,EAAmB;AAAA,QAChD,IAAI,MAAA,CAAO;AAAA,OACX,CAAA;AACD,MAAA,~~4BACE~~,IAAA,~~EAAA~~,~~EACA~~,QAAA~~,EAAA~~;AAAA,~~wBAAA~~,~~GAAA~~,~~CAAC~~,~~IAAA~~,~~EAAA~~,~~EACA,+BAAC~~,~~OAAA~~,~~EAAA~~,~~EACA,~~QAAA,EAAA;AAAA,~~0BAAA~~,GAAA,CAAC,~~KAAA~~,EAAA,~~EAAI~~,~~OAAM~~,~~KAAA~~,~~EAAM,CAAA~~;AAAA,~~0BACjB~~,~~GAAA,CAAC,~~KAAA,~~EAAA~~,~~EAAI~~,KAAA,~~EAAM~~,~~KAAA~~,~~EAAM~~,~~CAAA~~;AAAA,~~0BACjB~~,~~GAAA~~,~~CAAC~~,~~OAAA~~,~~EAAA~~,~~EACA~~,~~QAAA~~,~~kBAAA~~,~~IAAA~~,~~CAAC~~,~~IAAA~~,~~EAAA~~,~~EACA~~,QAAA,EAAA;AAAA,~~4BAAA~~,GAAA,CAAC,~~IAAA~~,EAAA,EACA,QAAA,kBAAA,GAAA;AAAA,~~cAAC~~,KAAA;AAAA,~~cAAA~~;AAAA,~~gBACA~~,KAAA,EAAO;AAAA,~~kBACN~~,MAAA,EAAQ,EAAA;AAAA,~~kBACR~~,KAAA,EAAO,EAAA;AAAA,~~kBACP~~,YACC,gBAAA,EAAkB;AAAA;AACpB;AAAA,~~aACD~~,EACD,CAAA;AAAA,~~4BACA~~,GAAA,CAAC,~~IAAA~~,EAAA,~~EACC~~,QAAA,EAAA,gBAAA,EAAkB,IAAA,~~EACpB~~;AAAA~~,WAAA,EACD,CAAA,EACD~~;AAAA,~~SAAA~~,EACD,CAAA~~,EACD,CAAA~~;AAAA,~~wBACA~~,GAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAM,QAAA,EAAU,kBAAQ,UAAA,EAAW,CAAA;AAAA,~~wBACvC~~,GAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAM,QAAA,EAAU,kBAAQ,QAAA,EAAS;AAAA,~~OAAA~~,~~EAAA~~,~~EAzB7B,~~CAAA,EAAG,~~MAAA~~,~~CAAO,~~EAAE,CAAA,KAAA,~~CA0BrB,CAAA~~;AAAA,IAEF,CAAC,CAAA,EACF;AAAA,GAAA,EACD,CAAA,EACD,CAAA;AAEF;AAMO,SAAS,UAAA,CAAW,EAAE,MAAA,EAAO,EAAoB;AACvD,EAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,EAAA,EAAG,GAAI,MAAA;AAC5B,EAAA,uBACC,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEA,OAAO,EAAE,OAAA,EAAS,QAAQ,GAAA,EAAK,CAAA,EAAG,qBAAqB,UAAA,EAAW;AAAA,MAElE,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACA,KAAA,EAAO;AAAA,cACN,KAAA,EAAO,EAAA;AAAA,cACP,MAAA,EAAQ,EAAA;AAAA,cACR,UAAA,EAAY,KAAA;AAAA,cACZ,MAAA,EAAQ,8BAAA;AAAA,cACR,OAAA,EAAS;AAAA;AACV;AAAA,SACD;AAAA,wBACA,GAAA,CAAC,OAAE,KAAA,EAAO,EAAE,aAAa,CAAA,EAAG,WAAA,EAAa,CAAA,EAAE,EAAI,QAAA,EAAA,IAAA,EAAK;AAAA;AAAA,KAAA;AAAA,IAZ/C;AAAA,GAaN;AAEF","file":"LegendView.js","sourcesContent":["import i18n from \"@dhis2/d2-i18n\";\nimport { find } from \"lodash\";\nimport { useScorecardConfig } from \"../../ConfigProvider\";\nimport type {\n\tLegendDefinition,\n\tScorecardLegend,\n} from \"../../../schemas/config\";\n\nexport interface LegendsViewProps {\n\tlegends: ScorecardLegend[];\n}\n\nexport function LegendsView({ legends }: LegendsViewProps) {\n\tconst config = useScorecardConfig();\n\tconst legendDefinitions = config.legendDefinitions ?? [];\n\n\treturn (\n\t\t<div className=\"column gap-8\">\n\t\t\t<table>\n\t\t\t\t<col width=\"60%\" />\n\t\t\t\t<col width=\"20%\" />\n\t\t\t\t<col width=\"20%\" />\n\t\t\t\t<thead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th align=\"left\">{i18n.t(\"Legend\")}</th>\n\t\t\t\t\t\t<th>{i18n.t(\"Min\")}</th>\n\t\t\t\t\t\t<th>{i18n.t(\"Max\")}</th>\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t{legends?.map((legend) => {\n\t\t\t\t\t\tconst legendDefinition = find(legendDefinitions, {\n\t\t\t\t\t\t\tid: legend.legendDefinitionId,\n\t\t\t\t\t\t});\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<tr ~~key={`${legend.id}-view`}>\~~n\t\t\t\t\t\t\t\~~t<td>\~~n\t\t\t\t\t\t\t\t\~~t<table>\~~n\t\t\t\t\t\t\t\t\t\t~~<col width=\"20%\" />\n~~\t\t\t\t\t\t\t\t\t\t~~<col width=\"80%\" />\n~~\t\t\t\t\t\t\t\t\t\t<~~tbody~~>\n\t\t\t\t\t\t\t\t\t\t\t~~<tr>\n~~\t\t\t\t\t\t\t\t\t\t\t\t~~<td>\n~~\t\t\t\t\t\t\t\t\t\t\t\t\t~~<div~~\n\t\t\t\t\t\t\t\t\t\t\t\t\t\~~tstyle={{\~~n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\~~theight: 24,\n~~\t\t\t\t\t\t\t\t\t\t\t\t\t\t~~\twidth: 32,\~~n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\~~tbackground:\n~~\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\~~tlegendDefinition?.color,\n\~~t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\~~t/>\~~n\t\t\t\t\t\t\t\t\t\t\t\t~~</td>\~~n\t\t\t\t\t\t\t\t\t\t\t\t~~<td>\n~~\t\t\t\t\t\t\t\t\t\t\t\t\t~~{legendDefinition?.name~~}\n\t\t\t\t\t\t\t\t\t\t\t~~\t</td>\~~n\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t</~~tbody~~>\n\t\t\t\t\t\t\t\t\t</~~table~~>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t<td align=\"center\">{legend?.startValue}</td>\n\t\t\t\t\t\t\t\t<td align=\"center\">{legend?.endValue}</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t</div>\n\t);\n}\n\nexport interface LegendViewProps {\n\tlegend: LegendDefinition;\n}\n\nexport function LegendView({ legend }: LegendViewProps) {\n\tconst { color, name, id } = legend;\n\treturn (\n\t\t<div\n\t\t\tkey={id}\n\t\t\tstyle={{ display: \"grid\", gap: 8, gridTemplateColumns: \"auto 1fr\" }}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: 60,\n\t\t\t\t\theight: 25,\n\t\t\t\t\tbackground: color,\n\t\t\t\t\tborder: \"1px solid rgb(232, 237, 242)\",\n\t\t\t\t\tpadding: 16,\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<p style={{ paddingLeft: 8, marginRight: 8 }}>{name}</p>\n\t\t</div>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["../../../../../src/components/ScorecardLegendsView/components/LegendView.tsx"],"names":[],"mappings":"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","file":"LegendView.js","sourcesContent":["import i18n from \"@dhis2/d2-i18n\";\nimport { find } from \"lodash\";\nimport { useScorecardConfig } from \"../../ConfigProvider\";\nimport type {\n\tLegendDefinition,\n\tScorecardLegend,\n} from \"../../../schemas/config\";\n\nexport interface LegendsViewProps {\n\tlegends: ScorecardLegend[];\n}\n\nexport function LegendsView({ legends }: LegendsViewProps) {\n\tconst config = useScorecardConfig();\n\tconst legendDefinitions = config.legendDefinitions ?? [];\n\n\treturn (\n\t\t<div className=\"column gap-8\">\n\t\t\t<table>\n\t\t\t\t<col width=\"60%\" />\n\t\t\t\t<col width=\"20%\" />\n\t\t\t\t<col width=\"20%\" />\n\t\t\t\t<thead style={{ fontSize: 14 }}>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th align=\"left\">{i18n.t(\"Legend\")}</th>\n\t\t\t\t\t\t<th>{i18n.t(\"Min\")}</th>\n\t\t\t\t\t\t<th>{i18n.t(\"Max\")}</th>\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t{legends?.map((legend) => {\n\t\t\t\t\t\tconst legendDefinition = find(legendDefinitions, {\n\t\t\t\t\t\t\tid: legend.legendDefinitionId,\n\t\t\t\t\t\t});\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<tr\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tkey={`${legend.id}-view`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tdisplay: \"grid\",\n\t\t\t\t\t\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\t\t\t\t\tgridTemplateColumns: \"32px 1fr\",\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\theight: 24,\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: 32,\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlegendDefinition?.color,\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div>{legendDefinition?.name}</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t<td align=\"center\">{legend?.startValue}</td>\n\t\t\t\t\t\t\t\t<td align=\"center\">{legend?.endValue}</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t</div>\n\t);\n}\n\nexport interface LegendViewProps {\n\tlegend: LegendDefinition;\n}\n\nexport function LegendView({ legend }: LegendViewProps) {\n\tconst { color, name, id } = legend;\n\treturn (\n\t\t<div\n\t\t\tkey={id}\n\t\t\tstyle={{ display: \"grid\", gap: 8, gridTemplateColumns: \"auto 1fr\" }}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: 60,\n\t\t\t\t\theight: 25,\n\t\t\t\t\tbackground: color,\n\t\t\t\t\tborder: \"1px solid rgb(232, 237, 242)\",\n\t\t\t\t\tpadding: 16,\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<p style={{ paddingLeft: 8, marginRight: 8 }}>{name}</p>\n\t\t</div>\n\t);\n}\n"]}

package/dist/esm/components/ScorecardLegendsView/components/OrgUnitLevelSpecificTargetView.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { colors } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import { LegendsView } from './LegendView';
 import { useScorecardMeta } from '../../MetaProvider';
+import { colors } from '@dhis2/ui';
 function OrgUnitLevelSpecificTargetView({
   specificTarget,
@@ -14,35 +14,69 @@ function OrgUnitLevelSpecificTargetView({
     "div",
     {
       style: {
-        maxWidth: 350,
-        border: `1px solid ${colors.grey600}`,
         borderRadius: 4,
-        gap: 8
+        gap: 8,
+        maxWidth: "fit-content",
+        display: "flex",
+        flexDirection: "column",
+        padding: 16,
+        fontSize: 14
       },
-      className: "column gap-16 p-16",
       children: [
-        /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { style: { fontSize: 16 }, children: [
           /* @__PURE__ */ jsxs("b", { children: [
             i18n.t("Data Source"),
             ": "
           ] }),
           label
         ] }),
-        /* @__PURE__ */ jsx("div", { style: { gap: 16 }, className: "column gap-8", children: Object.keys(specificTarget).map((key) => {
-          const orgUnitLevel = orgUnitLevels.find(
-            (level) => level.id === key
-          );
-          const legends = specificTarget[key];
-          return /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("div", { className: "column gap-16", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("b", { children: [
-              i18n.t("Organisation Unit Level"),
-              ":",
-              " ",
-              orgUnitLevel?.displayName
-            ] }) }) }),
-            /* @__PURE__ */ jsx(LegendsView, { legends })
-          ] });
-        }) })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              gap: 16,
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr"
+            },
+            children: Object.keys(specificTarget).map((key) => {
+              const orgUnitLevel = orgUnitLevels.find(
+                (level) => level.id === key
+              );
+              const legends = specificTarget[key];
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    border: `1px solid ${colors.grey600}`,
+                    padding: 16,
+                    borderRadius: 4,
+                    fontSize: 14
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: 4
+                        },
+                        children: /* @__PURE__ */ jsxs("div", { children: [
+                          /* @__PURE__ */ jsxs("b", { children: [
+                            i18n.t("Organisation Unit Level"),
+                            ": "
+                          ] }),
+                          orgUnitLevel?.displayName
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(LegendsView, { legends })
+                  ]
+                }
+              );
+            })
+          }
+        )
       ]
     }
   );