npm - @hisptz/dhis2-analytics - Versions diffs - 1.0.65 → 2.0.0-alpha.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1029) hide show

package/dist/components/Map/components/MapLayer/components/PointLayer/index.js ADDED Viewed

@@ -0,0 +1,55 @@
+'use strict';
+var jsxRuntime = require('react/jsx-runtime');
+var appRuntime = require('@dhis2/app-runtime');
+var i18n = require('@dhis2/d2-i18n');
+var L = require('leaflet');
+var reactLeaflet = require('react-leaflet');
+var helpers = require('../../../../utils/helpers');
+var hooks = require('./hooks');
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+var i18n__default = /*#__PURE__*/_interopDefault(i18n);
+var L__default = /*#__PURE__*/_interopDefault(L);
+function PointLayer() {
+  const pointLayer = hooks.usePointLayer();
+  const { enabled, label, points: orgUnits, style } = pointLayer ?? {};
+  const { baseUrl } = appRuntime.useConfig();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactLeaflet.LayersControl.Overlay,
+    {
+      checked: enabled,
+      name: label ?? i18n__default.default.t("Points"),
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.LayerGroup, { children: orgUnits?.map((area) => {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          reactLeaflet.GeoJSON,
+          {
+            pointToLayer: (_, coordinates) => {
+              return L__default.default.marker(coordinates, {
+                icon: helpers.getIcon(
+                  helpers.getIconUrl(
+                    area.icon.icon ?? style?.icon,
+                    { baseUrl }
+                  )
+                )
+              });
+            },
+            data: area.geoJSON,
+            interactive: true,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Tooltip, { children: area.name }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Popup, { minWidth: 80, children: /* @__PURE__ */ jsxRuntime.jsx("h3", { children: area.name }) })
+            ]
+          },
+          `${area.id}-polygon`
+        );
+      }) })
+    }
+  );
+}
+exports.PointLayer = PointLayer;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Map/components/MapLayer/components/PointLayer/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../../../src/components/Map/components/MapLayer/components/PointLayer/index.tsx"],"names":[],"mappings":"AA2BM,SAeC,KAfD;AA3BN,SAAS,iBAAiB;AAC1B,OAAO,UAAU;AACjB,OAAO,OAAO;AAEd;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,SAAS,SAAS,kBAAkB;AACpC,SAAS,qBAAqB;AAEvB,SAAS,aAAa;AAC5B,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,SAAS,OAAO,QAAQ,UAAU,MAAM,IAAI,cAAc,CAAC;AACnE,QAAM,EAAE,QAAQ,IAAI,UAAU;AAC9B,SACC;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACA,SAAS;AAAA,MACT,MAAM,SAAS,KAAK,EAAE,QAAQ;AAAA,MAE9B,8BAAC,cACC,oBAAU,IAAI,CAAC,SAAuB;AACtC,eACC;AAAA,UAAC;AAAA;AAAA,YACA,cAAc,CAAC,GAAG,gBAAgB;AACjC,qBAAO,EAAE,OAAO,aAAa;AAAA,gBAC5B,MAAM;AAAA,kBACL;AAAA,oBACC,KAAK,KAAK,QAAQ,OAAO;AAAA,oBACzB,EAAE,QAAQ;AAAA,kBACX;AAAA,gBACD;AAAA,cACD,CAAC;AAAA,YACF;AAAA,YACA,MAAM,KAAK;AAAA,YACX,aAAW;AAAA,YAGX;AAAA,kCAAC,WAAS,eAAK,MAAK;AAAA,cACpB,oBAAC,SAAM,UAAU,IAChB,8BAAC,QAAI,eAAK,MAAK,GAChB;AAAA;AAAA;AAAA,UALK,GAAG,KAAK,EAAE;AAAA,QAMhB;AAAA,MAEF,CAAC,GACF;AAAA;AAAA,EACD;AAEF","sourcesContent":["import { useConfig } from \"@dhis2/app-runtime\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport L from \"leaflet\";\nimport React from \"react\";\nimport {\n\tGeoJSON,\n\tLayerGroup,\n\tLayersControl,\n\tPopup,\n\tTooltip,\n} from \"react-leaflet\";\nimport { PointOrgUnit } from \"../../../../interfaces\";\nimport { getIcon, getIconUrl } from \"../../../../utils/helpers\";\nimport { usePointLayer } from \"./hooks\";\n\nexport function PointLayer() {\n\tconst pointLayer = usePointLayer();\n\tconst { enabled, label, points: orgUnits, style } = pointLayer ?? {};\n\tconst { baseUrl } = useConfig();\n\treturn (\n\t\t<LayersControl.Overlay\n\t\t\tchecked={enabled}\n\t\t\tname={label ?? i18n.t(\"Points\")}\n\t\t>\n\t\t\t<LayerGroup>\n\t\t\t\t{orgUnits?.map((area: PointOrgUnit) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<GeoJSON\n\t\t\t\t\t\t\tpointToLayer={(_, coordinates) => {\n\t\t\t\t\t\t\t\treturn L.marker(coordinates, {\n\t\t\t\t\t\t\t\t\ticon: getIcon(\n\t\t\t\t\t\t\t\t\t\tgetIconUrl(\n\t\t\t\t\t\t\t\t\t\t\tarea.icon.icon ?? style?.icon,\n\t\t\t\t\t\t\t\t\t\t\t{ baseUrl },\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata={area.geoJSON}\n\t\t\t\t\t\t\tinteractive\n\t\t\t\t\t\t\tkey={`${area.id}-polygon`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip>{area.name}</Tooltip>\n\t\t\t\t\t\t\t<Popup minWidth={80}>\n\t\t\t\t\t\t\t\t<h3>{area.name}</h3>\n\t\t\t\t\t\t\t</Popup>\n\t\t\t\t\t\t</GeoJSON>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</LayerGroup>\n\t\t</LayersControl.Overlay>\n\t);\n}\n"]}

