@hisptz/dhis2-analytics 1.0.49 → 1.0.51

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

@@ -0,0 +1,105 @@
+import i18n from "@dhis2/d2-i18n";
+import {CenteredContent, CircularLoader} from "@dhis2/ui";
+import {LayersControlEvent} from "leaflet";
+import {compact, find, head, set} from "lodash";
+import React, {useCallback, useEffect, useState} from "react";
+import {useMapEvents} from "react-leaflet";
+import {MapLayersContext} from "../../../../state";
+import {MapLayerConfig} from "../../../MapArea/interfaces";
+import {
+    CustomBoundaryLayer,
+    CustomGoogleEngineLayer,
+    CustomMapLayer,
+    CustomPointLayer,
+    CustomThematicLayer,
+    ThematicLayerConfig,
+} from "../../../MapLayer/interfaces";
+import {useMapOrganisationUnit, useMapPeriods} from "../../hooks";
+import {useGoogleEngineLayers, usePointLayer, useThematicLayers} from "./hooks";
+
+export function MapLayersProvider({ layers, children }: { layers: MapLayerConfig; children: React.ReactNode }) {
+  const period = useMapPeriods();
+  const orgUnit = useMapOrganisationUnit();
+  const [updatedLayers, setUpdatedLayers] = useState<Array<CustomThematicLayer | CustomBoundaryLayer | CustomPointLayer | CustomGoogleEngineLayer>>([]);
+  const { sanitizeLayers: sanitizeThematicLayers, error } = useThematicLayers();
+  const { sanitizeLayer: sanitizePointLayer } = usePointLayer();
+  const { sanitizeLayers: sanitizeEarthEngineLayers } = useGoogleEngineLayers();
+  const [loading, setLoading] = useState(false);
+
+  useMapEvents({
+    overlayremove: (event) => {
+      setupLayerListeners("remove", event);
+    },
+    overlayadd: (event) => {
+      setupLayerListeners("add", event);
+    },
+  });
+
+  const sanitizeLayers = async () => {
+    setLoading(true);
+    try {
+      const { boundaryLayers, thematicLayers, pointLayers, earthEngineLayers } = layers;
+      const sanitizedThematicLayers = await sanitizeThematicLayers([...(thematicLayers ?? [])] as ThematicLayerConfig[]);
+      const sanitizedBoundaryLayers = (boundaryLayers ?? []) as CustomBoundaryLayer[];
+      const sanitizedPointLayer = head(pointLayers ?? []) ? await sanitizePointLayer(head(pointLayers) as CustomPointLayer) : undefined;
+      const sanitizedEarthEngineLayers = await sanitizeEarthEngineLayers([...(earthEngineLayers ?? [])] as unknown as CustomGoogleEngineLayer[]);
+      setUpdatedLayers(
+        compact([...(sanitizedBoundaryLayers ?? []), ...(sanitizedThematicLayers ?? []), sanitizedPointLayer, ...(sanitizedEarthEngineLayers ?? [])])
+      );
+    } catch (e: any) {
+      console.error(`Error sanitizing layers`, e.toString());
+    }
+    setLoading(false);
+  };
+
+  const updateLayer = useCallback((id: string, updatedLayer: CustomMapLayer) => {
+    setUpdatedLayers((prevLayers) => {
+      const updatedLayers = [...prevLayers];
+      const layerIndex = updatedLayers.findIndex((layer) => layer.id === updatedLayer.id);
+      if (layerIndex < 0) {
+        return prevLayers;
+      }
+      set(updatedLayers, layerIndex, updatedLayer);
+      return updatedLayers;
+    });
+  }, []);
+
+  useEffect(() => {
+    sanitizeLayers().catch(console.error);
+  }, [period, orgUnit]);
+
+  const setupLayerListeners = (type: "add" | "remove", event: LayersControlEvent) => {
+    const name = event.name;
+
+    const layerConfig = find(updatedLayers, (layer: any) => {
+      const nameFromConfig = layer?.name ?? layer?.dataItem?.displayname ?? layer?.label;
+      return nameFromConfig === name;
+    });
+
+    if (layerConfig) {
+      updateLayer(layerConfig.id, { ...layerConfig, enabled: type === "add" });
+    }
+  };
+
+  if (loading) {
+    return (
+      <div style={{ height: "100%", width: "100%" }}>
+        <CenteredContent>
+          <CircularLoader small />
+        </CenteredContent>
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div style={{ height: "100%", width: "100%" }}>
+        <CenteredContent>
+          <h4>
+            {i18n.t("Error")}: {error.message}
+          </h4>
+        </CenteredContent>
+      </div>
+    );
+  }
+  return <MapLayersContext.Provider value={{ layers: updatedLayers, updateLayer }}>{children}</MapLayersContext.Provider>;
+}

