@hisptz/dhis2-analytics 1.0.49 → 1.0.51

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

@@ -0,0 +1,46 @@
+import {last} from "lodash";
+import React from "react";
+import {LayerGroup, LayersControl, Pane} from "react-leaflet";
+import {CustomBubbleLayer} from "../../interfaces";
+import Bubble from "./components/Bubble";
+import Choropleth from "./components/Choropleth";
+import useThematicLayer from "./hooks/config";
+
+export default function ThematicLayer({ layerId, index }: { layerId: string; index: number }) {
+  const layer = useThematicLayer(layerId);
+
+  if (!layer) {
+    return null;
+  }
+
+  const { type, dataItem, name, data, enabled, legends } = layer ?? {};
+  const uniqueName = name ?? dataItem.displayName;
+  return (
+    <>
+      <LayersControl.Overlay checked={enabled} name={uniqueName}>
+        <Pane
+          style={{
+            zIndex: type === "bubble" ? 500 : 500 - (index + 1),
+          }}
+          name={uniqueName}>
+          <LayerGroup>
+            {data?.map((datum) =>
+              type === "choropleth" ? <Choropleth legends={legends ?? []} data={datum} key={`${datum?.dataItem?.id}-${datum?.orgUnit?.id}-layer`} /> : null
+            )}
+            {data?.map((datum) =>
+              type === "bubble" ? (
+                <Bubble
+                  radius={(layer as CustomBubbleLayer)?.radius}
+                  legends={legends ?? []}
+                  highestData={last(data)?.data ?? 1}
+                  data={datum}
+                  key={`${datum?.dataItem?.id}-${datum?.orgUnit?.id}-layer`}
+                />
+              ) : null
+            )}
+          </LayerGroup>
+        </Pane>
+      </LayersControl.Overlay>
+    </>
+  );
+}

package/src/components/Map/components/MapLayer/components/ThematicLayer/styles/legends.css

@@ -0,0 +1,62 @@
+.legend-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    padding: 0.5rem;
+    border-radius: 0.2rem;
+    background-color: #fff;
+    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
+    border: 2px solid rgba(0, 0, 0, 0.2);
+}
+
+.legend-card.collapsed {
+    padding: 0 !important;
+    float: right;
+}
+
+.legend-header {
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+}
+
+.legend-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: start;
+    padding: 0 1rem;
+    gap: 16px;
+    width: 100%;
+}
+
+.legend-item-color {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 1px;
+}
+
+.legend-item-label {
+}
+
+.source-url {
+    background: none !important;
+    line-height: inherit !important;
+    text-align: inherit !important;
+    width: auto !important;
+    height: auto !important;
+    text-decoration: underline !important;
+    color: #0078A8 !important;
+}
+
+.legend-list {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    gap: 4px;
+}

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

@@ -0,0 +1,32 @@
+import React from "react";
+import BoundaryLayer from "./components/BoundaryLayer";
+import GoogleEngineLayer from "./components/GoogleEngineLayer";
+import {PointLayer} from "./components/PointLayer";
+import ThematicLayer from "./components/ThematicLayer";
+import {CustomBoundaryLayer, CustomGoogleEngineLayer, CustomPointLayer, CustomThematicLayer} from "./interfaces";
+
+export default function MapLayer({
+  layer,
+  index,
+}: {
+  layer: CustomThematicLayer | CustomBoundaryLayer | CustomPointLayer | CustomGoogleEngineLayer;
+  index: number;
+}) {
+  switch (layer.type) {
+    case "overlay":
+    case "basemap":
+      return <BoundaryLayer {...layer} />;
+    case "bubble":
+    case "choropleth":
+      return <ThematicLayer layerId={layer.id} index={index} />;
+    case "point":
+      return <PointLayer />;
+    case "population":
+    case "elevation":
+    case "footprints":
+    case "landCover":
+      return <GoogleEngineLayer layerId={layer.id} />;
+    default:
+      return null;
+  }
+}

package/src/components/Map/components/MapLayer/interfaces/index.ts

