@hisptz/dhis2-analytics 1.0.65 → 2.0.0-alpha.0

package/dist/components/SingleValueContainer/SingleValueContainer.stories.mjs

@@ -0,0 +1,145 @@
+import { SingleValueVisualizer } from './SingleValueVisualizer';
+
+const meta = {
+  title: "Single Value Visualizer",
+  component: SingleValueVisualizer
+};
+var SingleValueContainer_stories_default = meta;
+const Default = {
+  name: "Default"
+};
+Default.args = {
+  title: "PRIORITY INDICATORS",
+  singleValueItems: [
+    {
+      label: "Total Bookings",
+      value: 136
+    },
+    {
+      label: "At least one dose",
+      value: 45,
+      percentage: 23,
+      color: "#0D47A1"
+    },
+    {
+      label: "Partially vaccinated",
+      value: 13,
+      percentage: 17,
+      color: "#0D47A1"
+    },
+    {
+      label: "Fully vaccinated",
+      value: 126,
+      percentage: 83,
+      color: "#0D47A1"
+    },
+    {
+      label: "Number of AEFI",
+      value: 26
+    }
+  ]
+};
+const AnimatedAllValues = {
+  name: "Animated all values"
+};
+AnimatedAllValues.args = {
+  title: "PRIORITY INDICATORS",
+  animationDuration: 1500,
+  animationDelay: 500,
+  singleValueItems: [
+    {
+      label: "Total Bookings",
+      value: 136344
+    },
+    {
+      label: "At least one dose",
+      value: 4423,
+      percentage: 23,
+      color: "#0D47A1"
+    },
+    {
+      label: "Partially vaccinated",
+      value: 1394,
+      percentage: 17,
+      color: "#0D47A1"
+    },
+    {
+      label: "Fully vaccinated",
+      value: 12432,
+      percentage: 83,
+      color: "#0D47A1"
+    },
+    {
+      label: "Number of AEFI",
+      value: 26423
+    }
+  ]
+};
+const AnimatedSingleValue = {
+  name: "Animated single value"
+};
+AnimatedSingleValue.args = {
+  title: "PRIORITY INDICATORS",
+  singleValueItems: [
+    {
+      label: "Total Bookings",
+      value: 13634244,
+      animationDuration: 1e3,
+      animationDelay: 100
+    },
+    {
+      label: "At least one dose",
+      value: 45423,
+      percentage: 23,
+      color: "#0D47A1",
+      animationDuration: 1e3,
+      animationDelay: 600
+    },
+    {
+      label: "Partially vaccinated",
+      value: 13434,
+      percentage: 17,
+      color: "#0D47A1",
+      animationDuration: 1e3,
+      animationDelay: 1100
+    },
+    {
+      label: "Fully vaccinated",
+      value: 126432,
+      percentage: 83,
+      color: "#0D47A1",
+      animationDuration: 1e3,
+      animationDelay: 1600
+    },
+    {
+      label: "Number of AEFI",
+      value: 268423,
+      animationDuration: 1e3,
+      animationDelay: 2e3
+    }
+  ]
+};
+const SingleValuesWithDecimalPlaces = {
+  name: "Single value with decimal places"
+};
+SingleValuesWithDecimalPlaces.args = {
+  title: "ENROLLMENTS",
+  animationDuration: 1500,
+  animationDelay: 500,
+  singleValueItems: [
+    {
+      label: "Number of Enrolled Clients",
+      value: 268423,
+      decimalPlaces: 3
+    },
+    {
+      label: "Number of Served Clients",
+      value: 268423,
+      decimalPlaces: 1
+    }
+  ]
+};
+
+export { AnimatedAllValues, AnimatedSingleValue, Default, SingleValuesWithDecimalPlaces, SingleValueContainer_stories_default as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=SingleValueContainer.stories.mjs.map

package/dist/components/SingleValueContainer/SingleValueContainer.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SingleValueContainer/SingleValueContainer.stories.tsx"],"names":[],"mappings":"AACA,SAAS,6BAA6B;AAEtC,MAAM,OAA2C;AAAA,EAChD,OAAO;AAAA,EACP,WAAW;AACZ;AAEA,IAAO,uCAAQ;AAGR,MAAM,UAAiB;AAAA,EAC7B,MAAM;AACP;AACA,QAAQ,OAAO;AAAA,EACd,OAAO;AAAA,EACP,kBAAkB;AAAA,IACjB;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,IACR;AAAA,EACD;AACD;AAEO,MAAM,oBAA2B;AAAA,EACvC,MAAM;AACP;AACA,kBAAkB,OAAO;AAAA,EACxB,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,IACjB;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IACR;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,IACR;AAAA,EACD;AACD;AAEO,MAAM,sBAA6B;AAAA,EACzC,MAAM;AACP;AACA,oBAAoB,OAAO;AAAA,EAC1B,OAAO;AAAA,EACP,kBAAkB;AAAA,IACjB;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,IACjB;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,IACjB;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,IACjB;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,IACjB;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,IACjB;AAAA,EACD;AACD;AAEO,MAAM,gCAAuC;AAAA,EACnD,MAAM;AACP;AACA,8BAA8B,OAAO;AAAA,EACpC,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,IACjB;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,eAAe;AAAA,IAChB;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,eAAe;AAAA,IAChB;AAAA,EACD;AACD","sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport { SingleValueVisualizer } from \"./SingleValueVisualizer\";\n\nconst meta: Meta<typeof SingleValueVisualizer> = {\n\ttitle: \"Single Value Visualizer\",\n\tcomponent: SingleValueVisualizer,\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof SingleValueVisualizer>;\nexport const Default: Story = {\n\tname: \"Default\",\n};\nDefault.args = {\n\ttitle: \"PRIORITY INDICATORS\",\n\tsingleValueItems: [\n\t\t{\n\t\t\tlabel: \"Total Bookings\",\n\t\t\tvalue: 136,\n\t\t},\n\t\t{\n\t\t\tlabel: \"At least one dose\",\n\t\t\tvalue: 45,\n\t\t\tpercentage: 23,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Partially vaccinated\",\n\t\t\tvalue: 13,\n\t\t\tpercentage: 17,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Fully vaccinated\",\n\t\t\tvalue: 126,\n\t\t\tpercentage: 83,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Number of AEFI\",\n\t\t\tvalue: 26,\n\t\t},\n\t],\n};\n\nexport const AnimatedAllValues: Story = {\n\tname: \"Animated all values\",\n};\nAnimatedAllValues.args = {\n\ttitle: \"PRIORITY INDICATORS\",\n\tanimationDuration: 1500,\n\tanimationDelay: 500,\n\tsingleValueItems: [\n\t\t{\n\t\t\tlabel: \"Total Bookings\",\n\t\t\tvalue: 136344,\n\t\t},\n\t\t{\n\t\t\tlabel: \"At least one dose\",\n\t\t\tvalue: 4423,\n\t\t\tpercentage: 23,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Partially vaccinated\",\n\t\t\tvalue: 1394,\n\t\t\tpercentage: 17,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Fully vaccinated\",\n\t\t\tvalue: 12432,\n\t\t\tpercentage: 83,\n\t\t\tcolor: \"#0D47A1\",\n\t\t},\n\t\t{\n\t\t\tlabel: \"Number of AEFI\",\n\t\t\tvalue: 26423,\n\t\t},\n\t],\n};\n\nexport const AnimatedSingleValue: Story = {\n\tname: \"Animated single value\",\n};\nAnimatedSingleValue.args = {\n\ttitle: \"PRIORITY INDICATORS\",\n\tsingleValueItems: [\n\t\t{\n\t\t\tlabel: \"Total Bookings\",\n\t\t\tvalue: 13634244,\n\t\t\tanimationDuration: 1000,\n\t\t\tanimationDelay: 100,\n\t\t},\n\t\t{\n\t\t\tlabel: \"At least one dose\",\n\t\t\tvalue: 45423,\n\t\t\tpercentage: 23,\n\t\t\tcolor: \"#0D47A1\",\n\t\t\tanimationDuration: 1000,\n\t\t\tanimationDelay: 600,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Partially vaccinated\",\n\t\t\tvalue: 13434,\n\t\t\tpercentage: 17,\n\t\t\tcolor: \"#0D47A1\",\n\t\t\tanimationDuration: 1000,\n\t\t\tanimationDelay: 1100,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Fully vaccinated\",\n\t\t\tvalue: 126432,\n\t\t\tpercentage: 83,\n\t\t\tcolor: \"#0D47A1\",\n\t\t\tanimationDuration: 1000,\n\t\t\tanimationDelay: 1600,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Number of AEFI\",\n\t\t\tvalue: 268423,\n\t\t\tanimationDuration: 1000,\n\t\t\tanimationDelay: 2000,\n\t\t},\n\t],\n};\n\nexport const SingleValuesWithDecimalPlaces: Story = {\n\tname: \"Single value with decimal places\",\n};\nSingleValuesWithDecimalPlaces.args = {\n\ttitle: \"ENROLLMENTS\",\n\tanimationDuration: 1500,\n\tanimationDelay: 500,\n\tsingleValueItems: [\n\t\t{\n\t\t\tlabel: \"Number of Enrolled Clients\",\n\t\t\tvalue: 268423,\n\t\t\tdecimalPlaces: 3,\n\t\t},\n\t\t{\n\t\t\tlabel: \"Number of Served Clients\",\n\t\t\tvalue: 268423,\n\t\t\tdecimalPlaces: 1,\n\t\t},\n\t],\n};\n"]}

