@hisptz/dhis2-analytics 1.0.51 → 1.0.53

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

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

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

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

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

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

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

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