@hisptz/dhis2-analytics 1.0.5 → 1.0.6

package/build/es/components/Map/utils/map.js

@@ -0,0 +1,147 @@
+import { compact, filter, find, forEach, isEmpty, isString, sortBy } from "lodash";
+import { defaultClasses, defaultColorScaleName, getColorPalette } from "./colors";
+export function highlightFeature(e, style) {
+  const layer = e.target;
+  layer.setStyle(style);
+  // layer.bringToFront();
+}
+
+export function resetHighlight(e, defaultStyle) {
+  const layer = e.target;
+  layer.setStyle(defaultStyle);
+  // layer.bringToBack();
+}
+
+export function getColorFromLegendSet(legends, value) {
+  var _find;
+  if (!value) {
+    return "";
+  }
+  const legend = (_find = find(legends !== null && legends !== void 0 ? legends : [], legend => (legend === null || legend === void 0 ? void 0 : legend.startValue) <= value && (legend === null || legend === void 0 ? void 0 : legend.endValue) >= value)) !== null && _find !== void 0 ? _find : {};
+  return legend.color ? legend.color : "transparent";
+}
+export function getLegendCount(legend, data) {
+  const {
+    startValue,
+    endValue
+  } = legend;
+  return filter(data, d => d.data >= startValue && d.data <= endValue).length;
+}
+export function getOrgUnitsSelection(orgUnitSelection) {
+  var _orgUnitSelection$org, _orgUnitSelection$org2;
+  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$org = orgUnitSelection === null || orgUnitSelection === void 0 ? void 0 : (_orgUnitSelection$org2 = orgUnitSelection.orgUnits) === null || _orgUnitSelection$org2 === void 0 ? void 0 : _orgUnitSelection$org2.map(ou => `${ou.id}`)) !== null && _orgUnitSelection$org !== void 0 ? _orgUnitSelection$org : [])];
+}
+export function sanitizeOrgUnits(metaData) {
+  if (metaData) {
+    var _metaData$dimensions, _metaData$dimensions$;
+    return metaData === null || metaData === void 0 ? void 0 : (_metaData$dimensions = metaData.dimensions) === null || _metaData$dimensions === void 0 ? void 0 : (_metaData$dimensions$ = _metaData$dimensions.ou) === null || _metaData$dimensions$ === void 0 ? void 0 : _metaData$dimensions$.map(ouId => {
+      var _metaData$items$ouId, _metaData$ouHierarchy;
+      return {
+        id: ouId,
+        name: metaData === null || metaData === void 0 ? void 0 : (_metaData$items$ouId = metaData.items[ouId]) === null || _metaData$items$ouId === void 0 ? void 0 : _metaData$items$ouId.name,
+        path: metaData === null || metaData === void 0 ? void 0 : (_metaData$ouHierarchy = metaData.ouHierarchy) === null || _metaData$ouHierarchy === void 0 ? void 0 : _metaData$ouHierarchy[ouId]
+      };
+    });
+  }
+  return [];
+}
+export 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";
+        }
+      }
+
+      // Grand parent
+      if (isString(ou.pg) && ou.pg.length) {
+        const ids = compact(ou.pg.split("/"));
+
+        // Grand parent id
+        if (ids.length >= 2) {
+          gpid = ids[ids.length - 2];
+        }
+
+        // Grand parent parent graph
+        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 {};
+    }
+  });
+}
+export function sanitizeDate(startDate) {
+  var _startDate$split, _startDate$split$;
+  if ((startDate === null || startDate === void 0 ? void 0 : (_startDate$split = startDate.split("-")) === null || _startDate$split === void 0 ? void 0 : (_startDate$split$ = _startDate$split[0]) === null || _startDate$split$ === void 0 ? void 0 : _startDate$split$.length) < 4) {
+    var _startDate$split2, _startDate$split2$rev;
+    return startDate === null || startDate === void 0 ? void 0 : (_startDate$split2 = startDate.split("-")) === null || _startDate$split2 === void 0 ? void 0 : (_startDate$split2$rev = _startDate$split2.reverse()) === null || _startDate$split2$rev === void 0 ? void 0 : _startDate$split2$rev.join("-");
+  }
+  return startDate;
+}
+export function generateLegends(maxValue, minValue, _ref) {
+  let {
+    classesCount,
+    colorClass
+  } = _ref;
+  const count = classesCount !== null && classesCount !== void 0 ? classesCount : defaultClasses;
+  const color = colorClass !== null && colorClass !== void 0 ? 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();
+}

package/build/es/components/SingleValueContainer/SingleValueContainer.stories.js

@@ -0,0 +1,115 @@
+import React from "react";
+import { SingleValueContainer } from ".";
+const Template = args => /*#__PURE__*/React.createElement(SingleValueContainer, args);
+export const Default = Template.bind({});
+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
+  }]
+};
+export const AnimatedAllValues = Template.bind({});
+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
+  }]
+};
+export const AnimatedSingleValue = Template.bind({});
+AnimatedSingleValue.args = {
+  title: "PRIORITY INDICATORS",
+  singleValueItems: [{
+    label: "Total Bookings",
+    value: 13634244,
+    animationDuration: 1000,
+    animationDelay: 100
+  }, {
+    label: "At least one dose",
+    value: 45423,
+    percentage: 23,
+    color: "#0D47A1",
+    animationDuration: 1000,
+    animationDelay: 600
+  }, {
+    label: "Partially vaccinated",
+    value: 13434,
+    percentage: 17,
+    color: "#0D47A1",
+    animationDuration: 1000,
+    animationDelay: 1100
+  }, {
+    label: "Fully vaccinated",
+    value: 126432,
+    percentage: 83,
+    color: "#0D47A1",
+    animationDuration: 1000,
+    animationDelay: 1600
+  }, {
+    label: "Number of AEFI",
+    value: 268423,
+    animationDuration: 1000,
+    animationDelay: 2000
+  }]
+};
+export const SingleValuesWithDecimalPlaces = Template.bind({});
+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 default {
+  title: "Components/Single Value Container",
+  component: SingleValueContainer,
+  decorators: [SingleValueStory => {
+    return /*#__PURE__*/React.createElement(SingleValueStory, null);
+  }]
+};