package/dist/components/SingleValueContainer/SingleValueVisualizer.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var i18n = require('@dhis2/d2-i18n');
+var ui = require('@dhis2/ui');
+var react = require('react');
+var SingleValueItem = require('./components/SingleValueItem/SingleValueItem');
+var styles = require('./styles/SingleValueContainer.module.css');
+var props = require('./types/props');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var i18n__default = /*#__PURE__*/_interopDefault(i18n);
+var SingleValueItem__default = /*#__PURE__*/_interopDefault(SingleValueItem);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function SingleValueVisualizer({
+  title,
+  singleValueItems,
+  animationDuration,
+  animationDelay
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-100 h-100", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.CssReset, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { children: i18n__default.default.t("Loading ...") }), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: `${styles__default.default["font-x-large"]} ${styles__default.default["font-bold"]}`,
+          children: title
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default["single-value-list"], children: singleValueItems.map(
+        (singleValueItem) => /* @__PURE__ */ jsxRuntime.jsx(
+          SingleValueItem__default.default,
+          {
+            ...singleValueItem,
+            globalAnimationDuration: animationDuration,
+            globalAnimationDelay: animationDelay
+          },
+          `${singleValueItem.label}-${singleValueItem.value}`
+        )
+      ) })
+    ] }) })
+  ] });
+}
+const SingleValueContainer = SingleValueVisualizer;
+
+Object.defineProperty(exports, 'SingleValueItem', {
+  enumerable: true,
+  get: function () { return SingleValueItem__default.default; }
+});
+exports.SingleValueContainer = SingleValueContainer;
+exports.SingleValueVisualizer = SingleValueVisualizer;
+Object.keys(props).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return props[k]; }
+  });
+});
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=SingleValueVisualizer.js.map

