@hisptz/dhis2-analytics 2.0.0-alpha.1 → 2.0.1

package/dist/esm/components/SingleValueContainer/SingleValueContainer.stories.js

@@ -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.js.map

package/dist/esm/components/SingleValueContainer/SingleValueContainer.stories.js.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/esm/components/SingleValueContainer/SingleValueVisualizer.js

@@ -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.js';
+export { default as SingleValueItem } from './components/SingleValueItem/SingleValueItem.js';
+import styles from './styles/SingleValueContainer.module.css';
+export * from './types/props.js';
+
+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.js.map

package/dist/esm/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.js\";\nimport styles from \"./styles/SingleValueContainer.module.css\";\nimport { SingleValue, SingleValueVisualizerProps } from \"./types/props.js\";\n\nexport * from \"./types/props.js\";\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/esm/components/SingleValueContainer/components/SingleValueItem/SingleValueItem.js

@@ -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.js';
+
+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.js.map

package/dist/esm/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.js\";\nimport SingleValuePercentage from \"./SingleValuePercentage.js\";\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/esm/components/SingleValueContainer/components/SingleValueItem/SingleValuePercentage.js

@@ -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.js.map

package/dist/esm/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/esm/components/SingleValueContainer/index.js

@@ -0,0 +1,5 @@
+export * from './SingleValueVisualizer.js';
+export * from './components/SingleValueItem/SingleValuePercentage.js';
+export * from './types/props.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

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

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

package/dist/esm/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/esm/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/esm/components/SingleValueContainer/types/props.js

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

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

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

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

