@hisptz/dhis2-analytics 1.0.4 → 1.0.6

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

@@ -0,0 +1,107 @@
+import i18n from "@dhis2/d2-i18n";
+import { CenteredContent, CircularLoader } from "@dhis2/ui";
+import { compact, find, head, set } from "lodash";
+import React, { useCallback, useEffect, useState } from "react";
+import { useMapEvents } from "react-leaflet";
+import { MapLayersContext } from "../../../../state";
+import { useMapOrganisationUnit, useMapPeriods } from "../../hooks";
+import { useGoogleEngineLayers, usePointLayer, useThematicLayers } from "./hooks";
+export function MapLayersProvider(_ref) {
+  let {
+    layers,
+    children
+  } = _ref;
+  const period = useMapPeriods();
+  const orgUnit = useMapOrganisationUnit();
+  const [updatedLayers, setUpdatedLayers] = useState([]);
+  const {
+    sanitizeLayers: sanitizeThematicLayers,
+    error
+  } = useThematicLayers();
+  const {
+    sanitizeLayer: sanitizePointLayer
+  } = usePointLayer();
+  const {
+    sanitizeLayers: sanitizeEarthEngineLayers
+  } = useGoogleEngineLayers();
+  const [loading, setLoading] = useState(false);
+  useMapEvents({
+    overlayremove: event => {
+      setupLayerListeners("remove", event);
+    },
+    overlayadd: event => {
+      setupLayerListeners("add", event);
+    }
+  });
+  const sanitizeLayers = async () => {
+    setLoading(true);
+    try {
+      const {
+        boundaryLayers,
+        thematicLayers,
+        pointLayers,
+        earthEngineLayers
+      } = layers;
+      const sanitizedThematicLayers = await sanitizeThematicLayers([...(thematicLayers !== null && thematicLayers !== void 0 ? thematicLayers : [])]);
+      const sanitizedBoundaryLayers = boundaryLayers !== null && boundaryLayers !== void 0 ? boundaryLayers : [];
+      const sanitizedPointLayer = head(pointLayers !== null && pointLayers !== void 0 ? pointLayers : []) ? await sanitizePointLayer(head(pointLayers)) : undefined;
+      const sanitizedEarthEngineLayers = await sanitizeEarthEngineLayers([...(earthEngineLayers !== null && earthEngineLayers !== void 0 ? earthEngineLayers : [])]);
+      setUpdatedLayers(compact([...(sanitizedBoundaryLayers !== null && sanitizedBoundaryLayers !== void 0 ? sanitizedBoundaryLayers : []), ...(sanitizedThematicLayers !== null && sanitizedThematicLayers !== void 0 ? sanitizedThematicLayers : []), sanitizedPointLayer, ...(sanitizedEarthEngineLayers !== null && sanitizedEarthEngineLayers !== void 0 ? sanitizedEarthEngineLayers : [])]));
+    } catch (e) {
+      console.error(`Error sanitizing layers`, e.toString());
+    }
+    setLoading(false);
+  };
+  const updateLayer = useCallback((id, updatedLayer) => {
+    setUpdatedLayers(prevLayers => {
+      const updatedLayers = [...prevLayers];
+      const layerIndex = updatedLayers.findIndex(layer => layer.id === updatedLayer.id);
+      if (layerIndex < 0) {
+        return prevLayers;
+      }
+      set(updatedLayers, layerIndex, updatedLayer);
+      return updatedLayers;
+    });
+  }, []);
+  useEffect(() => {
+    sanitizeLayers().catch(console.error);
+  }, [period, orgUnit]);
+  const setupLayerListeners = (type, event) => {
+    const name = event.name;
+    const layerConfig = find(updatedLayers, layer => {
+      var _ref2, _layer$name, _layer$dataItem;
+      const nameFromConfig = (_ref2 = (_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 && _ref2 !== void 0 ? _ref2 : layer === null || layer === void 0 ? void 0 : layer.label;
+      return nameFromConfig === name;
+    });
+    if (layerConfig) {
+      updateLayer(layerConfig.id, {
+        ...layerConfig,
+        enabled: type === "add"
+      });
+    }
+  };
+  if (loading) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: "100%",
+        width: "100%"
+      }
+    }, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement(CircularLoader, {
+      small: true
+    })));
+  }
+  if (error) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: "100%",
+        width: "100%"
+      }
+    }, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement("h4", null, i18n.t("Error"), ": ", error.message)));
+  }
+  return /*#__PURE__*/React.createElement(MapLayersContext.Provider, {
+    value: {
+      layers: updatedLayers,
+      updateLayer
+    }
+  }, children);
+}

