@hisptz/dhis2-analytics 2.0.32 → 2.0.33

package/dist/components/Scorecard/components/ScorecardContext.js

@@ -4,13 +4,64 @@ var jsxRuntime = require('react/jsx-runtime');
 var ConfigProvider = require('./ConfigProvider');
 var StateProvider = require('./StateProvider');
 var MetaProvider = require('./MetaProvider');
+var reactErrorBoundary = require('react-error-boundary');
+var ui = require('@dhis2/ui');
+var i18n = require('@dhis2/d2-i18n');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var i18n__default = /*#__PURE__*/_interopDefault(i18n);
+
+function ErrorFallback({
+  error,
+  resetErrorBoundary,
+  height
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        textAlign: "center",
+        height: height ?? 500,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 16,
+        padding: 16
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.IconError24, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "h3",
+          {
+            style: {
+              color: ui.colors.grey800,
+              margin: 0
+            },
+            children: i18n__default.default.t("Could not load visualization")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0 }, children: error.message }),
+        resetErrorBoundary && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: resetErrorBoundary, small: true, children: i18n__default.default.t("Try again") })
+      ]
+    }
+  );
+}
 function ScorecardContext({
   config,
   children,
   initialState
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(ConfigProvider.ScorecardConfigProvider, { config, children: /* @__PURE__ */ jsxRuntime.jsx(StateProvider.ScorecardStateProvider, { initialState, children: /* @__PURE__ */ jsxRuntime.jsx(MetaProvider.ScorecardMetaProvider, { children }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactErrorBoundary.ErrorBoundary,
+    {
+      resetKeys: [config, initialState],
+      FallbackComponent: ErrorFallback,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ConfigProvider.ScorecardConfigProvider, { config, children: /* @__PURE__ */ jsxRuntime.jsx(StateProvider.ScorecardStateProvider, { initialState, children: /* @__PURE__ */ jsxRuntime.jsx(MetaProvider.ScorecardMetaProvider, { children }) }) })
+    }
+  );
 }
 
 exports.ScorecardContext = ScorecardContext;

package/dist/components/Scorecard/components/ScorecardContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Scorecard/components/ScorecardContext.tsx"],"names":[],"mappings":"AAoBI;AApBJ,SAAS,+BAA+B;AACxC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AAU/B,SAAS,iBAAiB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACD,GAA0B;AACzB,SACC,oBAAC,2BAAwB,QACxB,8BAAC,0BAAuB,cACvB,8BAAC,yBAAuB,UAAS,GAClC,GACD;AAEF","sourcesContent":["import { ScorecardConfigProvider } from \"./ConfigProvider\";\nimport { ScorecardStateProvider } from \"./StateProvider\";\nimport { ScorecardMetaProvider } from \"./MetaProvider\";\nimport type { ReactNode } from \"react\";\nimport type { ScorecardConfig, ScorecardState } from \"../schemas/config\";\n\ninterface ScorecardContextProps {\n\tchildren: ReactNode;\n\tconfig: ScorecardConfig;\n\tinitialState?: ScorecardState;\n}\n\nexport function ScorecardContext({\n\tconfig,\n\tchildren,\n\tinitialState,\n}: ScorecardContextProps) {\n\treturn (\n\t\t<ScorecardConfigProvider config={config}>\n\t\t\t<ScorecardStateProvider initialState={initialState}>\n\t\t\t\t<ScorecardMetaProvider>{children}</ScorecardMetaProvider>\n\t\t\t</ScorecardStateProvider>\n\t\t</ScorecardConfigProvider>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../src/components/Scorecard/components/ScorecardContext.tsx"],"names":[],"mappings":"AAqBE,SAaC,KAbD;AArBF,SAAS,+BAA+B;AACxC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AAGtC,SAAS,qBAAoC;AAC7C,SAAS,QAAQ,QAAQ,mBAAmB;AAC5C,OAAO,UAAU;AAQjB,SAAS,cAAc;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACD,GAAwC;AACvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ,UAAU;AAAA,QAClB,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,QACL,SAAS;AAAA,MACV;AAAA,MAEA;AAAA,4BAAC,eAAY;AAAA,QACb;AAAA,UAAC;AAAA;AAAA,YACA,OAAO;AAAA,cACN,OAAO,OAAO;AAAA,cACd,QAAQ;AAAA,YACT;AAAA,YAEC,eAAK,EAAE,8BAA8B;AAAA;AAAA,QACvC;AAAA,QACA,oBAAC,OAAE,OAAO,EAAE,QAAQ,EAAE,GAAI,gBAAM,SAAQ;AAAA,QACvC,sBACA,oBAAC,UAAO,SAAS,oBAAoB,OAAK,MACxC,eAAK,EAAE,WAAW,GACpB;AAAA;AAAA;AAAA,EAEF;AAEF;AAEO,SAAS,iBAAiB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACD,GAA0B;AACzB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,CAAC,QAAQ,YAAY;AAAA,MAChC,mBAAmB;AAAA,MAEnB,8BAAC,2BAAwB,QACxB,8BAAC,0BAAuB,cACvB,8BAAC,yBAAuB,UAAS,GAClC,GACD;AAAA;AAAA,EACD;AAEF","sourcesContent":["import { ScorecardConfigProvider } from \"./ConfigProvider\";\nimport { ScorecardStateProvider } from \"./StateProvider\";\nimport { ScorecardMetaProvider } from \"./MetaProvider\";\nimport React, { type ReactNode } from \"react\";\nimport type { ScorecardConfig, ScorecardState } from \"../schemas/config\";\nimport { ErrorBoundary, FallbackProps } from \"react-error-boundary\";\nimport { Button, colors, IconError24 } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\n\ninterface ScorecardContextProps {\n\tchildren: ReactNode;\n\tconfig: ScorecardConfig;\n\tinitialState?: ScorecardState;\n}\n\nfunction ErrorFallback({\n\terror,\n\tresetErrorBoundary,\n\theight,\n}: FallbackProps & { height?: number }) {\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\twidth: \"100%\",\n\t\t\t\ttextAlign: \"center\",\n\t\t\t\theight: height ?? 500,\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tflexDirection: \"column\",\n\t\t\t\talignItems: \"center\",\n\t\t\t\tjustifyContent: \"center\",\n\t\t\t\tgap: 16,\n\t\t\t\tpadding: 16,\n\t\t\t}}\n\t\t>\n\t\t\t<IconError24 />\n\t\t\t<h3\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: colors.grey800,\n\t\t\t\t\tmargin: 0,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{i18n.t(\"Could not load visualization\")}\n\t\t\t</h3>\n\t\t\t<p style={{ margin: 0 }}>{error.message}</p>\n\t\t\t{resetErrorBoundary && (\n\t\t\t\t<Button onClick={resetErrorBoundary} small>\n\t\t\t\t\t{i18n.t(\"Try again\")}\n\t\t\t\t</Button>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport function ScorecardContext({\n\tconfig,\n\tchildren,\n\tinitialState,\n}: ScorecardContextProps) {\n\treturn (\n\t\t<ErrorBoundary\n\t\t\tresetKeys={[config, initialState]}\n\t\t\tFallbackComponent={ErrorFallback}\n\t\t>\n\t\t\t<ScorecardConfigProvider config={config}>\n\t\t\t\t<ScorecardStateProvider initialState={initialState}>\n\t\t\t\t\t<ScorecardMetaProvider>{children}</ScorecardMetaProvider>\n\t\t\t\t</ScorecardStateProvider>\n\t\t\t</ScorecardConfigProvider>\n\t\t</ErrorBoundary>\n\t);\n}\n"]}

package/dist/components/Scorecard/components/ScorecardTable/ScorecardTable.js

@@ -7,26 +7,45 @@ var TableBody = require('./components/TableBody');
 var TableFoot = require('./components/TableFoot');
 var core = require('@dnd-kit/core');
 var StateProvider = require('../StateProvider');
+var react = require('react');
 
-function ScorecardTable(props) {
+const ScorecardTable = react.memo(function TableComponent(props) {
+  const [isPending, startTransition] = react.useTransition();
   const updateState = StateProvider.useScorecardSetState();
+  if (isPending) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          height: "100%",
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.CircularLoader, { small: true })
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     core.DndContext,
     {
       onDragEnd: (event) => {
-        if (updateState) {
-          if (!event.over || event.over.id === event.active.id) {
-            updateState((prevState) => {
-              return {
-                ...prevState,
-                options: {
-                  ...prevState.options,
-                  showDataInRows: !prevState.options.showDataInRows
-                }
-              };
-            });
+        startTransition(() => {
+          if (updateState) {
+            if (!event.over || event.over.id === event.active.id) {
+              updateState((prevState) => {
+                return {
+                  ...prevState,
+                  options: {
+                    ...prevState.options,
+                    showDataInRows: !prevState.options.showDataInRows
+                  }
+                };
+              });
+            }
           }
-        }
+        });
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(ui.DataTable, { ...props, layout: "auto", children: [
         /* @__PURE__ */ jsxRuntime.jsx(TableHeader.TableHeader, {}),
@@ -35,7 +54,7 @@ function ScorecardTable(props) {
       ] })
     }
   );
-}
+});
 
 exports.ScorecardTable = ScorecardTable;
 //# sourceMappingURL=out.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Scorecard/components/ScorecardTable/ScorecardTable.tsx"],"names":[],"mappings":"AA8BG,SACC,KADD;AA9BH,SAAS,iBAAsC;AAC/C,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AAI9B,SAAS,eAAe,OAA4B;AAC1D,QAAM,cAAc,qBAAqB;AACzC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,CAAC,UAAU;AACrB,YAAI,aAAa;AAChB,cAAI,CAAC,MAAM,QAAQ,MAAM,KAAK,OAAO,MAAM,OAAO,IAAI;AACrD,wBAAY,CAAC,cAAc;AAC1B,qBAAO;AAAA,gBACN,GAAG;AAAA,gBACH,SAAS;AAAA,kBACR,GAAG,UAAU;AAAA,kBACb,gBACC,CAAC,UAAU,QAAQ;AAAA,gBACrB;AAAA,cACD;AAAA,YACD,CAAC;AAAA,UACF;AAAA,QACD;AAAA,MACD;AAAA,MAEA,+BAAC,aAAW,GAAG,OAAO,QAAO,QAC5B;AAAA,4BAAC,eAAY;AAAA,QACb,oBAAC,aAAU;AAAA,QACX,oBAAC,aAAU;AAAA,SACZ;AAAA;AAAA,EACD;AAEF","sourcesContent":["import { DataTable, type DataTableProps } from \"@dhis2/ui\";\nimport { TableHeader } from \"./components/TableHeader\";\nimport { TableBody } from \"./components/TableBody\";\nimport { TableFoot } from \"./components/TableFoot\";\nimport { DndContext } from \"@dnd-kit/core\";\nimport { useScorecardSetState } from \"../StateProvider\";\n\nexport interface ScorecardTableProps extends Omit<DataTableProps, \"children\"> {}\n\nexport function ScorecardTable(props: ScorecardTableProps) {\n\tconst updateState = useScorecardSetState();\n\treturn (\n\t\t<DndContext\n\t\t\tonDragEnd={(event) => {\n\t\t\t\tif (updateState) {\n\t\t\t\t\tif (!event.over || event.over.id === event.active.id) {\n\t\t\t\t\t\tupdateState((prevState) => {\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t...prevState,\n\t\t\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\t\t\t...prevState.options,\n\t\t\t\t\t\t\t\t\tshowDataInRows:\n\t\t\t\t\t\t\t\t\t\t!prevState.options.showDataInRows,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<DataTable {...props} layout=\"auto\">\n\t\t\t\t<TableHeader />\n\t\t\t\t<TableBody />\n\t\t\t\t<TableFoot />\n\t\t\t</DataTable>\n\t\t</DndContext>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../src/components/Scorecard/components/ScorecardTable/ScorecardTable.tsx"],"names":[],"mappings":"AA2BI,cA0BD,YA1BC;AA3BJ,SAAS,gBAAgB,iBAAsC;AAC/D,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,MAAM,qBAAqB;AAI7B,MAAM,iBAAiB,KAAK,SAAS,eAC3C,OACC;AACD,QAAM,CAAC,WAAW,eAAe,IAAI,cAAc;AACnD,QAAM,cAAc,qBAAqB;AAEzC,MAAI,WAAW;AACd,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAO;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,QACjB;AAAA,QAEA,8BAAC,kBAAe,OAAK,MAAC;AAAA;AAAA,IACvB;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,CAAC,UAAU;AACrB,wBAAgB,MAAM;AACrB,cAAI,aAAa;AAChB,gBAAI,CAAC,MAAM,QAAQ,MAAM,KAAK,OAAO,MAAM,OAAO,IAAI;AACrD,0BAAY,CAAC,cAAc;AAC1B,uBAAO;AAAA,kBACN,GAAG;AAAA,kBACH,SAAS;AAAA,oBACR,GAAG,UAAU;AAAA,oBACb,gBACC,CAAC,UAAU,QAAQ;AAAA,kBACrB;AAAA,gBACD;AAAA,cACD,CAAC;AAAA,YACF;AAAA,UACD;AAAA,QACD,CAAC;AAAA,MACF;AAAA,MAEA,+BAAC,aAAW,GAAG,OAAO,QAAO,QAC5B;AAAA,4BAAC,eAAY;AAAA,QACb,oBAAC,aAAU;AAAA,QACX,oBAAC,aAAU;AAAA,SACZ;AAAA;AAAA,EACD;AAEF,CAAC","sourcesContent":["import { CircularLoader, DataTable, type DataTableProps } from \"@dhis2/ui\";\nimport { TableHeader } from \"./components/TableHeader\";\nimport { TableBody } from \"./components/TableBody\";\nimport { TableFoot } from \"./components/TableFoot\";\nimport { DndContext } from \"@dnd-kit/core\";\nimport { useScorecardSetState } from \"../StateProvider\";\nimport { memo, useTransition } from \"react\";\n\nexport interface ScorecardTableProps extends Omit<DataTableProps, \"children\"> {}\n\nexport const ScorecardTable = memo(function TableComponent(\n\tprops: ScorecardTableProps,\n) {\n\tconst [isPending, startTransition] = useTransition();\n\tconst updateState = useScorecardSetState();\n\n\tif (isPending) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: \"100%\",\n\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\tjustifyContent: \"center\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<CircularLoader small />\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<DndContext\n\t\t\tonDragEnd={(event) => {\n\t\t\t\tstartTransition(() => {\n\t\t\t\t\tif (updateState) {\n\t\t\t\t\t\tif (!event.over || event.over.id === event.active.id) {\n\t\t\t\t\t\t\tupdateState((prevState) => {\n\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t...prevState,\n\t\t\t\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\t\t\t\t...prevState.options,\n\t\t\t\t\t\t\t\t\t\tshowDataInRows:\n\t\t\t\t\t\t\t\t\t\t\t!prevState.options.showDataInRows,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}}\n\t\t>\n\t\t\t<DataTable {...props} layout=\"auto\">\n\t\t\t\t<TableHeader />\n\t\t\t\t<TableBody />\n\t\t\t\t<TableFoot />\n\t\t\t</DataTable>\n\t\t</DndContext>\n\t);\n});\n"]}

package/dist/components/Scorecard/components/ScorecardTable/ScorecardTable.module.css

@@ -8,4 +8,22 @@
   z-index: 1;
   padding: 10px 12px;
 }
+.loading-cell {
+  animation: shimmer 2s infinite linear;
+  background: linear-gradient(to right, #eee 40%, #ddd 50%, #eee 80%);
+  background-size: 500px 100px;
+  animation-name: moving-gradient;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+@-webkit-keyframes moving-gradient {
+  0% {
+    background-position: -250px 0;
+  }
+  100% {
+    background-position: 250px 0;
+  }
+}
 /*# sourceMappingURL=ScorecardTable.module.css.map */

package/dist/components/Scorecard/components/ScorecardTable/ScorecardTable.module.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Scorecard/components/ScorecardTable/ScorecardTable.module.css"],"sourcesContent":["\n.expandCell > td:first-child {\n    left: auto;\n    top: auto;\n    text-align: left;\n    width: auto;\n    background-color: rgb(243, 245, 247);\n    position: sticky;\n    z-index: 1;\n    padding: 10px 12px;\n}\n"],"mappings":"AACA,CAAC,WAAW,EAAE,EAAE;AACZ,QAAM;AACN,OAAK;AACL,cAAY;AACZ,SAAO;AACP,oBAAkB,IAAI,GAAG,EAAE,GAAG,EAAE;AAChC,YAAU;AACV,WAAS;AACT,WAAS,KAAK;AAClB;","names":[]}
+{"version":3,"sources":["../../../../../src/components/Scorecard/components/ScorecardTable/ScorecardTable.module.css"],"sourcesContent":["\n.expandCell > td:first-child {\n    left: auto;\n    top: auto;\n    text-align: left;\n    width: auto;\n    background-color: rgb(243, 245, 247);\n    position: sticky;\n    z-index: 1;\n    padding: 10px 12px;\n}\n\n\n.loading-cell {\n    animation: shimmer 2s infinite linear;\n    background: linear-gradient(to right, #eee 40%, #ddd 50%, #eee 80%);\n    background-size: 500px 100px;\n    animation-name: moving-gradient;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n    animation-timing-function: linear;\n    animation-fill-mode: forwards;\n}\n\n@-webkit-keyframes moving-gradient {\n    0% { background-position: -250px 0; }\n    100% { background-position: 250px 0; }\n}\n"],"mappings":"AACA,CAAC,WAAW,EAAE,EAAE;AACZ,QAAM;AACN,OAAK;AACL,cAAY;AACZ,SAAO;AACP,oBAAkB,IAAI,GAAG,EAAE,GAAG,EAAE;AAChC,YAAU;AACV,WAAS;AACT,WAAS,KAAK;AAClB;AAGA,CAAC;AACG,aAAW,QAAQ,GAAG,SAAS;AAC/B,cAAY,gBAAgB,GAAG,KAAK,EAAE,KAAK,GAAG,EAAE,KAAK,GAAG,EAAE,KAAK;AAC/D,mBAAiB,MAAM;AACvB,kBAAgB;AAChB,sBAAoB;AACpB,6BAA2B;AAC3B,6BAA2B;AAC3B,uBAAqB;AACzB;AAEA,mBAPoB;AAQhB;AAAK,yBAAqB,OAAO;AAAG;AACpC;AAAO,yBAAqB,MAAM;AAAG;AACzC;","names":[]}

package/dist/components/Scorecard/components/ScorecardTable/components/AverageCell.js

@@ -7,6 +7,9 @@ var ConfigProvider = require('../../ConfigProvider');
 var react = require('react');
 var legends = require('../../../utils/legends');
 var LinkedCell = require('./LinkedCell');
+var value = require('../../../hooks/value');
+var StateProvider = require('../../StateProvider');
+var CellLoader = require('./CellLoader');
 
 function SingleAverageCell({
   dataSource
@@ -19,9 +22,12 @@ function SingleAverageCell({
     return legends.getLegend({
       dataSource,
       config,
-      value: dataSource.average
+      value: dataSource.data.average
     });
   }, [dataSource]);
+  if (!dataSource.data.average || isNaN(dataSource.data.average)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableCell, { bordered: true });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.DataTableCell,
     {
@@ -33,7 +39,7 @@ function SingleAverageCell({
         color: legendDefinition ? legends.getTextColorFromBackgroundColor(legendDefinition?.color) : void 0
       },
       align: "center",
-      children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: dataSource.average.toString() })
+      children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: dataSource.data.average?.toFixed(2).toString() })
     }
   );
 }
@@ -49,7 +55,7 @@ function LinkedAverageCell({
     return legends.getLegend({
       dataSource: top,
       config,
-      value: top.average
+      value: top.data.average
     });
   }, [top]);
   const bottomLegendDefinition = react.useMemo(() => {
@@ -59,7 +65,7 @@ function LinkedAverageCell({
     return legends.getLegend({
       dataSource: bottom,
       config,
-      value: bottom.average
+      value: bottom.data.average
     });
   }, [bottom]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -68,31 +74,58 @@ function LinkedAverageCell({
       top: {
         dataSource: {
           ...top,
-          data: {}
+          data: {
+            current: top.data.average
+          }
         },
         legendDefinition: topLegendDefinition,
-        value: top.average
+        value: top.data.average
       },
       bottom: {
-        dataSource: { ...bottom, data: {} },
+        dataSource: {
+          ...bottom,
+          data: {
+            current: bottom.data.average
+          }
+        },
         legendDefinition: bottomLegendDefinition,
-        value: bottom.average
+        value: bottom.data.average
       }
     }
   );
 }
-function AverageCell(props) {
-  const value = props.getValue();
-  const average = value.average;
-  const dataSources = value?.dataSources;
+function DataSourceAverageCell(props) {
+  const dataConfig = react.useMemo(() => props.getValue(), [props.getValue()]);
+  const { cellData: dataSources, loading } = value.useDataHolderAverageCellValue(dataConfig);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(CellLoader.CellLoader, {});
+  }
   if (!lodash.isEmpty(dataSources)) {
-    if (dataSources.length === 1) {
+    if (dataSources?.length === 1) {
       return /* @__PURE__ */ jsxRuntime.jsx(SingleAverageCell, { dataSource: lodash.head(dataSources) });
     } else {
       return /* @__PURE__ */ jsxRuntime.jsx(LinkedAverageCell, { dataSources });
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableCell, { bordered: true, align: "center", children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: average }) }, props.row.id);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableCell, {});
+}
+function OrgUnitAverageCell(props) {
+  const dataConfig = react.useMemo(() => props.getValue(), [props.getValue()]);
+  const { loading, average } = value.useOrgUnitAverageCellValue(dataConfig);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(CellLoader.CellLoader, {});
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableCell, { bordered: true, align: "center", children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: average?.toFixed(2).toString() }) }, props.row.id);
+}
+function AverageCell(props) {
+  const showDataInRows = StateProvider.useScorecardStateSelector([
+    "options",
+    "showDataInRows"
+  ]);
+  if (showDataInRows) {
+    return /* @__PURE__ */ jsxRuntime.jsx(DataSourceAverageCell, { ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(OrgUnitAverageCell, { ...props });
 }
 
 exports.AverageCell = AverageCell;

package/dist/components/Scorecard/components/ScorecardTable/components/AverageCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/AverageCell.tsx"],"names":[],"mappings":"AA6CG;AAxCH,SAAS,qBAAqB;AAC9B,SAAS,MAAM,eAAe;AAC9B,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,SAAS,kBAAkB;AAEpB,SAAS,kBAAkB;AAAA,EACjC;AACD,GAEG;AACF,QAAM,SAAS,mBAAmB;AAClC,QAAM,mBAAmB,QAAQ,MAAM;AACtC,QAAI,CAAC,YAAY;AAChB;AAAA,IACD;AACA,WAAO,UAAU;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAO,WAAW;AAAA,IACnB,CAAC;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAQ;AAAA,MACR,OAAO;AAAA,QACN,YAAY,kBAAkB;AAAA,QAC9B,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO,mBACJ,gCAAgC,kBAAkB,KAAK,IACvD;AAAA,MACJ;AAAA,MACA,OAAM;AAAA,MAEN,8BAAC,OAAG,qBAAW,QAAQ,SAAS,GAAE;AAAA;AAAA,EACnC;AAEF;AAEO,SAAS,kBAAkB;AAAA,EACjC;AACD,GAEG;AACF,QAAM,CAAC,KAAK,MAAM,IAAI,eAAe,CAAC;AACtC,QAAM,SAAS,mBAAmB;AAClC,QAAM,sBAAsB,QAAQ,MAAM;AACzC,QAAI,CAAC,KAAK;AACT;AAAA,IACD;AACA,WAAO,UAAU;AAAA,MAChB,YAAY;AAAA,MACZ;AAAA,MACA,OAAO,IAAI;AAAA,IACZ,CAAC;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,QAAM,yBAAyB,QAAQ,MAAM;AAC5C,QAAI,CAAC,QAAQ;AACZ;AAAA,IACD;AACA,WAAO,UAAU;AAAA,MAChB,YAAY;AAAA,MACZ;AAAA,MACA,OAAO,OAAO;AAAA,IACf,CAAC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,QACJ,YAAY;AAAA,UACX,GAAG;AAAA,UACH,MAAM,CAAC;AAAA,QACR;AAAA,QACA,kBAAkB;AAAA,QAClB,OAAO,IAAI;AAAA,MACZ;AAAA,MACA,QAAQ;AAAA,QACP,YAAY,EAAE,GAAG,QAAQ,MAAM,CAAC,EAAE;AAAA,QAClC,kBAAkB;AAAA,QAClB,OAAO,OAAO;AAAA,MACf;AAAA;AAAA,EACD;AAEF;AAEO,SAAS,YACf,OAOC;AACD,QAAM,QAAQ,MAAM,SAAS;AAC7B,QAAM,UAAU,MAAM;AACtB,QAAM,cAAc,OAAO;AAE3B,MAAI,CAAC,QAAQ,WAAW,GAAG;AAC1B,QAAI,YAAa,WAAW,GAAG;AAC9B,aAAO,oBAAC,qBAAkB,YAAY,KAAK,WAAW,GAAI;AAAA,IAC3D,OAAO;AACN,aAAO,oBAAC,qBAAkB,aAA2B;AAAA,IACtD;AAAA,EACD;AAEA,SACC,oBAAC,iBAAc,UAAQ,MAAC,OAAM,UAC7B,8BAAC,OAAG,mBAAQ,KAD+B,MAAM,IAAI,EAEtD;AAEF","sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\nimport type {\n\tScorecardDataSource,\n\tScorecardTableData,\n} from \"../../../schemas/config\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport { head, isEmpty } from \"lodash\";\nimport { useScorecardConfig } from \"../../ConfigProvider\";\nimport { useMemo } from \"react\";\nimport {\n\tgetLegend,\n\tgetTextColorFromBackgroundColor,\n} from \"../../../utils/legends\";\nimport { LinkedCell } from \"./LinkedCell\";\n\nexport function SingleAverageCell({\n\tdataSource,\n}: {\n\tdataSource: ScorecardDataSource & { average: number };\n}) {\n\tconst config = useScorecardConfig();\n\tconst legendDefinition = useMemo(() => {\n\t\tif (!dataSource) {\n\t\t\treturn;\n\t\t}\n\t\treturn getLegend({\n\t\t\tdataSource,\n\t\t\tconfig: config!,\n\t\t\tvalue: dataSource.average,\n\t\t});\n\t}, [dataSource]);\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tbordered\n\t\t\tstyle={{\n\t\t\t\tbackground: legendDefinition?.color,\n\t\t\t\ttextAlign: \"center\",\n\t\t\t\tminWidth: 100,\n\t\t\t\tcolor: legendDefinition\n\t\t\t\t\t? getTextColorFromBackgroundColor(legendDefinition?.color)\n\t\t\t\t\t: undefined,\n\t\t\t}}\n\t\t\talign=\"center\"\n\t\t>\n\t\t\t<b>{dataSource.average.toString()}</b>\n\t\t</DataTableCell>\n\t);\n}\n\nexport function LinkedAverageCell({\n\tdataSources,\n}: {\n\tdataSources: Array<ScorecardDataSource & { average: number }>;\n}) {\n\tconst [top, bottom] = dataSources ?? [];\n\tconst config = useScorecardConfig();\n\tconst topLegendDefinition = useMemo(() => {\n\t\tif (!top) {\n\t\t\treturn;\n\t\t}\n\t\treturn getLegend({\n\t\t\tdataSource: top,\n\t\t\tconfig: config!,\n\t\t\tvalue: top.average,\n\t\t});\n\t}, [top]);\n\tconst bottomLegendDefinition = useMemo(() => {\n\t\tif (!bottom) {\n\t\t\treturn;\n\t\t}\n\t\treturn getLegend({\n\t\t\tdataSource: bottom,\n\t\t\tconfig: config!,\n\t\t\tvalue: bottom.average,\n\t\t});\n\t}, [bottom]);\n\n\treturn (\n\t\t<LinkedCell\n\t\t\ttop={{\n\t\t\t\tdataSource: {\n\t\t\t\t\t...top,\n\t\t\t\t\tdata: {},\n\t\t\t\t},\n\t\t\t\tlegendDefinition: topLegendDefinition,\n\t\t\t\tvalue: top.average,\n\t\t\t}}\n\t\t\tbottom={{\n\t\t\t\tdataSource: { ...bottom, data: {} },\n\t\t\t\tlegendDefinition: bottomLegendDefinition,\n\t\t\t\tvalue: bottom.average,\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nexport function AverageCell(\n\tprops: CellContext<\n\t\tScorecardTableData,\n\t\tScorecardTableData & {\n\t\t\taverage: number;\n\t\t\tdataSources?: Array<ScorecardDataSource & { average: number }>;\n\t\t}\n\t>,\n) {\n\tconst value = props.getValue();\n\tconst average = value.average;\n\tconst dataSources = value?.dataSources;\n\n\tif (!isEmpty(dataSources)) {\n\t\tif (dataSources!.length === 1) {\n\t\t\treturn <SingleAverageCell dataSource={head(dataSources)!} />;\n\t\t} else {\n\t\t\treturn <LinkedAverageCell dataSources={dataSources!} />;\n\t\t}\n\t}\n\n\treturn (\n\t\t<DataTableCell bordered align=\"center\" key={props.row.id}>\n\t\t\t<b>{average}</b>\n\t\t</DataTableCell>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/AverageCell.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\nimport type {\n\tScorecardAverageCellData,\n\tScorecardTableAverageCellConfig,\n\tScorecardTableData,\n} from \"../../../schemas/config\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport { head, isEmpty } from \"lodash\";\nimport { useScorecardConfig } from \"../../ConfigProvider\";\nimport { useMemo } from \"react\";\nimport {\n\tgetLegend,\n\tgetTextColorFromBackgroundColor,\n} from \"../../../utils/legends\";\nimport { LinkedCell } from \"./LinkedCell\";\nimport {\n\tuseDataHolderAverageCellValue,\n\tuseOrgUnitAverageCellValue,\n} from \"../../../hooks/value\";\nimport { useScorecardStateSelector } from \"../../StateProvider\";\nimport { CellLoader } from \"./CellLoader\";\n\nexport function SingleAverageCell({\n\tdataSource,\n}: {\n\tdataSource: ScorecardAverageCellData;\n}) {\n\tconst config = useScorecardConfig();\n\tconst legendDefinition = useMemo(() => {\n\t\tif (!dataSource) {\n\t\t\treturn;\n\t\t}\n\t\treturn getLegend({\n\t\t\tdataSource,\n\t\t\tconfig: config!,\n\t\t\tvalue: dataSource.data.average,\n\t\t});\n\t}, [dataSource]);\n\n\tif (!dataSource.data.average || isNaN(dataSource.data.average)) {\n\t\treturn <DataTableCell bordered />;\n\t}\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tbordered\n\t\t\tstyle={{\n\t\t\t\tbackground: legendDefinition?.color,\n\t\t\t\ttextAlign: \"center\",\n\t\t\t\tminWidth: 100,\n\t\t\t\tcolor: legendDefinition\n\t\t\t\t\t? getTextColorFromBackgroundColor(legendDefinition?.color)\n\t\t\t\t\t: undefined,\n\t\t\t}}\n\t\t\talign=\"center\"\n\t\t>\n\t\t\t<b>{dataSource.data.average?.toFixed(2).toString()}</b>\n\t\t</DataTableCell>\n\t);\n}\n\nexport function LinkedAverageCell({\n\tdataSources,\n}: {\n\tdataSources: Array<ScorecardAverageCellData>;\n}) {\n\tconst [top, bottom] = dataSources ?? [];\n\tconst config = useScorecardConfig();\n\tconst topLegendDefinition = useMemo(() => {\n\t\tif (!top) {\n\t\t\treturn;\n\t\t}\n\t\treturn getLegend({\n\t\t\tdataSource: top,\n\t\t\tconfig: config!,\n\t\t\tvalue: top.data.average,\n\t\t});\n\t}, [top]);\n\tconst bottomLegendDefinition = useMemo(() => {\n\t\tif (!bottom) {\n\t\t\treturn;\n\t\t}\n\t\treturn getLegend({\n\t\t\tdataSource: bottom,\n\t\t\tconfig: config!,\n\t\t\tvalue: bottom.data.average,\n\t\t});\n\t}, [bottom]);\n\n\treturn (\n\t\t<LinkedCell\n\t\t\ttop={{\n\t\t\t\tdataSource: {\n\t\t\t\t\t...top,\n\t\t\t\t\tdata: {\n\t\t\t\t\t\tcurrent: top.data.average,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tlegendDefinition: topLegendDefinition,\n\t\t\t\tvalue: top.data.average,\n\t\t\t}}\n\t\t\tbottom={{\n\t\t\t\tdataSource: {\n\t\t\t\t\t...bottom,\n\t\t\t\t\tdata: {\n\t\t\t\t\t\tcurrent: bottom.data.average,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tlegendDefinition: bottomLegendDefinition,\n\t\t\t\tvalue: bottom.data.average,\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nfunction DataSourceAverageCell(\n\tprops: CellContext<ScorecardTableData, ScorecardTableAverageCellConfig>,\n) {\n\tconst dataConfig = useMemo(() => props.getValue(), [props.getValue()]);\n\tconst { cellData: dataSources, loading } =\n\t\tuseDataHolderAverageCellValue(dataConfig);\n\n\tif (loading) {\n\t\treturn <CellLoader />;\n\t}\n\n\tif (!isEmpty(dataSources)) {\n\t\tif (dataSources?.length === 1) {\n\t\t\treturn <SingleAverageCell dataSource={head(dataSources)!} />;\n\t\t} else {\n\t\t\treturn <LinkedAverageCell dataSources={dataSources!} />;\n\t\t}\n\t}\n\n\treturn <DataTableCell />;\n}\n\nfunction OrgUnitAverageCell(\n\tprops: CellContext<ScorecardTableData, ScorecardTableAverageCellConfig>,\n) {\n\tconst dataConfig = useMemo(() => props.getValue(), [props.getValue()]);\n\tconst { loading, average } = useOrgUnitAverageCellValue(dataConfig);\n\n\tif (loading) {\n\t\treturn <CellLoader />;\n\t}\n\n\treturn (\n\t\t<DataTableCell bordered align=\"center\" key={props.row.id}>\n\t\t\t<b>{average?.toFixed(2).toString()}</b>\n\t\t</DataTableCell>\n\t);\n}\n\nexport function AverageCell(\n\tprops: CellContext<ScorecardTableData, ScorecardTableAverageCellConfig>,\n) {\n\tconst showDataInRows = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\n\tif (showDataInRows) {\n\t\treturn <DataSourceAverageCell {...props} />;\n\t}\n\n\treturn <OrgUnitAverageCell {...props} />;\n}\n"]}

package/dist/components/Scorecard/components/ScorecardTable/components/AverageFooterCell.js

@@ -6,17 +6,48 @@ var MetaProvider = require('../../MetaProvider');
 var DataProvider = require('../../DataProvider');
 var react = require('react');
 var columns = require('../../../utils/columns');
+var CellLoader = require('./CellLoader');
 
 function AverageFooterCell({}) {
   const meta = MetaProvider.useScorecardMeta();
-  const { rawData } = DataProvider.useScorecardData();
-  const average = react.useMemo(() => {
-    return columns.getAverageValue({
-      dataValues: rawData,
-      meta
-    });
-  }, [rawData, meta]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableCell, { bordered: true, align: "center", children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: average }) });
+  const [loading, setLoading] = react.useState(false);
+  const [average, setAverage] = react.useState();
+  const { data: scorecardEngine } = DataProvider.useScorecardData();
+  react.useEffect(() => {
+    setLoading(true);
+    const listener = (data) => {
+      if (data === "done") {
+        setAverage(
+          columns.getAverageValue({
+            dataValues: scorecardEngine.data,
+            meta
+          })
+        );
+        setLoading(false);
+      }
+    };
+    if (scorecardEngine.isDone) {
+      setAverage(
+        columns.getAverageValue({
+          dataValues: scorecardEngine.data,
+          meta
+        })
+      );
+      setLoading(false);
+    } else {
+      scorecardEngine.addListener(listener);
+    }
+    return () => {
+      scorecardEngine.removeListener(listener);
+    };
+  }, []);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(CellLoader.CellLoader, {});
+  }
+  if (!average || isNaN(average)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableCell, { bordered: true });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableCell, { bordered: true, align: "center", children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: average?.toFixed(2).toString() }) });
 }
 
 exports.AverageFooterCell = AverageFooterCell;