@@ -0,0 +1,94 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useMemo, useEffect } from 'react';
+import { useDimensions } from '../DimensionsProvider/index.js';
+import { useDataQuery } from '@dhis2/app-runtime';
+import { useLayout } from '../LayoutProvider/index.js';
+import { forEach, set } from 'lodash';
+
+const AnalyticsContext = 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 useContext(AnalyticsContext) ?? { analytics: {}, loading: false };
+}
+function AnalyticsDataProvider({ children }) {
+  const [analyticsDimensions] = useDimensions();
+  const [layout] = useLayout();
+  const { dimensions, filters } = useMemo(() => {
+    const dimensions2 = {};
+    const filters2 = {};
+    forEach(
+      [...layout?.columns ?? [], ...layout?.rows ?? []],
+      (dimension) => {
+        set(
+          dimensions2,
+          [dimension],
+          analyticsDimensions?.[dimension]
+        );
+      }
+    );
+    forEach([...layout?.filters ?? []], (dimension) => {
+      set(
+        filters2,
+        [dimension],
+        analyticsDimensions?.[dimension]
+      );
+    });
+    return {
+      dimensions: dimensions2,
+      filters: filters2
+    };
+  }, [layout, analyticsDimensions]);
+  console.log({
+    filters
+  });
+  const {
+    data: analytics,
+    error,
+    loading,
+    refetch,
+    called
+  } = useDataQuery(analyticsQuery, {
+    variables: {
+      dimensions,
+      filters
+    },
+    lazy: true
+  });
+  useEffect(() => {
+    refetch({
+      dimensions,
+      filters
+    });
+  }, [dimensions, filters]);
+  useEffect(() => {
+    if (error) {
+      throw error;
+    }
+  }, [error]);
+  return /* @__PURE__ */ jsx(
+    AnalyticsContext.Provider,
+    {
+      value: { analytics: analytics?.analytics, loading },
+      children
+    }
+  );
+}
+
+export { AnalyticsDataProvider, useAnalyticsData };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Visualization/components/AnalyticsDataProvider/index.tsx"],"names":["dimensions","filters"],"mappings":"AAqGE;AArGF,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,EACtB,WAAW;AAAA,IACV,UAAU;AAAA,IACV,QAAQ,CAAC,EAAE,YAAY,QAAQ,MAAW;AACzC,aAAO;AAAA,QACN,WAAW,OAAO,KAAK,UAAU,EAAE;AAAA,UAClC,CAAC,cACA,GAAG,SAAS,IAAI,WAAW,SAAS,GAAG,KAAK,GAAG,CAAC;AAAA,QAClD;AAAA,QACA,QAAQ,OAAO,KAAK,OAAO,EAAE;AAAA,UAC5B,CAAC,cACA,GAAG,SAAS,IAAI,QAAQ,SAAS,GAAG,KAAK,GAAG,CAAC;AAAA,QAC/C;AAAA,QACA,wBAAwB;AAAA,MACzB;AAAA,IACD;AAAA,EACD;AACD;AAMO,SAAS,mBAAmB;AAClC,SAAO,WAAW,gBAAgB,KAAK,EAAE,WAAW,CAAC,GAAG,SAAS,MAAM;AACxE;AAEO,SAAS,sBAAsB,EAAE,SAAS,GAAsB;AACtE,QAAM,CAAC,mBAAmB,IAAI,cAAc;AAC5C,QAAM,CAAC,MAAM,IAAI,UAAU;AAC3B,QAAM,EAAE,YAAY,QAAQ,IAAI,QAAQ,MAAM;AAC7C,UAAMA,cAAa,CAAC;AACpB,UAAMC,WAAU,CAAC;AAEjB;AAAA,MACC,CAAC,GAAI,QAAQ,WAAW,CAAC,GAAI,GAAI,QAAQ,QAAQ,CAAC,CAAE;AAAA,MACpD,CAAC,cAAc;AACd;AAAA,UACCD;AAAA,UACA,CAAC,SAAS;AAAA,UACT,sBAA6C,SAAS;AAAA,QACxD;AAAA,MACD;AAAA,IACD;AACA,YAAQ,CAAC,GAAI,QAAQ,WAAW,CAAC,CAAE,GAAG,CAAC,cAAc;AACpD;AAAA,QACCC;AAAA,QACA,CAAC,SAAS;AAAA,QACT,sBAA6C,SAAS;AAAA,MACxD;AAAA,IACD,CAAC;AAED,WAAO;AAAA,MACN,YAAAD;AAAA,MACA,SAAAC;AAAA,IACD;AAAA,EACD,GAAG,CAAC,QAAQ,mBAAmB,CAAC;AAEhC,UAAQ,IAAI;AAAA,IACX;AAAA,EACD,CAAC;AAED,QAAM;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,aAAa,gBAAgB;AAAA,IAChC,WAAW;AAAA,MACV;AAAA,MACA;AAAA,IACD;AAAA,IACA,MAAM;AAAA,EACP,CAAC;AAED,YAAU,MAAM;AACf,YAAQ;AAAA,MACP;AAAA,MACA;AAAA,IACD,CAAC;AAAA,EACF,GAAG,CAAC,YAAY,OAAO,CAAC;AAExB,YAAU,MAAM;AACf,QAAI,OAAO;AACV,YAAM;AAAA,IACP;AAAA,EACD,GAAG,CAAC,KAAK,CAAC;AAEV,SACC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACA,OAAO,EAAE,WAAW,WAAW,WAAwB,QAAQ;AAAA,MAE9D;AAAA;AAAA,EACF;AAEF","sourcesContent":["import React, { createContext, useContext, useEffect, useMemo } from \"react\";\nimport { Analytics, AnalyticsDimension } from \"@hisptz/dhis2-utils\";\nimport { useDimensions } from \"../DimensionsProvider/index.js\";\nimport { useDataQuery } from \"@dhis2/app-runtime\";\nimport { useLayout } from \"../LayoutProvider/index.js\";\nimport { forEach, set } from \"lodash\";\n\nconst AnalyticsContext = createContext<\n\t{ loading: boolean; analytics: Analytics } | undefined\n>(undefined);\n\nconst analyticsQuery = {\n\tanalytics: {\n\t\tresource: \"analytics\",\n\t\tparams: ({ dimensions, filters }: any) => {\n\t\t\treturn {\n\t\t\t\tdimension: Object.keys(dimensions).map(\n\t\t\t\t\t(dimension) =>\n\t\t\t\t\t\t`${dimension}:${dimensions[dimension]?.join(\";\")}`,\n\t\t\t\t),\n\t\t\t\tfilter: Object.keys(filters).map(\n\t\t\t\t\t(dimension) =>\n\t\t\t\t\t\t`${dimension}:${filters[dimension]?.join(\";\")}`,\n\t\t\t\t),\n\t\t\t\tincludeMetadataDetails: true,\n\t\t\t};\n\t\t},\n\t},\n};\n\nexport interface DataProviderProps {\n\tchildren: React.ReactNode;\n}\n\nexport function useAnalyticsData() {\n\treturn useContext(AnalyticsContext) ?? { analytics: {}, loading: false };\n}\n\nexport function AnalyticsDataProvider({ children }: DataProviderProps) {\n\tconst [analyticsDimensions] = useDimensions();\n\tconst [layout] = useLayout();\n\tconst { dimensions, filters } = useMemo(() => {\n\t\tconst dimensions = {};\n\t\tconst filters = {};\n\n\t\tforEach(\n\t\t\t[...(layout?.columns ?? []), ...(layout?.rows ?? [])],\n\t\t\t(dimension) => {\n\t\t\t\tset(\n\t\t\t\t\tdimensions,\n\t\t\t\t\t[dimension],\n\t\t\t\t\t(analyticsDimensions as AnalyticsDimension)?.[dimension],\n\t\t\t\t);\n\t\t\t},\n\t\t);\n\t\tforEach([...(layout?.filters ?? [])], (dimension) => {\n\t\t\tset(\n\t\t\t\tfilters,\n\t\t\t\t[dimension],\n\t\t\t\t(analyticsDimensions as AnalyticsDimension)?.[dimension],\n\t\t\t);\n\t\t});\n\n\t\treturn {\n\t\t\tdimensions,\n\t\t\tfilters,\n\t\t};\n\t}, [layout, analyticsDimensions]);\n\n\tconsole.log({\n\t\tfilters,\n\t});\n\n\tconst {\n\t\tdata: analytics,\n\t\terror,\n\t\tloading,\n\t\trefetch,\n\t\tcalled,\n\t} = useDataQuery(analyticsQuery, {\n\t\tvariables: {\n\t\t\tdimensions,\n\t\t\tfilters,\n\t\t},\n\t\tlazy: true,\n\t});\n\n\tuseEffect(() => {\n\t\trefetch({\n\t\t\tdimensions,\n\t\t\tfilters,\n\t\t});\n\t}, [dimensions, filters]);\n\n\tuseEffect(() => {\n\t\tif (error) {\n\t\t\tthrow error;\n\t\t}\n\t}, [error]);\n\n\treturn (\n\t\t<AnalyticsContext.Provider\n\t\t\tvalue={{ analytics: analytics?.analytics as Analytics, loading }}\n\t\t>\n\t\t\t{children}\n\t\t</AnalyticsContext.Provider>\n\t);\n}\n"]}

