@hisptz/dhis2-scorecard 1.1.10 → 1.2.0

package/dist/components/ScorecardTable/components/ExpandedScorecardTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScorecardTable/components/ExpandedScorecardTable.tsx"],"names":["useScorecardConfig","state","useScorecardStateValue","useMemo","getOrgUnitLevel","jsx","CircularLoader","ScorecardStateProvider","ScorecardContext","ScorecardDataProvider","TableStateProvider","ScorecardTable"],"mappings":";;;;;;;;;;;;;;AAaO,SAAS,sBAAuB,CAAA;AAAA,EACtC,OAAA;AAAA,EACA;AACD,CAGG,EAAA;AACF,EAAA,MAAM,SAASA,iCAAmB,EAAA;AAClC,EAAA,MAAMC,UAAQC,4BAAuB,EAAA;AAErC,EAAM,MAAA,gBAAA,GAAqCC,cAAQ,MAAM;AACxD,IAAA,MAAM,YAAY,OAAQ,CAAA,GAAA;AAC1B,IAAM,MAAA,KAAA,GAAQC,wBAAgB,CAAA,OAAO,CAAI,GAAA,CAAA;AAEzC,IAAO,OAAA;AAAA,MACN,QAAU,EAAA;AAAA,QACT;AAAA,UACC,EAAI,EAAA;AAAA;AACL,OACD;AAAA,MACA,MAAQ,EAAA,CAAC,KAAM,CAAA,QAAA,EAAU,CAAA;AAAA,MACzB,QAAQ;AAAC,KACV;AAAA,GACD,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,IAAI,CAAC,MAAQ,EAAA;AACZ,IAAO,OAAA,IAAA;AAAA;AAGR,EACC,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACN,MAAQ,EAAA,MAAA;AAAA,QACR,KAAO,EAAA,MAAA;AAAA,QACP,SAAW,EAAA,GAAA;AAAA,QACX,OAAS,EAAA;AAAA,OACV;AAAA,MAEC,QACA,EAAA,OAAA,mBAAAA,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACA,KAAO,EAAA;AAAA,YACN,MAAQ,EAAA,MAAA;AAAA,YACR,KAAO,EAAA,MAAA;AAAA,YACP,SAAW,EAAA,GAAA;AAAA,YACX,OAAS,EAAA;AAAA,WACV;AAAA,UAEA,QAAA,kBAAAA,cAAA,CAACC,iBAAe,EAAA,EAAA,KAAA,EAAK,IAAC,EAAA;AAAA;AAAA,OAGvB,mBAAAD,cAAA;AAAA,QAACE,oCAAA;AAAA,QAAA;AAAA,UACA,MAAQ,EAAA;AAAA,YACP,GAAG,MAAA;AAAA,YACH;AAAA,WACD;AAAA,UACA,cAAc,EAAA,IAAA;AAAA,UACd,YACC,EAAA;AAAA,YACC,GAAGN,OAAA;AAAA,YACH;AAAA,WACD;AAAA,UAGD,QAAA,kBAAAI,cAAA;AAAA,YAACG,iCAAA;AAAA,YAAA;AAAA,cAEA,MAAQ,EAAA;AAAA,gBACP,GAAG,MAAA;AAAA,gBACH;AAAA,eACD;AAAA,cAEA,QAAA,kBAAAH,cAAA,CAACI,kCACA,EAAA,EAAA,QAAA,kBAAAJ,cAAA,CAACK,qCACA,EAAA,EAAA,QAAA,kBAAAL,cAAA;AAAA,gBAACM,6BAAA;AAAA,gBAAA;AAAA,kBACA,YAAa,EAAA,MAAA;AAAA,kBACb,WAAY,EAAA,MAAA;AAAA,kBACZ,KAAM,EAAA;AAAA;AAAA,iBAER,CACD,EAAA;AAAA,aAAA;AAAA,YAdK,CAAA,EAAG,QAAQ,GAAG,CAAA,SAAA;AAAA;AAepB;AAAA;AACD;AAAA,GAEF;AAEF","file":"ExpandedScorecardTable.js","sourcesContent":["import { useScorecardConfig } from \"../../ConfigProvider\";\nimport type { ItemMeta } from \"../../../hooks/metadata\";\nimport { useMemo } from \"react\";\nimport { getOrgUnitLevel } from \"../../../utils/orgUnits\";\nimport type { OrgUnitSelection, ScorecardState } from \"../../../schemas/config\";\nimport { ScorecardContext } from \"../../ScorecardContext\";\nimport { CircularLoader } from \"@dhis2/ui\";\nimport { useScorecardStateValue } from \"../../../state\";\nimport { TableStateProvider } from \"../../TableStateProvider\";\nimport { ScorecardTable } from \"../ScorecardTable\";\nimport { ScorecardDataProvider } from \"../../DataProvider\";\nimport { ScorecardStateProvider } from \"../../StateProvider\";\n\nexport function ExpandedScorecardTable({\n\torgUnit,\n\tpending,\n}: {\n\torgUnit: ItemMeta & { hierarchy: string };\n\tpending: boolean;\n}) {\n\tconst config = useScorecardConfig();\n\tconst state = useScorecardStateValue();\n\n\tconst orgUnitSelection: OrgUnitSelection = useMemo(() => {\n\t\tconst orgUnitId = orgUnit.uid;\n\t\tconst level = getOrgUnitLevel(orgUnit) + 1;\n\n\t\treturn {\n\t\t\torgUnits: [\n\t\t\t\t{\n\t\t\t\t\tid: orgUnitId,\n\t\t\t\t},\n\t\t\t],\n\t\t\tlevels: [level.toString()],\n\t\t\tgroups: [],\n\t\t};\n\t}, [orgUnit]);\n\n\tif (!config) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\theight: \"100%\",\n\t\t\t\twidth: \"100%\",\n\t\t\t\tminHeight: 500,\n\t\t\t\tpadding: 32,\n\t\t\t}}\n\t\t>\n\t\t\t{pending ? (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: \"100%\",\n\t\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\t\tminHeight: 500,\n\t\t\t\t\t\tpadding: 32,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CircularLoader small />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<ScorecardStateProvider\n\t\t\t\t\tconfig={{\n\t\t\t\t\t\t...config,\n\t\t\t\t\t\torgUnitSelection,\n\t\t\t\t\t}}\n\t\t\t\t\twithRecoilRoot\n\t\t\t\t\tinitialState={\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t...state,\n\t\t\t\t\t\t\torgUnitSelection,\n\t\t\t\t\t\t} as ScorecardState\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<ScorecardContext\n\t\t\t\t\t\tkey={`${orgUnit.uid}-expanded`}\n\t\t\t\t\t\tconfig={{\n\t\t\t\t\t\t\t...config,\n\t\t\t\t\t\t\torgUnitSelection,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ScorecardDataProvider>\n\t\t\t\t\t\t\t<TableStateProvider>\n\t\t\t\t\t\t\t\t<ScorecardTable\n\t\t\t\t\t\t\t\t\tscrollHeight=\"100%\"\n\t\t\t\t\t\t\t\t\tscrollWidth=\"100%\"\n\t\t\t\t\t\t\t\t\twidth=\"auto\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</TableStateProvider>\n\t\t\t\t\t\t</ScorecardDataProvider>\n\t\t\t\t\t</ScorecardContext>\n\t\t\t\t</ScorecardStateProvider>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../src/components/ScorecardTable/components/ExpandedScorecardTable.tsx"],"names":["useScorecardConfig","usePeriodSelectionValue","useScorecardViewOptions","useMemo","getOrgUnitLevel","jsx","CircularLoader","ScorecardStateProvider","ScorecardContext","ScorecardDataProvider","TableStateProvider","ScorecardTable"],"mappings":";;;;;;;;;;;;;;;AAcO,SAAS,sBAAuB,CAAA;AAAA,EACtC,OAAA;AAAA,EACA;AACD,CAGG,EAAA;AACF,EAAA,MAAM,SAASA,iCAAmB,EAAA;AAClC,EAAA,MAAM,kBAAkBC,sCAAwB,EAAA;AAChD,EAAA,MAAM,UAAUC,iCAAwB,EAAA;AACxC,EAAM,MAAA,gBAAA,GAAqCC,cAAQ,MAAM;AACxD,IAAA,MAAM,YAAY,OAAQ,CAAA,GAAA;AAC1B,IAAM,MAAA,KAAA,GAAQC,wBAAgB,CAAA,OAAO,CAAI,GAAA,CAAA;AAEzC,IAAO,OAAA;AAAA,MACN,QAAU,EAAA;AAAA,QACT;AAAA,UACC,EAAI,EAAA;AAAA;AACL,OACD;AAAA,MACA,MAAQ,EAAA,CAAC,KAAM,CAAA,QAAA,EAAU,CAAA;AAAA,MACzB,QAAQ;AAAC,KACV;AAAA,GACD,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,IAAI,CAAC,MAAQ,EAAA;AACZ,IAAO,OAAA,IAAA;AAAA;AAGR,EACC,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACN,MAAQ,EAAA,MAAA;AAAA,QACR,KAAO,EAAA,MAAA;AAAA,QACP,SAAW,EAAA,GAAA;AAAA,QACX,OAAS,EAAA;AAAA,OACV;AAAA,MAEC,QACA,EAAA,OAAA,mBAAAA,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACA,KAAO,EAAA;AAAA,YACN,MAAQ,EAAA,MAAA;AAAA,YACR,KAAO,EAAA,MAAA;AAAA,YACP,SAAW,EAAA,GAAA;AAAA,YACX,OAAS,EAAA;AAAA,WACV;AAAA,UAEA,QAAA,kBAAAA,cAAA,CAACC,iBAAe,EAAA,EAAA,KAAA,EAAK,IAAC,EAAA;AAAA;AAAA,OAGvB,mBAAAD,cAAA;AAAA,QAACE,oCAAA;AAAA,QAAA;AAAA,UACA,MAAQ,EAAA;AAAA,YACP,GAAG,MAAA;AAAA,YACH;AAAA,WACD;AAAA,UACA,YACC,EAAA;AAAA,YACC,GAAG,OAAA;AAAA,YACH,eAAA;AAAA,YACA;AAAA,WACD;AAAA,UAGD,QAAA,kBAAAF,cAAA;AAAA,YAACG,iCAAA;AAAA,YAAA;AAAA,cAEA,MAAQ,EAAA;AAAA,gBACP,GAAG,MAAA;AAAA,gBACH;AAAA,eACD;AAAA,cAEA,QAAA,kBAAAH,cAAA,CAACI,kCACA,EAAA,EAAA,QAAA,kBAAAJ,cAAA,CAACK,qCACA,EAAA,EAAA,QAAA,kBAAAL,cAAA;AAAA,gBAACM,6BAAA;AAAA,gBAAA;AAAA,kBACA,YAAa,EAAA,MAAA;AAAA,kBACb,WAAY,EAAA,MAAA;AAAA,kBACZ,KAAM,EAAA;AAAA;AAAA,iBAER,CACD,EAAA;AAAA,aAAA;AAAA,YAdK,CAAA,EAAG,QAAQ,GAAG,CAAA,SAAA;AAAA;AAepB;AAAA;AACD;AAAA,GAEF;AAEF","file":"ExpandedScorecardTable.js","sourcesContent":["import { useScorecardConfig } from \"../../ConfigProvider\";\nimport type { ItemMeta } from \"../../../hooks/metadata\";\nimport { useMemo } from \"react\";\nimport { getOrgUnitLevel } from \"../../../utils/orgUnits\";\nimport type { OrgUnitSelection, ScorecardState } from \"../../../schemas/config\";\nimport { ScorecardContext } from \"../../ScorecardContext\";\nimport { CircularLoader } from \"@dhis2/ui\";\nimport { TableStateProvider } from \"../../TableStateProvider\";\nimport { ScorecardTable } from \"../ScorecardTable\";\nimport { ScorecardDataProvider } from \"../../DataProvider\";\nimport { ScorecardStateProvider } from \"../../StateProvider\";\nimport { usePeriodSelectionValue } from \"../../../utils/dimensionState\";\nimport { useScorecardViewOptions } from \"../../../utils/viewState\";\n\nexport function ExpandedScorecardTable({\n\torgUnit,\n\tpending,\n}: {\n\torgUnit: ItemMeta & { hierarchy: string };\n\tpending: boolean;\n}) {\n\tconst config = useScorecardConfig();\n\tconst periodSelection = usePeriodSelectionValue();\n\tconst options = useScorecardViewOptions();\n\tconst orgUnitSelection: OrgUnitSelection = useMemo(() => {\n\t\tconst orgUnitId = orgUnit.uid;\n\t\tconst level = getOrgUnitLevel(orgUnit) + 1;\n\n\t\treturn {\n\t\t\torgUnits: [\n\t\t\t\t{\n\t\t\t\t\tid: orgUnitId,\n\t\t\t\t},\n\t\t\t],\n\t\t\tlevels: [level.toString()],\n\t\t\tgroups: [],\n\t\t};\n\t}, [orgUnit]);\n\n\tif (!config) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\theight: \"100%\",\n\t\t\t\twidth: \"100%\",\n\t\t\t\tminHeight: 500,\n\t\t\t\tpadding: 32,\n\t\t\t}}\n\t\t>\n\t\t\t{pending ? (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: \"100%\",\n\t\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\t\tminHeight: 500,\n\t\t\t\t\t\tpadding: 32,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CircularLoader small />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<ScorecardStateProvider\n\t\t\t\t\tconfig={{\n\t\t\t\t\t\t...config,\n\t\t\t\t\t\torgUnitSelection,\n\t\t\t\t\t}}\n\t\t\t\t\tinitialState={\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t...options,\n\t\t\t\t\t\t\tperiodSelection,\n\t\t\t\t\t\t\torgUnitSelection,\n\t\t\t\t\t\t} as ScorecardState\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<ScorecardContext\n\t\t\t\t\t\tkey={`${orgUnit.uid}-expanded`}\n\t\t\t\t\t\tconfig={{\n\t\t\t\t\t\t\t...config,\n\t\t\t\t\t\t\torgUnitSelection,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ScorecardDataProvider>\n\t\t\t\t\t\t\t<TableStateProvider>\n\t\t\t\t\t\t\t\t<ScorecardTable\n\t\t\t\t\t\t\t\t\tscrollHeight=\"100%\"\n\t\t\t\t\t\t\t\t\tscrollWidth=\"100%\"\n\t\t\t\t\t\t\t\t\twidth=\"auto\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</TableStateProvider>\n\t\t\t\t\t\t</ScorecardDataProvider>\n\t\t\t\t\t</ScorecardContext>\n\t\t\t\t</ScorecardStateProvider>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"]}