package/dist/components/SingleValueContainer/SingleValueVisualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SingleValueContainer/SingleValueVisualizer.tsx"],"names":[],"mappings":"AAiBG,cAEC,YAFD;AAjBH,OAAO,UAAU;AACjB,SAAS,gBAAgB;AACzB,SAAgB,gBAAgB;AAChC,OAAO,qBAAqB;AAC5B,OAAO,YAAY;AAGnB,cAAc;AAEP,SAAS,sBAAsB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAmD;AAClD,SACC,qBAAC,SAAI,WAAU,eACd;AAAA,wBAAC,YAAS;AAAA,IACV,oBAAC,YAAS,UAAU,oBAAC,SAAK,eAAK,EAAE,aAAa,GAAE,GAC/C,+BAAC,SACA;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,GAAG,OAAO,cAAc,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,UAE1D;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,SAAI,WAAW,OAAO,mBAAmB,GACxC,2BAAiB;AAAA,QACjB,CAAC,oBACA;AAAA,UAAC;AAAA;AAAA,YAEC,GAAG;AAAA,YACJ,yBAAyB;AAAA,YACzB,sBAAsB;AAAA;AAAA,UAHjB,GAAG,gBAAgB,KAAK,IAAI,gBAAgB,KAAK;AAAA,QAIvD;AAAA,MAEF,GACD;AAAA,OACD,GACD;AAAA,KACD;AAEF;AAKO,MAAM,uBAAuB","sourcesContent":["import i18n from \"@dhis2/d2-i18n\";\nimport { CssReset } from \"@dhis2/ui\";\nimport React, { Suspense } from \"react\";\nimport SingleValueItem from \"./components/SingleValueItem/SingleValueItem\";\nimport styles from \"./styles/SingleValueContainer.module.css\";\nimport { SingleValue, SingleValueVisualizerProps } from \"./types/props\";\n\nexport * from \"./types/props\";\n\nexport function SingleValueVisualizer({\n\ttitle,\n\tsingleValueItems,\n\tanimationDuration,\n\tanimationDelay,\n}: SingleValueVisualizerProps): React.ReactElement {\n\treturn (\n\t\t<div className=\"w-100 h-100\">\n\t\t\t<CssReset />\n\t\t\t<Suspense fallback={<div>{i18n.t(\"Loading ...\")}</div>}>\n\t\t\t\t<div>\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={`${styles[\"font-x-large\"]} ${styles[\"font-bold\"]}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div className={styles[\"single-value-list\"]}>\n\t\t\t\t\t\t{singleValueItems.map(\n\t\t\t\t\t\t\t(singleValueItem: SingleValue) => (\n\t\t\t\t\t\t\t\t<SingleValueItem\n\t\t\t\t\t\t\t\t\tkey={`${singleValueItem.label}-${singleValueItem.value}`}\n\t\t\t\t\t\t\t\t\t{...singleValueItem}\n\t\t\t\t\t\t\t\t\tglobalAnimationDuration={animationDuration}\n\t\t\t\t\t\t\t\t\tglobalAnimationDelay={animationDelay}\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</div>\n\t\t\t\t</div>\n\t\t\t</Suspense>\n\t\t</div>\n\t);\n}\n\n/**\n * @deprecated since `v2`. Use `SingleValueVisualizer` instead\n * */\nexport const SingleValueContainer = SingleValueVisualizer;\nexport { SingleValueItem };\n"]}

package/dist/components/SingleValueContainer/SingleValueVisualizer.mjs

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { CssReset } from '@dhis2/ui';
+import { Suspense } from 'react';
+import SingleValueItem from './components/SingleValueItem/SingleValueItem';
+export { default as SingleValueItem } from './components/SingleValueItem/SingleValueItem';
+import styles from './styles/SingleValueContainer.module.css';
+export * from './types/props';
+
+function SingleValueVisualizer({
+  title,
+  singleValueItems,
+  animationDuration,
+  animationDelay
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "w-100 h-100", children: [
+    /* @__PURE__ */ jsx(CssReset, {}),
+    /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: i18n.t("Loading ...") }), children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `${styles["font-x-large"]} ${styles["font-bold"]}`,
+          children: title
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles["single-value-list"], children: singleValueItems.map(
+        (singleValueItem) => /* @__PURE__ */ jsx(
+          SingleValueItem,
+          {
+            ...singleValueItem,
+            globalAnimationDuration: animationDuration,
+            globalAnimationDelay: animationDelay
+          },
+          `${singleValueItem.label}-${singleValueItem.value}`
+        )
+      ) })
+    ] }) })
+  ] });
+}
+const SingleValueContainer = SingleValueVisualizer;
+
+export { SingleValueContainer, SingleValueVisualizer };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=SingleValueVisualizer.mjs.map

package/dist/components/SingleValueContainer/SingleValueVisualizer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SingleValueContainer/SingleValueVisualizer.tsx"],"names":[],"mappings":"AAiBG,cAEC,YAFD;AAjBH,OAAO,UAAU;AACjB,SAAS,gBAAgB;AACzB,SAAgB,gBAAgB;AAChC,OAAO,qBAAqB;AAC5B,OAAO,YAAY;AAGnB,cAAc;AAEP,SAAS,sBAAsB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAmD;AAClD,SACC,qBAAC,SAAI,WAAU,eACd;AAAA,wBAAC,YAAS;AAAA,IACV,oBAAC,YAAS,UAAU,oBAAC,SAAK,eAAK,EAAE,aAAa,GAAE,GAC/C,+BAAC,SACA;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,GAAG,OAAO,cAAc,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,UAE1D;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,SAAI,WAAW,OAAO,mBAAmB,GACxC,2BAAiB;AAAA,QACjB,CAAC,oBACA;AAAA,UAAC;AAAA;AAAA,YAEC,GAAG;AAAA,YACJ,yBAAyB;AAAA,YACzB,sBAAsB;AAAA;AAAA,UAHjB,GAAG,gBAAgB,KAAK,IAAI,gBAAgB,KAAK;AAAA,QAIvD;AAAA,MAEF,GACD;AAAA,OACD,GACD;AAAA,KACD;AAEF;AAKO,MAAM,uBAAuB","sourcesContent":["import i18n from \"@dhis2/d2-i18n\";\nimport { CssReset } from \"@dhis2/ui\";\nimport React, { Suspense } from \"react\";\nimport SingleValueItem from \"./components/SingleValueItem/SingleValueItem\";\nimport styles from \"./styles/SingleValueContainer.module.css\";\nimport { SingleValue, SingleValueVisualizerProps } from \"./types/props\";\n\nexport * from \"./types/props\";\n\nexport function SingleValueVisualizer({\n\ttitle,\n\tsingleValueItems,\n\tanimationDuration,\n\tanimationDelay,\n}: SingleValueVisualizerProps): React.ReactElement {\n\treturn (\n\t\t<div className=\"w-100 h-100\">\n\t\t\t<CssReset />\n\t\t\t<Suspense fallback={<div>{i18n.t(\"Loading ...\")}</div>}>\n\t\t\t\t<div>\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={`${styles[\"font-x-large\"]} ${styles[\"font-bold\"]}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div className={styles[\"single-value-list\"]}>\n\t\t\t\t\t\t{singleValueItems.map(\n\t\t\t\t\t\t\t(singleValueItem: SingleValue) => (\n\t\t\t\t\t\t\t\t<SingleValueItem\n\t\t\t\t\t\t\t\t\tkey={`${singleValueItem.label}-${singleValueItem.value}`}\n\t\t\t\t\t\t\t\t\t{...singleValueItem}\n\t\t\t\t\t\t\t\t\tglobalAnimationDuration={animationDuration}\n\t\t\t\t\t\t\t\t\tglobalAnimationDelay={animationDelay}\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</div>\n\t\t\t\t</div>\n\t\t\t</Suspense>\n\t\t</div>\n\t);\n}\n\n/**\n * @deprecated since `v2`. Use `SingleValueVisualizer` instead\n * */\nexport const SingleValueContainer = SingleValueVisualizer;\nexport { SingleValueItem };\n"]}

