@hisptz/dhis2-analytics 1.0.4 → 1.0.6

package/build/es/components/Map/components/EarthEngineLayerConfiguration/index.js

@@ -0,0 +1,448 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { Controller, FormProvider, useForm, useFormContext, 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 { 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";
+function useType() {
+  const type = useWatch({
+    name: "type"
+  });
+  return find(EARTH_ENGINE_LAYERS, ["id", type]);
+}
+function AggregationSelector() {
+  var _config$defaultAggreg;
+  const config = useType();
+  if (!(config !== null && config !== void 0 && config.defaultAggregations)) {
+    return null;
+  }
+  const supportedAggregations = (_config$defaultAggreg = config === null || config === void 0 ? void 0 : config.defaultAggregations) !== null && _config$defaultAggreg !== void 0 ? _config$defaultAggreg : [];
+  const maxAggregations = config === null || config === void 0 ? void 0 : config.maxAggregations;
+  return /*#__PURE__*/React.createElement(Controller, {
+    render: _ref => {
+      var _fieldState$error, _head, _fieldState$error2, _field$value;
+      let {
+        field,
+        fieldState
+      } = _ref;
+      return maxAggregations === 1 ? /*#__PURE__*/React.createElement(SingleSelectField, {
+        clearable: true,
+        error: Boolean(fieldState.error),
+        validationText: fieldState === null || fieldState === void 0 ? void 0 : (_fieldState$error = fieldState.error) === null || _fieldState$error === void 0 ? void 0 : _fieldState$error.message,
+        selected: supportedAggregations.includes((_head = head(field.value)) !== null && _head !== void 0 ? _head : "") ? head(field.value) : undefined,
+        onChange: _ref2 => {
+          let {
+            selected
+          } = _ref2;
+          return field.onChange([selected]);
+        },
+        label: i18n.t("Aggregation")
+      }, supportedAggregations.map(aggregation => /*#__PURE__*/React.createElement(SingleSelectOption, {
+        key: `${aggregation}-option`,
+        label: capitalize(aggregation),
+        value: aggregation
+      }))) : /*#__PURE__*/React.createElement(MultiSelectField, {
+        error: Boolean(fieldState.error),
+        validationText: fieldState === null || fieldState === void 0 ? void 0 : (_fieldState$error2 = fieldState.error) === null || _fieldState$error2 === void 0 ? void 0 : _fieldState$error2.message,
+        selected: (_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.filter(value => supportedAggregations === null || supportedAggregations === void 0 ? void 0 : supportedAggregations.includes(value)),
+        onChange: _ref3 => {
+          let {
+            selected
+          } = _ref3;
+          return field.onChange(selected);
+        },
+        label: i18n.t("Aggregations")
+      }, supportedAggregations.map(aggregation => /*#__PURE__*/React.createElement(MultiSelectOption, {
+        key: `${aggregation}-option`,
+        label: capitalize(aggregation),
+        value: aggregation
+      })));
+    },
+    name: "aggregations"
+  });
+}
+function useDatasetInfo(shouldRun, config) {
+  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 === null || data === void 0 ? void 0 : data.features;
+    return features === null || features === void 0 ? void 0 : features.map(feature => {
+      var _Date;
+      return (_Date = new Date(feature === null || feature === void 0 ? void 0 : feature.properties["system:time_start"])) === null || _Date === void 0 ? void 0 : _Date.getFullYear();
+    });
+  }, [data]);
+  return {
+    loading: isLoading,
+    error: error,
+    periods
+  };
+}
+function PeriodSelector() {
+  var _config$filters;
+  const config = useType();
+  const {
+    setValue,
+    getValues
+  } = useFormContext();
+  const filters = (_config$filters = config === null || config === void 0 ? void 0 : config.filters) !== null && _config$filters !== void 0 ? _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) {
+    var _error$message;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        minWidth: "100%",
+        minHeight: 100
+      }
+    }, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement("p", null, (_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : error === null || error === void 0 ? void 0 : error.toString())));
+  }
+  return /*#__PURE__*/React.createElement(Controller, {
+    name: "filters.period",
+    rules: {
+      required: i18n.t("Period is required")
+    },
+    render: _ref4 => {
+      var _fieldState$error3, _field$value2;
+      let {
+        field,
+        fieldState
+      } = _ref4;
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          gap: 4
+        },
+        className: "row align-items-center"
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          flex: 1
+        }
+      }, /*#__PURE__*/React.createElement(SingleSelectField, {
+        helpText: i18n.t("Available periods are set by the source data"),
+        loading: loading,
+        filterable: true,
+        label: i18n.t("Period"),
+        required: true,
+        error: Boolean(fieldState.error),
+        validationText: (_fieldState$error3 = fieldState.error) === null || _fieldState$error3 === void 0 ? void 0 : _fieldState$error3.message,
+        onChange: _ref5 => {
+          let {
+            selected
+          } = _ref5;
+          return field.onChange(parseInt(selected));
+        },
+        selected: periods !== null && periods !== void 0 && periods.includes(field.value) ? (_field$value2 = field.value) === null || _field$value2 === void 0 ? void 0 : _field$value2.toString() : undefined
+      }, periods === null || periods === void 0 ? void 0 : periods.map(period => /*#__PURE__*/React.createElement(SingleSelectOption, {
+        key: `${period}-option`,
+        value: period.toString(),
+        label: period.toString()
+      })))), loading && /*#__PURE__*/React.createElement(CircularLoader, {
+        extrasmall: true
+      }));
+    }
+  });
+}
+function ColorConfig() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "column gap-16"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "row gap-8"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    render: _ref6 => {
+      var _fieldState$error4, _field$value3;
+      let {
+        field,
+        fieldState
+      } = _ref6;
+      return /*#__PURE__*/React.createElement(InputField, _extends({}, field, {
+        error: Boolean(fieldState.error),
+        validationText: (_fieldState$error4 = fieldState.error) === null || _fieldState$error4 === void 0 ? void 0 : _fieldState$error4.message,
+        value: (_field$value3 = field.value) === null || _field$value3 === void 0 ? void 0 : _field$value3.toString(),
+        onChange: _ref7 => {
+          let {
+            value
+          } = _ref7;
+          return field.onChange(parseInt(value));
+        },
+        label: i18n.t("Min"),
+        type: "number"
+      }));
+    },
+    name: "params.min"
+  }), /*#__PURE__*/React.createElement(Controller, {
+    render: _ref8 => {
+      var _fieldState$error5, _field$value4;
+      let {
+        field,
+        fieldState
+      } = _ref8;
+      return /*#__PURE__*/React.createElement(InputField, _extends({}, field, {
+        error: Boolean(fieldState.error),
+        validationText: (_fieldState$error5 = fieldState.error) === null || _fieldState$error5 === void 0 ? void 0 : _fieldState$error5.message,
+        value: (_field$value4 = field.value) === null || _field$value4 === void 0 ? void 0 : _field$value4.toString(),
+        onChange: _ref9 => {
+          let {
+            value
+          } = _ref9;
+          return field.onChange(parseInt(value));
+        },
+        label: i18n.t("Max"),
+        type: "number"
+      }));
+    },
+    name: "params.max"
+  }), /*#__PURE__*/React.createElement(Controller, {
+    name: "params.palette",
+    render: _ref10 => {
+      var _fieldState$error6, _scale$toString;
+      let {
+        field,
+        fieldState
+      } = _ref10;
+      const palette = field.value;
+      const scale = getColorClasses(palette);
+      const colorClass = getColorScale(palette !== null && palette !== void 0 ? palette : "");
+      const onChange = _ref11 => {
+        var _getColorPalette;
+        let {
+          selected
+        } = _ref11;
+        const palette = (_getColorPalette = getColorPalette(colorClass, parseInt(selected))) === null || _getColorPalette === void 0 ? void 0 : _getColorPalette.join(",");
+        field.onChange(palette);
+      };
+      return /*#__PURE__*/React.createElement(SingleSelectField, {
+        validationText: (_fieldState$error6 = fieldState.error) === null || _fieldState$error6 === void 0 ? void 0 : _fieldState$error6.message,
+        error: Boolean(fieldState.error),
+        selected: (_scale$toString = scale === null || scale === void 0 ? void 0 : scale.toString()) !== null && _scale$toString !== void 0 ? _scale$toString : defaultClasses.toString(),
+        label: i18n.t("Steps"),
+        onChange: onChange,
+        name: "scale"
+      }, [3, 4, 5, 6, 7, 8, 9].map(value => /*#__PURE__*/React.createElement(SingleSelectOption, {
+        key: `${value}-classes-option`,
+        label: `${value}`,
+        value: value === null || value === void 0 ? void 0 : value.toString()
+      })));
+    }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Controller, {
+    name: "params.palette",
+    render: _ref12 => {
+      var _fieldState$error7;
+      let {
+        field,
+        fieldState
+      } = _ref12;
+      const palette = field.value;
+      const scale = getColorClasses(palette);
+      const colorClass = getColorScale(palette !== null && palette !== void 0 ? palette : "");
+      const onChange = colorClass => {
+        var _getColorPalette2;
+        const palette = (_getColorPalette2 = getColorPalette(colorClass, scale)) === null || _getColorPalette2 === void 0 ? void 0 : _getColorPalette2.join(",");
+        field.onChange(palette);
+      };
+      return /*#__PURE__*/React.createElement(Field, {
+        error: Boolean(fieldState.error),
+        validationText: (_fieldState$error7 = fieldState.error) === null || _fieldState$error7 === void 0 ? void 0 : _fieldState$error7.message,
+        label: i18n.t("Colors")
+      }, /*#__PURE__*/React.createElement(ColorScaleSelect, {
+        count: scale !== null && scale !== void 0 ? scale : defaultClasses,
+        colorClass: colorClass !== null && colorClass !== void 0 ? colorClass : defaultColorScaleName,
+        width: 300,
+        onChange: onChange
+      }));
+    }
+  })));
+}
+function StylesConfig() {
+  const config = useType();
+  const hasParams = Boolean(config === null || config === void 0 ? void 0 : config.params);
+  if (!hasParams) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      minWidth: 200,
+      minHeight: 100
+    },
+    className: "row gap-16"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "column"
+  }, /*#__PURE__*/React.createElement("p", null, i18n.t("Unit"), ": ", config === null || config === void 0 ? void 0 : config.unit), /*#__PURE__*/React.createElement(ColorConfig, null)));
+}
+function Name() {
+  const config = useType();
+  const {
+    setValue
+  } = useFormContext();
+  useEffect(() => {
+    setValue("name", config === null || config === void 0 ? void 0 : config.name);
+    setValue("id", config === null || config === void 0 ? void 0 : config.id);
+  }, [config]);
+  return /*#__PURE__*/React.createElement(Controller, {
+    name: "name",
+    rules: {
+      required: i18n.t("Name is required")
+    },
+    render: _ref13 => {
+      var _fieldState$error8;
+      let {
+        field,
+        fieldState
+      } = _ref13;
+      return /*#__PURE__*/React.createElement(InputField, {
+        label: i18n.t("Layer name"),
+        type: "text",
+        required: true,
+        error: Boolean(fieldState.error),
+        validationText: (_fieldState$error8 = fieldState.error) === null || _fieldState$error8 === void 0 ? void 0 : _fieldState$error8.message,
+        onChange: _ref14 => {
+          let {
+            value
+          } = _ref14;
+          return field.onChange(value);
+        },
+        value: field.value
+      });
+    }
+  });
+}
+function TypeField(_ref15) {
+  let {
+    excluded
+  } = _ref15;
+  const supportedLayers = filter(EARTH_ENGINE_LAYERS, _ref16 => {
+    var _excluded$includes;
+    let {
+      id
+    } = _ref16;
+    return SUPPORTED_EARTH_ENGINE_LAYERS.includes(id) && !((_excluded$includes = excluded === null || excluded === void 0 ? void 0 : excluded.includes(id)) !== null && _excluded$includes !== void 0 ? _excluded$includes : false);
+  });
+  const {
+    setValue
+  } = useFormContext();
+  const setConfigDefaults = selected => {
+    const config = find(supportedLayers, ["id", selected]);
+    if (!config) return;
+    if (config !== null && config !== void 0 && config.defaultAggregations) {
+      setValue("aggregations", config === null || config === void 0 ? void 0 : config.defaultAggregations);
+    } else {
+      setValue("aggregations", undefined);
+    }
+    if (config !== null && config !== void 0 && 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 /*#__PURE__*/React.createElement(Controller, {
+    name: "type",
+    rules: {
+      required: i18n.t("Type is required")
+    },
+    render: _ref17 => {
+      var _fieldState$error9;
+      let {
+        field,
+        fieldState
+      } = _ref17;
+      return /*#__PURE__*/React.createElement(SingleSelectField, {
+        label: i18n.t("Layer type"),
+        required: true,
+        error: Boolean(fieldState.error),
+        validationText: (_fieldState$error9 = fieldState.error) === null || _fieldState$error9 === void 0 ? void 0 : _fieldState$error9.message,
+        onChange: _ref18 => {
+          let {
+            selected
+          } = _ref18;
+          setConfigDefaults(selected);
+          field.onChange(selected);
+        },
+        selected: Boolean(find(supportedLayers, "id", field.value)) ? field.value : undefined
+      }, supportedLayers === null || supportedLayers === void 0 ? void 0 : supportedLayers.map(layer => /*#__PURE__*/React.createElement(SingleSelectOption, {
+        key: `${layer.id}-option`,
+        value: layer.id,
+        label: layer.name
+      })));
+    }
+  });
+}
+export function EarthEngineLayerConfiguration(_ref19) {
+  let {
+    form,
+    excluded
+  } = _ref19;
+  return /*#__PURE__*/React.createElement(FormProvider, form, /*#__PURE__*/React.createElement("div", {
+    className: "column gap-16"
+  }, /*#__PURE__*/React.createElement(TypeField, {
+    excluded: excluded
+  }), /*#__PURE__*/React.createElement(Name, null), /*#__PURE__*/React.createElement(AggregationSelector, null), /*#__PURE__*/React.createElement(PeriodSelector, null), /*#__PURE__*/React.createElement(StylesConfig, null)));
+}
+export function EarthEngineLayerConfigModal(_ref20) {
+  let {
+    open,
+    exclude,
+    config,
+    onClose,
+    onChange,
+    ...props
+  } = _ref20;
+  const form = useForm({
+    defaultValues: config !== null && config !== void 0 ? config : {}
+  });
+  const onSubmitClick = values => {
+    onClose();
+    onChange(values);
+  };
+  return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
+    open: open,
+    onClose: onClose
+  }), /*#__PURE__*/React.createElement(ModalTitle, null, i18n.t("Configure Earth Engine Layer")), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(EarthEngineLayerConfiguration, {
+    form: form,
+    excluded: exclude
+  })), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: onClose
+  }, i18n.t("Cancel")), /*#__PURE__*/React.createElement(Button, {
+    primary: true,
+    onClick: form.handleSubmit(onSubmitClick)
+  }, i18n.t("Save")))));
+}

