@hisptz/dhis2-analytics 1.0.65 → 2.0.0-alpha.0

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

@@ -1,171 +0,0 @@
-import { colors, IconLegend24, Popper, Portal } from "@dhis2/ui";
-import { compact, head } from "lodash";
-import React, { useEffect, useRef, useState } from "react";
-import { CustomControl } from "../../../MapControls/components/CustomControl";
-import { SUPPORTED_EARTH_ENGINE_LAYERS } from "../../interfaces";
-import PointLegend from "../PointLayer/components/PointLegend";
-import BubbleLegend from "../ThematicLayer/components/Bubble/components/BubbleLegend";
-import ChoroplethLegend from "../ThematicLayer/components/Choropleth/components/ChoroplethLegend";
-import EarthEngineLegend from "../GoogleEngineLayer/components/EarthEngineLegend";
-import classes from "./LegendArea.module.css";
-import { usePrintMedia } from "../../../../hooks/map";
-const TOOLTIP_OFFSET = 4;
-function getLegendComponent(layer) {
-  var _ref, _radius, _head$dataItem, _head, _head$dataItem2, _head2;
-  if (layer.type === "point") {
-    return /*#__PURE__*/React.createElement(PointLegend, {
-      name: layer.label
-    });
-  }
-  if (SUPPORTED_EARTH_ENGINE_LAYERS.includes(layer.type)) {
-    var _layer$name;
-    return /*#__PURE__*/React.createElement(EarthEngineLegend, {
-      name: (_layer$name = layer.name) !== null && _layer$name !== void 0 ? _layer$name : "",
-      layer: layer
-    });
-  }
-  const {
-    type,
-    enabled,
-    control,
-    dataItem,
-    name,
-    data,
-    legends
-  } = (_ref = layer) !== null && _ref !== void 0 ? _ref : {};
-  if (!enabled || !control) {
-    return null;
-  }
-  switch (type) {
-    case "bubble":
-      return /*#__PURE__*/React.createElement(BubbleLegend, {
-        radius: (_radius = layer === null || layer === void 0 ? void 0 : layer.radius) !== null && _radius !== void 0 ? _radius : {
-          min: 0,
-          max: 50
-        },
-        legends: legends !== null && legends !== void 0 ? legends : [],
-        name: name !== null && name !== void 0 ? name : dataItem.displayName,
-        data: data,
-        dataItem: (_head$dataItem = (_head = head(data)) === null || _head === void 0 ? void 0 : _head.dataItem) !== null && _head$dataItem !== void 0 ? _head$dataItem : dataItem
-      });
-    case "choropleth":
-      return /*#__PURE__*/React.createElement(ChoroplethLegend, {
-        legends: legends !== null && legends !== void 0 ? legends : [],
-        name: name !== null && name !== void 0 ? name : dataItem.displayName,
-        data: data,
-        dataItem: (_head$dataItem2 = (_head2 = head(data)) === null || _head2 === void 0 ? void 0 : _head2.dataItem) !== null && _head$dataItem2 !== void 0 ? _head$dataItem2 : dataItem
-      });
-  }
-}
-function CollapsedLegendIcon(_ref2) {
-  let {
-    onCollapse,
-    name
-  } = _ref2;
-  const openDelay = 200;
-  const closeDelay = 200;
-  const [openTooltip, setOpenTooltip] = useState(false);
-  const openTimerRef = useRef(null);
-  const closeTimerRef = useRef(null);
-  const ref = useRef(null);
-  const hideModifier = {
-    name: "hide"
-  };
-  const offsetModifier = {
-    name: "offset",
-    options: {
-      offset: [0, TOOLTIP_OFFSET]
-    }
-  };
-  const flipModifier = {
-    name: "flip",
-    options: {
-      altBoundary: true
-    }
-  };
-  const onMouseOver = () => {
-    clearTimeout(closeTimerRef.current);
-    openTimerRef.current = setTimeout(() => {
-      setOpenTooltip(true);
-    }, openDelay);
-  };
-  const onMouseOut = () => {
-    clearTimeout(openTimerRef.current);
-    closeTimerRef.current = setTimeout(() => {
-      setOpenTooltip(false);
-    }, closeDelay);
-  };
-  useEffect(() => () => {
-    clearTimeout(openTimerRef.current);
-    clearTimeout(closeTimerRef.current);
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut,
-    onClick: onCollapse,
-    style: {
-      width: 28,
-      height: 28
-    },
-    className: "legend-card collapsed"
-  }, /*#__PURE__*/React.createElement(IconLegend24, null), openTooltip && /*#__PURE__*/React.createElement(Portal, {
-    className: classes["map-tooltip"]
-  }, /*#__PURE__*/React.createElement(Popper, {
-    className: classes["map-tooltip"],
-    reference: ref,
-    modifiers: [offsetModifier, flipModifier, hideModifier]
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: `${colors.grey900}`,
-      borderRadius: 3,
-      color: `${colors.white}`,
-      padding: "4px 6px"
-    },
-    "data-test": `content`
-  }, name))));
-}
-function Legend(_ref3) {
-  var _head3;
-  let {
-    children,
-    collapsible
-  } = _ref3;
-  const [collapsed, setCollapsed] = useState(collapsible);
-  const inPrintMode = usePrintMedia();
-  const onCollapse = () => {
-    if (collapsible) {
-      setCollapsed(prevState => !prevState);
-    }
-  };
-  const name = (_head3 = head(React.Children.toArray(children))) === null || _head3 === void 0 ? void 0 : _head3.props.name;
-  const shouldCollapse = collapsed && !inPrintMode;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-100"
-  }, shouldCollapse ? /*#__PURE__*/React.createElement(CollapsedLegendIcon, {
-    name: name,
-    onCollapse: onCollapse
-  }) : React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
-    collapsible,
-    onCollapse
-  })));
-}
-export default function LegendArea(_ref4) {
-  let {
-    layers,
-    legends: legendConfig
-  } = _ref4;
-  const legends = compact(layers.filter(layer => layer.enabled).map(getLegendComponent));
-  const {
-    position,
-    collapsible
-  } = legendConfig !== null && legendConfig !== void 0 ? legendConfig : {};
-  return /*#__PURE__*/React.createElement(CustomControl, {
-    position: position
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "column gap-16 align-items-end"
-  }, legends === null || legends === void 0 ? void 0 : legends.map((legend, index) => /*#__PURE__*/React.createElement(Legend, {
-    collapsible: collapsible !== null && collapsible !== void 0 ? collapsible : true,
-    key: `${index}-map-legend`
-  }, legend))));
-}

