@hisptz/dhis2-scorecard 1.2.24 → 1.2.26

package/dist/components/HighlightedItems/components/HighlightedItem.js

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

package/dist/components/HighlightedItems/components/HighlightedItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/HighlightedItems/components/HighlightedItem.tsx"],"names":["useScorecardConfig","useScorecardMeta","useMemo","getLegend","jsxs","colors","jsx","getTextColorFromBackgroundColor"],"mappings":";;;;;;;;;AAUO,SAAS,eAAA,CAAgB;AAAA,EAC/B,IAAA;AAAA,EACA;AACD,CAAA,EAGG;AACF,EAAA,MAAM,SAASA,iCAAA,EAAmB;AAClC,EAAA,MAAM,OAAOC,6BAAA,EAAiB;AAC9B,EAAA,MAAM,gBAAA,GAAmBC,cAAQ,MAAM;AACtC,IAAA,OAAO,OACJC,iBAAA,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,uBACCC,eAAA;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,EAAaC,SAAA,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,wBAAAC,cAAA,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,wBACAA,cAAA;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,EAAaD,SAAA,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,GACtBE,uCAAA;AAAA,gBACA,gBAAA,EAAkB;AAAA,eACnB,GACC;AAAA,aACJ;AAAA,YAEA,QAAA,kBAAAD,cAAA,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/components/HighlightedItems/hooks/data.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var MetaProvider = require('../../MetaProvider');
+var ConfigProvider = require('../../ConfigProvider');
+var react = require('react');
+var appRuntime = require('@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 = MetaProvider.useScorecardMeta();
+  const { highlightedIndicators } = ConfigProvider.useScorecardConfig();
+  const dimensions = react.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 } = appRuntime.useDataQuery(query, {
+    variables: dimensions
+  });
+  return {
+    data: data?.data,
+    loading,
+    error
+  };
+}
+
+exports.useHighlightedItemsData = useHighlightedItemsData;
+//# sourceMappingURL=data.js.map
+//# sourceMappingURL=data.js.map

package/dist/components/HighlightedItems/hooks/data.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/HighlightedItems/hooks/data.ts"],"names":["useScorecardMeta","useScorecardConfig","useMemo","useDataQuery"],"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,OAAOA,6BAAA,EAAiB;AAE9B,EAAA,MAAM,EAAE,qBAAA,EAAsB,GAAIC,iCAAA,EAAmB;AACrD,EAAA,MAAM,UAAA,GAAaC,cAAQ,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,GAAIC,wBAAkC,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/components/HighlightedItems/index.js

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

package/dist/components/HighlightedItems/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/HighlightedItems/index.tsx"],"names":["useScorecardConfig","data","useHighlightedItemsData","jsx","CircularLoader","HighlightedItem"],"mappings":";;;;;;;;AAKO,SAAS,gBAAA,GAAmB;AAClC,EAAA,MAAM,EAAE,qBAAA,EAAsB,GAAIA,iCAAA,EAAmB;AACrD,EAAA,MAAM,EAAE,OAAA,EAAS,KAAA,QAAOC,MAAA,KAASC,4BAAA,EAAwB;AAEzD,EAAA,IAAI,OAAA,EAAS;AACZ,IAAA,sCACE,KAAA,EAAA,EACA,QAAA,kBAAAC,cAAA,CAACC,iBAAA,EAAA,EAAe,KAAA,EAAK,MAAC,CAAA,EACvB,CAAA;AAAA,EAEF;AAEA,EAAA,uBACCD,cAAA;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,GAAQF,QAAM,IAAA,EAAM,IAAA;AAAA,UAAK,CAAC,GAAA,KAC/B,GAAA,CAAI,QAAA,CAAS,KAAK,EAAE;AAAA,YACjB,CAAC,CAAA;AACL,QAAA,sCACEI,+BAAA,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/components/ScorecardLegendsView/components/LegendView.js

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

