@hisptz/dhis2-analytics 1.0.4 → 1.0.6

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

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MapLayersProvider = MapLayersProvider;
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _ui = require("@dhis2/ui");
+var _lodash = require("lodash");
+var _react = _interopRequireWildcard(require("react"));
+var _reactLeaflet = require("react-leaflet");
+var _state = require("../../../../state");
+var _hooks = require("../../hooks");
+var _hooks2 = require("./hooks");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function MapLayersProvider(_ref) {
+  let {
+    layers,
+    children
+  } = _ref;
+  const period = (0, _hooks.useMapPeriods)();
+  const orgUnit = (0, _hooks.useMapOrganisationUnit)();
+  const [updatedLayers, setUpdatedLayers] = (0, _react.useState)([]);
+  const {
+    sanitizeLayers: sanitizeThematicLayers,
+    error
+  } = (0, _hooks2.useThematicLayers)();
+  const {
+    sanitizeLayer: sanitizePointLayer
+  } = (0, _hooks2.usePointLayer)();
+  const {
+    sanitizeLayers: sanitizeEarthEngineLayers
+  } = (0, _hooks2.useGoogleEngineLayers)();
+  const [loading, setLoading] = (0, _react.useState)(false);
+  (0, _reactLeaflet.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 = (0, _lodash.head)(pointLayers !== null && pointLayers !== void 0 ? pointLayers : []) ? await sanitizePointLayer((0, _lodash.head)(pointLayers)) : undefined;
+      const sanitizedEarthEngineLayers = await sanitizeEarthEngineLayers([...(earthEngineLayers !== null && earthEngineLayers !== void 0 ? earthEngineLayers : [])]);
+      setUpdatedLayers((0, _lodash.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 = (0, _react.useCallback)((id, updatedLayer) => {
+    setUpdatedLayers(prevLayers => {
+      const updatedLayers = [...prevLayers];
+      const layerIndex = updatedLayers.findIndex(layer => layer.id === updatedLayer.id);
+      if (layerIndex < 0) {
+        return prevLayers;
+      }
+      (0, _lodash.set)(updatedLayers, layerIndex, updatedLayer);
+      return updatedLayers;
+    });
+  }, []);
+  (0, _react.useEffect)(() => {
+    sanitizeLayers().catch(console.error);
+  }, [period, orgUnit]);
+  const setupLayerListeners = (type, event) => {
+    const name = event.name;
+    const layerConfig = (0, _lodash.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.default.createElement("div", {
+      style: {
+        height: "100%",
+        width: "100%"
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, {
+      small: true
+    })));
+  }
+  if (error) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: "100%",
+        width: "100%"
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, /*#__PURE__*/_react.default.createElement("h4", null, _d2I18n.default.t("Error"), ": ", error.message)));
+  }
+  return /*#__PURE__*/_react.default.createElement(_state.MapLayersContext.Provider, {
+    value: {
+      layers: updatedLayers,
+      updateLayer
+    }
+  }, children);
+}

package/build/cjs/components/Map/components/MapProvider/hooks/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMapLayers = useMapLayers;
+exports.useMapOrganisationUnit = useMapOrganisationUnit;
+exports.useMapPeriods = useMapPeriods;
+var _react = require("react");
+var _state = require("../../../state");
+function useMapOrganisationUnit() {
+  return (0, _react.useContext)(_state.MapOrgUnitContext);
+}
+function useMapPeriods() {
+  return (0, _react.useContext)(_state.MapPeriodContext);
+}
+function useMapLayers() {
+  return (0, _react.useContext)(_state.MapLayersContext);
+}

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

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MapProvider = MapProvider;
+var _appRuntime = require("@dhis2/app-runtime");
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _ui = require("@dhis2/ui");
+var _lodash = require("lodash");
+var _react = _interopRequireWildcard(require("react"));
+var _state = require("../../state");
+var _map = require("../../utils/map");
+var _dhis2Utils = require("@hisptz/dhis2-utils");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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
+      };
+    }
+  }
+};
+function MapProvider(_ref3) {
+  var _periodSelection$peri;
+  let {
+    children,
+    orgUnitSelection,
+    periodSelection
+  } = _ref3;
+  const [orgUnits, setOrgUnits] = (0, _react.useState)([]);
+  const {
+    refetch,
+    loading,
+    error
+  } = (0, _appRuntime.useDataQuery)(boundaryQuery, {
+    lazy: true
+  });
+  (0, _react.useEffect)(() => {
+    async function getOrgUnits() {
+      var _ref4;
+      const rawOrgUnitIds = (0, _map.getOrgUnitsSelection)(orgUnitSelection);
+      const data = await refetch({
+        orgUnitIds: rawOrgUnitIds
+      });
+      const {
+        analytics,
+        boundaries
+      } = (_ref4 = data) !== null && _ref4 !== void 0 ? _ref4 : {};
+      const rawOrgUnits = (0, _map.sanitizeOrgUnits)(analytics === null || analytics === void 0 ? void 0 : analytics.metaData);
+      const geoJSONObjects = (0, _map.toGeoJson)(boundaries.filter(bound => bound.co));
+      const orgUnits = (0, _lodash.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.default.createElement("div", {
+      style: {
+        height: "100%",
+        width: "100%"
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, {
+      small: true
+    })));
+  }
+  if (error) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: "100%",
+        width: "100%"
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, /*#__PURE__*/_react.default.createElement("h4", null, _d2I18n.default.t("Error"), ": ", error.message)));
+  }
+  const periods = (0, _lodash.compact)(periodSelection === null || periodSelection === void 0 ? void 0 : (_periodSelection$peri = periodSelection.periods) === null || _periodSelection$peri === void 0 ? void 0 : _periodSelection$peri.map(pe => _dhis2Utils.PeriodUtility.getPeriodById(pe)));
+  if (!(0, _lodash.isEmpty)(orgUnits)) {
+    return /*#__PURE__*/_react.default.createElement(_state.MapOrgUnitContext.Provider, {
+      value: {
+        orgUnitSelection,
+        orgUnits
+      }
+    }, /*#__PURE__*/_react.default.createElement(_state.MapPeriodContext.Provider, {
+      value: {
+        ...periodSelection,
+        periods
+      }
+    }, children));
+  }
+  return null;
+}

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MapUpdater;
+var _map = require("../../hooks/map");
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function MapUpdater(_ref) {
+  let {
+    bounds
+  } = _ref;
+  const ref = (0, _map.useCenterMap)({
+    bounds
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: "100%",
+      height: "100%"
+    },
+    ref: ref
+  });
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Basic = void 0;
+var _index = require("./index");
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Template = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.ThematicLayerConfigModal, args);
+};
+const Basic = Template.bind({});
+exports.Basic = Basic;
+Basic.args = {
+  onChange: console.info,
+  onClose: () => {},
+  open: true
+};
+var _default = {
+  title: "Components/Map/Thematic Layer Config Modal",
+  component: _index.ThematicLayerConfigModal,
+  decorators: [MapStory => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: "50%",
+        height: "50%"
+      }
+    }, /*#__PURE__*/_react.default.createElement(MapStory, null));
+  }]
+};
+exports.default = _default;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Basic = void 0;
+var _index = require("./index");
+var _react = _interopRequireDefault(require("react"));
+var _reactHookForm = require("react-hook-form");
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _ui = require("@dhis2/ui");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+const Template = args => {
+  const form = (0, _reactHookForm.useForm)();
+  return /*#__PURE__*/_react.default.createElement("form", {
+    className: "column gap-16",
+    onSubmit: form.handleSubmit(console.log)
+  }, /*#__PURE__*/_react.default.createElement(_index.ThematicLayerConfiguration, _extends({}, args, {
+    form: form
+  })), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    type: "submit"
+  }, _d2I18n.default.t("Submit")));
+};
+const Basic = Template.bind({});
+exports.Basic = Basic;
+Basic.args = {};
+var _default = {
+  title: "Components/Map/Thematic Layer Configuration",
+  component: _index.ThematicLayerConfiguration,
+  decorators: [MapStory => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: "50%",
+        height: "50%"
+      }
+    }, /*#__PURE__*/_react.default.createElement(MapStory, null));
+  }]
+};
+exports.default = _default;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ColorScaleModule = _interopRequireDefault(require("../../styles/ColorScale.module.css"));
+var _colors = require("../../constants/colors");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// 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 = _colors.COLOR_PALETTES === null || _colors.COLOR_PALETTES === void 0 ? void 0 : (_scale = _colors.COLOR_PALETTES[scale]) === null || _scale === void 0 ? void 0 : _scale[bins];
+  const itemWidth = width ? width / bins : 36;
+  return /*#__PURE__*/_react.default.createElement("ul", {
+    onClick: () => onClick(scale),
+    className: _ColorScaleModule.default.colorScale,
+    style: {
+      ...(width && {
+        width
+      })
+    }
+  }, colors.map((color, index) => /*#__PURE__*/_react.default.createElement("li", {
+    key: index,
+    className: _ColorScaleModule.default.item,
+    style: {
+      backgroundColor: color,
+      width: itemWidth
+    }
+  })));
+};
+var _default = ColorScale;
+exports.default = _default;