package/dist/esm/components/Visualization/components/DimensionsProvider/index.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useReducer } from 'react';
+import { set } from 'lodash';
+import { useUpdateEffect } from 'usehooks-ts';
+
+const DimensionState = createContext({
+  dx: [],
+  pe: [],
+  ou: []
+});
+const DimensionUpdateState = createContext(void 0);
+function reducer(state, { dimension, value }) {
+  const updatedState = { ...state ?? {} };
+  set(updatedState, [dimension], value);
+  return updatedState;
+}
+function useDimensions() {
+  return [
+    useContext(DimensionState),
+    useContext(DimensionUpdateState)
+  ];
+}
+function DimensionsProvider({ children, dimensions }) {
+  const [state, dispatch] = useReducer(reducer, dimensions);
+  useUpdateEffect(() => {
+    Object.keys(dimensions).forEach((dimension) => {
+      dispatch({ dimension, value: dimensions[dimension] ?? [] });
+    });
+  }, [dimensions]);
+  return /* @__PURE__ */ jsx(DimensionState.Provider, { value: state, children: /* @__PURE__ */ jsx(DimensionUpdateState.Provider, { value: dispatch, children }) });
+}
+
+export { DimensionState, DimensionUpdateState, DimensionsProvider, useDimensions };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Visualization/components/DimensionsProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Visualization/components/DimensionsProvider/index.tsx"],"names":[],"mappings":"AA6CQ;AA7CR,SAAgB,eAAe,YAAY,kBAAkB;AAE7D,SAAS,WAAW;AACpB,SAAS,uBAAuB;AAKzB,MAAM,iBAAiB,cAAkC;AAAA,EAC5D,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AACT,CAAC;AACM,MAAM,uBAAuB,cAA4C,MAAS;AAGzF,SAAS,QAAQ,OAA2B,EAAC,WAAW,MAAK,GAA8C;AACvG,QAAM,eAAe,EAAC,GAAI,SAAS,CAAC,EAAE;AACtC,MAAI,cAAc,CAAC,SAAS,GAAG,KAAK;AACpC,SAAO;AACX;AAOO,SAAS,gBAAgB;AAC5B,SAAO;AAAA,IACH,WAAW,cAAc;AAAA,IACzB,WAAW,oBAAoB;AAAA,EACnC;AACJ;AAEO,SAAS,mBAAmB,EAAC,UAAU,WAAU,GAA2B;AAC/E,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,SAAS,UAAU;AAExD,kBAAgB,MAAM;AAClB,WAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,cAAsB;AACnD,eAAS,EAAC,WAAmC,OAAO,WAAW,SAAS,KAAK,CAAC,EAAC,CAAC;AAAA,IACpF,CAAC;AAAA,EACL,GAAG,CAAC,UAAU,CAAC;AAGf,SAAO,oBAAC,eAAe,UAAf,EAAwB,OAAO,OACnC,8BAAC,qBAAqB,UAArB,EAA8B,OAAO,UACjC,UACL,GACJ;AACJ","sourcesContent":["import React, { createContext, useContext, useReducer } from \"react\";\nimport { AnalyticsDimension } from \"@hisptz/dhis2-utils\";\nimport { set } from \"lodash\";\nimport { useUpdateEffect } from \"usehooks-ts\";\n\nexport type Dimension = \"ou\" | \"pe\" | \"dx\" | \"co\";\n\nexport type DimensionUpdater = (data: { dimension: Dimension; value: string[] }) => void\nexport const DimensionState = createContext<AnalyticsDimension>({\n    dx: [],\n    pe: [],\n    ou: []\n})\nexport const DimensionUpdateState = createContext<DimensionUpdater | undefined>(undefined);\n\n\nfunction reducer(state: AnalyticsDimension, {dimension, value}: { dimension: Dimension, value: string[] }) {\n    const updatedState = {...(state ?? {})};\n    set(updatedState, [dimension], value);\n    return updatedState\n}\n\nexport interface DimensionProviderProps {\n    children: React.ReactNode,\n    dimensions: AnalyticsDimension\n}\n\nexport function useDimensions() {\n    return [\n        useContext(DimensionState),\n        useContext(DimensionUpdateState)\n    ] as [AnalyticsDimension, DimensionUpdater]\n}\n\nexport function DimensionsProvider({children, dimensions}: DimensionProviderProps) {\n    const [state, dispatch] = useReducer(reducer, dimensions);\n\n    useUpdateEffect(() => {\n        Object.keys(dimensions).forEach((dimension: string) => {\n            dispatch({dimension: dimension as Dimension, value: dimensions[dimension] ?? []})\n        })\n    }, [dimensions]);\n\n\n    return <DimensionState.Provider value={state}>\n        <DimensionUpdateState.Provider value={dispatch}>\n            {children}\n        </DimensionUpdateState.Provider>\n    </DimensionState.Provider>\n}\n"]}

