@hisptz/dhis2-analytics 1.0.4 → 1.0.6

package/build/es/components/Map/components/MapLayer/components/GoogleEngineLayer/services/engine.js

@@ -0,0 +1,403 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { combineReducers, getFeatureCollectionProperties, getHistogramStatistics, getInfo, getScale, hasClasses } from "../utils";
+import { find, head, isEmpty } from "lodash";
+async function importEEModule() {
+  // @ts-ignore
+  if (import.meta.env.STORYBOOK_BUILD === "true") {
+    return await import("@google/earthengine");
+  }
+  return await import("./api");
+}
+const EE = await importEEModule();
+
+// @ts-ignore
+const ee = EE;
+// @ts-ignore
+window.ee = ee;
+const FEATURE_STYLE = {
+  color: "FFA500",
+  strokeWidth: 2
+};
+const DEFAULT_TILE_SCALE = 1;
+export class EarthEngine {
+  constructor(_ref) {
+    let {
+      options
+    } = _ref;
+    _defineProperty(this, "token", void 0);
+    _defineProperty(this, "options", void 0);
+    _defineProperty(this, "refresh", void 0);
+    _defineProperty(this, "orgUnits", void 0);
+    _defineProperty(this, "initialized", false);
+    _defineProperty(this, "period", void 0);
+    _defineProperty(this, "instance", void 0);
+    _defineProperty(this, "scale", void 0);
+    _defineProperty(this, "image", void 0);
+    _defineProperty(this, "aggregationData", void 0);
+    this.options = options;
+    this.initialized = true;
+    this.getInstance();
+  }
+  static async setToken(token, refresh) {
+    const tokenType = "Bearer";
+    function refreshToken(authArgs, callback) {
+      refresh().then(_ref2 => {
+        let {
+          token
+        } = _ref2;
+        callback({
+          ...token,
+          token_type: tokenType !== null && tokenType !== void 0 ? tokenType : "Bearer",
+          state: authArgs === null || authArgs === void 0 ? void 0 : authArgs.scope
+        });
+      });
+    }
+    await new Promise((resolve, reject) => {
+      if (ee.data.getAuthToken()) {
+        ee.initialize(null, null, resolve, reject);
+      }
+      if (token) {
+        const {
+          access_token,
+          client_id,
+          expires_in
+        } = token;
+        ee.data.setAuthToken(client_id, tokenType !== null && tokenType !== void 0 ? tokenType : "Bearer", access_token, expires_in, null, () => {
+          ee.initialize(null, null, resolve, reject);
+        }, false);
+        ee.data.setAuthTokenRefresher(refreshToken);
+      }
+      resolve("Token not found");
+    });
+  }
+  setOrgUnits(orgUnits) {
+    this.orgUnits = orgUnits;
+    return this;
+  }
+  setPeriod(period) {
+    this.period = period;
+  }
+  async getValue(geoJSON, type) {
+    return new Promise((resolve, reject) => {
+      const point = this.getGeometryByType(geoJSON);
+      const reducer = this.getReducerByType(type);
+      const image = this.getImage();
+      const reducedImage = image.reduceRegion(reducer, point, 1);
+      reducedImage.evaluate((data, error) => {
+        if (error) {
+          reject(error);
+        } else {
+          resolve(data);
+        }
+      });
+    });
+  }
+  async getPeriod() {
+    const {
+      type
+    } = this.options;
+    if (type !== "ImageCollection") {
+      return;
+    }
+    const imageCollection = this.instance.distinct("system:time_start").sort("system:time_start", false);
+    const featureCollection = ee.FeatureCollection(imageCollection).select(["system:time_start", "system:time_end"], null, false);
+    return getInfo(featureCollection);
+  }
+  async info() {
+    return new Promise(resolve => {
+      this.instance.getInfo(resolve);
+    });
+  }
+  async getScale() {
+    try {
+      const {
+        type
+      } = this.options;
+      switch (type) {
+        case "ImageCollection":
+          this.scale = await getScale(this.instance.first());
+          break;
+        default:
+          this.scale = await getScale(this.getImage());
+      }
+    } catch (e) {}
+  }
+  async getFeatureCollectionAggregation() {
+    const {
+      datasetId
+    } = this.options;
+    const dataset = ee.FeatureCollection(datasetId);
+    const collection = this.getFeatureCollection();
+    const aggFeatures = collection === null || collection === void 0 ? void 0 : collection.map(feature => {
+      feature = ee.Feature(feature);
+      const count = dataset.filterBounds(feature.geometry()).size();
+      return feature.set("count", count);
+    }).select(["count"], null, false);
+    return getInfo(aggFeatures).then(getFeatureCollectionProperties);
+  }
+  async getHistogramAggregations() {
+    try {
+      var _head, _this$options$legend, _this$options$tileSca;
+      const aggregation = (_head = head(this.options.aggregations)) !== null && _head !== void 0 ? _head : "";
+      const reducer = ee.Reducer.frequencyHistogram();
+      const collection = this.getFeatureCollection();
+      const legend = (_this$options$legend = this.options.legend) === null || _this$options$legend === void 0 ? void 0 : _this$options$legend.items;
+      const scale = this.scale;
+      const tileScale = (_this$options$tileSca = this.options.tileScale) !== null && _this$options$tileSca !== void 0 ? _this$options$tileSca : DEFAULT_TILE_SCALE;
+      const scaleValue = await getInfo(scale);
+      const image = this.getImage();
+      const features = Object.values(await getInfo(image.reduceRegions({
+        collection,
+        reducer,
+        scale,
+        tileScale
+      }).select(["histogram"], null, false)).then(data => getHistogramStatistics({
+        data,
+        scale: scaleValue,
+        aggregationType: aggregation,
+        legend
+      })));
+      return features.map((feature, index) => {
+        var _this$orgUnits;
+        return {
+          orgUnit: (_this$orgUnits = this.orgUnits) === null || _this$orgUnits === void 0 ? void 0 : _this$orgUnits[index],
+          data: feature
+        };
+      });
+    } catch (e) {
+      throw Error("Could not get histogram", {
+        cause: e
+      });
+    }
+  }
+  async getAggregations() {
+    var _head2, _this$options$tileSca2, _this$orgUnits2;
+    await this.getScale();
+    const {
+      type
+    } = this.options;
+    if (type === "FeatureCollection") {
+      this.aggregationData = await this.getFeatureCollectionAggregation();
+      return;
+    }
+    const aggregations = this.options.aggregations;
+    if (!aggregations) return;
+    if (hasClasses((_head2 = head(aggregations)) !== null && _head2 !== void 0 ? _head2 : "")) {
+      this.aggregationData = await this.getHistogramAggregations();
+      return;
+    }
+    const reducer = combineReducers(ee)(aggregations);
+    const collection = this.getFeatureCollection();
+    const image = this.getImage();
+    const scale = this.scale;
+    const tileScale = (_this$options$tileSca2 = this.options.tileScale) !== null && _this$options$tileSca2 !== void 0 ? _this$options$tileSca2 : DEFAULT_TILE_SCALE;
+    const aggregatedFeatures = image.reduceRegions({
+      collection,
+      reducer,
+      scale,
+      tileScale
+    }).select(aggregations, null, false);
+    const features = Object.values(getFeatureCollectionProperties(await getInfo(aggregatedFeatures)));
+    if (!isEmpty(features) && features.length === ((_this$orgUnits2 = this.orgUnits) === null || _this$orgUnits2 === void 0 ? void 0 : _this$orgUnits2.length)) {
+      //Mapping features to orgUnits using index.
+      this.aggregationData = features.map((feature, index) => {
+        var _this$orgUnits3;
+        return {
+          orgUnit: (_this$orgUnits3 = this.orgUnits) === null || _this$orgUnits3 === void 0 ? void 0 : _this$orgUnits3[index],
+          data: feature
+        };
+      });
+    }
+  }
+  getAggregation(orgUnit) {
+    if (isEmpty(this.aggregationData)) {
+      return;
+    }
+    return find(this.aggregationData, aggregation => aggregation.orgUnit.id === orgUnit.id);
+  }
+  async url() {
+    if (!this.initialized) throw "You need to call init() first";
+    return this.visualize(this.getImage());
+  }
+  applyPeriod(imageCollection) {
+    const period = this.period;
+    if (period) {
+      return imageCollection.filterDate(period);
+    }
+  }
+  applyMask(image) {
+    if (this.options.mask) {
+      return image.updateMask(image.gt(0));
+    } else {
+      return image;
+    }
+  }
+  applyBand(imageCollection) {
+    if (this.options.selectedBands) {
+      return imageCollection.select(this.options.selectedBands);
+    } else {
+      return imageCollection;
+    }
+  }
+  getReducerByType(type) {
+    return ee.Reducer[type].call();
+  }
+  getGeometryByType(geoJSON) {
+    return ee.Geometry(geoJSON === null || geoJSON === void 0 ? void 0 : geoJSON.geometry);
+  }
+  getFeatureByType(geoJSON) {
+    var _geoJSON$features;
+    const featureType = geoJSON.type;
+    const features = (_geoJSON$features = geoJSON.features) !== null && _geoJSON$features !== void 0 ? _geoJSON$features : [];
+    const geometry = this.getGeometryByType(geoJSON);
+    switch (featureType) {
+      case "Feature":
+        return ee.Feature(geometry);
+      case "FeatureCollection":
+        return ee.FeatureCollection([...features.map(feature => ee.Feature(this.getGeometryByType(feature)))]);
+    }
+  }
+  getFeatureCollection() {
+    if (this.orgUnits) {
+      return ee.FeatureCollection(this.orgUnits.map(orgUnit => this.getFeatureByType(orgUnit.geoJSON)));
+    } else {
+      throw "You need to set org units first";
+    }
+  }
+  getParamsFromLegend() {
+    if (!this.options.legend) return;
+    const legend = this.options.legend.items;
+    const keys = legend.map(l => l.id);
+    const min = Math.min(...keys);
+    const max = Math.max(...keys);
+    const palette = legend.map(l => l.color).join(",");
+    return {
+      min,
+      max,
+      palette
+    };
+  }
+  async visualize(image) {
+    var _ref3, _this$getParamsFromLe, _await$Promise;
+    const {
+      min,
+      max,
+      palette
+    } = (_ref3 = (_this$getParamsFromLe = this.getParamsFromLegend()) !== null && _this$getParamsFromLe !== void 0 ? _this$getParamsFromLe : this.options.params) !== null && _ref3 !== void 0 ? _ref3 : {
+      min: null,
+      max: null,
+      palette: null
+    };
+    return (_await$Promise = await new Promise((resolve, reject) => {
+      image.getMap({
+        min,
+        max,
+        palette
+      }, resolve);
+    })) === null || _await$Promise === void 0 ? void 0 : _await$Promise.urlFormat;
+  }
+  getImageCollectionInstance() {
+    const {
+      datasetId
+    } = this.options;
+    let imageCollection = ee.ImageCollection(datasetId);
+    if (this.period) {
+      imageCollection = this.applyPeriod(imageCollection);
+    }
+    imageCollection = this.applyBand(imageCollection);
+    return imageCollection;
+  }
+  getImageFromImageCollection() {
+    const {
+      mosaic
+    } = this.options;
+    const imageCollection = this.instance;
+    return mosaic ? imageCollection.mosaic().clipToCollection(this.getFeatureCollection()) : ee.Image(imageCollection.first()).clipToCollection(this.getFeatureCollection());
+  }
+  getImageInstance() {
+    const {
+      datasetId
+    } = this.options;
+    return ee.Image(datasetId).clipToCollection(this.getFeatureCollection());
+  }
+  getImageFromImage() {
+    return this.instance;
+  }
+  getFeatureInstance() {
+    const {
+      datasetId
+    } = this.options;
+    const feature = ee.Feature(datasetId);
+    this.instance = feature;
+    return feature;
+  }
+  getImageFromFeature() {
+    return this.instance;
+  }
+  getFeatureCollectionInstance() {
+    const {
+      datasetId
+    } = this.options;
+    let featureCollection = ee.FeatureCollection(datasetId);
+    if (this.period) {
+      featureCollection = this.applyPeriod(featureCollection);
+    }
+    return featureCollection;
+  }
+  getImageFromFeatureCollection() {
+    let featureCollection = this.instance;
+    return featureCollection.draw(FEATURE_STYLE).clipToCollection(this.getFeatureCollection());
+  }
+  getInstance() {
+    const {
+      type
+    } = this.options;
+    switch (type) {
+      case "Feature":
+        this.instance = this.getFeatureInstance();
+        break;
+      case "FeatureCollection":
+        this.instance = this.getFeatureCollectionInstance();
+        break;
+      case "Image":
+        this.instance = this.getImageInstance();
+        break;
+      case "ImageCollection":
+        this.instance = this.getImageCollectionInstance();
+        break;
+      default:
+        this.instance = this.getImageFromImage();
+    }
+  }
+  getImage() {
+    if (this.image) {
+      return this.image;
+    }
+    const {
+      type
+    } = this.options;
+    let image;
+    switch (type) {
+      case "Feature":
+        image = this.getImageFromFeature();
+        break;
+      case "FeatureCollection":
+        image = this.getImageFromFeatureCollection();
+        break;
+      case "Image":
+        image = this.getImageFromImage();
+        break;
+      case "ImageCollection":
+        image = this.getImageFromImageCollection();
+        break;
+      default:
+        image = this.getImageFromImage();
+    }
+    image = this.applyMask(image);
+    image = this.applyBand(image);
+    this.image = image;
+    return image;
+  }
+}

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

