@hisptz/dhis2-scorecard 1.0.8 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,6 +7,11 @@ var state = require('../state');
7
7
  var dhis2Utils = require('@hisptz/dhis2-utils');
8
8
  var lodash = require('lodash');
9
9
  var ui = require('@dhis2/ui');
10
+ var JsxParser = require('react-jsx-parser');
11
+
12
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
13
+
14
+ var JsxParser__default = /*#__PURE__*/_interopDefault(JsxParser);
10
15
 
11
16
  function ScorecardHeader() {
12
17
  const config = ConfigProvider.useScorecardConfig();
@@ -30,7 +35,7 @@ function ScorecardHeader() {
30
35
  /*
31
36
  // @ts-ignore */
32
37
  /* @__PURE__ */ jsxRuntime.jsx(
33
- JsxParser,
38
+ JsxParser__default.default,
34
39
  {
35
40
  autoCloseVoidElements: true,
36
41
  className: "w-100",
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/ScorecardHeader.tsx"],"names":[],"mappings":"AAsCK,cAqBC,YArBD;AAtCL,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,sCAAsC;AAE/C,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB,SAAS,cAAc;AAEhB,SAAS,kBAAkB;AACjC,QAAM,SAAS,mBAAmB;AAClC,QAAM,EAAE,cAAc,OAAO,SAAS,IAAI,UAAU,CAAC;AAErD,QAAM,kBACL,+BAAgD,iBAAiB;AAClE,QAAM,YAAY,+BAAwC;AAAA,IACzD;AAAA,IACA;AAAA,EACD,CAAC;AAED,QAAM,UAAU,QAAQ,MAAM,gBAAgB,SAAS,CAAC,eAAe,CAAC;AAExE,QAAM,SAAS,QAAQ,MAAM;AAC5B,QAAI,QAAQ,SAAS,GAAG;AACvB;AAAA,IACD;AACA,WAAO,cAAc,cAAc,KAAK,OAAO,GAAG,EAAY;AAAA,EAC/D,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,CAAC,WAAW;AACf,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,SAAI,WAAU,qBAAoB,IAAI,oBACtC,8BAAC,SAAI,WAAU,OACb;AAAA;AAAA;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,WAAU;AAAA,QACV,SAAS,QAAQ;AAAA,QACjB,UAAU;AAAA,UACT;AAAA,UACA;AAAA,UACA,QAAQ,QAAQ,WAAW,IAAI,QAAQ,OAAO;AAAA,QAC/C;AAAA,QACA,KAAK;AAAA;AAAA,IACN;AAAA,MAEA;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,MACN;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,OAAO,EAAE,QAAQ,EAAE;AAAA,YACnB,IAAI;AAAA,YAEH;AAAA;AAAA,cAAO;AAAA,cACP,GACA,QAAQ,WAAW,IAAI,MAAM,QAAQ,IAAI,KAAK,EAC/C;AAAA;AAAA;AAAA,QACD;AAAA,QACA,oBAAC,QAAG,OAAO,EAAE,OAAO,OAAO,SAAS,QAAQ,EAAE,GAC5C,oBACF;AAAA;AAAA;AAAA,EACD,GAEF,GACD;AAEF","sourcesContent":["import { useScorecardConfig } from \"./ConfigProvider\";\nimport { useMemo } from \"react\";\nimport { useScorecardStateSelectorValue } from \"../state\";\nimport type { PeriodSelection } from \"../schemas/config\";\nimport { PeriodUtility } from \"@hisptz/dhis2-utils\";\nimport { head } from \"lodash\";\nimport { colors } from \"@dhis2/ui\";\n\nexport function ScorecardHeader() {\n\tconst config = useScorecardConfig();\n\tconst { customHeader, title, subtitle } = config ?? {};\n\n\tconst periodSelection =\n\t\tuseScorecardStateSelectorValue<PeriodSelection>(\"periodSelection\");\n\tconst showTitle = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"title\",\n\t]);\n\n\tconst periods = useMemo(() => periodSelection.periods, [periodSelection]);\n\n\tconst period = useMemo(() => {\n\t\tif (periods.length > 1) {\n\t\t\treturn;\n\t\t}\n\t\treturn PeriodUtility.getPeriodById(head(periods)?.id as string);\n\t}, [periods]);\n\n\tif (!showTitle) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div className=\"row space-between\" id={\"scorecard-header\"}>\n\t\t\t<div className=\"row\">\n\t\t\t\t{customHeader ? (\n\t\t\t\t\t/*\n // @ts-ignore */\n\t\t\t\t\t<JsxParser\n\t\t\t\t\t\tautoCloseVoidElements\n\t\t\t\t\t\tclassName=\"w-100\"\n\t\t\t\t\t\tonError={console.error}\n\t\t\t\t\t\tbindings={{\n\t\t\t\t\t\t\ttitle,\n\t\t\t\t\t\t\tsubtitle,\n\t\t\t\t\t\t\tperiod: periods.length === 1 ? period?.name : \"\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tjsx={customHeader}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\t\tjustifyContent: \"center\",\n\t\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\tstyle={{ margin: 8 }}\n\t\t\t\t\t\t\tid={\"data-test-score-card-title\"}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}{\" \"}\n\t\t\t\t\t\t\t{`${\n\t\t\t\t\t\t\t\tperiods.length === 1 ? ` - ${period?.name}` : \"\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t<h3 style={{ color: colors.grey600, margin: 0 }}>\n\t\t\t\t\t\t\t{subtitle}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["../../src/components/ScorecardHeader.tsx"],"names":[],"mappings":"AAuCK,cAqBC,YArBD;AAvCL,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,sCAAsC;AAE/C,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,OAAO,eAAe;AAEf,SAAS,kBAAkB;AACjC,QAAM,SAAS,mBAAmB;AAClC,QAAM,EAAE,cAAc,OAAO,SAAS,IAAI,UAAU,CAAC;AAErD,QAAM,kBACL,+BAAgD,iBAAiB;AAClE,QAAM,YAAY,+BAAwC;AAAA,IACzD;AAAA,IACA;AAAA,EACD,CAAC;AAED,QAAM,UAAU,QAAQ,MAAM,gBAAgB,SAAS,CAAC,eAAe,CAAC;AAExE,QAAM,SAAS,QAAQ,MAAM;AAC5B,QAAI,QAAQ,SAAS,GAAG;AACvB;AAAA,IACD;AACA,WAAO,cAAc,cAAc,KAAK,OAAO,GAAG,EAAY;AAAA,EAC/D,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,CAAC,WAAW;AACf,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,SAAI,WAAU,qBAAoB,IAAI,oBACtC,8BAAC,SAAI,WAAU,OACb;AAAA;AAAA;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,WAAU;AAAA,QACV,SAAS,QAAQ;AAAA,QACjB,UAAU;AAAA,UACT;AAAA,UACA;AAAA,UACA,QAAQ,QAAQ,WAAW,IAAI,QAAQ,OAAO;AAAA,QAC/C;AAAA,QACA,KAAK;AAAA;AAAA,IACN;AAAA,MAEA;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,MACN;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,OAAO,EAAE,QAAQ,EAAE;AAAA,YACnB,IAAI;AAAA,YAEH;AAAA;AAAA,cAAO;AAAA,cACP,GACA,QAAQ,WAAW,IAAI,MAAM,QAAQ,IAAI,KAAK,EAC/C;AAAA;AAAA;AAAA,QACD;AAAA,QACA,oBAAC,QAAG,OAAO,EAAE,OAAO,OAAO,SAAS,QAAQ,EAAE,GAC5C,oBACF;AAAA;AAAA;AAAA,EACD,GAEF,GACD;AAEF","sourcesContent":["import { useScorecardConfig } from \"./ConfigProvider\";\nimport { useMemo } from \"react\";\nimport { useScorecardStateSelectorValue } from \"../state\";\nimport type { PeriodSelection } from \"../schemas/config\";\nimport { PeriodUtility } from \"@hisptz/dhis2-utils\";\nimport { head } from \"lodash\";\nimport { colors } from \"@dhis2/ui\";\nimport JsxParser from \"react-jsx-parser\";\n\nexport function ScorecardHeader() {\n\tconst config = useScorecardConfig();\n\tconst { customHeader, title, subtitle } = config ?? {};\n\n\tconst periodSelection =\n\t\tuseScorecardStateSelectorValue<PeriodSelection>(\"periodSelection\");\n\tconst showTitle = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"title\",\n\t]);\n\n\tconst periods = useMemo(() => periodSelection.periods, [periodSelection]);\n\n\tconst period = useMemo(() => {\n\t\tif (periods.length > 1) {\n\t\t\treturn;\n\t\t}\n\t\treturn PeriodUtility.getPeriodById(head(periods)?.id as string);\n\t}, [periods]);\n\n\tif (!showTitle) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div className=\"row space-between\" id={\"scorecard-header\"}>\n\t\t\t<div className=\"row\">\n\t\t\t\t{customHeader ? (\n\t\t\t\t\t/*\n // @ts-ignore */\n\t\t\t\t\t<JsxParser\n\t\t\t\t\t\tautoCloseVoidElements\n\t\t\t\t\t\tclassName=\"w-100\"\n\t\t\t\t\t\tonError={console.error}\n\t\t\t\t\t\tbindings={{\n\t\t\t\t\t\t\ttitle,\n\t\t\t\t\t\t\tsubtitle,\n\t\t\t\t\t\t\tperiod: periods.length === 1 ? period?.name : \"\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tjsx={customHeader}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\t\tjustifyContent: \"center\",\n\t\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\tstyle={{ margin: 8 }}\n\t\t\t\t\t\t\tid={\"data-test-score-card-title\"}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}{\" \"}\n\t\t\t\t\t\t\t{`${\n\t\t\t\t\t\t\t\tperiods.length === 1 ? ` - ${period?.name}` : \"\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t<h3 style={{ color: colors.grey600, margin: 0 }}>\n\t\t\t\t\t\t\t{subtitle}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
@@ -3,28 +3,26 @@
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var ui = require('@dhis2/ui');
5
5
  var i18n = require('@dhis2/d2-i18n');
6
- var state = require('../../../state');
6
+ var react = require('react');
7
7
 
8
8
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
9
9
 
10
10
  var i18n__default = /*#__PURE__*/_interopDefault(i18n);
11
11
 
12
- function MetaFooterCell() {
13
- const itemNumber = state.useScorecardStateSelectorValue([
14
- "options",
15
- "itemNumber"
16
- ]);
12
+ function MetaFooterCell({
13
+ column,
14
+ table
15
+ }) {
16
+ const colSpan = react.useMemo(() => {
17
+ return table.getVisibleLeafColumns().findIndex(({ id }) => id === column.id) + 1;
18
+ }, [table.getVisibleLeafColumns(), column.id]);
17
19
  return /* @__PURE__ */ jsxRuntime.jsx(
18
20
  ui.DataTableCell,
19
21
  {
20
22
  bordered: true,
21
- width: "300px",
22
- style: {
23
- width: "fit-content",
24
- minWidth: 300
25
- },
23
+ width: `${column.getSize()}px`,
26
24
  align: "center",
27
- colSpan: itemNumber ? "3" : "2",
25
+ colSpan: colSpan.toString(),
28
26
  fixed: true,
29
27
  left: "0",
30
28
  children: /* @__PURE__ */ jsxRuntime.jsx("b", { style: { padding: "8px 0" }, children: i18n__default.default.t("Average") })
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/ScorecardTable/components/MetaFooterCell.tsx"],"names":[],"mappings":"AAyBG;AAzBH,SAAS,qBAAqB;AAC9B,OAAO,UAAU;AACjB,SAAS,sCAAsC;AAExC,SAAS,iBAAiB;AAChC,QAAM,aAAa,+BAAwC;AAAA,IAC1D;AAAA,IACA;AAAA,EACD,CAAC;AAED,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAQ;AAAA,MACR,OAAM;AAAA,MACN,OAAO;AAAA,QACN,OAAO;AAAA,QACP,UAAU;AAAA,MACX;AAAA,MACA,OAAM;AAAA,MACN,SAAS,aAAa,MAAM;AAAA,MAC5B,OAAK;AAAA,MAGL,MAAK;AAAA,MAEL,8BAAC,OAAE,OAAO,EAAE,SAAS,QAAQ,GAAI,eAAK,EAAE,SAAS,GAAE;AAAA;AAAA,EACpD;AAEF","sourcesContent":["import { DataTableCell } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useScorecardStateSelectorValue } from \"../../../state\";\n\nexport function MetaFooterCell() {\n\tconst itemNumber = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"itemNumber\",\n\t]);\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tbordered\n\t\t\twidth=\"300px\"\n\t\t\tstyle={{\n\t\t\t\twidth: \"fit-content\",\n\t\t\t\tminWidth: 300,\n\t\t\t}}\n\t\t\talign=\"center\"\n\t\t\tcolSpan={itemNumber ? \"3\" : \"2\"}\n\t\t\tfixed\n\t\t\t/*\n // @ts-ignore */\n\t\t\tleft=\"0\"\n\t\t>\n\t\t\t<b style={{ padding: \"8px 0\" }}>{i18n.t(\"Average\")}</b>\n\t\t</DataTableCell>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["../../../../src/components/ScorecardTable/components/MetaFooterCell.tsx"],"names":[],"mappings":"AA6BG;AA7BH,SAAS,qBAAqB;AAC9B,OAAO,UAAU;AAGjB,SAAS,eAAe;AAEjB,SAAS,eAAe;AAAA,EAC9B;AAAA,EACA;AACD,GAA2C;AAC1C,QAAM,UAAU,QAAQ,MAAM;AAC7B,WACC,MACE,sBAAsB,EACtB,UAAU,CAAC,EAAE,GAAG,MAAM,OAAO,OAAO,EAAE,IAAI;AAAA,EAE9C,GAAG,CAAC,MAAM,sBAAsB,GAAG,OAAO,EAAE,CAAC;AAE7C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAQ;AAAA,MACR,OAAO,GAAG,OAAO,QAAQ,CAAC;AAAA,MAC1B,OAAM;AAAA,MACN,SAAS,QAAQ,SAAS;AAAA,MAC1B,OAAK;AAAA,MAGL,MAAK;AAAA,MAEL,8BAAC,OAAE,OAAO,EAAE,SAAS,QAAQ,GAAI,eAAK,EAAE,SAAS,GAAE;AAAA;AAAA,EACpD;AAEF","sourcesContent":["import { DataTableCell } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport type { ScorecardTableData } from \"../../../schemas/config\";\nimport type { HeaderContext } from \"@tanstack/react-table\";\nimport { useMemo } from \"react\";\n\nexport function MetaFooterCell({\n\tcolumn,\n\ttable,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst colSpan = useMemo(() => {\n\t\treturn (\n\t\t\ttable\n\t\t\t\t.getVisibleLeafColumns()\n\t\t\t\t.findIndex(({ id }) => id === column.id) + 1\n\t\t);\n\t}, [table.getVisibleLeafColumns(), column.id]);\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tbordered\n\t\t\twidth={`${column.getSize()}px`}\n\t\t\talign=\"center\"\n\t\t\tcolSpan={colSpan.toString()}\n\t\t\tfixed\n\t\t\t/*\n // @ts-ignore */\n\t\t\tleft=\"0\"\n\t\t>\n\t\t\t<b style={{ padding: \"8px 0\" }}>{i18n.t(\"Average\")}</b>\n\t\t</DataTableCell>\n\t);\n}\n"]}
@@ -5,6 +5,7 @@ import { useScorecardStateSelectorValue } from '../state';
5
5
  import { PeriodUtility } from '@hisptz/dhis2-utils';
6
6
  import { head } from 'lodash';
7
7
  import { colors } from '@dhis2/ui';
8
+ import JsxParser from 'react-jsx-parser';
8
9
 
9
10
  function ScorecardHeader() {
10
11
  const config = useScorecardConfig();
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/ScorecardHeader.tsx"],"names":[],"mappings":"AAsCK,cAqBC,YArBD;AAtCL,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,sCAAsC;AAE/C,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB,SAAS,cAAc;AAEhB,SAAS,kBAAkB;AACjC,QAAM,SAAS,mBAAmB;AAClC,QAAM,EAAE,cAAc,OAAO,SAAS,IAAI,UAAU,CAAC;AAErD,QAAM,kBACL,+BAAgD,iBAAiB;AAClE,QAAM,YAAY,+BAAwC;AAAA,IACzD;AAAA,IACA;AAAA,EACD,CAAC;AAED,QAAM,UAAU,QAAQ,MAAM,gBAAgB,SAAS,CAAC,eAAe,CAAC;AAExE,QAAM,SAAS,QAAQ,MAAM;AAC5B,QAAI,QAAQ,SAAS,GAAG;AACvB;AAAA,IACD;AACA,WAAO,cAAc,cAAc,KAAK,OAAO,GAAG,EAAY;AAAA,EAC/D,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,CAAC,WAAW;AACf,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,SAAI,WAAU,qBAAoB,IAAI,oBACtC,8BAAC,SAAI,WAAU,OACb;AAAA;AAAA;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,WAAU;AAAA,QACV,SAAS,QAAQ;AAAA,QACjB,UAAU;AAAA,UACT;AAAA,UACA;AAAA,UACA,QAAQ,QAAQ,WAAW,IAAI,QAAQ,OAAO;AAAA,QAC/C;AAAA,QACA,KAAK;AAAA;AAAA,IACN;AAAA,MAEA;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,MACN;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,OAAO,EAAE,QAAQ,EAAE;AAAA,YACnB,IAAI;AAAA,YAEH;AAAA;AAAA,cAAO;AAAA,cACP,GACA,QAAQ,WAAW,IAAI,MAAM,QAAQ,IAAI,KAAK,EAC/C;AAAA;AAAA;AAAA,QACD;AAAA,QACA,oBAAC,QAAG,OAAO,EAAE,OAAO,OAAO,SAAS,QAAQ,EAAE,GAC5C,oBACF;AAAA;AAAA;AAAA,EACD,GAEF,GACD;AAEF","sourcesContent":["import { useScorecardConfig } from \"./ConfigProvider\";\nimport { useMemo } from \"react\";\nimport { useScorecardStateSelectorValue } from \"../state\";\nimport type { PeriodSelection } from \"../schemas/config\";\nimport { PeriodUtility } from \"@hisptz/dhis2-utils\";\nimport { head } from \"lodash\";\nimport { colors } from \"@dhis2/ui\";\n\nexport function ScorecardHeader() {\n\tconst config = useScorecardConfig();\n\tconst { customHeader, title, subtitle } = config ?? {};\n\n\tconst periodSelection =\n\t\tuseScorecardStateSelectorValue<PeriodSelection>(\"periodSelection\");\n\tconst showTitle = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"title\",\n\t]);\n\n\tconst periods = useMemo(() => periodSelection.periods, [periodSelection]);\n\n\tconst period = useMemo(() => {\n\t\tif (periods.length > 1) {\n\t\t\treturn;\n\t\t}\n\t\treturn PeriodUtility.getPeriodById(head(periods)?.id as string);\n\t}, [periods]);\n\n\tif (!showTitle) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div className=\"row space-between\" id={\"scorecard-header\"}>\n\t\t\t<div className=\"row\">\n\t\t\t\t{customHeader ? (\n\t\t\t\t\t/*\n // @ts-ignore */\n\t\t\t\t\t<JsxParser\n\t\t\t\t\t\tautoCloseVoidElements\n\t\t\t\t\t\tclassName=\"w-100\"\n\t\t\t\t\t\tonError={console.error}\n\t\t\t\t\t\tbindings={{\n\t\t\t\t\t\t\ttitle,\n\t\t\t\t\t\t\tsubtitle,\n\t\t\t\t\t\t\tperiod: periods.length === 1 ? period?.name : \"\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tjsx={customHeader}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\t\tjustifyContent: \"center\",\n\t\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\tstyle={{ margin: 8 }}\n\t\t\t\t\t\t\tid={\"data-test-score-card-title\"}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}{\" \"}\n\t\t\t\t\t\t\t{`${\n\t\t\t\t\t\t\t\tperiods.length === 1 ? ` - ${period?.name}` : \"\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t<h3 style={{ color: colors.grey600, margin: 0 }}>\n\t\t\t\t\t\t\t{subtitle}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["../../../src/components/ScorecardHeader.tsx"],"names":[],"mappings":"AAuCK,cAqBC,YArBD;AAvCL,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,sCAAsC;AAE/C,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,OAAO,eAAe;AAEf,SAAS,kBAAkB;AACjC,QAAM,SAAS,mBAAmB;AAClC,QAAM,EAAE,cAAc,OAAO,SAAS,IAAI,UAAU,CAAC;AAErD,QAAM,kBACL,+BAAgD,iBAAiB;AAClE,QAAM,YAAY,+BAAwC;AAAA,IACzD;AAAA,IACA;AAAA,EACD,CAAC;AAED,QAAM,UAAU,QAAQ,MAAM,gBAAgB,SAAS,CAAC,eAAe,CAAC;AAExE,QAAM,SAAS,QAAQ,MAAM;AAC5B,QAAI,QAAQ,SAAS,GAAG;AACvB;AAAA,IACD;AACA,WAAO,cAAc,cAAc,KAAK,OAAO,GAAG,EAAY;AAAA,EAC/D,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,CAAC,WAAW;AACf,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,SAAI,WAAU,qBAAoB,IAAI,oBACtC,8BAAC,SAAI,WAAU,OACb;AAAA;AAAA;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,WAAU;AAAA,QACV,SAAS,QAAQ;AAAA,QACjB,UAAU;AAAA,UACT;AAAA,UACA;AAAA,UACA,QAAQ,QAAQ,WAAW,IAAI,QAAQ,OAAO;AAAA,QAC/C;AAAA,QACA,KAAK;AAAA;AAAA,IACN;AAAA,MAEA;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,MACN;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,OAAO,EAAE,QAAQ,EAAE;AAAA,YACnB,IAAI;AAAA,YAEH;AAAA;AAAA,cAAO;AAAA,cACP,GACA,QAAQ,WAAW,IAAI,MAAM,QAAQ,IAAI,KAAK,EAC/C;AAAA;AAAA;AAAA,QACD;AAAA,QACA,oBAAC,QAAG,OAAO,EAAE,OAAO,OAAO,SAAS,QAAQ,EAAE,GAC5C,oBACF;AAAA;AAAA;AAAA,EACD,GAEF,GACD;AAEF","sourcesContent":["import { useScorecardConfig } from \"./ConfigProvider\";\nimport { useMemo } from \"react\";\nimport { useScorecardStateSelectorValue } from \"../state\";\nimport type { PeriodSelection } from \"../schemas/config\";\nimport { PeriodUtility } from \"@hisptz/dhis2-utils\";\nimport { head } from \"lodash\";\nimport { colors } from \"@dhis2/ui\";\nimport JsxParser from \"react-jsx-parser\";\n\nexport function ScorecardHeader() {\n\tconst config = useScorecardConfig();\n\tconst { customHeader, title, subtitle } = config ?? {};\n\n\tconst periodSelection =\n\t\tuseScorecardStateSelectorValue<PeriodSelection>(\"periodSelection\");\n\tconst showTitle = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"title\",\n\t]);\n\n\tconst periods = useMemo(() => periodSelection.periods, [periodSelection]);\n\n\tconst period = useMemo(() => {\n\t\tif (periods.length > 1) {\n\t\t\treturn;\n\t\t}\n\t\treturn PeriodUtility.getPeriodById(head(periods)?.id as string);\n\t}, [periods]);\n\n\tif (!showTitle) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div className=\"row space-between\" id={\"scorecard-header\"}>\n\t\t\t<div className=\"row\">\n\t\t\t\t{customHeader ? (\n\t\t\t\t\t/*\n // @ts-ignore */\n\t\t\t\t\t<JsxParser\n\t\t\t\t\t\tautoCloseVoidElements\n\t\t\t\t\t\tclassName=\"w-100\"\n\t\t\t\t\t\tonError={console.error}\n\t\t\t\t\t\tbindings={{\n\t\t\t\t\t\t\ttitle,\n\t\t\t\t\t\t\tsubtitle,\n\t\t\t\t\t\t\tperiod: periods.length === 1 ? period?.name : \"\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tjsx={customHeader}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\t\tjustifyContent: \"center\",\n\t\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\tstyle={{ margin: 8 }}\n\t\t\t\t\t\t\tid={\"data-test-score-card-title\"}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}{\" \"}\n\t\t\t\t\t\t\t{`${\n\t\t\t\t\t\t\t\tperiods.length === 1 ? ` - ${period?.name}` : \"\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t<h3 style={{ color: colors.grey600, margin: 0 }}>\n\t\t\t\t\t\t\t{subtitle}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
@@ -1,24 +1,22 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { DataTableCell } from '@dhis2/ui';
3
3
  import i18n from '@dhis2/d2-i18n';
4
- import { useScorecardStateSelectorValue } from '../../../state';
4
+ import { useMemo } from 'react';
5
5
 
6
- function MetaFooterCell() {
7
- const itemNumber = useScorecardStateSelectorValue([
8
- "options",
9
- "itemNumber"
10
- ]);
6
+ function MetaFooterCell({
7
+ column,
8
+ table
9
+ }) {
10
+ const colSpan = useMemo(() => {
11
+ return table.getVisibleLeafColumns().findIndex(({ id }) => id === column.id) + 1;
12
+ }, [table.getVisibleLeafColumns(), column.id]);
11
13
  return /* @__PURE__ */ jsx(
12
14
  DataTableCell,
13
15
  {
14
16
  bordered: true,
15
- width: "300px",
16
- style: {
17
- width: "fit-content",
18
- minWidth: 300
19
- },
17
+ width: `${column.getSize()}px`,
20
18
  align: "center",
21
- colSpan: itemNumber ? "3" : "2",
19
+ colSpan: colSpan.toString(),
22
20
  fixed: true,
23
21
  left: "0",
24
22
  children: /* @__PURE__ */ jsx("b", { style: { padding: "8px 0" }, children: i18n.t("Average") })
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/ScorecardTable/components/MetaFooterCell.tsx"],"names":[],"mappings":"AAyBG;AAzBH,SAAS,qBAAqB;AAC9B,OAAO,UAAU;AACjB,SAAS,sCAAsC;AAExC,SAAS,iBAAiB;AAChC,QAAM,aAAa,+BAAwC;AAAA,IAC1D;AAAA,IACA;AAAA,EACD,CAAC;AAED,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAQ;AAAA,MACR,OAAM;AAAA,MACN,OAAO;AAAA,QACN,OAAO;AAAA,QACP,UAAU;AAAA,MACX;AAAA,MACA,OAAM;AAAA,MACN,SAAS,aAAa,MAAM;AAAA,MAC5B,OAAK;AAAA,MAGL,MAAK;AAAA,MAEL,8BAAC,OAAE,OAAO,EAAE,SAAS,QAAQ,GAAI,eAAK,EAAE,SAAS,GAAE;AAAA;AAAA,EACpD;AAEF","sourcesContent":["import { DataTableCell } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useScorecardStateSelectorValue } from \"../../../state\";\n\nexport function MetaFooterCell() {\n\tconst itemNumber = useScorecardStateSelectorValue<boolean>([\n\t\t\"options\",\n\t\t\"itemNumber\",\n\t]);\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tbordered\n\t\t\twidth=\"300px\"\n\t\t\tstyle={{\n\t\t\t\twidth: \"fit-content\",\n\t\t\t\tminWidth: 300,\n\t\t\t}}\n\t\t\talign=\"center\"\n\t\t\tcolSpan={itemNumber ? \"3\" : \"2\"}\n\t\t\tfixed\n\t\t\t/*\n // @ts-ignore */\n\t\t\tleft=\"0\"\n\t\t>\n\t\t\t<b style={{ padding: \"8px 0\" }}>{i18n.t(\"Average\")}</b>\n\t\t</DataTableCell>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["../../../../../src/components/ScorecardTable/components/MetaFooterCell.tsx"],"names":[],"mappings":"AA6BG;AA7BH,SAAS,qBAAqB;AAC9B,OAAO,UAAU;AAGjB,SAAS,eAAe;AAEjB,SAAS,eAAe;AAAA,EAC9B;AAAA,EACA;AACD,GAA2C;AAC1C,QAAM,UAAU,QAAQ,MAAM;AAC7B,WACC,MACE,sBAAsB,EACtB,UAAU,CAAC,EAAE,GAAG,MAAM,OAAO,OAAO,EAAE,IAAI;AAAA,EAE9C,GAAG,CAAC,MAAM,sBAAsB,GAAG,OAAO,EAAE,CAAC;AAE7C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAQ;AAAA,MACR,OAAO,GAAG,OAAO,QAAQ,CAAC;AAAA,MAC1B,OAAM;AAAA,MACN,SAAS,QAAQ,SAAS;AAAA,MAC1B,OAAK;AAAA,MAGL,MAAK;AAAA,MAEL,8BAAC,OAAE,OAAO,EAAE,SAAS,QAAQ,GAAI,eAAK,EAAE,SAAS,GAAE;AAAA;AAAA,EACpD;AAEF","sourcesContent":["import { DataTableCell } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport type { ScorecardTableData } from \"../../../schemas/config\";\nimport type { HeaderContext } from \"@tanstack/react-table\";\nimport { useMemo } from \"react\";\n\nexport function MetaFooterCell({\n\tcolumn,\n\ttable,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst colSpan = useMemo(() => {\n\t\treturn (\n\t\t\ttable\n\t\t\t\t.getVisibleLeafColumns()\n\t\t\t\t.findIndex(({ id }) => id === column.id) + 1\n\t\t);\n\t}, [table.getVisibleLeafColumns(), column.id]);\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tbordered\n\t\t\twidth={`${column.getSize()}px`}\n\t\t\talign=\"center\"\n\t\t\tcolSpan={colSpan.toString()}\n\t\t\tfixed\n\t\t\t/*\n // @ts-ignore */\n\t\t\tleft=\"0\"\n\t\t>\n\t\t\t<b style={{ padding: \"8px 0\" }}>{i18n.t(\"Average\")}</b>\n\t\t</DataTableCell>\n\t);\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"ScorecardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ScorecardHeader.tsx"],"names":[],"mappings":"AAQA,wBAAgB,eAAe,mDAoE9B"}
1
+ {"version":3,"file":"ScorecardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ScorecardHeader.tsx"],"names":[],"mappings":"AASA,wBAAgB,eAAe,mDAoE9B"}
@@ -1,2 +1,4 @@
1
- export declare function MetaFooterCell(): import("react/jsx-runtime").JSX.Element;
1
+ import type { ScorecardTableData } from "../../../schemas/config";
2
+ import type { HeaderContext } from "@tanstack/react-table";
3
+ export declare function MetaFooterCell({ column, table, }: HeaderContext<ScorecardTableData, any>): import("react/jsx-runtime").JSX.Element;
2
4
  //# sourceMappingURL=MetaFooterCell.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"MetaFooterCell.d.ts","sourceRoot":"","sources":["../../../../../src/components/ScorecardTable/components/MetaFooterCell.tsx"],"names":[],"mappings":"AAIA,wBAAgB,cAAc,4CAwB7B"}
1
+ {"version":3,"file":"MetaFooterCell.d.ts","sourceRoot":"","sources":["../../../../../src/components/ScorecardTable/components/MetaFooterCell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG3D,wBAAgB,cAAc,CAAC,EAC9B,MAAM,EACN,KAAK,GACL,EAAE,aAAa,CAAC,kBAAkB,EAAE,GAAG,CAAC,2CAuBxC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hisptz/dhis2-scorecard",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/esm/index.js",
6
6
  "types": "./dist/types/index.d.ts",
@@ -46,8 +46,8 @@
46
46
  "tsup": "^8.0.1",
47
47
  "typescript": "^5.3.3",
48
48
  "usehooks-ts": "^2.9.2",
49
- "@repo/typescript-config": "0.0.0",
50
- "@repo/eslint-config": "0.0.0"
49
+ "@repo/eslint-config": "0.0.0",
50
+ "@repo/typescript-config": "0.0.0"
51
51
  },
52
52
  "dependencies": {
53
53
  "@tanstack/react-table": "^8.19.3",
@@ -57,13 +57,14 @@
57
57
  "react-dnd": "^16.0.1",
58
58
  "react-dnd-html5-backend": "^16.0.1",
59
59
  "react-error-boundary": "^4.0.12",
60
+ "react-jsx-parser": "^2.2.0",
60
61
  "react-to-print": "^3.0.1",
61
62
  "recoil": "^0.7.7",
62
63
  "xlsx": "^0.18.5",
63
64
  "zod": "^3.23.8",
65
+ "@hisptz/dhis2-ui": "2.0.27",
64
66
  "@hisptz/dhis2-utils": "2.0.8",
65
- "@hisptz/dhis2-analytics": "2.0.46",
66
- "@hisptz/dhis2-ui": "2.0.27"
67
+ "@hisptz/dhis2-analytics": "2.0.46"
67
68
  },
68
69
  "peerDependencies": {
69
70
  "@dhis2/app-runtime": "^3.10.2",