@hisptz/dhis2-scorecard 1.2.29 → 1.2.31

package/dist/components/ScorecardTable/components/TableHeader/components/DataHeaderCell.js

@@ -7,6 +7,10 @@ var i18n = require('@dhis2/d2-i18n');
 var DraggableCell = require('../../DraggableCell');
 var DroppableCell = require('../../DroppableCell');
 var utils = require('../../../../../utils');
+var usehooksTs = require('usehooks-ts');
+var react = require('react');
+var DataHeaderLegendView = require('./DataHeaderLegendView');
+var lodash = require('lodash');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -24,11 +28,15 @@ function DataHeaderCellComponent({
   header
 }) {
   const dataInRows = utils.useScorecardViewStateValue("showDataInRows");
+  const labelRef = react.useRef(null);
   const label = header.column.columnDef.meta.label ?? column.columnDef.meta.label;
   const bold = header.column.columnDef.meta.bold ?? column.columnDef.meta.bold;
   const colSpan = header.colSpan.toString();
+  const { value: openLegendView, toggle: toggleLegendView } = usehooksTs.useBoolean(false);
   const sortDirection = !column?.getIsSorted() ? "default" : column.getIsSorted();
   const nextSortType = column?.getNextSortingOrder() === "asc" ? i18n__default.default.t("in ascending order") : column?.getNextSortingOrder() === "desc" ? i18n__default.default.t("in descending order") : i18n__default.default.t("disable");
+  const legends = header.column.columnDef.meta?.legends;
+  console.log(openLegendView, legends, labelRef.current);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.DataTableColumnHeader,
     {
@@ -46,12 +54,22 @@ function DataHeaderCellComponent({
         DroppableCell__default.default,
         {
           accept: dataInRows ? [config.ScorecardDraggableItems.data] : [config.ScorecardDraggableItems.ou],
-          children: /* @__PURE__ */ jsxRuntime.jsx(
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
             DraggableCell.DraggableCell,
             {
               id: label,
               type: dataInRows ? config.ScorecardDraggableItems.ou : config.ScorecardDraggableItems.data,
-              children: bold ? /* @__PURE__ */ jsxRuntime.jsx("b", { children: label }) : label
+              children: [
+                openLegendView && !lodash.isEmpty(legends) && /* @__PURE__ */ jsxRuntime.jsx(
+                  DataHeaderLegendView.DataHeaderLegendView,
+                  {
+                    legends,
+                    reference: labelRef,
+                    onClose: toggleLegendView
+                  }
+                ),
+                bold ? /* @__PURE__ */ jsxRuntime.jsx("b", { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: toggleLegendView, ref: labelRef, children: label })
+              ]
             }
           )
         }

package/dist/components/ScorecardTable/components/TableHeader/components/DataHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/ScorecardTable/components/TableHeader/components/DataHeaderCell.tsx"],"names":["jsx","DataTableColumnHeader","useScorecardViewStateValue","i18n","DroppableCell","ScorecardDraggableItems","DraggableCell"],"mappings":";;;;;;;;;;;;;;;AAWO,SAAS,mBAAA,CAAoB;AAAA,EACnC;AACD,CAAA,EAA2C;AAC1C,EAAA,MAAM,OAAA,GAAU,MAAA,CAAO,OAAA,CAAQ,QAAA,EAAS;AACxC,EAAA,uBAAOA,cAAA,CAACC,4BAAsB,OAAA,EAAkB,CAAA;AACjD;AAEO,SAAS,uBAAA,CAAwB;AAAA,EACvC,MAAA;AAAA,EACA;AACD,CAAA,EAA2C;AAC1C,EAAA,MAAM,UAAA,GAAaC,iCAAoC,gBAAgB,CAAA;AACvE,EAAA,MAAM,KAAA,GACJ,OAAO,MAAA,CAAO,SAAA,CAAU,KAA2B,KAAA,IACnD,MAAA,CAAO,UAAU,IAAA,CAA2B,KAAA;AAE9C,EAAA,MAAM,IAAA,GACJ,OAAO,MAAA,CAAO,SAAA,CAAU,KAA4B,IAAA,IACpD,MAAA,CAAO,UAAU,IAAA,CAA4B,IAAA;AAE/C,EAAA,MAAM,OAAA,GAAU,MAAA,CAAO,OAAA,CAAQ,QAAA,EAAS;AAExC,EAAA,MAAM,gBAAgB,CAAC,MAAA,EAAQ,aAAY,GACxC,SAAA,GACC,OAAQ,WAAA,EAAY;AACxB,EAAA,MAAM,eACL,MAAA,EAAQ,mBAAA,OAA0B,KAAA,GAC/BC,qBAAA,CAAK,EAAE,oBAAoB,CAAA,GAC3B,QAAQ,mBAAA,EAAoB,KAAM,SACjCA,qBAAA,CAAK,CAAA,CAAE,qBAAqB,CAAA,GAC5BA,qBAAA,CAAK,EAAE,SAAS,CAAA;AAErB,EAAA,uBACCH,cAAA;AAAA,IAACC,wBAAA;AAAA,IAAA;AAAA,MAEA,eAAeE,qBAAA,CAAK,CAAA,CAAE,uBAAA,EAAyB,EAAE,cAAc,CAAA;AAAA,MAC/D,eAAA,EACC,MAAA,CAAO,MAAA,EAAQ,UAAA,EAAW,IAAK,OAAO,UAAA,EAAW,GAC9C,CAAC,CAAA,EAAG,CAAA,KAAM;AACV,QAAA,MAAM,IAAA,GAAO,OAAQ,uBAAA,EAAwB;AAC7C,QAAA,IAAI,IAAA,EAAM;AACT,UAAA,IAAA,CAAK,CAAC,CAAA;AAAA,QACP;AAAA,MACD,CAAA,GACC,MAAA;AAAA,MAEJ,aAAA,EACC,OAAO,MAAA,EAAQ,UAAA,MAAgB,MAAA,CAAO,UAAA,KACnC,aAAA,GACA,MAAA;AAAA,MAEJ,KAAA,EAAM,QAAA;AAAA,MACN,OAAA;AAAA,MAEA,QAAA,kBAAAH,cAAA;AAAA,QAACI,8BAAA;AAAA,QAAA;AAAA,UACA,MAAA,EACC,aACG,CAACC,8BAAA,CAAwB,IAAI,CAAA,GAC7B,CAACA,+BAAwB,EAAE,CAAA;AAAA,UAG/B,QAAA,kBAAAL,cAAA;AAAA,YAACM,2BAAA;AAAA,YAAA;AAAA,cACA,EAAA,EAAI,KAAA;AAAA,cACJ,IAAA,EACC,UAAA,GACGD,8BAAA,CAAwB,EAAA,GACxBA,8BAAA,CAAwB,IAAA;AAAA,cAG3B,QAAA,EAAA,IAAA,mBAAOL,cAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA,KAAA,EAAM,CAAA,GAAO;AAAA;AAAA;AAC1B;AAAA;AACD,KAAA;AAAA,IArCK,GAAG,KAAK,CAAA;AAAA,GAsCd;AAEF;AAEO,MAAM,cAAA,GAAiB","file":"DataHeaderCell.js","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport {\n\tScorecardDraggableItems,\n\ttype ScorecardTableData,\n} from \"../../../../../schemas/config\";\nimport { DataTableColumnHeader, type DataTableSortDirection } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { DraggableCell } from \"../../DraggableCell\";\nimport DroppableCell from \"../../DroppableCell\";\nimport { useScorecardViewStateValue } from \"../../../../../utils\";\n\nexport function EmptyDataHeaderCell({\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst colSpan = header.colSpan.toString();\n\treturn <DataTableColumnHeader colSpan={colSpan} />;\n}\n\nexport function DataHeaderCellComponent({\n\tcolumn,\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst dataInRows = useScorecardViewStateValue<boolean>(\"showDataInRows\");\n\tconst label =\n\t\t(header.column.columnDef.meta as { label: string }).label ??\n\t\t(column.columnDef.meta as { label: string }).label;\n\n\tconst bold =\n\t\t(header.column.columnDef.meta as { bold?: boolean }).bold ??\n\t\t(column.columnDef.meta as { bold?: boolean }).bold;\n\n\tconst colSpan = header.colSpan.toString();\n\n\tconst sortDirection = !column?.getIsSorted()\n\t\t? \"default\"\n\t\t: (column!.getIsSorted() as DataTableSortDirection);\n\tconst nextSortType =\n\t\tcolumn?.getNextSortingOrder() === \"asc\"\n\t\t\t? i18n.t(\"in ascending order\")\n\t\t\t: column?.getNextSortingOrder() === \"desc\"\n\t\t\t\t? i18n.t(\"in descending order\")\n\t\t\t\t: i18n.t(\"disable\");\n\n\treturn (\n\t\t<DataTableColumnHeader\n\t\t\tkey={`${label}`}\n\t\t\tsortIconTitle={i18n.t(\"Sort {{nextSortType}}\", { nextSortType })}\n\t\t\tonSortIconClick={\n\t\t\t\theader.column?.getCanSort() || column.getCanSort()\n\t\t\t\t\t? (_, e) => {\n\t\t\t\t\t\t\tconst sort = column!.getToggleSortingHandler();\n\t\t\t\t\t\t\tif (sort) {\n\t\t\t\t\t\t\t\tsort(e);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tsortDirection={\n\t\t\t\theader.column?.getCanSort() || column.getCanSort()\n\t\t\t\t\t? sortDirection\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\talign=\"center\"\n\t\t\tcolSpan={colSpan}\n\t\t>\n\t\t\t<DroppableCell\n\t\t\t\taccept={\n\t\t\t\t\tdataInRows\n\t\t\t\t\t\t? [ScorecardDraggableItems.data]\n\t\t\t\t\t\t: [ScorecardDraggableItems.ou]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<DraggableCell\n\t\t\t\t\tid={label}\n\t\t\t\t\ttype={\n\t\t\t\t\t\tdataInRows\n\t\t\t\t\t\t\t? ScorecardDraggableItems.ou\n\t\t\t\t\t\t\t: ScorecardDraggableItems.data\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{bold ? <b>{label}</b> : label}\n\t\t\t\t</DraggableCell>\n\t\t\t</DroppableCell>\n\t\t</DataTableColumnHeader>\n\t);\n}\n\nexport const DataHeaderCell = DataHeaderCellComponent;\n"]}
+{"version":3,"sources":["../../../../../../src/components/ScorecardTable/components/TableHeader/components/DataHeaderCell.tsx"],"names":["jsx","DataTableColumnHeader","useScorecardViewStateValue","useRef","useBoolean","i18n","DroppableCell","ScorecardDraggableItems","jsxs","DraggableCell","isEmpty","DataHeaderLegendView"],"mappings":"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","file":"DataHeaderCell.js","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport {\n\tScorecardDraggableItems,\n\ttype ScorecardLegend,\n\ttype ScorecardTableData,\n} from \"../../../../../schemas/config\";\nimport { DataTableColumnHeader, type DataTableSortDirection } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { DraggableCell } from \"../../DraggableCell\";\nimport DroppableCell from \"../../DroppableCell\";\nimport { useScorecardViewStateValue } from \"../../../../../utils\";\nimport { useBoolean } from \"usehooks-ts\";\nimport { useRef } from \"react\";\nimport { DataHeaderLegendView } from \"./DataHeaderLegendView\";\nimport { isEmpty } from \"lodash\";\n\nexport function EmptyDataHeaderCell({\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst colSpan = header.colSpan.toString();\n\treturn <DataTableColumnHeader colSpan={colSpan} />;\n}\n\nexport function DataHeaderCellComponent({\n\tcolumn,\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst dataInRows = useScorecardViewStateValue<boolean>(\"showDataInRows\");\n\tconst labelRef = useRef<HTMLElement>(null);\n\tconst label =\n\t\t(\n\t\t\theader.column.columnDef.meta as {\n\t\t\t\tlabel: string;\n\t\t\t\tlegends: { id: string };\n\t\t\t}\n\t\t).label ?? (column.columnDef.meta as { label: string }).label;\n\n\tconst bold =\n\t\t(header.column.columnDef.meta as { bold?: boolean }).bold ??\n\t\t(column.columnDef.meta as { bold?: boolean }).bold;\n\n\tconst colSpan = header.colSpan.toString();\n\tconst { value: openLegendView, toggle: toggleLegendView } =\n\t\tuseBoolean(false);\n\n\tconst sortDirection = !column?.getIsSorted()\n\t\t? \"default\"\n\t\t: (column!.getIsSorted() as DataTableSortDirection);\n\tconst nextSortType =\n\t\tcolumn?.getNextSortingOrder() === \"asc\"\n\t\t\t? i18n.t(\"in ascending order\")\n\t\t\t: column?.getNextSortingOrder() === \"desc\"\n\t\t\t\t? i18n.t(\"in descending order\")\n\t\t\t\t: i18n.t(\"disable\");\n\n\tconst legends = (\n\t\theader.column.columnDef.meta as {\n\t\t\tlegends: Array<{\n\t\t\t\tid: string;\n\t\t\t\tlabel: string;\n\t\t\t\tlegends: ScorecardLegend[];\n\t\t\t}>;\n\t\t}\n\t)?.legends;\n\n\tconsole.log(openLegendView, legends, labelRef.current);\n\n\treturn (\n\t\t<DataTableColumnHeader\n\t\t\tkey={`${label}`}\n\t\t\tsortIconTitle={i18n.t(\"Sort {{nextSortType}}\", { nextSortType })}\n\t\t\tonSortIconClick={\n\t\t\t\theader.column?.getCanSort() || column.getCanSort()\n\t\t\t\t\t? (_, e) => {\n\t\t\t\t\t\t\tconst sort = column!.getToggleSortingHandler();\n\t\t\t\t\t\t\tif (sort) {\n\t\t\t\t\t\t\t\tsort(e);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tsortDirection={\n\t\t\t\theader.column?.getCanSort() || column.getCanSort()\n\t\t\t\t\t? sortDirection\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\talign=\"center\"\n\t\t\tcolSpan={colSpan}\n\t\t>\n\t\t\t<DroppableCell\n\t\t\t\taccept={\n\t\t\t\t\tdataInRows\n\t\t\t\t\t\t? [ScorecardDraggableItems.data]\n\t\t\t\t\t\t: [ScorecardDraggableItems.ou]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<DraggableCell\n\t\t\t\t\tid={label}\n\t\t\t\t\ttype={\n\t\t\t\t\t\tdataInRows\n\t\t\t\t\t\t\t? ScorecardDraggableItems.ou\n\t\t\t\t\t\t\t: ScorecardDraggableItems.data\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{openLegendView && !isEmpty(legends) && (\n\t\t\t\t\t\t<DataHeaderLegendView\n\t\t\t\t\t\t\tlegends={legends}\n\t\t\t\t\t\t\treference={labelRef}\n\t\t\t\t\t\t\tonClose={toggleLegendView}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{bold ? (\n\t\t\t\t\t\t<b>{label}</b>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span onClick={toggleLegendView} ref={labelRef}>\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</DraggableCell>\n\t\t\t</DroppableCell>\n\t\t</DataTableColumnHeader>\n\t);\n}\n\nexport const DataHeaderCell = DataHeaderCellComponent;\n"]}

package/dist/components/ScorecardTable/components/TableHeader/components/DataHeaderLegendView.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ui = require('@dhis2/ui');
+var LegendView = require('../../../../ScorecardLegendsView/components/LegendView');
+var lodash = require('lodash');
+var i18n = require('@dhis2/d2-i18n');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var i18n__default = /*#__PURE__*/_interopDefault(i18n);
+
+function DataHeaderLegendView({
+  legends,
+  reference,
+  onClose
+}) {
+  if (lodash.isEmpty(legends)) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Popover, { onClickOutside: onClose, reference, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: 16,
+        flexDirection: "column",
+        padding: 16
+      },
+      children: legends?.map(({ id, label, legends: legends2 }) => {
+        if (!Array.isArray(legends2)) {
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: 8
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("b", { style: { fontSize: 14 }, children: label }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      color: ui.colors.grey700,
+                      fontSize: 12
+                    },
+                    children: i18n__default.default.t(
+                      "This data item has been configured with specific targets. Open the specific targets menu to learn more"
+                    )
+                  }
+                )
+              ]
+            }
+          );
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("b", { style: { fontSize: 14 }, children: label }),
+              /* @__PURE__ */ jsxRuntime.jsx(LegendView.LegendsView, { legends: legends2 })
+            ]
+          },
+          `${id}-legend-view`
+        );
+      })
+    }
+  ) });
+}
+
+exports.DataHeaderLegendView = DataHeaderLegendView;
+//# sourceMappingURL=DataHeaderLegendView.js.map
+//# sourceMappingURL=DataHeaderLegendView.js.map

