@hisptz/dhis2-analytics 1.0.48 → 1.0.51

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

@@ -0,0 +1,55 @@
+import i18n from "@dhis2/d2-i18n";
+import {colors} from "@dhis2/ui";
+import React from "react";
+import {GeoJSON, LayerGroup, LayersControl, Popup, Tooltip} from "react-leaflet";
+import {MapOrgUnit} from "../../../../interfaces";
+import {highlightFeature, resetHighlight} from "../../../../utils/map";
+import {CustomBoundaryLayer as BoundaryLayerInterface} from "../../interfaces";
+import {useBoundaryData} from "./hooks/useBoundaryData";
+
+export const defaultStyle = {
+  weight: 1,
+  color: colors.grey900,
+  fillColor: colors.grey900,
+  fillOpacity: 0.0,
+};
+export const highlightStyle = {
+  weight: 2,
+  color: colors.grey900,
+  dashArray: "",
+  fillOpacity: 0.1,
+};
+
+export default function BoundaryLayer(props: BoundaryLayerInterface) {
+  const { enabled } = props ?? {};
+  const orgUnits = useBoundaryData();
+
+  return (
+    <LayersControl.Overlay checked={enabled} name={i18n.t("Boundaries")}>
+      <LayerGroup>
+        {orgUnits?.map((area: MapOrgUnit) => {
+          return (
+            <GeoJSON
+              data={area.geoJSON}
+              interactive
+              eventHandlers={{
+                mouseover: (e) => highlightFeature(e, highlightStyle),
+                mouseout: (e) => resetHighlight(e, defaultStyle),
+              }}
+              key={`${area.id}-polygon`}
+              pathOptions={defaultStyle}>
+              <Tooltip>{area.name}</Tooltip>
+              <Popup minWidth={80}>
+                <h3>{area.name}</h3>
+                <div>
+                  <b>Level: </b>
+                  {area.level}
+                </div>
+              </Popup>
+            </GeoJSON>
+          );
+        })}
+      </LayerGroup>
+    </LayersControl.Overlay>
+  );
+}

package/src/components/Map/components/MapLayer/components/GoogleEngineLayer/components/EarthEngineLegend.tsx