package/build/es/components/Map/components/MapLayer/components/PointLayer/components/PointLegend/index.js

@@ -1,76 +0,0 @@
-import { useConfig } from "@dhis2/app-runtime";
-import { Divider } from "@dhis2/ui";
-import React, { forwardRef } from "react";
-import { getIconUrl } from "../../../../../../utils/helpers";
-import LegendCardHeader from "../../../LegendArea/components/LegendCardHeader";
-import { usePointLayer } from "../../hooks";
-function PointLegends(_ref) {
-  let {
-    orgUnitGroups,
-    icon,
-    label
-  } = _ref;
-  const {
-    baseUrl
-  } = useConfig();
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      minWidth: 100,
-      alignItems: "flex-start"
-    },
-    className: "w-100 p-8 legend-list column"
-  }, icon && /*#__PURE__*/React.createElement("div", {
-    key: `${icon}-legend`,
-    className: "row gap-16  align-items-center"
-  }, /*#__PURE__*/React.createElement("img", {
-    height: 20,
-    width: 20,
-    alt: `${name}-icon`,
-    src: getIconUrl(icon, {
-      baseUrl
-    })
-  }), /*#__PURE__*/React.createElement("p", null, label)), orgUnitGroups.map(_ref2 => {
-    let {
-      name,
-      symbol
-    } = _ref2;
-    return /*#__PURE__*/React.createElement("div", {
-      key: `${name}-legend`,
-      className: "row gap-16  align-items-center"
-    }, /*#__PURE__*/React.createElement("img", {
-      height: 20,
-      width: 20,
-      alt: `${name}-icon`,
-      src: getIconUrl(symbol !== null && symbol !== void 0 ? symbol : "", {
-        baseUrl
-      })
-    }), /*#__PURE__*/React.createElement("p", null, name));
-  }));
-}
-function PointLegend(_ref3, ref) {
-  var _style$orgUnitGroups;
-  let {
-    collapsible,
-    onCollapse
-  } = _ref3;
-  const pointLayer = usePointLayer();
-  const {
-    label,
-    style
-  } = pointLayer !== null && pointLayer !== void 0 ? pointLayer : {};
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: "legend-card"
-  }, /*#__PURE__*/React.createElement(LegendCardHeader, {
-    collapsible: collapsible,
-    onCollapse: onCollapse,
-    title: label !== null && label !== void 0 ? label : "Points"
-  }), /*#__PURE__*/React.createElement(Divider, {
-    margin: "0"
-  }), /*#__PURE__*/React.createElement(PointLegends, {
-    label: label,
-    orgUnitGroups: (_style$orgUnitGroups = style === null || style === void 0 ? void 0 : style.orgUnitGroups) !== null && _style$orgUnitGroups !== void 0 ? _style$orgUnitGroups : [],
-    icon: style === null || style === void 0 ? void 0 : style.icon
-  }));
-}
-export default /*#__PURE__*/forwardRef(PointLegend);

