@hisptz/dhis2-analytics 1.0.5 → 1.0.7

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

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = LegendArea;
+var _ui = require("@dhis2/ui");
+var _lodash = require("lodash");
+var _react = _interopRequireWildcard(require("react"));
+var _CustomControl = require("../../../MapControls/components/CustomControl");
+var _interfaces = require("../../interfaces");
+var _PointLegend = _interopRequireDefault(require("../PointLayer/components/PointLegend"));
+var _BubbleLegend = _interopRequireDefault(require("../ThematicLayer/components/Bubble/components/BubbleLegend"));
+var _ChoroplethLegend = _interopRequireDefault(require("../ThematicLayer/components/Choropleth/components/ChoroplethLegend"));
+var _EarthEngineLegend = _interopRequireDefault(require("../GoogleEngineLayer/components/EarthEngineLegend"));
+var _LegendAreaModule = _interopRequireDefault(require("./LegendArea.module.css"));
+var _map = require("../../../../hooks/map");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const TOOLTIP_OFFSET = 4;
+function getLegendComponent(layer) {
+  var _ref, _radius, _head$dataItem, _head, _head$dataItem2, _head2;
+  if (layer.type === "point") {
+    return /*#__PURE__*/_react.default.createElement(_PointLegend.default, {
+      name: layer.label
+    });
+  }
+  if (_interfaces.SUPPORTED_EARTH_ENGINE_LAYERS.includes(layer.type)) {
+    var _layer$name;
+    return /*#__PURE__*/_react.default.createElement(_EarthEngineLegend.default, {
+      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.default.createElement(_BubbleLegend.default, {
+        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 = (0, _lodash.head)(data)) === null || _head === void 0 ? void 0 : _head.dataItem) !== null && _head$dataItem !== void 0 ? _head$dataItem : dataItem
+      });
+    case "choropleth":
+      return /*#__PURE__*/_react.default.createElement(_ChoroplethLegend.default, {
+        legends: legends !== null && legends !== void 0 ? legends : [],
+        name: name !== null && name !== void 0 ? name : dataItem.displayName,
+        data: data,
+        dataItem: (_head$dataItem2 = (_head2 = (0, _lodash.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] = (0, _react.useState)(false);
+  const openTimerRef = (0, _react.useRef)(null);
+  const closeTimerRef = (0, _react.useRef)(null);
+  const ref = (0, _react.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);
+  };
+  (0, _react.useEffect)(() => () => {
+    clearTimeout(openTimerRef.current);
+    clearTimeout(closeTimerRef.current);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    onMouseOver: onMouseOver,
+    onMouseOut: onMouseOut,
+    onClick: onCollapse,
+    style: {
+      width: 28,
+      height: 28
+    },
+    className: "legend-card collapsed"
+  }, /*#__PURE__*/_react.default.createElement(_ui.IconLegend24, null), openTooltip && /*#__PURE__*/_react.default.createElement(_ui.Portal, {
+    className: _LegendAreaModule.default["map-tooltip"]
+  }, /*#__PURE__*/_react.default.createElement(_ui.Popper, {
+    className: _LegendAreaModule.default["map-tooltip"],
+    reference: ref,
+    modifiers: [offsetModifier, flipModifier, hideModifier]
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      backgroundColor: `${_ui.colors.grey900}`,
+      borderRadius: 3,
+      color: `${_ui.colors.white}`,
+      padding: "4px 6px"
+    },
+    "data-test": `content`
+  }, name))));
+}
+function Legend(_ref3) {
+  var _head3;
+  let {
+    children,
+    collapsible
+  } = _ref3;
+  const [collapsed, setCollapsed] = (0, _react.useState)(collapsible);
+  const inPrintMode = (0, _map.usePrintMedia)();
+  const onCollapse = () => {
+    if (collapsible) {
+      setCollapsed(prevState => !prevState);
+    }
+  };
+  const name = (_head3 = (0, _lodash.head)(_react.default.Children.toArray(children))) === null || _head3 === void 0 ? void 0 : _head3.props.name;
+  const shouldCollapse = collapsed && !inPrintMode;
+  console.log(inPrintMode);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "w-100"
+  }, shouldCollapse ? /*#__PURE__*/_react.default.createElement(CollapsedLegendIcon, {
+    name: name,
+    onCollapse: onCollapse
+  }) : _react.default.Children.map(children, child => /*#__PURE__*/_react.default.cloneElement(child, {
+    collapsible,
+    onCollapse
+  })));
+}
+function LegendArea(_ref4) {
+  let {
+    layers,
+    legends: legendConfig
+  } = _ref4;
+  const legends = (0, _lodash.compact)(layers.filter(layer => layer.enabled).map(getLegendComponent));
+  const {
+    position,
+    collapsible
+  } = legendConfig !== null && legendConfig !== void 0 ? legendConfig : {};
+  return /*#__PURE__*/_react.default.createElement(_CustomControl.CustomControl, {
+    position: position
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "column gap-16 align-items-end"
+  }, legends === null || legends === void 0 ? void 0 : legends.map((legend, index) => /*#__PURE__*/_react.default.createElement(Legend, {
+    collapsible: collapsible !== null && collapsible !== void 0 ? collapsible : true,
+    key: `${index}-map-legend`
+  }, legend))));
+}

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

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _appRuntime = require("@dhis2/app-runtime");
+var _ui = require("@dhis2/ui");
+var _react = _interopRequireWildcard(require("react"));
+var _helpers = require("../../../../../../utils/helpers");
+var _LegendCardHeader = _interopRequireDefault(require("../../../LegendArea/components/LegendCardHeader"));
+var _hooks = require("../../hooks");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function PointLegends(_ref) {
+  let {
+    orgUnitGroups,
+    icon,
+    label
+  } = _ref;
+  const {
+    baseUrl
+  } = (0, _appRuntime.useConfig)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      minWidth: 100,
+      alignItems: "flex-start"
+    },
+    className: "w-100 p-8 legend-list column"
+  }, icon && /*#__PURE__*/_react.default.createElement("div", {
+    key: `${icon}-legend`,
+    className: "row gap-16  align-items-center"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    height: 20,
+    width: 20,
+    alt: `${name}-icon`,
+    src: (0, _helpers.getIconUrl)(icon, {
+      baseUrl
+    })
+  }), /*#__PURE__*/_react.default.createElement("p", null, label)), orgUnitGroups.map(_ref2 => {
+    let {
+      name,
+      symbol
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: `${name}-legend`,
+      className: "row gap-16  align-items-center"
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      height: 20,
+      width: 20,
+      alt: `${name}-icon`,
+      src: (0, _helpers.getIconUrl)(symbol !== null && symbol !== void 0 ? symbol : "", {
+        baseUrl
+      })
+    }), /*#__PURE__*/_react.default.createElement("p", null, name));
+  }));
+}
+function PointLegend(_ref3, ref) {
+  var _style$orgUnitGroups;
+  let {
+    collapsible,
+    onCollapse
+  } = _ref3;
+  const pointLayer = (0, _hooks.usePointLayer)();
+  const {
+    label,
+    style
+  } = pointLayer !== null && pointLayer !== void 0 ? pointLayer : {};
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: "legend-card"
+  }, /*#__PURE__*/_react.default.createElement(_LegendCardHeader.default, {
+    collapsible: collapsible,
+    onCollapse: onCollapse,
+    title: label !== null && label !== void 0 ? label : "Points"
+  }), /*#__PURE__*/_react.default.createElement(_ui.Divider, {
+    margin: "0"
+  }), /*#__PURE__*/_react.default.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
+  }));
+}
+var _default = /*#__PURE__*/(0, _react.forwardRef)(PointLegend);
+exports.default = _default;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePointLayer = usePointLayer;
+var _lodash = require("lodash");
+var _hooks = require("../../../../MapProvider/hooks");
+function usePointLayer() {
+  const {
+    layers
+  } = (0, _hooks.useMapLayers)();
+  return (0, _lodash.find)(layers, ["type", "point"]);
+}

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PointLayer = PointLayer;
+var _appRuntime = require("@dhis2/app-runtime");
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _leaflet = _interopRequireDefault(require("leaflet"));
+var _react = _interopRequireDefault(require("react"));
+var _reactLeaflet = require("react-leaflet");
+var _helpers = require("../../../../utils/helpers");
+var _hooks = require("./hooks");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function PointLayer() {
+  const pointLayer = (0, _hooks.usePointLayer)();
+  const {
+    enabled,
+    label,
+    points: orgUnits,
+    style
+  } = pointLayer !== null && pointLayer !== void 0 ? pointLayer : {};
+  const {
+    baseUrl
+  } = (0, _appRuntime.useConfig)();
+  return /*#__PURE__*/_react.default.createElement(_reactLeaflet.LayersControl.Overlay, {
+    checked: enabled,
+    name: label !== null && label !== void 0 ? label : _d2I18n.default.t("Points")
+  }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.LayerGroup, null, orgUnits === null || orgUnits === void 0 ? void 0 : orgUnits.map(area => {
+    return /*#__PURE__*/_react.default.createElement(_reactLeaflet.GeoJSON, {
+      pointToLayer: (_, coordinates) => {
+        var _area$icon$icon;
+        return _leaflet.default.marker(coordinates, {
+          icon: (0, _helpers.getIcon)((0, _helpers.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.default.createElement(_reactLeaflet.Tooltip, null, area.name), /*#__PURE__*/_react.default.createElement(_reactLeaflet.Popup, {
+      minWidth: 80
+    }, /*#__PURE__*/_react.default.createElement("h3", null, area.name)));
+  })));
+}

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

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Bubbles = require("./Bubbles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 - _Bubbles.guideLength : x + maxRadius + _Bubbles.guideLength;
+  const y2 = maxRadius * 2 - radius * 2;
+  const textX = x2 + (leftAlign ? -_Bubbles.textPadding : _Bubbles.textPadding);
+  const textAnchor = leftAlign ? "end" : "start";
+  return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("circle", {
+    cx: x,
+    cy: y,
+    r: radius,
+    stroke: stroke || "#000",
+    style: {
+      fill: pattern ? `url(#${pattern})` : color || "none",
+      strokeWidth: 0.5
+    }
+  }), text && /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("line", {
+    x1: x,
+    x2: x2,
+    y1: y2,
+    y2: y2,
+    stroke: "black",
+    style: {
+      strokeDasharray: "2, 2",
+      strokeWidth: 0.5
+    }
+  }), /*#__PURE__*/_react.default.createElement("text", {
+    x: textX,
+    y: y2,
+    textAnchor: textAnchor,
+    alignmentBaseline: "middle",
+    style: {
+      fontSize: 12
+    }
+  }, text)));
+};
+var _default = Bubble;
+exports.default = _default;

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

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textPadding = exports.guideLength = exports.default = void 0;
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _d3Scale = require("d3-scale");
+var _lodash = require("lodash");
+var _react = _interopRequireWildcard(require("react"));
+var _colors = require("../../../../../../../../../utils/colors");
+var _helpers = require("../../../../../../../../../utils/helpers");
+var _Bubble = _interopRequireDefault(require("./Bubble"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+const style = {
+  paddingTop: 10,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+const legendWidth = 200;
+const digitWidth = 6.8;
+const guideLength = 16;
+exports.guideLength = guideLength;
+const textPadding = 4;
+exports.textPadding = textPadding;
+const Bubbles = _ref => {
+  let {
+    radiusLow,
+    radiusHigh,
+    color,
+    classes
+  } = _ref;
+  const height = radiusHigh * 2 + 4;
+  const scale = (0, _d3Scale.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 && (0, _colors.getContrastColor)(color);
+    bubbles = [{
+      radius: radiusHigh,
+      maxRadius: radiusHigh,
+      color,
+      stroke,
+      text: _d2I18n.default.t("Max")
+    }, {
+      radius: radiusMid,
+      maxRadius: radiusHigh,
+      color,
+      stroke,
+      text: _d2I18n.default.t("Mid")
+    }, {
+      radius: radiusLow,
+      maxRadius: radiusHigh,
+      color,
+      stroke,
+      text: _d2I18n.default.t("Min")
+    }];
+  }
+
+  // Calculate the pixel length of the longest number
+  let textLength = Math.ceil(Math.max((0, _helpers.getLongestTextLength)(classes, "startValue"), (0, _helpers.getLongestTextLength)(classes, "endValue")) * digitWidth);
+
+  // Calculate the total length if numbers are alternate on each side
+  const alternateLength = (radiusHigh + guideLength + textPadding + textLength) * 2;
+  let smallestGap = (0, _lodash.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((0, _helpers.getLongestTextLength)(bubbles, "text") * digitWidth);
+  const offset = textLength + guideLength + textPadding;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: legendWidth,
+    height: height + 50
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    transform: `translate(${alternate ? offset : "16"} 24)`
+  }, bubbles.map((bubble, i) => /*#__PURE__*/_react.default.createElement(_Bubble.default, _extends({
+    key: i
+  }, bubble, {
+    textAlign: alternate && i % 2 == 0 ? "left" : "right"
+  }))))));
+};
+var _default = /*#__PURE__*/(0, _react.memo)(Bubbles);
+exports.default = _default;

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ui = require("@dhis2/ui");
+var _react = _interopRequireWildcard(require("react"));
+var _LegendCardHeader = _interopRequireDefault(require("../../../../../LegendArea/components/LegendCardHeader"));
+var _Bubbles = _interopRequireDefault(require("./components/Bubbles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function BubbleLegend(_ref, ref) {
+  let {
+    radius,
+    dataItem,
+    data,
+    name,
+    collapsible,
+    onCollapse,
+    legends
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-card",
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_LegendCardHeader.default, {
+    title: dataItem.displayName,
+    onCollapse: onCollapse,
+    collapsible: collapsible
+  }), /*#__PURE__*/_react.default.createElement(_ui.Divider, {
+    margin: "0"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-list pt-8"
+  }, /*#__PURE__*/_react.default.createElement(_Bubbles.default, {
+    classes: legends.reverse(),
+    radiusHigh: radius.max,
+    radiusLow: radius.min,
+    color: "#FF0000"
+  })));
+}
+var _default = /*#__PURE__*/(0, _react.forwardRef)(BubbleLegend);
+exports.default = _default;

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

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Bubble;
+var _ui = require("@dhis2/ui");
+var _leaflet = require("leaflet");
+var _react = _interopRequireWildcard(require("react"));
+var _reactLeaflet = require("react-leaflet");
+var _map = require("../../../../../../utils/map");
+var _CustomTooltip = _interopRequireDefault(require("../CustomTooltip"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const defaultStyle = {
+  weight: 1
+};
+const highlightStyle = {
+  weight: 2
+};
+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 = (0, _leaflet.geoJSON)(geoJSONObject).getBounds().getCenter();
+  const circleRadius = (0, _react.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactLeaflet.CircleMarker, {
+    interactive: true,
+    eventHandlers: {
+      mouseover: e => (0, _map.highlightFeature)(e, highlightStyle),
+      mouseout: e => (0, _map.resetHighlight)(e, defaultStyle)
+    },
+    pathOptions: {
+      fillColor: (0, _map.getColorFromLegendSet)(legends, data.data),
+      fillOpacity: 1,
+      color: _ui.colors.grey900,
+      weight: 1
+    },
+    radius: circleRadius,
+    center: center
+  }, /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+    data: data
+  })));
+}