package/dist/components/Map/components/MapLayer/components/PointLayer/index.mjs ADDED Viewed

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useConfig } from '@dhis2/app-runtime';
+import i18n from '@dhis2/d2-i18n';
+import L from 'leaflet';
+import { LayersControl, LayerGroup, GeoJSON, Tooltip, Popup } from 'react-leaflet';
+import { getIcon, getIconUrl } from '../../../../utils/helpers';
+import { usePointLayer } from './hooks';
+function PointLayer() {
+  const pointLayer = usePointLayer();
+  const { enabled, label, points: orgUnits, style } = pointLayer ?? {};
+  const { baseUrl } = useConfig();
+  return /* @__PURE__ */ jsx(
+    LayersControl.Overlay,
+    {
+      checked: enabled,
+      name: label ?? i18n.t("Points"),
+      children: /* @__PURE__ */ jsx(LayerGroup, { children: orgUnits?.map((area) => {
+        return /* @__PURE__ */ jsxs(
+          GeoJSON,
+          {
+            pointToLayer: (_, coordinates) => {
+              return L.marker(coordinates, {
+                icon: getIcon(
+                  getIconUrl(
+                    area.icon.icon ?? style?.icon,
+                    { baseUrl }
+                  )
+                )
+              });
+            },
+            data: area.geoJSON,
+            interactive: true,
+            children: [
+              /* @__PURE__ */ jsx(Tooltip, { children: area.name }),
+              /* @__PURE__ */ jsx(Popup, { minWidth: 80, children: /* @__PURE__ */ jsx("h3", { children: area.name }) })
+            ]
+          },
+          `${area.id}-polygon`
+        );
+      }) })
+    }
+  );
+}
+export { PointLayer };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/Map/components/MapLayer/components/PointLayer/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubble.js ADDED Viewed

