@hisptz/dhis2-analytics 1.0.4 → 1.0.6

package/build/cjs/components/Map/components/MapLayer/components/GoogleEngineLayer/index.js

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = GoogleEngineLayer;
+var _lodash = require("lodash");
+var _react = _interopRequireWildcard(require("react"));
+var _reactLeaflet = require("react-leaflet");
+var _useBoundaryData = require("../BoundaryLayer/hooks/useBoundaryData");
+var _hooks = _interopRequireDefault(require("./hooks"));
+var _map = require("../../../../utils/map");
+var _BoundaryLayer = require("../BoundaryLayer");
+var _reactQuery = require("react-query");
+var _ui = require("@dhis2/ui");
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 formatValues(value) {
+  return Intl.NumberFormat("en-GB", {
+    maximumFractionDigits: 2
+  }).format(value);
+}
+function getUnit(unit) {
+  if (unit === "percentage") {
+    return "%";
+  }
+}
+function Legend(_ref) {
+  let {
+    header,
+    legends,
+    value,
+    unit
+  } = _ref;
+  const legend = (0, _lodash.find)(legends, ["id", header]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "row gap-8 space-between"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row gap-8"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-item-color",
+    style: {
+      backgroundColor: legend === null || legend === void 0 ? void 0 : legend.color
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", null, legend === null || legend === void 0 ? void 0 : legend.name)), /*#__PURE__*/_react.default.createElement("span", null, formatValues(value), getUnit(unit)));
+}
+function AggregationView(_ref2) {
+  let {
+    header,
+    value
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "row space-between"
+  }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lodash.capitalize)(header.toString())), /*#__PURE__*/_react.default.createElement("span", null, formatValues(value)));
+}
+function EarthEnginePopup(_ref3) {
+  var _layer$engine, _layer$engine$options, _layer$engine$options2, _engine$getAggregatio, _layer$engine$options3, _layer$engine2, _layer$engine2$option, _layer$engine3, _layer$options3, _layer$options$unit, _layer$options4, _Object$keys;
+  let {
+    layer,
+    orgUnit,
+    loading,
+    error
+  } = _ref3;
+  const engine = layer === null || layer === void 0 ? void 0 : layer.engine;
+  const legends = layer === null || layer === void 0 ? void 0 : (_layer$engine = layer.engine) === null || _layer$engine === void 0 ? void 0 : (_layer$engine$options = _layer$engine.options) === null || _layer$engine$options === void 0 ? void 0 : (_layer$engine$options2 = _layer$engine$options.legend) === null || _layer$engine$options2 === void 0 ? void 0 : _layer$engine$options2.items;
+  const data = engine === null || engine === void 0 ? void 0 : (_engine$getAggregatio = engine.getAggregation(orgUnit)) === null || _engine$getAggregatio === void 0 ? void 0 : _engine$getAggregatio.data;
+  const unit = (_layer$engine$options3 = layer === null || layer === void 0 ? void 0 : (_layer$engine2 = layer.engine) === null || _layer$engine2 === void 0 ? void 0 : (_layer$engine2$option = _layer$engine2.options) === null || _layer$engine2$option === void 0 ? void 0 : _layer$engine2$option.unit) !== null && _layer$engine$options3 !== void 0 ? _layer$engine$options3 : (0, _lodash.head)(layer === null || layer === void 0 ? void 0 : (_layer$engine3 = layer.engine) === null || _layer$engine3 === void 0 ? void 0 : _layer$engine3.options.aggregations);
+  const aggregations = (0, _react.useMemo)(() => {
+    if (!(0, _lodash.isEmpty)(legends)) {
+      return (0, _lodash.sortBy)(Object.keys(data !== null && data !== void 0 ? data : {}).map(key => {
+        return {
+          id: parseInt(key),
+          value: data[key]
+        };
+      }), ["value"]).reverse();
+    }
+    return data !== null && data !== void 0 ? data : {};
+  }, [data]);
+  if (loading) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: 200,
+        height: 200
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ui.CenteredContent, null, /*#__PURE__*/_react.default.createElement(_ui.CircularLoader, {
+      extrasmall: true
+    })));
+  }
+  if (error) {
+    var _layer$options, _layer$options2;
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
+      style: {
+        margin: "0"
+      }
+    }, orgUnit.name), /*#__PURE__*/_react.default.createElement(_ui.Divider, {
+      margin: "0"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "column gap-8"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "column"
+    }, /*#__PURE__*/_react.default.createElement("b", null, layer === null || layer === void 0 ? void 0 : (_layer$options = layer.options) === null || _layer$options === void 0 ? void 0 : _layer$options.name), /*#__PURE__*/_react.default.createElement("div", null, layer === null || layer === void 0 ? void 0 : (_layer$options2 = layer.options) === null || _layer$options2 === void 0 ? void 0 : _layer$options2.unit)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "column"
+    }, /*#__PURE__*/_react.default.createElement("p", null, _d2I18n.default.t("Could not get aggregate data")), /*#__PURE__*/_react.default.createElement("p", null, error))));
+  }
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
+    style: {
+      margin: "0"
+    }
+  }, orgUnit.name), /*#__PURE__*/_react.default.createElement(_ui.Divider, {
+    margin: "0"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "column gap-8"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "column"
+  }, /*#__PURE__*/_react.default.createElement("b", null, layer === null || layer === void 0 ? void 0 : (_layer$options3 = layer.options) === null || _layer$options3 === void 0 ? void 0 : _layer$options3.name), /*#__PURE__*/_react.default.createElement("div", null, (_layer$options$unit = layer === null || layer === void 0 ? void 0 : (_layer$options4 = layer.options) === null || _layer$options4 === void 0 ? void 0 : _layer$options4.unit) !== null && _layer$options$unit !== void 0 ? _layer$options$unit : unit)), data && /*#__PURE__*/_react.default.createElement("div", {
+    className: "column"
+  }, Array.isArray(aggregations) ? aggregations === null || aggregations === void 0 ? void 0 : aggregations.map(_ref4 => {
+    let {
+      id,
+      value
+    } = _ref4;
+    return /*#__PURE__*/_react.default.createElement(Legend, {
+      key: `${orgUnit.id}-legend-details-${id}`,
+      legends: legends !== null && legends !== void 0 ? legends : [],
+      value: value,
+      header: id,
+      unit: unit
+    });
+  }) : (_Object$keys = Object.keys(aggregations)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.map(key => /*#__PURE__*/_react.default.createElement(AggregationView, {
+    key: `${orgUnit.id}-aggregate-details-${key}`,
+    header: key,
+    value: aggregations[key]
+  })))));
+}
+function EarthEngineArea(_ref5) {
+  let {
+    area,
+    layer,
+    loading,
+    error
+  } = _ref5;
+  const ref = (0, _react.useRef)();
+  return /*#__PURE__*/_react.default.createElement(_reactLeaflet.GeoJSON, {
+    ref: ref,
+    data: area.geoJSON,
+    interactive: true,
+    eventHandlers: {
+      mouseover: e => (0, _map.highlightFeature)(e, _BoundaryLayer.highlightStyle),
+      mouseout: e => (0, _map.resetHighlight)(e, _BoundaryLayer.defaultStyle)
+    },
+    key: `${area.id}-polygon`,
+    pathOptions: _BoundaryLayer.defaultStyle
+  }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.Tooltip, null, area.name), /*#__PURE__*/_react.default.createElement(_reactLeaflet.Popup, {
+    minWidth: 100
+  }, /*#__PURE__*/_react.default.createElement(EarthEnginePopup, {
+    error: error,
+    layer: layer,
+    orgUnit: area,
+    loading: loading
+  })));
+}
+function GoogleEngineLayer(_ref6) {
+  let {
+    layerId
+  } = _ref6;
+  const layer = (0, _hooks.default)(layerId);
+  const {
+    name,
+    type,
+    enabled,
+    url,
+    options,
+    engine
+  } = layer !== null && layer !== void 0 ? layer : {};
+  const {
+    isLoading: loadingAggregateData,
+    error
+  } = (0, _reactQuery.useQuery)([engine], async () => engine === null || engine === void 0 ? void 0 : engine.getAggregations(), {
+    suspense: false
+  });
+  const orgUnits = (0, _useBoundaryData.useBoundaryData)();
+  if (!url) return null;
+  return /*#__PURE__*/_react.default.createElement(_reactLeaflet.LayersControl.Overlay, {
+    checked: enabled,
+    name: name !== null && name !== void 0 ? name : (0, _lodash.capitalize)(type)
+  }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.LayerGroup, null, /*#__PURE__*/_react.default.createElement(_reactLeaflet.TileLayer, {
+    id: options === null || options === void 0 ? void 0 : options.id,
+    url: url
+  }), orgUnits === null || orgUnits === void 0 ? void 0 : orgUnits.map(area => {
+    return /*#__PURE__*/_react.default.createElement(EarthEngineArea, {
+      error: error === null || error === void 0 ? void 0 : error.toString(),
+      loading: loadingAggregateData,
+      key: `${area.id}-polygon`,
+      area: area,
+      layer: layer
+    });
+  })));
+}

package/build/cjs/components/Map/components/MapLayer/components/GoogleEngineLayer/interfaces/index.js

@@ -0,0 +1 @@
+"use strict";