package/dist/components/ScorecardTable/components/TableHeader/components/DataHeaderLegendView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/ScorecardTable/components/TableHeader/components/DataHeaderLegendView.tsx"],"names":["isEmpty","jsx","Popover","legends","jsxs","colors","i18n","LegendsView"],"mappings":";;;;;;;;;;;;AAOO,SAAS,oBAAA,CAAqB;AAAA,EACpC,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACD,CAAA,EAQG;AACF,EAAA,IAAIA,cAAA,CAAQ,OAAO,CAAA,EAAG,OAAO,IAAA;AAE7B,EAAA,uBACCC,cAAA,CAACC,UAAA,EAAA,EAAQ,cAAA,EAAgB,OAAA,EAAS,SAAA,EACjC,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,OAAA,EAAS,MAAA;AAAA,QACT,GAAA,EAAK,EAAA;AAAA,QACL,aAAA,EAAe,QAAA;AAAA,QACf,OAAA,EAAS;AAAA,OACV;AAAA,MAEC,QAAA,EAAA,OAAA,EAAS,IAAI,CAAC,EAAE,IAAI,KAAA,EAAO,OAAA,EAAAE,UAAQ,KAAM;AACzC,QAAA,IAAI,CAAC,KAAA,CAAM,OAAA,CAAQA,QAAO,CAAA,EAAG;AAC5B,UAAA,uBACCC,eAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACA,KAAA,EAAO;AAAA,gBACN,OAAA,EAAS,MAAA;AAAA,gBACT,aAAA,EAAe,QAAA;AAAA,gBACf,GAAA,EAAK;AAAA,eACN;AAAA,cAEA,QAAA,EAAA;AAAA,gCAAAH,cAAA,CAAC,OAAE,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,IAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,gCACnCA,cAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACA,KAAA,EAAO;AAAA,sBACN,OAAOI,SAAA,CAAO,OAAA;AAAA,sBACd,QAAA,EAAU;AAAA,qBACX;AAAA,oBAEC,QAAA,EAAAC,qBAAA,CAAK,CAAA;AAAA,sBACL;AAAA;AACD;AAAA;AACD;AAAA;AAAA,WACD;AAAA,QAEF;AAEA,QAAA,uBACCF,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACA,KAAA,EAAO;AAAA,cACN,OAAA,EAAS,MAAA;AAAA,cACT,aAAA,EAAe,QAAA;AAAA,cACf,GAAA,EAAK;AAAA,aACN;AAAA,YAGA,QAAA,EAAA;AAAA,8BAAAH,cAAA,CAAC,OAAE,KAAA,EAAO,EAAE,QAAA,EAAU,EAAA,IAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,8BACnCA,cAAA,CAACM,sBAAA,EAAA,EAAY,OAAA,EAASJ,QAAAA,EAAS;AAAA;AAAA,WAAA;AAAA,UAH1B,GAAG,EAAE,CAAA,YAAA;AAAA,SAIX;AAAA,MAEF,CAAC;AAAA;AAAA,GACF,EACD,CAAA;AAEF","file":"DataHeaderLegendView.js","sourcesContent":["import type { ScorecardLegend } from \"../../../../../schemas/config\";\nimport { colors, Popover } from \"@dhis2/ui\";\nimport type { RefObject } from \"react\";\nimport { LegendsView } from \"../../../../ScorecardLegendsView/components/LegendView\";\nimport { isEmpty } from \"lodash\";\nimport i18n from \"@dhis2/d2-i18n\";\n\nexport function DataHeaderLegendView({\n\tlegends,\n\treference,\n\tonClose,\n}: {\n\tlegends: Array<{\n\t\tid: string;\n\t\tlabel: string;\n\t\tlegends: Array<ScorecardLegend>;\n\t}>;\n\treference: RefObject<HTMLElement>;\n\tonClose: () => void;\n}) {\n\tif (isEmpty(legends)) return null;\n\n\treturn (\n\t\t<Popover onClickOutside={onClose} reference={reference}>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\tgap: 16,\n\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t\tpadding: 16,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{legends?.map(({ id, label, legends }) => {\n\t\t\t\t\tif (!Array.isArray(legends)) {\n\t\t\t\t\t\treturn (\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: 8,\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<b style={{ fontSize: 14 }}>{label}</b>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: colors.grey700,\n\t\t\t\t\t\t\t\t\t\tfontSize: 12,\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\t\t{i18n.t(\n\t\t\t\t\t\t\t\t\t\t\"This data item has been configured with specific targets. Open the specific targets menu to learn more\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\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\tdisplay: \"flex\",\n\t\t\t\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkey={`${id}-legend-view`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<b style={{ fontSize: 14 }}>{label}</b>\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</Popover>\n\t);\n}\n"]}

