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

package/dist/components/Map/utils/colors.mjs

@@ -0,0 +1,77 @@
+import { hcl } from 'd3-color';
+import { isString } from 'lodash';
+import { COLOR_PALETTES } from '../constants/colors';
+
+const colorbrewer = COLOR_PALETTES;
+const getColorPalette = (scale, classes) => {
+  return colorbrewer?.[scale]?.[classes];
+};
+const getColorClasses = (palette) => {
+  return palette?.split(",")?.length;
+};
+const getColorScale = (palette) => {
+  const classes = palette.split(",").length;
+  return colorScales.find((name) => colorbrewer[name][classes]?.join(",") === palette);
+};
+const defaultColorScaleName = "YlOrBr";
+const defaultClasses = 5;
+const defaultColorScale = getColorPalette(defaultColorScaleName, defaultClasses);
+const cssColor = (color) => {
+  if (!isString(color)) {
+    return color;
+  } else if (color === "##normal") {
+    return null;
+  }
+  return (/(^[0-9A-F]{6}$)|(^[0-9A-F]{3}$)/i.test(color) ? "#" : "") + color;
+};
+const getUniqueColor = (defaultColors) => {
+  const colors = [...defaultColors];
+  function randomColor() {
+    const color = "#000000".replace(/0/g, () => (~~(Math.random() * 16)).toString(16));
+    if (colors.includes(color)) {
+      return randomColor();
+    }
+    colors.push(color);
+    return color;
+  }
+  return (index) => colors[index] || randomColor();
+};
+const isDarkColor = (color) => hcl(color).l < 70;
+const getContrastColor = (color) => isDarkColor(color) ? "#fff" : "#000";
+const colorScales = [
+  "YlOrBr",
+  "Reds",
+  "YlGn",
+  "Greens",
+  "Blues",
+  "BuPu",
+  "RdPu",
+  "PuRd",
+  "Greys",
+  "YlOrBr_reverse",
+  "Reds_reverse",
+  "YlGn_reverse",
+  "Greens_reverse",
+  "Blues_reverse",
+  "BuPu_reverse",
+  "RdPu_reverse",
+  "PuRd_reverse",
+  "Greys_reverse",
+  "PuOr",
+  "BrBG",
+  "PRGn",
+  "PiYG",
+  "RdBu",
+  "RdGy",
+  "RdYlBu",
+  "Spectral",
+  "RdYlGn",
+  "Paired",
+  "Pastel1",
+  "Set1",
+  "Set3"
+];
+
+export { colorScales, cssColor, defaultClasses, defaultColorScale, defaultColorScaleName, getColorClasses, getColorPalette, getColorScale, getContrastColor, getUniqueColor, isDarkColor };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=colors.mjs.map