package/dist/components/Scorecard/components/ScorecardTable/components/AverageFooterCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/AverageFooterCell.tsx"],"names":[],"mappings":"AAqBG;AArBH,SAAS,qBAAqB;AAG9B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAEzB,SAAS,kBAAkB,CAAC,GAA2C;AAC7E,QAAM,OAAO,iBAAiB;AAC9B,QAAM,EAAE,QAAQ,IAAI,iBAAiB;AAErC,QAAM,UAAU,QAAQ,MAAM;AAC7B,WAAO,gBAAgB;AAAA,MACtB,YAAY;AAAA,MACZ;AAAA,IACD,CAAC;AAAA,EACF,GAAG,CAAC,SAAS,IAAI,CAAC;AAElB,SACC,oBAAC,iBAAc,UAAQ,MAAC,OAAM,UAC7B,8BAAC,OAAG,mBAAQ,GACb;AAEF","sourcesContent":["import { DataTableCell } from \"@dhis2/ui\";\nimport type { HeaderContext } from \"@tanstack/react-table\";\nimport type { ScorecardTableData } from \"../../../schemas/config\";\nimport { useScorecardMeta } from \"../../MetaProvider\";\nimport { useScorecardData } from \"../../DataProvider\";\nimport { useMemo } from \"react\";\nimport { getAverageValue } from \"../../../utils/columns\";\n\nexport function AverageFooterCell({}: HeaderContext<ScorecardTableData, any>) {\n\tconst meta = useScorecardMeta();\n\tconst { rawData } = useScorecardData();\n\n\tconst average = useMemo(() => {\n\t\treturn getAverageValue({\n\t\t\tdataValues: rawData,\n\t\t\tmeta: meta!,\n\t\t});\n\t}, [rawData, meta]);\n\n\treturn (\n\t\t<DataTableCell bordered align=\"center\">\n\t\t\t<b>{average}</b>\n\t\t</DataTableCell>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/AverageFooterCell.tsx"],"names":[],"mappings":"AA8CS;AA9CT,SAAS,qBAAqB;AAG9B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,WAAW,gBAAgB;AAEpC,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAEpB,SAAS,kBAAkB,CAAC,GAA2C;AAC7E,QAAM,OAAO,iBAAiB;AAC9B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,KAAK;AACrD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAiB;AAC/C,QAAM,EAAE,MAAM,gBAAgB,IAAI,iBAAiB;AAEnD,YAAU,MAAM;AACf,eAAW,IAAI;AACf,UAAM,WAAW,CAAC,SAAmC;AACpD,UAAI,SAAS,QAAQ;AACpB;AAAA,UACC,gBAAgB;AAAA,YACf,YAAY,gBAAgB;AAAA,YAC5B;AAAA,UACD,CAAC;AAAA,QACF;AACA,mBAAW,KAAK;AAAA,MACjB;AAAA,IACD;AACA,QAAI,gBAAgB,QAAQ;AAC3B;AAAA,QACC,gBAAgB;AAAA,UACf,YAAY,gBAAgB;AAAA,UAC5B;AAAA,QACD,CAAC;AAAA,MACF;AACA,iBAAW,KAAK;AAAA,IACjB,OAAO;AACN,sBAAgB,YAAY,QAAQ;AAAA,IACrC;AACA,WAAO,MAAM;AACZ,sBAAgB,eAAe,QAAQ;AAAA,IACxC;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,MAAI,SAAS;AACZ,WAAO,oBAAC,cAAW;AAAA,EACpB;AAEA,MAAI,CAAC,WAAW,MAAM,OAAO,GAAG;AAC/B,WAAO,oBAAC,iBAAc,UAAQ,MAAC;AAAA,EAChC;AAEA,SACC,oBAAC,iBAAc,UAAQ,MAAC,OAAM,UAC7B,8BAAC,OAAG,mBAAS,QAAQ,CAAC,EAAE,SAAS,GAAE,GACpC;AAEF","sourcesContent":["import { DataTableCell } from \"@dhis2/ui\";\nimport type { HeaderContext } from \"@tanstack/react-table\";\nimport type { ScorecardTableData } from \"../../../schemas/config\";\nimport { useScorecardMeta } from \"../../MetaProvider\";\nimport { useScorecardData } from \"../../DataProvider\";\nimport { useEffect, useState } from \"react\";\nimport type { AnalyticsData } from \"../../../utils/data\";\nimport { getAverageValue } from \"../../../utils/columns\";\nimport { CellLoader } from \"./CellLoader\";\n\nexport function AverageFooterCell({}: HeaderContext<ScorecardTableData, any>) {\n\tconst meta = useScorecardMeta();\n\tconst [loading, setLoading] = useState<boolean>(false);\n\tconst [average, setAverage] = useState<number>();\n\tconst { data: scorecardEngine } = useScorecardData();\n\n\tuseEffect(() => {\n\t\tsetLoading(true);\n\t\tconst listener = (data: AnalyticsData[] | \"done\") => {\n\t\t\tif (data === \"done\") {\n\t\t\t\tsetAverage(\n\t\t\t\t\tgetAverageValue({\n\t\t\t\t\t\tdataValues: scorecardEngine.data,\n\t\t\t\t\t\tmeta: meta!,\n\t\t\t\t\t}),\n\t\t\t\t);\n\t\t\t\tsetLoading(false);\n\t\t\t}\n\t\t};\n\t\tif (scorecardEngine.isDone) {\n\t\t\tsetAverage(\n\t\t\t\tgetAverageValue({\n\t\t\t\t\tdataValues: scorecardEngine.data,\n\t\t\t\t\tmeta: meta!,\n\t\t\t\t}),\n\t\t\t);\n\t\t\tsetLoading(false);\n\t\t} else {\n\t\t\tscorecardEngine.addListener(listener);\n\t\t}\n\t\treturn () => {\n\t\t\tscorecardEngine.removeListener(listener);\n\t\t};\n\t}, []);\n\n\tif (loading) {\n\t\treturn <CellLoader />;\n\t}\n\n\tif (!average || isNaN(average)) {\n\t\treturn <DataTableCell bordered />;\n\t}\n\n\treturn (\n\t\t<DataTableCell bordered align=\"center\">\n\t\t\t<b>{average?.toFixed(2).toString()}</b>\n\t\t</DataTableCell>\n\t);\n}\n"]}

