@hisptz/dhis2-scorecard 1.2.23 → 1.2.25

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ScorecardHeader.tsx"],"names":[],"mappings":";;;;;;;;;;AASO,SAAS,eAAkB,GAAA;AACjC,EAAA,MAAM,SAAS,kBAAmB,EAAA;AAClC,EAAA,MAAM,EAAE,YAAc,EAAA,KAAA,EAAO,QAAS,EAAA,GAAI,UAAU,EAAC;AAErD,EAAA,MAAM,kBAAkB,uBAAwB,EAAA;AAChD,EAAM,MAAA,SAAA,GAAY,2BAAoC,OAAO,CAAA;AAE7D,EAAA,MAAM,OAAU,GAAA,OAAA;AAAA,IACf,MAAM,eAAgB,CAAA,OAAA;AAAA,IACtB,CAAC,gBAAgB,OAAO;AAAA,GACzB;AAEA,EAAM,MAAA,MAAA,GAAS,QAAQ,MAAM;AAC5B,IAAI,IAAA,OAAA,CAAQ,SAAS,CAAG,EAAA;AACvB,MAAA;AAAA;AAED,IAAA,OAAO,aAAc,CAAA,aAAA,CAAc,IAAK,CAAA,OAAO,GAAG,EAAY,CAAA;AAAA,GAC/D,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,IAAI,CAAC,SAAW,EAAA;AACf,IAAO,OAAA,IAAA;AAAA;AAGR,EAAA,uBAEG,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,YAAA;AAAA;AAAA;AAAA,oBAGA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACA,qBAAqB,EAAA,IAAA;AAAA,QACrB,SAAU,EAAA,OAAA;AAAA,QACV,SAAS,OAAQ,CAAA,KAAA;AAAA,QACjB,QAAU,EAAA;AAAA,UACT,KAAA;AAAA,UACA,QAAA;AAAA,UACA,MAAQ,EAAA,OAAA,CAAQ,MAAW,KAAA,CAAA,GAAI,QAAQ,IAAO,GAAA;AAAA,SAC/C;AAAA,QACA,GAAK,EAAA;AAAA;AAAA;AACN,sBAEA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACN,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,UAAY,EAAA,QAAA;AAAA,QACZ,cAAgB,EAAA,QAAA;AAAA,QAChB,KAAO,EAAA,MAAA;AAAA,QACP,GAAK,EAAA;AAAA,OACN;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,QAAG,KAAO,EAAA,EAAE,QAAQ,CAAE,EAAA,EAAG,IAAI,4BAC5B,EAAA,QAAA,EAAA;AAAA,UAAA,KAAA;AAAA,UAAO,GAAA;AAAA,UACP,CAAA,EAAG,QAAQ,MAAW,KAAA,CAAA,GAAI,MAAM,MAAQ,EAAA,IAAI,KAAK,EAAE,CAAA;AAAA,SACrD,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,IAAG,EAAA,EAAA,KAAA,EAAO,EAAE,KAAA,EAAO,OAAO,OAAS,EAAA,MAAA,EAAQ,CAAE,EAAA,EAC5C,QACF,EAAA,QAAA,EAAA;AAAA;AAAA;AAAA,GAGH,EAAA,CAAA;AAEF","file":"ScorecardHeader.js","sourcesContent":["import { useScorecardConfig } from \"./ConfigProvider\";\nimport { useMemo } from \"react\";\nimport { PeriodUtility } from \"@hisptz/dhis2-utils\";\nimport { head } from \"lodash\";\nimport { colors } from \"@dhis2/ui\";\nimport JsxParser from \"react-jsx-parser\";\nimport { useScorecardViewStateValue } from \"../utils/viewState\";\nimport { usePeriodSelectionValue } from \"../utils/dimensionState\";\n\nexport function ScorecardHeader() {\n\tconst config = useScorecardConfig();\n\tconst { customHeader, title, subtitle } = config ?? {};\n\n\tconst periodSelection = usePeriodSelectionValue();\n\tconst showTitle = useScorecardViewStateValue<boolean>(\"title\");\n\n\tconst periods = useMemo(\n\t\t() => periodSelection.periods,\n\t\t[periodSelection.periods],\n\t);\n\n\tconst period = useMemo(() => {\n\t\tif (periods.length > 1) {\n\t\t\treturn;\n\t\t}\n\t\treturn PeriodUtility.getPeriodById(head(periods)?.id as string);\n\t}, [periods]);\n\n\tif (!showTitle) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{customHeader ? (\n\t\t\t\t/*\n  // @ts-ignore */\n\t\t\t\t<JsxParser\n\t\t\t\t\tautoCloseVoidElements\n\t\t\t\t\tclassName=\"w-100\"\n\t\t\t\t\tonError={console.error}\n\t\t\t\t\tbindings={{\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t\tsubtitle,\n\t\t\t\t\t\tperiod: periods.length === 1 ? period?.name : \"\",\n\t\t\t\t\t}}\n\t\t\t\t\tjsx={customHeader}\n\t\t\t\t/>\n\t\t\t) : (\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\tflexDirection: \"column\",\n\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\tjustifyContent: \"center\",\n\t\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<h1 style={{ margin: 8 }} id={\"data-test-score-card-title\"}>\n\t\t\t\t\t\t{title}{\" \"}\n\t\t\t\t\t\t{`${periods.length === 1 ? ` - ${period?.name}` : \"\"}`}\n\t\t\t\t\t</h1>\n\t\t\t\t\t<h3 style={{ color: colors.grey600, margin: 0 }}>\n\t\t\t\t\t\t{subtitle}\n\t\t\t\t\t</h3>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../src/components/ScorecardHeader.tsx"],"names":[],"mappings":";;;;;;;;;;AASO,SAAS,eAAA,GAAkB;AACjC,EAAA,MAAM,SAAS,kBAAA,EAAmB;AAClC,EAAA,MAAM,EAAE,YAAA,EAAc,KAAA,EAAO,QAAA,EAAS,GAAI,UAAU,EAAC;AAErD,EAAA,MAAM,kBAAkB,uBAAA,EAAwB;AAChD,EAAA,MAAM,SAAA,GAAY,2BAAoC,OAAO,CAAA;AAE7D,EAAA,MAAM,OAAA,GAAU,OAAA;AAAA,IACf,MAAM,eAAA,CAAgB,OAAA;AAAA,IACtB,CAAC,gBAAgB,OAAO;AAAA,GACzB;AAEA,EAAA,MAAM,MAAA,GAAS,QAAQ,MAAM;AAC5B,IAAA,IAAI,OAAA,CAAQ,SAAS,CAAA,EAAG;AACvB,MAAA;AAAA,IACD;AACA,IAAA,OAAO,aAAA,CAAc,aAAA,CAAc,IAAA,CAAK,OAAO,GAAG,EAAY,CAAA;AAAA,EAC/D,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,IAAI,CAAC,SAAA,EAAW;AACf,IAAA,OAAO,IAAA;AAAA,EACR;AAEA,EAAA,uBACC,GAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA,YAAA;AAAA;AAAA;AAAA,oBAGA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACA,qBAAA,EAAqB,IAAA;AAAA,QACrB,SAAA,EAAU,OAAA;AAAA,QACV,SAAS,OAAA,CAAQ,KAAA;AAAA,QACjB,QAAA,EAAU;AAAA,UACT,KAAA;AAAA,UACA,QAAA;AAAA,UACA,MAAA,EAAQ,OAAA,CAAQ,MAAA,KAAW,CAAA,GAAI,QAAQ,IAAA,GAAO;AAAA,SAC/C;AAAA,QACA,GAAA,EAAK;AAAA;AAAA;AACN,sBAEA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,OAAA,EAAS,MAAA;AAAA,QACT,aAAA,EAAe,QAAA;AAAA,QACf,UAAA,EAAY,QAAA;AAAA,QACZ,cAAA,EAAgB,QAAA;AAAA,QAChB,KAAA,EAAO,MAAA;AAAA,QACP,GAAA,EAAK;AAAA,OACN;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,QAAG,KAAA,EAAO,EAAE,QAAQ,CAAA,EAAE,EAAG,IAAI,4BAAA,EAC5B,QAAA,EAAA;AAAA,UAAA,KAAA;AAAA,UAAO,GAAA;AAAA,UACP,CAAA,EAAG,QAAQ,MAAA,KAAW,CAAA,GAAI,MAAM,MAAA,EAAQ,IAAI,KAAK,EAAE,CAAA;AAAA,SAAA,EACrD,CAAA;AAAA,wBACA,GAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAO,EAAE,KAAA,EAAO,OAAO,OAAA,EAAS,MAAA,EAAQ,CAAA,EAAE,EAC5C,QAAA,EAAA,QAAA,EACF;AAAA;AAAA;AAAA,GACD,EAEF,CAAA;AAEF","file":"ScorecardHeader.js","sourcesContent":["import { useScorecardConfig } from \"./ConfigProvider\";\nimport { useMemo } from \"react\";\nimport { PeriodUtility } from \"@hisptz/dhis2-utils\";\nimport { head } from \"lodash\";\nimport { colors } from \"@dhis2/ui\";\nimport JsxParser from \"react-jsx-parser\";\nimport { useScorecardViewStateValue } from \"../utils/viewState\";\nimport { usePeriodSelectionValue } from \"../utils/dimensionState\";\n\nexport function ScorecardHeader() {\n\tconst config = useScorecardConfig();\n\tconst { customHeader, title, subtitle } = config ?? {};\n\n\tconst periodSelection = usePeriodSelectionValue();\n\tconst showTitle = useScorecardViewStateValue<boolean>(\"title\");\n\n\tconst periods = useMemo(\n\t\t() => periodSelection.periods,\n\t\t[periodSelection.periods],\n\t);\n\n\tconst period = useMemo(() => {\n\t\tif (periods.length > 1) {\n\t\t\treturn;\n\t\t}\n\t\treturn PeriodUtility.getPeriodById(head(periods)?.id as string);\n\t}, [periods]);\n\n\tif (!showTitle) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{customHeader ? (\n\t\t\t\t/*\n  // @ts-ignore */\n\t\t\t\t<JsxParser\n\t\t\t\t\tautoCloseVoidElements\n\t\t\t\t\tclassName=\"w-100\"\n\t\t\t\t\tonError={console.error}\n\t\t\t\t\tbindings={{\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t\tsubtitle,\n\t\t\t\t\t\tperiod: periods.length === 1 ? period?.name : \"\",\n\t\t\t\t\t}}\n\t\t\t\t\tjsx={customHeader}\n\t\t\t\t/>\n\t\t\t) : (\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\tflexDirection: \"column\",\n\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\tjustifyContent: \"center\",\n\t\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<h1 style={{ margin: 8 }} id={\"data-test-score-card-title\"}>\n\t\t\t\t\t\t{title}{\" \"}\n\t\t\t\t\t\t{`${periods.length === 1 ? ` - ${period?.name}` : \"\"}`}\n\t\t\t\t\t</h1>\n\t\t\t\t\t<h3 style={{ color: colors.grey600, margin: 0 }}>\n\t\t\t\t\t\t{subtitle}\n\t\t\t\t\t</h3>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScorecardLegendsView/ScorecardLegendsView.tsx"],"names":["ScorecardLegendsView"],"mappings":";;;;;;;;AAOa,MAAA,oBAAA,GAAuB,IAAK,CAAA,SAASA,qBAAuB,GAAA;AACxE,EAAA,MAAM,SAAS,kBAAmB,EAAA;AAClC,EAAA,MAAM,oBAAoB,MAAQ,CAAA,iBAAA;AAClC,EAAM,MAAA,WAAA,GAAc,2BAAoC,QAAQ,CAAA;AAEhE,EAAA,IAAI,CAAC,WAAa,EAAA;AACjB,IAAO,OAAA,IAAA;AAAA;AAGR,EACC,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACN,GAAK,EAAA,EAAA;AAAA,QACL,OAAS,EAAA,QAAA;AAAA,QACT,OAAS,EAAA,MAAA;AAAA,QACT,UAAY,EAAA,QAAA;AAAA,QACZ,cAAgB,EAAA;AAAA,OACjB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACA,KAAO,EAAA;AAAA,cACN,OAAS,EAAA,MAAA;AAAA,cACT,GAAK,EAAA,CAAA;AAAA,cACL,mBAAA,EAAqB,CAAU,OAAA,EAAA,iBAAA,CAAkB,MAAM,CAAA,OAAA;AAAA,aACxD;AAAA,YAEC,QAAA,EAAA,iBAAA,CAAkB,GAAI,CAAA,CAAC,IACvB,qBAAA,GAAA,CAAC,cAAW,MAAQ,EAAA,IAAA,EAAA,EAAW,IAAK,CAAA,EAAI,CACxC;AAAA;AAAA,SACF;AAAA,4BACC,KACA,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACA,KAAO,EAAA;AAAA,cACN,GAAK,EAAA,EAAA;AAAA,cACL,WAAa,EAAA,UAAA;AAAA,cACb,OAAS,EAAA,MAAA;AAAA,cACT,UAAY,EAAA,QAAA;AAAA,cACZ,cAAgB,EAAA;AAAA,aACjB;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,CAAA;AAAA,kCACjB,yBAA0B,EAAA,EAAA;AAAA;AAAA;AAAA,SAE7B,EAAA;AAAA;AAAA;AAAA,GACD;AAEF,CAAC","file":"ScorecardLegendsView.js","sourcesContent":["import { ArrowLegendsView } from \"./components/ArrowLegendView\";\nimport { SpecificTargetLegendsView } from \"./components/SpecificTargetLegendsView\";\nimport { LegendView } from \"./components/LegendView\";\nimport { useScorecardConfig } from \"../ConfigProvider\";\nimport { memo } from \"react\";\nimport { useScorecardViewStateValue } from \"../../utils/viewState\";\n\nexport const ScorecardLegendsView = memo(function ScorecardLegendsView() {\n\tconst config = useScorecardConfig();\n\tconst legendDefinitions = config!.legendDefinitions;\n\tconst showLegends = useScorecardViewStateValue<boolean>(\"legend\");\n\n\tif (!showLegends) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tgap: 16,\n\t\t\t\tpadding: \"0 16px\",\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\talignItems: \"center\",\n\t\t\t\tjustifyContent: \"space-between\",\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: \"grid\",\n\t\t\t\t\tgap: 8,\n\t\t\t\t\tgridTemplateColumns: `repeat(${legendDefinitions.length}, auto)`,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{legendDefinitions.map((item) => (\n\t\t\t\t\t<LegendView legend={item} key={item.id} />\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t\tjustifySelf: \"flex-end\",\n\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\tjustifyContent: \"space-between\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ArrowLegendsView />\n\t\t\t\t\t<SpecificTargetLegendsView />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n"]}
+{"version":3,"sources":["../../../../src/components/ScorecardLegendsView/ScorecardLegendsView.tsx"],"names":["ScorecardLegendsView"],"mappings":";;;;;;;;AAOO,MAAM,oBAAA,GAAuB,IAAA,CAAK,SAASA,qBAAAA,GAAuB;AACxE,EAAA,MAAM,SAAS,kBAAA,EAAmB;AAClC,EAAA,MAAM,oBAAoB,MAAA,CAAQ,iBAAA;AAClC,EAAA,MAAM,WAAA,GAAc,2BAAoC,QAAQ,CAAA;AAEhE,EAAA,IAAI,CAAC,WAAA,EAAa;AACjB,IAAA,OAAO,IAAA;AAAA,EACR;AAEA,EAAA,uBACC,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAO;AAAA,QACN,GAAA,EAAK,EAAA;AAAA,QACL,OAAA,EAAS,QAAA;AAAA,QACT,OAAA,EAAS,MAAA;AAAA,QACT,UAAA,EAAY,QAAA;AAAA,QACZ,cAAA,EAAgB;AAAA,OACjB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACA,KAAA,EAAO;AAAA,cACN,OAAA,EAAS,MAAA;AAAA,cACT,GAAA,EAAK,CAAA;AAAA,cACL,mBAAA,EAAqB,CAAA,OAAA,EAAU,iBAAA,CAAkB,MAAM,CAAA,OAAA;AAAA,aACxD;AAAA,YAEC,QAAA,EAAA,iBAAA,CAAkB,GAAA,CAAI,CAAC,IAAA,qBACvB,GAAA,CAAC,cAAW,MAAA,EAAQ,IAAA,EAAA,EAAW,IAAA,CAAK,EAAI,CACxC;AAAA;AAAA,SACF;AAAA,4BACC,KAAA,EAAA,EACA,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACA,KAAA,EAAO;AAAA,cACN,GAAA,EAAK,EAAA;AAAA,cACL,WAAA,EAAa,UAAA;AAAA,cACb,OAAA,EAAS,MAAA;AAAA,cACT,UAAA,EAAY,QAAA;AAAA,cACZ,cAAA,EAAgB;AAAA,aACjB;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,CAAA;AAAA,kCACjB,yBAAA,EAAA,EAA0B;AAAA;AAAA;AAAA,SAC5B,EACD;AAAA;AAAA;AAAA,GACD;AAEF,CAAC","file":"ScorecardLegendsView.js","sourcesContent":["import { ArrowLegendsView } from \"./components/ArrowLegendView\";\nimport { SpecificTargetLegendsView } from \"./components/SpecificTargetLegendsView\";\nimport { LegendView } from \"./components/LegendView\";\nimport { useScorecardConfig } from \"../ConfigProvider\";\nimport { memo } from \"react\";\nimport { useScorecardViewStateValue } from \"../../utils/viewState\";\n\nexport const ScorecardLegendsView = memo(function ScorecardLegendsView() {\n\tconst config = useScorecardConfig();\n\tconst legendDefinitions = config!.legendDefinitions;\n\tconst showLegends = useScorecardViewStateValue<boolean>(\"legend\");\n\n\tif (!showLegends) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tgap: 16,\n\t\t\t\tpadding: \"0 16px\",\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\talignItems: \"center\",\n\t\t\t\tjustifyContent: \"space-between\",\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: \"grid\",\n\t\t\t\t\tgap: 8,\n\t\t\t\t\tgridTemplateColumns: `repeat(${legendDefinitions.length}, auto)`,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{legendDefinitions.map((item) => (\n\t\t\t\t\t<LegendView legend={item} key={item.id} />\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t\tjustifySelf: \"flex-end\",\n\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\tjustifyContent: \"space-between\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ArrowLegendsView />\n\t\t\t\t\t<SpecificTargetLegendsView />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ScorecardLegendsView/components/ArrowLegendView.tsx"],"names":[],"mappings":";;;;;AAIO,SAAS,gBAAmB,GAAA;AAClC,EAAM,MAAA,UAAA,GAAa,2BAAoC,QAAQ,CAAA;AAE/D,EAAA,IAAI,CAAC,UAAY,EAAA;AAChB,IAAO,OAAA,IAAA;AAAA;AAGR,EACC,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,OAAO,EAAE,GAAA,EAAK,IAAI,OAAS,EAAA,MAAA,EAAQ,qBAAqB,SAAU,EAAA;AAAA,MAElE,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,OAAO,EAAE,GAAA,EAAK,GAAG,OAAS,EAAA,MAAA,EAAQ,UAAY,EAAA,QAAA,EAClD,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,aAAc,EAAA,EAAA,CAAA;AAAA,UACd,IAAA,CAAK,EAAE,4BAA4B;AAAA,SACrC,EAAA,CAAA;AAAA,wBACA,IAAA,CAAC,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,GAAA,EAAK,GAAG,OAAS,EAAA,MAAA,EAAQ,UAAY,EAAA,QAAA,EAClD,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,CAAA;AAAA,UAChB,IAAA,CAAK,EAAE,4BAA4B;AAAA,SACrC,EAAA;AAAA;AAAA;AAAA,GACD;AAEF","file":"ArrowLegendView.js","sourcesContent":["import { IconArrowDown24, IconArrowUp24 } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useScorecardViewStateValue } from \"../../../utils/viewState\";\n\nexport function ArrowLegendsView() {\n\tconst showArrows = useScorecardViewStateValue<boolean>(\"arrows\");\n\n\tif (!showArrows) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ gap: 16, display: \"grid\", gridTemplateColumns: \"1fr 1fr\" }}\n\t\t>\n\t\t\t<div style={{ gap: 8, display: \"flex\", alignItems: \"center\" }}>\n\t\t\t\t<IconArrowUp24 />\n\t\t\t\t{i18n.t(\"Increased from last period\")}\n\t\t\t</div>\n\t\t\t<div style={{ gap: 8, display: \"flex\", alignItems: \"center\" }}>\n\t\t\t\t<IconArrowDown24 />\n\t\t\t\t{i18n.t(\"Decreased from last period\")}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../src/components/ScorecardLegendsView/components/ArrowLegendView.tsx"],"names":[],"mappings":";;;;;AAIO,SAAS,gBAAA,GAAmB;AAClC,EAAA,MAAM,UAAA,GAAa,2BAAoC,QAAQ,CAAA;AAE/D,EAAA,IAAI,CAAC,UAAA,EAAY;AAChB,IAAA,OAAO,IAAA;AAAA,EACR;AAEA,EAAA,uBACC,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,OAAO,EAAE,GAAA,EAAK,IAAI,OAAA,EAAS,MAAA,EAAQ,qBAAqB,SAAA,EAAU;AAAA,MAElE,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,OAAO,EAAE,GAAA,EAAK,GAAG,OAAA,EAAS,MAAA,EAAQ,UAAA,EAAY,QAAA,EAAS,EAC3D,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA;AAAA,UACd,IAAA,CAAK,EAAE,4BAA4B;AAAA,SAAA,EACrC,CAAA;AAAA,wBACA,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,GAAA,EAAK,GAAG,OAAA,EAAS,MAAA,EAAQ,UAAA,EAAY,QAAA,EAAS,EAC3D,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA;AAAA,UAChB,IAAA,CAAK,EAAE,4BAA4B;AAAA,SAAA,EACrC;AAAA;AAAA;AAAA,GACD;AAEF","file":"ArrowLegendView.js","sourcesContent":["import { IconArrowDown24, IconArrowUp24 } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useScorecardViewStateValue } from \"../../../utils/viewState\";\n\nexport function ArrowLegendsView() {\n\tconst showArrows = useScorecardViewStateValue<boolean>(\"arrows\");\n\n\tif (!showArrows) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ gap: 16, display: \"grid\", gridTemplateColumns: \"1fr 1fr\" }}\n\t\t>\n\t\t\t<div style={{ gap: 8, display: \"flex\", alignItems: \"center\" }}>\n\t\t\t\t<IconArrowUp24 />\n\t\t\t\t{i18n.t(\"Increased from last period\")}\n\t\t\t</div>\n\t\t\t<div style={{ gap: 8, display: \"flex\", alignItems: \"center\" }}>\n\t\t\t\t<IconArrowDown24 />\n\t\t\t\t{i18n.t(\"Decreased from last period\")}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

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

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

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

@@ -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>\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":[],"mappings":"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","file":"LegendView.js","sourcesContent":["import i18n from \"@dhis2/d2-i18n\";\nimport { find } from \"lodash\";\nimport { useScorecardConfig } from \"../../ConfigProvider\";\nimport type {\n\tLegendDefinition,\n\tScorecardLegend,\n} from \"../../../schemas/config\";\n\nexport interface LegendsViewProps {\n\tlegends: ScorecardLegend[];\n}\n\nexport function LegendsView({ legends }: LegendsViewProps) {\n\tconst config = useScorecardConfig();\n\tconst legendDefinitions = config.legendDefinitions ?? [];\n\n\treturn (\n\t\t<div className=\"column gap-8\">\n\t\t\t<table>\n\t\t\t\t<col width=\"60%\" />\n\t\t\t\t<col width=\"20%\" />\n\t\t\t\t<col width=\"20%\" />\n\t\t\t\t<thead style={{ fontSize: 14 }}>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th align=\"left\">{i18n.t(\"Legend\")}</th>\n\t\t\t\t\t\t<th>{i18n.t(\"Min\")}</th>\n\t\t\t\t\t\t<th>{i18n.t(\"Max\")}</th>\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t{legends?.map((legend) => {\n\t\t\t\t\t\tconst legendDefinition = find(legendDefinitions, {\n\t\t\t\t\t\t\tid: legend.legendDefinitionId,\n\t\t\t\t\t\t});\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<tr\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tkey={`${legend.id}-view`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tdisplay: \"grid\",\n\t\t\t\t\t\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\t\t\t\t\tgridTemplateColumns: \"32px 1fr\",\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\theight: 24,\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: 32,\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlegendDefinition?.color,\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div>{legendDefinition?.name}</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t<td align=\"center\">{legend?.startValue}</td>\n\t\t\t\t\t\t\t\t<td align=\"center\">{legend?.endValue}</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t</div>\n\t);\n}\n\nexport interface LegendViewProps {\n\tlegend: LegendDefinition;\n}\n\nexport function LegendView({ legend }: LegendViewProps) {\n\tconst { color, name, id } = legend;\n\treturn (\n\t\t<div\n\t\t\tkey={id}\n\t\t\tstyle={{ display: \"grid\", gap: 8, gridTemplateColumns: \"auto 1fr\" }}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: 60,\n\t\t\t\t\theight: 25,\n\t\t\t\t\tbackground: color,\n\t\t\t\t\tborder: \"1px solid rgb(232, 237, 242)\",\n\t\t\t\t\tpadding: 16,\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<p style={{ paddingLeft: 8, marginRight: 8 }}>{name}</p>\n\t\t</div>\n\t);\n}\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ScorecardLegendsView/components/OrgUnitLevelSpecificTargetView.tsx"],"names":[],"mappings":";;;;;;AAWO,SAAS,8BAA+B,CAAA;AAAA,EAC9C,cAAA;AAAA,EACA;AACD,CAAmC,EAAA;AAClC,EAAA,MAAM,OAAO,gBAAiB,EAAA;AAC9B,EAAM,MAAA,aAAA,GAAgB,IAAM,EAAA,aAAA,IAAiB,EAAC;AAE9C,EACC,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACN,QAAU,EAAA,GAAA;AAAA,QACV,MAAA,EAAQ,CAAa,UAAA,EAAA,MAAA,CAAO,OAAO,CAAA,CAAA;AAAA,QACnC,YAAc,EAAA,CAAA;AAAA,QACd,GAAK,EAAA;AAAA,OACN;AAAA,MACA,SAAU,EAAA,oBAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KACA,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,GAAG,EAAA,EAAA,QAAA,EAAA;AAAA,YAAA,IAAA,CAAK,EAAE,aAAa,CAAA;AAAA,YAAE;AAAA,WAAE,EAAA,CAAA;AAAA,UAC3B;AAAA,SACF,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,KAAA,EAAA,EAAI,KAAO,EAAA,EAAE,KAAK,EAAG,EAAA,EAAG,SAAU,EAAA,cAAA,EACjC,iBAAO,IAAK,CAAA,cAAc,CAAE,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA;AACzC,UAAA,MAAM,eAAe,aAAc,CAAA,IAAA;AAAA,YAClC,CAAC,KAAU,KAAA,KAAA,CAAM,EAAO,KAAA;AAAA,WACzB;AACA,UAAM,MAAA,OAAA,GAAU,eAAe,GAAG,CAAA;AAClC,UAAA,4BACE,KACA,EAAA,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,SAAI,SAAU,EAAA,eAAA,EACd,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EACA,+BAAC,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,cAAA,IAAA,CAAK,EAAE,yBAAyB,CAAA;AAAA,cAAE,GAAA;AAAA,cAAE,GAAA;AAAA,cACpC,YAAc,EAAA;AAAA,aAAA,EAChB,GACD,CACD,EAAA,CAAA;AAAA,4BACA,GAAA,CAAC,eAAY,OAAkB,EAAA;AAAA,WAChC,EAAA,CAAA;AAAA,SAED,CACF,EAAA;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":[],"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"]}

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

