@hisptz/dhis2-analytics 1.0.4 → 1.0.6

package/src/components/Map/components/MapLayer/components/GoogleEngineLayer/services/engine.ts

@@ -1,423 +0,0 @@
-import {MapOrgUnit} from "../../../../../interfaces";
-// @ts-ignore
-import EE from "./api";
-// import EE from "@google/earthengine";
-import {EarthEngineOptions, EarthEngineToken, RefreshToken} from "../interfaces";
-import {
-  combineReducers,
-  getFeatureCollectionProperties,
-  getHistogramStatistics,
-  getInfo,
-  getScale,
-  hasClasses
-} from "../utils";
-import {find, head, isEmpty} from "lodash";
-
-// @ts-ignore
-const ee = EE as any;
-// @ts-ignore
-window.ee = ee;
-
-const FEATURE_STYLE = { color: "FFA500", strokeWidth: 2 };
-const DEFAULT_TILE_SCALE = 1;
-
-export class EarthEngine {
-  token?: EarthEngineToken;
-  options: EarthEngineOptions;
-  refresh?: RefreshToken;
-  orgUnits?: MapOrgUnit[];
-  initialized = false;
-  period?: string | string[];
-  instance: any;
-  scale?: any;
-  image: any;
-  aggregationData: any;
-
-  constructor({ options }: { options: EarthEngineOptions }) {
-    this.options = options;
-    this.initialized = true;
-    this.getInstance();
-  }
-
-  static async setToken(token: EarthEngineToken, refresh: RefreshToken): Promise<void> {
-    const tokenType = "Bearer";
-
-    function refreshToken(authArgs: { scope: any }, callback: (props: any) => void) {
-      refresh().then(({ token }: { token: EarthEngineToken }) => {
-        callback({
-          ...token,
-          token_type: tokenType ?? "Bearer",
-          state: 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 ?? "Bearer",
-          access_token,
-          expires_in,
-          null,
-          () => {
-            ee.initialize(null, null, resolve, reject);
-          },
-          false
-        );
-        ee.data.setAuthTokenRefresher(refreshToken);
-      }
-      resolve("Token not found");
-    });
-  }
-
-  setOrgUnits(orgUnits: MapOrgUnit[]): EarthEngine {
-    this.orgUnits = orgUnits;
-    return this;
-  }
-
-  setPeriod(period: string) {
-    this.period = period;
-  }
-
-  async getValue(geoJSON: any, type: string) {
-    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: unknown, error: any) => {
-        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() as any;
-    const aggFeatures = collection
-      ?.map((feature: any) => {
-        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 {
-      const aggregation = head(this.options.aggregations) ?? "";
-      const reducer = ee.Reducer.frequencyHistogram();
-      const collection = this.getFeatureCollection();
-      const legend = this.options.legend?.items;
-      const scale = this.scale;
-      const tileScale = this.options.tileScale ?? 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: any, index: number) => {
-        return {
-          orgUnit: this.orgUnits?.[index],
-          data: feature,
-        };
-      });
-    } catch (e: any) {
-      throw Error("Could not get histogram", {
-        cause: e,
-      });
-    }
-  }
-
-  async getAggregations() {
-    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(head(aggregations) ?? "")) {
-      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.tileScale ?? DEFAULT_TILE_SCALE;
-    const aggregatedFeatures = image
-      .reduceRegions({
-        collection,
-        reducer,
-        scale,
-        tileScale,
-      })
-      .select(aggregations, null, false);
-
-    const features = Object.values(getFeatureCollectionProperties(await getInfo(aggregatedFeatures))) as any[];
-    if (!isEmpty(features) && features.length === this.orgUnits?.length) {
-      //Mapping features to orgUnits using index.
-      this.aggregationData = features.map((feature: any, index: number) => {
-        return {
-          orgUnit: this.orgUnits?.[index],
-          data: feature,
-        };
-      });
-    }
-  }
-
-  getAggregation(orgUnit: MapOrgUnit) {
-    if (isEmpty(this.aggregationData)) {
-      return;
-    }
-    return find(this.aggregationData, (aggregation) => aggregation.orgUnit.id === orgUnit.id);
-  }
-
-  async url(): Promise<string> {
-    if (!this.initialized) throw "You need to call init() first";
-    return this.visualize(this.getImage());
-  }
-
-  protected applyPeriod(imageCollection: any) {
-    const period = this.period;
-    if (period) {
-      return imageCollection.filterDate(period);
-    }
-  }
-
-  protected applyMask(image: any) {
-    if (this.options.mask) {
-      return image.updateMask(image.gt(0));
-    } else {
-      return image;
-    }
-  }
-
-  protected applyBand(imageCollection: any) {
-    if (this.options.selectedBands) {
-      return imageCollection.select(this.options.selectedBands);
-    } else {
-      return imageCollection;
-    }
-  }
-
-  protected getReducerByType(type: string) {
-    return ee.Reducer[type].call();
-  }
-
-  protected getGeometryByType(geoJSON: any) {
-    return ee.Geometry(geoJSON?.geometry);
-  }
-
-  protected getFeatureByType(geoJSON: any) {
-    const featureType = geoJSON.type;
-    const features = geoJSON.features ?? [];
-    const geometry = this.getGeometryByType(geoJSON);
-    switch (featureType) {
-      case "Feature":
-        return ee.Feature(geometry);
-      case "FeatureCollection":
-        return ee.FeatureCollection([...features.map((feature: any) => ee.Feature(this.getGeometryByType(feature)))]);
-    }
-  }
-
-  protected getFeatureCollection(): unknown {
-    if (this.orgUnits) {
-      return ee.FeatureCollection(this.orgUnits.map((orgUnit: MapOrgUnit) => this.getFeatureByType(orgUnit.geoJSON)));
-    } else {
-      throw "You need to set org units first";
-    }
-  }
-
-  protected 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 };
-  }
-
-  protected async visualize(image: any): Promise<string> {
-    const { min, max, palette } = this.getParamsFromLegend() ??
-      this.options.params ?? {
-        min: null,
-        max: null,
-        palette: null,
-      };
-    return (
-      (await new Promise((resolve, reject) => {
-        image.getMap({ min, max, palette }, resolve);
-      })) as any
-    )?.urlFormat;
-  }
-
-  protected getImageCollectionInstance() {
-    const { datasetId } = this.options;
-    let imageCollection = ee.ImageCollection(datasetId);
-    if (this.period) {
-      imageCollection = this.applyPeriod(imageCollection);
-    }
-    imageCollection = this.applyBand(imageCollection);
-    return imageCollection;
-  }
-
-  protected getImageFromImageCollection() {
-    const { mosaic } = this.options;
-    const imageCollection = this.instance;
-    return mosaic
-      ? imageCollection.mosaic().clipToCollection(this.getFeatureCollection())
-      : ee.Image(imageCollection.first()).clipToCollection(this.getFeatureCollection());
-  }
-
-  protected getImageInstance() {
-    const { datasetId } = this.options;
-    return ee.Image(datasetId).clipToCollection(this.getFeatureCollection());
-  }
-
-  protected getImageFromImage() {
-    return this.instance;
-  }
-
-  protected getFeatureInstance() {
-    const { datasetId } = this.options;
-    const feature = ee.Feature(datasetId);
-    this.instance = feature;
-    return feature;
-  }
-
-  protected getImageFromFeature() {
-    return this.instance;
-  }
-
-  protected getFeatureCollectionInstance() {
-    const { datasetId } = this.options;
-    let featureCollection = ee.FeatureCollection(datasetId);
-    if (this.period) {
-      featureCollection = this.applyPeriod(featureCollection);
-    }
-    return featureCollection;
-  }
-
-  protected getImageFromFeatureCollection() {
-    let featureCollection = this.instance;
-    return featureCollection.draw(FEATURE_STYLE).clipToCollection(this.getFeatureCollection());
-  }
-
-  protected 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();
-    }
-  }
-
-  protected getImage(): any {
-    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/src/components/Map/components/MapLayer/components/GoogleEngineLayer/utils/index.ts

@@ -1,105 +0,0 @@
-import {EarthEngineOptions} from "../interfaces";
-
-export const combineReducers = (ee: any) => (types: string[]) =>
-  types.reduce(
-    (r: any, t: any, i: any) =>
-      i === 0
-        ? r[t]()
-        : r.combine({
-            reducer2: ee.Reducer[t](),
-            sharedInputs: true,
-          }),
-    ee.Reducer
-  );
-
-export const getInfo = (instance: any) =>
-  new Promise((resolve, reject) =>
-    instance.evaluate((data: any, error: Error) => {
-      if (error) {
-        reject(error);
-      } else {
-        resolve(data);
-      }
-    })
-  );
-
-export const getFeatureCollectionProperties = (data: any) =>
-  data.features.reduce(
-    (obj: any, f: any) => ({
-      ...obj,
-      [f.id]: f.properties,
-    }),
-    {}
-  );
-
-export const getScale = async (image: any) => {
-  return image.select(0).projection().nominalScale();
-};
-
-const getParamsFromLegend = (legend: any[]) => {
-  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: any, { legend: legends, params }: EarthEngineOptions) => {
-  const legend = 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] as any;
-
-    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: number) => value / 10000;
-
-const squareMetersToAcres = (value: number) => value / 4046.8564224;
-
-const classAggregation = ["percentage", "hectares", "acres"];
-
-export const hasClasses = (type: string) => classAggregation.includes(type);
-
-export const getHistogramStatistics = ({ data, scale, aggregationType, legend }: { data: any; scale: any; aggregationType: string; legend: any }) =>
-  data.features.reduce((obj: Record<any, any>, { id, properties }: { id: string; properties: any }) => {
-    const { histogram } = properties;
-    const sum: number = Object.values(histogram).reduce((a: any, b: any) => a + b, 0) as number;
-    obj[id] = legend.reduce((values: any, { id }: { id: string }) => {
-      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/src/components/Map/components/MapLayer/components/LegendArea/components/LegendCardHeader/index.tsx

@@ -1,17 +0,0 @@
-import {IconLaunch16} from "@dhis2/ui";
-import React from "react";
-
-export default function LegendCardHeader({ title, collapsible, onCollapse }: { title: string; onCollapse?: () => void; collapsible?: boolean }) {
-  return (
-    <div className="row w-100 space-between align-items-center">
-      <h4 style={{ margin: 0 }} className="legend-header">
-        {title}
-      </h4>
-      {collapsible && (
-        <div onClick={onCollapse}>
-          <IconLaunch16 />
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/Map/components/MapLayer/components/LegendArea/index.tsx

@@ -1,168 +0,0 @@
-import {colors, IconLegend24, Popper, Portal} from "@dhis2/ui";
-import {ControlPosition} from "leaflet";
-import {compact, head} from "lodash";
-import React, {useEffect, useRef, useState} from "react";
-import {MapLegendConfig} from "../../../MapArea/interfaces";
-import {CustomControl} from "../../../MapControls/components/CustomControl";
-import {
-    CustomBubbleLayer,
-    CustomGoogleEngineLayer,
-    CustomPointLayer,
-    CustomThematicLayer,
-    SUPPORTED_EARTH_ENGINE_LAYERS
-} from "../../interfaces";
-import PointLegend from "../PointLayer/components/PointLegend";
-import BubbleLegend from "../ThematicLayer/components/Bubble/components/BubbleLegend";
-import ChoroplethLegend from "../ThematicLayer/components/Choropleth/components/ChoroplethLegend";
-import EarthEngineLegend from "../GoogleEngineLayer/components/EarthEngineLegend";
-import classes from "./LegendArea.module.css";
-import {usePrintMedia} from "../../../../hooks/map";
-
-const TOOLTIP_OFFSET = 4;
-
-function getLegendComponent(layer: CustomThematicLayer | CustomPointLayer | CustomGoogleEngineLayer) {
-  if (layer.type === "point") {
-    return <PointLegend name={layer.label} />;
-  }
-
-  if (SUPPORTED_EARTH_ENGINE_LAYERS.includes(layer.type)) {
-    return <EarthEngineLegend name={layer.name ?? ""} layer={layer as CustomGoogleEngineLayer} />;
-  }
-
-  const { type, enabled, control, dataItem, name, data, legends } = (layer as CustomThematicLayer) ?? {};
-
-  if (!enabled || !control) {
-    return null;
-  }
-  switch (type) {
-    case "bubble":
-      return (
-        <BubbleLegend
-          radius={(layer as CustomBubbleLayer)?.radius ?? { min: 0, max: 50 }}
-          legends={legends ?? []}
-          name={name ?? dataItem.displayName}
-          data={data}
-          dataItem={head(data)?.dataItem ?? dataItem}
-        />
-      );
-    case "choropleth":
-      return <ChoroplethLegend legends={legends ?? []} name={name ?? dataItem.displayName} data={data} dataItem={head(data)?.dataItem ?? dataItem} />;
-  }
-}
-
-function CollapsedLegendIcon({ onCollapse, name }: { name: string; onCollapse: () => void }) {
-  const openDelay = 200;
-  const closeDelay = 200;
-  const [openTooltip, setOpenTooltip] = useState(false);
-  const openTimerRef = useRef<any>(null);
-  const closeTimerRef = useRef<any>(null);
-  const ref = useRef<HTMLDivElement>(null);
-
-  const hideModifier = { name: "hide" };
-  const offsetModifier = {
-    name: "offset",
-    options: {
-      offset: [0, TOOLTIP_OFFSET],
-    },
-  };
-
-  const flipModifier = {
-    name: "flip",
-    options: { altBoundary: true },
-  };
-
-  const onMouseOver = () => {
-    clearTimeout(closeTimerRef.current);
-
-    openTimerRef.current = setTimeout(() => {
-      setOpenTooltip(true);
-    }, openDelay);
-  };
-
-  const onMouseOut = () => {
-    clearTimeout(openTimerRef.current);
-
-    closeTimerRef.current = setTimeout(() => {
-      setOpenTooltip(false);
-    }, closeDelay);
-  };
-
-  useEffect(
-    () => () => {
-      clearTimeout(openTimerRef.current);
-      clearTimeout(closeTimerRef.current);
-    },
-    []
-  );
-
-  return (
-    <div ref={ref} onMouseOver={onMouseOver} onMouseOut={onMouseOut} onClick={onCollapse} style={{ width: 28, height: 28 }} className="legend-card collapsed">
-      <IconLegend24 />
-      {openTooltip && (
-        <Portal className={classes["map-tooltip"]}>
-          <Popper className={classes["map-tooltip"]} reference={ref} modifiers={[offsetModifier, flipModifier, hideModifier]}>
-            <div
-              style={{
-                backgroundColor: `${colors.grey900}`,
-                borderRadius: 3,
-                color: `${colors.white}`,
-                padding: "4px 6px",
-              }}
-              data-test={`content`}>
-              {name}
-            </div>
-          </Popper>
-        </Portal>
-      )}
-    </div>
-  );
-}
-
-function Legend({ children, collapsible }: { children: React.ReactElement; collapsible: boolean }) {
-  const [collapsed, setCollapsed] = useState(collapsible);
-  const inPrintMode = usePrintMedia();
-  const onCollapse = () => {
-    if (collapsible) {
-      setCollapsed((prevState) => !prevState);
-    }
-  };
-
-  const name = head(React.Children.toArray(children) as React.ReactElement[])?.props.name;
-
-  const shouldCollapse = collapsed && !inPrintMode;
-  console.log(inPrintMode);
-
-  return (
-    <div className="w-100">
-      {shouldCollapse ? (
-        <CollapsedLegendIcon name={name} onCollapse={onCollapse} />
-      ) : (
-        React.Children.map(children, (child) => React.cloneElement(child, { collapsible, onCollapse }))
-      )}
-    </div>
-  );
-}
-
-export default function LegendArea({
-  layers,
-  legends: legendConfig,
-}: {
-  layers: Array<CustomThematicLayer | CustomPointLayer | CustomGoogleEngineLayer>;
-  position: ControlPosition;
-  legends?: MapLegendConfig;
-}) {
-  const legends: JSX.Element[] = compact(layers.filter((layer) => layer.enabled).map(getLegendComponent));
-  const { position, collapsible } = legendConfig ?? {};
-
-  return (
-    <CustomControl position={position}>
-      <div className="column gap-16 align-items-end">
-        {legends?.map((legend: any, index) => (
-          <Legend collapsible={collapsible ?? true} key={`${index}-map-legend`}>
-            {legend}
-          </Legend>
-        ))}
-      </div>
-    </CustomControl>
-  );
-}