package/dist/components/ScorecardTable/components/LinkedCell.js

@@ -76,8 +76,8 @@ function LinkedCellComponent({
                 children: topDataSource && /* @__PURE__ */ jsxRuntime.jsx(
                   DataValue.DataValue,
                   {
-                    bold,
                     value: topValue,
+                    bold,
                     dataSource: topDataSource
                   }
                 )
@@ -99,8 +99,8 @@ function LinkedCellComponent({
                 children: bottomDataSource && /* @__PURE__ */ jsxRuntime.jsx(
                   DataValue.DataValue,
                   {
-                    bold,
                     value: bottomValue,
+                    bold,
                     dataSource: bottomDataSource
                   }
                 )

package/dist/components/ScorecardTable/components/LinkedCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScorecardTable/components/LinkedCell.tsx"],"names":["useRef","useResizeObserver","useMemo","jsx","DataTableCell","colors","jsxs","getTextColorFromBackgroundColor","DataValue","React"],"mappings":"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","file":"LinkedCell.js","sourcesContent":["import { colors, DataTableCell } from \"@dhis2/ui\";\nimport { getTextColorFromBackgroundColor } from \"../../../utils/legends\";\nimport { DataValue } from \"./DataValue\";\nimport { useResizeObserver } from \"usehooks-ts\";\nimport React, { useMemo, useRef } from \"react\";\nimport type {\n\tLegendDefinition,\n\tScorecardCellData,\n} from \"../../../schemas/config\";\n\nexport interface LinkedCellProps {\n\ttop: {\n\t\tdataSource: ScorecardCellData;\n\t\tlegendDefinition?: LegendDefinition;\n\t\tvalue?: number;\n\t};\n\tbottom: {\n\t\tdataSource: ScorecardCellData;\n\t\tlegendDefinition?: LegendDefinition;\n\t\tvalue?: number;\n\t};\n\tsize: number;\n\tbold?: boolean;\n\n\t[key: string]: unknown;\n}\n\nfunction LinkedCellComponent({\n\ttop,\n\tbottom,\n\tsize,\n\tbold,\n\t...props\n}: LinkedCellProps) {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst { height, width } = useResizeObserver<HTMLDivElement>({\n\t\tref: ref,\n\t});\n\n\tconst {\n\t\tlegendDefinition: topLegendDefinition,\n\t\tdataSource: topDataSource,\n\t\tvalue: topValue,\n\t} = top;\n\tconst {\n\t\tlegendDefinition: bottomLegendDefinition,\n\t\tdataSource: bottomDataSource,\n\t\tvalue: bottomValue,\n\t} = bottom;\n\n\tconst angle = useMemo(() => {\n\t\tif (!height || !width) {\n\t\t\treturn Math.tan(Math.PI / 2);\n\t\t}\n\t\treturn Math.tan(height / width);\n\t}, [height, width]);\n\n\treturn (\n\t\t<DataTableCell\n\t\t\t{...props}\n\t\t\t/*\n      // @ts-ignore */\n\t\t\tref={ref}\n\t\t\tstyle={{\n\t\t\t\tpadding: 8,\n\t\t\t\twidth: size,\n\t\t\t\tminWidth: 120,\n\t\t\t\tbackground: `linear-gradient(-${angle}rad, ${\n\t\t\t\t\tbottomLegendDefinition?.color ?? colors.white\n\t\t\t\t} 0%, ${bottomLegendDefinition?.color ?? colors.white} 49%, ${\n\t\t\t\t\tcolors.white\n\t\t\t\t} 49%, ${colors.white} 50%, ${\n\t\t\t\t\ttopLegendDefinition?.color ?? colors.white\n\t\t\t\t} 50%, ${topLegendDefinition?.color ?? colors.white} 100%)`,\n\t\t\t}}\n\t\t\tbordered\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\twidth: \"100%\",\n\t\t\t\t\theight: \"100%\",\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\tstyle={{\n\t\t\t\t\t\tbackground: \"inherit\",\n\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\t\talignItems: \"flex-start\",\n\t\t\t\t\t\tjustifyContent: \"flex-start\",\n\t\t\t\t\t\tcolor: topLegendDefinition\n\t\t\t\t\t\t\t? getTextColorFromBackgroundColor(\n\t\t\t\t\t\t\t\t\ttopLegendDefinition?.color ?? \"#FFFFFF\",\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{topDataSource && (\n\t\t\t\t\t\t<DataValue\n\t\t\t\t\t\t\tbold={bold}\n\t\t\t\t\t\t\tvalue={topValue}\n\t\t\t\t\t\t\tdataSource={topDataSource}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: \"inherit\",\n\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\t\talignItems: \"flex-end\",\n\t\t\t\t\t\tjustifyContent: \"flex-end\",\n\t\t\t\t\t\tcolor: bottomLegendDefinition\n\t\t\t\t\t\t\t? getTextColorFromBackgroundColor(\n\t\t\t\t\t\t\t\t\tbottomLegendDefinition?.color ?? \"#FFFFFF\",\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{bottomDataSource && (\n\t\t\t\t\t\t<DataValue\n\t\t\t\t\t\t\tbold={bold}\n\t\t\t\t\t\t\tvalue={bottomValue}\n\t\t\t\t\t\t\tdataSource={bottomDataSource}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</DataTableCell>\n\t);\n}\n\nexport const LinkedCell = React.memo(LinkedCellComponent, (prev, next) => {\n\treturn (\n\t\tprev.top.value === next.top.value &&\n\t\tprev.bottom.value === next.bottom.value\n\t);\n});\n"]}
+{"version":3,"sources":["../../../../src/components/ScorecardTable/components/LinkedCell.tsx"],"names":["useRef","useResizeObserver","useMemo","jsx","DataTableCell","colors","jsxs","getTextColorFromBackgroundColor","DataValue","React"],"mappings":"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","file":"LinkedCell.js","sourcesContent":["import { colors, DataTableCell } from \"@dhis2/ui\";\nimport { getTextColorFromBackgroundColor } from \"../../../utils/legends\";\nimport { DataValue } from \"./DataValue\";\nimport { useResizeObserver } from \"usehooks-ts\";\nimport React, { useMemo, useRef } from \"react\";\nimport type {\n\tLegendDefinition,\n\tScorecardCellData,\n} from \"../../../schemas/config\";\n\nexport interface LinkedCellProps {\n\ttop: {\n\t\tdataSource: ScorecardCellData;\n\t\tlegendDefinition?: LegendDefinition;\n\t\tvalue?: number;\n\t};\n\tbottom: {\n\t\tdataSource: ScorecardCellData;\n\t\tlegendDefinition?: LegendDefinition;\n\t\tvalue?: number;\n\t};\n\tsize: number;\n\tbold?: boolean;\n\n\t[key: string]: unknown;\n}\n\nfunction LinkedCellComponent({\n\ttop,\n\tbottom,\n\tsize,\n\tbold,\n\t...props\n}: LinkedCellProps) {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst { height, width } = useResizeObserver<HTMLDivElement>({\n\t\tref: ref,\n\t});\n\n\tconst {\n\t\tlegendDefinition: topLegendDefinition,\n\t\tdataSource: topDataSource,\n\t\tvalue: topValue,\n\t} = top;\n\tconst {\n\t\tlegendDefinition: bottomLegendDefinition,\n\t\tdataSource: bottomDataSource,\n\t\tvalue: bottomValue,\n\t} = bottom;\n\n\tconst angle = useMemo(() => {\n\t\tif (!height || !width) {\n\t\t\treturn Math.tan(Math.PI / 2);\n\t\t}\n\t\treturn Math.tan(height / width);\n\t}, [height, width]);\n\n\treturn (\n\t\t<DataTableCell\n\t\t\t{...props}\n\t\t\t/*\n      // @ts-ignore */\n\t\t\tref={ref}\n\t\t\tstyle={{\n\t\t\t\tpadding: 8,\n\t\t\t\twidth: size,\n\t\t\t\tminWidth: 120,\n\t\t\t\tbackground: `linear-gradient(-${angle}rad, ${\n\t\t\t\t\tbottomLegendDefinition?.color ?? colors.white\n\t\t\t\t} 0%, ${bottomLegendDefinition?.color ?? colors.white} 49%, ${\n\t\t\t\t\tcolors.white\n\t\t\t\t} 49%, ${colors.white} 50%, ${\n\t\t\t\t\ttopLegendDefinition?.color ?? colors.white\n\t\t\t\t} 50%, ${topLegendDefinition?.color ?? colors.white} 100%)`,\n\t\t\t}}\n\t\t\tbordered\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\twidth: \"100%\",\n\t\t\t\t\theight: \"100%\",\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\tstyle={{\n\t\t\t\t\t\tbackground: \"inherit\",\n\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\t\talignItems: \"flex-start\",\n\t\t\t\t\t\tjustifyContent: \"flex-start\",\n\t\t\t\t\t\tcolor: topLegendDefinition\n\t\t\t\t\t\t\t? getTextColorFromBackgroundColor(\n\t\t\t\t\t\t\t\t\ttopLegendDefinition?.color ?? \"#FFFFFF\",\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{topDataSource && (\n\t\t\t\t\t\t<DataValue\n\t\t\t\t\t\t\tvalue={topValue}\n\t\t\t\t\t\t\tbold={bold}\n\t\t\t\t\t\t\tdataSource={topDataSource}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: \"inherit\",\n\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\t\talignItems: \"flex-end\",\n\t\t\t\t\t\tjustifyContent: \"flex-end\",\n\t\t\t\t\t\tcolor: bottomLegendDefinition\n\t\t\t\t\t\t\t? getTextColorFromBackgroundColor(\n\t\t\t\t\t\t\t\t\tbottomLegendDefinition?.color ?? \"#FFFFFF\",\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{bottomDataSource && (\n\t\t\t\t\t\t<DataValue\n\t\t\t\t\t\t\tvalue={bottomValue}\n\t\t\t\t\t\t\tbold={bold}\n\t\t\t\t\t\t\tdataSource={bottomDataSource}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</DataTableCell>\n\t);\n}\n\nexport const LinkedCell = React.memo(LinkedCellComponent, (prev, next) => {\n\treturn (\n\t\tprev.top.value === next.top.value &&\n\t\tprev.bottom.value === next.bottom.value\n\t);\n});\n"]}

package/dist/components/ScorecardTable/components/TableFoot.js

@@ -5,14 +5,11 @@ var ui = require('@dhis2/ui');
 var TableStateProvider = require('../../TableStateProvider');
 var reactTable = require('@tanstack/react-table');
 var react = require('react');
-var state = require('../../../state');
+var viewState = require('../../../utils/viewState');
 
 function TableFoot() {
   const table = TableStateProvider.useTableState();
-  const showAverageRow = state.useScorecardStateSelectorValue([
-    "options",
-    "averageRow"
-  ]);
+  const showAverageRow = viewState.useScorecardViewStateValue("averageRow");
   if (!showAverageRow) {
     return null;
   }

package/dist/components/ScorecardTable/components/TableFoot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScorecardTable/components/TableFoot.tsx"],"names":["useTableState","useScorecardStateSelectorValue","DataTableFoot","DataTableRow","jsx","Fragment","flexRender"],"mappings":";;;;;;;;;AAMO,SAAS,SAAY,GAAA;AAC3B,EAAA,MAAM,QAAQA,gCAAc,EAAA;AAC5B,EAAA,MAAM,iBAAiBC,oCAAwC,CAAA;AAAA,IAC9D,SAAA;AAAA,IACA;AAAA,GACA,CAAA;AAED,EAAA,IAAI,CAAC,cAAgB,EAAA;AACpB,IAAO,OAAA,IAAA;AAAA;AAGR,EAAA,sCACEC,gBACC,EAAA,EAAA,QAAA,EAAA,KAAA,CAAM,iBAAkB,CAAA,GAAA,CAAI,CAAC,WAAgB,KAAA;AAC7C,IAAA,sCACEC,eACC,EAAA,EAAA,QAAA,EAAA,WAAA,CAAY,OAAQ,CAAA,GAAA,CAAI,CAAC,MAAW,KAAA;AACpC,MAAA,OAAO,MAAO,CAAA,aAAA,GAAgB,IAC7B,mBAAAC,cAAA,CAACC,cACC,EAAA,EAAA,QAAA,EAAAC,qBAAA;AAAA,QACA,MAAA,CAAO,OAAO,SAAU,CAAA,MAAA;AAAA,QACxB,OAAO,UAAW;AAAA,OACnB,EAAA,EAJc,OAAO,EAKtB,CAAA;AAAA,KAED,CAViB,EAAA,EAAA,WAAA,CAAY,EAW/B,CAAA;AAAA,GAED,CACF,EAAA,CAAA;AAEF","file":"TableFoot.js","sourcesContent":["import { DataTableFoot, DataTableRow } from \"@dhis2/ui\";\nimport { useTableState } from \"../../TableStateProvider\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport { Fragment } from \"react\";\nimport { useScorecardStateSelectorValue } from \"../../../state\";\n\nexport function TableFoot() {\n\tconst table = useTableState();\n\tconst showAverageRow = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"averageRow\",\n\t]);\n\n\tif (!showAverageRow) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DataTableFoot>\n\t\t\t{table.getFooterGroups().map((footerGroup) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DataTableRow key={footerGroup.id}>\n\t\t\t\t\t\t{footerGroup.headers.map((footer) => {\n\t\t\t\t\t\t\treturn footer.isPlaceholder ? null : (\n\t\t\t\t\t\t\t\t<Fragment key={footer.id}>\n\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\tfooter.column.columnDef.footer,\n\t\t\t\t\t\t\t\t\t\tfooter.getContext(),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</DataTableRow>\n\t\t\t\t);\n\t\t\t})}\n\t\t</DataTableFoot>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../src/components/ScorecardTable/components/TableFoot.tsx"],"names":["useTableState","useScorecardViewStateValue","DataTableFoot","DataTableRow","jsx","Fragment","flexRender"],"mappings":";;;;;;;;;AAMO,SAAS,SAAY,GAAA;AAC3B,EAAA,MAAM,QAAQA,gCAAc,EAAA;AAC5B,EAAM,MAAA,cAAA,GAAiBC,qCAAoC,YAAY,CAAA;AAEvE,EAAA,IAAI,CAAC,cAAgB,EAAA;AACpB,IAAO,OAAA,IAAA;AAAA;AAGR,EAAA,sCACEC,gBACC,EAAA,EAAA,QAAA,EAAA,KAAA,CAAM,iBAAkB,CAAA,GAAA,CAAI,CAAC,WAAgB,KAAA;AAC7C,IAAA,sCACEC,eACC,EAAA,EAAA,QAAA,EAAA,WAAA,CAAY,OAAQ,CAAA,GAAA,CAAI,CAAC,MAAW,KAAA;AACpC,MAAA,OAAO,MAAO,CAAA,aAAA,GAAgB,IAC7B,mBAAAC,cAAA,CAACC,cACC,EAAA,EAAA,QAAA,EAAAC,qBAAA;AAAA,QACA,MAAA,CAAO,OAAO,SAAU,CAAA,MAAA;AAAA,QACxB,OAAO,UAAW;AAAA,OACnB,EAAA,EAJc,OAAO,EAKtB,CAAA;AAAA,KAED,CAViB,EAAA,EAAA,WAAA,CAAY,EAW/B,CAAA;AAAA,GAED,CACF,EAAA,CAAA;AAEF","file":"TableFoot.js","sourcesContent":["import { DataTableFoot, DataTableRow } from \"@dhis2/ui\";\nimport { useTableState } from \"../../TableStateProvider\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport { Fragment } from \"react\";\nimport { useScorecardViewStateValue } from \"../../../utils/viewState\";\n\nexport function TableFoot() {\n\tconst table = useTableState();\n\tconst showAverageRow = useScorecardViewStateValue<boolean>(\"averageRow\");\n\n\tif (!showAverageRow) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DataTableFoot>\n\t\t\t{table.getFooterGroups().map((footerGroup) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DataTableRow key={footerGroup.id}>\n\t\t\t\t\t\t{footerGroup.headers.map((footer) => {\n\t\t\t\t\t\t\treturn footer.isPlaceholder ? null : (\n\t\t\t\t\t\t\t\t<Fragment key={footer.id}>\n\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\tfooter.column.columnDef.footer,\n\t\t\t\t\t\t\t\t\t\tfooter.getContext(),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</DataTableRow>\n\t\t\t\t);\n\t\t\t})}\n\t\t</DataTableFoot>\n\t);\n}\n"]}

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

@@ -4,7 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@dhis2/ui');
 var i18n = require('@dhis2/d2-i18n');
 var styles = require('../TableHeader.module.css');
-var state = require('../../../../../state');
+var viewState = require('../../../../../utils/viewState');
+var dimensionState = require('../../../../../utils/dimensionState');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -14,13 +15,8 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function AverageHeaderCell({
   header
 }) {
-  const dataInRows = state.useScorecardStateSelectorValue([
-    "options",
-    "showDataInRows"
-  ]);
-  const hasOnePeriod = state.useScorecardStateSelectorValue([
-    "hasOnePeriod"
-  ]);
+  const dataInRows = viewState.useScorecardViewStateValue("showDataInRows");
+  const hasOnePeriod = dimensionState.useHasOnePeriod();
   const rowSpan = dataInRows ? hasOnePeriod ? "2" : "2" : hasOnePeriod ? "2" : "3";
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.DataTableColumnHeader,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/ScorecardTable/components/TableHeader/components/AverageHeaderCell.tsx"],"names":["useScorecardStateSelectorValue","jsx","DataTableColumnHeader","styles","i18n"],"mappings":";;;;;;;;;;;;;AAOO,SAAS,iBAAkB,CAAA;AAAA,EACjC;AACD,CAA2C,EAAA;AAC1C,EAAA,MAAM,aAAaA,oCAAwC,CAAA;AAAA,IAC1D,SAAA;AAAA,IACA;AAAA,GACA,CAAA;AACD,EAAA,MAAM,eAAeA,oCAAwC,CAAA;AAAA,IAC5D;AAAA,GACA,CAAA;AACD,EAAA,MAAM,UAAU,UACb,GAAA,YAAA,GACC,GACA,GAAA,GAAA,GACD,eACC,GACA,GAAA,GAAA;AAEJ,EACC,uBAAAC,cAAA;AAAA,IAACC,wBAAA;AAAA,IAAA;AAAA,MAEA,KAAM,EAAA,OAAA;AAAA,MACN,OAAA,EAAS,MAAO,CAAA,OAAA,CAAQ,QAAS,EAAA;AAAA,MACjC,OAAA;AAAA,MACA,WAAWC,uBAAO,CAAA,UAAA;AAAA,MAElB,QAAC,kBAAAF,cAAA,CAAA,GAAA,EAAA,EAAG,QAAK,EAAAG,qBAAA,CAAA,CAAA,CAAE,SAAS,CAAE,EAAA;AAAA,KAAA;AAAA,IANjB,MAAO,CAAA;AAAA,GAOb;AAEF","file":"AverageHeaderCell.js","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport type { ScorecardTableData } from \"../../../../../schemas/config\";\nimport { DataTableColumnHeader } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport styles from \"../TableHeader.module.css\";\nimport { useScorecardStateSelectorValue } from \"../../../../../state\";\n\nexport function AverageHeaderCell({\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst dataInRows = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\tconst hasOnePeriod = useScorecardStateSelectorValue<boolean>([\n\t\t\"hasOnePeriod\",\n\t]);\n\tconst rowSpan = dataInRows\n\t\t? hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"2\"\n\t\t: hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"3\";\n\n\treturn (\n\t\t<DataTableColumnHeader\n\t\t\tkey={header.id}\n\t\t\talign=\"right\"\n\t\t\tcolSpan={header.colSpan.toString()}\n\t\t\trowSpan={rowSpan}\n\t\t\tclassName={styles.metaHeader}\n\t\t>\n\t\t\t<b>{i18n.t(\"Average\")}</b>\n\t\t</DataTableColumnHeader>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../src/components/ScorecardTable/components/TableHeader/components/AverageHeaderCell.tsx"],"names":["useScorecardViewStateValue","useHasOnePeriod","jsx","DataTableColumnHeader","styles","i18n"],"mappings":";;;;;;;;;;;;;;AAQO,SAAS,iBAAkB,CAAA;AAAA,EACjC;AACD,CAA2C,EAAA;AAC1C,EAAM,MAAA,UAAA,GAAaA,qCAAoC,gBAAgB,CAAA;AACvE,EAAA,MAAM,eAAeC,8BAAgB,EAAA;AACrC,EAAA,MAAM,UAAU,UACb,GAAA,YAAA,GACC,GACA,GAAA,GAAA,GACD,eACC,GACA,GAAA,GAAA;AAEJ,EACC,uBAAAC,cAAA;AAAA,IAACC,wBAAA;AAAA,IAAA;AAAA,MAEA,KAAM,EAAA,OAAA;AAAA,MACN,OAAA,EAAS,MAAO,CAAA,OAAA,CAAQ,QAAS,EAAA;AAAA,MACjC,OAAA;AAAA,MACA,WAAWC,uBAAO,CAAA,UAAA;AAAA,MAElB,QAAC,kBAAAF,cAAA,CAAA,GAAA,EAAA,EAAG,QAAK,EAAAG,qBAAA,CAAA,CAAA,CAAE,SAAS,CAAE,EAAA;AAAA,KAAA;AAAA,IANjB,MAAO,CAAA;AAAA,GAOb;AAEF","file":"AverageHeaderCell.js","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport type { ScorecardTableData } from \"../../../../../schemas/config\";\nimport { DataTableColumnHeader } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport styles from \"../TableHeader.module.css\";\nimport { useScorecardViewStateValue } from \"../../../../../utils/viewState\";\nimport { useHasOnePeriod } from \"../../../../../utils/dimensionState\";\n\nexport function AverageHeaderCell({\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst dataInRows = useScorecardViewStateValue<boolean>(\"showDataInRows\");\n\tconst hasOnePeriod = useHasOnePeriod();\n\tconst rowSpan = dataInRows\n\t\t? hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"2\"\n\t\t: hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"3\";\n\n\treturn (\n\t\t<DataTableColumnHeader\n\t\t\tkey={header.id}\n\t\t\talign=\"right\"\n\t\t\tcolSpan={header.colSpan.toString()}\n\t\t\trowSpan={rowSpan}\n\t\t\tclassName={styles.metaHeader}\n\t\t>\n\t\t\t<b>{i18n.t(\"Average\")}</b>\n\t\t</DataTableColumnHeader>\n\t);\n}\n"]}

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