package/build/es/components/Map/components/MapArea/index.js

@@ -0,0 +1,91 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { uid } from "@hisptz/dhis2-utils";
+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 { MapLayersProvider } from "../MapProvider/components/MapLayerProvider";
+import { useMapLayers } from "../MapProvider/hooks";
+import MapUpdater from "../MapUpdater";
+function MapLayerArea(_ref) {
+  var _base$attribution, _base$url;
+  let {
+    id,
+    base,
+    controls,
+    legends
+  } = _ref;
+  const {
+    layers
+  } = useMapLayers();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TileLayer, {
+    id: id,
+    attribution: (_base$attribution = base === null || base === void 0 ? void 0 : base.attribution) !== null && _base$attribution !== void 0 ? _base$attribution : '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy; <a href="https://carto.com/attribution">CARTO</a>',
+    url: (_base$url = base === null || base === void 0 ? void 0 : base.url) !== null && _base$url !== void 0 ? _base$url : "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
+  }), controls === null || controls === void 0 ? void 0 : controls.map(control => /*#__PURE__*/React.createElement(MapControl, _extends({
+    mapId: id,
+    key: `${control.type}-control`
+  }, control))), !isEmpty(layers) && /*#__PURE__*/React.createElement(LayersControl, {
+    hideSingleBase: true,
+    position: "topleft"
+  }, layers.map((layer, index) => /*#__PURE__*/React.createElement(MapLayer, {
+    key: layer.id,
+    layer: layer,
+    index: index
+  }))), !isEmpty(layers) && /*#__PURE__*/React.createElement(LegendArea, {
+    legends: legends,
+    layers: layers,
+    position: "topright"
+  }));
+}
+const MapArea = (_ref2, ref) => {
+  let {
+    base,
+    controls,
+    mapOptions,
+    key,
+    legends,
+    layers
+  } = _ref2;
+  const {
+    center,
+    bounds
+  } = useMapBounds();
+  const {
+    current: id
+  } = useRef(uid());
+  return /*#__PURE__*/React.createElement("div", {
+    id: `${id}-"map-container`,
+    style: {
+      height: "100%",
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(MapContainer, _extends({
+    attributionControl: true,
+    ref: ref,
+    id: id,
+    center: center,
+    bounceAtZoomLimits: true,
+    bounds: bounds,
+    style: {
+      height: "100%",
+      width: "100%",
+      minHeight: 500
+    },
+    key: key,
+    trackResize: true
+  }, mapOptions), /*#__PURE__*/React.createElement(MapUpdater, {
+    bounds: bounds
+  }), /*#__PURE__*/React.createElement(MapLayersProvider, {
+    layers: layers
+  }, /*#__PURE__*/React.createElement(MapLayerArea, {
+    base: base,
+    id: id,
+    controls: controls,
+    legends: legends
+  }))));
+};
+export default /*#__PURE__*/forwardRef(MapArea);

package/build/es/components/Map/components/MapArea/interfaces/index.js

@@ -0,0 +1 @@
+export {};

package/build/es/components/Map/components/MapControls/components/CustomControl/index.js

@@ -0,0 +1,25 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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"
+};
+export function CustomControl(_ref) {
+  let {
+    children,
+    position,
+    ...options
+  } = _ref;
+  const positionClass = position && POSITION_CLASSES[position] || POSITION_CLASSES.topright;
+  return /*#__PURE__*/React.createElement("div", _extends({}, options, {
+    className: `${positionClass}`
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      overflow: "hidden",
+      border: "none"
+    },
+    className: "leaflet-control leaflet-bar"
+  }, children));
+}

