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

package/dist/components/Map/utils/map.js

@@ -0,0 +1,138 @@
+import { find, filter, isEmpty, forEach, sortBy, isString, compact } from 'lodash';
+import { getColorPalette, defaultClasses, defaultColorScaleName } from './colors.js';
+
+function highlightFeature(e, style) {
+  const layer = e.target;
+  layer.setStyle(style);
+}
+function resetHighlight(e, defaultStyle) {
+  const layer = e.target;
+  layer.setStyle(defaultStyle);
+}
+function getColorFromLegendSet(legends, value) {
+  if (!value) {
+    return "";
+  }
+  const legend = find(
+    legends ?? [],
+    (legend2) => legend2?.startValue <= value && legend2?.endValue >= value
+  ) ?? {};
+  return legend.color ? legend.color : "transparent";
+}
+function getLegendCount(legend, data) {
+  const { startValue, endValue } = legend;
+  return filter(data, (d) => d.data >= startValue && d.data <= endValue).length;
+}
+function getOrgUnitsSelection(orgUnitSelection) {
+  const orgUnits = [];
+  if (orgUnitSelection.userOrgUnit) {
+    orgUnits.push("USER_ORGUNIT");
+  }
+  if (orgUnitSelection.userSubUnit) {
+    orgUnits.push("USER_ORGUNIT_CHILDREN");
+  }
+  if (orgUnitSelection.userSubX2Unit) {
+    orgUnits.push("USER_ORGUNIT_GRANDCHILDREN");
+  }
+  if (!isEmpty(orgUnitSelection.levels)) {
+    forEach(
+      orgUnitSelection.levels,
+      (level) => orgUnits.push(`LEVEL-${level}`)
+    );
+  }
+  return [
+    ...orgUnits,
+    ...orgUnitSelection?.orgUnits?.map(
+      (ou) => `${ou.id}`
+    ) ?? []
+  ];
+}
+function sanitizeOrgUnits(metaData) {
+  if (metaData) {
+    return metaData?.dimensions?.ou?.map((ouId) => ({
+      id: ouId,
+      name: metaData?.items[ouId]?.name,
+      path: metaData?.ouHierarchy?.[ouId]
+    }));
+  }
+  return [];
+}
+function toGeoJson(organisationUnits) {
+  return sortBy(organisationUnits, "le").map((ou) => {
+    try {
+      const coord = JSON.parse(ou.co);
+      let gpid = "";
+      let gppg = "";
+      let type = "Point";
+      if (ou.ty === 2) {
+        type = "Polygon";
+        if (ou.co.substring(0, 4) === "[[[[") {
+          type = "MultiPolygon";
+        }
+      }
+      if (isString(ou.pg) && ou.pg.length) {
+        const ids = compact(ou.pg.split("/"));
+        if (ids.length >= 2) {
+          gpid = ids[ids.length - 2];
+        }
+        if (ids.length > 2) {
+          gppg = "/" + ids.slice(0, ids.length - 2).join("/");
+        }
+      }
+      return {
+        type: "Feature",
+        id: ou.id,
+        geometry: {
+          type,
+          coordinates: coord
+        },
+        properties: {
+          type,
+          id: ou.id,
+          name: ou.na,
+          hasCoordinatesDown: ou.hcd,
+          hasCoordinatesUp: ou.hcu,
+          level: ou.le,
+          grandParentParentGraph: gppg,
+          grandParentId: gpid,
+          parentGraph: ou.pg,
+          parentId: ou.pi,
+          parentName: ou.pn,
+          dimensions: ou.dimensions
+        }
+      };
+    } catch (e) {
+      return {};
+    }
+  });
+}
+function sanitizeDate(startDate) {
+  if (startDate?.split("-")?.[0]?.length < 4) {
+    return startDate?.split("-")?.reverse()?.join("-");
+  }
+  return startDate;
+}
+function generateLegends(maxValue, minValue, { classesCount, colorClass }) {
+  const count = classesCount ?? defaultClasses;
+  const color = colorClass ?? defaultColorScaleName;
+  const colorScale = [...getColorPalette(color, count)].reverse();
+  const maxLegendValue = 5 * Math.ceil(maxValue / 5);
+  const range = maxLegendValue / count;
+  const values = [];
+  let legendColorsIterator = colorScale.length - 1;
+  for (let i = 0; i < maxLegendValue; i += range) {
+    const id = colorScale[legendColorsIterator];
+    values.push({
+      startValue: Math.floor(i),
+      endValue: Math.floor(i + range),
+      id,
+      color: id
+    });
+    legendColorsIterator--;
+  }
+  return values.reverse();
+}
+
+export { generateLegends, getColorFromLegendSet, getLegendCount, getOrgUnitsSelection, highlightFeature, resetHighlight, sanitizeDate, sanitizeOrgUnits, toGeoJson };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=map.js.map

