@hisptz/dhis2-analytics 2.0.32 → 2.0.33

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

@@ -1,46 +1,139 @@
 import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { head } from 'lodash';
-import { useScorecardState } from '../../StateProvider';
-import { SingleDataFooterCell } from './SingleDataFooterCell';
-import { LinkedDataFooterCell } from './LinkedDataFooterCell';
+import { useMemo, useState, useEffect } from 'react';
+import { useScorecardStateSelector } from '../../StateProvider';
 import { DataTableCell } from '@dhis2/ui';
+import { useScorecardData } from '../../DataProvider';
+import { isEmpty, head, meanBy } from 'lodash';
+import { CellLoader } from './CellLoader';
+import { SingleAverageCell, LinkedAverageCell } from './AverageCell';
 
-function DataFooterCell({
-  table,
-  column,
-  header
+function getOrgUnitAverage({
+  dataSourcesConfig,
+  data
 }) {
-  const state = useScorecardState();
-  const dataSources = useMemo(() => {
-    const dataValue = head(table.getRowModel().rows)?.getValue(
-      column.id
+  const dataSourceConfig = head(dataSourcesConfig);
+  return dataSourceConfig.dataSources?.map((config) => {
+    const period = dataSourceConfig.currentPeriod;
+    const dataValues = data.filter(
+      (datum) => datum.pe === period && datum.dx === config.id
     );
-    return dataValue.dataSources;
-  }, [state, table.getRowModel().rows]);
-  if (dataSources?.length === 1 || state?.options?.showDataInRows) {
-    return /* @__PURE__ */ jsx(
-      SingleDataFooterCell,
-      {
-        header,
-        column,
-        table,
-        dataSource: head(dataSources)
+    const average = meanBy(dataValues, (value) => parseFloat(value.value));
+    return {
+      ...config,
+      data: {
+        average
       }
-    );
+    };
+  });
+}
+function OrgUnitFooterCell({
+  dataSourcesConfig
+}) {
+  const { data: scorecardEngine } = useScorecardData();
+  const [loading, setLoading] = useState(false);
+  const [averageValues, setAverageValues] = useState();
+  useEffect(() => {
+    setLoading(true);
+    const listener = (data) => {
+      if (data === "done") {
+        setAverageValues(
+          getOrgUnitAverage({
+            dataSourcesConfig,
+            data: scorecardEngine.data
+          })
+        );
+        setLoading(false);
+      }
+    };
+    if (scorecardEngine.isDone) {
+      setAverageValues(
+        getOrgUnitAverage({
+          dataSourcesConfig,
+          data: scorecardEngine.data
+        })
+      );
+      setLoading(false);
+    } else {
+      scorecardEngine.addListener(listener);
+    }
+    return () => {
+      scorecardEngine.removeListener(listener);
+    };
+  }, [dataSourcesConfig]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(CellLoader, {});
   }
-  if (!dataSources) {
-    return /* @__PURE__ */ jsx(DataTableCell, {});
+  if (isEmpty(averageValues)) {
+    return /* @__PURE__ */ jsx(DataTableCell, { bordered: true });
   }
-  return /* @__PURE__ */ jsx(
-    LinkedDataFooterCell,
-    {
-      column,
-      header,
-      table,
-      dataSources
+  if (averageValues?.length === 1) {
+    return /* @__PURE__ */ jsx(SingleAverageCell, { dataSource: head(averageValues) });
+  } else {
+    return /* @__PURE__ */ jsx(LinkedAverageCell, { dataSources: averageValues });
+  }
+}
+function DataHolderFooterCell({
+  dataSourcesConfig
+}) {
+  const { data: scorecardEngine } = useScorecardData();
+  const [loading, setLoading] = useState(false);
+  const [average, setAverage] = useState();
+  useEffect(() => {
+    setLoading(true);
+    const listener = (data) => {
+      if (data === "done") {
+        setLoading(false);
+        const orgUnitId = head(dataSourcesConfig);
+        const dataValues = scorecardEngine.data.filter(
+          (datum) => datum.ou === orgUnitId.orgUnit.uid
+        );
+        const average2 = meanBy(
+          dataValues,
+          (value) => parseFloat(value.value)
+        );
+        setAverage(average2);
+      }
+    };
+    if (scorecardEngine.isDone) {
+      const orgUnitId = head(dataSourcesConfig);
+      const dataValues = scorecardEngine.data.filter(
+        (datum) => datum.ou === orgUnitId.orgUnit.uid
+      );
+      const average2 = meanBy(
+        dataValues,
+        (value) => parseFloat(value.value)
+      );
+      setAverage(average2);
+      setLoading(false);
+    } else {
+      scorecardEngine.addListener(listener);
     }
-  );
+    return () => {
+      scorecardEngine.removeListener(listener);
+    };
+  }, [dataSourcesConfig]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(CellLoader, {});
+  }
+  return /* @__PURE__ */ jsx(DataTableCell, { bordered: true, align: "center", children: /* @__PURE__ */ jsx("b", { children: average?.toFixed(2).toString() }) });
+}
+function DataFooterCell({
+  table,
+  column
+}) {
+  const showDataInRows = useScorecardStateSelector([
+    "options",
+    "showDataInRows"
+  ]);
+  const dataSourceConfig = useMemo(() => {
+    return table.getRowModel().rows.map(
+      (row) => row.getValue(column.id)
+    );
+  }, [table.getRowModel().rows]);
+  if (showDataInRows) {
+    return /* @__PURE__ */ jsx(DataHolderFooterCell, { dataSourcesConfig: dataSourceConfig });
+  }
+  return /* @__PURE__ */ jsx(OrgUnitFooterCell, { dataSourcesConfig: dataSourceConfig });
 }
 
 export { DataFooterCell };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/DataFooterCell.tsx"],"names":[],"mappings":"AA4BG;AAvBH,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAEvB,SAAS,eAAe;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACD,GAA8D;AAC7D,QAAM,QAAQ,kBAAkB;AAChC,QAAM,cAAc,QAAQ,MAAM;AACjC,UAAM,YAAY,KAAK,MAAM,YAAY,EAAE,IAAI,GAAG;AAAA,MACjD,OAAO;AAAA,IACR;AAEA,WAAO,UAAU;AAAA,EAClB,GAAG,CAAC,OAAO,MAAM,YAAY,EAAE,IAAI,CAAC;AAEpC,MAAI,aAAa,WAAW,KAAK,OAAO,SAAS,gBAAgB;AAChE,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY,KAAK,WAAW;AAAA;AAAA,IAC7B;AAAA,EAEF;AAEA,MAAI,CAAC,aAAa;AACjB,WAAO,oBAAC,iBAAc;AAAA,EACvB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAEF","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport type {\n\tScorecardTableCellData,\n\tScorecardTableData,\n} from \"../../../schemas/config\";\nimport { useMemo } from \"react\";\nimport { head } from \"lodash\";\nimport { useScorecardState } from \"../../StateProvider\";\nimport { SingleDataFooterCell } from \"./SingleDataFooterCell\";\nimport { LinkedDataFooterCell } from \"./LinkedDataFooterCell\";\nimport { DataTableCell } from \"@dhis2/ui\";\n\nexport function DataFooterCell({\n\ttable,\n\tcolumn,\n\theader,\n}: HeaderContext<ScorecardTableData, ScorecardTableCellData>) {\n\tconst state = useScorecardState();\n\tconst dataSources = useMemo(() => {\n\t\tconst dataValue = head(table.getRowModel().rows)?.getValue(\n\t\t\tcolumn.id,\n\t\t) as ScorecardTableCellData;\n\n\t\treturn dataValue.dataSources;\n\t}, [state, table.getRowModel().rows]);\n\n\tif (dataSources?.length === 1 || state?.options?.showDataInRows) {\n\t\treturn (\n\t\t\t<SingleDataFooterCell\n\t\t\t\theader={header}\n\t\t\t\tcolumn={column}\n\t\t\t\ttable={table}\n\t\t\t\tdataSource={head(dataSources)!}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (!dataSources) {\n\t\treturn <DataTableCell />;\n\t}\n\n\treturn (\n\t\t<LinkedDataFooterCell\n\t\t\tcolumn={column}\n\t\t\theader={header}\n\t\t\ttable={table}\n\t\t\tdataSources={dataSources}\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/DataFooterCell.tsx"],"names":["average"],"mappings":"AAiFS;AA3ET,SAAS,WAAW,SAAS,gBAAgB;AAC7C,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB;AAE9B,SAAS,wBAAwB;AACjC,SAAS,MAAM,SAAS,cAAc;AACtC,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB,yBAAyB;AAErD,SAAS,kBAAkB;AAAA,EAC1B;AAAA,EACA;AACD,GAG+B;AAC9B,QAAM,mBAAmB,KAAK,iBAAiB;AAE/C,SAAO,iBAAiB,aAAa,IAAI,CAAC,WAAW;AACpD,UAAM,SAAS,iBAAiB;AAChC,UAAM,aAAa,KAAK;AAAA,MACvB,CAAC,UAAU,MAAM,OAAO,UAAU,MAAM,OAAO,OAAO;AAAA,IACvD;AACA,UAAM,UAAU,OAAO,YAAY,CAAC,UAAU,WAAW,MAAM,KAAM,CAAC;AAEtE,WAAO;AAAA,MACN,GAAG;AAAA,MACH,MAAM;AAAA,QACL;AAAA,MACD;AAAA,IACD;AAAA,EACD,CAAC;AACF;AAEA,SAAS,kBAAkB;AAAA,EAC1B;AACD,GAEG;AACF,QAAM,EAAE,MAAM,gBAAgB,IAAI,iBAAiB;AACnD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,KAAK;AACrD,QAAM,CAAC,eAAe,gBAAgB,IACrC,SAAqC;AAEtC,YAAU,MAAM;AACf,eAAW,IAAI;AACf,UAAM,WAAW,CAAC,SAAmC;AACpD,UAAI,SAAS,QAAQ;AACpB;AAAA,UACC,kBAAkB;AAAA,YACjB;AAAA,YACA,MAAM,gBAAgB;AAAA,UACvB,CAAC;AAAA,QACF;AACA,mBAAW,KAAK;AAAA,MACjB;AAAA,IACD;AACA,QAAI,gBAAgB,QAAQ;AAC3B;AAAA,QACC,kBAAkB;AAAA,UACjB;AAAA,UACA,MAAM,gBAAgB;AAAA,QACvB,CAAC;AAAA,MACF;AACA,iBAAW,KAAK;AAAA,IACjB,OAAO;AACN,sBAAgB,YAAY,QAAQ;AAAA,IACrC;AAEA,WAAO,MAAM;AACZ,sBAAgB,eAAe,QAAQ;AAAA,IACxC;AAAA,EACD,GAAG,CAAC,iBAAiB,CAAC;AAEtB,MAAI,SAAS;AACZ,WAAO,oBAAC,cAAW;AAAA,EACpB;AAEA,MAAI,QAAQ,aAAa,GAAG;AAC3B,WAAO,oBAAC,iBAAc,UAAQ,MAAC;AAAA,EAChC;AAEA,MAAI,eAAe,WAAW,GAAG;AAChC,WAAO,oBAAC,qBAAkB,YAAY,KAAK,aAAa,GAAI;AAAA,EAC7D,OAAO;AACN,WAAO,oBAAC,qBAAkB,aAAa,eAAgB;AAAA,EACxD;AACD;AAEA,SAAS,qBAAqB;AAAA,EAC7B;AACD,GAEG;AACF,QAAM,EAAE,MAAM,gBAAgB,IAAI,iBAAiB;AACnD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,KAAK;AACrD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAiB;AAE/C,YAAU,MAAM;AACf,eAAW,IAAI;AACf,UAAM,WAAW,CAAC,SAAmC;AACpD,UAAI,SAAS,QAAQ;AACpB,mBAAW,KAAK;AAChB,cAAM,YAAY,KAAK,iBAAiB;AACxC,cAAM,aAAa,gBAAgB,KAAK;AAAA,UACvC,CAAC,UAAU,MAAM,OAAO,UAAU,QAAQ;AAAA,QAC3C;AACA,cAAMA,WAAU;AAAA,UAAO;AAAA,UAAY,CAAC,UACnC,WAAW,MAAM,KAAM;AAAA,QACxB;AACA,mBAAWA,QAAO;AAAA,MACnB;AAAA,IACD;AACA,QAAI,gBAAgB,QAAQ;AAC3B,YAAM,YAAY,KAAK,iBAAiB;AACxC,YAAM,aAAa,gBAAgB,KAAK;AAAA,QACvC,CAAC,UAAU,MAAM,OAAO,UAAU,QAAQ;AAAA,MAC3C;AACA,YAAMA,WAAU;AAAA,QAAO;AAAA,QAAY,CAAC,UACnC,WAAW,MAAM,KAAM;AAAA,MACxB;AACA,iBAAWA,QAAO;AAClB,iBAAW,KAAK;AAAA,IACjB,OAAO;AACN,sBAAgB,YAAY,QAAQ;AAAA,IACrC;AAEA,WAAO,MAAM;AACZ,sBAAgB,eAAe,QAAQ;AAAA,IACxC;AAAA,EACD,GAAG,CAAC,iBAAiB,CAAC;AAEtB,MAAI,SAAS;AACZ,WAAO,oBAAC,cAAW;AAAA,EACpB;AACA,SACC,oBAAC,iBAAc,UAAQ,MAAC,OAAM,UAC7B,8BAAC,OAAG,mBAAS,QAAQ,CAAC,EAAE,SAAS,GAAE,GACpC;AAEF;AAEO,SAAS,eAAe;AAAA,EAC9B;AAAA,EACA;AACD,GAAgE;AAC/D,QAAM,iBAAiB,0BAAmC;AAAA,IACzD;AAAA,IACA;AAAA,EACD,CAAC;AACD,QAAM,mBAAmB,QAAQ,MAAM;AACtC,WAAO,MACL,YAAY,EACZ,KAAK;AAAA,MAAI,CAAC,QACV,IAAI,SAAS,OAAO,EAAE;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,MAAM,YAAY,EAAE,IAAI,CAAC;AAE7B,MAAI,gBAAgB;AACnB,WAAO,oBAAC,wBAAqB,mBAAmB,kBAAkB;AAAA,EACnE;AAEA,SAAO,oBAAC,qBAAkB,mBAAmB,kBAAkB;AAChE","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport type {\n\tScorecardAverageCellData,\n\tScorecardTableCellConfig,\n\tScorecardTableData,\n} from \"../../../schemas/config\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useScorecardStateSelector } from \"../../StateProvider\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport type { AnalyticsData } from \"../../../utils/data\";\nimport { useScorecardData } from \"../../DataProvider\";\nimport { head, isEmpty, meanBy } from \"lodash\";\nimport { CellLoader } from \"./CellLoader\";\nimport { LinkedAverageCell, SingleAverageCell } from \"./AverageCell\";\n\nfunction getOrgUnitAverage({\n\tdataSourcesConfig,\n\tdata,\n}: {\n\tdataSourcesConfig: ScorecardTableCellConfig[];\n\tdata: AnalyticsData[];\n}): ScorecardAverageCellData[] {\n\tconst dataSourceConfig = head(dataSourcesConfig)!;\n\n\treturn dataSourceConfig.dataSources?.map((config) => {\n\t\tconst period = dataSourceConfig.currentPeriod!;\n\t\tconst dataValues = data.filter(\n\t\t\t(datum) => datum.pe === period && datum.dx === config.id,\n\t\t);\n\t\tconst average = meanBy(dataValues, (value) => parseFloat(value.value!));\n\n\t\treturn {\n\t\t\t...config,\n\t\t\tdata: {\n\t\t\t\taverage,\n\t\t\t},\n\t\t};\n\t});\n}\n\nfunction OrgUnitFooterCell({\n\tdataSourcesConfig,\n}: {\n\tdataSourcesConfig: ScorecardTableCellConfig[];\n}) {\n\tconst { data: scorecardEngine } = useScorecardData();\n\tconst [loading, setLoading] = useState<boolean>(false);\n\tconst [averageValues, setAverageValues] =\n\t\tuseState<ScorecardAverageCellData[]>();\n\n\tuseEffect(() => {\n\t\tsetLoading(true);\n\t\tconst listener = (data: AnalyticsData[] | \"done\") => {\n\t\t\tif (data === \"done\") {\n\t\t\t\tsetAverageValues(\n\t\t\t\t\tgetOrgUnitAverage({\n\t\t\t\t\t\tdataSourcesConfig,\n\t\t\t\t\t\tdata: scorecardEngine.data,\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\tsetAverageValues(\n\t\t\t\tgetOrgUnitAverage({\n\t\t\t\t\tdataSourcesConfig,\n\t\t\t\t\tdata: scorecardEngine.data,\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\n\t\treturn () => {\n\t\t\tscorecardEngine.removeListener(listener);\n\t\t};\n\t}, [dataSourcesConfig]);\n\n\tif (loading) {\n\t\treturn <CellLoader />;\n\t}\n\n\tif (isEmpty(averageValues)) {\n\t\treturn <DataTableCell bordered />;\n\t}\n\n\tif (averageValues?.length === 1) {\n\t\treturn <SingleAverageCell dataSource={head(averageValues)!} />;\n\t} else {\n\t\treturn <LinkedAverageCell dataSources={averageValues!} />;\n\t}\n}\n\nfunction DataHolderFooterCell({\n\tdataSourcesConfig,\n}: {\n\tdataSourcesConfig: ScorecardTableCellConfig[];\n}) {\n\tconst { data: scorecardEngine } = useScorecardData();\n\tconst [loading, setLoading] = useState<boolean>(false);\n\tconst [average, setAverage] = useState<number>();\n\n\tuseEffect(() => {\n\t\tsetLoading(true);\n\t\tconst listener = (data: AnalyticsData[] | \"done\") => {\n\t\t\tif (data === \"done\") {\n\t\t\t\tsetLoading(false);\n\t\t\t\tconst orgUnitId = head(dataSourcesConfig)!;\n\t\t\t\tconst dataValues = scorecardEngine.data.filter(\n\t\t\t\t\t(datum) => datum.ou === orgUnitId.orgUnit.uid,\n\t\t\t\t);\n\t\t\t\tconst average = meanBy(dataValues, (value) =>\n\t\t\t\t\tparseFloat(value.value!),\n\t\t\t\t);\n\t\t\t\tsetAverage(average);\n\t\t\t}\n\t\t};\n\t\tif (scorecardEngine.isDone) {\n\t\t\tconst orgUnitId = head(dataSourcesConfig)!;\n\t\t\tconst dataValues = scorecardEngine.data.filter(\n\t\t\t\t(datum) => datum.ou === orgUnitId.orgUnit.uid,\n\t\t\t);\n\t\t\tconst average = meanBy(dataValues, (value) =>\n\t\t\t\tparseFloat(value.value!),\n\t\t\t);\n\t\t\tsetAverage(average);\n\t\t\tsetLoading(false);\n\t\t} else {\n\t\t\tscorecardEngine.addListener(listener);\n\t\t}\n\n\t\treturn () => {\n\t\t\tscorecardEngine.removeListener(listener);\n\t\t};\n\t}, [dataSourcesConfig]);\n\n\tif (loading) {\n\t\treturn <CellLoader />;\n\t}\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\nexport function DataFooterCell({\n\ttable,\n\tcolumn,\n}: HeaderContext<ScorecardTableData, ScorecardTableCellConfig>) {\n\tconst showDataInRows = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\tconst dataSourceConfig = useMemo(() => {\n\t\treturn table\n\t\t\t.getRowModel()\n\t\t\t.rows.map((row) =>\n\t\t\t\trow.getValue(column.id),\n\t\t\t) as ScorecardTableCellConfig[];\n\t}, [table.getRowModel().rows]);\n\n\tif (showDataInRows) {\n\t\treturn <DataHolderFooterCell dataSourcesConfig={dataSourceConfig} />;\n\t}\n\n\treturn <OrgUnitFooterCell dataSourcesConfig={dataSourceConfig} />;\n}\n"]}

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

@@ -4,9 +4,10 @@ import { head } from 'lodash';
 import { DataTableRow } from '@dhis2/ui';
 import styles from '../ScorecardTable.module.css';
 import { ExpandedScorecardTable } from './ExpandedScorecardTable';
-import { useMemo } from 'react';
+import { useTransition, useMemo, Fragment } from 'react';
 
 function TableRowComponent({ row }) {
+  const [isPending, startTransition] = useTransition();
   const orgUnit = useMemo(() => {
     const dataCell = row.getVisibleCells().find((cell) => {
       const data = cell.getValue();
@@ -18,20 +19,29 @@ function TableRowComponent({ row }) {
     const expandCell = head(row.getVisibleCells());
     return expandCell?.getValue() ?? false;
   }, [row]);
+  const canExpand = orgUnit && shouldExpand;
   return /* @__PURE__ */ jsx(
     DataTableRow,
     {
       className: styles.expandCell,
-      onExpandToggle: ({ expanded }) => {
-        row.toggleExpanded(expanded);
-      },
-      expandableContent: orgUnit && shouldExpand ? /* @__PURE__ */ jsx(ExpandedScorecardTable, { orgUnit }) : null,
-      expanded: row.getIsExpanded(),
+      onExpandToggle: canExpand ? ({ expanded }) => {
+        startTransition(() => {
+          row.toggleExpanded(expanded);
+        });
+      } : void 0,
+      expandableContent: orgUnit && shouldExpand ? /* @__PURE__ */ jsx(
+        ExpandedScorecardTable,
+        {
+          pending: isPending,
+          orgUnit
+        }
+      ) : void 0,
+      expanded: canExpand && row.getIsExpanded(),
       children: row.getVisibleCells().map((cell) => {
-        return flexRender(
+        return /* @__PURE__ */ jsx(Fragment, { children: flexRender(
           cell.column.columnDef.cell,
           cell.getContext()
-        );
+        ) }, cell.id);
       })
     },
     row.id

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/DataRow.tsx"],"names":[],"mappings":"AAiCK;AAjCL,SAAS,kBAA4B;AAKrC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,OAAO,YAAY;AACnB,SAAS,8BAA8B;AACvC,SAAS,eAAe;AAExB,SAAS,kBAAkB,EAAE,IAAI,GAAqC;AACrE,QAAM,UAAU,QAAQ,MAAM;AAC7B,UAAM,WAAW,IAAI,gBAAgB,EAAE,KAAK,CAAC,SAAS;AACrD,YAAM,OAAO,KAAK,SAAS;AAC3B,aAAO,CAAC,CAAC,MAAM;AAAA,IAChB,CAAC;AACD,WAAQ,UAAU,SAAS,GAA8B;AAAA,EAC1D,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,eAAe,QAAQ,MAAM;AAClC,UAAM,aAAa,KAAK,IAAI,gBAAgB,CAAC;AAC7C,WAAQ,YAAY,SAAS,KAAiB;AAAA,EAC/C,GAAG,CAAC,GAAG,CAAC;AAER,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,gBAAgB,CAAC,EAAE,SAAS,MAAM;AACjC,YAAI,eAAe,QAAQ;AAAA,MAC5B;AAAA,MACA,mBACC,WAAW,eACV,oBAAC,0BAAuB,SAAkB,IACvC;AAAA,MAEL,UAAU,IAAI,cAAc;AAAA,MAG3B,cAAI,gBAAgB,EAAE,IAAI,CAAC,SAAS;AACpC,eAAO;AAAA,UACN,KAAK,OAAO,UAAU;AAAA,UACtB,KAAK,WAAW;AAAA,QACjB;AAAA,MACD,CAAC;AAAA;AAAA,IAPI,IAAI;AAAA,EAQV;AAEF;AAEO,MAAM,WAAW","sourcesContent":["import { flexRender, type Row } from \"@tanstack/react-table\";\nimport type {\n\tScorecardTableCellData,\n\tScorecardTableData,\n} from \"../../../schemas/config\";\nimport { head } from \"lodash\";\nimport { DataTableRow } from \"@dhis2/ui\";\nimport styles from \"../ScorecardTable.module.css\";\nimport { ExpandedScorecardTable } from \"./ExpandedScorecardTable\";\nimport { useMemo } from \"react\";\n\nfunction TableRowComponent({ row }: { row: Row<ScorecardTableData> }) {\n\tconst orgUnit = useMemo(() => {\n\t\tconst dataCell = row.getVisibleCells().find((cell) => {\n\t\t\tconst data = cell.getValue() as ScorecardTableCellData;\n\t\t\treturn !!data?.orgUnit;\n\t\t});\n\t\treturn (dataCell?.getValue() as ScorecardTableCellData)?.orgUnit;\n\t}, [row]);\n\n\tconst shouldExpand = useMemo(() => {\n\t\tconst expandCell = head(row.getVisibleCells());\n\t\treturn (expandCell?.getValue() as boolean) ?? false;\n\t}, [row]);\n\n\treturn (\n\t\t<DataTableRow\n\t\t\tclassName={styles.expandCell}\n\t\t\tonExpandToggle={({ expanded }) => {\n\t\t\t\trow.toggleExpanded(expanded);\n\t\t\t}}\n\t\t\texpandableContent={\n\t\t\t\torgUnit && shouldExpand ? (\n\t\t\t\t\t<ExpandedScorecardTable orgUnit={orgUnit} />\n\t\t\t\t) : null\n\t\t\t}\n\t\t\texpanded={row.getIsExpanded()}\n\t\t\tkey={row.id}\n\t\t>\n\t\t\t{row.getVisibleCells().map((cell) => {\n\t\t\t\treturn flexRender(\n\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\tcell.getContext(),\n\t\t\t\t);\n\t\t\t})}\n\t\t</DataTableRow>\n\t);\n}\n\nexport const TableRow = TableRowComponent;\n"]}
+{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/DataRow.tsx"],"names":[],"mappings":"AA0CK;AA1CL,SAAS,kBAA4B;AAKrC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,OAAO,YAAY;AACnB,SAAS,8BAA8B;AACvC,SAAS,UAAU,SAAS,qBAAqB;AAEjD,SAAS,kBAAkB,EAAE,IAAI,GAAqC;AACrE,QAAM,CAAC,WAAW,eAAe,IAAI,cAAc;AACnD,QAAM,UAAU,QAAQ,MAAM;AAC7B,UAAM,WAAW,IAAI,gBAAgB,EAAE,KAAK,CAAC,SAAS;AACrD,YAAM,OAAO,KAAK,SAAS;AAC3B,aAAO,CAAC,CAAC,MAAM;AAAA,IAChB,CAAC;AACD,WAAQ,UAAU,SAAS,GAAgC;AAAA,EAC5D,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,eAAe,QAAQ,MAAM;AAClC,UAAM,aAAa,KAAK,IAAI,gBAAgB,CAAC;AAC7C,WAAQ,YAAY,SAAS,KAAiB;AAAA,EAC/C,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,YAAY,WAAW;AAE7B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,gBACC,YACG,CAAC,EAAE,SAAS,MAAM;AAClB,wBAAgB,MAAM;AACrB,cAAI,eAAe,QAAQ;AAAA,QAC5B,CAAC;AAAA,MACF,IACC;AAAA,MAEJ,mBACC,WAAW,eACV;AAAA,QAAC;AAAA;AAAA,UACA,SAAS;AAAA,UACT;AAAA;AAAA,MACD,IACG;AAAA,MAEL,UAAU,aAAa,IAAI,cAAc;AAAA,MAGxC,cAAI,gBAAgB,EAAE,IAAI,CAAC,SAAS;AACpC,eACC,oBAAC,YACC;AAAA,UACA,KAAK,OAAO,UAAU;AAAA,UACtB,KAAK,WAAW;AAAA,QACjB,KAJc,KAAK,EAKpB;AAAA,MAEF,CAAC;AAAA;AAAA,IAXI,IAAI;AAAA,EAYV;AAEF;AAEO,MAAM,WAAW","sourcesContent":["import { flexRender, type Row } from \"@tanstack/react-table\";\nimport type {\n\tScorecardTableCellConfig,\n\tScorecardTableData,\n} from \"../../../schemas/config\";\nimport { head } from \"lodash\";\nimport { DataTableRow } from \"@dhis2/ui\";\nimport styles from \"../ScorecardTable.module.css\";\nimport { ExpandedScorecardTable } from \"./ExpandedScorecardTable\";\nimport { Fragment, useMemo, useTransition } from \"react\";\n\nfunction TableRowComponent({ row }: { row: Row<ScorecardTableData> }) {\n\tconst [isPending, startTransition] = useTransition();\n\tconst orgUnit = useMemo(() => {\n\t\tconst dataCell = row.getVisibleCells().find((cell) => {\n\t\t\tconst data = cell.getValue() as ScorecardTableCellConfig;\n\t\t\treturn !!data?.orgUnit;\n\t\t});\n\t\treturn (dataCell?.getValue() as ScorecardTableCellConfig)?.orgUnit;\n\t}, [row]);\n\n\tconst shouldExpand = useMemo(() => {\n\t\tconst expandCell = head(row.getVisibleCells());\n\t\treturn (expandCell?.getValue() as boolean) ?? false;\n\t}, [row]);\n\n\tconst canExpand = orgUnit && shouldExpand;\n\n\treturn (\n\t\t<DataTableRow\n\t\t\tclassName={styles.expandCell}\n\t\t\tonExpandToggle={\n\t\t\t\tcanExpand\n\t\t\t\t\t? ({ expanded }) => {\n\t\t\t\t\t\t\tstartTransition(() => {\n\t\t\t\t\t\t\t\trow.toggleExpanded(expanded);\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\texpandableContent={\n\t\t\t\torgUnit && shouldExpand ? (\n\t\t\t\t\t<ExpandedScorecardTable\n\t\t\t\t\t\tpending={isPending}\n\t\t\t\t\t\torgUnit={orgUnit}\n\t\t\t\t\t/>\n\t\t\t\t) : undefined\n\t\t\t}\n\t\t\texpanded={canExpand && row.getIsExpanded()}\n\t\t\tkey={row.id}\n\t\t>\n\t\t\t{row.getVisibleCells().map((cell) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Fragment key={cell.id}>\n\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Fragment>\n\t\t\t\t);\n\t\t\t})}\n\t\t</DataTableRow>\n\t);\n}\n\nexport const TableRow = TableRowComponent;\n"]}

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

@@ -1,17 +1,20 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { IconArrowDown16, IconArrowUp16 } from '@dhis2/ui';
-import { useMemo } from 'react';
-import { useScorecardState } from '../../StateProvider';
+import { memo, useMemo } from 'react';
+import { useScorecardStateSelector } from '../../StateProvider';
 
-function DataValue({
+const DataValue = memo(function DataValue2({
   dataSource,
   value
 }) {
-  const state = useScorecardState();
+  const showArrows = useScorecardStateSelector([
+    "options",
+    "arrows"
+  ]);
   const currentValue = dataSource.data.current;
   const previousValue = dataSource.data.previous;
   const showArrow = useMemo(() => {
-    if (!state?.options?.arrows) {
+    if (!showArrows) {
       return;
     }
     if (!previousValue || !currentValue) {
@@ -26,7 +29,7 @@ function DataValue({
       return;
     }
     return currentValue > previousValue ? "increasing" : "decreasing";
-  }, [currentValue, dataSource.effectiveGap, state?.options?.arrows]);
+  }, [currentValue, dataSource.effectiveGap, showArrows]);
   if (value) {
     return /* @__PURE__ */ jsx(
       "div",
@@ -57,7 +60,7 @@ function DataValue({
       ]
     }
   );
-}
+});
 
 export { DataValue };
 //# sourceMappingURL=out.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/DataValue.tsx"],"names":[],"mappings":"AA+CI,cAMF,YANE;AA/CJ,SAAS,iBAAiB,qBAAqB;AAC/C,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAE3B,SAAS,UAAU;AAAA,EACzB;AAAA,EACA;AACD,GAGG;AACF,QAAM,QAAQ,kBAAkB;AAChC,QAAM,eAAe,WAAW,KAAK;AACrC,QAAM,gBAAgB,WAAW,KAAK;AACtC,QAAM,YAAqD,QAAQ,MAAM;AACxE,QAAI,CAAC,OAAO,SAAS,QAAQ;AAC5B;AAAA,IACD;AAEA,QAAI,CAAC,iBAAiB,CAAC,cAAc;AACpC;AAAA,IACD;AAEA,UAAM,eAAe,WAAW;AAChC,UAAM,MAAM,KAAK,IAAI,gBAAgB,YAAY;AACjD,QAAI,MAAM,cAAc;AACvB;AAAA,IACD;AAEA,QAAI,kBAAkB,cAAc;AACnC;AAAA,IACD;AAEA,WAAO,eAAe,gBAAgB,eAAe;AAAA,EACtD,GAAG,CAAC,cAAc,WAAW,cAAc,OAAO,SAAS,MAAM,CAAC;AAElE,MAAI,OAAO;AACV,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAO;AAAA,UACN,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,KAAK;AAAA,QACN;AAAA,QAEA,8BAAC,OAAG,iBAAO,SAAS,KAAK,IAAG;AAAA;AAAA,IAC7B;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,MACN;AAAA,MAEC;AAAA,sBAAc,gBAAgB,oBAAC,mBAAgB;AAAA,QAC/C,cAAc,gBAAgB,oBAAC,iBAAc;AAAA,QAC7C,cAAc,SAAS,KAAK;AAAA;AAAA;AAAA,EAC9B;AAEF","sourcesContent":["import { IconArrowDown16, IconArrowUp16 } from \"@dhis2/ui\";\nimport { useMemo } from \"react\";\nimport type { ScorecardTableCellData } from \"../../../schemas/config\";\nimport { useScorecardState } from \"../../StateProvider\";\n\nexport function DataValue({\n\tdataSource,\n\tvalue,\n}: {\n\tdataSource: ScorecardTableCellData[\"dataSources\"][number];\n\tvalue?: number;\n}) {\n\tconst state = useScorecardState();\n\tconst currentValue = dataSource.data.current;\n\tconst previousValue = dataSource.data.previous;\n\tconst showArrow: \"decreasing\" | \"increasing\" | undefined = useMemo(() => {\n\t\tif (!state?.options?.arrows) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!previousValue || !currentValue) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst effectiveGap = dataSource.effectiveGap;\n\t\tconst gap = Math.abs(previousValue - currentValue);\n\t\tif (gap < effectiveGap) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (previousValue === currentValue) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn currentValue > previousValue ? \"increasing\" : \"decreasing\";\n\t}, [currentValue, dataSource.effectiveGap, state?.options?.arrows]);\n\n\tif (value) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\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\tgap: 4,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<b>{value?.toString() ?? \"\"}</b>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\talignItems: \"center\",\n\t\t\t\tjustifyContent: \"center\",\n\t\t\t\tgap: 4,\n\t\t\t}}\n\t\t>\n\t\t\t{showArrow === \"decreasing\" && <IconArrowDown16 />}\n\t\t\t{showArrow === \"increasing\" && <IconArrowUp16 />}\n\t\t\t{currentValue?.toString() ?? \"\"}\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/DataValue.tsx"],"names":["DataValue"],"mappings":"AAkDI,cAMF,YANE;AAlDJ,SAAS,iBAAiB,qBAAqB;AAC/C,SAAS,MAAM,eAAe;AAE9B,SAAS,iCAAiC;AAEnC,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAChD;AAAA,EACA;AACD,GAGG;AACF,QAAM,aAAa,0BAAmC;AAAA,IACrD;AAAA,IACA;AAAA,EACD,CAAC;AACD,QAAM,eAAe,WAAW,KAAK;AACrC,QAAM,gBAAgB,WAAW,KAAK;AACtC,QAAM,YAAqD,QAAQ,MAAM;AACxE,QAAI,CAAC,YAAY;AAChB;AAAA,IACD;AAEA,QAAI,CAAC,iBAAiB,CAAC,cAAc;AACpC;AAAA,IACD;AAEA,UAAM,eAAe,WAAW;AAChC,UAAM,MAAM,KAAK,IAAI,gBAAgB,YAAY;AACjD,QAAI,MAAM,cAAc;AACvB;AAAA,IACD;AAEA,QAAI,kBAAkB,cAAc;AACnC;AAAA,IACD;AAEA,WAAO,eAAe,gBAAgB,eAAe;AAAA,EACtD,GAAG,CAAC,cAAc,WAAW,cAAc,UAAU,CAAC;AAEtD,MAAI,OAAO;AACV,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAO;AAAA,UACN,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,KAAK;AAAA,QACN;AAAA,QAEA,8BAAC,OAAG,iBAAO,SAAS,KAAK,IAAG;AAAA;AAAA,IAC7B;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,MACN;AAAA,MAEC;AAAA,sBAAc,gBAAgB,oBAAC,mBAAgB;AAAA,QAC/C,cAAc,gBAAgB,oBAAC,iBAAc;AAAA,QAC7C,cAAc,SAAS,KAAK;AAAA;AAAA;AAAA,EAC9B;AAEF,CAAC","sourcesContent":["import { IconArrowDown16, IconArrowUp16 } from \"@dhis2/ui\";\nimport { memo, useMemo } from \"react\";\nimport type { ScorecardCellData } from \"../../../schemas/config\";\nimport { useScorecardStateSelector } from \"../../StateProvider\";\n\nexport const DataValue = memo(function DataValue({\n\tdataSource,\n\tvalue,\n}: {\n\tdataSource: ScorecardCellData;\n\tvalue?: number;\n}) {\n\tconst showArrows = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"arrows\",\n\t]);\n\tconst currentValue = dataSource.data.current;\n\tconst previousValue = dataSource.data.previous;\n\tconst showArrow: \"decreasing\" | \"increasing\" | undefined = useMemo(() => {\n\t\tif (!showArrows) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!previousValue || !currentValue) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst effectiveGap = dataSource.effectiveGap;\n\t\tconst gap = Math.abs(previousValue - currentValue);\n\t\tif (gap < effectiveGap) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (previousValue === currentValue) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn currentValue > previousValue ? \"increasing\" : \"decreasing\";\n\t}, [currentValue, dataSource.effectiveGap, showArrows]);\n\n\tif (value) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\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\tgap: 4,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<b>{value?.toString() ?? \"\"}</b>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\talignItems: \"center\",\n\t\t\t\tjustifyContent: \"center\",\n\t\t\t\tgap: 4,\n\t\t\t}}\n\t\t>\n\t\t\t{showArrow === \"decreasing\" && <IconArrowDown16 />}\n\t\t\t{showArrow === \"increasing\" && <IconArrowUp16 />}\n\t\t\t{currentValue?.toString() ?? \"\"}\n\t\t</div>\n\t);\n});\n"]}

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

@@ -5,9 +5,11 @@ import { getOrgUnitLevel } from '../../../utils/orgUnits';
 import { Scorecard } from '../../../Scorecard';
 import { ScorecardContext } from '../../ScorecardContext';
 import { useScorecardState } from '../../StateProvider';
+import { CircularLoader } from '@dhis2/ui';
 
 function ExpandedScorecardTable({
-  orgUnit
+  orgUnit,
+  pending
 }) {
   const config = useScorecardConfig();
   const state = useScorecardState();
@@ -33,10 +35,21 @@ function ExpandedScorecardTable({
       style: {
         height: "100%",
         width: "100%",
-        minHeight: 400,
+        minHeight: 500,
         padding: 32
       },
-      children: /* @__PURE__ */ jsx(
+      children: pending ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            height: "100%",
+            width: "100%",
+            minHeight: 500,
+            padding: 32
+          },
+          children: /* @__PURE__ */ jsx(CircularLoader, { small: true })
+        }
+      ) : /* @__PURE__ */ jsx(
         ScorecardContext,
         {
           config: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/ExpandedScorecardTable.tsx"],"names":[],"mappings":"AAwDI;AAxDJ,SAAS,0BAA0B;AAEnC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAEhC,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAE3B,SAAS,uBAAuB;AAAA,EACtC;AACD,GAEG;AACF,QAAM,SAAS,mBAAmB;AAClC,QAAM,QAAQ,kBAAkB;AAEhC,QAAM,mBAAqC,QAAQ,MAAM;AACxD,UAAM,YAAY,QAAQ;AAC1B,UAAM,QAAQ,gBAAgB,OAAO,IAAI;AAEzC,WAAO;AAAA,MACN,UAAU;AAAA,QACT;AAAA,UACC,IAAI;AAAA,QACL;AAAA,MACD;AAAA,MACA,QAAQ,CAAC,MAAM,SAAS,CAAC;AAAA,MACzB,QAAQ,CAAC;AAAA,IACV;AAAA,EACD,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,CAAC,QAAQ;AACZ,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,QACX,SAAS;AAAA,MACV;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UAEA,QAAQ;AAAA,YACP,GAAG;AAAA,YACH;AAAA,UACD;AAAA,UACA,cAAc;AAAA,YACb,GAAG;AAAA,YACH;AAAA,UACD;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA,YAAY;AAAA,gBACX,aAAa;AAAA,gBACb,cAAc;AAAA,gBACd,OAAO;AAAA,cACR;AAAA;AAAA,UACD;AAAA;AAAA,QAhBK,GAAG,QAAQ,GAAG;AAAA,MAiBpB;AAAA;AAAA,EACD;AAEF","sourcesContent":["import { useScorecardConfig } from \"../../ConfigProvider\";\nimport type { ItemMeta } from \"../../../hooks/metadata\";\nimport { useMemo } from \"react\";\nimport { getOrgUnitLevel } from \"../../../utils/orgUnits\";\nimport type { OrgUnitSelection } from \"../../../schemas/config\";\nimport { Scorecard } from \"../../../Scorecard\";\nimport { ScorecardContext } from \"../../ScorecardContext\";\nimport { useScorecardState } from \"../../StateProvider\";\n\nexport function ExpandedScorecardTable({\n\torgUnit,\n}: {\n\torgUnit: ItemMeta & { hierarchy: string };\n}) {\n\tconst config = useScorecardConfig();\n\tconst state = useScorecardState();\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: 400,\n\t\t\t\tpadding: 32,\n\t\t\t}}\n\t\t>\n\t\t\t<ScorecardContext\n\t\t\t\tkey={`${orgUnit.uid}-expanded`}\n\t\t\t\tconfig={{\n\t\t\t\t\t...config,\n\t\t\t\t\torgUnitSelection,\n\t\t\t\t}}\n\t\t\t\tinitialState={{\n\t\t\t\t\t...state,\n\t\t\t\t\torgUnitSelection,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Scorecard\n\t\t\t\t\ttableProps={{\n\t\t\t\t\t\tscrollWidth: \"100%\",\n\t\t\t\t\t\tscrollHeight: \"100%\",\n\t\t\t\t\t\twidth: \"auto\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</ScorecardContext>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/ExpandedScorecardTable.tsx"],"names":[],"mappings":"AAyDK;AAzDL,SAAS,0BAA0B;AAEnC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAEhC,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAExB,SAAS,uBAAuB;AAAA,EACtC;AAAA,EACA;AACD,GAGG;AACF,QAAM,SAAS,mBAAmB;AAClC,QAAM,QAAQ,kBAAkB;AAEhC,QAAM,mBAAqC,QAAQ,MAAM;AACxD,UAAM,YAAY,QAAQ;AAC1B,UAAM,QAAQ,gBAAgB,OAAO,IAAI;AAEzC,WAAO;AAAA,MACN,UAAU;AAAA,QACT;AAAA,UACC,IAAI;AAAA,QACL;AAAA,MACD;AAAA,MACA,QAAQ,CAAC,MAAM,SAAS,CAAC;AAAA,MACzB,QAAQ,CAAC;AAAA,IACV;AAAA,EACD,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,CAAC,QAAQ;AACZ,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,QACX,SAAS;AAAA,MACV;AAAA,MAEC,oBACA;AAAA,QAAC;AAAA;AAAA,UACA,OAAO;AAAA,YACN,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,WAAW;AAAA,YACX,SAAS;AAAA,UACV;AAAA,UAEA,8BAAC,kBAAe,OAAK,MAAC;AAAA;AAAA,MACvB,IAEA;AAAA,QAAC;AAAA;AAAA,UAEA,QAAQ;AAAA,YACP,GAAG;AAAA,YACH;AAAA,UACD;AAAA,UACA,cAAc;AAAA,YACb,GAAG;AAAA,YACH;AAAA,UACD;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA,YAAY;AAAA,gBACX,aAAa;AAAA,gBACb,cAAc;AAAA,gBACd,OAAO;AAAA,cACR;AAAA;AAAA,UACD;AAAA;AAAA,QAhBK,GAAG,QAAQ,GAAG;AAAA,MAiBpB;AAAA;AAAA,EAEF;AAEF","sourcesContent":["import { useScorecardConfig } from \"../../ConfigProvider\";\nimport type { ItemMeta } from \"../../../hooks/metadata\";\nimport { useMemo } from \"react\";\nimport { getOrgUnitLevel } from \"../../../utils/orgUnits\";\nimport type { OrgUnitSelection } from \"../../../schemas/config\";\nimport { Scorecard } from \"../../../Scorecard\";\nimport { ScorecardContext } from \"../../ScorecardContext\";\nimport { useScorecardState } from \"../../StateProvider\";\nimport { CircularLoader } from \"@dhis2/ui\";\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 = useScorecardState();\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<ScorecardContext\n\t\t\t\t\tkey={`${orgUnit.uid}-expanded`}\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...state,\n\t\t\t\t\t\torgUnitSelection,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Scorecard\n\t\t\t\t\t\ttableProps={{\n\t\t\t\t\t\t\tscrollWidth: \"100%\",\n\t\t\t\t\t\t\tscrollHeight: \"100%\",\n\t\t\t\t\t\t\twidth: \"auto\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</ScorecardContext>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"]}

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

@@ -54,7 +54,13 @@ function LinkedCellComponent({ top, bottom, ...props }) {
                     topLegendDefinition?.color ?? "#FFFFFF"
                   ) : void 0
                 },
-                children: /* @__PURE__ */ jsx(DataValue, { value: topValue, dataSource: topDataSource })
+                children: topDataSource && /* @__PURE__ */ jsx(
+                  DataValue,
+                  {
+                    value: topValue,
+                    dataSource: topDataSource
+                  }
+                )
               }
             ),
             /* @__PURE__ */ jsx(
@@ -70,7 +76,7 @@ function LinkedCellComponent({ top, bottom, ...props }) {
                     bottomLegendDefinition?.color ?? "#FFFFFF"
                   ) : void 0
                 },
-                children: /* @__PURE__ */ jsx(
+                children: bottomDataSource && /* @__PURE__ */ jsx(
                   DataValue,
                   {
                     value: bottomValue,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/LinkedCell.tsx"],"names":[],"mappings":"AA8DG,SAsBE,KAtBF;AA9DH,SAAS,QAAQ,qBAAqB;AACtC,SAAS,uCAAuC;AAChD,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,OAAO,SAAS,eAAe;AAqB/B,SAAS,oBAAoB,EAAE,KAAK,QAAQ,GAAG,MAAM,GAAoB;AACxE,QAAM,CAAC,KAAK,EAAE,QAAQ,MAAM,CAAC,IAAI,eAAe;AAEhD,QAAM;AAAA,IACL,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,OAAO;AAAA,EACR,IAAI;AACJ,QAAM;AAAA,IACL,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,OAAO;AAAA,EACR,IAAI;AAEJ,QAAM,QAAQ,QAAQ,MAAM;AAC3B,WAAO,KAAK,IAAI,SAAS,KAAK;AAAA,EAC/B,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MAGJ;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY,oBAAoB,KAAK,QACpC,wBAAwB,SAAS,OAAO,KACzC,QAAQ,wBAAwB,SAAS,OAAO,KAAK,SACpD,OAAO,KACR,SAAS,OAAO,KAAK,SACpB,qBAAqB,SAAS,OAAO,KACtC,SAAS,qBAAqB,SAAS,OAAO,KAAK;AAAA,MACpD;AAAA,MACA,UAAQ;AAAA,MAER;AAAA,QAAC;AAAA;AAAA,UACA,OAAO;AAAA,YACN,SAAS;AAAA,YACT,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,eAAe;AAAA,UAChB;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,OAAO;AAAA,kBACN,YAAY;AAAA,kBACZ,SAAS;AAAA,kBACT,OAAO;AAAA,kBACP,YAAY;AAAA,kBACZ,gBAAgB;AAAA,kBAChB,OAAO,sBACJ;AAAA,oBACA,qBAAqB,SAAS;AAAA,kBAC/B,IACC;AAAA,gBACJ;AAAA,gBAEA,8BAAC,aAAU,OAAO,UAAU,YAAY,eAAe;AAAA;AAAA,YACxD;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA,OAAO;AAAA,kBACN,YAAY;AAAA,kBACZ,SAAS;AAAA,kBACT,OAAO;AAAA,kBACP,YAAY;AAAA,kBACZ,gBAAgB;AAAA,kBAChB,OAAO,yBACJ;AAAA,oBACA,wBAAwB,SAAS;AAAA,kBAClC,IACC;AAAA,gBACJ;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACA,OAAO;AAAA,oBACP,YAAY;AAAA;AAAA,gBACb;AAAA;AAAA,YACD;AAAA;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;AAEO,MAAM,aAAa,MAAM,KAAK,qBAAqB,CAAC,MAAM,SAAS;AACzE,SACC,KAAK,IAAI,UAAU,KAAK,IAAI,SAC5B,KAAK,OAAO,UAAU,KAAK,OAAO;AAEpC,CAAC","sourcesContent":["import { colors, DataTableCell } from \"@dhis2/ui\";\nimport { getTextColorFromBackgroundColor } from \"../../../utils/legends\";\nimport { DataValue } from \"./DataValue\";\nimport { useElementSize } from \"usehooks-ts\";\nimport React, { useMemo } from \"react\";\nimport type {\n\tLegendDefinition,\n\tScorecardTableCellData,\n} from \"../../../schemas/config\";\n\nexport interface LinkedCellProps {\n\ttop: {\n\t\tdataSource: ScorecardTableCellData[\"dataSources\"][number];\n\t\tlegendDefinition?: LegendDefinition;\n\t\tvalue?: number;\n\t};\n\tbottom: {\n\t\tdataSource: ScorecardTableCellData[\"dataSources\"][number];\n\t\tlegendDefinition?: LegendDefinition;\n\t\tvalue?: number;\n\t};\n\n\t[key: string]: unknown;\n}\n\nfunction LinkedCellComponent({ top, bottom, ...props }: LinkedCellProps) {\n\tconst [ref, { height, width }] = useElementSize();\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\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\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<DataValue value={topValue} dataSource={topDataSource} />\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<DataValue\n\t\t\t\t\t\tvalue={bottomValue}\n\t\t\t\t\t\tdataSource={bottomDataSource}\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/Scorecard/components/ScorecardTable/components/LinkedCell.tsx"],"names":[],"mappings":"AA8DG,SAuBG,KAvBH;AA9DH,SAAS,QAAQ,qBAAqB;AACtC,SAAS,uCAAuC;AAChD,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,OAAO,SAAS,eAAe;AAqB/B,SAAS,oBAAoB,EAAE,KAAK,QAAQ,GAAG,MAAM,GAAoB;AACxE,QAAM,CAAC,KAAK,EAAE,QAAQ,MAAM,CAAC,IAAI,eAAe;AAEhD,QAAM;AAAA,IACL,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,OAAO;AAAA,EACR,IAAI;AACJ,QAAM;AAAA,IACL,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,OAAO;AAAA,EACR,IAAI;AAEJ,QAAM,QAAQ,QAAQ,MAAM;AAC3B,WAAO,KAAK,IAAI,SAAS,KAAK;AAAA,EAC/B,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MAGJ;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY,oBAAoB,KAAK,QACpC,wBAAwB,SAAS,OAAO,KACzC,QAAQ,wBAAwB,SAAS,OAAO,KAAK,SACpD,OAAO,KACR,SAAS,OAAO,KAAK,SACpB,qBAAqB,SAAS,OAAO,KACtC,SAAS,qBAAqB,SAAS,OAAO,KAAK;AAAA,MACpD;AAAA,MACA,UAAQ;AAAA,MAER;AAAA,QAAC;AAAA;AAAA,UACA,OAAO;AAAA,YACN,SAAS;AAAA,YACT,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,eAAe;AAAA,UAChB;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,OAAO;AAAA,kBACN,YAAY;AAAA,kBACZ,SAAS;AAAA,kBACT,OAAO;AAAA,kBACP,YAAY;AAAA,kBACZ,gBAAgB;AAAA,kBAChB,OAAO,sBACJ;AAAA,oBACA,qBAAqB,SAAS;AAAA,kBAC/B,IACC;AAAA,gBACJ;AAAA,gBAEC,2BACA;AAAA,kBAAC;AAAA;AAAA,oBACA,OAAO;AAAA,oBACP,YAAY;AAAA;AAAA,gBACb;AAAA;AAAA,YAEF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA,OAAO;AAAA,kBACN,YAAY;AAAA,kBACZ,SAAS;AAAA,kBACT,OAAO;AAAA,kBACP,YAAY;AAAA,kBACZ,gBAAgB;AAAA,kBAChB,OAAO,yBACJ;AAAA,oBACA,wBAAwB,SAAS;AAAA,kBAClC,IACC;AAAA,gBACJ;AAAA,gBAEC,8BACA;AAAA,kBAAC;AAAA;AAAA,oBACA,OAAO;AAAA,oBACP,YAAY;AAAA;AAAA,gBACb;AAAA;AAAA,YAEF;AAAA;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;AAEO,MAAM,aAAa,MAAM,KAAK,qBAAqB,CAAC,MAAM,SAAS;AACzE,SACC,KAAK,IAAI,UAAU,KAAK,IAAI,SAC5B,KAAK,OAAO,UAAU,KAAK,OAAO;AAEpC,CAAC","sourcesContent":["import { colors, DataTableCell } from \"@dhis2/ui\";\nimport { getTextColorFromBackgroundColor } from \"../../../utils/legends\";\nimport { DataValue } from \"./DataValue\";\nimport { useElementSize } from \"usehooks-ts\";\nimport React, { useMemo } 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\n\t[key: string]: unknown;\n}\n\nfunction LinkedCellComponent({ top, bottom, ...props }: LinkedCellProps) {\n\tconst [ref, { height, width }] = useElementSize();\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\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\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\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\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/esm/components/Scorecard/components/ScorecardTable/components/LinkedDataCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/LinkedDataCell.tsx"],"names":[],"mappings":"AAuCE,mBAEE,KAFF;AArCF,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,MAAM,gBAAgB;AAC/B,SAAS,2BAA2B;AACpC;AAAA,EACC;AAAA,OAEM;AAQP,SAAS,wBAAwB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,CAAC,uBAAuB,wBAAwB,IACrD,SAAuC,IAAI;AAC5C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,MAAS;AAE9D,QAAM,CAAC,KAAK,MAAM,IAAI,eAAe,CAAC;AACtC,QAAM,EAAE,kBAAkB,oBAAoB,IAAI,YAAY;AAAA,IAC7D,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,EACD,CAAC;AACD,QAAM,EAAE,kBAAkB,uBAAuB,IAAI,YAAY;AAAA,IAChE,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,EACD,CAAC;AAED,SACC,iCACE;AAAA,KAAC,CAAC,yBACF;AAAA,MAAC;AAAA;AAAA,QACA,SAAS,MAAM;AACd,mCAAyB,IAAI;AAAA,QAC9B;AAAA,QACA,MAAM,CAAC;AAAA,QACP,QAAQ;AAAA;AAAA,IACT;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACA,eAAe,CAAC,MAAW;AAC1B,YAAE,eAAe;AACjB,4BAAkB,EAAE,MAAM;AAAA,QAC3B;AAAA,QACA,SAAS,CAAC,UAAsB;AAC/B,gBAAM,gBAAgB;AACtB,mCAAyB;AAAA,YACxB,iBAAiB;AAAA,cAChB,SAAS;AAAA,gBACR;AAAA,kBACC,IAAI;AAAA,gBACL;AAAA,cACD;AAAA,YACD;AAAA,YACA,kBAAkB;AAAA,cACjB,QAAQ,CAAC;AAAA,cACT,QAAQ,CAAC;AAAA,cACT,UAAU;AAAA,gBACT;AAAA,kBACC,IAAI,QAAQ;AAAA,gBACb;AAAA,cACD;AAAA,YACD;AAAA,YACA;AAAA,UACD,CAAC;AAAA,QACF;AAAA,QACA,KAAK;AAAA,UACJ,kBAAkB;AAAA,UAClB,YAAY;AAAA,QACb;AAAA,QACA,QAAQ;AAAA,UACP,kBAAkB;AAAA,UAClB,YAAY;AAAA,QACb;AAAA;AAAA,IACD;AAAA,IACC,kBACA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA;AAAA,IACX;AAAA,KAEF;AAEF;AAEO,MAAM,iBAAiB,KAAK,uBAAuB","sourcesContent":["import type { ScorecardTableCellData } from \"../../../schemas/config\";\nimport type { ItemMeta } from \"../../../hooks/metadata\";\nimport { useCellData } from \"../../../hooks/cellData\";\nimport { LinkedCell } from \"./LinkedCell\";\nimport { memo, useState } from \"react\";\nimport { FurtherAnalysisMenu } from \"./FurtherAnalysisMenu\";\nimport {\n\tFurtherAnalysis,\n\ttype FurtherAnalysisConfig,\n} from \"./FurtherAnalysisModal\";\n\nexport interface LinkedDataCellProps {\n\tdataSources: ScorecardTableCellData[\"dataSources\"];\n\torgUnit: ItemMeta & { hierarchy: string };\n\tperiod: string;\n}\n\nfunction LinkedDataCellComponent({\n\tdataSources,\n\torgUnit,\n\tperiod,\n}: LinkedDataCellProps) {\n\tconst [furtherAnalysisConfig, setFurtherAnalysisConfig] =\n\t\tuseState<FurtherAnalysisConfig | null>(null);\n\tconst [stateActionRef, setStateActionRef] = useState(undefined);\n\n\tconst [top, bottom] = dataSources ?? [];\n\tconst { legendDefinition: topLegendDefinition } = useCellData({\n\t\tdataSource: top,\n\t\torgUnit,\n\t\tperiod,\n\t});\n\tconst { legendDefinition: bottomLegendDefinition } = useCellData({\n\t\tdataSource: bottom,\n\t\torgUnit,\n\t\tperiod,\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t{!!furtherAnalysisConfig && (\n\t\t\t\t<FurtherAnalysis\n\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\tsetFurtherAnalysisConfig(null);\n\t\t\t\t\t}}\n\t\t\t\t\thide={!furtherAnalysisConfig}\n\t\t\t\t\tconfig={furtherAnalysisConfig}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<LinkedCell\n\t\t\t\tonContextMenu={(e: any) => {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tsetStateActionRef(e.target);\n\t\t\t\t}}\n\t\t\t\tonClick={(event: MouseEvent) => {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tsetFurtherAnalysisConfig({\n\t\t\t\t\t\tperiodSelection: {\n\t\t\t\t\t\t\tperiods: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tid: period,\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\torgUnitSelection: {\n\t\t\t\t\t\t\tlevels: [],\n\t\t\t\t\t\t\tgroups: [],\n\t\t\t\t\t\t\torgUnits: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tid: orgUnit.uid,\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\tdataSources,\n\t\t\t\t\t});\n\t\t\t\t}}\n\t\t\t\ttop={{\n\t\t\t\t\tlegendDefinition: topLegendDefinition,\n\t\t\t\t\tdataSource: top,\n\t\t\t\t}}\n\t\t\t\tbottom={{\n\t\t\t\t\tlegendDefinition: bottomLegendDefinition,\n\t\t\t\t\tdataSource: bottom,\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t{stateActionRef && (\n\t\t\t\t<FurtherAnalysisMenu\n\t\t\t\t\tdataSources={dataSources}\n\t\t\t\t\tonSelect={setFurtherAnalysisConfig}\n\t\t\t\t\tstateActionRef={stateActionRef}\n\t\t\t\t\tsetStateActionRef={setStateActionRef}\n\t\t\t\t\torgUnit={orgUnit}\n\t\t\t\t\tperiodId={period}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nexport const LinkedDataCell = memo(LinkedDataCellComponent);\n"]}
+{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/LinkedDataCell.tsx"],"names":[],"mappings":"AAuCE,mBAEE,KAFF;AArCF,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,MAAM,gBAAgB;AAC/B,SAAS,2BAA2B;AACpC;AAAA,EACC;AAAA,OAEM;AAQP,SAAS,wBAAwB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,CAAC,uBAAuB,wBAAwB,IACrD,SAAuC,IAAI;AAC5C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,MAAS;AAE9D,QAAM,CAAC,KAAK,MAAM,IAAI,eAAe,CAAC;AACtC,QAAM,EAAE,kBAAkB,oBAAoB,IAAI,YAAY;AAAA,IAC7D,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,EACD,CAAC;AACD,QAAM,EAAE,kBAAkB,uBAAuB,IAAI,YAAY;AAAA,IAChE,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,EACD,CAAC;AAED,SACC,iCACE;AAAA,KAAC,CAAC,yBACF;AAAA,MAAC;AAAA;AAAA,QACA,SAAS,MAAM;AACd,mCAAyB,IAAI;AAAA,QAC9B;AAAA,QACA,MAAM,CAAC;AAAA,QACP,QAAQ;AAAA;AAAA,IACT;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACA,eAAe,CAAC,MAAW;AAC1B,YAAE,eAAe;AACjB,4BAAkB,EAAE,MAAM;AAAA,QAC3B;AAAA,QACA,SAAS,CAAC,UAAsB;AAC/B,gBAAM,gBAAgB;AACtB,mCAAyB;AAAA,YACxB,iBAAiB;AAAA,cAChB,SAAS;AAAA,gBACR;AAAA,kBACC,IAAI;AAAA,gBACL;AAAA,cACD;AAAA,YACD;AAAA,YACA,kBAAkB;AAAA,cACjB,QAAQ,CAAC;AAAA,cACT,QAAQ,CAAC;AAAA,cACT,UAAU;AAAA,gBACT;AAAA,kBACC,IAAI,QAAQ;AAAA,gBACb;AAAA,cACD;AAAA,YACD;AAAA,YACA;AAAA,UACD,CAAC;AAAA,QACF;AAAA,QACA,KAAK;AAAA,UACJ,kBAAkB;AAAA,UAClB,YAAY;AAAA,QACb;AAAA,QACA,QAAQ;AAAA,UACP,kBAAkB;AAAA,UAClB,YAAY;AAAA,QACb;AAAA;AAAA,IACD;AAAA,IACC,kBACA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA;AAAA,IACX;AAAA,KAEF;AAEF;AAEO,MAAM,iBAAiB,KAAK,uBAAuB","sourcesContent":["import type { ScorecardCellData } from \"../../../schemas/config\";\nimport type { ItemMeta } from \"../../../hooks/metadata\";\nimport { useCellData } from \"../../../hooks/cellData\";\nimport { LinkedCell } from \"./LinkedCell\";\nimport { memo, useState } from \"react\";\nimport { FurtherAnalysisMenu } from \"./FurtherAnalysisMenu\";\nimport {\n\tFurtherAnalysis,\n\ttype FurtherAnalysisConfig,\n} from \"./FurtherAnalysisModal\";\n\nexport interface LinkedDataCellProps {\n\tdataSources: ScorecardCellData[];\n\torgUnit: ItemMeta & { hierarchy: string };\n\tperiod: string;\n}\n\nfunction LinkedDataCellComponent({\n\tdataSources,\n\torgUnit,\n\tperiod,\n}: LinkedDataCellProps) {\n\tconst [furtherAnalysisConfig, setFurtherAnalysisConfig] =\n\t\tuseState<FurtherAnalysisConfig | null>(null);\n\tconst [stateActionRef, setStateActionRef] = useState(undefined);\n\n\tconst [top, bottom] = dataSources ?? [];\n\tconst { legendDefinition: topLegendDefinition } = useCellData({\n\t\tdataSource: top,\n\t\torgUnit,\n\t\tperiod,\n\t});\n\tconst { legendDefinition: bottomLegendDefinition } = useCellData({\n\t\tdataSource: bottom,\n\t\torgUnit,\n\t\tperiod,\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t{!!furtherAnalysisConfig && (\n\t\t\t\t<FurtherAnalysis\n\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\tsetFurtherAnalysisConfig(null);\n\t\t\t\t\t}}\n\t\t\t\t\thide={!furtherAnalysisConfig}\n\t\t\t\t\tconfig={furtherAnalysisConfig}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<LinkedCell\n\t\t\t\tonContextMenu={(e: any) => {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tsetStateActionRef(e.target);\n\t\t\t\t}}\n\t\t\t\tonClick={(event: MouseEvent) => {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tsetFurtherAnalysisConfig({\n\t\t\t\t\t\tperiodSelection: {\n\t\t\t\t\t\t\tperiods: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tid: period,\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\torgUnitSelection: {\n\t\t\t\t\t\t\tlevels: [],\n\t\t\t\t\t\t\tgroups: [],\n\t\t\t\t\t\t\torgUnits: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tid: orgUnit.uid,\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\tdataSources,\n\t\t\t\t\t});\n\t\t\t\t}}\n\t\t\t\ttop={{\n\t\t\t\t\tlegendDefinition: topLegendDefinition,\n\t\t\t\t\tdataSource: top,\n\t\t\t\t}}\n\t\t\t\tbottom={{\n\t\t\t\t\tlegendDefinition: bottomLegendDefinition,\n\t\t\t\t\tdataSource: bottom,\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t{stateActionRef && (\n\t\t\t\t<FurtherAnalysisMenu\n\t\t\t\t\tdataSources={dataSources}\n\t\t\t\t\tonSelect={setFurtherAnalysisConfig}\n\t\t\t\t\tstateActionRef={stateActionRef}\n\t\t\t\t\tsetStateActionRef={setStateActionRef}\n\t\t\t\t\torgUnit={orgUnit}\n\t\t\t\t\tperiodId={period}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nexport const LinkedDataCell = memo(LinkedDataCellComponent);\n"]}

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

@@ -1,11 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { DataTableCell } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
-import { useScorecardState } from '../../StateProvider';
+import { useScorecardStateSelector } from '../../StateProvider';
 
-function MetaFooterCell(props) {
-  const state = useScorecardState();
-  const itemNumber = state?.options.itemNumber ?? false;
+function MetaFooterCell() {
+  const itemNumber = useScorecardStateSelector([
+    "options",
+    "itemNumber"
+  ]);
   return /* @__PURE__ */ jsx(DataTableCell, { align: "center", colSpan: itemNumber ? "3" : "2", fixed: true, children: /* @__PURE__ */ jsx("b", { style: { padding: "8px 0" }, children: i18n.t("Average") }) });
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/MetaFooterCell.tsx"],"names":[],"mappings":"AAcG;AAdH,SAAS,qBAAqB;AAG9B,OAAO,UAAU;AACjB,SAAS,yBAAyB;AAE3B,SAAS,eACf,OACC;AACD,QAAM,QAAQ,kBAAkB;AAChC,QAAM,aAAa,OAAO,QAAQ,cAAc;AAEhD,SACC,oBAAC,iBAAc,OAAM,UAAS,SAAS,aAAa,MAAM,KAAK,OAAK,MACnE,8BAAC,OAAE,OAAO,EAAE,SAAS,QAAQ,GAAI,eAAK,EAAE,SAAS,GAAE,GACpD;AAEF","sourcesContent":["import { DataTableCell } from \"@dhis2/ui\";\nimport type { HeaderContext } from \"@tanstack/react-table\";\nimport type { ScorecardTableData } from \"../../../schemas/config\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useScorecardState } from \"../../StateProvider\";\n\nexport function MetaFooterCell(\n\tprops: HeaderContext<ScorecardTableData, unknown>,\n) {\n\tconst state = useScorecardState();\n\tconst itemNumber = state?.options.itemNumber ?? false;\n\n\treturn (\n\t\t<DataTableCell align=\"center\" colSpan={itemNumber ? \"3\" : \"2\"} fixed>\n\t\t\t<b style={{ padding: \"8px 0\" }}>{i18n.t(\"Average\")}</b>\n\t\t</DataTableCell>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/MetaFooterCell.tsx"],"names":[],"mappings":"AAYG;AAZH,SAAS,qBAAqB;AAC9B,OAAO,UAAU;AACjB,SAAS,iCAAiC;AAEnC,SAAS,iBAAiB;AAChC,QAAM,aAAa,0BAAmC;AAAA,IACrD;AAAA,IACA;AAAA,EACD,CAAC;AAED,SACC,oBAAC,iBAAc,OAAM,UAAS,SAAS,aAAa,MAAM,KAAK,OAAK,MACnE,8BAAC,OAAE,OAAO,EAAE,SAAS,QAAQ,GAAI,eAAK,EAAE,SAAS,GAAE,GACpD;AAEF","sourcesContent":["import { DataTableCell } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useScorecardStateSelector } from \"../../StateProvider\";\n\nexport function MetaFooterCell() {\n\tconst itemNumber = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"itemNumber\",\n\t]);\n\n\treturn (\n\t\t<DataTableCell align=\"center\" colSpan={itemNumber ? \"3\" : \"2\"} fixed>\n\t\t\t<b style={{ padding: \"8px 0\" }}>{i18n.t(\"Average\")}</b>\n\t\t</DataTableCell>\n\t);\n}\n"]}

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

@@ -21,7 +21,7 @@ function SingleDataCellComponent({
     period,
     orgUnit
   });
-  if (!dataSource) {
+  if (!dataSource || !dataSource.data) {
     return /* @__PURE__ */ jsx(DataTableCell, { bordered: true });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -73,7 +73,7 @@ function SingleDataCellComponent({
             legendDefinition?.color
           ) : void 0
         },
-        children: /* @__PURE__ */ jsx(DataValue, { dataSource })
+        children: dataSource && /* @__PURE__ */ jsx(DataValue, { dataSource })
       }
     ),
     stateActionRef && /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/SingleDataCell.tsx"],"names":[],"mappings":"AAsCS,SAIP,UAJO,KAIP,YAJO;AApCT,SAAS,MAAsB,gBAAgB;AAC/C,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,uCAAuC;AAChD,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC;AAAA,EACC;AAAA,OAEM;AAQP,SAAS,wBAAwB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACD,GAAmC;AAClC,QAAM,CAAC,uBAAuB,wBAAwB,IACrD,SAAuC,IAAI;AAE5C,QAAM,aAAa,KAAK,WAAW;AACnC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,MAAS;AAE9D,QAAM,EAAE,iBAAiB,IAAI,YAAY;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAC;AAED,MAAI,CAAC,YAAY;AAChB,WAAO,oBAAC,iBAAc,UAAQ,MAAC;AAAA,EAChC;AAEA,SACC,iCACE;AAAA,KAAC,CAAC,yBACF;AAAA,MAAC;AAAA;AAAA,QACA,SAAS,MAAM;AACd,mCAAyB,IAAI;AAAA,QAC9B;AAAA,QACA,MAAM,CAAC;AAAA,QACP,QAAQ;AAAA;AAAA,IACT;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACA,SAAS,CAAC,UAAU;AACnB,gBAAM,gBAAgB;AACtB,mCAAyB;AAAA,YACxB,iBAAiB;AAAA,cAChB,SAAS;AAAA,gBACR;AAAA,kBACC,IAAI;AAAA,gBACL;AAAA,cACD;AAAA,YACD;AAAA,YACA,kBAAkB;AAAA,cACjB,QAAQ,CAAC;AAAA,cACT,QAAQ,CAAC;AAAA,cACT,UAAU;AAAA,gBACT;AAAA,kBACC,IAAI,QAAQ;AAAA,gBACb;AAAA,cACD;AAAA,YACD;AAAA,YACA;AAAA,UACD,CAAC;AAAA,QACF;AAAA,QACA,eAAe,CAAC,MAAW;AAC1B,YAAE,eAAe;AACjB,4BAAkB,EAAE,MAAM;AAAA,QAC3B;AAAA,QACA,UAAQ;AAAA,QACR,OAAO;AAAA,UACN,YAAY,kBAAkB;AAAA,UAC9B,WAAW;AAAA,UACX,UAAU;AAAA,UACV,OAAO,mBACJ;AAAA,YACA,kBAAkB;AAAA,UACnB,IACC;AAAA,QACJ;AAAA,QAEA,8BAAC,aAAU,YAAwB;AAAA;AAAA,IACpC;AAAA,IAEC,kBACA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA;AAAA,IACX;AAAA,KAEF;AAEF;AAEO,MAAM,iBAAiB,KAAK,uBAAuB","sourcesContent":["import { type ScorecardTableCellData } from \"../../../schemas/config\";\nimport { type ItemMeta } from \"../../../hooks/metadata\";\nimport { memo, type ReactNode, useState } from \"react\";\nimport { head } from \"lodash\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport { getTextColorFromBackgroundColor } from \"../../../utils/legends\";\nimport { DataValue } from \"./DataValue\";\nimport { useCellData } from \"../../../hooks/cellData\";\nimport { FurtherAnalysisMenu } from \"./FurtherAnalysisMenu\";\nimport {\n\tFurtherAnalysis,\n\ttype FurtherAnalysisConfig,\n} from \"./FurtherAnalysisModal\";\n\nexport interface SingleDataCellProps {\n\tdataSources: ScorecardTableCellData[\"dataSources\"];\n\torgUnit: ItemMeta & { hierarchy: string };\n\tperiod: string;\n}\n\nfunction SingleDataCellComponent({\n\tdataSources,\n\tperiod,\n\torgUnit,\n}: SingleDataCellProps): ReactNode {\n\tconst [furtherAnalysisConfig, setFurtherAnalysisConfig] =\n\t\tuseState<FurtherAnalysisConfig | null>(null);\n\n\tconst dataSource = head(dataSources);\n\tconst [stateActionRef, setStateActionRef] = useState(undefined);\n\n\tconst { legendDefinition } = useCellData({\n\t\tdataSource,\n\t\tperiod,\n\t\torgUnit,\n\t});\n\n\tif (!dataSource) {\n\t\treturn <DataTableCell bordered />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{!!furtherAnalysisConfig && (\n\t\t\t\t<FurtherAnalysis\n\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\tsetFurtherAnalysisConfig(null);\n\t\t\t\t\t}}\n\t\t\t\t\thide={!furtherAnalysisConfig}\n\t\t\t\t\tconfig={furtherAnalysisConfig}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<DataTableCell\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tsetFurtherAnalysisConfig({\n\t\t\t\t\t\tperiodSelection: {\n\t\t\t\t\t\t\tperiods: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tid: period,\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\torgUnitSelection: {\n\t\t\t\t\t\t\tlevels: [],\n\t\t\t\t\t\t\tgroups: [],\n\t\t\t\t\t\t\torgUnits: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tid: orgUnit.uid,\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\tdataSources,\n\t\t\t\t\t});\n\t\t\t\t}}\n\t\t\t\tonContextMenu={(e: any) => {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tsetStateActionRef(e.target);\n\t\t\t\t}}\n\t\t\t\tbordered\n\t\t\t\tstyle={{\n\t\t\t\t\tbackground: legendDefinition?.color,\n\t\t\t\t\ttextAlign: \"center\",\n\t\t\t\t\tminWidth: 100,\n\t\t\t\t\tcolor: legendDefinition\n\t\t\t\t\t\t? getTextColorFromBackgroundColor(\n\t\t\t\t\t\t\t\tlegendDefinition?.color,\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t: undefined,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<DataValue dataSource={dataSource} />\n\t\t\t</DataTableCell>\n\n\t\t\t{stateActionRef && (\n\t\t\t\t<FurtherAnalysisMenu\n\t\t\t\t\tdataSources={dataSources}\n\t\t\t\t\tonSelect={setFurtherAnalysisConfig}\n\t\t\t\t\tstateActionRef={stateActionRef}\n\t\t\t\t\tsetStateActionRef={setStateActionRef}\n\t\t\t\t\torgUnit={orgUnit}\n\t\t\t\t\tperiodId={period}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nexport const SingleDataCell = memo(SingleDataCellComponent);\n"]}
+{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/SingleDataCell.tsx"],"names":[],"mappings":"AAqCS,SAIP,UAJO,KAIP,YAJO;AAnCT,SAAS,MAAsB,gBAAgB;AAC/C,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,uCAAuC;AAChD,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC;AAAA,EACC;AAAA,OAEM;AAQP,SAAS,wBAAwB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACD,GAAmC;AAClC,QAAM,CAAC,uBAAuB,wBAAwB,IACrD,SAAuC,IAAI;AAC5C,QAAM,aAAa,KAAK,WAAW;AACnC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,MAAS;AAE9D,QAAM,EAAE,iBAAiB,IAAI,YAAY;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAC;AAED,MAAI,CAAC,cAAc,CAAC,WAAW,MAAM;AACpC,WAAO,oBAAC,iBAAc,UAAQ,MAAC;AAAA,EAChC;AAEA,SACC,iCACE;AAAA,KAAC,CAAC,yBACF;AAAA,MAAC;AAAA;AAAA,QACA,SAAS,MAAM;AACd,mCAAyB,IAAI;AAAA,QAC9B;AAAA,QACA,MAAM,CAAC;AAAA,QACP,QAAQ;AAAA;AAAA,IACT;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACA,SAAS,CAAC,UAAU;AACnB,gBAAM,gBAAgB;AACtB,mCAAyB;AAAA,YACxB,iBAAiB;AAAA,cAChB,SAAS;AAAA,gBACR;AAAA,kBACC,IAAI;AAAA,gBACL;AAAA,cACD;AAAA,YACD;AAAA,YACA,kBAAkB;AAAA,cACjB,QAAQ,CAAC;AAAA,cACT,QAAQ,CAAC;AAAA,cACT,UAAU;AAAA,gBACT;AAAA,kBACC,IAAI,QAAQ;AAAA,gBACb;AAAA,cACD;AAAA,YACD;AAAA,YACA;AAAA,UACD,CAAC;AAAA,QACF;AAAA,QACA,eAAe,CAAC,MAAW;AAC1B,YAAE,eAAe;AACjB,4BAAkB,EAAE,MAAM;AAAA,QAC3B;AAAA,QACA,UAAQ;AAAA,QACR,OAAO;AAAA,UACN,YAAY,kBAAkB;AAAA,UAC9B,WAAW;AAAA,UACX,UAAU;AAAA,UACV,OAAO,mBACJ;AAAA,YACA,kBAAkB;AAAA,UACnB,IACC;AAAA,QACJ;AAAA,QAEC,wBAAc,oBAAC,aAAU,YAAwB;AAAA;AAAA,IACnD;AAAA,IAEC,kBACA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA;AAAA,IACX;AAAA,KAEF;AAEF;AAEO,MAAM,iBAAiB,KAAK,uBAAuB","sourcesContent":["import { type ScorecardCellData } from \"../../../schemas/config\";\nimport { type ItemMeta } from \"../../../hooks/metadata\";\nimport { memo, type ReactNode, useState } from \"react\";\nimport { head } from \"lodash\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport { getTextColorFromBackgroundColor } from \"../../../utils/legends\";\nimport { DataValue } from \"./DataValue\";\nimport { useCellData } from \"../../../hooks/cellData\";\nimport { FurtherAnalysisMenu } from \"./FurtherAnalysisMenu\";\nimport {\n\tFurtherAnalysis,\n\ttype FurtherAnalysisConfig,\n} from \"./FurtherAnalysisModal\";\n\nexport interface SingleDataCellProps {\n\tdataSources: ScorecardCellData[];\n\torgUnit: ItemMeta & { hierarchy: string };\n\tperiod: string;\n}\n\nfunction SingleDataCellComponent({\n\tdataSources,\n\tperiod,\n\torgUnit,\n}: SingleDataCellProps): ReactNode {\n\tconst [furtherAnalysisConfig, setFurtherAnalysisConfig] =\n\t\tuseState<FurtherAnalysisConfig | null>(null);\n\tconst dataSource = head(dataSources);\n\tconst [stateActionRef, setStateActionRef] = useState(undefined);\n\n\tconst { legendDefinition } = useCellData({\n\t\tdataSource,\n\t\tperiod,\n\t\torgUnit,\n\t});\n\n\tif (!dataSource || !dataSource.data) {\n\t\treturn <DataTableCell bordered />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{!!furtherAnalysisConfig && (\n\t\t\t\t<FurtherAnalysis\n\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\tsetFurtherAnalysisConfig(null);\n\t\t\t\t\t}}\n\t\t\t\t\thide={!furtherAnalysisConfig}\n\t\t\t\t\tconfig={furtherAnalysisConfig}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<DataTableCell\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tsetFurtherAnalysisConfig({\n\t\t\t\t\t\tperiodSelection: {\n\t\t\t\t\t\t\tperiods: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tid: period,\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\torgUnitSelection: {\n\t\t\t\t\t\t\tlevels: [],\n\t\t\t\t\t\t\tgroups: [],\n\t\t\t\t\t\t\torgUnits: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tid: orgUnit.uid,\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\tdataSources,\n\t\t\t\t\t});\n\t\t\t\t}}\n\t\t\t\tonContextMenu={(e: any) => {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tsetStateActionRef(e.target);\n\t\t\t\t}}\n\t\t\t\tbordered\n\t\t\t\tstyle={{\n\t\t\t\t\tbackground: legendDefinition?.color,\n\t\t\t\t\ttextAlign: \"center\",\n\t\t\t\t\tminWidth: 100,\n\t\t\t\t\tcolor: legendDefinition\n\t\t\t\t\t\t? getTextColorFromBackgroundColor(\n\t\t\t\t\t\t\t\tlegendDefinition?.color,\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t: undefined,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{dataSource && <DataValue dataSource={dataSource} />}\n\t\t\t</DataTableCell>\n\n\t\t\t{stateActionRef && (\n\t\t\t\t<FurtherAnalysisMenu\n\t\t\t\t\tdataSources={dataSources}\n\t\t\t\t\tonSelect={setFurtherAnalysisConfig}\n\t\t\t\t\tstateActionRef={stateActionRef}\n\t\t\t\t\tsetStateActionRef={setStateActionRef}\n\t\t\t\t\torgUnit={orgUnit}\n\t\t\t\t\tperiodId={period}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nexport const SingleDataCell = memo(SingleDataCellComponent);\n"]}

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

@@ -1,12 +1,17 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { DataTableBody } from '@dhis2/ui';
 import { useTableState } from '../../TableStateProvider';
 import { TableRow } from './DataRow';
+import { LoadingIndicator } from '../../LoadingIndicator';
+import { memo } from 'react';
 
-function TableBody() {
+const TableBody = memo(function TableBody2() {
   const table = useTableState();
-  return /* @__PURE__ */ jsx(DataTableBody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { row }, row.id)) });
-}
+  return /* @__PURE__ */ jsxs(DataTableBody, { children: [
+    /* @__PURE__ */ jsx(LoadingIndicator, {}),
+    table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { row }, row.id))
+  ] });
+});
 
 export { TableBody };
 //# sourceMappingURL=out.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableBody.tsx"],"names":[],"mappings":"AASI;AATJ,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AAElB,SAAS,YAAY;AAC3B,QAAM,QAAQ,cAAc;AAC5B,SACC,oBAAC,iBACC,gBAAM,YAAY,EAAE,KAAK,IAAI,CAAC,QAC9B,oBAAC,YAAsB,OAAR,IAAI,EAAc,CACjC,GACF;AAEF","sourcesContent":["import { DataTableBody } from \"@dhis2/ui\";\nimport { useTableState } from \"../../TableStateProvider\";\nimport { TableRow } from \"./DataRow\";\n\nexport function TableBody() {\n\tconst table = useTableState();\n\treturn (\n\t\t<DataTableBody>\n\t\t\t{table.getRowModel().rows.map((row) => (\n\t\t\t\t<TableRow key={row.id} row={row} />\n\t\t\t))}\n\t\t</DataTableBody>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableBody.tsx"],"names":["TableBody"],"mappings":"AASE,SACC,KADD;AATF,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,YAAY;AAEd,MAAM,YAAY,KAAK,SAASA,aAAY;AAClD,QAAM,QAAQ,cAAc;AAC5B,SACC,qBAAC,iBACA;AAAA,wBAAC,oBAAiB;AAAA,IACjB,MAAM,YAAY,EAAE,KAAK,IAAI,CAAC,QAC9B,oBAAC,YAAsB,OAAR,IAAI,EAAc,CACjC;AAAA,KACF;AAEF,CAAC","sourcesContent":["import { DataTableBody } from \"@dhis2/ui\";\nimport { useTableState } from \"../../TableStateProvider\";\nimport { TableRow } from \"./DataRow\";\nimport { LoadingIndicator } from \"../../LoadingIndicator\";\nimport { memo } from \"react\";\n\nexport const TableBody = memo(function TableBody() {\n\tconst table = useTableState();\n\treturn (\n\t\t<DataTableBody>\n\t\t\t<LoadingIndicator />\n\t\t\t{table.getRowModel().rows.map((row) => (\n\t\t\t\t<TableRow key={row.id} row={row} />\n\t\t\t))}\n\t\t</DataTableBody>\n\t);\n});\n"]}

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