package/{src/components/Map/components/MapProvider/hooks/index.ts → build/es/components/Map/components/MapProvider/hooks/index.js}

@@ -1,14 +1,11 @@
-import {useContext} from "react";
-import {MapLayersContext, MapOrgUnitContext, MapPeriodContext} from "../../../state";
-
+import { useContext } from "react";
+import { MapLayersContext, MapOrgUnitContext, MapPeriodContext } from "../../../state";
 export function useMapOrganisationUnit() {
   return useContext(MapOrgUnitContext);
 }
-
 export function useMapPeriods() {
   return useContext(MapPeriodContext);
 }
-
 export function useMapLayers() {
   return useContext(MapLayersContext);
-}
+}

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

@@ -0,0 +1,112 @@
+import { useDataQuery } from "@dhis2/app-runtime";
+import i18n from "@dhis2/d2-i18n";
+import { CenteredContent, CircularLoader } from "@dhis2/ui";
+import { compact, isEmpty } from "lodash";
+import React, { useEffect, useState } from "react";
+import { MapOrgUnitContext, MapPeriodContext } from "../../state";
+import { getOrgUnitsSelection, sanitizeOrgUnits, toGeoJson } from "../../utils/map";
+import { PeriodUtility } from "@hisptz/dhis2-utils";
+const boundaryQuery = {
+  boundaries: {
+    resource: "geoFeatures",
+    params: _ref => {
+      let {
+        orgUnitIds
+      } = _ref;
+      return {
+        ou: `ou:${orgUnitIds === null || orgUnitIds === void 0 ? void 0 : orgUnitIds.join(";")}`
+      };
+    }
+  },
+  analytics: {
+    resource: "analytics",
+    params: _ref2 => {
+      let {
+        orgUnitIds
+      } = _ref2;
+      return {
+        dimension: [`ou:${orgUnitIds.join(";")}`, `pe:${new Date().getFullYear()}`],
+        skipData: true,
+        hierarchyMeta: true
+      };
+    }
+  }
+};
+export function MapProvider(_ref3) {
+  var _periodSelection$peri;
+  let {
+    children,
+    orgUnitSelection,
+    periodSelection
+  } = _ref3;
+  const [orgUnits, setOrgUnits] = useState([]);
+  const {
+    refetch,
+    loading,
+    error
+  } = useDataQuery(boundaryQuery, {
+    lazy: true
+  });
+  useEffect(() => {
+    async function getOrgUnits() {
+      var _ref4;
+      const rawOrgUnitIds = getOrgUnitsSelection(orgUnitSelection);
+      const data = await refetch({
+        orgUnitIds: rawOrgUnitIds
+      });
+      const {
+        analytics,
+        boundaries
+      } = (_ref4 = data) !== null && _ref4 !== void 0 ? _ref4 : {};
+      const rawOrgUnits = sanitizeOrgUnits(analytics === null || analytics === void 0 ? void 0 : analytics.metaData);
+      const geoJSONObjects = toGeoJson(boundaries.filter(bound => bound.co));
+      const orgUnits = compact(rawOrgUnits.map(orgUnit => {
+        const geoJSONObject = geoJSONObjects === null || geoJSONObjects === void 0 ? void 0 : geoJSONObjects.find(geoJSON => geoJSON.properties.id === orgUnit.id);
+        if (!geoJSONObject) {
+          return;
+        }
+        return {
+          ...orgUnit,
+          geoJSON: geoJSONObject,
+          bounds: [],
+          level: geoJSONObject.properties.level
+        };
+      }));
+      setOrgUnits(orgUnits);
+    }
+    getOrgUnits().catch(error => console.log(error));
+  }, [orgUnitSelection, refetch]);
+  if (loading) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: "100%",
+        width: "100%"
+      }
+    }, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement(CircularLoader, {
+      small: true
+    })));
+  }
+  if (error) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: "100%",
+        width: "100%"
+      }
+    }, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement("h4", null, i18n.t("Error"), ": ", error.message)));
+  }
+  const periods = compact(periodSelection === null || periodSelection === void 0 ? void 0 : (_periodSelection$peri = periodSelection.periods) === null || _periodSelection$peri === void 0 ? void 0 : _periodSelection$peri.map(pe => PeriodUtility.getPeriodById(pe)));
+  if (!isEmpty(orgUnits)) {
+    return /*#__PURE__*/React.createElement(MapOrgUnitContext.Provider, {
+      value: {
+        orgUnitSelection,
+        orgUnits
+      }
+    }, /*#__PURE__*/React.createElement(MapPeriodContext.Provider, {
+      value: {
+        ...periodSelection,
+        periods
+      }
+    }, children));
+  }
+  return null;
+}

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