package/dist/esm/components/Visualization/components/LayoutProvider/index.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState } from 'react';
+
+const LayoutState = createContext(void 0);
+function useLayout() {
+  return [useContext(LayoutState) ?? { rows: [], filters: [], columns: [] }];
+}
+function LayoutProvider({
+  defaultLayout,
+  children
+}) {
+  const [layout, setLayout] = useState(defaultLayout);
+  return /* @__PURE__ */ jsx(LayoutState.Provider, { value: layout, children });
+}
+
+export { LayoutProvider, LayoutState, useLayout };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Visualization/components/LayoutProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Visualization/components/LayoutProvider/index.tsx"],"names":[],"mappings":"AA2BE;AA3BF,SAAgB,eAAe,YAAY,gBAAgB;AAcpD,MAAM,cAAc,cAAkC,MAAS;AAE/D,SAAS,YAAY;AAC3B,SAAO,CAAC,WAAW,WAAW,KAAK,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC,EAAE,CAAC;AAC1E;AAEO,SAAS,eAAe;AAAA,EAC9B;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,aAAa;AAElD,SACC,oBAAC,YAAY,UAAZ,EAAqB,OAAO,QAAS,UAAS;AAEjD","sourcesContent":["import React, { createContext, useContext, useState } from \"react\";\nimport { Dimension } from \"../DimensionsProvider/index.js\";\n\nexport interface Layout {\n\trows: Dimension[];\n\tcolumns: Dimension[];\n\tfilters: Dimension[];\n}\n\nexport interface LayoutProviderProps {\n\tchildren: React.ReactNode;\n\tdefaultLayout: Layout;\n}\n\nexport const LayoutState = createContext<Layout | undefined>(undefined);\n\nexport function useLayout() {\n\treturn [useContext(LayoutState) ?? { rows: [], filters: [], columns: [] }];\n}\n\nexport function LayoutProvider({\n\tdefaultLayout,\n\tchildren,\n}: LayoutProviderProps) {\n\tconst [layout, setLayout] = useState(defaultLayout);\n\n\treturn (\n\t\t<LayoutState.Provider value={layout}>{children}</LayoutState.Provider>\n\t);\n}\n"]}

