@hisptz/dhis2-analytics 1.0.49 → 1.0.51

package/src/components/Map/components/EarthEngineLayerConfiguration/EarthEngineLayerConfigModal.stories.tsx

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

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

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

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

@@ -0,0 +1,412 @@
+import {EarthEngineLayerConfig} from "../MapLayer/interfaces";
+import {Controller, FormProvider, useForm, useFormContext, UseFormReturn, useWatch} from "react-hook-form";
+import React, {useEffect, useMemo} from "react";
+import {EARTH_ENGINE_LAYERS, SUPPORTED_EARTH_ENGINE_LAYERS} from "../MapLayer/components/GoogleEngineLayer/constants";
+import {capitalize, filter, find, head, isEmpty} from "lodash";
+import i18n from "@dhis2/d2-i18n";
+import {
+    Button,
+    ButtonStrip,
+    CenteredContent,
+    CircularLoader,
+    Field,
+    InputField,
+    Modal,
+    ModalActions,
+    ModalContent,
+    ModalTitle,
+    MultiSelectField,
+    MultiSelectOption,
+    SingleSelectField,
+    SingleSelectOption,
+} from "@dhis2/ui";
+import {useGoogleEngineToken} from "../MapLayer/components/GoogleEngineLayer/hooks";
+import {EarthEngineOptions} from "../MapLayer/components/GoogleEngineLayer/interfaces";
+import {EarthEngine} from "../MapLayer/components/GoogleEngineLayer/services/engine";
+import {useQuery} from "react-query";
+import ColorScaleSelect from "../ThematicLayerConfiguration/components/ColorScaleSelect";
+import {
+    defaultClasses,
+    defaultColorScaleName,
+    getColorClasses,
+    getColorPalette,
+    getColorScale
+} from "../../utils/colors";
+
+export interface EarthEngineLayerConfigurationProps {
+  form: UseFormReturn<EarthEngineLayerConfig>;
+  excluded?: string[];
+  [key: string]: any;
+}
+
+function useType() {
+  const type = useWatch({
+    name: "type",
+  });
+  return find(EARTH_ENGINE_LAYERS, ["id", type]);
+}
+
+function AggregationSelector() {
+  const config = useType();
+
+  if (!config?.defaultAggregations) {
+    return null;
+  }
+
+  const supportedAggregations = config?.defaultAggregations ?? [];
+
+  const maxAggregations = config?.maxAggregations;
+
+  return (
+    <Controller
+      render={({ field, fieldState }) => {
+        return maxAggregations === 1 ? (
+          <SingleSelectField
+            clearable
+            error={Boolean(fieldState.error)}
+            validationText={fieldState?.error?.message}
+            selected={supportedAggregations.includes(head(field.value) ?? "") ? head(field.value) : undefined}
+            onChange={({ selected }: { selected: string }) => field.onChange([selected])}
+            label={i18n.t("Aggregation")}>
+            {supportedAggregations.map((aggregation) => (
+              <SingleSelectOption key={`${aggregation}-option`} label={capitalize(aggregation)} value={aggregation} />
+            ))}
+          </SingleSelectField>
+        ) : (
+          <MultiSelectField
+            error={Boolean(fieldState.error)}
+            validationText={fieldState?.error?.message}
+            selected={field.value?.filter((value: string) => supportedAggregations?.includes(value))}
+            onChange={({ selected }: { selected: string[] }) => field.onChange(selected)}
+            label={i18n.t("Aggregations")}>
+            {supportedAggregations.map((aggregation) => (
+              <MultiSelectOption key={`${aggregation}-option`} label={capitalize(aggregation)} value={aggregation} />
+            ))}
+          </MultiSelectField>
+        );
+      }}
+      name={"aggregations"}
+    />
+  );
+}
+
+function useDatasetInfo(shouldRun: boolean, config?: EarthEngineOptions) {
+  const { refresh } = useGoogleEngineToken();
+
+  async function getInfo() {
+    if (config) {
+      const tokenData = await refresh();
+      await EarthEngine.setToken(tokenData.token, refresh);
+      const engine = new EarthEngine({
+        options: config,
+      });
+      return engine.getPeriod();
+    }
+  }
+
+  const { data, error, isLoading } = useQuery([config], getInfo);
+
+  const periods = useMemo(() => {
+    const features = (data as any)?.features;
+    return features?.map((feature: any) => {
+      return new Date(feature?.properties["system:time_start"])?.getFullYear();
+    });
+  }, [data]);
+
+  return {
+    loading: isLoading,
+    error: error as any,
+    periods,
+  };
+}
+
+function PeriodSelector() {
+  const config = useType();
+  const { setValue, getValues } = useFormContext();
+  const filters = config?.filters ?? [];
+  const hasPeriodFilter = filters.includes("period");
+  const { loading, error, periods } = useDatasetInfo(hasPeriodFilter, config);
+  const initialPeriod = getValues("filters.period");
+
+  useEffect(() => {
+    if (!isEmpty(periods) && !initialPeriod) {
+      setValue("filters.period", head(periods));
+    }
+  }, [periods]);
+
+  if (!hasPeriodFilter) {
+    return null;
+  }
+
+  if (error) {
+    return (
+      <div style={{ minWidth: "100%", minHeight: 100 }}>
+        <CenteredContent>
+          <p>{error?.message ?? error?.toString()}</p>
+        </CenteredContent>
+      </div>
+    );
+  }
+
+  return (
+    <Controller
+      name="filters.period"
+      rules={{
+        required: i18n.t("Period is required"),
+      }}
+      render={({ field, fieldState }) => (
+        <div style={{ gap: 4 }} className="row align-items-center">
+          <div style={{ flex: 1 }}>
+            <SingleSelectField
+              helpText={i18n.t("Available periods are set by the source data")}
+              loading={loading}
+              filterable
+              label={i18n.t("Period")}
+              required
+              error={Boolean(fieldState.error)}
+              validationText={fieldState.error?.message}
+              onChange={({ selected }: { selected: string }) => field.onChange(parseInt(selected))}
+              selected={periods?.includes(field.value) ? field.value?.toString() : undefined}>
+              {periods?.map((period: number) => (
+                <SingleSelectOption key={`${period}-option`} value={period.toString()} label={period.toString()} />
+              ))}
+            </SingleSelectField>
+          </div>
+          {loading && <CircularLoader extrasmall />}
+        </div>
+      )}
+    />
+  );
+}
+
+function ColorConfig() {
+  return (
+    <div className="column gap-16">
+      <div className="row gap-8">
+        <Controller
+          render={({ field, fieldState }) => (
+            <InputField
+              {...field}
+              error={Boolean(fieldState.error)}
+              validationText={fieldState.error?.message}
+              value={field.value?.toString()}
+              onChange={({ value }: { value: string }) => field.onChange(parseInt(value))}
+              label={i18n.t("Min")}
+              type="number"
+            />
+          )}
+          name={"params.min"}
+        />
+        <Controller
+          render={({ field, fieldState }) => (
+            <InputField
+              {...field}
+              error={Boolean(fieldState.error)}
+              validationText={fieldState.error?.message}
+              value={field.value?.toString()}
+              onChange={({ value }: { value: string }) => field.onChange(parseInt(value))}
+              label={i18n.t("Max")}
+              type="number"
+            />
+          )}
+          name={"params.max"}
+        />
+        <Controller
+          name="params.palette"
+          render={({ field, fieldState }) => {
+            const palette = field.value;
+            const scale = getColorClasses(palette);
+            const colorClass = getColorScale(palette ?? "");
+
+            const onChange = ({ selected }: { selected: string }) => {
+              const palette = getColorPalette(colorClass as string, parseInt(selected))?.join(",");
+              field.onChange(palette);
+            };
+
+            return (
+              <SingleSelectField
+                validationText={fieldState.error?.message}
+                error={Boolean(fieldState.error)}
+                selected={scale?.toString() ?? defaultClasses.toString()}
+                label={i18n.t("Steps")}
+                onChange={onChange}
+                name="scale">
+                {[3, 4, 5, 6, 7, 8, 9].map((value) => (
+                  <SingleSelectOption key={`${value}-classes-option`} label={`${value}`} value={value?.toString()} />
+                ))}
+              </SingleSelectField>
+            );
+          }}
+        />
+      </div>
+      <div>
+        <Controller
+          name="params.palette"
+          render={({ field, fieldState }) => {
+            const palette = field.value;
+            const scale = getColorClasses(palette);
+            const colorClass = getColorScale(palette ?? "");
+
+            const onChange = (colorClass: string) => {
+              const palette = getColorPalette(colorClass, scale)?.join(",");
+              field.onChange(palette);
+            };
+
+            return (
+              <Field error={Boolean(fieldState.error)} validationText={fieldState.error?.message} label={i18n.t("Colors")}>
+                <ColorScaleSelect count={scale ?? defaultClasses} colorClass={colorClass ?? defaultColorScaleName} width={300} onChange={onChange} />
+              </Field>
+            );
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function StylesConfig() {
+  const config = useType();
+  const hasParams = Boolean(config?.params);
+
+  if (!hasParams) {
+    return null;
+  }
+
+  return (
+    <div style={{ minWidth: 200, minHeight: 100 }} className="row gap-16">
+      <div className="column">
+        <p>
+          {i18n.t("Unit")}: {config?.unit}
+        </p>
+        <ColorConfig />
+      </div>
+    </div>
+  );
+}
+
+function Name() {
+  const config = useType();
+  const { setValue } = useFormContext();
+  useEffect(() => {
+    setValue("name", config?.name);
+    setValue("id", config?.id);
+  }, [config]);
+
+  return (
+    <Controller
+      name="name"
+      rules={{
+        required: i18n.t("Name is required"),
+      }}
+      render={({ field, fieldState }) => (
+        <InputField
+          label={i18n.t("Layer name")}
+          type="text"
+          required
+          error={Boolean(fieldState.error)}
+          validationText={fieldState.error?.message}
+          onChange={({ value }: { value: string }) => field.onChange(value)}
+          value={field.value}
+        />
+      )}
+    />
+  );
+}
+
+function TypeField({ excluded }: { excluded?: string[] }) {
+  const supportedLayers = filter(EARTH_ENGINE_LAYERS, ({ id }) => SUPPORTED_EARTH_ENGINE_LAYERS.includes(id) && !(excluded?.includes(id) ?? false));
+  const { setValue } = useFormContext();
+  const setConfigDefaults = (selected: string) => {
+    const config = find(supportedLayers, ["id", selected]);
+    if (!config) return;
+
+    if (config?.defaultAggregations) {
+      setValue("aggregations", config?.defaultAggregations);
+    } else {
+      setValue("aggregations", undefined);
+    }
+
+    if (config?.params) {
+      const { max, min, palette } = config.params;
+      setValue("params.max", max);
+      setValue("params.min", min);
+      setValue("params.palette", palette);
+    } else {
+      setValue("params", undefined);
+    }
+  };
+
+  return (
+    <Controller
+      name="type"
+      rules={{
+        required: i18n.t("Type is required"),
+      }}
+      render={({ field, fieldState }) => (
+        <SingleSelectField
+          label={i18n.t("Layer type")}
+          required
+          error={Boolean(fieldState.error)}
+          validationText={fieldState.error?.message}
+          onChange={({ selected }: { selected: string }) => {
+            setConfigDefaults(selected);
+            field.onChange(selected);
+          }}
+          selected={Boolean(find(supportedLayers, "id", field.value)) ? field.value : undefined}>
+          {supportedLayers?.map((layer) => (
+            <SingleSelectOption key={`${layer.id}-option`} value={layer.id} label={layer.name} />
+          ))}
+        </SingleSelectField>
+      )}
+    />
+  );
+}
+
+export function EarthEngineLayerConfiguration({ form, excluded }: EarthEngineLayerConfigurationProps) {
+  return (
+    <FormProvider {...form}>
+      <div className="column gap-16">
+        <TypeField excluded={excluded} />
+        <Name />
+        <AggregationSelector />
+        <PeriodSelector />
+        <StylesConfig />
+      </div>
+    </FormProvider>
+  );
+}
+
+export interface EarthEngineLayerConfigModalProps {
+  open: boolean;
+  config?: EarthEngineLayerConfig;
+  exclude?: string[];
+  onClose: () => void;
+  onChange: (config: EarthEngineLayerConfig) => void;
+}
+
+export function EarthEngineLayerConfigModal({ open, exclude, config, onClose, onChange, ...props }: EarthEngineLayerConfigModalProps) {
+  const form = useForm<EarthEngineLayerConfig>({
+    defaultValues: config ?? {},
+  });
+  const onSubmitClick = (values: EarthEngineLayerConfig) => {
+    onClose();
+    onChange(values);
+  };
+
+  return (
+    <Modal {...props} open={open} onClose={onClose}>
+      <ModalTitle>{i18n.t("Configure Earth Engine Layer")}</ModalTitle>
+      <ModalContent>
+        <EarthEngineLayerConfiguration form={form} excluded={exclude} />
+      </ModalContent>
+      <ModalActions>
+        <ButtonStrip>
+          <Button onClick={onClose}>{i18n.t("Cancel")}</Button>
+          <Button primary onClick={form.handleSubmit(onSubmitClick)}>
+            {i18n.t("Save")}
+          </Button>
+        </ButtonStrip>
+      </ModalActions>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,83 @@
+import {uid} from "@hisptz/dhis2-utils";
+import {Map as LeafletMap} from "leaflet";
+import {isEmpty} from "lodash";
+import React, {forwardRef, useRef} from "react";
+import {LayersControl, MapContainer, TileLayer} from "react-leaflet";
+import {useMapBounds} from "../../hooks/map";
+import MapControl from "../MapControls";
+import MapLayer from "../MapLayer";
+import LegendArea from "../MapLayer/components/LegendArea";
+import {CustomThematicLayer} from "../MapLayer/interfaces";
+import {MapLayersProvider} from "../MapProvider/components/MapLayerProvider";
+import {useMapLayers} from "../MapProvider/hooks";
+import {MapAreaProps, MapControls, MapLegendConfig} from "./interfaces";
+import MapUpdater from "../MapUpdater";
+
+function MapLayerArea({
+  id,
+  base,
+  controls,
+  legends,
+}: {
+  id: string;
+  base?: {
+    url: string;
+    attribution: string;
+  };
+  controls?: MapControls[];
+  legends?: MapLegendConfig;
+}) {
+  const { layers } = useMapLayers();
+
+  return (
+    <>
+      <TileLayer
+        id={id}
+        attribution={
+          base?.attribution ??
+          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy; <a href="https://carto.com/attribution">CARTO</a>'
+        }
+        url={base?.url ?? "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"}
+      />
+      {controls?.map((control) => (
+        <MapControl mapId={id} key={`${control.type}-control`} {...control} />
+      ))}
+      {!isEmpty(layers) && (
+        <LayersControl hideSingleBase position={"topleft"}>
+          {(layers as CustomThematicLayer[]).map((layer: CustomThematicLayer, index) => (
+            <MapLayer key={layer.id} layer={layer} index={index} />
+          ))}
+        </LayersControl>
+      )}
+      {!isEmpty(layers) && <LegendArea legends={legends} layers={layers as CustomThematicLayer[]} position={"topright"} />}
+    </>
+  );
+}
+
+const MapArea = ({ base, controls, mapOptions, key, legends, layers }: MapAreaProps, ref: React.Ref<LeafletMap> | undefined) => {
+  const { center, bounds } = useMapBounds();
+  const { current: id } = useRef<string>(uid());
+
+  return (
+    <div id={`${id}-"map-container`} style={{ height: "100%", width: "100%" }}>
+      <MapContainer
+        attributionControl
+        ref={ref}
+        id={id}
+        center={center}
+        bounceAtZoomLimits
+        bounds={bounds}
+        style={{ height: "100%", width: "100%", minHeight: 500 }}
+        key={key}
+        trackResize
+        {...mapOptions}>
+        <MapUpdater bounds={bounds} />
+        <MapLayersProvider layers={layers}>
+          <MapLayerArea base={base} id={id} controls={controls} legends={legends} />
+        </MapLayersProvider>
+      </MapContainer>
+    </div>
+  );
+};
+
+export default forwardRef(MapArea);

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

@@ -0,0 +1,39 @@
+import {ControlPosition} from "leaflet";
+import type {MapContainerProps} from "react-leaflet";
+import {
+    CustomBoundaryLayer,
+    CustomPointLayer,
+    EarthEngineLayerConfig,
+    ThematicLayerConfig
+} from "../../MapLayer/interfaces";
+
+export interface MapControls {
+  position: ControlPosition;
+  type: "zoom" | "rotate" | "fullscreen" | "compass" | "scale" | "print";
+  options?: Record<string, any>;
+}
+
+export interface MapLegendConfig {
+  enabled: boolean;
+  position: ControlPosition;
+  collapsible: boolean;
+}
+
+export interface MapLayerConfig {
+  thematicLayers?: ThematicLayerConfig[];
+  boundaryLayers?: CustomBoundaryLayer[];
+  pointLayers?: CustomPointLayer[];
+  earthEngineLayers?: EarthEngineLayerConfig[];
+}
+
+export interface MapAreaProps {
+  base?: {
+    url: string;
+    attribution: string;
+  };
+  controls?: MapControls[];
+  mapOptions?: MapContainerProps;
+  legends?: MapLegendConfig;
+  layers: MapLayerConfig;
+  key?: string;
+}

package/src/components/Map/components/MapControls/components/CustomControl/index.tsx

@@ -0,0 +1,24 @@
+import {ControlOptions} from "leaflet";
+import React from "react";
+
+const POSITION_CLASSES = {
+  bottomleft: "leaflet-bottom leaflet-left",
+  bottomright: "leaflet-bottom leaflet-right",
+  topleft: "leaflet-top leaflet-left",
+  topright: "leaflet-top leaflet-right",
+};
+
+interface CustomControlOptions extends ControlOptions {
+  children: React.ReactNode;
+}
+
+export function CustomControl({ children, position, ...options }: CustomControlOptions) {
+  const positionClass = (position && POSITION_CLASSES[position]) || POSITION_CLASSES.topright;
+  return (
+    <div {...options} className={`${positionClass}`}>
+      <div style={{ overflow: "hidden", border: "none" }} className="leaflet-control leaflet-bar">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/Map/components/MapControls/components/DownloadControl/index.tsx

@@ -0,0 +1,11 @@
+import {createControlComponent} from "@react-leaflet/core";
+import L, {ControlPosition} from "leaflet";
+import "leaflet-easyprint";
+import React from "react";
+
+const DownloadControlComponent = createControlComponent((props) => {
+  return (L as any).easyPrint(props);
+});
+export default function DownloadControl({ options, position, mapId }: { options: any; position: ControlPosition; mapId: string }) {
+  return <DownloadControlComponent {...{ ...options, position }} />;
+}

package/src/components/Map/components/MapControls/components/FullscreenControl/index.tsx

@@ -0,0 +1,7 @@
+import {createControlComponent} from "@react-leaflet/core";
+import {control} from "leaflet";
+import "leaflet.fullscreen";
+import "leaflet.fullscreen/Control.FullScreen.css";
+
+const FullscreenControl = createControlComponent((props) => (control as any).fullscreen(props));
+export default FullscreenControl;

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

@@ -0,0 +1,24 @@
+import React from "react";
+import {ScaleControl, ZoomControl} from "react-leaflet";
+import {MapControls} from "../MapArea/interfaces";
+import FullscreenControl from "./components/FullscreenControl";
+import DownloadControl from "./components/DownloadControl";
+
+export interface MapControlProps extends MapControls {
+  mapId: string;
+}
+
+export default function MapControl({ type, options, position, mapId }: MapControlProps) {
+  switch (type) {
+    case "zoom":
+      return <ZoomControl position={position} {...options} />;
+    case "scale":
+      return <ScaleControl position={position} {...options} />;
+    case "fullscreen":
+      return <FullscreenControl position={position} {...options} />;
+    case "print":
+      return <DownloadControl mapId={mapId} position={position} options={options} />;
+    default:
+      return null;
+  }
+}

package/src/components/Map/components/MapLayer/components/BoundaryLayer/hooks/useBoundaryData.ts

@@ -0,0 +1,7 @@
+import {useMapOrganisationUnit} from "../../../../MapProvider/hooks";
+
+export function useBoundaryData() {
+  const { orgUnits } = useMapOrganisationUnit();
+
+  return orgUnits;
+}