package/build/es/components/Map/components/MapControls/components/DownloadControl/index.js

@@ -0,0 +1,18 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from "react";
+import { createControlComponent } from "@react-leaflet/core";
+import L from "leaflet";
+import "leaflet-easyprint";
+const DownloadControlComponent = createControlComponent(props => {
+  return L.easyPrint(props);
+});
+export default function DownloadControl(_ref) {
+  let {
+    options,
+    position,
+    mapId
+  } = _ref;
+  return /*#__PURE__*/React.createElement(DownloadControlComponent, _extends({}, options, {
+    position
+  }));
+}

package/build/es/components/Map/components/MapControls/components/FullscreenControl/index.js

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

package/build/es/components/Map/components/MapControls/index.js

@@ -0,0 +1,35 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from "react";
+import { ScaleControl, ZoomControl } from "react-leaflet";
+import FullscreenControl from "./components/FullscreenControl";
+import DownloadControl from "./components/DownloadControl";
+export default function MapControl(_ref) {
+  let {
+    type,
+    options,
+    position,
+    mapId
+  } = _ref;
+  switch (type) {
+    case "zoom":
+      return /*#__PURE__*/React.createElement(ZoomControl, _extends({
+        position: position
+      }, options));
+    case "scale":
+      return /*#__PURE__*/React.createElement(ScaleControl, _extends({
+        position: position
+      }, options));
+    case "fullscreen":
+      return /*#__PURE__*/React.createElement(FullscreenControl, _extends({
+        position: position
+      }, options));
+    case "print":
+      return /*#__PURE__*/React.createElement(DownloadControl, {
+        mapId: mapId,
+        position: position,
+        options: options
+      });
+    default:
+      return null;
+  }
+}