package/dist/components/Scorecard/components/ScorecardTable/components/CellLoader.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ui = require('@dhis2/ui');
+
+function CellLoader() {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableCell, { align: "center", bordered: true });
+}
+
+exports.CellLoader = CellLoader;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=CellLoader.js.map

package/dist/components/Scorecard/components/ScorecardTable/components/CellLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/CellLoader.tsx"],"names":[],"mappings":"AAGQ;AAHR,SAAS,qBAAqB;AAEvB,SAAS,aAAa;AAC5B,SAAO,oBAAC,iBAAc,OAAM,UAAS,UAAQ,MAAC;AAC/C","sourcesContent":["import { DataTableCell } from \"@dhis2/ui\";\n\nexport function CellLoader() {\n\treturn <DataTableCell align=\"center\" bordered />;\n}\n"]}

package/dist/components/Scorecard/components/ScorecardTable/components/DataContainer.js

@@ -7,18 +7,38 @@ var SingleDataCell = require('./SingleDataCell');
 var LinkedDataCell = require('./LinkedDataCell');
 var ui = require('@dhis2/ui');
 var react = require('react');
+var value = require('../../../hooks/value');
+var CellLoader = require('./CellLoader');
 
 function DataContainerComponent(props) {
-  const data = props.getValue();
+  const dataConfig = react.useMemo(() => props.getValue(), [props.getValue()]);
   const config = ConfigProvider.useScorecardConfig();
   const meta = MetaProvider.useScorecardMeta();
+  const { loading, cellData } = value.useCellValue(props.getValue());
   if (!config || !meta) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableCell, {});
   }