package/dist/components/SingleValueContainer/components/SingleValueItem/SingleValueItem.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ui = require('@dhis2/ui');
+var lodash = require('lodash');
+var reactSpring = require('react-spring');
+var styles = require('../../styles/SingleValueContainer.module.css');
+var SingleValuePercentage = require('./SingleValuePercentage');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+var SingleValuePercentage__default = /*#__PURE__*/_interopDefault(SingleValuePercentage);
+
+function SingleValueItem({
+  label,
+  value,
+  color,
+  percentage,
+  animationDuration,
+  animationDelay,
+  globalAnimationDelay,
+  decimalPlaces,
+  globalAnimationDuration
+}) {
+  const numberFormatter = (value2) => Intl.NumberFormat("en-US", {
+    notation: "compact",
+    maximumFractionDigits: decimalPlaces ?? 1
+  }).format(value2);
+  const sanitizedValue = reactSpring.useSpring({
+    val: value,
+    from: { val: 0 },
+    config: {
+      duration: animationDuration ?? globalAnimationDuration ?? 1e3
+    },
+    delay: animationDelay ?? globalAnimationDelay ?? 10
+  });
+  const tooltipContent = `${label}: ${value}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default["single-value-item"]} text-center`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default["font-large"], children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: lodash.capitalize(tooltipContent), children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactSpring.animated.div,
+      {
+        className: `${styles__default.default["font-bold"]} ${styles__default.default["font-xx-large"]} ${styles__default.default["padding-top"]}`,
+        children: sanitizedValue.val.to(
+          (value2) => numberFormatter(Math.floor(value2))
+        )
+      }
+    ) }),
+    percentage ? /* @__PURE__ */ jsxRuntime.jsx(SingleValuePercentage__default.default, { color, percentage }) : /* @__PURE__ */ jsxRuntime.jsx("span", {})
+  ] });
+}
+
+module.exports = SingleValueItem;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=SingleValueItem.js.map

package/dist/components/SingleValueContainer/components/SingleValueItem/SingleValueItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/SingleValueContainer/components/SingleValueItem/SingleValueItem.tsx"],"names":["value"],"mappings":"AAyCE,SACC,KADD;AAzCF,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAE3B,SAAS,UAAU,iBAAiB;AACpC,OAAO,YAAY;AAEnB,OAAO,2BAA2B;AAOnB,SAAR,gBAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyC;AACxC,QAAM,kBAAkB,CAACA,WACxB,KAAK,aAAa,SAAS;AAAA,IAC1B,UAAU;AAAA,IACV,uBAAuB,iBAAiB;AAAA,EACzC,CAAC,EAAE,OAAOA,MAAK;AAEhB,QAAM,iBAAiB,UAAU;AAAA,IAChC,KAAK;AAAA,IACL,MAAM,EAAE,KAAK,EAAE;AAAA,IACf,QAAQ;AAAA,MACP,UAAU,qBAAqB,2BAA2B;AAAA,IAC3D;AAAA,IACA,OAAO,kBAAkB,wBAAwB;AAAA,EAClD,CAAC;AAED,QAAM,iBAAiB,GAAG,KAAK,KAAK,KAAK;AACzC,SACC,qBAAC,SAAI,WAAW,GAAG,OAAO,mBAAmB,CAAC,gBAC7C;AAAA,wBAAC,SAAI,WAAW,OAAO,YAAY,GAAI,iBAAM;AAAA,IAC7C,oBAAC,WAAQ,SAAS,WAAW,cAAc,GAC1C;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA,WAAW,GAAG,OAAO,WAAW,CAAC,IAAI,OAAO,eAAe,CAAC,IAAI,OAAO,aAAa,CAAC;AAAA,QAEpF,yBAAe,IAAI;AAAA,UAAG,CAACA,WACvB,gBAAgB,KAAK,MAAMA,MAAK,CAAC;AAAA,QAClC;AAAA;AAAA,IACD,GACD;AAAA,IACC,aACA,oBAAC,yBAAsB,OAAc,YAAwB,IAE7D,oBAAC,UAAK;AAAA,KAER;AAEF","sourcesContent":["import { Tooltip } from \"@dhis2/ui\";\nimport { capitalize } from \"lodash\";\nimport React from \"react\";\nimport { animated, useSpring } from \"react-spring\";\nimport styles from \"../../styles/SingleValueContainer.module.css\";\nimport { SingleValue } from \"../../types/props\";\nimport SingleValuePercentage from \"./SingleValuePercentage\";\n\ninterface SingleValueProps extends SingleValue {\n\tglobalAnimationDelay?: number;\n\tglobalAnimationDuration?: number;\n}\n\nexport default function SingleValueItem({\n\tlabel,\n\tvalue,\n\tcolor,\n\tpercentage,\n\tanimationDuration,\n\tanimationDelay,\n\tglobalAnimationDelay,\n\tdecimalPlaces,\n\tglobalAnimationDuration,\n}: SingleValueProps): React.ReactElement {\n\tconst numberFormatter = (value: number) =>\n\t\tIntl.NumberFormat(\"en-US\", {\n\t\t\tnotation: \"compact\",\n\t\t\tmaximumFractionDigits: decimalPlaces ?? 1,\n\t\t}).format(value);\n\n\tconst sanitizedValue = useSpring({\n\t\tval: value,\n\t\tfrom: { val: 0 },\n\t\tconfig: {\n\t\t\tduration: animationDuration ?? globalAnimationDuration ?? 1000,\n\t\t},\n\t\tdelay: animationDelay ?? globalAnimationDelay ?? 10,\n\t});\n\n\tconst tooltipContent = `${label}: ${value}`;\n\treturn (\n\t\t<div className={`${styles[\"single-value-item\"]} text-center`}>\n\t\t\t<div className={styles[\"font-large\"]}>{label}</div>\n\t\t\t<Tooltip content={capitalize(tooltipContent)}>\n\t\t\t\t<animated.div\n\t\t\t\t\tclassName={`${styles[\"font-bold\"]} ${styles[\"font-xx-large\"]} ${styles[\"padding-top\"]}`}\n\t\t\t\t>\n\t\t\t\t\t{sanitizedValue.val.to((value) =>\n\t\t\t\t\t\tnumberFormatter(Math.floor(value)),\n\t\t\t\t\t)}\n\t\t\t\t</animated.div>\n\t\t\t</Tooltip>\n\t\t\t{percentage ? (\n\t\t\t\t<SingleValuePercentage color={color} percentage={percentage} />\n\t\t\t) : (\n\t\t\t\t<span></span>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"]}

