@hisptz/dhis2-analytics 1.0.51 → 1.0.52

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

@@ -1,46 +0,0 @@
-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

@@ -1,62 +0,0 @@
-.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

@@ -1,32 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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

@@ -1,368 +0,0 @@
-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,
-    };
-}