package/dist/components/Map/utils/map.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Map/utils/map.ts"],"names":["legend"],"mappings":"AAMA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEA,SAAS,iBAAiB,GAAsB,OAAY;AAClE,QAAM,QAAQ,EAAE;AAChB,QAAM,SAAS,KAAK;AAErB;AAEO,SAAS,eAAe,GAAsB,cAAmB;AACvE,QAAM,QAAQ,EAAE;AAChB,QAAM,SAAS,YAAY;AAE5B;AAEO,SAAS,sBACf,SACA,OACS;AACT,MAAI,CAAC,OAAO;AACX,WAAO;AAAA,EACR;AACA,QAAM,SACL;AAAA,IACC,WAAW,CAAC;AAAA,IACZ,CAACA,YACAA,SAAQ,cAAc,SAASA,SAAQ,YAAY;AAAA,EACrD,KAAK,CAAC;AACP,SAAO,OAAO,QAAQ,OAAO,QAAQ;AACtC;AAEO,SAAS,eAAe,QAAa,MAAW;AACtD,QAAM,EAAE,YAAY,SAAS,IAAI;AACjC,SAAO,OAAO,MAAM,CAAC,MAAW,EAAE,QAAQ,cAAc,EAAE,QAAQ,QAAQ,EACxE;AACH;AAEO,SAAS,qBAAqB,kBAAoC;AACxE,QAAM,WAAW,CAAC;AAClB,MAAI,iBAAiB,aAAa;AACjC,aAAS,KAAK,cAAc;AAAA,EAC7B;AAEA,MAAI,iBAAiB,aAAa;AACjC,aAAS,KAAK,uBAAuB;AAAA,EACtC;AAEA,MAAI,iBAAiB,eAAe;AACnC,aAAS,KAAK,4BAA4B;AAAA,EAC3C;AACA,MAAI,CAAC,QAAQ,iBAAiB,MAAM,GAAG;AACtC;AAAA,MAAQ,iBAAiB;AAAA,MAAQ,CAAC,UACjC,SAAS,KAAK,SAAS,KAAK,EAAE;AAAA,IAC/B;AAAA,EACD;AAEA,SAAO;AAAA,IACN,GAAG;AAAA,IACH,GAAI,kBAAkB,UAAU;AAAA,MAC/B,CAAC,OAAyB,GAAG,GAAG,EAAE;AAAA,IACnC,KAAK,CAAC;AAAA,EACP;AACD;AAEO,SAAS,iBAAiB,UAAe;AAC/C,MAAI,UAAU;AACb,WAAO,UAAU,YAAY,IAAI,IAAI,CAAC,UAAkB;AAAA,MACvD,IAAI;AAAA,MACJ,MAAM,UAAU,MAAM,IAAI,GAAG;AAAA,MAC7B,MAAM,UAAU,cAAc,IAAI;AAAA,IACnC,EAAE;AAAA,EACH;AACA,SAAO,CAAC;AACT;AAEO,SAAS,UAAU,mBAAwB;AACjD,SAAO,OAAO,mBAAmB,IAAI,EAAE,IAAI,CAAC,OAAY;AACvD,QAAI;AACH,YAAM,QAAQ,KAAK,MAAM,GAAG,EAAE;AAC9B,UAAI,OAAO;AACX,UAAI,OAAO;AACX,UAAI,OAAO;AAEX,UAAI,GAAG,OAAO,GAAG;AAChB,eAAO;AACP,YAAI,GAAG,GAAG,UAAU,GAAG,CAAC,MAAM,QAAQ;AACrC,iBAAO;AAAA,QACR;AAAA,MACD;AAGA,UAAI,SAAS,GAAG,EAAE,KAAK,GAAG,GAAG,QAAQ;AACpC,cAAM,MAAM,QAAQ,GAAG,GAAG,MAAM,GAAG,CAAC;AAGpC,YAAI,IAAI,UAAU,GAAG;AACpB,iBAAO,IAAI,IAAI,SAAS,CAAC;AAAA,QAC1B;AAGA,YAAI,IAAI,SAAS,GAAG;AACnB,iBAAO,MAAM,IAAI,MAAM,GAAG,IAAI,SAAS,CAAC,EAAE,KAAK,GAAG;AAAA,QACnD;AAAA,MACD;AAEA,aAAO;AAAA,QACN,MAAM;AAAA,QACN,IAAI,GAAG;AAAA,QACP,UAAU;AAAA,UACT;AAAA,UACA,aAAa;AAAA,QACd;AAAA,QACA,YAAY;AAAA,UACX;AAAA,UACA,IAAI,GAAG;AAAA,UACP,MAAM,GAAG;AAAA,UACT,oBAAoB,GAAG;AAAA,UACvB,kBAAkB,GAAG;AAAA,UACrB,OAAO,GAAG;AAAA,UACV,wBAAwB;AAAA,UACxB,eAAe;AAAA,UACf,aAAa,GAAG;AAAA,UAChB,UAAU,GAAG;AAAA,UACb,YAAY,GAAG;AAAA,UACf,YAAY,GAAG;AAAA,QAChB;AAAA,MACD;AAAA,IACD,SAAS,GAAG;AACX,aAAO,CAAC;AAAA,IACT;AAAA,EACD,CAAC;AACF;AAEO,SAAS,aAAa,WAA2B;AACvD,MAAI,WAAW,MAAM,GAAG,IAAI,CAAC,GAAG,SAAS,GAAG;AAC3C,WAAO,WAAW,MAAM,GAAG,GAAG,QAAQ,GAAG,KAAK,GAAG;AAAA,EAClD;AACA,SAAO;AACR;AAEO,SAAS,gBACf,UACA,UACA,EAAE,cAAc,WAAW,GACX;AAChB,QAAM,QAAgB,gBAAgB;AACtC,QAAM,QAAQ,cAAc;AAE5B,QAAM,aAAa,CAAC,GAAG,gBAAgB,OAAO,KAAK,CAAC,EAAE,QAAQ;AAE9D,QAAM,iBAAiB,IAAI,KAAK,KAAK,WAAW,CAAC;AACjD,QAAM,QAAQ,iBAAiB;AAE/B,QAAM,SAAS,CAAC;AAChB,MAAI,uBAAuB,WAAW,SAAS;AAC/C,WAAS,IAAI,GAAG,IAAI,gBAAgB,KAAK,OAAO;AAC/C,UAAM,KAAK,WAAW,oBAAoB;AAC1C,WAAO,KAAK;AAAA,MACX,YAAY,KAAK,MAAM,CAAC;AAAA,MACxB,UAAU,KAAK,MAAM,IAAI,KAAK;AAAA,MAC9B;AAAA,MACA,OAAO;AAAA,IACR,CAAC;AACD;AAAA,EACD;AAEA,SAAO,OAAO,QAAQ;AACvB","sourcesContent":["import type {\n\tLegend,\n\tOrganisationUnit,\n\tOrgUnitSelection,\n} from \"@hisptz/dhis2-utils\";\nimport { LeafletMouseEvent } from \"leaflet\";\nimport {\n\tcompact,\n\tfilter,\n\tfind,\n\tforEach,\n\tisEmpty,\n\tisString,\n\tsortBy,\n} from \"lodash\";\nimport {\n\tdefaultClasses,\n\tdefaultColorScaleName,\n\tgetColorPalette,\n} from \"./colors.js\";\n\nexport function highlightFeature(e: LeafletMouseEvent, style: any) {\n\tconst layer = e.target;\n\tlayer.setStyle(style);\n\t// layer.bringToFront();\n}\n\nexport function resetHighlight(e: LeafletMouseEvent, defaultStyle: any) {\n\tconst layer = e.target;\n\tlayer.setStyle(defaultStyle);\n\t// layer.bringToBack();\n}\n\nexport function getColorFromLegendSet(\n\tlegends: Legend[],\n\tvalue?: number,\n): string {\n\tif (!value) {\n\t\treturn \"\";\n\t}\n\tconst legend: any =\n\t\tfind(\n\t\t\tlegends ?? [],\n\t\t\t(legend: any) =>\n\t\t\t\tlegend?.startValue <= value && legend?.endValue >= value,\n\t\t) ?? {};\n\treturn legend.color ? legend.color : \"transparent\";\n}\n\nexport function getLegendCount(legend: any, data: any) {\n\tconst { startValue, endValue } = legend;\n\treturn filter(data, (d: any) => d.data >= startValue && d.data <= endValue)\n\t\t.length;\n}\n\nexport function getOrgUnitsSelection(orgUnitSelection: OrgUnitSelection) {\n\tconst orgUnits = [];\n\tif (orgUnitSelection.userOrgUnit) {\n\t\torgUnits.push(\"USER_ORGUNIT\");\n\t}\n\n\tif (orgUnitSelection.userSubUnit) {\n\t\torgUnits.push(\"USER_ORGUNIT_CHILDREN\");\n\t}\n\n\tif (orgUnitSelection.userSubX2Unit) {\n\t\torgUnits.push(\"USER_ORGUNIT_GRANDCHILDREN\");\n\t}\n\tif (!isEmpty(orgUnitSelection.levels)) {\n\t\tforEach(orgUnitSelection.levels, (level) =>\n\t\t\torgUnits.push(`LEVEL-${level}`),\n\t\t);\n\t}\n\n\treturn [\n\t\t...orgUnits,\n\t\t...(orgUnitSelection?.orgUnits?.map(\n\t\t\t(ou: OrganisationUnit) => `${ou.id}`,\n\t\t) ?? []),\n\t];\n}\n\nexport function sanitizeOrgUnits(metaData: any) {\n\tif (metaData) {\n\t\treturn metaData?.dimensions?.ou?.map((ouId: string) => ({\n\t\t\tid: ouId,\n\t\t\tname: metaData?.items[ouId]?.name,\n\t\t\tpath: metaData?.ouHierarchy?.[ouId],\n\t\t}));\n\t}\n\treturn [];\n}\n\nexport function toGeoJson(organisationUnits: any) {\n\treturn sortBy(organisationUnits, \"le\").map((ou: any) => {\n\t\ttry {\n\t\t\tconst coord = JSON.parse(ou.co);\n\t\t\tlet gpid = \"\";\n\t\t\tlet gppg = \"\";\n\t\t\tlet type = \"Point\";\n\n\t\t\tif (ou.ty === 2) {\n\t\t\t\ttype = \"Polygon\";\n\t\t\t\tif (ou.co.substring(0, 4) === \"[[[[\") {\n\t\t\t\t\ttype = \"MultiPolygon\";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Grand parent\n\t\t\tif (isString(ou.pg) && ou.pg.length) {\n\t\t\t\tconst ids = compact(ou.pg.split(\"/\"));\n\n\t\t\t\t// Grand parent id\n\t\t\t\tif (ids.length >= 2) {\n\t\t\t\t\tgpid = ids[ids.length - 2] as string;\n\t\t\t\t}\n\n\t\t\t\t// Grand parent parent graph\n\t\t\t\tif (ids.length > 2) {\n\t\t\t\t\tgppg = \"/\" + ids.slice(0, ids.length - 2).join(\"/\");\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\ttype: \"Feature\",\n\t\t\t\tid: ou.id,\n\t\t\t\tgeometry: {\n\t\t\t\t\ttype,\n\t\t\t\t\tcoordinates: coord,\n\t\t\t\t},\n\t\t\t\tproperties: {\n\t\t\t\t\ttype,\n\t\t\t\t\tid: ou.id,\n\t\t\t\t\tname: ou.na,\n\t\t\t\t\thasCoordinatesDown: ou.hcd,\n\t\t\t\t\thasCoordinatesUp: ou.hcu,\n\t\t\t\t\tlevel: ou.le,\n\t\t\t\t\tgrandParentParentGraph: gppg,\n\t\t\t\t\tgrandParentId: gpid,\n\t\t\t\t\tparentGraph: ou.pg,\n\t\t\t\t\tparentId: ou.pi,\n\t\t\t\t\tparentName: ou.pn,\n\t\t\t\t\tdimensions: ou.dimensions,\n\t\t\t\t},\n\t\t\t};\n\t\t} catch (e) {\n\t\t\treturn {};\n\t\t}\n\t});\n}\n\nexport function sanitizeDate(startDate: string): string {\n\tif (startDate?.split(\"-\")?.[0]?.length < 4) {\n\t\treturn startDate?.split(\"-\")?.reverse()?.join(\"-\");\n\t}\n\treturn startDate;\n}\n\nexport function generateLegends(\n\tmaxValue: number,\n\tminValue: number,\n\t{ classesCount, colorClass }: { classesCount: number; colorClass: string },\n): Array<Legend> {\n\tconst count: number = classesCount ?? defaultClasses;\n\tconst color = colorClass ?? defaultColorScaleName;\n\n\tconst colorScale = [...getColorPalette(color, count)].reverse();\n\n\tconst maxLegendValue = 5 * Math.ceil(maxValue / 5);\n\tconst range = maxLegendValue / count;\n\n\tconst values = [];\n\tlet legendColorsIterator = colorScale.length - 1;\n\tfor (let i = 0; i < maxLegendValue; i += range) {\n\t\tconst id = colorScale[legendColorsIterator];\n\t\tvalues.push({\n\t\t\tstartValue: Math.floor(i),\n\t\t\tendValue: Math.floor(i + range),\n\t\t\tid,\n\t\t\tcolor: id,\n\t\t});\n\t\tlegendColorsIterator--;\n\t}\n\n\treturn values.reverse();\n}\n"]}

package/dist/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/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/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/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/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/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/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/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/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/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/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,3 @@
+
+//# 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/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/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/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/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"]}