package/dist/esm/components/LoadingIndicator.js

@@ -4,19 +4,17 @@ import { DataTableRow, LinearLoader } from '@dhis2/ui';
 import { useTableState } from './TableStateProvider';
 import { memo, useState, useEffect } from 'react';
 import styles from './ScorecardTable/ScorecardTable.module.css';
+import { useScorecardLoadingCompleted } from '../hooks/completed';
 
 const LoadingIndicator = memo(function LoadingIndicator2({
   tableRef
 }) {
   const { data: dataEngine } = useScorecardData();
   const [progress, setProgress] = useState(0);
-  const [completed, setCompleted] = useState(dataEngine.isDone);
+  const completed = useScorecardLoadingCompleted();
   const table = useTableState();
   const colSpan = table.getVisibleFlatColumns().length;
   const width = tableRef.current?.parentElement?.getBoundingClientRect().width;
-  useEffect(() => {
-    return dataEngine.addOnCompleteListener(setCompleted);
-  }, [dataEngine]);
   useEffect(() => {
     return dataEngine.addProgressListener((value) => {
       setProgress(value);

package/dist/esm/components/LoadingIndicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LoadingIndicator.tsx"],"names":["LoadingIndicator"],"mappings":";;;;;;;AAMO,MAAM,gBAAA,GAAmB,IAAA,CAAK,SAASA,iBAAAA,CAAiB;AAAA,EAC9D;AACD,CAAA,EAEG;AACF,EAAA,MAAM,EAAE,IAAA,EAAM,UAAA,EAAW,GAAI,gBAAA,EAAiB;AAC9C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAiB,CAAC,CAAA;AAClD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAA,CAAkB,WAAW,MAAM,CAAA;AACrE,EAAA,MAAM,QAAQ,aAAA,EAAc;AAC5B,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,qBAAA,EAAsB,CAAE,MAAA;AAE9C,EAAA,MAAM,KAAA,GACL,QAAA,CAAS,OAAA,EAAS,aAAA,EAAe,uBAAsB,CAAE,KAAA;AAE1D,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,OAAO,UAAA,CAAW,sBAAsB,YAAY,CAAA;AAAA,EACrD,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,OAAO,UAAA,CAAW,mBAAA,CAAoB,CAAC,KAAA,KAAU;AAChD,MAAA,WAAA,CAAY,KAAK,CAAA;AAAA,IAClB,CAAC,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,IAAI,QAAA,KAAa,CAAA,IAAK,KAAA,CAAM,QAAS,KAAK,SAAA,EAAW;AACpD,IAAA,OAAO,IAAA;AAAA,EACR;AACA,EAAA,2BACE,YAAA,EAAA,EACA,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACA,OAAO,EAAE,QAAA,EAAU,UAAU,IAAA,EAAM,CAAA,EAAG,KAAK,CAAA,EAAE;AAAA,MAC7C,OAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACA,SAAA,EAAW,OAAO,QAAQ,CAAA;AAAA,UAC1B,MAAA,EAAQ,GAAA;AAAA,UACR,OAAO,KAAA,GAAQ,CAAA,EAAG,KAAK,KAAA,CAAM,KAAK,CAAC,CAAA,EAAA,CAAA,GAAO,MAAA;AAAA,UAC1C,MAAA,EAAA,CAAS,YAAY,CAAA,IAAK;AAAA;AAAA;AAC3B;AAAA,GACD,EACD,CAAA;AAEF,CAAC","file":"LoadingIndicator.js","sourcesContent":["import { useScorecardData } from \"./DataProvider\";\nimport { DataTableRow, LinearLoader } from \"@dhis2/ui\";\nimport { useTableState } from \"./TableStateProvider\";\nimport { memo, type RefObject, useEffect, useState } from \"react\";\nimport styles from \"./ScorecardTable/ScorecardTable.module.css\";\n\nexport const LoadingIndicator = memo(function LoadingIndicator({\n\ttableRef,\n}: {\n\ttableRef: RefObject<HTMLTableElement>;\n}) {\n\tconst { data: dataEngine } = useScorecardData();\n\tconst [progress, setProgress] = useState<number>(0);\n\tconst [completed, setCompleted] = useState<boolean>(dataEngine.isDone);\n\tconst table = useTableState();\n\tconst colSpan = table.getVisibleFlatColumns().length;\n\n\tconst width =\n\t\ttableRef.current?.parentElement?.getBoundingClientRect().width;\n\n\tuseEffect(() => {\n\t\treturn dataEngine.addOnCompleteListener(setCompleted);\n\t}, [dataEngine]);\n\n\tuseEffect(() => {\n\t\treturn dataEngine.addProgressListener((value) => {\n\t\t\tsetProgress(value);\n\t\t});\n\t}, [dataEngine]);\n\n\tif (progress === 1 || isNaN(progress!) || completed) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<DataTableRow>\n\t\t\t<td\n\t\t\t\tstyle={{ position: \"static\", left: 0, top: 0 }}\n\t\t\t\tcolSpan={colSpan}\n\t\t\t>\n\t\t\t\t<LinearLoader\n\t\t\t\t\tclassName={styles[\"loader\"]}\n\t\t\t\t\tmargin={\"0\"}\n\t\t\t\t\twidth={width ? `${Math.trunc(width)}px` : \"100%\"}\n\t\t\t\t\tamount={(progress ?? 0) * 100}\n\t\t\t\t/>\n\t\t\t</td>\n\t\t</DataTableRow>\n\t);\n});\n"]}
+{"version":3,"sources":["../../../src/components/LoadingIndicator.tsx"],"names":["LoadingIndicator"],"mappings":";;;;;;;;AAaO,MAAM,gBAAA,GAAmB,IAAA,CAAK,SAASA,iBAAAA,CAAiB;AAAA,EAC9D;AACD,CAAA,EAEG;AACF,EAAA,MAAM,EAAE,IAAA,EAAM,UAAA,EAAW,GAAI,gBAAA,EAAiB;AAC9C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAiB,CAAC,CAAA;AAClD,EAAA,MAAM,YAAY,4BAAA,EAA6B;AAC/C,EAAA,MAAM,QAAQ,aAAA,EAAc;AAC5B,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,qBAAA,EAAsB,CAAE,MAAA;AAE9C,EAAA,MAAM,KAAA,GACL,QAAA,CAAS,OAAA,EAAS,aAAA,EAAe,uBAAsB,CAAE,KAAA;AAE1D,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,OAAO,UAAA,CAAW,mBAAA,CAAoB,CAAC,KAAA,KAAU;AAChD,MAAA,WAAA,CAAY,KAAK,CAAA;AAAA,IAClB,CAAC,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,IAAI,QAAA,KAAa,CAAA,IAAK,KAAA,CAAM,QAAS,KAAK,SAAA,EAAW;AACpD,IAAA,OAAO,IAAA;AAAA,EACR;AACA,EAAA,2BACE,YAAA,EAAA,EACA,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACA,OAAO,EAAE,QAAA,EAAU,UAAU,IAAA,EAAM,CAAA,EAAG,KAAK,CAAA,EAAE;AAAA,MAC7C,OAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACA,SAAA,EAAW,OAAO,QAAQ,CAAA;AAAA,UAC1B,MAAA,EAAQ,GAAA;AAAA,UACR,OAAO,KAAA,GAAQ,CAAA,EAAG,KAAK,KAAA,CAAM,KAAK,CAAC,CAAA,EAAA,CAAA,GAAO,MAAA;AAAA,UAC1C,MAAA,EAAA,CAAS,YAAY,CAAA,IAAK;AAAA;AAAA;AAC3B;AAAA,GACD,EACD,CAAA;AAEF,CAAC","file":"LoadingIndicator.js","sourcesContent":["import { useScorecardData } from \"./DataProvider\";\nimport { DataTableRow, LinearLoader } from \"@dhis2/ui\";\nimport { useTableState } from \"./TableStateProvider\";\nimport {\n\tmemo,\n\ttype RefObject,\n\tuseEffect,\n\tuseState,\n\tuseSyncExternalStore,\n} from \"react\";\nimport styles from \"./ScorecardTable/ScorecardTable.module.css\";\nimport { useScorecardLoadingCompleted } from \"../hooks/completed\";\n\nexport const LoadingIndicator = memo(function LoadingIndicator({\n\ttableRef,\n}: {\n\ttableRef: RefObject<HTMLTableElement>;\n}) {\n\tconst { data: dataEngine } = useScorecardData();\n\tconst [progress, setProgress] = useState<number>(0);\n\tconst completed = useScorecardLoadingCompleted();\n\tconst table = useTableState();\n\tconst colSpan = table.getVisibleFlatColumns().length;\n\n\tconst width =\n\t\ttableRef.current?.parentElement?.getBoundingClientRect().width;\n\n\tuseEffect(() => {\n\t\treturn dataEngine.addProgressListener((value) => {\n\t\t\tsetProgress(value);\n\t\t});\n\t}, [dataEngine]);\n\n\tif (progress === 1 || isNaN(progress!) || completed) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<DataTableRow>\n\t\t\t<td\n\t\t\t\tstyle={{ position: \"static\", left: 0, top: 0 }}\n\t\t\t\tcolSpan={colSpan}\n\t\t\t>\n\t\t\t\t<LinearLoader\n\t\t\t\t\tclassName={styles[\"loader\"]}\n\t\t\t\t\tmargin={\"0\"}\n\t\t\t\t\twidth={width ? `${Math.trunc(width)}px` : \"100%\"}\n\t\t\t\t\tamount={(progress ?? 0) * 100}\n\t\t\t\t/>\n\t\t\t</td>\n\t\t</DataTableRow>\n\t);\n});\n"]}

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

@@ -1,63 +1,97 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import i18n from '@dhis2/d2-i18n';
-import { find } from 'lodash';
 import { useScorecardConfig } from '../../ConfigProvider';
+import { colors } from '@dhis2/ui';
+import { isEmpty } from 'lodash';
 
+const formatNumber = Intl.NumberFormat("en-GB", {
+  notation: "standard"
+}).format;
+function LegendItem({
+  legend,
+  legendDefinitions
+}) {
+  const legendDefinition = legendDefinitions.find(
+    ({ id }) => id === legend.legendDefinitionId
+  );
+  if (!legendDefinition) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: 8,
+        alignItems: "stretch",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              alignSelf: "stretch",
+              backgroundColor: legendDefinition.color,
+              width: 8,
+              minHeight: "100%"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 2
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: legendDefinition.name }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: 4,
+                    fontSize: 11,
+                    color: colors.grey600
+                  },
+                  children: /* @__PURE__ */ jsx("div", { className: "legend-item-label", children: `${formatNumber(+legend.startValue)} - ${formatNumber(+legend.endValue)}` })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function LegendsView({ legends }) {
   const config = useScorecardConfig();
   const legendDefinitions = config.legendDefinitions ?? [];
-  return /* @__PURE__ */ jsx("div", { className: "column gap-8", children: /* @__PURE__ */ jsxs("table", { children: [
-    /* @__PURE__ */ jsx("col", { width: "60%" }),
-    /* @__PURE__ */ jsx("col", { width: "20%" }),
-    /* @__PURE__ */ jsx("col", { width: "20%" }),
-    /* @__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") })
-    ] }) }),
-    /* @__PURE__ */ jsx("tbody", { children: legends?.map((legend) => {
-      const legendDefinition = find(legendDefinitions, {
-        id: legend.legendDefinitionId
-      });
-      return /* @__PURE__ */ jsxs(
-        "tr",
+  if (isEmpty(legends)) {
+    return null;
+  }
+  console.log(legends);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        fontSize: 14
+      },
+      children: legends?.map((legend) => /* @__PURE__ */ jsx(
+        LegendItem,
         {
-          style: {
-            fontSize: 14
-          },
-          children: [
-            /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  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", { align: "center", children: legend?.startValue }),
-            /* @__PURE__ */ jsx("td", { align: "center", children: legend?.endValue })
-          ]
+          legend,
+          legendDefinitions
         },
-        `${legend.id}-view`
-      );
-    }) })
-  ] }) });
+        legend.id
+      ))
+    }
+  );
 }
 function LegendView({ legend }) {
   const { color, name, id } = legend;

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

@@ -1 +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"]}
+{"version":3,"sources":["../../../../../src/components/ScorecardLegendsView/components/LegendView.tsx"],"names":[],"mappings":";;;;;AAYA,MAAM,YAAA,GAAe,IAAA,CAAK,YAAA,CAAa,OAAA,EAAS;AAAA,EAC/C,QAAA,EAAU;AACX,CAAC,CAAA,CAAE,MAAA;AAEH,SAAS,UAAA,CAAW;AAAA,EACnB,MAAA;AAAA,EACA;AACD,CAAA,EAGG;AACF,EAAA,MAAM,mBAAmB,iBAAA,CAAkB,IAAA;AAAA,IAC1C,CAAC,EAAE,EAAA,EAAG,KAAM,OAAO,MAAA,CAAO;AAAA,GAC3B;AACA,EAAA,IAAI,CAAC,gBAAA,EAAkB;AACtB,IAAA,OAAO,IAAA;AAAA,EACR;AAEA,EAAA,uBACC,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,OAAA,EAAS,MAAA;AAAA,QACT,GAAA,EAAK,CAAA;AAAA,QACL,UAAA,EAAY,SAAA;AAAA,QACZ,KAAA,EAAO;AAAA,OACR;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACA,KAAA,EAAO;AAAA,cACN,SAAA,EAAW,SAAA;AAAA,cACX,iBAAiB,gBAAA,CAAiB,KAAA;AAAA,cAClC,KAAA,EAAO,CAAA;AAAA,cACP,SAAA,EAAW;AAAA;AACZ;AAAA,SACA;AAAA,wBACD,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACA,KAAA,EAAO;AAAA,cACN,OAAA,EAAS,MAAA;AAAA,cACT,aAAA,EAAe,QAAA;AAAA,cACf,GAAA,EAAK;AAAA,aACN;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAA,EAAA,EAAM,2BAAiB,IAAA,EAAK,CAAA;AAAA,8BAC7B,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACA,KAAA,EAAO;AAAA,oBACN,OAAA,EAAS,MAAA;AAAA,oBACT,GAAA,EAAK,CAAA;AAAA,oBACL,QAAA,EAAU,EAAA;AAAA,oBACV,OAAO,MAAA,CAAO;AAAA,mBACf;AAAA,kBAEA,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EAAqB,QAAA,EAAA,CAAA,EAAG,aAAa,CAAC,MAAA,CAAO,UAAU,CAAC,MAAM,YAAA,CAAa,CAAC,MAAA,CAAO,QAAQ,CAAC,CAAA,CAAA,EAAG;AAAA;AAAA;AAC/G;AAAA;AAAA;AACD;AAAA;AAAA,GACD;AAEF;AAEO,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,IAAI,OAAA,CAAQ,OAAO,CAAA,EAAG;AACrB,IAAA,OAAO,IAAA;AAAA,EACR;AAEA,EAAA,OAAA,CAAQ,IAAI,OAAO,CAAA;AAEnB,EAAA,uBACC,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,OAAA,EAAS,MAAA;AAAA,QACT,aAAA,EAAe,QAAA;AAAA,QACf,GAAA,EAAK,CAAA;AAAA,QACL,QAAA,EAAU;AAAA,OACX;AAAA,MAEC,QAAA,EAAA,OAAA,EAAS,GAAA,CAAI,CAAC,MAAA,qBACd,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UAEA,MAAA;AAAA,UACA;AAAA,SAAA;AAAA,QAFK,MAAA,CAAO;AAAA,OAIb;AAAA;AAAA,GACF;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 { useScorecardConfig } from \"../../ConfigProvider\";\nimport type {\n\tLegendDefinition,\n\tScorecardLegend,\n} from \"../../../schemas/config\";\nimport { colors } from \"@dhis2/ui\";\nimport { isEmpty } from \"lodash\";\n\nexport interface LegendsViewProps {\n\tlegends: ScorecardLegend[];\n}\n\nconst formatNumber = Intl.NumberFormat(\"en-GB\", {\n\tnotation: \"standard\",\n}).format;\n\nfunction LegendItem({\n\tlegend,\n\tlegendDefinitions,\n}: {\n\tlegend: ScorecardLegend;\n\tlegendDefinitions: LegendDefinition[];\n}) {\n\tconst legendDefinition = legendDefinitions.find(\n\t\t({ id }) => id === legend.legendDefinitionId,\n\t);\n\tif (!legendDefinition) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tgap: 8,\n\t\t\t\talignItems: \"stretch\",\n\t\t\t\twidth: \"100%\",\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\talignSelf: \"stretch\",\n\t\t\t\t\tbackgroundColor: legendDefinition.color,\n\t\t\t\t\twidth: 8,\n\t\t\t\t\tminHeight: \"100%\",\n\t\t\t\t}}\n\t\t\t></div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t\tgap: 2,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<span>{legendDefinition.name}</span>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\tfontSize: 11,\n\t\t\t\t\t\tcolor: colors.grey600,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"legend-item-label\">{`${formatNumber(+legend.startValue)} - ${formatNumber(+legend.endValue)}`}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function LegendsView({ legends }: LegendsViewProps) {\n\tconst config = useScorecardConfig();\n\tconst legendDefinitions = config.legendDefinitions ?? [];\n\n\tif (isEmpty(legends)) {\n\t\treturn null;\n\t}\n\n\tconsole.log(legends);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tflexDirection: \"column\",\n\t\t\t\tgap: 8,\n\t\t\t\tfontSize: 14,\n\t\t\t}}\n\t\t>\n\t\t\t{legends?.map((legend) => (\n\t\t\t\t<LegendItem\n\t\t\t\t\tkey={legend.id}\n\t\t\t\t\tlegend={legend}\n\t\t\t\t\tlegendDefinitions={legendDefinitions}\n\t\t\t\t/>\n\t\t\t))}\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

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import i18n from '@dhis2/d2-i18n';
 import { LegendsView } from './LegendView';
 import { useScorecardMeta } from '../../MetaProvider';
 import { colors } from '@dhis2/ui';
@@ -23,13 +22,7 @@ function OrgUnitLevelSpecificTargetView({
         fontSize: 14
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { style: { fontSize: 16 }, children: [
-          /* @__PURE__ */ jsxs("b", { children: [
-            i18n.t("Data Source"),
-            ": "
-          ] }),
-          label
-        ] }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 16 }, children: /* @__PURE__ */ jsx("b", { children: label }) }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -47,29 +40,16 @@ function OrgUnitLevelSpecificTargetView({
                 "div",
                 {
                   style: {
-                    border: `1px solid ${colors.grey600}`,
+                    border: `1px solid ${colors.grey400}`,
                     padding: 16,
                     borderRadius: 4,
-                    fontSize: 14
+                    fontSize: 14,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 8
                   },
                   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("b", { children: orgUnitLevel?.displayName }),
                     /* @__PURE__ */ jsx(LegendsView, { legends })
                   ]
                 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ScorecardLegendsView/components/OrgUnitLevelSpecificTargetView.tsx"],"names":[],"mappings":";;;;;;AAWO,SAAS,8BAAA,CAA+B;AAAA,EAC9C,cAAA;AAAA,EACA;AACD,CAAA,EAAmC;AAClC,EAAA,MAAM,OAAO,gBAAA,EAAiB;AAC9B,EAAA,MAAM,aAAA,GAAgB,IAAA,EAAM,aAAA,IAAiB,EAAC;AAE9C,EAAA,uBACC,IAAA;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,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,QAAA,EAAU,IAAG,EAC1B,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,YAAA,IAAA,CAAK,EAAE,aAAa,CAAA;AAAA,YAAE;AAAA,WAAA,EAAE,CAAA;AAAA,UAC3B;AAAA,SAAA,EACF,CAAA;AAAA,wBACA,GAAA;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,uBACC,IAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACA,KAAA,EAAO;AAAA,oBACN,MAAA,EAAQ,CAAA,UAAA,EAAa,MAAA,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,oCAAA,GAAA;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,+BAAC,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,0CAAA,IAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAK,EAAE,yBAAyB,CAAA;AAAA,4BAAE;AAAA,2BAAA,EAAE,CAAA;AAAA,0BACvC,YAAA,EAAc;AAAA,yBAAA,EAChB;AAAA;AAAA,qBACD;AAAA,oCACA,GAAA,CAAC,eAAY,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"]}
+{"version":3,"sources":["../../../../../src/components/ScorecardLegendsView/components/OrgUnitLevelSpecificTargetView.tsx"],"names":[],"mappings":";;;;;AAUO,SAAS,8BAAA,CAA+B;AAAA,EAC9C,cAAA;AAAA,EACA;AACD,CAAA,EAAmC;AAClC,EAAA,MAAM,OAAO,gBAAA,EAAiB;AAC9B,EAAA,MAAM,aAAA,GAAgB,IAAA,EAAM,aAAA,IAAiB,EAAC;AAE9C,EAAA,uBACC,IAAA;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,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,OAAO,EAAE,QAAA,EAAU,IAAG,EAC1B,QAAA,kBAAA,GAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA,KAAA,EAAM,CAAA,EACX,CAAA;AAAA,wBACA,GAAA;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,uBACC,IAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACA,KAAA,EAAO;AAAA,oBACN,MAAA,EAAQ,CAAA,UAAA,EAAa,MAAA,CAAO,OAAO,CAAA,CAAA;AAAA,oBACnC,OAAA,EAAS,EAAA;AAAA,oBACT,YAAA,EAAc,CAAA;AAAA,oBACd,QAAA,EAAU,EAAA;AAAA,oBACV,OAAA,EAAS,MAAA;AAAA,oBACT,aAAA,EAAe,QAAA;AAAA,oBACf,GAAA,EAAK;AAAA,mBACN;AAAA,kBAEA,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,GAAA,EAAA,EAAG,wBAAc,WAAA,EAAY,CAAA;AAAA,oCAC9B,GAAA,CAAC,eAAY,OAAA,EAAkB;AAAA;AAAA;AAAA,eAChC;AAAA,YAEF,CAAC;AAAA;AAAA;AACF;AAAA;AAAA,GACD;AAEF","file":"OrgUnitLevelSpecificTargetView.js","sourcesContent":["import { 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>{label}</b>\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.grey400}`,\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\tdisplay: \"flex\",\n\t\t\t\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<b>{orgUnitLevel?.displayName}</b>\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/esm/components/ScorecardLegendsView/components/OrgUnitSpecificTargetView.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { CircularLoader, colors } from '@dhis2/ui';
-import i18n from '@dhis2/d2-i18n';
 import { LegendsView } from './LegendView';
 import { useOrgUnits } from '../../../hooks/orgUnit';
 
@@ -25,33 +24,28 @@ function OrgUnitSpecificTargetView({
     {
       style: {
         maxWidth: "fit-content",
-        border: `1px solid ${colors.grey600}`,
+        border: `1px solid ${colors.grey400}`,
         borderRadius: 4,
         display: "flex",
         flexDirection: "column",
         gap: 8,
-        padding: 16,
-        fontSize: 14
+        padding: 16
       },
-      className: "column gap-16 p-16",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "column gap-16", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsxs("b", { children: [
-              i18n.t("Organisation Unit(s)"),
-              ": "
-            ] }),
-            " ",
-            orgUnits?.map((ou) => ou.displayName)?.join(", ")
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsxs("b", { children: [
-              i18n.t("Data Source"),
-              ": "
-            ] }),
-            label
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ jsx("b", { children: label }),
+              /* @__PURE__ */ jsx("span", { style: { color: colors.grey600, fontSize: 12 }, children: orgUnits?.map((ou) => ou.displayName)?.join(", ") })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(LegendsView, { legends: specificTarget.legends })
       ]
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ScorecardLegendsView/components/OrgUnitSpecificTargetView.tsx"],"names":[],"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,GAAI,YAAY,KAAK,CAAA;AAE/C,EAAA,IAAI,OAAA,EAAS;AACZ,IAAA,uBACC,GAAA;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,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,UAAA,EAAU,IAAA,EAAC;AAAA;AAAA,KAC5B;AAAA,EAEF;AAEA,EAAA,uBACC,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,QAAA,EAAU,aAAA;AAAA,QACV,MAAA,EAAQ,CAAA,UAAA,EAAa,MAAA,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,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,eAAA,EACd,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,cAAA,IAAA,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,+BACC,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,cAAA,IAAA,CAAK,EAAE,aAAa,CAAA;AAAA,cAAE;AAAA,aAAA,EAAE,CAAA;AAAA,YAC3B;AAAA,WAAA,EACF;AAAA,SAAA,EACD,CAAA;AAAA,wBACA,GAAA,CAAC,WAAA,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"]}
+{"version":3,"sources":["../../../../../src/components/ScorecardLegendsView/components/OrgUnitSpecificTargetView.tsx"],"names":[],"mappings":";;;;;AAUO,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,GAAI,YAAY,KAAK,CAAA;AAE/C,EAAA,IAAI,OAAA,EAAS;AACZ,IAAA,uBACC,GAAA;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,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,UAAA,EAAU,IAAA,EAAC;AAAA;AAAA,KAC5B;AAAA,EAEF;AAEA,EAAA,uBACC,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,QAAA,EAAU,aAAA;AAAA,QACV,MAAA,EAAQ,CAAA,UAAA,EAAa,MAAA,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,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACA,KAAA,EAAO;AAAA,cACN,OAAA,EAAS,MAAA;AAAA,cACT,aAAA,EAAe,QAAA;AAAA,cACf,GAAA,EAAK;AAAA,aACN;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,OAAG,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,kCACT,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,KAAA,EAAO,MAAA,CAAO,SAAS,QAAA,EAAU,EAAA,IAC9C,QAAA,EAAA,QAAA,EAAU,GAAA,CAAI,CAAC,EAAA,KAAO,EAAA,CAAG,WAAW,CAAA,EAAG,IAAA,CAAK,IAAI,CAAA,EAClD;AAAA;AAAA;AAAA,SACD;AAAA,wBACA,GAAA,CAAC,WAAA,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 { 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.grey400}`,\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\tdisplay: \"flex\",\n\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t\tgap: 8,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<b>{label}</b>\n\t\t\t\t<span style={{ color: colors.grey600, fontSize: 12 }}>\n\t\t\t\t\t{orgUnits?.map((ou) => ou.displayName)?.join(\", \")}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<LegendsView legends={specificTarget.legends} />\n\t\t</div>\n\t);\n}\n"]}

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

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { colors } from '@dhis2/ui';
-import i18n from '@dhis2/d2-i18n';
 import { LegendsView } from './LegendView';
 import { createFixedPeriodFromPeriodId } from '@dhis2/multi-calendar-dates';
 import { useCalendar } from '../../../hooks/metadata';
@@ -22,7 +21,7 @@ function PeriodSpecificTargetView({
     {
       style: {
         maxWidth: 350,
-        border: `1px solid ${colors.grey600}`,
+        border: `1px solid ${colors.grey400}`,
         borderRadius: 4,
         display: "flex",
         flexDirection: "column",
@@ -34,26 +33,13 @@ function PeriodSpecificTargetView({
           "div",
           {
             style: {
-              gap: 8,
+              gap: 4,
               display: "flex",
               flexDirection: "column"
             },
             children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs("b", { children: [
-                  i18n.t("Period(s)"),
-                  ": "
-                ] }),
-                " ",
-                periods?.map((ou) => ou.displayName)?.join(", ")
-              ] }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs("b", { children: [
-                  i18n.t("Data Source"),
-                  ": "
-                ] }),
-                label
-              ] })
+              /* @__PURE__ */ jsx("b", { children: label }),
+              /* @__PURE__ */ jsx("span", { style: { color: colors.grey600, fontSize: 12 }, children: periods?.map((ou) => ou.displayName)?.join(", ") })
             ]
           }
         ),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ScorecardLegendsView/components/PeriodSpecificTargetView.tsx"],"names":[],"mappings":";;;;;;;AAYO,SAAS,wBAAA,CAAyB;AAAA,EACxC,cAAA;AAAA,EACA;AACD,CAAA,EAAmC;AAClC,EAAA,MAAM,QAAQ,cAAA,CAAe,KAAA;AAC7B,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,UAAU,KAAA,CAAM,GAAA;AAAA,IAAI,CAAC,aAC1B,6BAAA,CAA8B;AAAA,MAC7B,QAAA;AAAA,MACA;AAAA,KACA;AAAA,GACF;AAEA,EAAA,uBACC,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,QAAA,EAAU,GAAA;AAAA,QACV,MAAA,EAAQ,CAAA,UAAA,EAAa,MAAA,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,wBAAA,IAAA;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,8BAAA,IAAA,CAAC,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,gCAAA,IAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,kBAAA,IAAA,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,mCACC,KAAA,EAAA,EACA,QAAA,EAAA;AAAA,gCAAA,IAAA,CAAC,GAAA,EAAA,EAAG,QAAA,EAAA;AAAA,kBAAA,IAAA,CAAK,EAAE,aAAa,CAAA;AAAA,kBAAE;AAAA,iBAAA,EAAE,CAAA;AAAA,gBAC3B;AAAA,eAAA,EACF;AAAA;AAAA;AAAA,SACD;AAAA,wBACA,GAAA,CAAC,WAAA,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"]}
+{"version":3,"sources":["../../../../../src/components/ScorecardLegendsView/components/PeriodSpecificTargetView.tsx"],"names":[],"mappings":";;;;;;AAWO,SAAS,wBAAA,CAAyB;AAAA,EACxC,cAAA;AAAA,EACA;AACD,CAAA,EAAmC;AAClC,EAAA,MAAM,QAAQ,cAAA,CAAe,KAAA;AAC7B,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,UAAU,KAAA,CAAM,GAAA;AAAA,IAAI,CAAC,aAC1B,6BAAA,CAA8B;AAAA,MAC7B,QAAA;AAAA,MACA;AAAA,KACA;AAAA,GACF;AAEA,EAAA,uBACC,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,QAAA,EAAU,GAAA;AAAA,QACV,MAAA,EAAQ,CAAA,UAAA,EAAa,MAAA,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,wBAAA,IAAA;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,8BAAA,GAAA,CAAC,OAAG,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,kCACT,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,KAAA,EAAO,MAAA,CAAO,SAAS,QAAA,EAAU,EAAA,IAC9C,QAAA,EAAA,OAAA,EAAS,GAAA,CAAI,CAAC,EAAA,KAAO,EAAA,CAAG,WAAW,CAAA,EAAG,IAAA,CAAK,IAAI,CAAA,EACjD;AAAA;AAAA;AAAA,SACD;AAAA,wBACA,GAAA,CAAC,WAAA,EAAA,EAAY,OAAA,EAAS,cAAA,CAAe,OAAA,EAAS;AAAA;AAAA;AAAA,GAC/C;AAEF","file":"PeriodSpecificTargetView.js","sourcesContent":["import { colors } from \"@dhis2/ui\";\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.grey400}`,\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: 4,\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<b>{label}</b>\n\t\t\t\t<span style={{ color: colors.grey600, fontSize: 12 }}>\n\t\t\t\t\t{periods?.map((ou) => ou.displayName)?.join(\", \")}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<LegendsView legends={specificTarget.legends} />\n\t\t</div>\n\t);\n}\n"]}