@hisptz/dhis2-analytics 1.0.5 → 1.0.7

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/index.js

@@ -0,0 +1,36 @@
+import { colors } from "@dhis2/ui";
+import React from "react";
+import { GeoJSON } from "react-leaflet";
+import { getColorFromLegendSet, highlightFeature, resetHighlight } from "../../../../../../utils/map";
+import CustomTooltip from "../CustomTooltip";
+const defaultStyle = {
+  weight: 1
+};
+const highlightStyle = {
+  weight: 2
+};
+export default function Choropleth(_ref) {
+  let {
+    data,
+    legends
+  } = _ref;
+  const {
+    orgUnit
+  } = data;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GeoJSON, {
+    data: orgUnit.geoJSON,
+    eventHandlers: {
+      mouseover: e => highlightFeature(e, highlightStyle),
+      mouseout: e => resetHighlight(e, defaultStyle)
+    },
+    pathOptions: {
+      fillColor: getColorFromLegendSet(legends, data.data),
+      fillOpacity: 1,
+      color: colors.grey900,
+      weight: 1
+    },
+    key: `${data.dataItem.id}-layer`
+  }, /*#__PURE__*/React.createElement(CustomTooltip, {
+    data: data
+  })));
+}

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/components/CustomTooltip/index.js

@@ -0,0 +1,28 @@
+import i18n from "@dhis2/d2-i18n";
+import React from "react";
+import { Pane, Popup, Tooltip } from "react-leaflet";
+import { useMapPeriods } from "../../../../../MapProvider/hooks";
+export default function CustomTooltip(_ref) {
+  var _useMapPeriods;
+  let {
+    data: dataObject
+  } = _ref;
+  const {
+    dataItem,
+    orgUnit,
+    data
+  } = dataObject !== null && dataObject !== void 0 ? dataObject : {};
+  const {
+    periods
+  } = (_useMapPeriods = useMapPeriods()) !== null && _useMapPeriods !== void 0 ? _useMapPeriods : {};
+  return /*#__PURE__*/React.createElement(Pane, {
+    name: `${dataItem.displayName}-${orgUnit.id}-popup-pane`,
+    pane: "popupPane"
+  }, /*#__PURE__*/React.createElement(Tooltip, null, orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.name, " (", data, ")"), /*#__PURE__*/React.createElement(Popup, {
+    minWidth: 80
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      margin: 0
+    }
+  }, orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.name), /*#__PURE__*/React.createElement("div", null, dataItem === null || dataItem === void 0 ? void 0 : dataItem.displayName), /*#__PURE__*/React.createElement("div", null, periods === null || periods === void 0 ? void 0 : periods.map(period => period.name).join(",")), /*#__PURE__*/React.createElement("div", null, i18n.t("Value"), ": ", data)));
+}

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/hooks/config.js

@@ -0,0 +1,9 @@
+import { find } from "lodash";
+import { useContext } from "react";
+import { MapLayersContext } from "../../../../../state";
+export default function useThematicLayer(layerId) {
+  const {
+    layers
+  } = useContext(MapLayersContext);
+  return find(layers, ["id", layerId]);
+}

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/index.js