package/dist/components/ScorecardLegendsView/components/LegendView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScorecardLegendsView/components/LegendView.tsx"],"names":["useScorecardConfig","jsx","jsxs","i18n","find"],"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>\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"]}
+{"version":3,"sources":["../../../../src/components/ScorecardLegendsView/components/LegendView.tsx"],"names":["useScorecardConfig","jsx","i18n","find","jsxs"],"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/components/ScorecardLegendsView/components/OrgUnitLevelSpecificTargetView.js

@@ -1,10 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var ui = require('@dhis2/ui');
 var i18n = require('@dhis2/d2-i18n');
 var LegendView = require('./LegendView');
 var MetaProvider = require('../../MetaProvider');
+var ui = require('@dhis2/ui');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -20,35 +20,69 @@ function OrgUnitLevelSpecificTargetView({
     "div",
     {
       style: {
-        maxWidth: 350,
-        border: `1px solid ${ui.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__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 16 }, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
             i18n__default.default.t("Data Source"),
             ": "
           ] }),
           label
         ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "column gap-16", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
-              i18n__default.default.t("Organisation Unit Level"),
-              ":",
-              " ",
-              orgUnitLevel?.displayName
-            ] }) }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(LegendView.LegendsView, { legends })
-          ] });
-        }) })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    border: `1px solid ${ui.colors.grey600}`,
+                    padding: 16,
+                    borderRadius: 4,
+                    fontSize: 14
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: 4
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+                            i18n__default.default.t("Organisation Unit Level"),
+                            ": "
+                          ] }),
+                          orgUnitLevel?.displayName
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(LegendView.LegendsView, { legends })
+                  ]
+                }
+              );
+            })
+          }
+        )
       ]
     }
   );

package/dist/components/ScorecardLegendsView/components/OrgUnitLevelSpecificTargetView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScorecardLegendsView/components/OrgUnitLevelSpecificTargetView.tsx"],"names":["useScorecardMeta","jsxs","colors","i18n","jsx","LegendsView"],"mappings":";;;;;;;;;;;;AAWO,SAAS,8BAAA,CAA+B;AAAA,EAC9C,cAAA;AAAA,EACA;AACD,CAAA,EAAmC;AAClC,EAAA,MAAM,OAAOA,6BAAA,EAAiB;AAC9B,EAAA,MAAM,aAAA,GAAgB,IAAA,EAAM,aAAA,IAAiB,EAAC;AAE9C,EAAA,uBACCC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,QAAA,EAAU,GAAA;AAAA,QACV,MAAA,EAAQ,CAAA,UAAA,EAAaC,SAAA,CAAO,OAAO,CAAA,CAAA;AAAA,QACnC,YAAA,EAAc,CAAA;AAAA,QACd,GAAA,EAAK;AAAA,OACN;AAAA,MACA,SAAA,EAAU,oBAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAAC,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,YAAAE,qBAAA,CAAK,EAAE,aAAa,CAAA;AAAA,YAAE;AAAA,WAAA,EAAE,CAAA;AAAA,UAC3B;AAAA,SAAA,EACF,CAAA;AAAA,wBACAC,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,KAAK,EAAA,EAAG,EAAG,SAAA,EAAU,cAAA,EACjC,iBAAO,IAAA,CAAK,cAAc,CAAA,CAAE,GAAA,CAAI,CAAC,GAAA,KAAQ;AACzC,UAAA,MAAM,eAAe,aAAA,CAAc,IAAA;AAAA,YAClC,CAAC,KAAA,KAAU,KAAA,CAAM,EAAA,KAAO;AAAA,WACzB;AACA,UAAA,MAAM,OAAA,GAAU,eAAe,GAAG,CAAA;AAClC,UAAA,uCACE,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,4BAAAA,cAAA,CAAC,SAAI,SAAA,EAAU,eAAA,EACd,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EACA,0CAAC,GAAA,EAAA,EACC,QAAA,EAAA;AAAA,cAAAD,qBAAA,CAAK,EAAE,yBAAyB,CAAA;AAAA,cAAE,GAAA;AAAA,cAAE,GAAA;AAAA,cACpC,YAAA,EAAc;AAAA,aAAA,EAChB,GACD,CAAA,EACD,CAAA;AAAA,4BACAC,cAAA,CAACC,0BAAY,OAAA,EAAkB;AAAA,WAAA,EAChC,CAAA;AAAA,QAEF,CAAC,CAAA,EACF;AAAA;AAAA;AAAA,GACD;AAEF","file":"OrgUnitLevelSpecificTargetView.js","sourcesContent":["import { colors } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { LegendsView } from \"./LegendView\";\nimport type { OrgUnitLevelLegend } from \"../../../schemas/config\";\nimport { useScorecardMeta } from \"../../MetaProvider\";\n\nexport interface OrgUnitSpecificTargetViewProps {\n\tspecificTarget: OrgUnitLevelLegend;\n\tlabel: string;\n}\n\nexport function OrgUnitLevelSpecificTargetView({\n\tspecificTarget,\n\tlabel,\n}: OrgUnitSpecificTargetViewProps) {\n\tconst meta = useScorecardMeta();\n\tconst orgUnitLevels = meta?.orgUnitLevels ?? [];\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tmaxWidth: 350,\n\t\t\t\tborder: `1px solid ${colors.grey600}`,\n\t\t\t\tborderRadius: 4,\n\t\t\t\tgap: 8,\n\t\t\t}}\n\t\t\tclassName=\"column gap-16 p-16\"\n\t\t>\n\t\t\t<div>\n\t\t\t\t<b>{i18n.t(\"Data Source\")}: </b>\n\t\t\t\t{label}\n\t\t\t</div>\n\t\t\t<div style={{ gap: 16 }} className=\"column gap-8\">\n\t\t\t\t{Object.keys(specificTarget).map((key) => {\n\t\t\t\t\tconst orgUnitLevel = orgUnitLevels.find(\n\t\t\t\t\t\t(level) => level.id === key,\n\t\t\t\t\t);\n\t\t\t\t\tconst legends = specificTarget[key];\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<div className=\"column gap-16\">\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<b>\n\t\t\t\t\t\t\t\t\t\t{i18n.t(\"Organisation Unit Level\")}:{\" \"}\n\t\t\t\t\t\t\t\t\t\t{orgUnitLevel?.displayName}\n\t\t\t\t\t\t\t\t\t</b>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<LegendsView legends={legends} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../src/components/ScorecardLegendsView/components/OrgUnitLevelSpecificTargetView.tsx"],"names":["useScorecardMeta","jsxs","i18n","jsx","colors","LegendsView"],"mappings":";;;;;;;;;;;;AAWO,SAAS,8BAAA,CAA+B;AAAA,EAC9C,cAAA;AAAA,EACA;AACD,CAAA,EAAmC;AAClC,EAAA,MAAM,OAAOA,6BAAA,EAAiB;AAC9B,EAAA,MAAM,aAAA,GAAgB,IAAA,EAAM,aAAA,IAAiB,EAAC;AAE9C,EAAA,uBACCC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,YAAA,EAAc,CAAA;AAAA,QACd,GAAA,EAAK,CAAA;AAAA,QACL,QAAA,EAAU,aAAA;AAAA,QACV,OAAA,EAAS,MAAA;AAAA,QACT,aAAA,EAAe,QAAA;AAAA,QACf,OAAA,EAAS,EAAA;AAAA,QACT,QAAA,EAAU;AAAA,OACX;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,IAAG,EAC1B,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,YAAAC,qBAAA,CAAK,EAAE,aAAa,CAAA;AAAA,YAAE;AAAA,WAAA,EAAE,CAAA;AAAA,UAC3B;AAAA,SAAA,EACF,CAAA;AAAA,wBACAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACA,KAAA,EAAO;AAAA,cACN,GAAA,EAAK,EAAA;AAAA,cACL,OAAA,EAAS,MAAA;AAAA,cACT,mBAAA,EAAqB;AAAA,aACtB;AAAA,YAEC,iBAAO,IAAA,CAAK,cAAc,CAAA,CAAE,GAAA,CAAI,CAAC,GAAA,KAAQ;AACzC,cAAA,MAAM,eAAe,aAAA,CAAc,IAAA;AAAA,gBAClC,CAAC,KAAA,KAAU,KAAA,CAAM,EAAA,KAAO;AAAA,eACzB;AACA,cAAA,MAAM,OAAA,GAAU,eAAe,GAAG,CAAA;AAClC,cAAA,uBACCF,eAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACA,KAAA,EAAO;AAAA,oBACN,MAAA,EAAQ,CAAA,UAAA,EAAaG,SAAA,CAAO,OAAO,CAAA,CAAA;AAAA,oBACnC,OAAA,EAAS,EAAA;AAAA,oBACT,YAAA,EAAc,CAAA;AAAA,oBACd,QAAA,EAAU;AAAA,mBACX;AAAA,kBAEA,QAAA,EAAA;AAAA,oCAAAD,cAAA;AAAA,sBAAC,KAAA;AAAA,sBAAA;AAAA,wBACA,KAAA,EAAO;AAAA,0BACN,OAAA,EAAS,MAAA;AAAA,0BACT,aAAA,EAAe,QAAA;AAAA,0BACf,GAAA,EAAK;AAAA,yBACN;AAAA,wBAEA,0CAAC,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,0CAAAF,eAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,4BAAAC,qBAAA,CAAK,EAAE,yBAAyB,CAAA;AAAA,4BAAE;AAAA,2BAAA,EAAE,CAAA;AAAA,0BACvC,YAAA,EAAc;AAAA,yBAAA,EAChB;AAAA;AAAA,qBACD;AAAA,oCACAC,cAAA,CAACE,0BAAY,OAAA,EAAkB;AAAA;AAAA;AAAA,eAChC;AAAA,YAEF,CAAC;AAAA;AAAA;AACF;AAAA;AAAA,GACD;AAEF","file":"OrgUnitLevelSpecificTargetView.js","sourcesContent":["import i18n from \"@dhis2/d2-i18n\";\nimport { LegendsView } from \"./LegendView\";\nimport type { OrgUnitLevelLegend } from \"../../../schemas/config\";\nimport { useScorecardMeta } from \"../../MetaProvider\";\nimport { colors } from \"@dhis2/ui\";\n\nexport interface OrgUnitSpecificTargetViewProps {\n\tspecificTarget: OrgUnitLevelLegend;\n\tlabel: string;\n}\n\nexport function OrgUnitLevelSpecificTargetView({\n\tspecificTarget,\n\tlabel,\n}: OrgUnitSpecificTargetViewProps) {\n\tconst meta = useScorecardMeta();\n\tconst orgUnitLevels = meta?.orgUnitLevels ?? [];\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tborderRadius: 4,\n\t\t\t\tgap: 8,\n\t\t\t\tmaxWidth: \"fit-content\",\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tflexDirection: \"column\",\n\t\t\t\tpadding: 16,\n\t\t\t\tfontSize: 14,\n\t\t\t}}\n\t\t>\n\t\t\t<div style={{ fontSize: 16 }}>\n\t\t\t\t<b>{i18n.t(\"Data Source\")}: </b>\n\t\t\t\t{label}\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tgap: 16,\n\t\t\t\t\tdisplay: \"grid\",\n\t\t\t\t\tgridTemplateColumns: \"1fr 1fr\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{Object.keys(specificTarget).map((key) => {\n\t\t\t\t\tconst orgUnitLevel = orgUnitLevels.find(\n\t\t\t\t\t\t(level) => level.id === key,\n\t\t\t\t\t);\n\t\t\t\t\tconst legends = specificTarget[key];\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tborder: `1px solid ${colors.grey600}`,\n\t\t\t\t\t\t\t\tpadding: 16,\n\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<b>{i18n.t(\"Organisation Unit Level\")}: </b>\n\t\t\t\t\t\t\t\t\t{orgUnitLevel?.displayName}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<LegendsView legends={legends} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/components/ScorecardLegendsView/components/OrgUnitSpecificTargetView.js

@@ -30,9 +30,14 @@ function OrgUnitSpecificTargetView({
     "div",
     {
       style: {
-        maxWidth: 350,
+        maxWidth: "fit-content",
         border: `1px solid ${ui.colors.grey600}`,
-        borderRadius: 4
+        borderRadius: 4,
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        padding: 16,
+        fontSize: 14
       },
       className: "column gap-16 p-16",
       children: [

package/dist/components/ScorecardLegendsView/components/OrgUnitSpecificTargetView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScorecardLegendsView/components/OrgUnitSpecificTargetView.tsx"],"names":["useOrgUnits","jsx","CircularLoader","jsxs","colors","i18n","LegendsView"],"mappings":";;;;;;;;;;;;AAWO,SAAS,yBAAA,CAA0B;AAAA,EACzC,cAAA;AAAA,EACA;AACD,CAAA,EAAmC;AAClC,EAAA,MAAM,QAAQ,cAAA,CAAe,KAAA;AAC7B,EAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAS,GAAIA,oBAAY,KAAK,CAAA;AAE/C,EAAA,IAAI,OAAA,EAAS;AACZ,IAAA,uBACCC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACA,KAAA,EAAO,EAAE,QAAA,EAAU,GAAA,EAAK,WAAW,GAAA,EAAI;AAAA,QACvC,SAAA,EAAU,kDAAA;AAAA,QAEV,QAAA,kBAAAA,cAAA,CAACC,iBAAA,EAAA,EAAe,UAAA,EAAU,IAAA,EAAC;AAAA;AAAA,KAC5B;AAAA,EAEF;AAEA,EAAA,uBACCC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,QAAA,EAAU,GAAA;AAAA,QACV,MAAA,EAAQ,CAAA,UAAA,EAAaC,SAAA,CAAO,OAAO,CAAA,CAAA;AAAA,QACnC,YAAA,EAAc;AAAA,OACf;AAAA,MACA,SAAA,EAAU,oBAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,eAAA,EACd,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAAC,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,4BAAAA,eAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,cAAAE,qBAAA,CAAK,EAAE,sBAAsB,CAAA;AAAA,cAAE;AAAA,aAAA,EAAE,CAAA;AAAA,YAAK,GAAA;AAAA,YACzC,QAAA,EAAU,IAAI,CAAC,EAAA,KAAO,GAAG,WAAW,CAAA,EAAG,KAAK,IAAI;AAAA,WAAA,EAClD,CAAA;AAAA,0CACC,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,4BAAAF,eAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,cAAAE,qBAAA,CAAK,EAAE,aAAa,CAAA;AAAA,cAAE;AAAA,aAAA,EAAE,CAAA;AAAA,YAC3B;AAAA,WAAA,EACF;AAAA,SAAA,EACD,CAAA;AAAA,wBACAJ,cAAA,CAACK,sBAAA,EAAA,EAAY,OAAA,EAAS,cAAA,CAAe,OAAA,EAAS;AAAA;AAAA;AAAA,GAC/C;AAEF","file":"OrgUnitSpecificTargetView.js","sourcesContent":["import type { SpecificTarget } from \"../../../schemas/config\";\nimport { CircularLoader, colors } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { LegendsView } from \"./LegendView\";\nimport { useOrgUnits } from \"../../../hooks/orgUnit\";\n\nexport interface OrgUnitSpecificTargetViewProps {\n\tspecificTarget: SpecificTarget;\n\tlabel: string;\n}\n\nexport function OrgUnitSpecificTargetView({\n\tspecificTarget,\n\tlabel,\n}: OrgUnitSpecificTargetViewProps) {\n\tconst items = specificTarget.items;\n\tconst { loading, orgUnits } = useOrgUnits(items);\n\n\tif (loading) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{ minWidth: 200, minHeight: 200 }}\n\t\t\t\tclassName=\"column align-items-center justify-content-center\"\n\t\t\t>\n\t\t\t\t<CircularLoader extrasmall />\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\tmaxWidth: 350,\n\t\t\t\tborder: `1px solid ${colors.grey600}`,\n\t\t\t\tborderRadius: 4,\n\t\t\t}}\n\t\t\tclassName=\"column gap-16 p-16\"\n\t\t>\n\t\t\t<div className=\"column gap-16\">\n\t\t\t\t<div>\n\t\t\t\t\t<b>{i18n.t(\"Organisation Unit(s)\")}: </b>{\" \"}\n\t\t\t\t\t{orgUnits?.map((ou) => ou.displayName)?.join(\", \")}\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<b>{i18n.t(\"Data Source\")}: </b>\n\t\t\t\t\t{label}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<LegendsView legends={specificTarget.legends} />\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../src/components/ScorecardLegendsView/components/OrgUnitSpecificTargetView.tsx"],"names":["useOrgUnits","jsx","CircularLoader","jsxs","colors","i18n","LegendsView"],"mappings":";;;;;;;;;;;;AAWO,SAAS,yBAAA,CAA0B;AAAA,EACzC,cAAA;AAAA,EACA;AACD,CAAA,EAAmC;AAClC,EAAA,MAAM,QAAQ,cAAA,CAAe,KAAA;AAC7B,EAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAS,GAAIA,oBAAY,KAAK,CAAA;AAE/C,EAAA,IAAI,OAAA,EAAS;AACZ,IAAA,uBACCC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACA,KAAA,EAAO,EAAE,QAAA,EAAU,GAAA,EAAK,WAAW,GAAA,EAAI;AAAA,QACvC,SAAA,EAAU,kDAAA;AAAA,QAEV,QAAA,kBAAAA,cAAA,CAACC,iBAAA,EAAA,EAAe,UAAA,EAAU,IAAA,EAAC;AAAA;AAAA,KAC5B;AAAA,EAEF;AAEA,EAAA,uBACCC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,QAAA,EAAU,aAAA;AAAA,QACV,MAAA,EAAQ,CAAA,UAAA,EAAaC,SAAA,CAAO,OAAO,CAAA,CAAA;AAAA,QACnC,YAAA,EAAc,CAAA;AAAA,QACd,OAAA,EAAS,MAAA;AAAA,QACT,aAAA,EAAe,QAAA;AAAA,QACf,GAAA,EAAK,CAAA;AAAA,QACL,OAAA,EAAS,EAAA;AAAA,QACT,QAAA,EAAU;AAAA,OACX;AAAA,MACA,SAAA,EAAU,oBAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,eAAA,EACd,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAAC,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,4BAAAA,eAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,cAAAE,qBAAA,CAAK,EAAE,sBAAsB,CAAA;AAAA,cAAE;AAAA,aAAA,EAAE,CAAA;AAAA,YAAK,GAAA;AAAA,YACzC,QAAA,EAAU,IAAI,CAAC,EAAA,KAAO,GAAG,WAAW,CAAA,EAAG,KAAK,IAAI;AAAA,WAAA,EAClD,CAAA;AAAA,0CACC,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,4BAAAF,eAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,cAAAE,qBAAA,CAAK,EAAE,aAAa,CAAA;AAAA,cAAE;AAAA,aAAA,EAAE,CAAA;AAAA,YAC3B;AAAA,WAAA,EACF;AAAA,SAAA,EACD,CAAA;AAAA,wBACAJ,cAAA,CAACK,sBAAA,EAAA,EAAY,OAAA,EAAS,cAAA,CAAe,OAAA,EAAS;AAAA;AAAA;AAAA,GAC/C;AAEF","file":"OrgUnitSpecificTargetView.js","sourcesContent":["import type { SpecificTarget } from \"../../../schemas/config\";\nimport { CircularLoader, colors } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { LegendsView } from \"./LegendView\";\nimport { useOrgUnits } from \"../../../hooks/orgUnit\";\n\nexport interface OrgUnitSpecificTargetViewProps {\n\tspecificTarget: SpecificTarget;\n\tlabel: string;\n}\n\nexport function OrgUnitSpecificTargetView({\n\tspecificTarget,\n\tlabel,\n}: OrgUnitSpecificTargetViewProps) {\n\tconst items = specificTarget.items;\n\tconst { loading, orgUnits } = useOrgUnits(items);\n\n\tif (loading) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{ minWidth: 200, minHeight: 200 }}\n\t\t\t\tclassName=\"column align-items-center justify-content-center\"\n\t\t\t>\n\t\t\t\t<CircularLoader extrasmall />\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\tmaxWidth: \"fit-content\",\n\t\t\t\tborder: `1px solid ${colors.grey600}`,\n\t\t\t\tborderRadius: 4,\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tflexDirection: \"column\",\n\t\t\t\tgap: 8,\n\t\t\t\tpadding: 16,\n\t\t\t\tfontSize: 14,\n\t\t\t}}\n\t\t\tclassName=\"column gap-16 p-16\"\n\t\t>\n\t\t\t<div className=\"column gap-16\">\n\t\t\t\t<div>\n\t\t\t\t\t<b>{i18n.t(\"Organisation Unit(s)\")}: </b>{\" \"}\n\t\t\t\t\t{orgUnits?.map((ou) => ou.displayName)?.join(\", \")}\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<b>{i18n.t(\"Data Source\")}: </b>\n\t\t\t\t\t{label}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<LegendsView legends={specificTarget.legends} />\n\t\t</div>\n\t);\n}\n"]}

package/dist/components/ScorecardLegendsView/components/PeriodSpecificTargetView.js

@@ -29,27 +29,40 @@ function PeriodSpecificTargetView({
       style: {
         maxWidth: 350,
         border: `1px solid ${ui.colors.grey600}`,
-        borderRadius: 4
+        borderRadius: 4,
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        padding: 16
       },
-      className: "column gap-16 p-16",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "column gap-16", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
-              i18n__default.default.t("Period(s)"),
-              ": "
-            ] }),
-            " ",
-            periods?.map((ou) => ou.displayName)?.join(", ")
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
-              i18n__default.default.t("Data Source"),
-              ": "
-            ] }),
-            label
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              gap: 8,
+              display: "flex",
+              flexDirection: "column"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+                  i18n__default.default.t("Period(s)"),
+                  ": "
+                ] }),
+                " ",
+                periods?.map((ou) => ou.displayName)?.join(", ")
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
+                  i18n__default.default.t("Data Source"),
+                  ": "
+                ] }),
+                label
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(LegendView.LegendsView, { legends: specificTarget.legends })
       ]
     }

package/dist/components/ScorecardLegendsView/components/PeriodSpecificTargetView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScorecardLegendsView/components/PeriodSpecificTargetView.tsx"],"names":["useCalendar","createFixedPeriodFromPeriodId","jsxs","colors","i18n","jsx","LegendsView"],"mappings":";;;;;;;;;;;;;AAYO,SAAS,wBAAA,CAAyB;AAAA,EACxC,cAAA;AAAA,EACA;AACD,CAAA,EAAmC;AAClC,EAAA,MAAM,QAAQ,cAAA,CAAe,KAAA;AAC7B,EAAA,MAAM,WAAWA,oBAAA,EAAY;AAC7B,EAAA,MAAM,UAAU,KAAA,CAAM,GAAA;AAAA,IAAI,CAAC,aAC1BC,gDAAA,CAA8B;AAAA,MAC7B,QAAA;AAAA,MACA;AAAA,KACA;AAAA,GACF;AAEA,EAAA,uBACCC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,QAAA,EAAU,GAAA;AAAA,QACV,MAAA,EAAQ,CAAA,UAAA,EAAaC,SAAA,CAAO,OAAO,CAAA,CAAA;AAAA,QACnC,YAAA,EAAc;AAAA,OACf;AAAA,MACA,SAAA,EAAU,oBAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,eAAA,EACd,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAAC,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,4BAAAA,eAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,cAAAE,qBAAA,CAAK,EAAE,WAAW,CAAA;AAAA,cAAE;AAAA,aAAA,EAAE,CAAA;AAAA,YAAK,GAAA;AAAA,YAC9B,OAAA,EAAS,IAAI,CAAC,EAAA,KAAO,GAAG,WAAW,CAAA,EAAG,KAAK,IAAI;AAAA,WAAA,EACjD,CAAA;AAAA,0CACC,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,4BAAAF,eAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,cAAAE,qBAAA,CAAK,EAAE,aAAa,CAAA;AAAA,cAAE;AAAA,aAAA,EAAE,CAAA;AAAA,YAC3B;AAAA,WAAA,EACF;AAAA,SAAA,EACD,CAAA;AAAA,wBACAC,cAAA,CAACC,sBAAA,EAAA,EAAY,OAAA,EAAS,cAAA,CAAe,OAAA,EAAS;AAAA;AAAA;AAAA,GAC/C;AAEF","file":"PeriodSpecificTargetView.js","sourcesContent":["import { colors } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { LegendsView } from \"./LegendView\";\nimport { createFixedPeriodFromPeriodId } from \"@dhis2/multi-calendar-dates\";\nimport { useCalendar } from \"../../../hooks/metadata\";\nimport type { SpecificTarget } from \"../../../schemas/config\";\n\nexport interface OrgUnitSpecificTargetViewProps {\n\tspecificTarget: SpecificTarget;\n\tlabel: string;\n}\n\nexport function PeriodSpecificTargetView({\n\tspecificTarget,\n\tlabel,\n}: OrgUnitSpecificTargetViewProps) {\n\tconst items = specificTarget.items;\n\tconst calendar = useCalendar();\n\tconst periods = items.map((periodId) =>\n\t\tcreateFixedPeriodFromPeriodId({\n\t\t\tcalendar,\n\t\t\tperiodId,\n\t\t}),\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tmaxWidth: 350,\n\t\t\t\tborder: `1px solid ${colors.grey600}`,\n\t\t\t\tborderRadius: 4,\n\t\t\t}}\n\t\t\tclassName=\"column gap-16 p-16\"\n\t\t>\n\t\t\t<div className=\"column gap-16\">\n\t\t\t\t<div>\n\t\t\t\t\t<b>{i18n.t(\"Period(s)\")}: </b>{\" \"}\n\t\t\t\t\t{periods?.map((ou) => ou.displayName)?.join(\", \")}\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<b>{i18n.t(\"Data Source\")}: </b>\n\t\t\t\t\t{label}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<LegendsView legends={specificTarget.legends} />\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../src/components/ScorecardLegendsView/components/PeriodSpecificTargetView.tsx"],"names":["useCalendar","createFixedPeriodFromPeriodId","jsxs","colors","i18n","jsx","LegendsView"],"mappings":";;;;;;;;;;;;;AAYO,SAAS,wBAAA,CAAyB;AAAA,EACxC,cAAA;AAAA,EACA;AACD,CAAA,EAAmC;AAClC,EAAA,MAAM,QAAQ,cAAA,CAAe,KAAA;AAC7B,EAAA,MAAM,WAAWA,oBAAA,EAAY;AAC7B,EAAA,MAAM,UAAU,KAAA,CAAM,GAAA;AAAA,IAAI,CAAC,aAC1BC,gDAAA,CAA8B;AAAA,MAC7B,QAAA;AAAA,MACA;AAAA,KACA;AAAA,GACF;AAEA,EAAA,uBACCC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,QAAA,EAAU,GAAA;AAAA,QACV,MAAA,EAAQ,CAAA,UAAA,EAAaC,SAAA,CAAO,OAAO,CAAA,CAAA;AAAA,QACnC,YAAA,EAAc,CAAA;AAAA,QACd,OAAA,EAAS,MAAA;AAAA,QACT,aAAA,EAAe,QAAA;AAAA,QACf,GAAA,EAAK,CAAA;AAAA,QACL,OAAA,EAAS;AAAA,OACV;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAD,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACA,KAAA,EAAO;AAAA,cACN,GAAA,EAAK,CAAA;AAAA,cACL,OAAA,EAAS,MAAA;AAAA,cACT,aAAA,EAAe;AAAA,aAChB;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAA,eAAA,CAAC,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,gCAAAA,eAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,kBAAAE,qBAAA,CAAK,EAAE,WAAW,CAAA;AAAA,kBAAE;AAAA,iBAAA,EAAE,CAAA;AAAA,gBAAK,GAAA;AAAA,gBAC9B,OAAA,EAAS,IAAI,CAAC,EAAA,KAAO,GAAG,WAAW,CAAA,EAAG,KAAK,IAAI;AAAA,eAAA,EACjD,CAAA;AAAA,8CACC,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,gCAAAF,eAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,kBAAAE,qBAAA,CAAK,EAAE,aAAa,CAAA;AAAA,kBAAE;AAAA,iBAAA,EAAE,CAAA;AAAA,gBAC3B;AAAA,eAAA,EACF;AAAA;AAAA;AAAA,SACD;AAAA,wBACAC,cAAA,CAACC,sBAAA,EAAA,EAAY,OAAA,EAAS,cAAA,CAAe,OAAA,EAAS;AAAA;AAAA;AAAA,GAC/C;AAEF","file":"PeriodSpecificTargetView.js","sourcesContent":["import { colors } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { LegendsView } from \"./LegendView\";\nimport { createFixedPeriodFromPeriodId } from \"@dhis2/multi-calendar-dates\";\nimport { useCalendar } from \"../../../hooks/metadata\";\nimport type { SpecificTarget } from \"../../../schemas/config\";\n\nexport interface OrgUnitSpecificTargetViewProps {\n\tspecificTarget: SpecificTarget;\n\tlabel: string;\n}\n\nexport function PeriodSpecificTargetView({\n\tspecificTarget,\n\tlabel,\n}: OrgUnitSpecificTargetViewProps) {\n\tconst items = specificTarget.items;\n\tconst calendar = useCalendar();\n\tconst periods = items.map((periodId) =>\n\t\tcreateFixedPeriodFromPeriodId({\n\t\t\tcalendar,\n\t\t\tperiodId,\n\t\t}),\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tmaxWidth: 350,\n\t\t\t\tborder: `1px solid ${colors.grey600}`,\n\t\t\t\tborderRadius: 4,\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tflexDirection: \"column\",\n\t\t\t\tgap: 8,\n\t\t\t\tpadding: 16,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tgap: 8,\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<b>{i18n.t(\"Period(s)\")}: </b>{\" \"}\n\t\t\t\t\t{periods?.map((ou) => ou.displayName)?.join(\", \")}\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<b>{i18n.t(\"Data Source\")}: </b>\n\t\t\t\t\t{label}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<LegendsView legends={specificTarget.legends} />\n\t\t</div>\n\t);\n}\n"]}