@@ -2,21 +2,24 @@ import { jsx } from 'react/jsx-runtime';
 import { DataTableFoot, DataTableRow } from '@dhis2/ui';
 import { useTableState } from '../../TableStateProvider';
 import { flexRender } from '@tanstack/react-table';
-import { useScorecardState } from '../../StateProvider';
+import { useScorecardStateSelector } from '../../StateProvider';
+import { Fragment } from 'react';
 
 function TableFoot() {
   const table = useTableState();
-  const state = useScorecardState();
-  const hideAverage = !state?.options.averageRow;
-  if (hideAverage) {
+  const showAverageRow = useScorecardStateSelector([
+    "options",
+    "averageRow"
+  ]);
+  if (!showAverageRow) {
     return null;
   }
   return /* @__PURE__ */ jsx(DataTableFoot, { children: table.getFooterGroups().map((footerGroup) => {
     return /* @__PURE__ */ jsx(DataTableRow, { children: footerGroup.headers.map((footer) => {
-      return footer.isPlaceholder ? null : flexRender(
+      return footer.isPlaceholder ? null : /* @__PURE__ */ jsx(Fragment, { children: flexRender(
         footer.column.columnDef.footer,
         footer.getContext()
-      );
+      ) }, footer.id);
     }) }, footerGroup.id);
   }) });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableFoot.tsx"],"names":[],"mappings":"AAmBK;AAnBL,SAAS,eAAe,oBAAoB;AAC5C,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,SAAS,YAAY;AAC3B,QAAM,QAAQ,cAAc;AAC5B,QAAM,QAAQ,kBAAkB;AAEhC,QAAM,cAAc,CAAC,OAAO,QAAQ;AAEpC,MAAI,aAAa;AAChB,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,iBACC,gBAAM,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;AAC7C,WACC,oBAAC,gBACC,sBAAY,QAAQ,IAAI,CAAC,WAAW;AACpC,aAAO,OAAO,gBACX,OACA;AAAA,QACA,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,WAAW;AAAA,MACnB;AAAA,IACH,CAAC,KARiB,YAAY,EAS/B;AAAA,EAEF,CAAC,GACF;AAEF","sourcesContent":["import { DataTableFoot, DataTableRow } from \"@dhis2/ui\";\nimport { useTableState } from \"../../TableStateProvider\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport { useScorecardState } from \"../../StateProvider\";\n\nexport function TableFoot() {\n\tconst table = useTableState();\n\tconst state = useScorecardState();\n\n\tconst hideAverage = !state?.options.averageRow;\n\n\tif (hideAverage) {\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\n\t\t\t\t\t\t\t\t? null\n\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})}\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/Scorecard/components/ScorecardTable/components/TableFoot.tsx"],"names":[],"mappings":"AAwBQ;AAxBR,SAAS,eAAe,oBAAoB;AAC5C,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,iCAAiC;AAC1C,SAAS,gBAAgB;AAElB,SAAS,YAAY;AAC3B,QAAM,QAAQ,cAAc;AAC5B,QAAM,iBAAiB,0BAAmC;AAAA,IACzD;AAAA,IACA;AAAA,EACD,CAAC;AAED,MAAI,CAAC,gBAAgB;AACpB,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,iBACC,gBAAM,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;AAC7C,WACC,oBAAC,gBACC,sBAAY,QAAQ,IAAI,CAAC,WAAW;AACpC,aAAO,OAAO,gBAAgB,OAC7B,oBAAC,YACC;AAAA,QACA,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,WAAW;AAAA,MACnB,KAJc,OAAO,EAKtB;AAAA,IAEF,CAAC,KAViB,YAAY,EAW/B;AAAA,EAEF,CAAC,GACF;AAEF","sourcesContent":["import { DataTableFoot, DataTableRow } from \"@dhis2/ui\";\nimport { useTableState } from \"../../TableStateProvider\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport { useScorecardStateSelector } from \"../../StateProvider\";\nimport { Fragment } from \"react\";\n\nexport function TableFoot() {\n\tconst table = useTableState();\n\tconst showAverageRow = useScorecardStateSelector<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"]}