package/src/components/Map/components/MapProvider/hooks/index.ts

@@ -0,0 +1,14 @@
+import {useContext} from "react";
+import {MapLayersContext, MapOrgUnitContext, MapPeriodContext} from "../../../state";
+
+export function useMapOrganisationUnit() {
+  return useContext(MapOrgUnitContext);
+}
+
+export function useMapPeriods() {
+  return useContext(MapPeriodContext);
+}
+
+export function useMapLayers() {
+  return useContext(MapLayersContext);
+}

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

@@ -0,0 +1,93 @@
+import {useDataQuery} from "@dhis2/app-runtime";
+import i18n from "@dhis2/d2-i18n";
+import {CenteredContent, CircularLoader} from "@dhis2/ui";
+import {compact, isEmpty} from "lodash";
+import React, {useEffect, useState} from "react";
+import {MapOrgUnit, MapProviderProps} from "../../interfaces";
+import {MapOrgUnitContext, MapPeriodContext} from "../../state";
+import {getOrgUnitsSelection, sanitizeOrgUnits, toGeoJson} from "../../utils/map";
+import {BasePeriod, PeriodUtility} from "@hisptz/dhis2-utils";
+
+const boundaryQuery = {
+  boundaries: {
+    resource: "geoFeatures",
+    params: ({ orgUnitIds }: any) => ({
+      ou: `ou:${orgUnitIds?.join(";")}`,
+    }),
+  },
+  analytics: {
+    resource: "analytics",
+    params: ({ orgUnitIds }: any) => ({
+      dimension: [`ou:${orgUnitIds.join(";")}`, `pe:${new Date().getFullYear()}`],
+      skipData: true,
+      hierarchyMeta: true,
+    }),
+  },
+};
+
+export function MapProvider({ children, orgUnitSelection, periodSelection }: MapProviderProps) {
+  const [orgUnits, setOrgUnits] = useState<MapOrgUnit[]>([]);
+  const { refetch, loading, error } = useDataQuery(boundaryQuery, { lazy: true });
+
+  useEffect(() => {
+    async function getOrgUnits() {
+      const rawOrgUnitIds = getOrgUnitsSelection(orgUnitSelection);
+      const data = await refetch({ orgUnitIds: rawOrgUnitIds });
+      const { analytics, boundaries } = (data as any) ?? {};
+      const rawOrgUnits = sanitizeOrgUnits(analytics?.metaData);
+      const geoJSONObjects = toGeoJson(boundaries.filter((bound: any) => bound.co));
+      const orgUnits: MapOrgUnit[] = compact(
+        rawOrgUnits.map((orgUnit: any) => {
+          const geoJSONObject: any = geoJSONObjects?.find((geoJSON: any) => geoJSON.properties.id === orgUnit.id);
+
+          if (!geoJSONObject) {
+            return;
+          }
+          return {
+            ...orgUnit,
+            geoJSON: geoJSONObject,
+            bounds: [],
+            level: geoJSONObject.properties.level,
+          };
+        })
+      );
+      setOrgUnits(orgUnits);
+    }
+
+    getOrgUnits().catch((error) => console.log(error));
+  }, [orgUnitSelection, refetch]);
+
+  if (loading) {
+    return (
+      <div style={{ height: "100%", width: "100%" }}>
+        <CenteredContent>
+          <CircularLoader small />
+        </CenteredContent>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div style={{ height: "100%", width: "100%" }}>
+        <CenteredContent>
+          <h4>
+            {i18n.t("Error")}: {error.message}
+          </h4>
+        </CenteredContent>
+      </div>
+    );
+  }
+
+  const periods: BasePeriod[] = compact(periodSelection?.periods?.map((pe) => PeriodUtility.getPeriodById(pe)));
+
+  if (!isEmpty(orgUnits)) {
+    return (
+      <MapOrgUnitContext.Provider value={{ orgUnitSelection, orgUnits }}>
+        <MapPeriodContext.Provider value={{ ...periodSelection, periods }}>{children}</MapPeriodContext.Provider>
+      </MapOrgUnitContext.Provider>
+    );
+  }
+
+  return null;
+}

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