package/build/es/components/Map/components/MapLayer/components/PointLayer/hooks/index.js

@@ -1,8 +0,0 @@
-import { find } from "lodash";
-import { useMapLayers } from "../../../../MapProvider/hooks";
-export function usePointLayer() {
-  const {
-    layers
-  } = useMapLayers();
-  return find(layers, ["type", "point"]);
-}

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

@@ -1,39 +0,0 @@
-import { useConfig } from "@dhis2/app-runtime";
-import i18n from "@dhis2/d2-i18n";
-import L from "leaflet";
-import React from "react";
-import { GeoJSON, LayerGroup, LayersControl, Popup, Tooltip } from "react-leaflet";
-import { getIcon, getIconUrl } from "../../../../utils/helpers";
-import { usePointLayer } from "./hooks";
-export function PointLayer() {
-  const pointLayer = usePointLayer();
-  const {
-    enabled,
-    label,
-    points: orgUnits,
-    style
-  } = pointLayer !== null && pointLayer !== void 0 ? pointLayer : {};
-  const {
-    baseUrl
-  } = useConfig();
-  return /*#__PURE__*/React.createElement(LayersControl.Overlay, {
-    checked: enabled,
-    name: label !== null && label !== void 0 ? label : i18n.t("Points")
-  }, /*#__PURE__*/React.createElement(LayerGroup, null, orgUnits === null || orgUnits === void 0 ? void 0 : orgUnits.map(area => {
-    return /*#__PURE__*/React.createElement(GeoJSON, {
-      pointToLayer: (_, coordinates) => {
-        var _area$icon$icon;
-        return L.marker(coordinates, {
-          icon: getIcon(getIconUrl((_area$icon$icon = area.icon.icon) !== null && _area$icon$icon !== void 0 ? _area$icon$icon : style === null || style === void 0 ? void 0 : style.icon, {
-            baseUrl
-          }))
-        });
-      },
-      data: area.geoJSON,
-      interactive: true,
-      key: `${area.id}-polygon`
-    }, /*#__PURE__*/React.createElement(Tooltip, null, area.name), /*#__PURE__*/React.createElement(Popup, {
-      minWidth: 80
-    }, /*#__PURE__*/React.createElement("h3", null, area.name)));
-  })));
-}

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubble.js

@@ -1,49 +0,0 @@
-import React from "react";
-import { guideLength, textPadding } from "./Bubbles";
-const Bubble = _ref => {
-  let {
-    radius,
-    maxRadius,
-    text,
-    textAlign,
-    color,
-    stroke,
-    pattern
-  } = _ref;
-  const leftAlign = textAlign === "left";
-  const x = maxRadius;
-  const y = maxRadius * 2 - radius;
-  const x2 = leftAlign ? x - maxRadius - guideLength : x + maxRadius + guideLength;
-  const y2 = maxRadius * 2 - radius * 2;
-  const textX = x2 + (leftAlign ? -textPadding : textPadding);
-  const textAnchor = leftAlign ? "end" : "start";
-  return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("circle", {
-    cx: x,
-    cy: y,
-    r: radius,
-    stroke: stroke || "#000",
-    style: {
-      fill: pattern ? `url(#${pattern})` : color || "none",
-      strokeWidth: 0.5
-    }
-  }), text && /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
-    x1: x,
-    x2: x2,
-    y1: y2,
-    y2: y2,
-    stroke: "black",
-    style: {
-      strokeDasharray: "2, 2",
-      strokeWidth: 0.5
-    }
-  }), /*#__PURE__*/React.createElement("text", {
-    x: textX,
-    y: y2,
-    textAnchor: textAnchor,
-    alignmentBaseline: "middle",
-    style: {
-      fontSize: 12
-    }
-  }, text)));
-};
-export default Bubble;

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubbles.js