@@ -0,0 +1,139 @@
+import type {Legend} from "@hisptz/dhis2-utils";
+import {MapOrgUnit, PointOrgUnit} from "../../../interfaces";
+import {LegendColorScale} from "../../../utils/colors";
+import {EarthEngineOptions} from "../components/GoogleEngineLayer/interfaces";
+import {EarthEngine} from "../components/GoogleEngineLayer/services/engine";
+
+export type BoundaryLayerType = "basemap" | "overlay";
+export type ThematicLayerType = "choropleth" | "bubble";
+
+export const SUPPORTED_EARTH_ENGINE_LAYERS = ["population", "footprints", "elevation", "landCover"];
+
+export type GoogleEngineLayerType = "population" | "footprints" | "elevation" | "landCover";
+
+export interface CustomBoundaryLayer extends CustomMapLayer {
+  id: string;
+  type: BoundaryLayerType;
+  enabled: boolean;
+}
+
+export interface EarthEngineLayerConfig extends CustomMapLayer {
+  type: GoogleEngineLayerType;
+  aggregations?: string[];
+  name?: string;
+  filters?: {
+    period: string;
+  };
+  params?: {
+    min: number;
+    max: number;
+    palette?: string;
+  };
+}
+
+export interface CustomGoogleEngineLayer extends CustomMapLayer {
+  type: GoogleEngineLayerType;
+  options: EarthEngineOptions;
+  aggregations?: string[];
+  name: string;
+  url: string;
+  engine?: EarthEngine;
+}
+
+export interface CustomPointLayer extends CustomMapLayer {
+  id: string;
+  type: "point";
+  label?: string;
+  level?: string | number;
+  group?: string;
+  style?: {
+    icon?: string;
+    groupSet?: string;
+    orgUnitGroups?: Array<{ name: string; symbol: string }>;
+  };
+  points?: Array<PointOrgUnit>;
+}
+
+export type DataItemType = "dataElement" | "indicator" | "programIndicator";
+
+export interface ThematicLayerDataItem {
+  id: string;
+  displayName: string;
+  type: DataItemType;
+  legendSet?: string;
+  legendConfig?: {
+    colorClass: LegendColorScale;
+    scale: number;
+  };
+}
+
+export interface ThematicLayerControl {
+  position: "topleft" | "topright" | "bottomleft" | "bottomright";
+  enabled: boolean;
+}
+
+export interface ThematicLayerData {
+  orgUnit: MapOrgUnit;
+  data?: number;
+  dataItem: ThematicLayerDataItem;
+}
+
+export interface ThematicLayerRawData {
+  orgUnit: string;
+  data?: number;
+  dataItem: string;
+}
+
+export interface CustomChoroplethLayer extends CustomMapLayer {
+  enabled: boolean;
+  name?: string;
+  data: ThematicLayerData[];
+  dataItem: ThematicLayerDataItem;
+  type: "choropleth";
+  control?: ThematicLayerControl;
+  legends?: Legend[];
+}
+
+export interface CustomBubbleLayer extends CustomMapLayer {
+  enabled: boolean;
+  name?: string;
+  data: ThematicLayerData[];
+  dataItem: ThematicLayerDataItem;
+  type: "bubble";
+  control?: ThematicLayerControl;
+  legends?: Legend[];
+  radius?: {
+    min: number;
+    max: number;
+  };
+}
+
+export type CustomThematicLayer = CustomBubbleLayer | CustomChoroplethLayer;
+
+export interface ThematicLayerConfig {
+  id: string;
+  data?: ThematicLayerRawData[];
+  enabled: boolean;
+  name?: string;
+  dataItem: ThematicLayerDataItem;
+  type: ThematicLayerType;
+  control?: ThematicLayerControl;
+  radius?: {
+    min: number;
+    max: number;
+  };
+}
+
+export interface CustomMapLayer {
+  id: string;
+  type: string;
+  enabled: boolean;
+}
+
+export type MapLayer = CustomBoundaryLayer | ThematicLayerConfig | CustomPointLayer | CustomGoogleEngineLayer;
+
+export interface MapLayerProps {
+  enabled: boolean;
+  type: "boundary" | "thematic" | "external" | "point" | "earthEngine";
+  layer: MapLayer;
+}

package/src/components/Map/components/MapProvider/components/MapLayerProvider/hooks/index.tsx