@@ -6,7 +6,7 @@ var ui = require('@dhis2/ui');
 var i18n = require('@dhis2/d2-i18n');
 var DraggableCell = require('../../DraggableCell');
 var DroppableCell = require('../../DroppableCell');
-var state = require('../../../../../state');
+var viewState = require('../../../../../utils/viewState');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -23,10 +23,7 @@ function DataHeaderCellComponent({
   column,
   header
 }) {
-  const dataInRows = state.useScorecardStateSelectorValue([
-    "options",
-    "showDataInRows"
-  ]);
+  const dataInRows = viewState.useScorecardViewStateValue("showDataInRows");
   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();

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","useScorecardStateSelectorValue","i18n","DroppableCell","ScorecardDraggableItems","DraggableCell"],"mappings":";;;;;;;;;;;;;;;AAWO,SAAS,mBAAoB,CAAA;AAAA,EACnC;AACD,CAA2C,EAAA;AAC1C,EAAM,MAAA,OAAA,GAAU,MAAO,CAAA,OAAA,CAAQ,QAAS,EAAA;AACxC,EAAO,uBAAAA,cAAA,CAACC,4BAAsB,OAAkB,EAAA,CAAA;AACjD;AAEO,SAAS,uBAAwB,CAAA;AAAA,EACvC,MAAA;AAAA,EACA;AACD,CAA2C,EAAA;AAC1C,EAAA,MAAM,aAAaC,oCAAwC,CAAA;AAAA,IAC1D,SAAA;AAAA,IACA;AAAA,GACA,CAAA;AACD,EAAM,MAAA,KAAA,GACJ,OAAO,MAAO,CAAA,SAAA,CAAU,KAA2B,KACnD,IAAA,MAAA,CAAO,UAAU,IAA2B,CAAA,KAAA;AAE9C,EAAM,MAAA,IAAA,GACJ,OAAO,MAAO,CAAA,SAAA,CAAU,KAA4B,IACpD,IAAA,MAAA,CAAO,UAAU,IAA4B,CAAA,IAAA;AAE/C,EAAM,MAAA,OAAA,GAAU,MAAO,CAAA,OAAA,CAAQ,QAAS,EAAA;AAExC,EAAA,MAAM,gBAAgB,CAAC,MAAA,EAAQ,aAC5B,GAAA,SAAA,GACC,OAAQ,WAAY,EAAA;AACxB,EAAA,MAAM,eACL,MAAQ,EAAA,mBAAA,OAA0B,KAC/B,GAAAC,qBAAA,CAAK,EAAE,oBAAoB,CAAA,GAC3B,QAAQ,mBAAoB,EAAA,KAAM,SACjCA,qBAAK,CAAA,CAAA,CAAE,qBAAqB,CAC5B,GAAAA,qBAAA,CAAK,EAAE,SAAS,CAAA;AAErB,EACC,uBAAAH,cAAA;AAAA,IAACC,wBAAA;AAAA,IAAA;AAAA,MAEA,eAAeE,qBAAK,CAAA,CAAA,CAAE,uBAAyB,EAAA,EAAE,cAAc,CAAA;AAAA,MAC/D,eAAA,EACC,MAAO,CAAA,MAAA,EAAQ,UAAW,EAAA,IAAK,OAAO,UAAW,EAAA,GAC9C,CAAC,CAAA,EAAG,CAAM,KAAA;AACV,QAAM,MAAA,IAAA,GAAO,OAAQ,uBAAwB,EAAA;AAC7C,QAAA,IAAI,IAAM,EAAA;AACT,UAAA,IAAA,CAAK,CAAC,CAAA;AAAA;AACP,OAEA,GAAA,MAAA;AAAA,MAEJ,aAAA,EACC,OAAO,MAAQ,EAAA,UAAA,MAAgB,MAAO,CAAA,UAAA,KACnC,aACA,GAAA,MAAA;AAAA,MAEJ,KAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MAEA,QAAA,kBAAAH,cAAA;AAAA,QAACI,8BAAA;AAAA,QAAA;AAAA,UACA,MAAA,EACC,aACG,CAACC,8BAAA,CAAwB,IAAI,CAC7B,GAAA,CAACA,+BAAwB,EAAE,CAAA;AAAA,UAG/B,QAAA,kBAAAL,cAAA;AAAA,YAACM,2BAAA;AAAA,YAAA;AAAA,cACA,EAAI,EAAA,KAAA;AAAA,cACJ,IACC,EAAA,UAAA,GACGD,8BAAwB,CAAA,EAAA,GACxBA,8BAAwB,CAAA,IAAA;AAAA,cAG3B,QAAO,EAAA,IAAA,mBAAAL,cAAA,CAAC,GAAG,EAAA,EAAA,QAAA,EAAA,KAAA,EAAM,CAAO,GAAA;AAAA;AAAA;AAC1B;AAAA;AACD,KAAA;AAAA,IArCK,GAAG,KAAK,CAAA;AAAA,GAsCd;AAEF;AAEO,MAAM,cAAiB,GAAA","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 { useScorecardStateSelectorValue } from \"../../../../../state\";\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 = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\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","i18n","DroppableCell","ScorecardDraggableItems","DraggableCell"],"mappings":";;;;;;;;;;;;;;;AAWO,SAAS,mBAAoB,CAAA;AAAA,EACnC;AACD,CAA2C,EAAA;AAC1C,EAAM,MAAA,OAAA,GAAU,MAAO,CAAA,OAAA,CAAQ,QAAS,EAAA;AACxC,EAAO,uBAAAA,cAAA,CAACC,4BAAsB,OAAkB,EAAA,CAAA;AACjD;AAEO,SAAS,uBAAwB,CAAA;AAAA,EACvC,MAAA;AAAA,EACA;AACD,CAA2C,EAAA;AAC1C,EAAM,MAAA,UAAA,GAAaC,qCAAoC,gBAAgB,CAAA;AACvE,EAAM,MAAA,KAAA,GACJ,OAAO,MAAO,CAAA,SAAA,CAAU,KAA2B,KACnD,IAAA,MAAA,CAAO,UAAU,IAA2B,CAAA,KAAA;AAE9C,EAAM,MAAA,IAAA,GACJ,OAAO,MAAO,CAAA,SAAA,CAAU,KAA4B,IACpD,IAAA,MAAA,CAAO,UAAU,IAA4B,CAAA,IAAA;AAE/C,EAAM,MAAA,OAAA,GAAU,MAAO,CAAA,OAAA,CAAQ,QAAS,EAAA;AAExC,EAAA,MAAM,gBAAgB,CAAC,MAAA,EAAQ,aAC5B,GAAA,SAAA,GACC,OAAQ,WAAY,EAAA;AACxB,EAAA,MAAM,eACL,MAAQ,EAAA,mBAAA,OAA0B,KAC/B,GAAAC,qBAAA,CAAK,EAAE,oBAAoB,CAAA,GAC3B,QAAQ,mBAAoB,EAAA,KAAM,SACjCA,qBAAK,CAAA,CAAA,CAAE,qBAAqB,CAC5B,GAAAA,qBAAA,CAAK,EAAE,SAAS,CAAA;AAErB,EACC,uBAAAH,cAAA;AAAA,IAACC,wBAAA;AAAA,IAAA;AAAA,MAEA,eAAeE,qBAAK,CAAA,CAAA,CAAE,uBAAyB,EAAA,EAAE,cAAc,CAAA;AAAA,MAC/D,eAAA,EACC,MAAO,CAAA,MAAA,EAAQ,UAAW,EAAA,IAAK,OAAO,UAAW,EAAA,GAC9C,CAAC,CAAA,EAAG,CAAM,KAAA;AACV,QAAM,MAAA,IAAA,GAAO,OAAQ,uBAAwB,EAAA;AAC7C,QAAA,IAAI,IAAM,EAAA;AACT,UAAA,IAAA,CAAK,CAAC,CAAA;AAAA;AACP,OAEA,GAAA,MAAA;AAAA,MAEJ,aAAA,EACC,OAAO,MAAQ,EAAA,UAAA,MAAgB,MAAO,CAAA,UAAA,KACnC,aACA,GAAA,MAAA;AAAA,MAEJ,KAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MAEA,QAAA,kBAAAH,cAAA;AAAA,QAACI,8BAAA;AAAA,QAAA;AAAA,UACA,MAAA,EACC,aACG,CAACC,8BAAA,CAAwB,IAAI,CAC7B,GAAA,CAACA,+BAAwB,EAAE,CAAA;AAAA,UAG/B,QAAA,kBAAAL,cAAA;AAAA,YAACM,2BAAA;AAAA,YAAA;AAAA,cACA,EAAI,EAAA,KAAA;AAAA,cACJ,IACC,EAAA,UAAA,GACGD,8BAAwB,CAAA,EAAA,GACxBA,8BAAwB,CAAA,IAAA;AAAA,cAG3B,QAAO,EAAA,IAAA,mBAAAL,cAAA,CAAC,GAAG,EAAA,EAAA,QAAA,EAAA,KAAA,EAAM,CAAO,GAAA;AAAA;AAAA;AAC1B;AAAA;AACD,KAAA;AAAA,IArCK,GAAG,KAAK,CAAA;AAAA,GAsCd;AAEF;AAEO,MAAM,cAAiB,GAAA","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/viewState\";\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"]}

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