package/dist/esm/components/Visualization/components/VisualizationDimensionSelector/index.js

@@ -0,0 +1,85 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useMemo, useState, useCallback } from 'react';
+import { Tooltip, Button, IconClock24, IconLocation24 } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+import { useDimensions } from '../DimensionsProvider/index.js';
+import { PeriodSelectorModal, OrgUnitSelectorModal } from '@hisptz/dhis2-ui';
+import { getOrgUnitSelectionFromIds } from '../VisualizationSelector/index.js';
+import { getOrgUnitsSelection } from '../../../Map/utils/map.js';
+
+function VisualizationDimensionSelector({
+  showPeriodSelector,
+  showOrgUnitSelector
+}) {
+  const [dimensions, setDimensions] = useDimensions();
+  const periods = useMemo(() => dimensions.pe, [dimensions.pe]);
+  const orgUnitSelection = useMemo(
+    () => getOrgUnitSelectionFromIds(dimensions.ou ?? []),
+    [dimensions.ou]
+  );
+  const [openFilter, setOpenFilter] = useState();
+  const onFilterUpdate = useCallback(
+    (type) => (data) => {
+      setOpenFilter(void 0);
+      if (type === "ou") {
+        setDimensions({
+          dimension: "ou",
+          value: getOrgUnitsSelection(data)
+        });
+        return;
+      }
+      if (type === "pe") {
+        setDimensions({ dimension: "pe", value: data });
+        return;
+      }
+    },
+    [setDimensions]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+    showPeriodSelector && /* @__PURE__ */ jsx(Tooltip, { content: i18n.t("Period"), children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        PeriodSelectorModal,
+        {
+          position: "middle",
+          enablePeriodSelector: true,
+          selectedPeriods: periods,
+          onClose: () => setOpenFilter(void 0),
+          hide: openFilter !== "pe",
+          onUpdate: onFilterUpdate("pe")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => setOpenFilter("pe"),
+          icon: /* @__PURE__ */ jsx(IconClock24, {})
+        }
+      )
+    ] }) }),
+    showOrgUnitSelector && /* @__PURE__ */ jsx(Tooltip, { content: i18n.t("Location"), children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        OrgUnitSelectorModal,
+        {
+          showUserOptions: true,
+          searchable: true,
+          title: i18n.t("Select location(s)"),
+          value: orgUnitSelection,
+          onClose: () => setOpenFilter(void 0),
+          hide: openFilter !== "ou",
+          onUpdate: onFilterUpdate("ou")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => setOpenFilter("ou"),
+          icon: /* @__PURE__ */ jsx(IconLocation24, {})
+        }
+      )
+    ] }) })
+  ] }) });
+}
+
+export { VisualizationDimensionSelector };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Visualization/components/VisualizationDimensionSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Visualization/components/VisualizationDimensionSelector/index.tsx"],"names":[],"mappings":"AA+CM,mBACC,KADD;AA/CN,SAAgB,aAAa,SAAS,gBAAgB;AACtD,SAAS,QAAQ,aAAa,gBAAgB,eAAe;AAC7D,OAAO,UAAU;AACjB,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB,2BAA2B;AAE1D,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AAE9B,SAAS,+BAA+B;AAAA,EAC9C;AAAA,EACA;AACD,GAGG;AACF,QAAM,CAAC,YAAY,aAAa,IAAI,cAAc;AAClD,QAAM,UAAU,QAAQ,MAAM,WAAW,IAAI,CAAC,WAAW,EAAE,CAAC;AAC5D,QAAM,mBAAmB;AAAA,IACxB,MAAM,2BAA2B,WAAW,MAAM,CAAC,CAAC;AAAA,IACpD,CAAC,WAAW,EAAE;AAAA,EACf;AACA,QAAM,CAAC,YAAY,aAAa,IAAI,SAAkC;AAEtE,QAAM,iBAAiB;AAAA,IACtB,CAAC,SAAsB,CAAC,SAAiC;AACxD,oBAAc,MAAS;AACvB,UAAI,SAAS,MAAM;AAClB,sBAAc;AAAA,UACb,WAAW;AAAA,UACX,OAAO,qBAAqB,IAAI;AAAA,QACjC,CAAC;AACD;AAAA,MACD;AACA,UAAI,SAAS,MAAM;AAClB,sBAAc,EAAE,WAAW,MAAM,OAAO,KAAK,CAAC;AAC9C;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,SACC,gCACC,+BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,EAAE,GACpC;AAAA,0BACA,oBAAC,WAAQ,SAAS,KAAK,EAAE,QAAQ,GAChC,2CACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,UAAS;AAAA,UACT,sBAAoB;AAAA,UACpB,iBAAiB;AAAA,UACjB,SAAS,MAAM,cAAc,MAAS;AAAA,UACtC,MAAM,eAAe;AAAA,UACrB,UAAU,eAAe,IAAI;AAAA;AAAA,MAC9B;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,SAAS,MAAM,cAAc,IAAI;AAAA,UACjC,MAAM,oBAAC,eAAY;AAAA;AAAA,MACpB;AAAA,OACD,GACD;AAAA,IAEA,uBACA,oBAAC,WAAQ,SAAS,KAAK,EAAE,UAAU,GAClC,2CACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,iBAAe;AAAA,UACf,YAAU;AAAA,UACV,OAAO,KAAK,EAAE,oBAAoB;AAAA,UAClC,OAAO;AAAA,UACP,SAAS,MAAM,cAAc,MAAS;AAAA,UACtC,MAAM,eAAe;AAAA,UACrB,UAAU,eAAe,IAAI;AAAA;AAAA,MAC9B;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,SAAS,MAAM,cAAc,IAAI;AAAA,UACjC,MAAM,oBAAC,kBAAe;AAAA;AAAA,MACvB;AAAA,OACD,GACD;AAAA,KAEF,GACD;AAEF","sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { Button, IconClock24, IconLocation24, Tooltip } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useDimensions } from \"../DimensionsProvider/index.js\";\nimport { OrgUnitSelectorModal, PeriodSelectorModal } from \"@hisptz/dhis2-ui\";\nimport { OrgUnitSelection } from \"@hisptz/dhis2-utils\";\nimport { getOrgUnitSelectionFromIds } from \"../VisualizationSelector/index.js\";\nimport { getOrgUnitsSelection } from \"../../../Map/utils/map.js\";\n\nexport function VisualizationDimensionSelector({\n\tshowPeriodSelector,\n\tshowOrgUnitSelector,\n}: {\n\tshowPeriodSelector?: boolean;\n\tshowOrgUnitSelector?: boolean;\n}) {\n\tconst [dimensions, setDimensions] = useDimensions();\n\tconst periods = useMemo(() => dimensions.pe, [dimensions.pe]);\n\tconst orgUnitSelection = useMemo(\n\t\t() => getOrgUnitSelectionFromIds(dimensions.ou ?? []),\n\t\t[dimensions.ou],\n\t);\n\tconst [openFilter, setOpenFilter] = useState<\"pe\" | \"ou\" | undefined>();\n\n\tconst onFilterUpdate = useCallback(\n\t\t(type: \"ou\" | \"pe\") => (data: OrgUnitSelection | any) => {\n\t\t\tsetOpenFilter(undefined);\n\t\t\tif (type === \"ou\") {\n\t\t\t\tsetDimensions({\n\t\t\t\t\tdimension: \"ou\",\n\t\t\t\t\tvalue: getOrgUnitsSelection(data),\n\t\t\t\t});\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (type === \"pe\") {\n\t\t\t\tsetDimensions({ dimension: \"pe\", value: data });\n\t\t\t\treturn;\n\t\t\t}\n\t\t},\n\t\t[setDimensions],\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<div style={{ display: \"flex\", gap: 8 }}>\n\t\t\t\t{showPeriodSelector && (\n\t\t\t\t\t<Tooltip content={i18n.t(\"Period\")}>\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<PeriodSelectorModal\n\t\t\t\t\t\t\t\tposition=\"middle\"\n\t\t\t\t\t\t\t\tenablePeriodSelector\n\t\t\t\t\t\t\t\tselectedPeriods={periods}\n\t\t\t\t\t\t\t\tonClose={() => setOpenFilter(undefined)}\n\t\t\t\t\t\t\t\thide={openFilter !== \"pe\"}\n\t\t\t\t\t\t\t\tonUpdate={onFilterUpdate(\"pe\")}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tonClick={() => setOpenFilter(\"pe\")}\n\t\t\t\t\t\t\t\ticon={<IconClock24 />}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t\t{showOrgUnitSelector && (\n\t\t\t\t\t<Tooltip content={i18n.t(\"Location\")}>\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<OrgUnitSelectorModal\n\t\t\t\t\t\t\t\tshowUserOptions\n\t\t\t\t\t\t\t\tsearchable\n\t\t\t\t\t\t\t\ttitle={i18n.t(\"Select location(s)\")}\n\t\t\t\t\t\t\t\tvalue={orgUnitSelection}\n\t\t\t\t\t\t\t\tonClose={() => setOpenFilter(undefined)}\n\t\t\t\t\t\t\t\thide={openFilter !== \"ou\"}\n\t\t\t\t\t\t\t\tonUpdate={onFilterUpdate(\"ou\")}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tonClick={() => setOpenFilter(\"ou\")}\n\t\t\t\t\t\t\t\ticon={<IconLocation24 />}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"]}