@@ -0,0 +1,8 @@
+import {useCenterMap} from "../../hooks/map";
+import React from "react";
+import {LatLngTuple} from "leaflet";
+
+export default function MapUpdater({ bounds }: { bounds: LatLngTuple[] }) {
+  const ref = useCenterMap({ bounds });
+  return <div style={{ width: "100%", height: "100%" }} ref={ref}></div>;
+}

package/src/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfigModal.stories.tsx

@@ -0,0 +1,28 @@
+import {Story} from "@storybook/react";
+import {ThematicLayerConfigModal, ThematicLayerConfigModalProps} from "./index";
+import React from "react";
+
+const Template: Story<ThematicLayerConfigModalProps> = (args) => {
+  return <ThematicLayerConfigModal {...args} />;
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+  onChange: console.info,
+  onClose: () => {},
+  open: true,
+};
+
+export default {
+  title: "Analytics/Map/Thematic Layer Config Modal",
+  component: ThematicLayerConfigModal,
+  decorators: [
+    (MapStory: any) => {
+      return (
+        <div style={{ width: "50%", height: "50%" }}>
+          <MapStory />
+        </div>
+      );
+    },
+  ],
+};

package/src/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfiguration.stories.tsx

@@ -0,0 +1,34 @@
+import {Story} from "@storybook/react";
+import {ThematicLayerConfiguration, ThematicLayerConfigurationProps} from "./index";
+import React from "react";
+import {useForm} from "react-hook-form";
+import {ThematicLayerConfig} from "../MapLayer/interfaces";
+import i18n from "@dhis2/d2-i18n";
+import {Button} from "@dhis2/ui";
+
+const Template: Story<ThematicLayerConfigurationProps> = (args) => {
+  const form = useForm<ThematicLayerConfig>();
+  return (
+    <form className="column gap-16" onSubmit={form.handleSubmit(console.log)}>
+      <ThematicLayerConfiguration {...args} form={form} />
+      <Button type="submit">{i18n.t("Submit")}</Button>
+    </form>
+  );
+};
+
+export const Basic = Template.bind({});
+Basic.args = {};
+
+export default {
+  title: "Analytics/Map/Thematic Layer Configuration",
+  component: ThematicLayerConfiguration,
+  decorators: [
+    (MapStory: any) => {
+      return (
+        <div style={{ width: "50%", height: "50%" }}>
+          <MapStory />
+        </div>
+      );
+    },
+  ],
+};

package/src/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/components/ColorScale/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import styles from "../../styles/ColorScale.module.css";
+import {COLOR_PALETTES} from "../../constants/colors";
+
+// Returns one color scale based on a code and number of classes
+const ColorScale = ({ scale, bins, width, onClick }: { scale: string; bins: number; width: number; onClick: (scale: string) => void }) => {
+  const colors = (COLOR_PALETTES as any)?.[scale]?.[bins];
+  const itemWidth = width ? width / bins : 36;
+
+  return (
+    <ul
+      onClick={() => onClick(scale)}
+      className={styles.colorScale}
+      style={{
+        ...(width && { width }),
+      }}>
+      {colors.map((color: string, index: number) => (
+        <li key={index} className={styles.item} style={{ backgroundColor: color, width: itemWidth }} />
+      ))}
+    </ul>
+  );
+};
+
+export default ColorScale;