@@ -0,0 +1,368 @@
+import {compact, differenceBy, find, head, isEmpty, last, sortBy} from "lodash";
+import {useMapOrganisationUnit, useMapPeriods} from "../../../hooks";
+import {useCallback, useMemo, useState} from "react";
+import {
+    generateLegends,
+    getOrgUnitsSelection,
+    sanitizeDate,
+    sanitizeOrgUnits,
+    toGeoJson
+} from "../../../../../utils/map";
+import {useDataEngine} from "@dhis2/app-runtime";
+import {
+    CustomGoogleEngineLayer,
+    CustomPointLayer,
+    CustomThematicLayer,
+    EarthEngineLayerConfig,
+    ThematicLayerConfig
+} from "../../../../MapLayer/interfaces";
+import {MapOrgUnit, PointOrgUnit} from "../../../../../interfaces";
+import {asyncify, map} from "async-es";
+import {LegendSet} from "@hisptz/dhis2-utils";
+import {defaultClasses, defaultColorScaleName} from "../../../../../utils/colors";
+import {useGoogleEngineToken} from "../../../../MapLayer/components/GoogleEngineLayer/hooks";
+import {useBoundaryData} from "../../../../MapLayer/components/BoundaryLayer/hooks/useBoundaryData";
+import {EarthEngine} from "../../../../MapLayer/components/GoogleEngineLayer/services/engine";
+import {EARTH_ENGINE_LAYERS} from "../../../../MapLayer/components/GoogleEngineLayer/constants";
+import {EarthEngineOptions} from "../../../../MapLayer/components/GoogleEngineLayer/interfaces";
+
+const analyticsQuery = {
+    analytics: {
+        resource: "analytics",
+        params: ({ou, pe, dx, startDate, endDate}: any) => {
+            const peDimension = !isEmpty(pe) ? `pe:${pe?.join(";")}` : undefined;
+            const ouDimension = !isEmpty(ou) ? `ou:${ou?.join(";")}` : undefined;
+            const dxDimension = !isEmpty(dx) ? `dx:${dx?.join(";")}` : undefined;
+
+            return {
+                dimension: compact([dxDimension, peDimension, ouDimension]),
+                startDate,
+                endDate,
+                displayProperty: "NAME",
+            };
+        },
+    },
+};
+const query = {
+    layer: {
+        resource: "geoFeatures",
+        params: ({ous}: any) => ({
+            ou: `ou:${ous.join(";")}`,
+        }),
+    },
+    analytics: {
+        resource: "analytics",
+        params: ({ous}: any) => ({
+            dimension: [`ou:${ous.join(";")}`, `pe:${new Date().getFullYear()}`],
+            skipData: true,
+            hierarchyMeta: true,
+        }),
+    },
+};
+const groupSetQuery = {
+    groupSet: {
+        resource: "organisationUnitGroupSets",
+        id: ({groupSet}: any) => groupSet,
+        params: {
+            fields: ["organisationUnitGroups[name,color,symbol,organisationUnits[id]]"],
+        },
+    },
+};
+const legendSetsQuery = {
+    legendSets: {
+        resource: "legendSets",
+        id: ({id}: any) => id,
+        params: {
+            fields: ["id", "displayName", "legends[id,code,startValue,endValue,color]"],
+        },
+    },
+};
+
+export function useThematicLayers(): any {
+    const engine = useDataEngine();
+    const [loading, setLoading] = useState(false);
+    const {orgUnits, orgUnitSelection} = useMapOrganisationUnit();
+    const {periods, range} = useMapPeriods() ?? {};
+    const ou = useMemo(() => getOrgUnitsSelection(orgUnitSelection), [orgUnitSelection]);
+    const pe = useMemo(() => periods?.map((pe: any) => pe.id), [periods]);
+
+    const {startDate, endDate} = useMemo(() => {
+        if (!range) {
+            return {
+                startDate: undefined,
+                endDate: undefined,
+            };
+        }
+        return {
+            startDate: sanitizeDate(range.start.toDateString()),
+            endDate: sanitizeDate(range.end.toDateString()),
+        };
+    }, [range]);
+    const sanitizeData = (data: any, layer: ThematicLayerConfig) => {
+        if (data) {
+            const {analytics} = data as any;
+            const rows = analytics?.rows;
+            const ouIndex = analytics.headers.findIndex((header: any) => header.name === "ou");
+            const dxIndex = analytics.headers.findIndex((header: any) => header.name === "dx");
+            const valueIndex = analytics.headers.findIndex((header: any) => header.name === "value");
+
+            if (!isEmpty(rows)) {
+                return sortBy(
+                    orgUnits?.map((ou: MapOrgUnit) => {
+                        const row = rows.find((row: any) => row[ouIndex] === ou.id && row[dxIndex] === layer.dataItem.id);
+                        return {
+                            orgUnit: ou,
+                            data: row ? parseFloat(row[valueIndex]) : undefined,
+                            dataItem: {
+                                ...layer.dataItem,
+                            },
+                        };
+                    }),
+                    ["data"]
+                );
+            }
+            return [];
+        }
+        return [];
+    };
+
+    const sanitizeLegends = async (layers: CustomThematicLayer[]): Promise<CustomThematicLayer[]> => {
+        return (await map(
+            layers,
+            asyncify(async (layer: CustomThematicLayer) => {
+                try {
+                    const legends = [];
+                    if (layer.dataItem.legendSet) {
+                        const legendSetData = await engine.query(legendSetsQuery, {
+                            variables: {
+                                id: layer.dataItem.legendSet,
+                            },
+                        });
+                        const legendSet: LegendSet = legendSetData?.legendSets as LegendSet;
+                        if (legendSet) {
+                            legends.push(...legendSet.legends);
+                        }
+                    } else {
+                        const {scale, colorClass} = layer.dataItem.legendConfig ?? {
+                            scale: defaultClasses,
+                            colorClass: defaultColorScaleName,
+                        };
+                        const sortedData = sortBy(layer.data.filter((datum) => !!datum.data), "data");
+                        const autoLegends = generateLegends(last(sortedData)?.data ?? 0, head(sortedData)?.data ?? 0, {
+                            classesCount: scale,
+                            colorClass,
+                        });
+                        legends.push(...autoLegends);
+                    }
+                    return {
+                        ...layer,
+                        legends,
+                    };
+                } catch (e) {
+                    return layer;
+                }
+            })
+        )) as CustomThematicLayer[];
+    };
+
+    const sanitizeLayers = async (layers: ThematicLayerConfig[]): Promise<CustomThematicLayer[]> => {
+        try {
+            setLoading(true);
+            const layersWithoutData = layers?.filter((layer) => !layer.data);
+            const layersWithData = differenceBy(layers, layersWithoutData, "id");
+            const dx = layersWithoutData.map((layer) => layer.dataItem.id);
+            let sanitizedLayersWithData: any = [];
+
+            console.log({layersWithoutData})
+
+            if (!isEmpty(dx)) {
+                const data = await engine.query(analyticsQuery, {
+                    variables: {
+                        dx,
+                        ou,
+                        pe,
+                        startDate,
+                        endDate,
+                    },
+                });
+                sanitizedLayersWithData = layersWithoutData.map((layer) => ({
+                    ...layer,
+                    name: layer?.name ?? layer?.dataItem?.displayName ?? layer.id,
+                    data: sanitizeData(data, layer),
+                }));
+            }
+            const sanitizedLayersWithOrgUnits = layersWithData.map((layer) => ({
+                ...layer,
+                data: layer.data?.map((datum) => ({
+                    ...datum,
+                    orgUnit: find(orgUnits, ["id", datum.orgUnit]) as MapOrgUnit,
+                    dataItem: layer.dataItem,
+                    name: layer?.name ?? layer?.dataItem?.displayName ?? layer.id,
+                })),
+            }));
+            setLoading(false);
+            return await sanitizeLegends([...sanitizedLayersWithData, ...sanitizedLayersWithOrgUnits]);
+        } catch (e: any) {
+            console.error(`Error getting thematic layers`, e.details);
+            setLoading(false);
+            return [];
+        }
+    };
+
+    return {
+        sanitizeLayers,
+        loading,
+    };
+}
+
+export function usePointLayer() {
+    const engine = useDataEngine();
+    const {orgUnitSelection} = useMapOrganisationUnit();
+    const [loading, setLoading] = useState(false);
+
+    const sanitizePointData = useCallback((orgUnitData: any, groupSetData: any): PointOrgUnit[] => {
+        const {analytics, layer} = (orgUnitData as any) ?? {};
+        const rawOrgUnits = sanitizeOrgUnits(analytics?.metaData);
+        const geoJSONObjects = toGeoJson(layer?.filter((bound: any) => bound.co));
+        return compact(
+            rawOrgUnits.map((orgUnit: any) => {
+                const geoJSONObject: any = geoJSONObjects?.find((geoJSON: any) => geoJSON.properties.id === orgUnit.id);
+                const orgUnitGroups: any = (groupSetData?.groupSet as any)?.organisationUnitGroups ?? [];
+                const ouGroup = find(orgUnitGroups, (ouGroup) => !!find(ouGroup?.organisationUnits ?? [], ["id", orgUnit.id]));
+
+                if (!geoJSONObject || geoJSONObject.properties.type !== "Point") {
+                    return;
+                }
+                return {
+                    ...orgUnit,
+                    geoJSON: geoJSONObject,
+                    level: geoJSONObject.properties.level,
+                    icon: {
+                        type: "groupIcon",
+                        icon: ouGroup?.symbol,
+                    },
+                };
+            })
+        );
+    }, []);
+
+    const sanitizeLayer = useCallback(async (layer: CustomPointLayer): Promise<CustomPointLayer | undefined> => {
+        try {
+            if (!layer.level && !layer.group) {
+                return;
+            }
+            setLoading(true);
+            const level = layer.level ? `LEVEL-${layer.level}` : undefined;
+            const group = layer.group ? `OU_GROUP-${layer.group}` : undefined;
+            const ous = [...getOrgUnitsSelection(orgUnitSelection), level, group];
+
+            const pointData = await engine.query(query, {
+                variables: {
+                    ous,
+                },
+            });
+            const groupSetData = await engine.query(groupSetQuery, {
+                variables: {
+                    groupSet: layer.style?.groupSet,
+                },
+            });
+            const sanitizedOrgUnitData = sanitizePointData(pointData, groupSetData);
+
+            const orgUnitGroups = (groupSetData?.groupSet as any)?.organisationUnitGroups ?? [];
+
+            const sanitizedOrgUnitGroups = orgUnitGroups.map((ouGroup: any) => ({
+                ...ouGroup,
+                organisationUnits: undefined,
+            }));
+            setLoading(false);
+            return {
+                ...layer,
+                points: sanitizedOrgUnitData,
+                style: {
+                    ...layer.style,
+                    orgUnitGroups: sanitizedOrgUnitGroups,
+                },
+            };
+        } catch (e: any) {
+            setLoading(false);
+            console.error(`Error getting point layer`, e.details);
+            return;
+        }
+    }, []);
+
+    return {
+        loading,
+        sanitizeLayer,
+    };
+}
+
+export function useGoogleEngineLayers() {
+    const {refresh} = useGoogleEngineToken();
+    const orgUnits = useBoundaryData();
+
+    async function getImageUrl(earthEngine: EarthEngine, {filters}: EarthEngineLayerConfig): Promise<string | undefined> {
+        if (earthEngine.initialized) {
+            try {
+                earthEngine.setOrgUnits(orgUnits ?? []);
+                const period = filters?.period;
+                if (period) {
+                    earthEngine.setPeriod(period);
+                }
+                return earthEngine.url();
+            } catch (e) {
+                console.error(e);
+            }
+        }
+    }
+
+    const sanitizeLayers = useCallback(
+        async (layers: EarthEngineLayerConfig[]): Promise<CustomGoogleEngineLayer[]> => {
+            if (isEmpty(layers)) {
+                return [];
+            }
+            try {
+                const {token} = await refresh();
+                if (!token) {
+                    console.error(`Google token not available in this instance`);
+                    return [];
+                }
+                await EarthEngine.setToken(token, refresh);
+                return map(
+                    layers,
+                    asyncify(async (layer: EarthEngineLayerConfig) => {
+                        try {
+                            const defaultOptions: any = find(EARTH_ENGINE_LAYERS, ["id", layer.type]) ?? {};
+                            const options: EarthEngineOptions = {
+                                ...defaultOptions,
+                                aggregations: layer.aggregations ?? defaultOptions?.aggregations,
+                                params: layer.params ?? defaultOptions?.params,
+                            };
+                            const updatedLayer = {
+                                ...layer,
+                                options,
+                            };
+                            const earthEngine = new EarthEngine({options});
+                            const url = await getImageUrl(earthEngine, updatedLayer);
+                            return {
+                                ...updatedLayer,
+                                engine: earthEngine,
+                                url,
+                            };
+                        } catch (e) {
+                            console.error(e);
+                            return;
+                        }
+                    })
+                );
+            } catch (e: any) {
+                console.error(`Error getting thematic layers`, e.details);
+                return [];
+            }
+        },
+        [refresh]
+    );
+
+    return {
+        sanitizeLayers,
+    };
+}