@hisptz/dhis2-analytics 1.0.66 → 2.0.0-alpha.1

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

@@ -1,191 +0,0 @@
-import { capitalize, find, head, isEmpty, sortBy } from "lodash";
-import React, { useMemo, useRef } from "react";
-import { GeoJSON, LayerGroup, LayersControl, Popup, TileLayer, Tooltip } from "react-leaflet";
-import { useBoundaryData } from "../BoundaryLayer/hooks/useBoundaryData";
-import useGoogleEngineLayer from "./hooks";
-import { highlightFeature, resetHighlight } from "../../../../utils/map";
-import { defaultStyle, highlightStyle } from "../BoundaryLayer";
-import { useQuery } from "react-query";
-import { CenteredContent, CircularLoader, Divider } from "@dhis2/ui";
-import i18n from "@dhis2/d2-i18n";
-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 = find(legends, ["id", header]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "row gap-8 space-between"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "row gap-8"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "legend-item-color",
-    style: {
-      backgroundColor: legend === null || legend === void 0 ? void 0 : legend.color
-    }
-  }), /*#__PURE__*/React.createElement("div", null, legend === null || legend === void 0 ? void 0 : legend.name)), /*#__PURE__*/React.createElement("span", null, formatValues(value), getUnit(unit)));
-}
-function AggregationView(_ref2) {
-  let {
-    header,
-    value
-  } = _ref2;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "row space-between"
-  }, /*#__PURE__*/React.createElement("span", null, capitalize(header.toString())), /*#__PURE__*/React.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 : 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 = useMemo(() => {
-    if (!isEmpty(legends)) {
-      return 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.createElement("div", {
-      style: {
-        width: 200,
-        height: 200
-      }
-    }, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement(CircularLoader, {
-      extrasmall: true
-    })));
-  }
-  if (error) {
-    var _layer$options, _layer$options2;
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
-      style: {
-        margin: "0"
-      }
-    }, orgUnit.name), /*#__PURE__*/React.createElement(Divider, {
-      margin: "0"
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "column gap-8"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "column"
-    }, /*#__PURE__*/React.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.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.createElement("div", {
-      className: "column"
-    }, /*#__PURE__*/React.createElement("p", null, i18n.t("Could not get aggregate data")), /*#__PURE__*/React.createElement("p", null, error))));
-  }
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
-    style: {
-      margin: "0"
-    }
-  }, orgUnit.name), /*#__PURE__*/React.createElement(Divider, {
-    margin: "0"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "column gap-8"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "column"
-  }, /*#__PURE__*/React.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.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.createElement("div", {
-    className: "column"
-  }, Array.isArray(aggregations) ? aggregations === null || aggregations === void 0 ? void 0 : aggregations.map(_ref4 => {
-    let {
-      id,
-      value
-    } = _ref4;
-    return /*#__PURE__*/React.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.createElement(AggregationView, {
-    key: `${orgUnit.id}-aggregate-details-${key}`,
-    header: key,
-    value: aggregations[key]
-  })))));
-}
-function EarthEngineArea(_ref5) {
-  let {
-    area,
-    layer,
-    loading,
-    error
-  } = _ref5;
-  const ref = useRef();
-  return /*#__PURE__*/React.createElement(GeoJSON, {
-    ref: ref,
-    data: area.geoJSON,
-    interactive: true,
-    eventHandlers: {
-      mouseover: e => highlightFeature(e, highlightStyle),
-      mouseout: e => resetHighlight(e, defaultStyle)
-    },
-    key: `${area.id}-polygon`,
-    pathOptions: defaultStyle
-  }, /*#__PURE__*/React.createElement(Tooltip, null, area.name), /*#__PURE__*/React.createElement(Popup, {
-    minWidth: 100
-  }, /*#__PURE__*/React.createElement(EarthEnginePopup, {
-    error: error,
-    layer: layer,
-    orgUnit: area,
-    loading: loading
-  })));
-}
-export default function GoogleEngineLayer(_ref6) {
-  let {
-    layerId
-  } = _ref6;
-  const layer = useGoogleEngineLayer(layerId);
-  const {
-    name,
-    type,
-    enabled,
-    url,
-    options,
-    engine
-  } = layer !== null && layer !== void 0 ? layer : {};
-  const {
-    isLoading: loadingAggregateData,
-    error
-  } = useQuery([engine], async () => engine === null || engine === void 0 ? void 0 : engine.getAggregations(), {
-    suspense: false
-  });
-  const orgUnits = useBoundaryData();
-  if (!url) return null;
-  return /*#__PURE__*/React.createElement(LayersControl.Overlay, {
-    checked: enabled,
-    name: name !== null && name !== void 0 ? name : capitalize(type)
-  }, /*#__PURE__*/React.createElement(LayerGroup, null, /*#__PURE__*/React.createElement(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.createElement(EarthEngineArea, {
-      error: error === null || error === void 0 ? void 0 : error.toString(),
-      loading: loadingAggregateData,
-      key: `${area.id}-polygon`,
-      area: area,
-      layer: layer
-    });
-  })));
-}

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

@@ -1 +0,0 @@
-export {};