@@ -0,0 +1,38 @@
+'use strict';
+var jsxRuntime = require('react/jsx-runtime');
+var Bubbles = require('./Bubbles');
+const Bubble = ({ radius, maxRadius, text, textAlign, color, stroke, pattern }) => {
+  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__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: x,
+        cy: y,
+        r: radius,
+        stroke: stroke || "#000",
+        style: {
+          fill: pattern ? `url(#${pattern})` : color || "none",
+          strokeWidth: 0.5
+        }
+      }
+    ),
+    text && /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x, x2, y1: y2, y2, stroke: "black", style: { strokeDasharray: "2, 2", strokeWidth: 0.5 } }),
+      /* @__PURE__ */ jsxRuntime.jsx("text", { x: textX, y: y2, textAnchor, alignmentBaseline: "middle", style: { fontSize: 12 }, children: text })
+    ] })
+  ] });
+};
+var Bubble_default = Bubble;
+module.exports = Bubble_default;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=Bubble.js.map

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubble.js.map ADDED Viewed

@@ -0,0 +1 @@

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubble.mjs ADDED Viewed

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { guideLength, textPadding } from './Bubbles';
+const Bubble = ({ radius, maxRadius, text, textAlign, color, stroke, pattern }) => {
+  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__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: x,
+        cy: y,
+        r: radius,
+        stroke: stroke || "#000",
+        style: {
+          fill: pattern ? `url(#${pattern})` : color || "none",
+          strokeWidth: 0.5
+        }
+      }
+    ),
+    text && /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx("line", { x1: x, x2, y1: y2, y2, stroke: "black", style: { strokeDasharray: "2, 2", strokeWidth: 0.5 } }),
+      /* @__PURE__ */ jsx("text", { x: textX, y: y2, textAnchor, alignmentBaseline: "middle", style: { fontSize: 12 }, children: text })
+    ] })
+  ] });
+};
+var Bubble_default = Bubble;
+export { Bubble_default as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=Bubble.mjs.map

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubble.mjs.map ADDED Viewed

@@ -0,0 +1 @@

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubbles.js ADDED Viewed

@@ -0,0 +1,122 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var jsxRuntime = require('react/jsx-runtime');
+var i18n = require('@dhis2/d2-i18n');
+var d3Scale = require('d3-scale');
+var lodash = require('lodash');
+var react = require('react');
+var colors = require('../../../../../../../../../utils/colors');
+var helpers = require('../../../../../../../../../utils/helpers');
+var Bubble = require('./Bubble');
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+var i18n__default = /*#__PURE__*/_interopDefault(i18n);
+var Bubble__default = /*#__PURE__*/_interopDefault(Bubble);
+const style = {
+  paddingTop: 10,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+const legendWidth = 200;
+const digitWidth = 6.8;
+const guideLength = 16;
+const textPadding = 4;
+const Bubbles = ({ radiusLow, radiusHigh, color, classes }) => {
+  const height = radiusHigh * 2 + 4;
+  const scale = d3Scale.scaleSqrt().range([radiusLow, radiusHigh]);
+  const radiusMid = scale(0.5);
+  if (isNaN(radiusLow) || isNaN(radiusHigh)) {
+    return null;
+  }
+  let bubbles = [];
+  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)
+    }));
+    bubbles.push({
+      radius: itemScale(startValue),
+      maxRadius: radiusHigh,
+      text: String(startValue)
+    });
+  } else {
+    const stroke = color && colors.getContrastColor(color);
+    bubbles = [
+      {
+        radius: radiusHigh,
+        maxRadius: radiusHigh,
+        color,
+        stroke,
+        text: i18n__default.default.t("Max")
+      },
+      {
+        radius: radiusMid,
+        maxRadius: radiusHigh,
+        color,
+        stroke,
+        text: i18n__default.default.t("Mid")
+      },
+      {
+        radius: radiusLow,
+        maxRadius: radiusHigh,
+        color,
+        stroke,
+        text: i18n__default.default.t("Min")
+      }
+    ];
+  }
+  let textLength = Math.ceil(Math.max(helpers.getLongestTextLength(classes, "startValue"), helpers.getLongestTextLength(classes, "endValue")) * digitWidth);
+  const alternateLength = (radiusHigh + guideLength + textPadding + textLength) * 2;
+  let smallestGap = lodash.reduce(bubbles, (prev, curr, i) => {
+    const gap = prev.radius - curr.radius;
+    const smallestGap2 = prev.gap === void 0 || gap < prev.gap ? gap : prev.gap;
+    return i === bubbles.length - 1 ? Math.round(smallestGap2 * 2) : {
+      radius: curr.radius,
+      gap: smallestGap2
+    };
+  });
+  const alternateFit = alternateLength < legendWidth;
+  const alternate = alternateFit && smallestGap > 5 && smallestGap < 12;
+  if (!alternateFit) {
+    smallestGap = smallestGap / 2;
+  }
+  if (smallestGap < 4) {
+    const [maxBubble] = bubbles;
+    const minBubble = bubbles[bubbles.length - 1];
+    const gap = maxBubble.radius - minBubble.radius;
+    const showNumbers = [0];
+    if (gap > 4) {
+      showNumbers.push(bubbles.length - 1);
+    }
+    if (gap > 15) {
+      const midRadius = minBubble.radius + gap / 2;
+      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(helpers.getLongestTextLength(bubbles, "text") * digitWidth);
+  const offset = textLength + guideLength + textPadding;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: legendWidth, height: height + 50, children: /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${alternate ? offset : "16"} 24)`, children: bubbles.map((bubble, i) => /* @__PURE__ */ jsxRuntime.jsx(Bubble__default.default, { ...bubble, textAlign: alternate && i % 2 == 0 ? "left" : "right" }, i)) }) }) });
+};
+var Bubbles_default = react.memo(Bubbles);
+exports.default = Bubbles_default;
+exports.guideLength = guideLength;
+exports.textPadding = textPadding;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=Bubbles.js.map

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubbles.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubbles.mjs ADDED Viewed

@@ -0,0 +1,111 @@
+import { jsx } from 'react/jsx-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { scaleSqrt } from 'd3-scale';
+import { reduce } from 'lodash';
+import { 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;
+const guideLength = 16;
+const textPadding = 4;
+const Bubbles = ({ radiusLow, radiusHigh, color, classes }) => {
+  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 (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)
+    }));
+    bubbles.push({
+      radius: itemScale(startValue),
+      maxRadius: radiusHigh,
+      text: String(startValue)
+    });
+  } else {
+    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")
+      }
+    ];
+  }
+  let textLength = Math.ceil(Math.max(getLongestTextLength(classes, "startValue"), getLongestTextLength(classes, "endValue")) * digitWidth);
+  const alternateLength = (radiusHigh + guideLength + textPadding + textLength) * 2;
+  let smallestGap = reduce(bubbles, (prev, curr, i) => {
+    const gap = prev.radius - curr.radius;
+    const smallestGap2 = prev.gap === void 0 || gap < prev.gap ? gap : prev.gap;
+    return i === bubbles.length - 1 ? Math.round(smallestGap2 * 2) : {
+      radius: curr.radius,
+      gap: smallestGap2
+    };
+  });
+  const alternateFit = alternateLength < legendWidth;
+  const alternate = alternateFit && smallestGap > 5 && smallestGap < 12;
+  if (!alternateFit) {
+    smallestGap = smallestGap / 2;
+  }
+  if (smallestGap < 4) {
+    const [maxBubble] = bubbles;
+    const minBubble = bubbles[bubbles.length - 1];
+    const gap = maxBubble.radius - minBubble.radius;
+    const showNumbers = [0];
+    if (gap > 4) {
+      showNumbers.push(bubbles.length - 1);
+    }
+    if (gap > 15) {
+      const midRadius = minBubble.radius + gap / 2;
+      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__ */ jsx("div", { style, children: /* @__PURE__ */ jsx("svg", { width: legendWidth, height: height + 50, children: /* @__PURE__ */ jsx("g", { transform: `translate(${alternate ? offset : "16"} 24)`, children: bubbles.map((bubble, i) => /* @__PURE__ */ jsx(Bubble, { ...bubble, textAlign: alternate && i % 2 == 0 ? "left" : "right" }, i)) }) }) });
+};
+var Bubbles_default = memo(Bubbles);
+export { Bubbles_default as default, guideLength, textPadding };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=Bubbles.mjs.map

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubbles.mjs.map ADDED Viewed

@@ -0,0 +1 @@

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/index.js ADDED Viewed

@@ -0,0 +1,48 @@
+'use strict';
+var jsxRuntime = require('react/jsx-runtime');
+var ui = require('@dhis2/ui');
+var react = require('react');
+var LegendCardHeader = require('../../../../../LegendArea/components/LegendCardHeader');
+var Bubbles = require('./components/Bubbles');
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+var LegendCardHeader__default = /*#__PURE__*/_interopDefault(LegendCardHeader);
+var Bubbles__default = /*#__PURE__*/_interopDefault(Bubbles);
+function BubbleLegend({
+  radius,
+  dataItem,
+  data,
+  name,
+  collapsible,
+  onCollapse,
+  legends
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "legend-card", ref, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      LegendCardHeader__default.default,
+      {
+        title: dataItem.displayName,
+        onCollapse,
+        collapsible
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { margin: "0" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "legend-list pt-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Bubbles__default.default,
+      {
+        classes: legends.reverse(),
+        radiusHigh: radius.max,
+        radiusLow: radius.min,
+        color: "#FF0000"
+      }
+    ) })
+  ] });
+}
+var BubbleLegend_default = react.forwardRef(BubbleLegend);
+module.exports = BubbleLegend_default;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/index.tsx"],"names":[],"mappings":"AA+BE,SACC,KADD;AA/BF,SAAS,eAAe;AAExB,SAAgB,kBAAkB;AAKlC,OAAO,sBAAsB;AAC7B,OAAO,aAAa;AAEpB,SAAS,aACR;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GASA,KACC;AACD,SACC,qBAAC,SAAI,WAAU,eAAc,KAC5B;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,SAAS;AAAA,QAChB;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IACA,oBAAC,WAAQ,QAAQ,KAAK;AAAA,IACtB,oBAAC,SAAI,WAAU,oBACd;AAAA,MAAC;AAAA;AAAA,QACA,SAAS,QAAQ,QAAQ;AAAA,QACzB,YAAY,OAAO;AAAA,QACnB,WAAW,OAAO;AAAA,QAClB,OAAO;AAAA;AAAA,IACR,GACD;AAAA,KACD;AAEF;AAEA,IAAO,uBAAQ,WAAW,YAAY","sourcesContent":["import { Divider } from \"@dhis2/ui\";\nimport type { Legend } from \"@hisptz/dhis2-utils\";\nimport React, { forwardRef } from \"react\";\nimport {\n\tThematicLayerData,\n\tThematicLayerDataItem,\n} from \"../../../../../../interfaces\";\nimport LegendCardHeader from \"../../../../../LegendArea/components/LegendCardHeader\";\nimport Bubbles from \"./components/Bubbles\";\n\nfunction BubbleLegend(\n\t{\n\t\tradius,\n\t\tdataItem,\n\t\tdata,\n\t\tname,\n\t\tcollapsible,\n\t\tonCollapse,\n\t\tlegends,\n\t}: {\n\t\tradius: { min: number; max: number };\n\t\tdataItem: ThematicLayerDataItem;\n\t\tdata: ThematicLayerData[];\n\t\tname?: string;\n\t\tcollapsible?: boolean;\n\t\tonCollapse?: () => void;\n\t\tlegends: Legend[];\n\t},\n\tref: React.LegacyRef<HTMLDivElement> | undefined,\n) {\n\treturn (\n\t\t<div className=\"legend-card\" ref={ref}>\n\t\t\t<LegendCardHeader\n\t\t\t\ttitle={dataItem.displayName}\n\t\t\t\tonCollapse={onCollapse}\n\t\t\t\tcollapsible={collapsible}\n\t\t\t/>\n\t\t\t<Divider margin={\"0\"} />\n\t\t\t<div className=\"legend-list pt-8\">\n\t\t\t\t<Bubbles\n\t\t\t\t\tclasses={legends.reverse()}\n\t\t\t\t\tradiusHigh={radius.max}\n\t\t\t\t\tradiusLow={radius.min}\n\t\t\t\t\tcolor={\"#FF0000\"}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default forwardRef(BubbleLegend);\n"]}

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/index.mjs ADDED Viewed

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Divider } from '@dhis2/ui';
+import { forwardRef } from 'react';
+import LegendCardHeader from '../../../../../LegendArea/components/LegendCardHeader';
+import Bubbles from './components/Bubbles';
+function BubbleLegend({
+  radius,
+  dataItem,
+  data,
+  name,
+  collapsible,
+  onCollapse,
+  legends
+}, ref) {
+  return /* @__PURE__ */ jsxs("div", { className: "legend-card", ref, children: [
+    /* @__PURE__ */ jsx(
+      LegendCardHeader,
+      {
+        title: dataItem.displayName,
+        onCollapse,
+        collapsible
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, { margin: "0" }),
+    /* @__PURE__ */ jsx("div", { className: "legend-list pt-8", children: /* @__PURE__ */ jsx(
+      Bubbles,
+      {
+        classes: legends.reverse(),
+        radiusHigh: radius.max,
+        radiusLow: radius.min,
+        color: "#FF0000"
+      }
+    ) })
+  ] });
+}
+var BubbleLegend_default = forwardRef(BubbleLegend);
+export { BubbleLegend_default as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/index.js ADDED Viewed

@@ -0,0 +1,56 @@
+'use strict';
+var jsxRuntime = require('react/jsx-runtime');
+var ui = require('@dhis2/ui');
+var leaflet = require('leaflet');
+var react = require('react');
+var reactLeaflet = require('react-leaflet');
+var map = require('../../../../../../utils/map');
+var CustomTooltip = require('../CustomTooltip');
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+var CustomTooltip__default = /*#__PURE__*/_interopDefault(CustomTooltip);
+const defaultStyle = {
+  weight: 1
+};
+const highlightStyle = {
+  weight: 2
+};
+function Bubble({
+  data,
+  highestData,
+  legends,
+  radius
+}) {
+  const { orgUnit, data: value } = data ?? {};
+  const geoJSONObject = orgUnit.geoJSON;
+  const center = leaflet.geoJSON(geoJSONObject).getBounds().getCenter();
+  const circleRadius = react.useMemo(() => {
+    return (value ?? 0) * (radius?.max ?? 50) / highestData;
+  }, [radius, data, highestData]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactLeaflet.CircleMarker,
+    {
+      interactive: true,
+      eventHandlers: {
+        mouseover: (e) => map.highlightFeature(e, highlightStyle),
+        mouseout: (e) => map.resetHighlight(e, defaultStyle)
+      },
+      pathOptions: {
+        fillColor: map.getColorFromLegendSet(legends, data.data),
+        fillOpacity: 1,
+        color: ui.colors.grey900,
+        weight: 1
+      },
+      radius: circleRadius,
+      center,
+      children: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip__default.default, { data })
+    }
+  ) });
+}
+module.exports = Bubble;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map