package/dist/components/SingleValueContainer/components/SingleValueItem/SingleValueItem.mjs

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Tooltip } from '@dhis2/ui';
+import { capitalize } from 'lodash';
+import { useSpring, animated } from 'react-spring';
+import styles from '../../styles/SingleValueContainer.module.css';
+import SingleValuePercentage from './SingleValuePercentage';
+
+function SingleValueItem({
+  label,
+  value,
+  color,
+  percentage,
+  animationDuration,
+  animationDelay,
+  globalAnimationDelay,
+  decimalPlaces,
+  globalAnimationDuration
+}) {
+  const numberFormatter = (value2) => Intl.NumberFormat("en-US", {
+    notation: "compact",
+    maximumFractionDigits: decimalPlaces ?? 1
+  }).format(value2);
+  const sanitizedValue = useSpring({
+    val: value,
+    from: { val: 0 },
+    config: {
+      duration: animationDuration ?? globalAnimationDuration ?? 1e3
+    },
+    delay: animationDelay ?? globalAnimationDelay ?? 10
+  });
+  const tooltipContent = `${label}: ${value}`;
+  return /* @__PURE__ */ jsxs("div", { className: `${styles["single-value-item"]} text-center`, children: [
+    /* @__PURE__ */ jsx("div", { className: styles["font-large"], children: label }),
+    /* @__PURE__ */ jsx(Tooltip, { content: capitalize(tooltipContent), children: /* @__PURE__ */ jsx(
+      animated.div,
+      {
+        className: `${styles["font-bold"]} ${styles["font-xx-large"]} ${styles["padding-top"]}`,
+        children: sanitizedValue.val.to(
+          (value2) => numberFormatter(Math.floor(value2))
+        )
+      }
+    ) }),
+    percentage ? /* @__PURE__ */ jsx(SingleValuePercentage, { color, percentage }) : /* @__PURE__ */ jsx("span", {})
+  ] });
+}
+
+export { SingleValueItem as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=SingleValueItem.mjs.map

package/dist/components/SingleValueContainer/components/SingleValueItem/SingleValueItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/SingleValueContainer/components/SingleValueItem/SingleValueItem.tsx"],"names":["value"],"mappings":"AAyCE,SACC,KADD;AAzCF,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAE3B,SAAS,UAAU,iBAAiB;AACpC,OAAO,YAAY;AAEnB,OAAO,2BAA2B;AAOnB,SAAR,gBAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyC;AACxC,QAAM,kBAAkB,CAACA,WACxB,KAAK,aAAa,SAAS;AAAA,IAC1B,UAAU;AAAA,IACV,uBAAuB,iBAAiB;AAAA,EACzC,CAAC,EAAE,OAAOA,MAAK;AAEhB,QAAM,iBAAiB,UAAU;AAAA,IAChC,KAAK;AAAA,IACL,MAAM,EAAE,KAAK,EAAE;AAAA,IACf,QAAQ;AAAA,MACP,UAAU,qBAAqB,2BAA2B;AAAA,IAC3D;AAAA,IACA,OAAO,kBAAkB,wBAAwB;AAAA,EAClD,CAAC;AAED,QAAM,iBAAiB,GAAG,KAAK,KAAK,KAAK;AACzC,SACC,qBAAC,SAAI,WAAW,GAAG,OAAO,mBAAmB,CAAC,gBAC7C;AAAA,wBAAC,SAAI,WAAW,OAAO,YAAY,GAAI,iBAAM;AAAA,IAC7C,oBAAC,WAAQ,SAAS,WAAW,cAAc,GAC1C;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA,WAAW,GAAG,OAAO,WAAW,CAAC,IAAI,OAAO,eAAe,CAAC,IAAI,OAAO,aAAa,CAAC;AAAA,QAEpF,yBAAe,IAAI;AAAA,UAAG,CAACA,WACvB,gBAAgB,KAAK,MAAMA,MAAK,CAAC;AAAA,QAClC;AAAA;AAAA,IACD,GACD;AAAA,IACC,aACA,oBAAC,yBAAsB,OAAc,YAAwB,IAE7D,oBAAC,UAAK;AAAA,KAER;AAEF","sourcesContent":["import { Tooltip } from \"@dhis2/ui\";\nimport { capitalize } from \"lodash\";\nimport React from \"react\";\nimport { animated, useSpring } from \"react-spring\";\nimport styles from \"../../styles/SingleValueContainer.module.css\";\nimport { SingleValue } from \"../../types/props\";\nimport SingleValuePercentage from \"./SingleValuePercentage\";\n\ninterface SingleValueProps extends SingleValue {\n\tglobalAnimationDelay?: number;\n\tglobalAnimationDuration?: number;\n}\n\nexport default function SingleValueItem({\n\tlabel,\n\tvalue,\n\tcolor,\n\tpercentage,\n\tanimationDuration,\n\tanimationDelay,\n\tglobalAnimationDelay,\n\tdecimalPlaces,\n\tglobalAnimationDuration,\n}: SingleValueProps): React.ReactElement {\n\tconst numberFormatter = (value: number) =>\n\t\tIntl.NumberFormat(\"en-US\", {\n\t\t\tnotation: \"compact\",\n\t\t\tmaximumFractionDigits: decimalPlaces ?? 1,\n\t\t}).format(value);\n\n\tconst sanitizedValue = useSpring({\n\t\tval: value,\n\t\tfrom: { val: 0 },\n\t\tconfig: {\n\t\t\tduration: animationDuration ?? globalAnimationDuration ?? 1000,\n\t\t},\n\t\tdelay: animationDelay ?? globalAnimationDelay ?? 10,\n\t});\n\n\tconst tooltipContent = `${label}: ${value}`;\n\treturn (\n\t\t<div className={`${styles[\"single-value-item\"]} text-center`}>\n\t\t\t<div className={styles[\"font-large\"]}>{label}</div>\n\t\t\t<Tooltip content={capitalize(tooltipContent)}>\n\t\t\t\t<animated.div\n\t\t\t\t\tclassName={`${styles[\"font-bold\"]} ${styles[\"font-xx-large\"]} ${styles[\"padding-top\"]}`}\n\t\t\t\t>\n\t\t\t\t\t{sanitizedValue.val.to((value) =>\n\t\t\t\t\t\tnumberFormatter(Math.floor(value)),\n\t\t\t\t\t)}\n\t\t\t\t</animated.div>\n\t\t\t</Tooltip>\n\t\t\t{percentage ? (\n\t\t\t\t<SingleValuePercentage color={color} percentage={percentage} />\n\t\t\t) : (\n\t\t\t\t<span></span>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"]}