@@ -0,0 +1,17 @@
+import { useCenterMap } from "../../hooks/map";
+import React from "react";
+export default function MapUpdater(_ref) {
+  let {
+    bounds
+  } = _ref;
+  const ref = useCenterMap({
+    bounds
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      height: "100%"
+    },
+    ref: ref
+  });
+}

package/build/es/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfigModal.stories.js

@@ -0,0 +1,23 @@
+import { ThematicLayerConfigModal } from "./index";
+import React from "react";
+const Template = args => {
+  return /*#__PURE__*/React.createElement(ThematicLayerConfigModal, args);
+};
+export const Basic = Template.bind({});
+Basic.args = {
+  onChange: console.info,
+  onClose: () => {},
+  open: true
+};
+export default {
+  title: "Components/Map/Thematic Layer Config Modal",
+  component: ThematicLayerConfigModal,
+  decorators: [MapStory => {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: "50%",
+        height: "50%"
+      }
+    }, /*#__PURE__*/React.createElement(MapStory, null));
+  }]
+};

package/build/es/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfiguration.stories.js

@@ -0,0 +1,31 @@
+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 { ThematicLayerConfiguration } from "./index";
+import React from "react";
+import { useForm } from "react-hook-form";
+import i18n from "@dhis2/d2-i18n";
+import { Button } from "@dhis2/ui";
+const Template = args => {
+  const form = useForm();
+  return /*#__PURE__*/React.createElement("form", {
+    className: "column gap-16",
+    onSubmit: form.handleSubmit(console.log)
+  }, /*#__PURE__*/React.createElement(ThematicLayerConfiguration, _extends({}, args, {
+    form: form
+  })), /*#__PURE__*/React.createElement(Button, {
+    type: "submit"
+  }, i18n.t("Submit")));
+};
+export const Basic = Template.bind({});
+Basic.args = {};
+export default {
+  title: "Components/Map/Thematic Layer Configuration",
+  component: ThematicLayerConfiguration,
+  decorators: [MapStory => {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: "50%",
+        height: "50%"
+      }
+    }, /*#__PURE__*/React.createElement(MapStory, null));
+  }]
+};

package/build/es/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/components/ColorScale/index.js

@@ -0,0 +1,33 @@
+import React from "react";
+import styles from "../../styles/ColorScale.module.css";
+import { COLOR_PALETTES } from "../../constants/colors";
+
+// Returns one color scale based on a code and number of classes
+const ColorScale = _ref => {
+  var _scale;
+  let {
+    scale,
+    bins,
+    width,
+    onClick
+  } = _ref;
+  const colors = COLOR_PALETTES === null || COLOR_PALETTES === void 0 ? void 0 : (_scale = COLOR_PALETTES[scale]) === null || _scale === void 0 ? void 0 : _scale[bins];
+  const itemWidth = width ? width / bins : 36;
+  return /*#__PURE__*/React.createElement("ul", {
+    onClick: () => onClick(scale),
+    className: styles.colorScale,
+    style: {
+      ...(width && {
+        width
+      })
+    }
+  }, colors.map((color, index) => /*#__PURE__*/React.createElement("li", {
+    key: index,
+    className: styles.item,
+    style: {
+      backgroundColor: color,
+      width: itemWidth
+    }
+  })));
+};
+export default ColorScale;