package/dist/components/Map/utils/colors.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Map/utils/colors.ts"],"names":[],"mappings":"AAAA,SAAS,WAAW;AACpB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAE/B,MAAM,cAAmC;AAGlC,MAAM,kBAAkB,CAAC,OAAe,YAAoB;AACjE,SAAO,cAAc,KAAK,IAAI,OAAO;AACvC;AAEO,MAAM,kBAAkB,CAAC,YAAoB;AAClD,SAAO,SAAS,MAAM,GAAG,GAAG;AAC9B;AAGO,MAAM,gBAAgB,CAAC,YAAoB;AAChD,QAAM,UAAU,QAAQ,MAAM,GAAG,EAAE;AACnC,SAAO,YAAY,KAAK,CAAC,SAAS,YAAY,IAAI,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,OAAO;AACrF;AAEO,MAAM,wBAAwB;AAC9B,MAAM,iBAAiB;AACvB,MAAM,oBAAoB,gBAAgB,uBAAuB,cAAc;AAG/E,MAAM,WAAW,CAAC,UAAe;AACtC,MAAI,CAAC,SAAS,KAAK,GAAG;AACpB,WAAO;AAAA,EACT,WAAW,UAAU,YAAY;AAE/B,WAAO;AAAA,EACT;AACA,UAAQ,mCAAmC,KAAK,KAAK,IAAI,MAAM,MAAM;AACvE;AAGO,MAAM,iBAAiB,CAAC,kBAAuB;AACpD,QAAM,SAAS,CAAC,GAAG,aAAa;AAEhC,WAAS,cAAsB;AAC7B,UAAM,QAAQ,UAAU,QAAQ,MAAM,OAAO,CAAC,EAAE,KAAK,OAAO,IAAI,KAAK,SAAS,EAAE,CAAC;AAGjF,QAAI,OAAO,SAAS,KAAK,GAAG;AAC1B,aAAO,YAAY;AAAA,IACrB;AAEA,WAAO,KAAK,KAAK;AAEjB,WAAO;AAAA,EACT;AAEA,SAAO,CAAC,UAAkB,OAAO,KAAK,KAAK,YAAY;AACzD;AAGO,MAAM,cAAc,CAAC,UAAkB,IAAI,KAAK,EAAE,IAAI;AAGtD,MAAM,mBAAmB,CAAC,UAAmB,YAAY,KAAK,IAAI,SAAS;AAE3E,MAAM,cAAc;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF","sourcesContent":["import { hcl } from \"d3-color\";\nimport { isString } from \"lodash\";\nimport { COLOR_PALETTES } from \"../constants/colors\";\n\nconst colorbrewer: Record<string, any> = COLOR_PALETTES;\n\n// Returns a color brewer scale for a number of classes\nexport const getColorPalette = (scale: string, classes: number) => {\n  return colorbrewer?.[scale]?.[classes];\n};\n\nexport const getColorClasses = (palette: string) => {\n  return palette?.split(\",\")?.length;\n};\n\n// Returns color scale name for a palette\nexport const getColorScale = (palette: string) => {\n  const classes = palette.split(\",\").length;\n  return colorScales.find((name) => colorbrewer[name][classes]?.join(\",\") === palette);\n};\n\nexport const defaultColorScaleName = \"YlOrBr\";\nexport const defaultClasses = 5;\nexport const defaultColorScale = getColorPalette(defaultColorScaleName, defaultClasses);\n\n// Correct colors not adhering to the css standard (add missing #)\nexport const cssColor = (color: any) => {\n  if (!isString(color)) {\n    return color;\n  } else if (color === \"##normal\") {\n    // ##normal is used in old map favorites\n    return null; // Will apply default color\n  }\n  return (/(^[0-9A-F]{6}$)|(^[0-9A-F]{3}$)/i.test(color) ? \"#\" : \"\") + color;\n};\n\n// Returns an unique color (first from an array, then random but still unique)\nexport const getUniqueColor = (defaultColors: any) => {\n  const colors = [...defaultColors];\n\n  function randomColor(): string {\n    const color = \"#000000\".replace(/0/g, () => (~~(Math.random() * 16)).toString(16));\n\n    // Recursive until color is unique\n    if (colors.includes(color)) {\n      return randomColor();\n    }\n\n    colors.push(color);\n\n    return color;\n  }\n\n  return (index: number) => colors[index] || randomColor();\n};\n\n// Returns true if a color is dark\nexport const isDarkColor = (color: string) => hcl(color).l < 70;\n\n// Returns constrasting color\nexport const getContrastColor = (color: string) => (isDarkColor(color) ? \"#fff\" : \"#000\");\nexport type LegendColorScale = typeof colorScales[number];\nexport const colorScales = [\n  \"YlOrBr\",\n  \"Reds\",\n  \"YlGn\",\n  \"Greens\",\n  \"Blues\",\n  \"BuPu\",\n  \"RdPu\",\n  \"PuRd\",\n  \"Greys\",\n  \"YlOrBr_reverse\",\n  \"Reds_reverse\",\n  \"YlGn_reverse\",\n  \"Greens_reverse\",\n  \"Blues_reverse\",\n  \"BuPu_reverse\",\n  \"RdPu_reverse\",\n  \"PuRd_reverse\",\n  \"Greys_reverse\",\n  \"PuOr\",\n  \"BrBG\",\n  \"PRGn\",\n  \"PiYG\",\n  \"RdBu\",\n  \"RdGy\",\n  \"RdYlBu\",\n  \"Spectral\",\n  \"RdYlGn\",\n  \"Paired\",\n  \"Pastel1\",\n  \"Set1\",\n  \"Set3\",\n];\n"]}

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var L = require('leaflet');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var L__default = /*#__PURE__*/_interopDefault(L);
+
+const getLongestTextLength = (array, key) => array.reduce(
+  (text, curr) => curr[key] && String(curr[key]).length > text.length ? String(curr[key]) : text,
+  ""
+).length;
+function getIconUrl(icon, { baseUrl }) {
+  return `${baseUrl}/images/orgunitgroup/${icon ?? "01.png"}`;
+}
+function getIcon(url) {
+  return new L__default.default.Icon({
+    iconUrl: url
+  });
+}
+
+exports.getIcon = getIcon;
+exports.getIconUrl = getIconUrl;
+exports.getLongestTextLength = getLongestTextLength;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=helpers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Map/utils/helpers.ts"],"names":[],"mappings":"AACA,OAAO,OAAO;AAEP,MAAM,uBAAuB,CAAC,OAAmB,QACvD,MAAM;AAAA,EACL,CAAC,MAAM,SACN,KAAK,GAAG,KAAK,OAAO,KAAK,GAAG,CAAC,EAAE,SAAS,KAAK,SAC1C,OAAO,KAAK,GAAG,CAAC,IAChB;AAAA,EACJ;AACD,EAAE;AAEI,SAAS,WAAW,MAAc,EAAE,QAAQ,GAAwB;AACzE,SAAO,GAAG,OAAO,wBAAwB,QAAQ,QAAQ;AAC3D;AAEO,SAAS,QAAQ,KAAiC;AACvD,SAAO,IAAI,EAAE,KAAK;AAAA,IAChB,SAAS;AAAA,EACX,CAAC;AACH","sourcesContent":["// Get the longest text length from an object property in an array\nimport L from \"leaflet\";\n\nexport const getLongestTextLength = (array: Array<any>, key: string | number) =>\n\tarray.reduce(\n\t\t(text, curr) =>\n\t\t\tcurr[key] && String(curr[key]).length > text.length\n\t\t\t\t? String(curr[key])\n\t\t\t\t: text,\n\t\t\"\",\n\t).length;\n\nexport function getIconUrl(icon: string, { baseUrl }: { baseUrl: string }) {\n  return `${baseUrl}/images/orgunitgroup/${icon ?? \"01.png\"}`;\n}\n\nexport function getIcon(url: string): L.Icon | undefined {\n  return new L.Icon({\n    iconUrl: url,\n  });\n}\n"]}