@@ -1,133 +0,0 @@
-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 i18n from "@dhis2/d2-i18n";
-import { scaleSqrt } from "d3-scale";
-import { reduce } from "lodash";
-import React, { memo } from "react";
-import { getContrastColor } from "../../../../../../../../../utils/colors";
-import { getLongestTextLength } from "../../../../../../../../../utils/helpers";
-import Bubble from "./Bubble";
-const style = {
-  paddingTop: 10,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center"
-};
-const legendWidth = 200;
-const digitWidth = 6.8;
-export const guideLength = 16;
-export const textPadding = 4;
-const Bubbles = _ref => {
-  let {
-    radiusLow,
-    radiusHigh,
-    color,
-    classes
-  } = _ref;
-  const height = radiusHigh * 2 + 4;
-  const scale = scaleSqrt().range([radiusLow, radiusHigh]);
-  const radiusMid = scale(0.5);
-  if (isNaN(radiusLow) || isNaN(radiusHigh)) {
-    return null;
-  }
-  let bubbles = [];
-
-  // If color legend
-  if (Array.isArray(classes) && classes.length) {
-    const startValue = classes[0].startValue;
-    const endValue = classes[classes.length - 1].endValue;
-    const itemScale = scale.domain([startValue, endValue]);
-    bubbles = [...classes].reverse().map(c => ({
-      radius: itemScale(c.endValue),
-      maxRadius: radiusHigh,
-      color: c.color,
-      text: String(c.endValue)
-    }));
-
-    // Add the smallest bubble for the lowest value
-    bubbles.push({
-      radius: itemScale(startValue),
-      maxRadius: radiusHigh,
-      text: String(startValue)
-    });
-  } else {
-    // If single color
-    const stroke = color && getContrastColor(color);
-    bubbles = [{
-      radius: radiusHigh,
-      maxRadius: radiusHigh,
-      color,
-      stroke,
-      text: i18n.t("Max")
-    }, {
-      radius: radiusMid,
-      maxRadius: radiusHigh,
-      color,
-      stroke,
-      text: i18n.t("Mid")
-    }, {
-      radius: radiusLow,
-      maxRadius: radiusHigh,
-      color,
-      stroke,
-      text: i18n.t("Min")
-    }];
-  }
-
-  // Calculate the pixel length of the longest number
-  let textLength = Math.ceil(Math.max(getLongestTextLength(classes, "startValue"), getLongestTextLength(classes, "endValue")) * digitWidth);
-
-  // Calculate the total length if numbers are alternate on each side
-  const alternateLength = (radiusHigh + guideLength + textPadding + textLength) * 2;
-  let smallestGap = reduce(bubbles, (prev, curr, i) => {
-    const gap = prev.radius - curr.radius;
-    const smallestGap = prev.gap === undefined || gap < prev.gap ? gap : prev.gap;
-    return i === bubbles.length - 1 ? Math.round(smallestGap * 2) : {
-      radius: curr.radius,
-      gap: smallestGap
-    };
-  });
-  const alternateFit = alternateLength < legendWidth;
-  const alternate = alternateFit && smallestGap > 5 && smallestGap < 12;
-  if (!alternateFit) {
-    smallestGap = smallestGap / 2;
-  }
-
-  // Too cramped to show number for each bubble
-  if (smallestGap < 4) {
-    const [maxBubble] = bubbles;
-    const minBubble = bubbles[bubbles.length - 1];
-    const gap = maxBubble.radius - minBubble.radius;
-    const showNumbers = [0]; // Always show the largest number
-
-    if (gap > 4) {
-      showNumbers.push(bubbles.length - 1);
-    }
-    if (gap > 15) {
-      const midRadius = minBubble.radius + gap / 2;
-
-      // Find the closest bubble above the mid-radius
-      const midBubble = bubbles.reduce((prev, curr) => curr.radius >= midRadius && curr.radius - midRadius < prev.radius - midRadius ? curr : prev);
-      showNumbers.push(bubbles.indexOf(midBubble));
-    }
-    bubbles.forEach((b, i) => {
-      if (!showNumbers.includes(i)) {
-        delete b.text;
-      }
-    });
-  }
-  textLength = Math.ceil(getLongestTextLength(bubbles, "text") * digitWidth);
-  const offset = textLength + guideLength + textPadding;
-  return /*#__PURE__*/React.createElement("div", {
-    style: style
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: legendWidth,
-    height: height + 50
-  }, /*#__PURE__*/React.createElement("g", {
-    transform: `translate(${alternate ? offset : "16"} 24)`
-  }, bubbles.map((bubble, i) => /*#__PURE__*/React.createElement(Bubble, _extends({
-    key: i
-  }, bubble, {
-    textAlign: alternate && i % 2 == 0 ? "left" : "right"
-  }))))));
-};
-export default /*#__PURE__*/memo(Bubbles);

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/index.js