@@ -0,0 +1,74 @@
+import React, {forwardRef} from "react";
+import LegendCardHeader from "../../LegendArea/components/LegendCardHeader";
+import {CustomGoogleEngineLayer} from "../../../interfaces";
+import {Divider} from "@dhis2/ui";
+import i18n from "@dhis2/d2-i18n";
+import {isEmpty} from "lodash";
+
+export function LegendItem({ legend }: { legend: { min: number; max: number; color: string; name?: string } }) {
+  return (
+    <div className="legend-item">
+      <div className="legend-item-color" style={{ backgroundColor: legend.color }} />
+      {legend.name ? <div className="legend-item-label">{`${legend.name}`}</div> : <div className="legend-item-label">{`${legend.min} - ${legend.max}`}</div>}
+    </div>
+  );
+}
+
+function getLegendsFromParams(params?: { min: number; max: number; palette: string | string[] }) {
+  if (!params) return [];
+
+  const { palette, min, max } = params;
+  const sanitizedPalette = Array.isArray(palette) ? palette : palette.split(",");
+  const classes = sanitizedPalette.length;
+  const difference = max - min;
+  const interval = Math.round(difference / classes);
+  const legends = [];
+  for (let i = 0; i < classes; i++) {
+    const min = i * interval;
+    const max = min + interval;
+
+    const name = i === classes - 1 ? `> ${min}` : undefined;
+
+    legends.push({
+      id: sanitizedPalette[i],
+      color: sanitizedPalette[i],
+      min,
+      max,
+      name,
+    });
+  }
+
+  return legends;
+}
+
+function EarthEngineLegend(
+  { layer, collapsible, onCollapse, name }: { layer: CustomGoogleEngineLayer; collapsible?: boolean; onCollapse?: () => void; name: string },
+  ref: React.LegacyRef<HTMLDivElement>
+) {
+  const { options } = layer;
+  const legends = options?.legend?.items ?? getLegendsFromParams(options?.params);
+
+  return (
+    <div style={{ maxWidth: 200, alignItems: "start", gap: 8 }} className="legend-card" ref={ref}>
+      <LegendCardHeader title={name} collapsible={collapsible} onCollapse={onCollapse} />
+      <Divider margin={"0"} />
+      <p style={{ margin: 0 }}>{options?.description ?? ""}</p>
+      {!isEmpty(legends) && <b>{options?.unit ?? ""}</b>}
+      <div className="legend-list">
+        {legends?.map((legend: any) => (
+          <LegendItem key={`${legend?.color}-legend-list`} legend={legend} />
+        ))}
+      </div>
+      {options?.source && (
+        <div className="row gap-8">
+          {i18n.t("Source")}:
+          <a className="source-url" target="_blank" referrerPolicy="no-referrer" href={options?.sourceUrl}>
+            {options?.source ?? ""}
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default forwardRef(EarthEngineLegend);

package/src/components/Map/components/MapLayer/components/GoogleEngineLayer/constants/index.ts

@@ -0,0 +1,430 @@
+import i18n from "@dhis2/d2-i18n";
+import {EarthEngineOptions} from "../interfaces";
+
+export const EARTH_ENGINE_LAYER = "earthEngine";
+
+export const EARTH_ENGINE_LAYERS: EarthEngineOptions[] = [
+  {
+    layer: EARTH_ENGINE_LAYER,
+    id: "population",
+    datasetId: "WorldPop/GP/100m/pop",
+    type: "ImageCollection",
+    name: i18n.t("Population"),
+    unit: i18n.t("people per hectare"),
+    description: i18n.t("Estimated number of people living in an area."),
+    source: "WorldPop / Google Earth Engine",
+    sourceUrl: "https://developers.google.com/earth-engine/datasets/catalog/WorldPop_GP_100m_pop",
+    img: "images/population.png",
+    defaultAggregations: ["sum", "mean"],
+    tokenType: "Bearer",
+    periodType: "Yearly",
+    filters: ["period"],
+    mosaic: true,
+    params: {
+      min: 0,
+      max: 10,
+      palette: "#fee5d9,#fcbba1,#fc9272,#fb6a4a,#de2d26,#a50f15", // Reds
+    },
+    opacity: 0.9,
+  },
+  {
+    layer: EARTH_ENGINE_LAYER,
+    type: "ImageCollection",
+    tokenType: "Bearer",
+    id: "populationAgeGroups",
+    datasetId: "WorldPop/GP/100m/pop_age_sex_cons_unadj",
+    name: i18n.t("Population age groups"),
+    unit: i18n.t("people per hectare"),
+    description: i18n.t("Estimated number of people living in an area, grouped by age and gender."),
+    source: "WorldPop / Google Earth Engine",
+    sourceUrl: "https://developers.google.com/earth-engine/datasets/catalog/WorldPop_GP_100m_pop_age_sex_cons_unadj",
+    img: "images/population.png",
+    periodType: "Yearly",
+    defaultAggregations: ["sum", "mean"],
+    bands: [
+      {
+        id: "M_0",
+        name: i18n.t("Male 0 - 1 years"),
+      },
+      {
+        id: "M_1",
+        name: i18n.t("Male 1 - 4 years"),
+      },
+      {
+        id: "M_5",
+        name: i18n.t("Male 5 - 9 years"),
+      },
+      {
+        id: "M_10",
+        name: i18n.t("Male 10 - 14 years"),
+      },
+      {
+        id: "M_15",
+        name: i18n.t("Male 15 - 19 years"),
+      },
+      {
+        id: "M_20",
+        name: i18n.t("Male 20 - 24 years"),
+      },
+      {
+        id: "M_25",
+        name: i18n.t("Male 25 - 29 years"),
+      },
+      {
+        id: "M_30",
+        name: i18n.t("Male 30 - 34 years"),
+      },
+      {
+        id: "M_35",
+        name: i18n.t("Male 35 - 39 years"),
+      },
+      {
+        id: "M_40",
+        name: i18n.t("Male 40 - 44 years"),
+      },
+      {
+        id: "M_45",
+        name: i18n.t("Male 45 - 49 years"),
+      },
+      {
+        id: "M_50",
+        name: i18n.t("Male 50 - 54 years"),
+      },
+      {
+        id: "M_55",
+        name: i18n.t("Male 55 - 59 years"),
+      },
+      {
+        id: "M_60",
+        name: i18n.t("Male 60 - 64 years"),
+      },
+      {
+        id: "M_65",
+        name: i18n.t("Male 65 - 69 years"),
+      },
+      {
+        id: "M_70",
+        name: i18n.t("Male 70 - 74 years"),
+      },
+      {
+        id: "M_75",
+        name: i18n.t("Male 75 - 79 years"),
+      },
+      {
+        id: "M_80",
+        name: i18n.t("Male 80 years and above"),
+      },
+      {
+        id: "F_0",
+        name: i18n.t("Female 0 - 1 years"),
+      },
+      {
+        id: "F_1",
+        name: i18n.t("Female 1 - 4 years"),
+      },
+      {
+        id: "F_5",
+        name: i18n.t("Female 5 - 9 years"),
+      },
+      {
+        id: "F_10",
+        name: i18n.t("Female 10 - 14 years"),
+      },
+      {
+        id: "F_15",
+        name: i18n.t("Female 15 - 19 years"),
+      },
+      {
+        id: "F_20",
+        name: i18n.t("Female 20 - 24 years"),
+      },
+      {
+        id: "F_25",
+        name: i18n.t("Female 25 - 29 years"),
+      },
+      {
+        id: "F_30",
+        name: i18n.t("Female 30 - 34 years"),
+      },
+      {
+        id: "F_35",
+        name: i18n.t("Female 35 - 39 years"),
+      },
+      {
+        id: "F_40",
+        name: i18n.t("Female 40 - 44 years"),
+      },
+      {
+        id: "F_45",
+        name: i18n.t("Female 45 - 49 years"),
+      },
+      {
+        id: "F_50",
+        name: i18n.t("Female 50 - 54 years"),
+      },
+      {
+        id: "F_55",
+        name: i18n.t("Female 55 - 59 years"),
+      },
+      {
+        id: "F_60",
+        name: i18n.t("Female 60 - 64 years"),
+      },
+      {
+        id: "F_65",
+        name: i18n.t("Female 65 - 69 years"),
+      },
+      {
+        id: "F_70",
+        name: i18n.t("Female 70 - 74 years"),
+        multiple: true,
+      },
+      {
+        id: "F_75",
+        name: i18n.t("Female 75 - 79 years"),
+      },
+      {
+        id: "F_80",
+        name: i18n.t("Female 80 years and above"),
+      },
+    ],
+    filters: ["period"],
+    mosaic: true,
+    params: {
+      min: 0,
+      max: 10,
+      palette: "#fee5d9,#fcbba1,#fc9272,#fb6a4a,#de2d26,#a50f15", // Reds
+    },
+    opacity: 0.9,
+    tileScale: 4,
+  },
+  {
+    layer: EARTH_ENGINE_LAYER,
+    id: "footprints",
+    datasetId: "GOOGLE/Research/open-buildings/v1/polygons",
+    type: "FeatureCollection",
+    name: i18n.t("Building footprints"),
+    unit: i18n.t("Number of buildings"),
+    description: i18n.t("The outlines of buildings derived from high-resolution satellite imagery. Only for the continent of Africa."),
+    notice: i18n.t("Building counts are only available for smaller organisation unit areas."),
+    error: i18n.t("Select a smaller area or single organization unit to see the count of buildings."),
+    source: "NASA / USGS / JPL-Caltech / Google Earth Engine",
+    sourceUrl: "https://sites.research.google/open-buildings/",
+    img: "images/buildings.png",
+    aggregations: ["count"],
+    defaultAggregations: ["count"],
+    opacity: 0.9,
+    tokenType: "Bearer",
+  },
+  {
+    layer: EARTH_ENGINE_LAYER,
+    id: "elevation",
+    type: "Image",
+    tokenType: "Bearer",
+    datasetId: "USGS/SRTMGL1_003",
+    name: i18n.t("Elevation"),
+    unit: i18n.t("meters"),
+    description: i18n.t("Elevation above sea-level."),
+    source: "NASA / USGS / JPL-Caltech / Google Earth Engine",
+    sourceUrl: "https://explorer.earthengine.google.com/#detail/USGS%2FSRTMGL1_003",
+    img: "images/elevation.png",
+    aggregations: ["min", "max", "mean", "median", "stdDev", "variance"],
+    defaultAggregations: ["mean", "min", "max"],
+    selectedBands: ["elevation"],
+    params: {
+      min: 0,
+      max: 1500,
+      palette: "#ffffd4,#fee391,#fec44f,#fe9929,#d95f0e,#993404", // YlOrBr
+    },
+    opacity: 0.9,
+  },
+  {
+    layer: EARTH_ENGINE_LAYER,
+    datasetId: "UCSB-CHG/CHIRPS/PENTAD",
+    id: "precipitation",
+    type: "ImageCollection",
+    tokenType: "Bearer",
+    name: i18n.t("Precipitation"),
+    unit: i18n.t("millimeter"),
+    description: i18n.t(
+      "Precipitation collected from satellite and weather stations on the ground. The values are in millimeters within 5 days periods. Updated monthly, during the 3rd week of the following month."
+    ),
+    source: "UCSB / CHG / Google Earth Engine",
+    sourceUrl: "https://explorer.earthengine.google.com/#detail/UCSB-CHG%2FCHIRPS%2FPENTAD",
+    periodType: "Custom",
+    selectedBands: ["precipitation"],
+    aggregations: ["min", "max", "mean", "median", "stdDev", "variance"],
+    defaultAggregations: ["mean", "min", "max"],
+    mask: true,
+    img: "images/precipitation.png",
+    params: {
+      min: 0,
+      max: 100,
+      palette: "#eff3ff,#c6dbef,#9ecae1,#6baed6,#3182bd,#08519c", // Blues
+    },
+    opacity: 0.9,
+  },
+  {
+    layer: EARTH_ENGINE_LAYER,
+    datasetId: "MODIS/006/MOD11A2",
+    id: "temperature",
+    type: "ImageCollection",
+    tokenType: "Bearer",
+    name: i18n.t("Temperature"),
+    unit: i18n.t("°C during daytime"),
+    description: i18n.t("Land surface temperatures collected from satellite. Blank spots will appear in areas with a persistent cloud cover."),
+    source: "NASA LP DAAC / Google Earth Engine",
+    sourceUrl: "https://explorer.earthengine.google.com/#detail/MODIS%2FMOD11A2",
+    img: "images/temperature.png",
+    aggregations: ["min", "max", "mean", "median", "stdDev", "variance"],
+    defaultAggregations: ["mean", "min", "max"],
+    periodType: "Custom",
+    selectedBands: ["LST_Day_1km"],
+    mask: true,
+    methods: {
+      toFloat: [],
+      multiply: [0.02],
+      subtract: [273.15],
+    },
+    params: {
+      min: 0,
+      max: 40,
+      palette: "#fff5f0,#fee0d2,#fcbba1,#fc9272,#fb6a4a,#ef3b2c,#cb181d,#a50f15,#67000d", // Reds
+    },
+    opacity: 0.9,
+  },
+  {
+    layer: EARTH_ENGINE_LAYER,
+    type: "ImageCollection",
+    tokenType: "Bearer",
+    id: "landCover",
+    datasetId: "MODIS/006/MCD12Q1", // No longer in use: 'MODIS/051/MCD12Q1',
+    name: i18n.t("Landcover"),
+    description: i18n.t("Distinct landcover types collected from satellites."),
+    source: "NASA LP DAAC / Google Earth Engine",
+    sourceUrl: "https://developers.google.com/earth-engine/datasets/catalog/MODIS_006_MCD12Q1",
+    periodType: "Yearly",
+    filters: ["period"],
+    selectedBands: ["LC_Type1"],
+    defaultAggregations: ["percentage", "hectares", "acres"],
+    maxAggregations: 1,
+    legend: {
+      items: [
+        // http://www.eomf.ou.edu/static/IGBP.pdf
+        {
+          id: 1,
+          name: i18n.t("Evergreen Needleleaf forest"),
+          color: "#162103",
+        },
+        {
+          id: 2,
+          name: i18n.t("Evergreen Broadleaf forest"),
+          color: "#235123",
+        },
+        {
+          id: 3,
+          name: i18n.t("Deciduous Needleleaf forest"),
+          color: "#399b38",
+        },
+        {
+          id: 4,
+          name: i18n.t("Deciduous Broadleaf forest"),
+          color: "#38eb38",
+        },
+        {
+          id: 5,
+          name: i18n.t("Mixed forest"),
+          color: "#39723b",
+        },
+        {
+          id: 6,
+          name: i18n.t("Closed shrublands"),
+          color: "#6a2424",
+        },
+        {
+          id: 7,
+          name: i18n.t("Open shrublands"),
+          color: "#c3a55f",
+        },
+        {
+          id: 8,
+          name: i18n.t("Woody savannas"),
+          color: "#b76124",
+        },
+        {
+          id: 9,
+          name: i18n.t("Savannas"),
+          color: "#d99125",
+        },
+        {
+          id: 10,
+          name: i18n.t("Grasslands"),
+          color: "#92af1f",
+        },
+        {
+          id: 11,
+          name: i18n.t("Permanent wetlands"),
+          color: "#10104c",
+        },
+        {
+          id: 12,
+          name: i18n.t("Croplands"),
+          color: "#cdb400",
+        },
+        {
+          id: 13,
+          name: i18n.t("Urban and built-up"),
+          color: "#cc0202",
+        },
+        {
+          id: 14,
+          name: i18n.t("Cropland/Natural vegetation mosaic"),
+          color: "#332808",
+        },
+        {
+          id: 15,
+          name: i18n.t("Snow and ice"),
+          color: "#d7cdcc",
+        },
+        {
+          id: 16,
+          name: i18n.t("Barren or sparsely vegetated"),
+          color: "#f7e174",
+        },
+        {
+          id: 17,
+          name: i18n.t("Water"),
+          color: "#aec3d6",
+        },
+      ],
+    },
+    mask: false,
+    img: "images/landcover.png",
+    opacity: 0.9,
+  },
+  {
+    layer: EARTH_ENGINE_LAYER,
+    id: "nightLights",
+    type: "ImageCollection",
+    tokenType: "Bearer",
+    legacy: true, // Kept for backward compability
+    datasetId: "NOAA/DMSP-OLS/NIGHTTIME_LIGHTS",
+    name: i18n.t("Nighttime lights"),
+    unit: i18n.t("light intensity"),
+    description: i18n.t("Light intensity from cities, towns, and other sites with persistent lighting, including gas flares."),
+    source: "NOAA / Google Earth Engine",
+    sourceUrl: "https://explorer.earthengine.google.com/#detail/NOAA%2FDMSP-OLS%2FNIGHTTIME_LIGHTS",
+    periodType: "Yearly",
+    selectedBands: ["stable_lights"],
+    mask: true,
+    img: "images/nighttime.png",
+    params: {
+      min: 0,
+      max: 63,
+      palette: "#ffffd4,#fee391,#fec44f,#fe9929,#ec7014,#cc4c02,#8c2d04", // YlOrBr
+    },
+    opacity: 0.9,
+  },
+];
+
+export const SUPPORTED_EARTH_ENGINE_LAYERS = ["population", "landCover", "footprints"];

package/src/components/Map/components/MapLayer/components/GoogleEngineLayer/hooks/index.ts

@@ -0,0 +1,34 @@
+import {useDataEngine} from "@dhis2/app-runtime";
+import {find} from "lodash";
+import {useMapLayers} from "../../../../MapProvider/hooks";
+import {CustomGoogleEngineLayer} from "../../../interfaces";
+import {EarthEngineToken} from "../interfaces";
+import {useState} from "react";
+
+const googleEngineKeyQuery = {
+  token: {
+    resource: "tokens/google",
+  },
+};
+
+export function useGoogleEngineToken() {
+  const engine = useDataEngine();
+  const [loading, setLoading] = useState(false);
+
+  const getToken = async () => {
+    setLoading(true);
+    const token = await engine.query(googleEngineKeyQuery);
+    setLoading(false);
+    return token;
+  };
+
+  return {
+    refresh: getToken as unknown as () => Promise<{ token: EarthEngineToken }>,
+    loading,
+  };
+}
+
+export default function useGoogleEngineLayer(layerId: string): CustomGoogleEngineLayer | undefined {
+  const { layers } = useMapLayers();
+  return find(layers as CustomGoogleEngineLayer[], ["id", layerId]);
+}