-  if (data.dataSources.length === 1) {
-    return /* @__PURE__ */ jsxRuntime.jsx(SingleDataCell.SingleDataCell, { ...data });
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(CellLoader.CellLoader, {});
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(LinkedDataCell.LinkedDataCell, { ...data });
+  if (cellData?.length === 1) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SingleDataCell.SingleDataCell,
+      {
+        ...dataConfig,
+        period: dataConfig.currentPeriod,
+        dataSources: cellData
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LinkedDataCell.LinkedDataCell,
+    {
+      ...dataConfig,
+      period: dataConfig.currentPeriod,
+      dataSources: cellData
+    }
+  );
 }
 const DataContainer = react.memo(DataContainerComponent);
 

package/dist/components/Scorecard/components/ScorecardTable/components/DataContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/DataContainer.tsx"],"names":[],"mappings":"AAoBS;AAhBT,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAE/B,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AAErB,SAAS,uBACR,OACC;AACD,QAAM,OAAO,MAAM,SAAS;AAC5B,QAAM,SAAS,mBAAmB;AAClC,QAAM,OAAO,iBAAiB;AAE9B,MAAI,CAAC,UAAU,CAAC,MAAM;AACrB,WAAO,oBAAC,iBAAc;AAAA,EACvB;AACA,MAAI,KAAK,YAAY,WAAW,GAAG;AAClC,WAAO,oBAAC,kBAAgB,GAAG,MAAM;AAAA,EAClC;AAEA,SAAO,oBAAC,kBAAgB,GAAG,MAAM;AAClC;AAEO,MAAM,gBAAgB,KAAK,sBAAsB","sourcesContent":["import type {\n\tScorecardTableCellData,\n\tScorecardTableData,\n} from \"../../../schemas/config\";\nimport { useScorecardConfig } from \"../../ConfigProvider\";\nimport { useScorecardMeta } from \"../../MetaProvider\";\nimport { SingleDataCell } from \"./SingleDataCell\";\nimport { LinkedDataCell } from \"./LinkedDataCell\";\nimport type { CellContext } from \"@tanstack/react-table\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport { memo } from \"react\";\n\nfunction DataContainerComponent(\n\tprops: CellContext<ScorecardTableData, ScorecardTableCellData>,\n) {\n\tconst data = props.getValue();\n\tconst config = useScorecardConfig();\n\tconst meta = useScorecardMeta();\n\n\tif (!config || !meta) {\n\t\treturn <DataTableCell />;\n\t}\n\tif (data.dataSources.length === 1) {\n\t\treturn <SingleDataCell {...data} />;\n\t}\n\n\treturn <LinkedDataCell {...data} />;\n}\n\nexport const DataContainer = memo(DataContainerComponent);\n"]}
+{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/DataContainer.tsx"],"names":[],"mappings":"AAuBS;AAnBT,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAE/B,SAAS,qBAAqB;AAC9B,SAAS,MAAM,eAAe;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAE3B,SAAS,uBACR,OACC;AACD,QAAM,aAAa,QAAQ,MAAM,MAAM,SAAS,GAAG,CAAC,MAAM,SAAS,CAAC,CAAC;AACrE,QAAM,SAAS,mBAAmB;AAClC,QAAM,OAAO,iBAAiB;AAC9B,QAAM,EAAE,SAAS,SAAS,IAAI,aAAa,MAAM,SAAS,CAAC;AAE3D,MAAI,CAAC,UAAU,CAAC,MAAM;AACrB,WAAO,oBAAC,iBAAc;AAAA,EACvB;AAEA,MAAI,SAAS;AACZ,WAAO,oBAAC,cAAW;AAAA,EACpB;AAEA,MAAI,UAAU,WAAW,GAAG;AAC3B,WACC;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACJ,QAAQ,WAAW;AAAA,QACnB,aAAa;AAAA;AAAA,IACd;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,QAAQ,WAAW;AAAA,MACnB,aAAa;AAAA;AAAA,EACd;AAEF;AAEO,MAAM,gBAAgB,KAAK,sBAAsB","sourcesContent":["import type {\n\tScorecardTableCellConfig,\n\tScorecardTableData,\n} from \"../../../schemas/config\";\nimport { useScorecardConfig } from \"../../ConfigProvider\";\nimport { useScorecardMeta } from \"../../MetaProvider\";\nimport { SingleDataCell } from \"./SingleDataCell\";\nimport { LinkedDataCell } from \"./LinkedDataCell\";\nimport type { CellContext } from \"@tanstack/react-table\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport { memo, useMemo } from \"react\";\nimport { useCellValue } from \"../../../hooks/value\";\nimport { CellLoader } from \"./CellLoader\";\n\nfunction DataContainerComponent(\n\tprops: CellContext<ScorecardTableData, ScorecardTableCellConfig>,\n) {\n\tconst dataConfig = useMemo(() => props.getValue(), [props.getValue()]);\n\tconst config = useScorecardConfig();\n\tconst meta = useScorecardMeta();\n\tconst { loading, cellData } = useCellValue(props.getValue());\n\n\tif (!config || !meta) {\n\t\treturn <DataTableCell />;\n\t}\n\n\tif (loading) {\n\t\treturn <CellLoader />;\n\t}\n\n\tif (cellData?.length === 1) {\n\t\treturn (\n\t\t\t<SingleDataCell\n\t\t\t\t{...dataConfig}\n\t\t\t\tperiod={dataConfig.currentPeriod!}\n\t\t\t\tdataSources={cellData}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<LinkedDataCell\n\t\t\t{...dataConfig}\n\t\t\tperiod={dataConfig.currentPeriod!}\n\t\t\tdataSources={cellData}\n\t\t/>\n\t);\n}\n\nexport const DataContainer = memo(DataContainerComponent);\n"]}