@@ -1,33 +0,0 @@
-import { Divider } from "@dhis2/ui";
-import React, { forwardRef } from "react";
-import LegendCardHeader from "../../../../../LegendArea/components/LegendCardHeader";
-import Bubbles from "./components/Bubbles";
-function BubbleLegend(_ref, ref) {
-  let {
-    radius,
-    dataItem,
-    data,
-    name,
-    collapsible,
-    onCollapse,
-    legends
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "legend-card",
-    ref: ref
-  }, /*#__PURE__*/React.createElement(LegendCardHeader, {
-    title: dataItem.displayName,
-    onCollapse: onCollapse,
-    collapsible: collapsible
-  }), /*#__PURE__*/React.createElement(Divider, {
-    margin: "0"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "legend-list pt-8"
-  }, /*#__PURE__*/React.createElement(Bubbles, {
-    classes: legends.reverse(),
-    radiusHigh: radius.max,
-    radiusLow: radius.min,
-    color: "#FF0000"
-  })));
-}
-export default /*#__PURE__*/forwardRef(BubbleLegend);

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/index.js

@@ -1,47 +0,0 @@
-import { colors } from "@dhis2/ui";
-import { geoJSON } from "leaflet";
-import React, { useMemo } from "react";
-import { CircleMarker } from "react-leaflet";
-import { getColorFromLegendSet, highlightFeature, resetHighlight } from "../../../../../../utils/map";
-import CustomTooltip from "../CustomTooltip";
-const defaultStyle = {
-  weight: 1
-};
-const highlightStyle = {
-  weight: 2
-};
-export default function Bubble(_ref) {
-  let {
-    data,
-    highestData,
-    legends,
-    radius
-  } = _ref;
-  const {
-    orgUnit,
-    data: value
-  } = data !== null && data !== void 0 ? data : {};
-  const geoJSONObject = orgUnit.geoJSON;
-  const center = geoJSON(geoJSONObject).getBounds().getCenter();
-  const circleRadius = useMemo(() => {
-    var _radius$max;
-    return (value !== null && value !== void 0 ? value : 0) * ((_radius$max = radius === null || radius === void 0 ? void 0 : radius.max) !== null && _radius$max !== void 0 ? _radius$max : 50) / highestData;
-  }, [radius, data, highestData]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CircleMarker, {
-    interactive: true,
-    eventHandlers: {
-      mouseover: e => highlightFeature(e, highlightStyle),
-      mouseout: e => resetHighlight(e, defaultStyle)
-    },
-    pathOptions: {
-      fillColor: getColorFromLegendSet(legends, data.data),
-      fillOpacity: 1,
-      color: colors.grey900,
-      weight: 1
-    },
-    radius: circleRadius,
-    center: center
-  }, /*#__PURE__*/React.createElement(CustomTooltip, {
-    data: data
-  })));
-}

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/components/ChoroplethLegend.js