@@ -24,9 +24,14 @@ function OrgUnitSpecificTargetView({
     "div",
     {
       style: {
-        maxWidth: 350,
+        maxWidth: "fit-content",
         border: `1px solid ${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/esm/components/ScorecardLegendsView/components/OrgUnitSpecificTargetView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ScorecardLegendsView/components/OrgUnitSpecificTargetView.tsx"],"names":[],"mappings":";;;;;;AAWO,SAAS,yBAA0B,CAAA;AAAA,EACzC,cAAA;AAAA,EACA;AACD,CAAmC,EAAA;AAClC,EAAA,MAAM,QAAQ,cAAe,CAAA,KAAA;AAC7B,EAAA,MAAM,EAAE,OAAA,EAAS,QAAS,EAAA,GAAI,YAAY,KAAK,CAAA;AAE/C,EAAA,IAAI,OAAS,EAAA;AACZ,IACC,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACA,KAAO,EAAA,EAAE,QAAU,EAAA,GAAA,EAAK,WAAW,GAAI,EAAA;AAAA,QACvC,SAAU,EAAA,kDAAA;AAAA,QAEV,QAAA,kBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,UAAA,EAAU,IAAC,EAAA;AAAA;AAAA,KAC5B;AAAA;AAIF,EACC,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACN,QAAU,EAAA,GAAA;AAAA,QACV,MAAA,EAAQ,CAAa,UAAA,EAAA,MAAA,CAAO,OAAO,CAAA,CAAA;AAAA,QACnC,YAAc,EAAA;AAAA,OACf;AAAA,MACA,SAAU,EAAA,oBAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,eACd,EAAA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KACA,EAAA,EAAA,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,GAAG,EAAA,EAAA,QAAA,EAAA;AAAA,cAAA,IAAA,CAAK,EAAE,sBAAsB,CAAA;AAAA,cAAE;AAAA,aAAE,EAAA,CAAA;AAAA,YAAK,GAAA;AAAA,YACzC,QAAA,EAAU,IAAI,CAAC,EAAA,KAAO,GAAG,WAAW,CAAA,EAAG,KAAK,IAAI;AAAA,WAClD,EAAA,CAAA;AAAA,+BACC,KACA,EAAA,EAAA,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,GAAG,EAAA,EAAA,QAAA,EAAA;AAAA,cAAA,IAAA,CAAK,EAAE,aAAa,CAAA;AAAA,cAAE;AAAA,aAAE,EAAA,CAAA;AAAA,YAC3B;AAAA,WACF,EAAA;AAAA,SACD,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,WAAA,EAAA,EAAY,OAAS,EAAA,cAAA,CAAe,OAAS,EAAA;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":[],"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"]}

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

@@ -23,27 +23,40 @@ function PeriodSpecificTargetView({
       style: {
         maxWidth: 350,
         border: `1px solid ${colors.grey600}`,
-        borderRadius: 4
+        borderRadius: 4,
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        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("Period(s)"),
-              ": "
-            ] }),
-            " ",
-            periods?.map((ou) => ou.displayName)?.join(", ")
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsxs("b", { children: [
-              i18n.t("Data Source"),
-              ": "
-            ] }),
-            label
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              gap: 8,
+              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(LegendsView, { legends: specificTarget.legends })
       ]
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ScorecardLegendsView/components/PeriodSpecificTargetView.tsx"],"names":[],"mappings":";;;;;;;AAYO,SAAS,wBAAyB,CAAA;AAAA,EACxC,cAAA;AAAA,EACA;AACD,CAAmC,EAAA;AAClC,EAAA,MAAM,QAAQ,cAAe,CAAA,KAAA;AAC7B,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,UAAU,KAAM,CAAA,GAAA;AAAA,IAAI,CAAC,aAC1B,6BAA8B,CAAA;AAAA,MAC7B,QAAA;AAAA,MACA;AAAA,KACA;AAAA,GACF;AAEA,EACC,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACN,QAAU,EAAA,GAAA;AAAA,QACV,MAAA,EAAQ,CAAa,UAAA,EAAA,MAAA,CAAO,OAAO,CAAA,CAAA;AAAA,QACnC,YAAc,EAAA;AAAA,OACf;AAAA,MACA,SAAU,EAAA,oBAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,eACd,EAAA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KACA,EAAA,EAAA,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,GAAG,EAAA,EAAA,QAAA,EAAA;AAAA,cAAA,IAAA,CAAK,EAAE,WAAW,CAAA;AAAA,cAAE;AAAA,aAAE,EAAA,CAAA;AAAA,YAAK,GAAA;AAAA,YAC9B,OAAA,EAAS,IAAI,CAAC,EAAA,KAAO,GAAG,WAAW,CAAA,EAAG,KAAK,IAAI;AAAA,WACjD,EAAA,CAAA;AAAA,+BACC,KACA,EAAA,EAAA,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,GAAG,EAAA,EAAA,QAAA,EAAA;AAAA,cAAA,IAAA,CAAK,EAAE,aAAa,CAAA;AAAA,cAAE;AAAA,aAAE,EAAA,CAAA;AAAA,YAC3B;AAAA,WACF,EAAA;AAAA,SACD,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,WAAA,EAAA,EAAY,OAAS,EAAA,cAAA,CAAe,OAAS,EAAA;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":[],"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"]}

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

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