@@ -2,10 +2,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var i18n = require('@dhis2/d2-i18n');
-var state = require('../../../../../state');
 var ui = require('@dhis2/ui');
 var styles = require('../TableHeader.module.css');
 var react = require('react');
+var viewState = require('../../../../../utils/viewState');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -15,10 +15,7 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function FilterArea({ column }) {
   const defaultValue = column.getFilterValue();
   const [text, setText] = react.useState(defaultValue);
-  const dataInRows = state.useScorecardStateSelectorValue([
-    "options",
-    "showDataInRows"
-  ]);
+  const dataInRows = viewState.useScorecardViewStateValue("showDataInRows");
   const searchPlaceholder = dataInRows ? i18n__default.default.t("Search data items") : i18n__default.default.t("Search organisation units");
   react.useEffect(() => {
     const timeout = setTimeout(() => {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/ScorecardTable/components/TableHeader/components/FilterArea.tsx"],"names":["useState","useScorecardStateSelectorValue","i18n","useEffect","jsx","InputField","styles"],"mappings":";;;;;;;;;;;;;;AAYO,SAAS,UAAA,CAAW,EAAE,MAAA,EAA2B,EAAA;AACvD,EAAM,MAAA,YAAA,GAAe,OAAO,cAAe,EAAA;AAC3C,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,eAA6B,YAAY,CAAA;AACjE,EAAA,MAAM,aAAaC,oCAAwC,CAAA;AAAA,IAC1D,SAAA;AAAA,IACA;AAAA,GACA,CAAA;AACD,EAAM,MAAA,iBAAA,GAAoB,aACvBC,qBAAK,CAAA,CAAA,CAAE,mBAAmB,CAC1B,GAAAA,qBAAA,CAAK,EAAE,2BAA2B,CAAA;AAErC,EAAAC,eAAA,CAAU,MAAM;AACf,IAAM,MAAA,OAAA,GAAU,WAAW,MAAM;AAChC,MAAA,MAAA,CAAO,eAAe,IAAI,CAAA;AAAA,OACxB,GAAG,CAAA;AAEN,IAAO,OAAA,MAAM,aAAa,OAAO,CAAA;AAAA,GAClC,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EACC,uBAAAC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAWC,wBAAO,cAAc,CAAA;AAAA,MAChC,KAAO,EAAA,IAAA;AAAA,MACP,UAAU,CAAC,EAAE,KAAM,EAAA,KAAM,QAAQ,KAAK,CAAA;AAAA,MACtC,WAAa,EAAA;AAAA;AAAA,GACd;AAEF","file":"FilterArea.js","sourcesContent":["import type { ScorecardTableData } from \"../../../../../schemas/config\";\nimport type { Column } from \"@tanstack/react-table\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useScorecardStateSelectorValue } from \"../../../../../state\";\nimport { InputField } from \"@dhis2/ui\";\nimport styles from \"../TableHeader.module.css\";\nimport { useEffect, useState } from \"react\";\n\nexport interface FilterAreaProps {\n\tcolumn: Column<ScorecardTableData, any>;\n}\n\nexport function FilterArea({ column }: FilterAreaProps) {\n\tconst defaultValue = column.getFilterValue() as string | undefined;\n\tconst [text, setText] = useState<string | undefined>(defaultValue);\n\tconst dataInRows = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\tconst searchPlaceholder = dataInRows\n\t\t? i18n.t(\"Search data items\")\n\t\t: i18n.t(\"Search organisation units\");\n\n\tuseEffect(() => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tcolumn.setFilterValue(text);\n\t\t}, 700);\n\n\t\treturn () => clearTimeout(timeout);\n\t}, [text]);\n\n\treturn (\n\t\t<InputField\n\t\t\tclassName={styles[\"filter-input\"]}\n\t\t\tvalue={text}\n\t\t\tonChange={({ value }) => setText(value)}\n\t\t\tplaceholder={searchPlaceholder}\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../src/components/ScorecardTable/components/TableHeader/components/FilterArea.tsx"],"names":["useState","useScorecardViewStateValue","i18n","useEffect","jsx","InputField","styles"],"mappings":";;;;;;;;;;;;;;AAYO,SAAS,UAAA,CAAW,EAAE,MAAA,EAA2B,EAAA;AACvD,EAAM,MAAA,YAAA,GAAe,OAAO,cAAe,EAAA;AAC3C,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,eAA6B,YAAY,CAAA;AACjE,EAAM,MAAA,UAAA,GAAaC,qCAAoC,gBAAgB,CAAA;AACvE,EAAM,MAAA,iBAAA,GAAoB,aACvBC,qBAAK,CAAA,CAAA,CAAE,mBAAmB,CAC1B,GAAAA,qBAAA,CAAK,EAAE,2BAA2B,CAAA;AAErC,EAAAC,eAAA,CAAU,MAAM;AACf,IAAM,MAAA,OAAA,GAAU,WAAW,MAAM;AAChC,MAAA,MAAA,CAAO,eAAe,IAAI,CAAA;AAAA,OACxB,GAAG,CAAA;AAEN,IAAO,OAAA,MAAM,aAAa,OAAO,CAAA;AAAA,GAClC,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EACC,uBAAAC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAWC,wBAAO,cAAc,CAAA;AAAA,MAChC,KAAO,EAAA,IAAA;AAAA,MACP,UAAU,CAAC,EAAE,KAAM,EAAA,KAAM,QAAQ,KAAK,CAAA;AAAA,MACtC,WAAa,EAAA;AAAA;AAAA,GACd;AAEF","file":"FilterArea.js","sourcesContent":["import type { ScorecardTableData } from \"../../../../../schemas/config\";\nimport type { Column } from \"@tanstack/react-table\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { InputField } from \"@dhis2/ui\";\nimport styles from \"../TableHeader.module.css\";\nimport { useEffect, useState } from \"react\";\nimport { useScorecardViewStateValue } from \"../../../../../utils/viewState\";\n\nexport interface FilterAreaProps {\n\tcolumn: Column<ScorecardTableData, any>;\n}\n\nexport function FilterArea({ column }: FilterAreaProps) {\n\tconst defaultValue = column.getFilterValue() as string | undefined;\n\tconst [text, setText] = useState<string | undefined>(defaultValue);\n\tconst dataInRows = useScorecardViewStateValue<boolean>(\"showDataInRows\");\n\tconst searchPlaceholder = dataInRows\n\t\t? i18n.t(\"Search data items\")\n\t\t: i18n.t(\"Search organisation units\");\n\n\tuseEffect(() => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tcolumn.setFilterValue(text);\n\t\t}, 700);\n\n\t\treturn () => clearTimeout(timeout);\n\t}, [text]);\n\n\treturn (\n\t\t<InputField\n\t\t\tclassName={styles[\"filter-input\"]}\n\t\t\tvalue={text}\n\t\t\tonChange={({ value }) => setText(value)}\n\t\t\tplaceholder={searchPlaceholder}\n\t\t/>\n\t);\n}\n"]}

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

@@ -5,9 +5,9 @@ var config = require('../../../../../schemas/config');
 var ui = require('@dhis2/ui');
 var DroppableCell = require('../../DroppableCell');
 var DraggableCell = require('../../DraggableCell');
-var state = require('../../../../../state');
 var react = require('react');
 var lodash = require('lodash');
+var viewState = require('../../../../../utils/viewState');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -16,18 +16,9 @@ var DroppableCell__default = /*#__PURE__*/_interopDefault(DroppableCell);
 function LabelCellComponent(props) {
   const data = props.getValue();
   const size = props.cell.column.getSize();
-  const dataInRows = state.useScorecardStateSelectorValue([
-    "options",
-    "showDataInRows"
-  ]);
-  const showHierarchy = state.useScorecardStateSelectorValue([
-    "options",
-    "showHierarchy"
-  ]);
-  const inPrintMode = state.useScorecardStateSelectorValue([
-    "options",
-    "printMode"
-  ]);
+  const dataInRows = viewState.useScorecardViewStateValue("showDataInRows");
+  const showHierarchy = viewState.useScorecardViewStateValue("showHierarchy");
+  const inPrintMode = viewState.useScorecardViewStateValue("printMode");
   const left = react.useMemo(() => {
     const index = props.row.getVisibleCells().findIndex(({ id }) => props.cell.id === id);
     return index * 48;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/ScorecardTable/components/TableHeader/components/LabelCell.tsx"],"names":["useScorecardStateSelectorValue","useMemo","isEmpty","jsx","DataTableCell","DroppableCell","ScorecardDraggableItems","DraggableCell"],"mappings":";;;;;;;;;;;;;;;AAYO,SAAS,mBACf,KAOC,EAAA;AACD,EAAM,MAAA,IAAA,GAAO,MAAM,QAAS,EAAA;AAC5B,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,OAAQ,EAAA;AACvC,EAAA,MAAM,aAAaA,oCAAwC,CAAA;AAAA,IAC1D,SAAA;AAAA,IACA;AAAA,GACA,CAAA;AACD,EAAA,MAAM,gBAAgBA,oCAAwC,CAAA;AAAA,IAC7D,SAAA;AAAA,IACA;AAAA,GACA,CAAA;AAED,EAAA,MAAM,cAAcA,oCAAwC,CAAA;AAAA,IAC3D,SAAA;AAAA,IACA;AAAA,GACA,CAAA;AAED,EAAM,MAAA,IAAA,GAAOC,cAAQ,MAAM;AAC1B,IAAA,MAAM,KAAQ,GAAA,KAAA,CAAM,GAClB,CAAA,eAAA,EACA,CAAA,SAAA,CAAU,CAAC,EAAE,EAAG,EAAA,KAAM,KAAM,CAAA,IAAA,CAAK,OAAO,EAAE,CAAA;AAC5C,IAAA,OAAO,KAAQ,GAAA,EAAA;AAAA,GAChB,EAAG,CAAC,KAAM,CAAA,GAAA,CAAI,iBAAmB,EAAA,KAAA,CAAM,IAAK,CAAA,EAAE,CAAC,CAAA;AAE/C,EAAM,MAAA,KAAA,GAAQA,cAAQ,MAAM;AAC3B,IAAA,IAAI,UAAY,EAAA;AACf,MAAA,OAAO,KAAK,KAAS,IAAA,EAAA;AAAA;AAEtB,IAAA,IAAI,aAAe,EAAA;AAClB,MAAA,OACC,KAAK,OAAS,EAAA,SAAA,CACZ,KAAM,CAAA,GAAG,EACT,MAAO,CAAA,CAAC,GAAQ,KAAA,CAACC,eAAQ,GAAG,CAAC,CAC7B,CAAA,IAAA,CAAK,KAAK,CAAK,IAAA,EAAA;AAAA;AAGnB,IAAA,OAAO,KAAK,KAAS,IAAA,EAAA;AAAA,GACnB,EAAA,CAAC,IAAM,EAAA,aAAA,EAAe,UAAU,CAAC,CAAA;AAEpC,EACC,uBAAAC,cAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MACA,SAAU,EAAA,YAAA;AAAA,MACV,KAAK,EAAA,IAAA;AAAA,MACL,KAAA,EAAO,GAAG,IAAI,CAAA,EAAA,CAAA;AAAA,MACd,KAAO,EAAA;AAAA,QACN,KAAA,EAAO,cAAc,MAAS,GAAA,IAAA;AAAA,QAC9B,QAAA,EAAU,cAAc,MAAY,GAAA;AAAA,OACrC;AAAA,MAGA,IAAA,EAAM,GAAG,IAAI,CAAA,EAAA,CAAA;AAAA,MACb,QAAQ,EAAA,IAAA;AAAA,MACR,KAAM,EAAA,MAAA;AAAA,MAEN,QAAA,kBAAAD,cAAA;AAAA,QAACE,8BAAA;AAAA,QAAA;AAAA,UACA,MAAA,EACC,aACG,CAACC,8BAAA,CAAwB,EAAE,CAC3B,GAAA,CAACA,+BAAwB,IAAI,CAAA;AAAA,UAGjC,QAAA,kBAAAH,cAAA;AAAA,YAACI,2BAAA;AAAA,YAAA;AAAA,cACA,EAAI,EAAA,KAAA;AAAA,cACJ,IACC,EAAA,UAAA,GACGD,8BAAwB,CAAA,IAAA,GACxBA,8BAAwB,CAAA,EAAA;AAAA,cAG3B,QAAA,EAAA;AAAA;AAAA;AACF;AAAA;AACD;AAAA,GACD;AAEF;AAEO,MAAM,SAAY,GAAA","file":"LabelCell.js","sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\nimport {\n\tScorecardDraggableItems,\n\ttype ScorecardTableData,\n} from \"../../../../../schemas/config\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport DroppableCell from \"../../DroppableCell\";\nimport { DraggableCell } from \"../../DraggableCell\";\nimport { useScorecardStateSelectorValue } from \"../../../../../state\";\nimport { useMemo } from \"react\";\nimport { isEmpty } from \"lodash\";\n\nexport function LabelCellComponent(\n\tprops: CellContext<\n\t\tScorecardTableData,\n\t\t{\n\t\t\tlabel: string;\n\t\t\torgUnit?: { uid: string; hierarchy: string; name: string };\n\t\t}\n\t>,\n) {\n\tconst data = props.getValue();\n\tconst size = props.cell.column.getSize();\n\tconst dataInRows = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\tconst showHierarchy = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"showHierarchy\",\n\t]);\n\n\tconst inPrintMode = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"printMode\",\n\t]);\n\n\tconst left = useMemo(() => {\n\t\tconst index = props.row\n\t\t\t.getVisibleCells()\n\t\t\t.findIndex(({ id }) => props.cell.id === id);\n\t\treturn index * 48;\n\t}, [props.row.getVisibleCells(), props.cell.id]);\n\n\tconst label = useMemo(() => {\n\t\tif (dataInRows) {\n\t\t\treturn data.label ?? \"\";\n\t\t}\n\t\tif (showHierarchy) {\n\t\t\treturn (\n\t\t\t\tdata.orgUnit?.hierarchy\n\t\t\t\t\t.split(\"/\")\n\t\t\t\t\t.filter((val) => !isEmpty(val))\n\t\t\t\t\t.join(\" / \") ?? \"\"\n\t\t\t);\n\t\t}\n\t\treturn data.label ?? \"\";\n\t}, [data, showHierarchy, dataInRows]);\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tclassName=\"label-cell\"\n\t\t\tfixed\n\t\t\twidth={`${size}px`}\n\t\t\tstyle={{\n\t\t\t\twidth: inPrintMode ? \"auto\" : size,\n\t\t\t\tminWidth: inPrintMode ? undefined : size,\n\t\t\t}}\n\t\t\t/*\n      // @ts-ignore */\n\t\t\tleft={`${left}px`}\n\t\t\tbordered\n\t\t\talign=\"left\"\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.ou]\n\t\t\t\t\t\t: [ScorecardDraggableItems.data]\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.data\n\t\t\t\t\t\t\t: ScorecardDraggableItems.ou\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</DraggableCell>\n\t\t\t</DroppableCell>\n\t\t</DataTableCell>\n\t);\n}\n\nexport const LabelCell = LabelCellComponent;\n"]}
+{"version":3,"sources":["../../../../../../src/components/ScorecardTable/components/TableHeader/components/LabelCell.tsx"],"names":["useScorecardViewStateValue","useMemo","isEmpty","jsx","DataTableCell","DroppableCell","ScorecardDraggableItems","DraggableCell"],"mappings":";;;;;;;;;;;;;;;AAYO,SAAS,mBACf,KAOC,EAAA;AACD,EAAM,MAAA,IAAA,GAAO,MAAM,QAAS,EAAA;AAC5B,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,OAAQ,EAAA;AACvC,EAAM,MAAA,UAAA,GAAaA,qCAAoC,gBAAgB,CAAA;AACvE,EAAM,MAAA,aAAA,GAAgBA,qCAAoC,eAAe,CAAA;AAEzE,EAAM,MAAA,WAAA,GAAcA,qCAAoC,WAAW,CAAA;AAEnE,EAAM,MAAA,IAAA,GAAOC,cAAQ,MAAM;AAC1B,IAAA,MAAM,KAAQ,GAAA,KAAA,CAAM,GAClB,CAAA,eAAA,EACA,CAAA,SAAA,CAAU,CAAC,EAAE,EAAG,EAAA,KAAM,KAAM,CAAA,IAAA,CAAK,OAAO,EAAE,CAAA;AAC5C,IAAA,OAAO,KAAQ,GAAA,EAAA;AAAA,GAChB,EAAG,CAAC,KAAM,CAAA,GAAA,CAAI,iBAAmB,EAAA,KAAA,CAAM,IAAK,CAAA,EAAE,CAAC,CAAA;AAE/C,EAAM,MAAA,KAAA,GAAQA,cAAQ,MAAM;AAC3B,IAAA,IAAI,UAAY,EAAA;AACf,MAAA,OAAO,KAAK,KAAS,IAAA,EAAA;AAAA;AAEtB,IAAA,IAAI,aAAe,EAAA;AAClB,MAAA,OACC,KAAK,OAAS,EAAA,SAAA,CACZ,KAAM,CAAA,GAAG,EACT,MAAO,CAAA,CAAC,GAAQ,KAAA,CAACC,eAAQ,GAAG,CAAC,CAC7B,CAAA,IAAA,CAAK,KAAK,CAAK,IAAA,EAAA;AAAA;AAGnB,IAAA,OAAO,KAAK,KAAS,IAAA,EAAA;AAAA,GACnB,EAAA,CAAC,IAAM,EAAA,aAAA,EAAe,UAAU,CAAC,CAAA;AAEpC,EACC,uBAAAC,cAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MACA,SAAU,EAAA,YAAA;AAAA,MACV,KAAK,EAAA,IAAA;AAAA,MACL,KAAA,EAAO,GAAG,IAAI,CAAA,EAAA,CAAA;AAAA,MACd,KAAO,EAAA;AAAA,QACN,KAAA,EAAO,cAAc,MAAS,GAAA,IAAA;AAAA,QAC9B,QAAA,EAAU,cAAc,MAAY,GAAA;AAAA,OACrC;AAAA,MAGA,IAAA,EAAM,GAAG,IAAI,CAAA,EAAA,CAAA;AAAA,MACb,QAAQ,EAAA,IAAA;AAAA,MACR,KAAM,EAAA,MAAA;AAAA,MAEN,QAAA,kBAAAD,cAAA;AAAA,QAACE,8BAAA;AAAA,QAAA;AAAA,UACA,MAAA,EACC,aACG,CAACC,8BAAA,CAAwB,EAAE,CAC3B,GAAA,CAACA,+BAAwB,IAAI,CAAA;AAAA,UAGjC,QAAA,kBAAAH,cAAA;AAAA,YAACI,2BAAA;AAAA,YAAA;AAAA,cACA,EAAI,EAAA,KAAA;AAAA,cACJ,IACC,EAAA,UAAA,GACGD,8BAAwB,CAAA,IAAA,GACxBA,8BAAwB,CAAA,EAAA;AAAA,cAG3B,QAAA,EAAA;AAAA;AAAA;AACF;AAAA;AACD;AAAA,GACD;AAEF;AAEO,MAAM,SAAY,GAAA","file":"LabelCell.js","sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\nimport {\n\tScorecardDraggableItems,\n\ttype ScorecardTableData,\n} from \"../../../../../schemas/config\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport DroppableCell from \"../../DroppableCell\";\nimport { DraggableCell } from \"../../DraggableCell\";\nimport { useMemo } from \"react\";\nimport { isEmpty } from \"lodash\";\nimport { useScorecardViewStateValue } from \"../../../../../utils/viewState\";\n\nexport function LabelCellComponent(\n\tprops: CellContext<\n\t\tScorecardTableData,\n\t\t{\n\t\t\tlabel: string;\n\t\t\torgUnit?: { uid: string; hierarchy: string; name: string };\n\t\t}\n\t>,\n) {\n\tconst data = props.getValue();\n\tconst size = props.cell.column.getSize();\n\tconst dataInRows = useScorecardViewStateValue<boolean>(\"showDataInRows\");\n\tconst showHierarchy = useScorecardViewStateValue<boolean>(\"showHierarchy\");\n\n\tconst inPrintMode = useScorecardViewStateValue<boolean>(\"printMode\");\n\n\tconst left = useMemo(() => {\n\t\tconst index = props.row\n\t\t\t.getVisibleCells()\n\t\t\t.findIndex(({ id }) => props.cell.id === id);\n\t\treturn index * 48;\n\t}, [props.row.getVisibleCells(), props.cell.id]);\n\n\tconst label = useMemo(() => {\n\t\tif (dataInRows) {\n\t\t\treturn data.label ?? \"\";\n\t\t}\n\t\tif (showHierarchy) {\n\t\t\treturn (\n\t\t\t\tdata.orgUnit?.hierarchy\n\t\t\t\t\t.split(\"/\")\n\t\t\t\t\t.filter((val) => !isEmpty(val))\n\t\t\t\t\t.join(\" / \") ?? \"\"\n\t\t\t);\n\t\t}\n\t\treturn data.label ?? \"\";\n\t}, [data, showHierarchy, dataInRows]);\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tclassName=\"label-cell\"\n\t\t\tfixed\n\t\t\twidth={`${size}px`}\n\t\t\tstyle={{\n\t\t\t\twidth: inPrintMode ? \"auto\" : size,\n\t\t\t\tminWidth: inPrintMode ? undefined : size,\n\t\t\t}}\n\t\t\t/*\n      // @ts-ignore */\n\t\t\tleft={`${left}px`}\n\t\t\tbordered\n\t\t\talign=\"left\"\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.ou]\n\t\t\t\t\t\t: [ScorecardDraggableItems.data]\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.data\n\t\t\t\t\t\t\t: ScorecardDraggableItems.ou\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</DraggableCell>\n\t\t\t</DroppableCell>\n\t\t</DataTableCell>\n\t);\n}\n\nexport const LabelCell = LabelCellComponent;\n"]}

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

@@ -7,7 +7,8 @@ var styles = require('../TableHeader.module.css');
 var FilterArea = require('./FilterArea');
 var dhis2Utils = require('@hisptz/dhis2-utils');
 var react = require('react');
-var state = require('../../../../../state');
+var viewState = require('../../../../../utils/viewState');
+var dimensionState = require('../../../../../utils/dimensionState');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -18,11 +19,8 @@ function MetaHeaderCellComponent({
   header
 }) {
   const randomId = react.useRef(dhis2Utils.uid());
-  const hasOnePeriod = state.useScorecardStateSelectorValue(["hasOnePeriod"]);
-  const dataInRows = state.useScorecardStateSelectorValue([
-    "options",
-    "showDataInRows"
-  ]);
+  const hasOnePeriod = dimensionState.useHasOnePeriod();
+  const dataInRows = viewState.useScorecardViewStateValue("showDataInRows");
   const rowSpan = dataInRows ? hasOnePeriod ? "2" : "2" : hasOnePeriod ? "2" : "3";
   const filterColumn = header.subHeaders.find(
     (header2) => header2.column.getCanFilter()

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/ScorecardTable/components/TableHeader/components/MetaHeaderCell.tsx"],"names":["useRef","uid","useScorecardStateSelectorValue","header","i18n","jsx","DataTableColumnHeader","styles","FilterArea","memo"],"mappings":";;;;;;;;;;;;;;;;AAUA,SAAS,uBAAwB,CAAA;AAAA,EAChC;AACD,CAA2C,EAAA;AAC1C,EAAM,MAAA,QAAA,GAAWA,YAAe,CAAAC,cAAA,EAAK,CAAA;AAErC,EAAA,MAAM,YAAe,GAAAC,oCAAA,CAA+B,CAAC,cAAc,CAAC,CAAA;AACpE,EAAA,MAAM,aAAaA,oCAAwC,CAAA;AAAA,IAC1D,SAAA;AAAA,IACA;AAAA,GACA,CAAA;AAED,EAAA,MAAM,UAAU,UACb,GAAA,YAAA,GACC,GACA,GAAA,GAAA,GACD,eACC,GACA,GAAA,GAAA;AAEJ,EAAM,MAAA,YAAA,GAAe,OAAO,UAAW,CAAA,IAAA;AAAA,IAAK,CAACC,OAAAA,KAC5CA,OAAO,CAAA,MAAA,CAAO,YAAa;AAAA,GACzB,EAAA,MAAA;AAEH,EAAA,MAAM,gBAAgB,CAAC,YAAA,EAAc,aAClC,GAAA,SAAA,GACC,aAAc,WAAY,EAAA;AAC9B,EAAA,MAAM,eACL,YAAc,EAAA,mBAAA,OAA0B,KACrC,GAAAC,qBAAA,CAAK,EAAE,oBAAoB,CAAA,GAC3B,cAAc,mBAAoB,EAAA,KAAM,SACvCA,qBAAK,CAAA,CAAA,CAAE,qBAAqB,CAC5B,GAAAA,qBAAA,CAAK,EAAE,SAAS,CAAA;AAErB,EACC,uBAAAC,cAAA;AAAA,IAACC,wBAAA;AAAA,IAAA;AAAA,MAEA,KAAM,EAAA,QAAA;AAAA,MACN,eAAeF,qBAAK,CAAA,CAAA,CAAE,uBAAyB,EAAA,EAAE,cAAc,CAAA;AAAA,MAC/D,eAAA,EAAiB,CAAC,CAAA,EAAG,CAAM,KAAA;AAC1B,QAAM,MAAA,IAAA,GAAO,aAAc,uBAAwB,EAAA;AACnD,QAAA,IAAI,IAAM,EAAA;AACT,UAAA,IAAA,CAAK,CAAC,CAAA;AAAA;AACP,OACD;AAAA,MACA,KAAK,EAAA,IAAA;AAAA,MAGL,IAAK,EAAA,GAAA;AAAA,MACL,aAAA;AAAA,MACA,OAAA,EAAS,MAAO,CAAA,OAAA,CAAQ,QAAS,EAAA;AAAA,MACjC,OAAA;AAAA,MACA,WAAWG,uBAAO,CAAA,UAAA;AAAA,MAEjB,QAAA,EAAA,CAAC,CAAC,YACF,oBAAAF,cAAA;AAAA,QAACG,qBAAA;AAAA,QAAA;AAAA,UAEA,MAAQ,EAAA;AAAA,SAAA;AAAA,QADH,CAAA,EAAG,OAAO,EAAE,CAAA,YAAA;AAAA;AAElB,KAAA;AAAA,IAtBI,CAAG,EAAA,MAAA,CAAO,EAAE,CAAA,CAAA,EAAI,SAAS,OAAO,CAAA;AAAA,GAwBtC;AAEF;AAEa,MAAA,cAAA,GAAiBC,WAAK,uBAAuB","file":"MetaHeaderCell.js","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport type { ScorecardTableData } from \"../../../../../schemas/config\";\nimport { DataTableColumnHeader, type DataTableSortDirection } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport styles from \"../TableHeader.module.css\";\nimport { FilterArea } from \"./FilterArea\";\nimport { uid } from \"@hisptz/dhis2-utils\";\nimport { memo, useRef } from \"react\";\nimport { useScorecardStateSelectorValue } from \"../../../../../state\";\n\nfunction MetaHeaderCellComponent({\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst randomId = useRef<string>(uid());\n\n\tconst hasOnePeriod = useScorecardStateSelectorValue([\"hasOnePeriod\"]);\n\tconst dataInRows = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\n\tconst rowSpan = dataInRows\n\t\t? hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"2\"\n\t\t: hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"3\";\n\n\tconst filterColumn = header.subHeaders.find((header) =>\n\t\theader.column.getCanFilter(),\n\t)?.column;\n\n\tconst sortDirection = !filterColumn?.getIsSorted()\n\t\t? \"default\"\n\t\t: (filterColumn!.getIsSorted() as DataTableSortDirection);\n\tconst nextSortType =\n\t\tfilterColumn?.getNextSortingOrder() === \"asc\"\n\t\t\t? i18n.t(\"in ascending order\")\n\t\t\t: filterColumn?.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={`${header.id}-${randomId.current}`}\n\t\t\talign=\"center\"\n\t\t\tsortIconTitle={i18n.t(\"Sort {{nextSortType}}\", { nextSortType })}\n\t\t\tonSortIconClick={(_, e) => {\n\t\t\t\tconst sort = filterColumn!.getToggleSortingHandler();\n\t\t\t\tif (sort) {\n\t\t\t\t\tsort(e);\n\t\t\t\t}\n\t\t\t}}\n\t\t\tfixed\n\t\t\t/*\n      // @ts-ignore */\n\t\t\tleft=\"0\"\n\t\t\tsortDirection={sortDirection}\n\t\t\tcolSpan={header.colSpan.toString()}\n\t\t\trowSpan={rowSpan}\n\t\t\tclassName={styles.metaHeader}\n\t\t>\n\t\t\t{!!filterColumn && (\n\t\t\t\t<FilterArea\n\t\t\t\t\tkey={`${header.id}-filter-area`}\n\t\t\t\t\tcolumn={filterColumn}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</DataTableColumnHeader>\n\t);\n}\n\nexport const MetaHeaderCell = memo(MetaHeaderCellComponent);\n"]}
+{"version":3,"sources":["../../../../../../src/components/ScorecardTable/components/TableHeader/components/MetaHeaderCell.tsx"],"names":["useRef","uid","useHasOnePeriod","useScorecardViewStateValue","header","i18n","jsx","DataTableColumnHeader","styles","FilterArea","memo"],"mappings":";;;;;;;;;;;;;;;;;AAWA,SAAS,uBAAwB,CAAA;AAAA,EAChC;AACD,CAA2C,EAAA;AAC1C,EAAM,MAAA,QAAA,GAAWA,YAAe,CAAAC,cAAA,EAAK,CAAA;AAErC,EAAA,MAAM,eAAeC,8BAAgB,EAAA;AACrC,EAAM,MAAA,UAAA,GAAaC,qCAAoC,gBAAgB,CAAA;AAEvE,EAAA,MAAM,UAAU,UACb,GAAA,YAAA,GACC,GACA,GAAA,GAAA,GACD,eACC,GACA,GAAA,GAAA;AAEJ,EAAM,MAAA,YAAA,GAAe,OAAO,UAAW,CAAA,IAAA;AAAA,IAAK,CAACC,OAAAA,KAC5CA,OAAO,CAAA,MAAA,CAAO,YAAa;AAAA,GACzB,EAAA,MAAA;AAEH,EAAA,MAAM,gBAAgB,CAAC,YAAA,EAAc,aAClC,GAAA,SAAA,GACC,aAAc,WAAY,EAAA;AAC9B,EAAA,MAAM,eACL,YAAc,EAAA,mBAAA,OAA0B,KACrC,GAAAC,qBAAA,CAAK,EAAE,oBAAoB,CAAA,GAC3B,cAAc,mBAAoB,EAAA,KAAM,SACvCA,qBAAK,CAAA,CAAA,CAAE,qBAAqB,CAC5B,GAAAA,qBAAA,CAAK,EAAE,SAAS,CAAA;AAErB,EACC,uBAAAC,cAAA;AAAA,IAACC,wBAAA;AAAA,IAAA;AAAA,MAEA,KAAM,EAAA,QAAA;AAAA,MACN,eAAeF,qBAAK,CAAA,CAAA,CAAE,uBAAyB,EAAA,EAAE,cAAc,CAAA;AAAA,MAC/D,eAAA,EAAiB,CAAC,CAAA,EAAG,CAAM,KAAA;AAC1B,QAAM,MAAA,IAAA,GAAO,aAAc,uBAAwB,EAAA;AACnD,QAAA,IAAI,IAAM,EAAA;AACT,UAAA,IAAA,CAAK,CAAC,CAAA;AAAA;AACP,OACD;AAAA,MACA,KAAK,EAAA,IAAA;AAAA,MAGL,IAAK,EAAA,GAAA;AAAA,MACL,aAAA;AAAA,MACA,OAAA,EAAS,MAAO,CAAA,OAAA,CAAQ,QAAS,EAAA;AAAA,MACjC,OAAA;AAAA,MACA,WAAWG,uBAAO,CAAA,UAAA;AAAA,MAEjB,QAAA,EAAA,CAAC,CAAC,YACF,oBAAAF,cAAA;AAAA,QAACG,qBAAA;AAAA,QAAA;AAAA,UAEA,MAAQ,EAAA;AAAA,SAAA;AAAA,QADH,CAAA,EAAG,OAAO,EAAE,CAAA,YAAA;AAAA;AAElB,KAAA;AAAA,IAtBI,CAAG,EAAA,MAAA,CAAO,EAAE,CAAA,CAAA,EAAI,SAAS,OAAO,CAAA;AAAA,GAwBtC;AAEF;AAEa,MAAA,cAAA,GAAiBC,WAAK,uBAAuB","file":"MetaHeaderCell.js","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport type { ScorecardTableData } from \"../../../../../schemas/config\";\nimport { DataTableColumnHeader, type DataTableSortDirection } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport styles from \"../TableHeader.module.css\";\nimport { FilterArea } from \"./FilterArea\";\nimport { uid } from \"@hisptz/dhis2-utils\";\nimport { memo, useRef } from \"react\";\nimport { useScorecardViewStateValue } from \"../../../../../utils/viewState\";\nimport { useHasOnePeriod } from \"../../../../../utils/dimensionState\";\n\nfunction MetaHeaderCellComponent({\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst randomId = useRef<string>(uid());\n\n\tconst hasOnePeriod = useHasOnePeriod();\n\tconst dataInRows = useScorecardViewStateValue<boolean>(\"showDataInRows\");\n\n\tconst rowSpan = dataInRows\n\t\t? hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"2\"\n\t\t: hasOnePeriod\n\t\t\t? \"2\"\n\t\t\t: \"3\";\n\n\tconst filterColumn = header.subHeaders.find((header) =>\n\t\theader.column.getCanFilter(),\n\t)?.column;\n\n\tconst sortDirection = !filterColumn?.getIsSorted()\n\t\t? \"default\"\n\t\t: (filterColumn!.getIsSorted() as DataTableSortDirection);\n\tconst nextSortType =\n\t\tfilterColumn?.getNextSortingOrder() === \"asc\"\n\t\t\t? i18n.t(\"in ascending order\")\n\t\t\t: filterColumn?.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={`${header.id}-${randomId.current}`}\n\t\t\talign=\"center\"\n\t\t\tsortIconTitle={i18n.t(\"Sort {{nextSortType}}\", { nextSortType })}\n\t\t\tonSortIconClick={(_, e) => {\n\t\t\t\tconst sort = filterColumn!.getToggleSortingHandler();\n\t\t\t\tif (sort) {\n\t\t\t\t\tsort(e);\n\t\t\t\t}\n\t\t\t}}\n\t\t\tfixed\n\t\t\t/*\n      // @ts-ignore */\n\t\t\tleft=\"0\"\n\t\t\tsortDirection={sortDirection}\n\t\t\tcolSpan={header.colSpan.toString()}\n\t\t\trowSpan={rowSpan}\n\t\t\tclassName={styles.metaHeader}\n\t\t>\n\t\t\t{!!filterColumn && (\n\t\t\t\t<FilterArea\n\t\t\t\t\tkey={`${header.id}-filter-area`}\n\t\t\t\t\tcolumn={filterColumn}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</DataTableColumnHeader>\n\t);\n}\n\nexport const MetaHeaderCell = memo(MetaHeaderCellComponent);\n"]}

package/dist/components/StateProvider.js

@@ -2,43 +2,56 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var recoil = require('recoil');
-var state = require('../state');
-var utils = require('../utils');
+var viewState = require('../utils/viewState');
+var dimensionState = require('../utils/dimensionState');
 
+const ScorecardStateContext = react.createContext(null);
+function useScorecardViewStateEngine() {
+  const context = react.useContext(ScorecardStateContext);
+  if (!context) {
+    throw Error(
+      "useScorecardViewStateEngine should be used inside a Scorecard Context"
+    );
+  }
+  return context.options;
+}
+function useScorecardDimensionStateEngine() {
+  const context = react.useContext(ScorecardStateContext);
+  if (!context) {
+    throw Error(
+      "useScorecardDimensionStateEngine should be used inside a Scorecard Context"
+    );
+  }
+  return context.dimension;
+}
 function ScorecardStateProvider({
   children,
   initialState,
-  config,
-  withRecoilRoot
+  config
 }) {
-  const initState = react.useCallback(
-    ({ set }) => {
-      set(
-        state.scorecardStateAtom,
-        initialState ?? utils.getInitialStateFromConfig(config)
-      );
-    },
-    [initialState, config]
+  const viewStateEngine = react.useRef(
+    viewState.createScorecardViewStateEngine(initialState?.options ?? config.options)
+  );
+  const dimensionStateEngine = react.useRef(
+    dimensionState.createDimensionStateEngine({
+      orgUnitSelection: initialState?.orgUnitSelection ?? config.orgUnitSelection,
+      periodSelection: initialState?.periodSelection ?? config.periodSelection
+    })
   );
-  const initializeStateWithoutRecoil = recoil.useRecoilCallback(
-    ({ set, snapshot }) => (initialState2) => {
-      if (snapshot.getLoadable(state.scorecardStateAtom).contents === null) {
-        set(state.scorecardStateAtom, initialState2);
-      }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ScorecardStateContext.Provider,
+    {
+      value: {
+        options: viewStateEngine.current,
+        dimension: dimensionStateEngine.current
+      },
+      children
     }
   );
-  if (!withRecoilRoot) {
-    initializeStateWithoutRecoil(
-      initialState ?? utils.getInitialStateFromConfig(config)
-    );
-  }
-  if (withRecoilRoot) {
-    return /* @__PURE__ */ jsxRuntime.jsx(recoil.RecoilRoot, { initializeState: initState, children });
-  }
-  return children;
 }
 
 exports.ScorecardStateProvider = ScorecardStateProvider;
+exports.useScorecardDimensionStateEngine = useScorecardDimensionStateEngine;
+exports.useScorecardViewStateEngine = useScorecardViewStateEngine;
 //# sourceMappingURL=StateProvider.js.map
 //# sourceMappingURL=StateProvider.js.map

package/dist/components/StateProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/StateProvider.tsx"],"names":["useCallback","scorecardStateAtom","getInitialStateFromConfig","useRecoilCallback","initialState","jsx","RecoilRoot"],"mappings":";;;;;;;;AAaO,SAAS,sBAAuB,CAAA;AAAA,EACtC,QAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA;AACD,CAAgC,EAAA;AAC/B,EAAA,MAAM,SAAY,GAAAA,iBAAA;AAAA,IACjB,CAAC,EAAE,GAAA,EAA2B,KAAA;AAC7B,MAAA,GAAA;AAAA,QACCC,wBAAA;AAAA,QACA,YAAA,IAAgBC,gCAA0B,MAAM;AAAA,OACjD;AAAA,KACD;AAAA,IACA,CAAC,cAAc,MAAM;AAAA,GACtB;AACA,EAAA,MAAM,4BAA+B,GAAAC,wBAAA;AAAA,IACpC,CAAC,EAAE,GAAA,EAAK,QAAS,EAAA,KAChB,CAACC,aAAiC,KAAA;AACjC,MAAA,IACC,QAAS,CAAA,WAAA,CAAYH,wBAAkB,CAAA,CAAE,aAAa,IACrD,EAAA;AACD,QAAA,GAAA,CAAIA,0BAAoBG,aAAY,CAAA;AAAA;AACrC;AACD,GACF;AAEA,EAAA,IAAI,CAAC,cAAgB,EAAA;AACpB,IAAA,4BAAA;AAAA,MACC,YAAA,IAAgBF,gCAA0B,MAAM;AAAA,KACjD;AAAA;AAGD,EAAA,IAAI,cAAgB,EAAA;AACnB,IAAA,uBAAQG,cAAA,CAAAC,iBAAA,EAAA,EAAW,eAAiB,EAAA,SAAA,EAAY,QAAS,EAAA,CAAA;AAAA;AAG1D,EAAO,OAAA,QAAA;AACR","file":"StateProvider.js","sourcesContent":["import type { ScorecardConfig, ScorecardState } from \"../schemas/config\";\nimport { type ReactNode, useCallback } from \"react\";\nimport { MutableSnapshot, RecoilRoot, useRecoilCallback } from \"recoil\";\nimport { scorecardStateAtom } from \"../state\";\nimport { getInitialStateFromConfig } from \"../utils\";\n\nexport interface ScorecardStateProviderProps {\n\tinitialState?: ScorecardState;\n\tconfig: ScorecardConfig;\n\tchildren: ReactNode;\n\twithRecoilRoot?: boolean;\n}\n\nexport function ScorecardStateProvider({\n\tchildren,\n\tinitialState,\n\tconfig,\n\twithRecoilRoot,\n}: ScorecardStateProviderProps) {\n\tconst initState = useCallback(\n\t\t({ set }: MutableSnapshot) => {\n\t\t\tset(\n\t\t\t\tscorecardStateAtom,\n\t\t\t\tinitialState ?? getInitialStateFromConfig(config),\n\t\t\t);\n\t\t},\n\t\t[initialState, config],\n\t);\n\tconst initializeStateWithoutRecoil = useRecoilCallback(\n\t\t({ set, snapshot }) =>\n\t\t\t(initialState: ScorecardState) => {\n\t\t\t\tif (\n\t\t\t\t\tsnapshot.getLoadable(scorecardStateAtom).contents === null\n\t\t\t\t) {\n\t\t\t\t\tset(scorecardStateAtom, initialState);\n\t\t\t\t}\n\t\t\t},\n\t);\n\n\tif (!withRecoilRoot) {\n\t\tinitializeStateWithoutRecoil(\n\t\t\tinitialState ?? getInitialStateFromConfig(config),\n\t\t);\n\t}\n\n\tif (withRecoilRoot) {\n\t\treturn <RecoilRoot initializeState={initState}>{children}</RecoilRoot>;\n\t}\n\n\treturn children;\n}\n"]}
+{"version":3,"sources":["../../src/components/StateProvider.tsx"],"names":["createContext","useContext","useRef","createScorecardViewStateEngine","createDimensionStateEngine","jsx"],"mappings":";;;;;;;AAiBA,MAAM,qBAAA,GAAwBA,oBAGpB,IAAI,CAAA;AAEP,SAAS,2BAA8B,GAAA;AAC7C,EAAM,MAAA,OAAA,GAAUC,iBAAW,qBAAqB,CAAA;AAChD,EAAA,IAAI,CAAC,OAAS,EAAA;AACb,IAAM,MAAA,KAAA;AAAA,MACL;AAAA,KACD;AAAA;AAED,EAAA,OAAO,OAAQ,CAAA,OAAA;AAChB;AAEO,SAAS,gCAAmC,GAAA;AAClD,EAAM,MAAA,OAAA,GAAUA,iBAAW,qBAAqB,CAAA;AAChD,EAAA,IAAI,CAAC,OAAS,EAAA;AACb,IAAM,MAAA,KAAA;AAAA,MACL;AAAA,KACD;AAAA;AAED,EAAA,OAAO,OAAQ,CAAA,SAAA;AAChB;AAEO,SAAS,sBAAuB,CAAA;AAAA,EACtC,QAAA;AAAA,EACA,YAAA;AAAA,EACA;AACD,CAAgC,EAAA;AAC/B,EAAA,MAAM,eAAkB,GAAAC,YAAA;AAAA,IACvBC,wCAA+B,CAAA,YAAA,EAAc,OAAW,IAAA,MAAA,CAAO,OAAO;AAAA,GACvE;AACA,EAAA,MAAM,oBAAuB,GAAAD,YAAA;AAAA,IAC5BE,yCAA2B,CAAA;AAAA,MAC1B,gBAAA,EACC,YAAc,EAAA,gBAAA,IAAoB,MAAO,CAAA,gBAAA;AAAA,MAC1C,eAAA,EACC,YAAc,EAAA,eAAA,IAAmB,MAAO,CAAA;AAAA,KACzC;AAAA,GACF;AAEA,EACC,uBAAAC,cAAA;AAAA,IAAC,qBAAsB,CAAA,QAAA;AAAA,IAAtB;AAAA,MACA,KAAO,EAAA;AAAA,QACN,SAAS,eAAgB,CAAA,OAAA;AAAA,QACzB,WAAW,oBAAqB,CAAA;AAAA,OACjC;AAAA,MAEC;AAAA;AAAA,GACF;AAEF","file":"StateProvider.js","sourcesContent":["import type { ScorecardConfig, ScorecardState } from \"../schemas/config\";\nimport { createContext, type ReactNode, useContext, useRef } from \"react\";\nimport {\n\tcreateScorecardViewStateEngine,\n\ttype ScorecardViewStateEngine,\n} from \"../utils/viewState\";\nimport {\n\tcreateDimensionStateEngine,\n\ttype DimensionStateEngine,\n} from \"../utils/dimensionState\";\n\nexport interface ScorecardStateProviderProps {\n\tinitialState?: ScorecardState;\n\tconfig: ScorecardConfig;\n\tchildren: ReactNode;\n}\n\nconst ScorecardStateContext = createContext<{\n\toptions: ScorecardViewStateEngine;\n\tdimension: DimensionStateEngine;\n} | null>(null);\n\nexport function useScorecardViewStateEngine() {\n\tconst context = useContext(ScorecardStateContext);\n\tif (!context) {\n\t\tthrow Error(\n\t\t\t\"useScorecardViewStateEngine should be used inside a Scorecard Context\",\n\t\t);\n\t}\n\treturn context.options;\n}\n\nexport function useScorecardDimensionStateEngine() {\n\tconst context = useContext(ScorecardStateContext);\n\tif (!context) {\n\t\tthrow Error(\n\t\t\t\"useScorecardDimensionStateEngine should be used inside a Scorecard Context\",\n\t\t);\n\t}\n\treturn context.dimension;\n}\n\nexport function ScorecardStateProvider({\n\tchildren,\n\tinitialState,\n\tconfig,\n}: ScorecardStateProviderProps) {\n\tconst viewStateEngine = useRef<ScorecardViewStateEngine>(\n\t\tcreateScorecardViewStateEngine(initialState?.options ?? config.options),\n\t);\n\tconst dimensionStateEngine = useRef<DimensionStateEngine>(\n\t\tcreateDimensionStateEngine({\n\t\t\torgUnitSelection:\n\t\t\t\tinitialState?.orgUnitSelection ?? config.orgUnitSelection,\n\t\t\tperiodSelection:\n\t\t\t\tinitialState?.periodSelection ?? config.periodSelection,\n\t\t}),\n\t);\n\n\treturn (\n\t\t<ScorecardStateContext.Provider\n\t\t\tvalue={{\n\t\t\t\toptions: viewStateEngine.current,\n\t\t\t\tdimension: dimensionStateEngine.current,\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</ScorecardStateContext.Provider>\n\t);\n}\n"]}

package/dist/esm/Scorecard.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { TableStateProvider } from './components/TableStateProvider';
+import { TableStateProvider } from './components';
 import { ScorecardTable } from './components/ScorecardTable';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { DndProvider } from 'react-dnd';

package/dist/esm/Scorecard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Scorecard.tsx"],"names":[],"mappings":";;;;;;AAaO,SAAS,SAAA,CAAU,EAAE,UAAA,EAAkD,EAAA;AAC7E,EAAA,uBACE,GAAA,CAAA,kBAAA,EAAA,EACA,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA,EAAY,OAAS,EAAA,YAAA,EACrB,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EAAgB,GAAI,UAAA,IAAc,EAAC,EAAI,GACzC,CACD,EAAA,CAAA;AAEF","file":"Scorecard.js","sourcesContent":["import React from \"react\";\nimport { TableStateProvider } from \"./components/TableStateProvider\";\nimport {\n\tScorecardTable,\n\ttype ScorecardTableProps,\n} from \"./components/ScorecardTable\";\nimport { HTML5Backend } from \"react-dnd-html5-backend\";\nimport { DndProvider } from \"react-dnd\";\n\nexport interface ScorecardProps {\n\ttableProps?: ScorecardTableProps;\n}\n\nexport function Scorecard({ tableProps }: ScorecardProps): React.ReactElement {\n\treturn (\n\t\t<TableStateProvider>\n\t\t\t<DndProvider backend={HTML5Backend}>\n\t\t\t\t<ScorecardTable {...(tableProps ?? {})} />\n\t\t\t</DndProvider>\n\t\t</TableStateProvider>\n\t);\n}\n"]}
+{"version":3,"sources":["../../src/Scorecard.tsx"],"names":[],"mappings":";;;;;;AAaO,SAAS,SAAA,CAAU,EAAE,UAAA,EAAkD,EAAA;AAC7E,EAAA,uBACE,GAAA,CAAA,kBAAA,EAAA,EACA,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA,EAAY,OAAS,EAAA,YAAA,EACrB,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EAAgB,GAAI,UAAA,IAAc,EAAC,EAAI,GACzC,CACD,EAAA,CAAA;AAEF","file":"Scorecard.js","sourcesContent":["import React from \"react\";\nimport { TableStateProvider } from \"./components\";\nimport {\n\tScorecardTable,\n\ttype ScorecardTableProps,\n} from \"./components/ScorecardTable\";\nimport { HTML5Backend } from \"react-dnd-html5-backend\";\nimport { DndProvider } from \"react-dnd\";\n\nexport interface ScorecardProps {\n\ttableProps?: ScorecardTableProps;\n}\n\nexport function Scorecard({ tableProps }: ScorecardProps): React.ReactElement {\n\treturn (\n\t\t<TableStateProvider>\n\t\t\t<DndProvider backend={HTML5Backend}>\n\t\t\t\t<ScorecardTable {...(tableProps ?? {})} />\n\t\t\t</DndProvider>\n\t\t</TableStateProvider>\n\t);\n}\n"]}