@@ -0,0 +1,111 @@
+export const combineReducers = ee => types => types.reduce((r, t, i) => i === 0 ? r[t]() : r.combine({
+  reducer2: ee.Reducer[t](),
+  sharedInputs: true
+}), ee.Reducer);
+export const getInfo = instance => new Promise((resolve, reject) => instance.evaluate((data, error) => {
+  if (error) {
+    reject(error);
+  } else {
+    resolve(data);
+  }
+}));
+export const getFeatureCollectionProperties = data => data.features.reduce((obj, f) => ({
+  ...obj,
+  [f.id]: f.properties
+}), {});
+export const getScale = async image => {
+  return image.select(0).projection().nominalScale();
+};
+const getParamsFromLegend = legend => {
+  const keys = legend.map(l => l.id);
+  const min = Math.min(...keys);
+  const max = Math.max(...keys);
+  const palette = legend.map(l => l.color).join(",");
+  return {
+    min,
+    max,
+    palette
+  };
+};
+export const getClassifiedImage = (eeImage, _ref) => {
+  var _legends$items;
+  let {
+    legend: legends,
+    params
+  } = _ref;
+  const legend = (_legends$items = legends === null || legends === void 0 ? void 0 : legends.items) !== null && _legends$items !== void 0 ? _legends$items : [];
+  if (!params) {
+    // Image has classes (e.g. landcover)
+    return {
+      eeImage,
+      params: getParamsFromLegend(legend)
+    };
+  }
+  const min = 0;
+  const max = legend.length - 1;
+  const {
+    palette
+  } = params;
+  let zones;
+  for (let i = min, item; i < max; i++) {
+    item = legend[i];
+    if (!zones) {
+      zones = eeImage.gt(item.to);
+    } else {
+      zones = zones.add(eeImage.gt(item.to));
+    }
+  }
+  return {
+    eeImage: zones,
+    params: {
+      min,
+      max,
+      palette
+    }
+  };
+};
+const squareMetersToHectares = value => value / 10000;
+const squareMetersToAcres = value => value / 4046.8564224;
+const classAggregation = ["percentage", "hectares", "acres"];
+export const hasClasses = type => classAggregation.includes(type);
+export const getHistogramStatistics = _ref2 => {
+  let {
+    data,
+    scale,
+    aggregationType,
+    legend
+  } = _ref2;
+  return data.features.reduce((obj, _ref3) => {
+    let {
+      id,
+      properties
+    } = _ref3;
+    const {
+      histogram
+    } = properties;
+    const sum = Object.values(histogram).reduce((a, b) => a + b, 0);
+    obj[id] = legend.reduce((values, _ref4) => {
+      let {
+        id
+      } = _ref4;
+      const count = histogram[id] || 0;
+      const sqMeters = count * (scale * scale);
+      let value;
+      switch (aggregationType) {
+        case "hectares":
+          value = Math.round(squareMetersToHectares(sqMeters));
+          break;
+        case "acres":
+          value = Math.round(squareMetersToAcres(sqMeters));
+          break;
+        default:
+          value = count / sum * 100;
+        // percentage
+      }
+
+      values[id] = value;
+      return values;
+    }, {});
+    return obj;
+  }, {});
+};

package/build/es/components/Map/components/MapLayer/components/LegendArea/LegendArea.module.css

@@ -0,0 +1,12 @@
+.map-tooltip {
+    padding: 4px 6px;
+    border-radius: 3px;
+    font-size: 13px;
+    line-height: 17px;
+    z-index: 1000000 !important;
+}
+
+[data-test="dhi2-uicore-popper"] {
+
+}
+

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

@@ -0,0 +1,19 @@
+import { IconLaunch16 } from "@dhis2/ui";
+import React from "react";
+export default function LegendCardHeader(_ref) {
+  let {
+    title,
+    collapsible,
+    onCollapse
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "row w-100 space-between align-items-center"
+  }, /*#__PURE__*/React.createElement("h4", {
+    style: {
+      margin: 0
+    },
+    className: "legend-header"
+  }, title), collapsible && /*#__PURE__*/React.createElement("div", {
+    onClick: onCollapse
+  }, /*#__PURE__*/React.createElement(IconLaunch16, null)));
+}