package/dist/components/Map/utils/helpers.mjs

@@ -0,0 +1,18 @@
+import L from 'leaflet';
+
+const getLongestTextLength = (array, key) => array.reduce(
+  (text, curr) => curr[key] && String(curr[key]).length > text.length ? String(curr[key]) : text,
+  ""
+).length;
+function getIconUrl(icon, { baseUrl }) {
+  return `${baseUrl}/images/orgunitgroup/${icon ?? "01.png"}`;
+}
+function getIcon(url) {
+  return new L.Icon({
+    iconUrl: url
+  });
+}
+
+export { getIcon, getIconUrl, getLongestTextLength };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=helpers.mjs.map

package/dist/components/Map/utils/helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Map/utils/helpers.ts"],"names":[],"mappings":"AACA,OAAO,OAAO;AAEP,MAAM,uBAAuB,CAAC,OAAmB,QACvD,MAAM;AAAA,EACL,CAAC,MAAM,SACN,KAAK,GAAG,KAAK,OAAO,KAAK,GAAG,CAAC,EAAE,SAAS,KAAK,SAC1C,OAAO,KAAK,GAAG,CAAC,IAChB;AAAA,EACJ;AACD,EAAE;AAEI,SAAS,WAAW,MAAc,EAAE,QAAQ,GAAwB;AACzE,SAAO,GAAG,OAAO,wBAAwB,QAAQ,QAAQ;AAC3D;AAEO,SAAS,QAAQ,KAAiC;AACvD,SAAO,IAAI,EAAE,KAAK;AAAA,IAChB,SAAS;AAAA,EACX,CAAC;AACH","sourcesContent":["// Get the longest text length from an object property in an array\nimport L from \"leaflet\";\n\nexport const getLongestTextLength = (array: Array<any>, key: string | number) =>\n\tarray.reduce(\n\t\t(text, curr) =>\n\t\t\tcurr[key] && String(curr[key]).length > text.length\n\t\t\t\t? String(curr[key])\n\t\t\t\t: text,\n\t\t\"\",\n\t).length;\n\nexport function getIconUrl(icon: string, { baseUrl }: { baseUrl: string }) {\n  return `${baseUrl}/images/orgunitgroup/${icon ?? \"01.png\"}`;\n}\n\nexport function getIcon(url: string): L.Icon | undefined {\n  return new L.Icon({\n    iconUrl: url,\n  });\n}\n"]}

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