package/dist/esm/components/ColGroup.js

@@ -1,15 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useScorecardStateSelectorValue } from '../state';
+import { useScorecardViewStateValue } from '../utils/viewState';
 
 function ColGroup() {
-  const inPrintMode = useScorecardStateSelectorValue([
-    "options",
-    "printMode"
-  ]);
-  const itemNumber = useScorecardStateSelectorValue([
-    "options",
-    "itemNumber"
-  ]);
+  const inPrintMode = useScorecardViewStateValue("printMode");
+  const itemNumber = useScorecardViewStateValue("itemNumber");
   if (!inPrintMode) {
     return null;
   }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ColGroup.tsx"],"names":[],"mappings":";;;AAEO,SAAS,QAAW,GAAA;AAC1B,EAAA,MAAM,cAAc,8BAAwC,CAAA;AAAA,IAC3D,SAAA;AAAA,IACA;AAAA,GACA,CAAA;AAED,EAAA,MAAM,aAAa,8BAAwC,CAAA;AAAA,IAC1D,SAAA;AAAA,IACA;AAAA,GACA,CAAA;AAED,EAAA,IAAI,CAAC,WAAa,EAAA;AACjB,IAAO,OAAA,IAAA;AAAA;AAGR,EAAA,4BACE,UACC,EAAA,EAAA,QAAA,EAAA;AAAA,IAAc,UAAA,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,KAAA,EAAO,EAAI,EAAA,CAAA;AAAA,oBAC/B,GAAA,CAAC,KAAI,EAAA,EAAA,KAAA,EAAM,MAAO,EAAA;AAAA,GACnB,EAAA,CAAA;AAEF","file":"ColGroup.js","sourcesContent":["import { useScorecardStateSelectorValue } from \"../state\";\n\nexport function ColGroup() {\n\tconst inPrintMode = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"printMode\",\n\t]);\n\n\tconst itemNumber = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"itemNumber\",\n\t]);\n\n\tif (!inPrintMode) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<colgroup>\n\t\t\t{itemNumber && <col width={48} />}\n\t\t\t<col width=\"auto\" />\n\t\t</colgroup>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../src/components/ColGroup.tsx"],"names":[],"mappings":";;;AAEO,SAAS,QAAW,GAAA;AAC1B,EAAM,MAAA,WAAA,GAAc,2BAAoC,WAAW,CAAA;AACnE,EAAM,MAAA,UAAA,GAAa,2BAAoC,YAAY,CAAA;AAEnE,EAAA,IAAI,CAAC,WAAa,EAAA;AACjB,IAAO,OAAA,IAAA;AAAA;AAGR,EAAA,4BACE,UACC,EAAA,EAAA,QAAA,EAAA;AAAA,IAAc,UAAA,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,KAAA,EAAO,EAAI,EAAA,CAAA;AAAA,oBAC/B,GAAA,CAAC,KAAI,EAAA,EAAA,KAAA,EAAM,MAAO,EAAA;AAAA,GACnB,EAAA,CAAA;AAEF","file":"ColGroup.js","sourcesContent":["import { useScorecardViewStateValue } from \"../utils/viewState\";\n\nexport function ColGroup() {\n\tconst inPrintMode = useScorecardViewStateValue<boolean>(\"printMode\");\n\tconst itemNumber = useScorecardViewStateValue<boolean>(\"itemNumber\");\n\n\tif (!inPrintMode) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<colgroup>\n\t\t\t{itemNumber && <col width={48} />}\n\t\t\t<col width=\"auto\" />\n\t\t</colgroup>\n\t);\n}\n"]}