package/dist/components/SingleValueContainer/components/SingleValueItem/SingleValuePercentage.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ui = require('@dhis2/ui');
+var styles = require('../../styles/SingleValueContainer.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function SingleValuePercentage({
+  percentage,
+  color
+}) {
+  const width = "100%";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-100", children: /* @__PURE__ */ jsxRuntime.jsx(
+    ui.LinearLoader,
+    {
+      className: styles__default.default["percent-value"],
+      width,
+      amount: percentage
+    }
+  ) });
+}
+
+module.exports = SingleValuePercentage;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=SingleValuePercentage.js.map

package/dist/components/SingleValueContainer/components/SingleValueItem/SingleValuePercentage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/SingleValueContainer/components/SingleValueItem/SingleValuePercentage.tsx"],"names":[],"mappings":"AAWG;AAXH,SAAS,oBAAoB;AAE7B,OAAO,YAAY;AAEJ,SAAR,sBAAuC;AAAA,EAC7C;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,QAAQ;AACd,SACC,oBAAC,SAAI,WAAU,SACd;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,OAAO,eAAe;AAAA,MACjC;AAAA,MACA,QAAQ;AAAA;AAAA,EACT,GACD;AAEF","sourcesContent":["import { LinearLoader } from \"@dhis2/ui\";\nimport React from \"react\";\nimport styles from \"../../styles/SingleValueContainer.module.css\";\n\nexport default function SingleValuePercentage({\n\tpercentage,\n\tcolor,\n}: any): React.ReactElement {\n\tconst width = \"100%\";\n\treturn (\n\t\t<div className=\"w-100\">\n\t\t\t<LinearLoader\n\t\t\t\tclassName={styles[\"percent-value\"]}\n\t\t\t\twidth={width}\n\t\t\t\tamount={percentage}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"]}

package/dist/components/SingleValueContainer/components/SingleValueItem/SingleValuePercentage.mjs

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { LinearLoader } from '@dhis2/ui';
+import styles from '../../styles/SingleValueContainer.module.css';
+
+function SingleValuePercentage({
+  percentage,
+  color
+}) {
+  const width = "100%";
+  return /* @__PURE__ */ jsx("div", { className: "w-100", children: /* @__PURE__ */ jsx(
+    LinearLoader,
+    {
+      className: styles["percent-value"],
+      width,
+      amount: percentage
+    }
+  ) });
+}
+
+export { SingleValuePercentage as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=SingleValuePercentage.mjs.map

package/dist/components/SingleValueContainer/components/SingleValueItem/SingleValuePercentage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/SingleValueContainer/components/SingleValueItem/SingleValuePercentage.tsx"],"names":[],"mappings":"AAWG;AAXH,SAAS,oBAAoB;AAE7B,OAAO,YAAY;AAEJ,SAAR,sBAAuC;AAAA,EAC7C;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,QAAQ;AACd,SACC,oBAAC,SAAI,WAAU,SACd;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,OAAO,eAAe;AAAA,MACjC;AAAA,MACA,QAAQ;AAAA;AAAA,EACT,GACD;AAEF","sourcesContent":["import { LinearLoader } from \"@dhis2/ui\";\nimport React from \"react\";\nimport styles from \"../../styles/SingleValueContainer.module.css\";\n\nexport default function SingleValuePercentage({\n\tpercentage,\n\tcolor,\n}: any): React.ReactElement {\n\tconst width = \"100%\";\n\treturn (\n\t\t<div className=\"w-100\">\n\t\t\t<LinearLoader\n\t\t\t\tclassName={styles[\"percent-value\"]}\n\t\t\t\twidth={width}\n\t\t\t\tamount={percentage}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"]}

package/dist/components/SingleValueContainer/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var SingleValueVisualizer = require('./SingleValueVisualizer');
+var props = require('./types/props');
+
+
+
+Object.keys(SingleValueVisualizer).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return SingleValueVisualizer[k]; }
+	});
+});
+Object.keys(props).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return props[k]; }
+	});
+});
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/SingleValueContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SingleValueContainer/index.ts"],"names":[],"mappings":"AAAA,cAAc;AACd,cAAc","sourcesContent":["export * from \"./SingleValueVisualizer\";\nexport * from \"./types/props\";\n"]}