package/dist/esm/components/Visualization/components/VisualizationProvider/index.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { LayoutProvider } from '../LayoutProvider/index.js';
+import { DimensionsProvider } from '../DimensionsProvider/index.js';
+import { AnalyticsDataProvider } from '../AnalyticsDataProvider/index.js';
+import { VisualizationTypeProvider } from '../VisualizationTypeProvider/index.js';
+
+function VisualizationProvider({
+  layout,
+  dimensions,
+  children,
+  type,
+  config
+}) {
+  return /* @__PURE__ */ jsx(DimensionsProvider, { dimensions, children: /* @__PURE__ */ jsx(VisualizationTypeProvider, { config, defaultType: type, children: /* @__PURE__ */ jsx(LayoutProvider, { defaultLayout: layout, children: /* @__PURE__ */ jsx(AnalyticsDataProvider, { children }) }) }) });
+}
+
+export { VisualizationProvider };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Visualization/components/VisualizationProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Visualization/components/VisualizationProvider/index.tsx"],"names":[],"mappings":"AA8BK;AA7BL,SAAiB,sBAAsB;AAEvC,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AACtC;AAAA,EAEC;AAAA,OACM;AAWA,SAAS,sBAAsB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA+B;AAC9B,SACC,oBAAC,sBAAmB,YACnB,8BAAC,6BAA0B,QAAgB,aAAa,MACvD,8BAAC,kBAAe,eAAe,QAC9B,8BAAC,yBAAuB,UAAS,GAClC,GACD,GACD;AAEF","sourcesContent":["import React from \"react\";\nimport { Layout, LayoutProvider } from \"../LayoutProvider/index.js\";\nimport { AnalyticsDimension } from \"@hisptz/dhis2-utils\";\nimport { DimensionsProvider } from \"../DimensionsProvider/index.js\";\nimport { AnalyticsDataProvider } from \"../AnalyticsDataProvider/index.js\";\nimport {\n\tVisualizationType,\n\tVisualizationTypeProvider,\n} from \"../VisualizationTypeProvider/index.js\";\nimport { VisualizationConfig } from \"../../index.js\";\n\nexport interface VisualizationProviderProps {\n\tchildren: React.ReactNode;\n\tlayout: Layout;\n\tdimensions: AnalyticsDimension;\n\ttype: VisualizationType;\n\tconfig: VisualizationConfig;\n}\n\nexport function VisualizationProvider({\n\tlayout,\n\tdimensions,\n\tchildren,\n\ttype,\n\tconfig,\n}: VisualizationProviderProps) {\n\treturn (\n\t\t<DimensionsProvider dimensions={dimensions}>\n\t\t\t<VisualizationTypeProvider config={config} defaultType={type}>\n\t\t\t\t<LayoutProvider defaultLayout={layout}>\n\t\t\t\t\t<AnalyticsDataProvider>{children}</AnalyticsDataProvider>\n\t\t\t\t</LayoutProvider>\n\t\t\t</VisualizationTypeProvider>\n\t\t</DimensionsProvider>\n\t);\n}\n"]}