package/dist/esm/components/ScorecardHeader.js

@@ -1,21 +1,22 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useScorecardConfig } from './ConfigProvider';
 import { useMemo } from 'react';
-import { useScorecardStateSelectorValue } from '../state';
 import { PeriodUtility } from '@hisptz/dhis2-utils';
 import { head } from 'lodash';
 import { colors } from '@dhis2/ui';
 import JsxParser from 'react-jsx-parser';
+import { useScorecardViewStateValue } from '../utils/viewState';
+import { usePeriodSelectionValue } from '../utils/dimensionState';
 
 function ScorecardHeader() {
   const config = useScorecardConfig();
   const { customHeader, title, subtitle } = config ?? {};
-  const periodSelection = useScorecardStateSelectorValue("periodSelection");
-  const showTitle = useScorecardStateSelectorValue([
-    "options",
-    "title"
-  ]);
-  const periods = useMemo(() => periodSelection.periods, [periodSelection]);
+  const periodSelection = usePeriodSelectionValue();
+  const showTitle = useScorecardViewStateValue("title");
+  const periods = useMemo(
+    () => periodSelection.periods,
+    [periodSelection.periods]
+  );
   const period = useMemo(() => {
     if (periods.length > 1) {
       return;

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,EAAM,MAAA,eAAA,GACL,+BAAgD,iBAAiB,CAAA;AAClE,EAAA,MAAM,YAAY,8BAAwC,CAAA;AAAA,IACzD,SAAA;AAAA,IACA;AAAA,GACA,CAAA;AAED,EAAA,MAAM,UAAU,OAAQ,CAAA,MAAM,gBAAgB,OAAS,EAAA,CAAC,eAAe,CAAC,CAAA;AAExE,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 { useScorecardStateSelectorValue } from \"../state\";\nimport type { PeriodSelection } from \"../schemas/config\";\nimport { PeriodUtility } from \"@hisptz/dhis2-utils\";\nimport { head } from \"lodash\";\nimport { colors } from \"@dhis2/ui\";\nimport JsxParser from \"react-jsx-parser\";\n\nexport function ScorecardHeader() {\n\tconst config = useScorecardConfig();\n\tconst { customHeader, title, subtitle } = config ?? {};\n\n\tconst periodSelection =\n\t\tuseScorecardStateSelectorValue<PeriodSelection>(\"periodSelection\");\n\tconst showTitle = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"title\",\n\t]);\n\n\tconst periods = useMemo(() => periodSelection.periods, [periodSelection]);\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,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"]}

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

@@ -4,12 +4,12 @@ import { SpecificTargetLegendsView } from './components/SpecificTargetLegendsVie
 import { LegendView } from './components/LegendView';
 import { useScorecardConfig } from '../ConfigProvider';
 import { memo } from 'react';
-import { useScorecardViewOptionValue } from '../../state';
+import { useScorecardViewStateValue } from '../../utils/viewState';
 
 const ScorecardLegendsView = memo(function ScorecardLegendsView2() {
   const config = useScorecardConfig();
   const legendDefinitions = config.legendDefinitions;
-  const showLegends = useScorecardViewOptionValue("legend");
+  const showLegends = useScorecardViewStateValue("legend");
   if (!showLegends) {
     return null;
   }