@@ -1,50 +0,0 @@
-import "../../../styles/legends.css";
-import { Divider } from "@dhis2/ui";
-import React, { forwardRef } from "react";
-import { getLegendCount } from "../../../../../../../utils/map";
-import LegendCardHeader from "../../../../LegendArea/components/LegendCardHeader";
-export function LegendItem(_ref) {
-  let {
-    legend,
-    value
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "legend-item"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "legend-item-color",
-    style: {
-      backgroundColor: legend.color
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "legend-item-label"
-  }, `${legend.startValue} - ${legend.endValue}`), /*#__PURE__*/React.createElement("div", {
-    className: "legend-item-value"
-  }, `(${value})`));
-}
-function ChoroplethLegend(_ref2, ref) {
-  let {
-    dataItem,
-    data,
-    name,
-    collapsible,
-    onCollapse,
-    legends
-  } = _ref2;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "legend-card",
-    ref: ref
-  }, /*#__PURE__*/React.createElement(LegendCardHeader, {
-    title: dataItem.displayName,
-    collapsible: collapsible,
-    onCollapse: onCollapse
-  }), /*#__PURE__*/React.createElement(Divider, {
-    margin: "0"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "legend-list pt-8"
-  }, legends === null || legends === void 0 ? void 0 : legends.map(legend => /*#__PURE__*/React.createElement(LegendItem, {
-    key: `${legend === null || legend === void 0 ? void 0 : legend.color}-legend-list`,
-    legend: legend,
-    value: getLegendCount(legend, data)
-  }))));
-}
-export default /*#__PURE__*/forwardRef(ChoroplethLegend);

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/index.js

@@ -1,36 +0,0 @@
-import { colors } from "@dhis2/ui";
-import React from "react";
-import { GeoJSON } from "react-leaflet";
-import { getColorFromLegendSet, highlightFeature, resetHighlight } from "../../../../../../utils/map";
-import CustomTooltip from "../CustomTooltip";
-const defaultStyle = {
-  weight: 1
-};
-const highlightStyle = {
-  weight: 2
-};
-export default function Choropleth(_ref) {
-  let {
-    data,
-    legends
-  } = _ref;
-  const {
-    orgUnit
-  } = data;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GeoJSON, {
-    data: orgUnit.geoJSON,
-    eventHandlers: {
-      mouseover: e => highlightFeature(e, highlightStyle),
-      mouseout: e => resetHighlight(e, defaultStyle)
-    },
-    pathOptions: {
-      fillColor: getColorFromLegendSet(legends, data.data),
-      fillOpacity: 1,
-      color: colors.grey900,
-      weight: 1
-    },
-    key: `${data.dataItem.id}-layer`
-  }, /*#__PURE__*/React.createElement(CustomTooltip, {
-    data: data
-  })));
-}

package/build/es/components/Map/components/MapLayer/components/ThematicLayer/components/CustomTooltip/index.js

@@ -1,28 +0,0 @@
-import i18n from "@dhis2/d2-i18n";
-import React from "react";
-import { Pane, Popup, Tooltip } from "react-leaflet";
-import { useMapPeriods } from "../../../../../MapProvider/hooks";
-export default function CustomTooltip(_ref) {
-  var _useMapPeriods;
-  let {
-    data: dataObject
-  } = _ref;
-  const {
-    dataItem,
-    orgUnit,
-    data
-  } = dataObject !== null && dataObject !== void 0 ? dataObject : {};
-  const {
-    periods
-  } = (_useMapPeriods = useMapPeriods()) !== null && _useMapPeriods !== void 0 ? _useMapPeriods : {};
-  return /*#__PURE__*/React.createElement(Pane, {
-    name: `${dataItem.displayName}-${orgUnit.id}-popup-pane`,
-    pane: "popupPane"
-  }, /*#__PURE__*/React.createElement(Tooltip, null, orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.name, " (", data, ")"), /*#__PURE__*/React.createElement(Popup, {
-    minWidth: 80
-  }, /*#__PURE__*/React.createElement("h3", {
-    style: {
-      margin: 0
-    }
-  }, orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.name), /*#__PURE__*/React.createElement("div", null, dataItem === null || dataItem === void 0 ? void 0 : dataItem.displayName), /*#__PURE__*/React.createElement("div", null, periods === null || periods === void 0 ? void 0 : periods.map(period => period.name).join(",")), /*#__PURE__*/React.createElement("div", null, i18n.t("Value"), ": ", data)));
-}