@@ -0,0 +1,137 @@
+'use strict';
+
+var lodash = require('lodash');
+var colors = require('./colors');
+
+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 = lodash.find(legends ?? [], (legend2) => legend2?.startValue <= value && legend2?.endValue >= value) ?? {};
+  return legend.color ? legend.color : "transparent";
+}
+function getLegendCount(legend, data) {
+  const { startValue, endValue } = legend;
+  return lodash.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 (!lodash.isEmpty(orgUnitSelection.levels)) {
+    lodash.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 lodash.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 (lodash.isString(ou.pg) && ou.pg.length) {
+        const ids = lodash.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 ?? colors.defaultClasses;
+  const color = colorClass ?? colors.defaultColorScaleName;
+  const colorScale = [...colors.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();
+}
+
+exports.generateLegends = generateLegends;
+exports.getColorFromLegendSet = getColorFromLegendSet;
+exports.getLegendCount = getLegendCount;
+exports.getOrgUnitsSelection = getOrgUnitsSelection;
+exports.highlightFeature = highlightFeature;
+exports.resetHighlight = resetHighlight;
+exports.sanitizeDate = sanitizeDate;
+exports.sanitizeOrgUnits = sanitizeOrgUnits;
+exports.toGeoJson = 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":"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","sourcesContent":["import type {Legend, OrganisationUnit, OrgUnitSelection} from \"@hisptz/dhis2-utils\";\nimport {LeafletMouseEvent} from \"leaflet\";\nimport {compact, filter, find, forEach, isEmpty, isString, sortBy} from \"lodash\";\nimport {defaultClasses, defaultColorScaleName, getColorPalette} from \"./colors\";\n\nexport function highlightFeature(e: LeafletMouseEvent, style: any) {\n  const layer = e.target;\n  layer.setStyle(style);\n  // layer.bringToFront();\n}\n\nexport function resetHighlight(e: LeafletMouseEvent, defaultStyle: any) {\n  const layer = e.target;\n  layer.setStyle(defaultStyle);\n  // layer.bringToBack();\n}\n\nexport function getColorFromLegendSet(legends: Legend[], value?: number): string {\n  if (!value) {\n    return \"\";\n  }\n  const legend: any = find(legends ?? [], (legend: any) => legend?.startValue <= value && legend?.endValue >= value) ?? {};\n  return legend.color ? legend.color : \"transparent\";\n}\n\nexport function getLegendCount(legend: any, data: any) {\n  const { startValue, endValue } = legend;\n  return filter(data, (d: any) => d.data >= startValue && d.data <= endValue).length;\n}\n\nexport function getOrgUnitsSelection(orgUnitSelection: OrgUnitSelection) {\n  const orgUnits = [];\n  if (orgUnitSelection.userOrgUnit) {\n    orgUnits.push(\"USER_ORGUNIT\");\n  }\n\n  if (orgUnitSelection.userSubUnit) {\n    orgUnits.push(\"USER_ORGUNIT_CHILDREN\");\n  }\n\n  if (orgUnitSelection.userSubX2Unit) {\n    orgUnits.push(\"USER_ORGUNIT_GRANDCHILDREN\");\n  }\n  if (!isEmpty(orgUnitSelection.levels)) {\n    forEach(orgUnitSelection.levels, (level) => orgUnits.push(`LEVEL-${level}`));\n  }\n\n  return [...orgUnits, ...(orgUnitSelection?.orgUnits?.map((ou: OrganisationUnit) => `${ou.id}`) ?? [])];\n}\n\nexport function sanitizeOrgUnits(metaData: any) {\n  if (metaData) {\n    return metaData?.dimensions?.ou?.map((ouId: string) => ({\n      id: ouId,\n      name: metaData?.items[ouId]?.name,\n      path: metaData?.ouHierarchy?.[ouId],\n    }));\n  }\n  return [];\n}\n\nexport function toGeoJson(organisationUnits: any) {\n  return sortBy(organisationUnits, \"le\").map((ou: any) => {\n    try {\n      const coord = JSON.parse(ou.co);\n      let gpid = \"\";\n      let gppg = \"\";\n      let type = \"Point\";\n\n      if (ou.ty === 2) {\n        type = \"Polygon\";\n        if (ou.co.substring(0, 4) === \"[[[[\") {\n          type = \"MultiPolygon\";\n        }\n      }\n\n      // Grand parent\n      if (isString(ou.pg) && ou.pg.length) {\n        const ids = compact(ou.pg.split(\"/\"));\n\n        // Grand parent id\n        if (ids.length >= 2) {\n          gpid = ids[ids.length - 2] as string;\n        }\n\n        // Grand parent parent graph\n        if (ids.length > 2) {\n          gppg = \"/\" + ids.slice(0, ids.length - 2).join(\"/\");\n        }\n      }\n\n      return {\n        type: \"Feature\",\n        id: ou.id,\n        geometry: {\n          type,\n          coordinates: coord,\n        },\n        properties: {\n          type,\n          id: ou.id,\n          name: ou.na,\n          hasCoordinatesDown: ou.hcd,\n          hasCoordinatesUp: ou.hcu,\n          level: ou.le,\n          grandParentParentGraph: gppg,\n          grandParentId: gpid,\n          parentGraph: ou.pg,\n          parentId: ou.pi,\n          parentName: ou.pn,\n          dimensions: ou.dimensions,\n        },\n      };\n    } catch (e) {\n      return {};\n    }\n  });\n}\n\nexport function sanitizeDate(startDate: string): string {\n  if (startDate?.split(\"-\")?.[0]?.length < 4) {\n    return startDate?.split(\"-\")?.reverse()?.join(\"-\");\n  }\n  return startDate;\n}\n\nexport function generateLegends(maxValue: number, minValue: number, { classesCount, colorClass }: { classesCount: number; colorClass: string }): Array<Legend> {\n  const count: number = classesCount ?? defaultClasses;\n  const color = colorClass ?? defaultColorScaleName;\n\n  const colorScale = [...getColorPalette(color, count)].reverse();\n\n  const maxLegendValue = 5 * Math.ceil(maxValue / 5);\n  const range = maxLegendValue / count;\n\n  const values = [];\n  let legendColorsIterator = colorScale.length - 1;\n  for (let i = 0; i < maxLegendValue; i += range) {\n    const id = colorScale[legendColorsIterator];\n    values.push({\n      startValue: Math.floor(i),\n      endValue: Math.floor(i + range),\n      id,\n      color: id,\n    });\n    legendColorsIterator--;\n  }\n\n  return values.reverse();\n}\n"]}

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

@@ -0,0 +1,127 @@
+import { find, filter, isEmpty, forEach, sortBy, isString, compact } from 'lodash';
+import { getColorPalette, defaultClasses, defaultColorScaleName } from './colors';
+
+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.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Map/utils/map.ts"],"names":["legend"],"mappings":"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","sourcesContent":["import type {Legend, OrganisationUnit, OrgUnitSelection} from \"@hisptz/dhis2-utils\";\nimport {LeafletMouseEvent} from \"leaflet\";\nimport {compact, filter, find, forEach, isEmpty, isString, sortBy} from \"lodash\";\nimport {defaultClasses, defaultColorScaleName, getColorPalette} from \"./colors\";\n\nexport function highlightFeature(e: LeafletMouseEvent, style: any) {\n  const layer = e.target;\n  layer.setStyle(style);\n  // layer.bringToFront();\n}\n\nexport function resetHighlight(e: LeafletMouseEvent, defaultStyle: any) {\n  const layer = e.target;\n  layer.setStyle(defaultStyle);\n  // layer.bringToBack();\n}\n\nexport function getColorFromLegendSet(legends: Legend[], value?: number): string {\n  if (!value) {\n    return \"\";\n  }\n  const legend: any = find(legends ?? [], (legend: any) => legend?.startValue <= value && legend?.endValue >= value) ?? {};\n  return legend.color ? legend.color : \"transparent\";\n}\n\nexport function getLegendCount(legend: any, data: any) {\n  const { startValue, endValue } = legend;\n  return filter(data, (d: any) => d.data >= startValue && d.data <= endValue).length;\n}\n\nexport function getOrgUnitsSelection(orgUnitSelection: OrgUnitSelection) {\n  const orgUnits = [];\n  if (orgUnitSelection.userOrgUnit) {\n    orgUnits.push(\"USER_ORGUNIT\");\n  }\n\n  if (orgUnitSelection.userSubUnit) {\n    orgUnits.push(\"USER_ORGUNIT_CHILDREN\");\n  }\n\n  if (orgUnitSelection.userSubX2Unit) {\n    orgUnits.push(\"USER_ORGUNIT_GRANDCHILDREN\");\n  }\n  if (!isEmpty(orgUnitSelection.levels)) {\n    forEach(orgUnitSelection.levels, (level) => orgUnits.push(`LEVEL-${level}`));\n  }\n\n  return [...orgUnits, ...(orgUnitSelection?.orgUnits?.map((ou: OrganisationUnit) => `${ou.id}`) ?? [])];\n}\n\nexport function sanitizeOrgUnits(metaData: any) {\n  if (metaData) {\n    return metaData?.dimensions?.ou?.map((ouId: string) => ({\n      id: ouId,\n      name: metaData?.items[ouId]?.name,\n      path: metaData?.ouHierarchy?.[ouId],\n    }));\n  }\n  return [];\n}\n\nexport function toGeoJson(organisationUnits: any) {\n  return sortBy(organisationUnits, \"le\").map((ou: any) => {\n    try {\n      const coord = JSON.parse(ou.co);\n      let gpid = \"\";\n      let gppg = \"\";\n      let type = \"Point\";\n\n      if (ou.ty === 2) {\n        type = \"Polygon\";\n        if (ou.co.substring(0, 4) === \"[[[[\") {\n          type = \"MultiPolygon\";\n        }\n      }\n\n      // Grand parent\n      if (isString(ou.pg) && ou.pg.length) {\n        const ids = compact(ou.pg.split(\"/\"));\n\n        // Grand parent id\n        if (ids.length >= 2) {\n          gpid = ids[ids.length - 2] as string;\n        }\n\n        // Grand parent parent graph\n        if (ids.length > 2) {\n          gppg = \"/\" + ids.slice(0, ids.length - 2).join(\"/\");\n        }\n      }\n\n      return {\n        type: \"Feature\",\n        id: ou.id,\n        geometry: {\n          type,\n          coordinates: coord,\n        },\n        properties: {\n          type,\n          id: ou.id,\n          name: ou.na,\n          hasCoordinatesDown: ou.hcd,\n          hasCoordinatesUp: ou.hcu,\n          level: ou.le,\n          grandParentParentGraph: gppg,\n          grandParentId: gpid,\n          parentGraph: ou.pg,\n          parentId: ou.pi,\n          parentName: ou.pn,\n          dimensions: ou.dimensions,\n        },\n      };\n    } catch (e) {\n      return {};\n    }\n  });\n}\n\nexport function sanitizeDate(startDate: string): string {\n  if (startDate?.split(\"-\")?.[0]?.length < 4) {\n    return startDate?.split(\"-\")?.reverse()?.join(\"-\");\n  }\n  return startDate;\n}\n\nexport function generateLegends(maxValue: number, minValue: number, { classesCount, colorClass }: { classesCount: number; colorClass: string }): Array<Legend> {\n  const count: number = classesCount ?? defaultClasses;\n  const color = colorClass ?? defaultColorScaleName;\n\n  const colorScale = [...getColorPalette(color, count)].reverse();\n\n  const maxLegendValue = 5 * Math.ceil(maxValue / 5);\n  const range = maxLegendValue / count;\n\n  const values = [];\n  let legendColorsIterator = colorScale.length - 1;\n  for (let i = 0; i < maxLegendValue; i += range) {\n    const id = colorScale[legendColorsIterator];\n    values.push({\n      startValue: Math.floor(i),\n      endValue: Math.floor(i + range),\n      id,\n      color: id,\n    });\n    legendColorsIterator--;\n  }\n\n  return values.reverse();\n}\n"]}

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

@@ -0,0 +1,153 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var SingleValueVisualizer = require('./SingleValueVisualizer');
+
+const meta = {
+  title: "Single Value Visualizer",
+  component: SingleValueVisualizer.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
+    }
+  ]
+};
+
+exports.AnimatedAllValues = AnimatedAllValues;
+exports.AnimatedSingleValue = AnimatedSingleValue;
+exports.Default = Default;
+exports.SingleValuesWithDecimalPlaces = SingleValuesWithDecimalPlaces;
+exports.default = SingleValueContainer_stories_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"]}