@@ -0,0 +1,50 @@
+import { last } from "lodash";
+import React from "react";
+import { LayerGroup, LayersControl, Pane } from "react-leaflet";
+import Bubble from "./components/Bubble";
+import Choropleth from "./components/Choropleth";
+import useThematicLayer from "./hooks/config";
+export default function ThematicLayer(_ref) {
+  let {
+    layerId,
+    index
+  } = _ref;
+  const layer = useThematicLayer(layerId);
+  if (!layer) {
+    return null;
+  }
+  const {
+    type,
+    dataItem,
+    name,
+    data,
+    enabled,
+    legends
+  } = layer !== null && layer !== void 0 ? layer : {};
+  const uniqueName = name !== null && name !== void 0 ? name : dataItem.displayName;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LayersControl.Overlay, {
+    checked: enabled,
+    name: uniqueName
+  }, /*#__PURE__*/React.createElement(Pane, {
+    style: {
+      zIndex: type === "bubble" ? 500 : 500 - (index + 1)
+    },
+    name: uniqueName
+  }, /*#__PURE__*/React.createElement(LayerGroup, null, data === null || data === void 0 ? void 0 : data.map(datum => {
+    var _datum$dataItem, _datum$orgUnit;
+    return type === "choropleth" ? /*#__PURE__*/React.createElement(Choropleth, {
+      legends: legends !== null && legends !== void 0 ? legends : [],
+      data: datum,
+      key: `${datum === null || datum === void 0 ? void 0 : (_datum$dataItem = datum.dataItem) === null || _datum$dataItem === void 0 ? void 0 : _datum$dataItem.id}-${datum === null || datum === void 0 ? void 0 : (_datum$orgUnit = datum.orgUnit) === null || _datum$orgUnit === void 0 ? void 0 : _datum$orgUnit.id}-layer`
+    }) : null;
+  }), data === null || data === void 0 ? void 0 : data.map(datum => {
+    var _last$data, _last, _datum$dataItem2, _datum$orgUnit2;
+    return type === "bubble" ? /*#__PURE__*/React.createElement(Bubble, {
+      radius: layer === null || layer === void 0 ? void 0 : layer.radius,
+      legends: legends !== null && legends !== void 0 ? legends : [],
+      highestData: (_last$data = (_last = last(data)) === null || _last === void 0 ? void 0 : _last.data) !== null && _last$data !== void 0 ? _last$data : 1,
+      data: datum,
+      key: `${datum === null || datum === void 0 ? void 0 : (_datum$dataItem2 = datum.dataItem) === null || _datum$dataItem2 === void 0 ? void 0 : _datum$dataItem2.id}-${datum === null || datum === void 0 ? void 0 : (_datum$orgUnit2 = datum.orgUnit) === null || _datum$orgUnit2 === void 0 ? void 0 : _datum$orgUnit2.id}-layer`
+    }) : null;
+  })))));
+}

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/styles/legends.css

@@ -0,0 +1,62 @@
+.legend-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    padding: 0.5rem;
+    border-radius: 0.2rem;
+    background-color: #fff;
+    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
+    border: 2px solid rgba(0, 0, 0, 0.2);
+}
+
+.legend-card.collapsed {
+    padding: 0 !important;
+    float: right;
+}
+
+.legend-header {
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+}
+
+.legend-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: start;
+    padding: 0 1rem;
+    gap: 16px;
+    width: 100%;
+}
+
+.legend-item-color {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 1px;
+}
+
+.legend-item-label {
+}
+
+.source-url {
+    background: none !important;
+    line-height: inherit !important;
+    text-align: inherit !important;
+    width: auto !important;
+    height: auto !important;
+    text-decoration: underline !important;
+    color: #0078A8 !important;
+}
+
+.legend-list {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    gap: 4px;
+}

package/build/es/components/Map/components/MapLayer/index.js

@@ -0,0 +1,33 @@
+import React from "react";
+import BoundaryLayer from "./components/BoundaryLayer";
+import GoogleEngineLayer from "./components/GoogleEngineLayer";
+import { PointLayer } from "./components/PointLayer";
+import ThematicLayer from "./components/ThematicLayer";
+export default function MapLayer(_ref) {
+  let {
+    layer,
+    index
+  } = _ref;
+  switch (layer.type) {
+    case "overlay":
+    case "basemap":
+      return /*#__PURE__*/React.createElement(BoundaryLayer, layer);
+    case "bubble":
+    case "choropleth":
+      return /*#__PURE__*/React.createElement(ThematicLayer, {
+        layerId: layer.id,
+        index: index
+      });
+    case "point":
+      return /*#__PURE__*/React.createElement(PointLayer, null);
+    case "population":
+    case "elevation":
+    case "footprints":
+    case "landCover":
+      return /*#__PURE__*/React.createElement(GoogleEngineLayer, {
+        layerId: layer.id
+      });
+    default:
+      return null;
+  }
+}