package/build/es/components/Map/components/MapLayer/components/BoundaryLayer/hooks/useBoundaryData.js

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

package/build/es/components/Map/components/MapLayer/components/BoundaryLayer/index.js

@@ -0,0 +1,41 @@
+import i18n from "@dhis2/d2-i18n";
+import { colors } from "@dhis2/ui";
+import React from "react";
+import { GeoJSON, LayerGroup, LayersControl, Popup, Tooltip } from "react-leaflet";
+import { highlightFeature, resetHighlight } from "../../../../utils/map";
+import { useBoundaryData } from "./hooks/useBoundaryData";
+export const defaultStyle = {
+  weight: 1,
+  color: colors.grey900,
+  fillColor: colors.grey900,
+  fillOpacity: 0.0
+};
+export const highlightStyle = {
+  weight: 2,
+  color: colors.grey900,
+  dashArray: "",
+  fillOpacity: 0.1
+};
+export default function BoundaryLayer(props) {
+  const {
+    enabled
+  } = props !== null && props !== void 0 ? props : {};
+  const orgUnits = useBoundaryData();
+  return /*#__PURE__*/React.createElement(LayersControl.Overlay, {
+    checked: enabled,
+    name: i18n.t("Boundaries")
+  }, /*#__PURE__*/React.createElement(LayerGroup, null, orgUnits === null || orgUnits === void 0 ? void 0 : orgUnits.map(area => {
+    return /*#__PURE__*/React.createElement(GeoJSON, {
+      data: area.geoJSON,
+      interactive: true,
+      eventHandlers: {
+        mouseover: e => highlightFeature(e, highlightStyle),
+        mouseout: e => resetHighlight(e, defaultStyle)
+      },
+      key: `${area.id}-polygon`,
+      pathOptions: defaultStyle
+    }, /*#__PURE__*/React.createElement(Tooltip, null, area.name), /*#__PURE__*/React.createElement(Popup, {
+      minWidth: 80
+    }, /*#__PURE__*/React.createElement("h3", null, area.name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Level: "), area.level)));
+  })));
+}