package/dist/components/SingleValueContainer/index.mjs

@@ -0,0 +1,4 @@
+export * from './SingleValueVisualizer';
+export * from './types/props';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/SingleValueContainer/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SingleValueContainer/index.ts"],"names":[],"mappings":"AAAA,cAAc;AACd,cAAc","sourcesContent":["export * from \"./SingleValueVisualizer\";\nexport * from \"./types/props\";\n"]}

package/dist/components/SingleValueContainer/styles/SingleValueContainer.module.css

@@ -0,0 +1,32 @@
+.single-value-list {
+  padding: 10px 2px;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+.padding-top {
+  padding-top: 12px;
+}
+.percent-value {
+  border-radius: 1rem;
+}
+.percent-value div {
+  height: .5rem !important;
+}
+.font-large {
+  font-size: 1rem;
+}
+.font-x-large {
+  font-size: 1.5rem;
+}
+.font-xx-large {
+  font-size: 3rem;
+}
+.font-bold {
+  font-weight: bold;
+}
+.single-value-item {
+  margin: 0 1vw;
+}
+/*# sourceMappingURL=SingleValueContainer.module.css.map */

package/dist/components/SingleValueContainer/styles/SingleValueContainer.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/SingleValueContainer/styles/SingleValueContainer.module.css"],"sourcesContent":[".single-value-list {\n    padding: 10px 2px;\n    width: 100%;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-around;\n}\n\n.padding-top {\n    padding-top: 12px;\n}\n\n.percent-value {\n    border-radius: 1rem;\n}\n\n.percent-value div {\n    height: .5rem !important;\n}\n\n.font-large {\n    font-size: 1rem;\n}\n\n.font-x-large {\n    font-size: 1.5rem;\n}\n\n.font-xx-large {\n    font-size: 3rem;\n}\n\n.font-bold {\n    font-weight: bold;\n}\n\n.single-value-item {\n    margin: 0 1vw;\n}"],"mappings":"AAAA,CAAC;AACG,WAAS,KAAK;AACd,SAAO;AACP,WAAS;AACT,aAAW;AACX,mBAAiB;AACrB;AAEA,CAAC;AACG,eAAa;AACjB;AAEA,CAAC;AACG,iBAAe;AACnB;AAEA,CAJC,cAIc;AACX,UAAQ;AACZ;AAEA,CAAC;AACG,aAAW;AACf;AAEA,CAAC;AACG,aAAW;AACf;AAEA,CAAC;AACG,aAAW;AACf;AAEA,CAAC;AACG,eAAa;AACjB;AAEA,CAAC;AACG,UAAQ,EAAE;AACd;","names":[]}

package/dist/components/SingleValueContainer/types/props.js

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=props.js.map

package/dist/components/SingleValueContainer/types/props.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/components/SingleValueContainer/types/props.mjs

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=props.mjs.map

package/dist/components/SingleValueContainer/types/props.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/components/Visualization/components/AnalyticsDataProvider/index.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var DimensionsProvider = require('../DimensionsProvider');
+var appRuntime = require('@dhis2/app-runtime');
+var LayoutProvider = require('../LayoutProvider');
+var lodash = require('lodash');
+
+const AnalyticsContext = react.createContext(void 0);
+const analyticsQuery = {
+  analytics: {
+    resource: "analytics",
+    params: ({ dimensions, filters }) => {
+      return {
+        dimension: Object.keys(dimensions).map((dimension) => `${dimension}:${dimensions[dimension]?.join(";")}`),
+        filter: Object.keys(filters).map((dimension) => `${dimension}:${filters[dimension]?.join(";")}`),
+        includeMetadataDetails: true
+      };
+    }
+  }
+};
+function useAnalyticsData() {
+  return react.useContext(AnalyticsContext) ?? { analytics: {}, loading: false };
+}
+function AnalyticsDataProvider({ children }) {
+  const [analyticsDimensions] = DimensionsProvider.useDimensions();
+  const [layout] = LayoutProvider.useLayout();
+  const { dimensions, filters } = react.useMemo(() => {
+    const dimensions2 = {};
+    const filters2 = {};
+    lodash.forEach([...layout?.columns ?? [], ...layout?.rows ?? []], (dimension) => {
+      lodash.set(dimensions2, [dimension], analyticsDimensions?.[dimension]);
+    });
+    lodash.forEach([...layout?.filters ?? []], (dimension) => {
+      lodash.set(filters2, [dimension], analyticsDimensions?.[dimension]);
+    });
+    return {
+      dimensions: dimensions2,
+      filters: filters2
+    };
+  }, [layout, analyticsDimensions]);
+  console.log({
+    filters
+  });
+  const { data: analytics, error, loading, refetch, called } = appRuntime.useDataQuery(analyticsQuery, {
+    variables: {
+      dimensions,
+      filters
+    },
+    lazy: true
+  });
+  react.useEffect(() => {
+    refetch({
+      dimensions,
+      filters
+    });
+  }, [dimensions, filters]);
+  react.useEffect(() => {
+    if (error) {
+      throw error;
+    }
+  }, [error]);
+  return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsContext.Provider, { value: { analytics: analytics?.analytics, loading }, children });
+}
+
+exports.AnalyticsDataProvider = AnalyticsDataProvider;
+exports.useAnalyticsData = useAnalyticsData;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Visualization/components/AnalyticsDataProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Visualization/components/AnalyticsDataProvider/index.tsx"],"names":["dimensions","filters"],"mappings":"AA8EI;AA9EJ,SAAgB,eAAe,YAAY,WAAW,eAAe;AAErE,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,SAAS,WAAW;AAE7B,MAAM,mBAAmB,cAEvB,MAAS;AAEX,MAAM,iBAAiB;AAAA,EACrB,WAAW;AAAA,IACT,UAAU;AAAA,IACV,QAAQ,CAAC,EAAC,YAAY,QAAO,MAAW;AACtC,aAAO;AAAA,QACL,WAAW,OAAO,KAAK,UAAU,EAAE,IAAI,CAAC,cAAc,GAAG,SAAS,IAAI,WAAW,SAAS,GAAG,KAAK,GAAG,CAAC,EAAE;AAAA,QACxG,QAAQ,OAAO,KAAK,OAAO,EAAE,IAAI,CAAC,cAAc,GAAG,SAAS,IAAI,QAAQ,SAAS,GAAG,KAAK,GAAG,CAAC,EAAE;AAAA,QAC/F,wBAAwB;AAAA,MAC1B;AAAA,IACF;AAAA,EACF;AACF;AAMO,SAAS,mBAAmB;AACjC,SAAO,WAAW,gBAAgB,KAAK,EAAC,WAAW,CAAC,GAAG,SAAS,MAAK;AACvE;AAEO,SAAS,sBAAsB,EAAC,SAAQ,GAAsB;AACnE,QAAM,CAAC,mBAAmB,IAAI,cAAc;AAC5C,QAAM,CAAC,MAAM,IAAI,UAAU;AAC3B,QAAM,EAAC,YAAY,QAAO,IAAI,QAAQ,MAAM;AAC1C,UAAMA,cAAa,CAAC;AACpB,UAAMC,WAAU,CAAC;AAEjB,YAAQ,CAAC,GAAI,QAAQ,WAAW,CAAC,GAAI,GAAI,QAAQ,QAAQ,CAAC,CAAE,GAAG,CAAC,cAAc;AAC5E,UAAID,aAAY,CAAC,SAAS,GAAI,sBAA6C,SAAS,CAAC;AAAA,IACvF,CAAC;AACD,YAAQ,CAAC,GAAI,QAAQ,WAAW,CAAC,CAAE,GAAG,CAAC,cAAc;AACnD,UAAIC,UAAS,CAAC,SAAS,GAAI,sBAA6C,SAAS,CAAC;AAAA,IACpF,CAAC;AAED,WAAO;AAAA,MACL,YAAAD;AAAA,MACA,SAAAC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,mBAAmB,CAAC;AAEhC,UAAQ,IAAI;AAAA,IACV;AAAA,EACF,CAAC;AAED,QAAM,EAAC,MAAM,WAAW,OAAO,SAAS,SAAS,OAAM,IAAI,aAAa,gBAAgB;AAAA,IACtF,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA,MAAM;AAAA,EACR,CAAC;AAED,YAAU,MAAM;AACd,YAAQ;AAAA,MACN;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,YAAY,OAAO,CAAC;AAExB,YAAU,MAAM;AACd,QAAI,OAAO;AACT,YAAM;AAAA,IACR;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,EAAC,WAAW,WAAW,WAAwB,QAAO,GACrF,UACH;AAEJ","sourcesContent":["import React, { createContext, useContext, useEffect, useMemo } from \"react\";\nimport { Analytics, AnalyticsDimension } from \"@hisptz/dhis2-utils\";\nimport { useDimensions } from \"../DimensionsProvider\";\nimport { useDataQuery } from \"@dhis2/app-runtime\";\nimport { useLayout } from \"../LayoutProvider\";\nimport { forEach, set } from \"lodash\";\n\nconst AnalyticsContext = createContext<\n\t{ loading: boolean; analytics: Analytics } | undefined\n>(undefined);\n\nconst analyticsQuery = {\n\t\tanalytics: {\n\t\t\t\tresource: \"analytics\",\n\t\t\t\tparams: ({dimensions, filters}: any) => {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\tdimension: Object.keys(dimensions).map((dimension) => `${dimension}:${dimensions[dimension]?.join(';')}`),\n\t\t\t\t\t\t\t\tfilter: Object.keys(filters).map((dimension) => `${dimension}:${filters[dimension]?.join(';')}`),\n\t\t\t\t\t\t\t\tincludeMetadataDetails: true\n\t\t\t\t\t\t}\n\t\t\t\t}\n\t\t}\n}\n\nexport interface DataProviderProps {\n\t\tchildren: React.ReactNode\n}\n\nexport function useAnalyticsData() {\n\t\treturn useContext(AnalyticsContext) ?? {analytics: {}, loading: false}\n}\n\nexport function AnalyticsDataProvider({children}: DataProviderProps) {\n\t\tconst [analyticsDimensions] = useDimensions();\n\t\tconst [layout] = useLayout();\n\t\tconst {dimensions, filters} = useMemo(() => {\n\t\t\t\tconst dimensions = {};\n\t\t\t\tconst filters = {};\n\n\t\t\t\tforEach([...(layout?.columns ?? []), ...(layout?.rows ?? [])], (dimension) => {\n\t\t\t\t\t\tset(dimensions, [dimension], (analyticsDimensions as AnalyticsDimension)?.[dimension])\n\t\t\t\t})\n\t\t\t\tforEach([...(layout?.filters ?? [])], (dimension) => {\n\t\t\t\t\t\tset(filters, [dimension], (analyticsDimensions as AnalyticsDimension)?.[dimension])\n\t\t\t\t})\n\n\t\t\t\treturn {\n\t\t\t\t\t\tdimensions,\n\t\t\t\t\t\tfilters\n\t\t\t\t}\n\t\t}, [layout, analyticsDimensions]);\n\n\t\tconsole.log({\n\t\t\t\tfilters\n\t\t})\n\n\t\tconst {data: analytics, error, loading, refetch, called} = useDataQuery(analyticsQuery, {\n\t\t\t\tvariables: {\n\t\t\t\t\t\tdimensions,\n\t\t\t\t\t\tfilters\n\t\t\t\t},\n\t\t\t\tlazy: true\n\t\t});\n\n\t\tuseEffect(() => {\n\t\t\t\trefetch({\n\t\t\t\t\t\tdimensions,\n\t\t\t\t\t\tfilters\n\t\t\t\t})\n\t\t}, [dimensions, filters]);\n\n\t\tuseEffect(() => {\n\t\t\t\tif (error) {\n\t\t\t\t\t\tthrow error;\n\t\t\t\t}\n\t\t}, [error])\n\n\t\treturn (\n\t\t\t\t<AnalyticsContext.Provider value={{analytics: analytics?.analytics as Analytics, loading}}>\n\t\t\t\t\t\t{children}\n\t\t\t\t</AnalyticsContext.Provider>\n\t\t)\n}\n"]}