package/build/es/components/Map/components/MapLayer/interfaces/index.js

@@ -0,0 +1 @@
+export const SUPPORTED_EARTH_ENGINE_LAYERS = ["population", "footprints", "elevation", "landCover"];

package/build/es/components/Map/components/MapProvider/components/MapLayerProvider/hooks/index.js

@@ -0,0 +1,381 @@
+import { compact, differenceBy, find, head, isEmpty, last, sortBy } from "lodash";
+import { useMapOrganisationUnit, useMapPeriods } from "../../../hooks";
+import { useCallback, useMemo, useState } from "react";
+import { generateLegends, getOrgUnitsSelection, sanitizeDate, sanitizeOrgUnits, toGeoJson } from "../../../../../utils/map";
+import { useDataEngine } from "@dhis2/app-runtime";
+import { asyncify, map } from "async-es";
+import { defaultClasses, defaultColorScaleName } from "../../../../../utils/colors";
+import { useGoogleEngineToken } from "../../../../MapLayer/components/GoogleEngineLayer/hooks";
+import { useBoundaryData } from "../../../../MapLayer/components/BoundaryLayer/hooks/useBoundaryData";
+import { EarthEngine } from "../../../../MapLayer/components/GoogleEngineLayer/services/engine";
+import { EARTH_ENGINE_LAYERS } from "../../../../MapLayer/components/GoogleEngineLayer/constants";
+const analyticsQuery = {
+  analytics: {
+    resource: "analytics",
+    params: _ref => {
+      let {
+        ou,
+        pe,
+        dx,
+        startDate,
+        endDate
+      } = _ref;
+      const peDimension = !isEmpty(pe) ? `pe:${pe === null || pe === void 0 ? void 0 : pe.join(";")}` : undefined;
+      const ouDimension = !isEmpty(ou) ? `ou:${ou === null || ou === void 0 ? void 0 : ou.join(";")}` : undefined;
+      const dxDimension = !isEmpty(dx) ? `dx:${dx === null || dx === void 0 ? void 0 : dx.join(";")}` : undefined;
+      return {
+        dimension: compact([dxDimension, peDimension, ouDimension]),
+        startDate,
+        endDate,
+        displayProperty: "NAME"
+      };
+    }
+  }
+};
+const query = {
+  layer: {
+    resource: "geoFeatures",
+    params: _ref2 => {
+      let {
+        ous
+      } = _ref2;
+      return {
+        ou: `ou:${ous.join(";")}`
+      };
+    }
+  },
+  analytics: {
+    resource: "analytics",
+    params: _ref3 => {
+      let {
+        ous
+      } = _ref3;
+      return {
+        dimension: [`ou:${ous.join(";")}`, `pe:${new Date().getFullYear()}`],
+        skipData: true,
+        hierarchyMeta: true
+      };
+    }
+  }
+};
+const groupSetQuery = {
+  groupSet: {
+    resource: "organisationUnitGroupSets",
+    id: _ref4 => {
+      let {
+        groupSet
+      } = _ref4;
+      return groupSet;
+    },
+    params: {
+      fields: ["organisationUnitGroups[name,color,symbol,organisationUnits[id]]"]
+    }
+  }
+};
+const legendSetsQuery = {
+  legendSets: {
+    resource: "legendSets",
+    id: _ref5 => {
+      let {
+        id
+      } = _ref5;
+      return id;
+    },
+    params: {
+      fields: ["id", "displayName", "legends[id,code,startValue,endValue,color]"]
+    }
+  }
+};
+export function useThematicLayers() {
+  var _useMapPeriods;
+  const engine = useDataEngine();
+  const [loading, setLoading] = useState(false);
+  const {
+    orgUnits,
+    orgUnitSelection
+  } = useMapOrganisationUnit();
+  const {
+    periods,
+    range
+  } = (_useMapPeriods = useMapPeriods()) !== null && _useMapPeriods !== void 0 ? _useMapPeriods : {};
+  const ou = useMemo(() => getOrgUnitsSelection(orgUnitSelection), [orgUnitSelection]);
+  const pe = useMemo(() => periods === null || periods === void 0 ? void 0 : periods.map(pe => pe.id), [periods]);
+  const {
+    startDate,
+    endDate
+  } = useMemo(() => {
+    if (!range) {
+      return {
+        startDate: undefined,
+        endDate: undefined
+      };
+    }
+    return {
+      startDate: sanitizeDate(range.start.toDateString()),
+      endDate: sanitizeDate(range.end.toDateString())
+    };
+  }, [range]);
+  const sanitizeData = (data, layer) => {
+    if (data) {
+      const {
+        analytics
+      } = data;
+      const rows = analytics === null || analytics === void 0 ? void 0 : analytics.rows;
+      const ouIndex = analytics.headers.findIndex(header => header.name === "ou");
+      const dxIndex = analytics.headers.findIndex(header => header.name === "dx");
+      const valueIndex = analytics.headers.findIndex(header => header.name === "value");
+      if (!isEmpty(rows)) {
+        return sortBy(orgUnits === null || orgUnits === void 0 ? void 0 : orgUnits.map(ou => {
+          const row = rows.find(row => row[ouIndex] === ou.id && row[dxIndex] === layer.dataItem.id);
+          return {
+            orgUnit: ou,
+            data: row ? parseFloat(row[valueIndex]) : undefined,
+            dataItem: {
+              ...layer.dataItem
+            }
+          };
+        }), ["data"]);
+      }
+      return [];
+    }
+    return [];
+  };
+  const sanitizeLegends = async layers => {
+    return await map(layers, asyncify(async layer => {
+      try {
+        const legends = [];
+        if (layer.dataItem.legendSet) {
+          const legendSetData = await engine.query(legendSetsQuery, {
+            variables: {
+              id: layer.dataItem.legendSet
+            }
+          });
+          const legendSet = legendSetData === null || legendSetData === void 0 ? void 0 : legendSetData.legendSets;
+          if (legendSet) {
+            legends.push(...legendSet.legends);
+          }
+        } else {
+          var _layer$dataItem$legen, _last$data, _last, _head$data, _head;
+          const {
+            scale,
+            colorClass
+          } = (_layer$dataItem$legen = layer.dataItem.legendConfig) !== null && _layer$dataItem$legen !== void 0 ? _layer$dataItem$legen : {
+            scale: defaultClasses,
+            colorClass: defaultColorScaleName
+          };
+          const sortedData = sortBy(layer.data, "data");
+          const autoLegends = generateLegends((_last$data = (_last = last(sortedData)) === null || _last === void 0 ? void 0 : _last.data) !== null && _last$data !== void 0 ? _last$data : 0, (_head$data = (_head = head(sortedData)) === null || _head === void 0 ? void 0 : _head.data) !== null && _head$data !== void 0 ? _head$data : 0, {
+            classesCount: scale,
+            colorClass
+          });
+          legends.push(...autoLegends);
+        }
+        return {
+          ...layer,
+          legends
+        };
+      } catch (e) {
+        return layer;
+      }
+    }));
+  };
+  const sanitizeLayers = async layers => {
+    try {
+      setLoading(true);
+      const layersWithoutData = layers === null || layers === void 0 ? void 0 : layers.filter(layer => !layer.data);
+      const layersWithData = differenceBy(layers, layersWithoutData, "id");
+      const dx = layersWithoutData.map(layer => layer.dataItem.id);
+      let sanitizedLayersWithData = [];
+      if (!isEmpty(dx)) {
+        const data = await engine.query(analyticsQuery, {
+          variables: {
+            dx,
+            ou,
+            pe,
+            startDate,
+            endDate
+          }
+        });
+        sanitizedLayersWithData = layersWithoutData.map(layer => {
+          var _ref6, _layer$name, _layer$dataItem;
+          return {
+            ...layer,
+            name: (_ref6 = (_layer$name = layer === null || layer === void 0 ? void 0 : layer.name) !== null && _layer$name !== void 0 ? _layer$name : layer === null || layer === void 0 ? void 0 : (_layer$dataItem = layer.dataItem) === null || _layer$dataItem === void 0 ? void 0 : _layer$dataItem.displayName) !== null && _ref6 !== void 0 ? _ref6 : layer.id,
+            data: sanitizeData(data, layer)
+          };
+        });
+      }
+      const sanitizedLayersWithOrgUnits = layersWithData.map(layer => {
+        var _layer$data;
+        return {
+          ...layer,
+          data: (_layer$data = layer.data) === null || _layer$data === void 0 ? void 0 : _layer$data.map(datum => {
+            var _ref7, _layer$name2, _layer$dataItem2;
+            return {
+              ...datum,
+              orgUnit: find(orgUnits, ["id", datum.orgUnit]),
+              dataItem: layer.dataItem,
+              name: (_ref7 = (_layer$name2 = layer === null || layer === void 0 ? void 0 : layer.name) !== null && _layer$name2 !== void 0 ? _layer$name2 : layer === null || layer === void 0 ? void 0 : (_layer$dataItem2 = layer.dataItem) === null || _layer$dataItem2 === void 0 ? void 0 : _layer$dataItem2.displayName) !== null && _ref7 !== void 0 ? _ref7 : layer.id
+            };
+          })
+        };
+      });
+      setLoading(false);
+      return await sanitizeLegends([...sanitizedLayersWithData, ...sanitizedLayersWithOrgUnits]);
+    } catch (e) {
+      console.error(`Error getting thematic layers`, e.details);
+      setLoading(false);
+      return [];
+    }
+  };
+  return {
+    sanitizeLayers,
+    loading
+  };
+}
+export function usePointLayer() {
+  const engine = useDataEngine();
+  const {
+    orgUnitSelection
+  } = useMapOrganisationUnit();
+  const [loading, setLoading] = useState(false);
+  const sanitizePointData = useCallback((orgUnitData, groupSetData) => {
+    var _ref8;
+    const {
+      analytics,
+      layer
+    } = (_ref8 = orgUnitData) !== null && _ref8 !== void 0 ? _ref8 : {};
+    const rawOrgUnits = sanitizeOrgUnits(analytics === null || analytics === void 0 ? void 0 : analytics.metaData);
+    const geoJSONObjects = toGeoJson(layer === null || layer === void 0 ? void 0 : layer.filter(bound => bound.co));
+    return compact(rawOrgUnits.map(orgUnit => {
+      var _organisationUnitGrou, _groupSetData$groupSe;
+      const geoJSONObject = geoJSONObjects === null || geoJSONObjects === void 0 ? void 0 : geoJSONObjects.find(geoJSON => geoJSON.properties.id === orgUnit.id);
+      const orgUnitGroups = (_organisationUnitGrou = groupSetData === null || groupSetData === void 0 ? void 0 : (_groupSetData$groupSe = groupSetData.groupSet) === null || _groupSetData$groupSe === void 0 ? void 0 : _groupSetData$groupSe.organisationUnitGroups) !== null && _organisationUnitGrou !== void 0 ? _organisationUnitGrou : [];
+      const ouGroup = find(orgUnitGroups, ouGroup => {
+        var _ouGroup$organisation;
+        return !!find((_ouGroup$organisation = ouGroup === null || ouGroup === void 0 ? void 0 : ouGroup.organisationUnits) !== null && _ouGroup$organisation !== void 0 ? _ouGroup$organisation : [], ["id", orgUnit.id]);
+      });
+      if (!geoJSONObject || geoJSONObject.properties.type !== "Point") {
+        return;
+      }
+      return {
+        ...orgUnit,
+        geoJSON: geoJSONObject,
+        level: geoJSONObject.properties.level,
+        icon: {
+          type: "groupIcon",
+          icon: ouGroup === null || ouGroup === void 0 ? void 0 : ouGroup.symbol
+        }
+      };
+    }));
+  }, []);
+  const sanitizeLayer = useCallback(async layer => {
+    try {
+      var _layer$style, _organisationUnitGrou2, _groupSetData$groupSe2;
+      if (!layer.level && !layer.group) {
+        return;
+      }
+      setLoading(true);
+      const level = layer.level ? `LEVEL-${layer.level}` : undefined;
+      const group = layer.group ? `OU_GROUP-${layer.group}` : undefined;
+      const ous = [...getOrgUnitsSelection(orgUnitSelection), level, group];
+      const pointData = await engine.query(query, {
+        variables: {
+          ous
+        }
+      });
+      const groupSetData = await engine.query(groupSetQuery, {
+        variables: {
+          groupSet: (_layer$style = layer.style) === null || _layer$style === void 0 ? void 0 : _layer$style.groupSet
+        }
+      });
+      const sanitizedOrgUnitData = sanitizePointData(pointData, groupSetData);
+      const orgUnitGroups = (_organisationUnitGrou2 = groupSetData === null || groupSetData === void 0 ? void 0 : (_groupSetData$groupSe2 = groupSetData.groupSet) === null || _groupSetData$groupSe2 === void 0 ? void 0 : _groupSetData$groupSe2.organisationUnitGroups) !== null && _organisationUnitGrou2 !== void 0 ? _organisationUnitGrou2 : [];
+      const sanitizedOrgUnitGroups = orgUnitGroups.map(ouGroup => ({
+        ...ouGroup,
+        organisationUnits: undefined
+      }));
+      setLoading(false);
+      return {
+        ...layer,
+        points: sanitizedOrgUnitData,
+        style: {
+          ...layer.style,
+          orgUnitGroups: sanitizedOrgUnitGroups
+        }
+      };
+    } catch (e) {
+      setLoading(false);
+      console.error(`Error getting point layer`, e.details);
+      return;
+    }
+  }, []);
+  return {
+    loading,
+    sanitizeLayer
+  };
+}
+export function useGoogleEngineLayers() {
+  const {
+    refresh
+  } = useGoogleEngineToken();
+  const orgUnits = useBoundaryData();
+  async function getImageUrl(earthEngine, _ref9) {
+    let {
+      filters
+    } = _ref9;
+    if (earthEngine.initialized) {
+      try {
+        earthEngine.setOrgUnits(orgUnits !== null && orgUnits !== void 0 ? orgUnits : []);
+        const period = filters === null || filters === void 0 ? void 0 : filters.period;
+        if (period) {
+          earthEngine.setPeriod(period);
+        }
+        return earthEngine.url();
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+  const sanitizeLayers = useCallback(async layers => {
+    try {
+      const {
+        token
+      } = await refresh();
+      await EarthEngine.setToken(token, refresh);
+      return map(layers, asyncify(async layer => {
+        try {
+          var _find, _layer$aggregations, _layer$params;
+          const defaultOptions = (_find = find(EARTH_ENGINE_LAYERS, ["id", layer.type])) !== null && _find !== void 0 ? _find : {};
+          const options = {
+            ...defaultOptions,
+            aggregations: (_layer$aggregations = layer.aggregations) !== null && _layer$aggregations !== void 0 ? _layer$aggregations : defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.aggregations,
+            params: (_layer$params = layer.params) !== null && _layer$params !== void 0 ? _layer$params : defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.params
+          };
+          const updatedLayer = {
+            ...layer,
+            options
+          };
+          const earthEngine = new EarthEngine({
+            options
+          });
+          const url = await getImageUrl(earthEngine, updatedLayer);
+          return {
+            ...updatedLayer,
+            engine: earthEngine,
+            url
+          };
+        } catch (e) {
+          console.error(e);
+          return;
+        }
+      }));
+    } catch (e) {
+      console.error(`Error getting thematic layers`, e.details);
+      return [];
+    }
+  }, [refresh]);
+  return {
+    sanitizeLayers
+  };
+}