package/build/es/components/SingleValueContainer/SingleValueContainer.test.js

@@ -0,0 +1,20 @@
+import { mount } from "@cypress/react";
+import React from "react";
+import { SingleValueContainer } from ".";
+describe("Single Value Container Tests", () => {
+  it("should render", function () {
+    const arg = {
+      title: "PRIORITY INDICATORS",
+      singleValueItems: [{
+        label: "Total Bookings",
+        value: 136
+      }, {
+        label: "At least one dose",
+        value: 45,
+        percentage: 23,
+        color: "#0D47A1"
+      }]
+    };
+    mount( /*#__PURE__*/React.createElement(SingleValueContainer, arg));
+  });
+});

package/build/es/components/SingleValueContainer/components/SingleValueItem/SingleValueItem.js

@@ -0,0 +1,47 @@
+import { Tooltip } from "@dhis2/ui";
+import { capitalize } from "lodash";
+import React from "react";
+import { animated, useSpring } from "react-spring";
+import styles from "../../styles/SingleValueContainer.module.css";
+import SingleValuePercentage from "./SingleValuePercentage";
+export default function SingleValueItem(_ref) {
+  var _ref2, _ref3;
+  let {
+    label,
+    value,
+    color,
+    percentage,
+    animationDuration,
+    animationDelay,
+    globalAnimationDelay,
+    decimalPlaces,
+    globalAnimationDuration
+  } = _ref;
+  const numberFormatter = value => Intl.NumberFormat("en-US", {
+    notation: "compact",
+    maximumFractionDigits: decimalPlaces !== null && decimalPlaces !== void 0 ? decimalPlaces : 1
+  }).format(value);
+  const sanitizedValue = useSpring({
+    val: value,
+    from: {
+      val: 0
+    },
+    config: {
+      duration: (_ref2 = animationDuration !== null && animationDuration !== void 0 ? animationDuration : globalAnimationDuration) !== null && _ref2 !== void 0 ? _ref2 : 1000
+    },
+    delay: (_ref3 = animationDelay !== null && animationDelay !== void 0 ? animationDelay : globalAnimationDelay) !== null && _ref3 !== void 0 ? _ref3 : 10
+  });
+  const tooltipContent = `${label}: ${value}`;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${styles["single-value-item"]} text-center`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles["font-large"]
+  }, label), /*#__PURE__*/React.createElement(Tooltip, {
+    content: capitalize(tooltipContent)
+  }, /*#__PURE__*/React.createElement(animated.div, {
+    className: `${styles["font-bold"]} ${styles["font-xx-large"]} ${styles["padding-top"]}`
+  }, sanitizedValue.val.to(value => numberFormatter(Math.floor(value))))), percentage ? /*#__PURE__*/React.createElement(SingleValuePercentage, {
+    color: color,
+    percentage: percentage
+  }) : /*#__PURE__*/React.createElement("span", null));
+}

package/build/es/components/SingleValueContainer/components/SingleValueItem/SingleValuePercentage.js

@@ -0,0 +1,17 @@
+import { LinearLoader } from "@dhis2/ui";
+import React from "react";
+import styles from "../../styles/SingleValueContainer.module.css";
+export default function SingleValuePercentage(_ref) {
+  let {
+    percentage,
+    color
+  } = _ref;
+  const width = "100%";
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-100"
+  }, /*#__PURE__*/React.createElement(LinearLoader, {
+    className: styles["percent-value"],
+    width: width,
+    amount: percentage
+  }));
+}

package/build/es/components/SingleValueContainer/index.js

@@ -0,0 +1,29 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import i18n from "@dhis2/d2-i18n";
+import { CssReset } from "@dhis2/ui";
+import React, { Suspense } from "react";
+import SingleValueItem from "./components/SingleValueItem/SingleValueItem";
+import styles from "./styles/SingleValueContainer.module.css";
+export function SingleValueContainer(_ref) {
+  let {
+    title,
+    singleValueItems,
+    animationDuration,
+    animationDelay
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-100 h-100"
+  }, /*#__PURE__*/React.createElement(CssReset, null), /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", null, i18n.t("Loading ..."))
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+    className: `${styles["font-x-large"]} ${styles["font-bold"]}`
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: styles["single-value-list"]
+  }, singleValueItems.map(singleValueItem => /*#__PURE__*/React.createElement(SingleValueItem, _extends({
+    key: `${singleValueItem.label}-${singleValueItem.value}`
+  }, singleValueItem, {
+    globalAnimationDuration: animationDuration,
+    globalAnimationDelay: animationDelay
+  })))))));
+}
+export { SingleValueItem };

package/build/es/components/SingleValueContainer/styles/SingleValueContainer.module.css

@@ -0,0 +1,39 @@
+.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;
+}

package/build/es/components/SingleValueContainer/types/props.js

@@ -0,0 +1 @@
+export {};