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

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

@@ -1 +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"]}
+{"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/index.js\";\nimport { getIcon, getIconUrl } from \"../../../../utils/helpers.js\";\nimport { usePointLayer } from \"./hooks/index.js\";\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/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubble.js

@@ -1,15 +1,23 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var Bubbles = require('./Bubbles');
+var Bubbles_js = require('./Bubbles.js');
 
-const Bubble = ({ radius, maxRadius, text, textAlign, color, stroke, pattern }) => {
+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 x2 = leftAlign ? x - maxRadius - Bubbles_js.guideLength : x + maxRadius + Bubbles_js.guideLength;
   const y2 = maxRadius * 2 - radius * 2;
-  const textX = x2 + (leftAlign ? -Bubbles.textPadding : Bubbles.textPadding);
+  const textX = x2 + (leftAlign ? -Bubbles_js.textPadding : Bubbles_js.textPadding);
   const textAnchor = leftAlign ? "end" : "start";
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -26,8 +34,28 @@ const Bubble = ({ radius, maxRadius, text, textAlign, color, stroke, pattern })
       }
     ),
     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 })
+      /* @__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
+        }
+      )
     ] })
   ] });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubble.tsx"],"names":[],"mappings":"AAyBM,cAWE,YAXF;AAxBN,SAAS,aAAa,mBAAmB;AAazC,MAAM,SAAS,CAAC,EAAE,QAAQ,WAAW,MAAM,WAAW,OAAO,QAAQ,QAAQ,MAAmB;AAC9F,QAAM,YAAY,cAAc;AAChC,QAAM,IAAI;AACV,QAAM,IAAI,YAAY,IAAI;AAC1B,QAAM,KAAK,YAAY,IAAI,YAAY,cAAc,IAAI,YAAY;AACrE,QAAM,KAAK,YAAY,IAAI,SAAS;AACpC,QAAM,QAAQ,MAAM,YAAY,CAAC,cAAc;AAC/C,QAAM,aAAa,YAAY,QAAQ;AAEvC,SACE,qBAAC,OACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,QAAQ,UAAU;AAAA,QAClB,OAAO;AAAA,UACL,MAAM,UAAU,QAAQ,OAAO,MAAM,SAAS;AAAA,UAC9C,aAAa;AAAA,QACf;AAAA;AAAA,IACF;AAAA,IACC,QACC,qBAAC,OACC;AAAA,0BAAC,UAAK,IAAI,GAAG,IAAQ,IAAI,IAAI,IAAQ,QAAO,SAAQ,OAAO,EAAE,iBAAiB,QAAQ,aAAa,IAAI,GAAG;AAAA,MAC1G,oBAAC,UAAK,GAAG,OAAO,GAAG,IAAI,YAAwB,mBAAkB,UAAS,OAAO,EAAE,UAAU,GAAG,GAC7F,gBACH;AAAA,OACF;AAAA,KAEJ;AAEJ;AAEA,IAAO,iBAAQ","sourcesContent":["import React from \"react\";\nimport { guideLength, textPadding } from \"./Bubbles\";\n\nexport interface BubbleProps {\n\tradius: number;\n\tmaxRadius: number;\n\ttext?: string;\n\ttextAlign?: \"left\" | \"right\";\n\tcolor?: string;\n\tstroke?: string;\n\tpattern?: string;\n\tgap?: number;\n}\n\nconst Bubble = ({ radius, maxRadius, text, textAlign, color, stroke, pattern }: BubbleProps) => {\n  const leftAlign = textAlign === \"left\";\n  const x = maxRadius;\n  const y = maxRadius * 2 - radius;\n  const x2 = leftAlign ? x - maxRadius - guideLength : x + maxRadius + guideLength;\n  const y2 = maxRadius * 2 - radius * 2;\n  const textX = x2 + (leftAlign ? -textPadding : textPadding);\n  const textAnchor = leftAlign ? \"end\" : \"start\";\n\n  return (\n    <g>\n      <circle\n        cx={x}\n        cy={y}\n        r={radius}\n        stroke={stroke || \"#000\"}\n        style={{\n          fill: pattern ? `url(#${pattern})` : color || \"none\",\n          strokeWidth: 0.5,\n        }}\n      />\n      {text && (\n        <g>\n          <line x1={x} x2={x2} y1={y2} y2={y2} stroke=\"black\" style={{ strokeDasharray: \"2, 2\", strokeWidth: 0.5 }} />\n          <text x={textX} y={y2} textAnchor={textAnchor} alignmentBaseline=\"middle\" style={{ fontSize: 12 }}>\n            {text}\n          </text>\n        </g>\n      )}\n    </g>\n  );\n};\n\nexport default Bubble;\n"]}
+{"version":3,"sources":["../../../../../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubble.tsx"],"names":[],"mappings":"AAmCG,cAWC,YAXD;AAlCH,SAAS,aAAa,mBAAmB;AAazC,MAAM,SAAS,CAAC;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAAmB;AAClB,QAAM,YAAY,cAAc;AAChC,QAAM,IAAI;AACV,QAAM,IAAI,YAAY,IAAI;AAC1B,QAAM,KAAK,YACR,IAAI,YAAY,cAChB,IAAI,YAAY;AACnB,QAAM,KAAK,YAAY,IAAI,SAAS;AACpC,QAAM,QAAQ,MAAM,YAAY,CAAC,cAAc;AAC/C,QAAM,aAAa,YAAY,QAAQ;AAEvC,SACC,qBAAC,OACA;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,QAAQ,UAAU;AAAA,QAClB,OAAO;AAAA,UACN,MAAM,UAAU,QAAQ,OAAO,MAAM,SAAS;AAAA,UAC9C,aAAa;AAAA,QACd;AAAA;AAAA,IACD;AAAA,IACC,QACA,qBAAC,OACA;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,IAAI;AAAA,UACJ;AAAA,UACA,IAAI;AAAA,UACJ;AAAA,UACA,QAAO;AAAA,UACP,OAAO,EAAE,iBAAiB,QAAQ,aAAa,IAAI;AAAA;AAAA,MACpD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,GAAG;AAAA,UACH,GAAG;AAAA,UACH;AAAA,UACA,mBAAkB;AAAA,UAClB,OAAO,EAAE,UAAU,GAAG;AAAA,UAErB;AAAA;AAAA,MACF;AAAA,OACD;AAAA,KAEF;AAEF;AAEA,IAAO,iBAAQ","sourcesContent":["import React from \"react\";\nimport { guideLength, textPadding } from \"./Bubbles.js\";\n\nexport interface BubbleProps {\n\tradius: number;\n\tmaxRadius: number;\n\ttext?: string;\n\ttextAlign?: \"left\" | \"right\";\n\tcolor?: string;\n\tstroke?: string;\n\tpattern?: string;\n\tgap?: number;\n}\n\nconst Bubble = ({\n\tradius,\n\tmaxRadius,\n\ttext,\n\ttextAlign,\n\tcolor,\n\tstroke,\n\tpattern,\n}: BubbleProps) => {\n\tconst leftAlign = textAlign === \"left\";\n\tconst x = maxRadius;\n\tconst y = maxRadius * 2 - radius;\n\tconst x2 = leftAlign\n\t\t? x - maxRadius - guideLength\n\t\t: x + maxRadius + guideLength;\n\tconst y2 = maxRadius * 2 - radius * 2;\n\tconst textX = x2 + (leftAlign ? -textPadding : textPadding);\n\tconst textAnchor = leftAlign ? \"end\" : \"start\";\n\n\treturn (\n\t\t<g>\n\t\t\t<circle\n\t\t\t\tcx={x}\n\t\t\t\tcy={y}\n\t\t\t\tr={radius}\n\t\t\t\tstroke={stroke || \"#000\"}\n\t\t\t\tstyle={{\n\t\t\t\t\tfill: pattern ? `url(#${pattern})` : color || \"none\",\n\t\t\t\t\tstrokeWidth: 0.5,\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t{text && (\n\t\t\t\t<g>\n\t\t\t\t\t<line\n\t\t\t\t\t\tx1={x}\n\t\t\t\t\t\tx2={x2}\n\t\t\t\t\t\ty1={y2}\n\t\t\t\t\t\ty2={y2}\n\t\t\t\t\t\tstroke=\"black\"\n\t\t\t\t\t\tstyle={{ strokeDasharray: \"2, 2\", strokeWidth: 0.5 }}\n\t\t\t\t\t/>\n\t\t\t\t\t<text\n\t\t\t\t\t\tx={textX}\n\t\t\t\t\t\ty={y2}\n\t\t\t\t\t\ttextAnchor={textAnchor}\n\t\t\t\t\t\talignmentBaseline=\"middle\"\n\t\t\t\t\t\tstyle={{ fontSize: 12 }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{text}\n\t\t\t\t\t</text>\n\t\t\t\t</g>\n\t\t\t)}\n\t\t</g>\n\t);\n};\n\nexport default Bubble;\n"]}

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

@@ -7,9 +7,9 @@ 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');
+var colors_js = require('../../../../../../../../../utils/colors.js');
+var helpers_js = require('../../../../../../../../../utils/helpers.js');
+var Bubble = require('./Bubble.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -26,7 +26,12 @@ const legendWidth = 200;
 const digitWidth = 6.8;
 const guideLength = 16;
 const textPadding = 4;
-const Bubbles = ({ radiusLow, radiusHigh, color, classes }) => {
+const Bubbles = ({
+  radiusLow,
+  radiusHigh,
+  color,
+  classes
+}) => {
   const height = radiusHigh * 2 + 4;
   const scale = d3Scale.scaleSqrt().range([radiusLow, radiusHigh]);
   const radiusMid = scale(0.5);
@@ -50,7 +55,7 @@ const Bubbles = ({ radiusLow, radiusHigh, color, classes }) => {
       text: String(startValue)
     });
   } else {
-    const stroke = color && colors.getContrastColor(color);
+    const stroke = color && colors_js.getContrastColor(color);
     bubbles = [
       {
         radius: radiusHigh,
@@ -75,7 +80,12 @@ const Bubbles = ({ radiusLow, radiusHigh, color, classes }) => {
       }
     ];
   }
-  let textLength = Math.ceil(Math.max(helpers.getLongestTextLength(classes, "startValue"), helpers.getLongestTextLength(classes, "endValue")) * digitWidth);
+  let textLength = Math.ceil(
+    Math.max(
+      helpers_js.getLongestTextLength(classes, "startValue"),
+      helpers_js.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;
@@ -100,7 +110,9 @@ const Bubbles = ({ radiusLow, radiusHigh, color, classes }) => {
     }
     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);
+      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) => {
@@ -109,9 +121,16 @@ const Bubbles = ({ radiusLow, radiusHigh, color, classes }) => {
       }
     });
   }
-  textLength = Math.ceil(helpers.getLongestTextLength(bubbles, "text") * digitWidth);
+  textLength = Math.ceil(helpers_js.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)) }) }) });
+  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);
 

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

@@ -1 +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"]}
+{"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.js\";\nimport { getLongestTextLength } from \"../../../../../../../../../utils/helpers.js\";\nimport Bubble, { BubbleProps } from \"./Bubble.js\";\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 = ({\n\tradiusLow,\n\tradiusHigh,\n\tcolor,\n\tclasses,\n}: {\n\tradiusLow: number;\n\tradiusHigh: number;\n\tcolor?: string;\n\tclasses: Array<any>;\n}) => {\n\tconst height = radiusHigh * 2 + 4;\n\tconst scale = scaleSqrt().range([radiusLow, radiusHigh]);\n\tconst radiusMid = scale(0.5);\n\n\tif (isNaN(radiusLow) || isNaN(radiusHigh)) {\n\t\treturn null;\n\t}\n\n\tlet bubbles: Array<BubbleProps> = [];\n\n\t// If color legend\n\tif (Array.isArray(classes) && classes.length) {\n\t\tconst startValue = classes[0].startValue;\n\t\tconst endValue = classes[classes.length - 1].endValue;\n\t\tconst itemScale = scale.domain([startValue, endValue]);\n\n\t\tbubbles = [...classes].reverse().map((c) => ({\n\t\t\tradius: itemScale(c.endValue),\n\t\t\tmaxRadius: radiusHigh,\n\t\t\tcolor: c.color,\n\t\t\ttext: String(c.endValue),\n\t\t}));\n\n\t\t// Add the smallest bubble for the lowest value\n\t\tbubbles.push({\n\t\t\tradius: itemScale(startValue),\n\t\t\tmaxRadius: radiusHigh,\n\t\t\ttext: String(startValue),\n\t\t});\n\t} else {\n\t\t// If single color\n\t\tconst stroke = color && getContrastColor(color);\n\n\t\tbubbles = [\n\t\t\t{\n\t\t\t\tradius: radiusHigh,\n\t\t\t\tmaxRadius: radiusHigh,\n\t\t\t\tcolor,\n\t\t\t\tstroke,\n\t\t\t\ttext: i18n.t(\"Max\"),\n\t\t\t},\n\t\t\t{\n\t\t\t\tradius: radiusMid,\n\t\t\t\tmaxRadius: radiusHigh,\n\t\t\t\tcolor,\n\t\t\t\tstroke,\n\t\t\t\ttext: i18n.t(\"Mid\"),\n\t\t\t},\n\t\t\t{\n\t\t\t\tradius: radiusLow,\n\t\t\t\tmaxRadius: radiusHigh,\n\t\t\t\tcolor,\n\t\t\t\tstroke,\n\t\t\t\ttext: i18n.t(\"Min\"),\n\t\t\t},\n\t\t];\n\t}\n\n\t// Calculate the pixel length of the longest number\n\tlet textLength = Math.ceil(\n\t\tMath.max(\n\t\t\tgetLongestTextLength(classes, \"startValue\"),\n\t\t\tgetLongestTextLength(classes, \"endValue\"),\n\t\t) * digitWidth,\n\t);\n\n\t// Calculate the total length if numbers are alternate on each side\n\tconst alternateLength =\n\t\t(radiusHigh + guideLength + textPadding + textLength) * 2;\n\n\tlet smallestGap = reduce(bubbles, (prev, curr: any, i) => {\n\t\tconst gap = prev.radius - curr.radius;\n\t\tconst smallestGap =\n\t\t\tprev.gap === undefined || gap < prev.gap ? gap : prev.gap;\n\n\t\treturn i === bubbles.length - 1\n\t\t\t? Math.round(smallestGap * 2)\n\t\t\t: {\n\t\t\t\t\tradius: curr.radius,\n\t\t\t\t\tgap: smallestGap,\n\t\t\t\t};\n\t});\n\n\tconst alternateFit = alternateLength < legendWidth;\n\n\tconst alternate = alternateFit && smallestGap > 5 && smallestGap < 12;\n\n\tif (!alternateFit) {\n\t\tsmallestGap = smallestGap / 2;\n\t}\n\n\t// Too cramped to show number for each bubble\n\tif (smallestGap < 4) {\n\t\tconst [maxBubble] = bubbles;\n\t\tconst minBubble = bubbles[bubbles.length - 1];\n\t\tconst gap = maxBubble.radius - minBubble.radius;\n\t\tconst showNumbers = [0]; // Always show the largest number\n\n\t\tif (gap > 4) {\n\t\t\tshowNumbers.push(bubbles.length - 1);\n\t\t}\n\n\t\tif (gap > 15) {\n\t\t\tconst midRadius = minBubble.radius + gap / 2;\n\n\t\t\t// Find the closest bubble above the mid-radius\n\t\t\tconst midBubble = bubbles.reduce((prev, curr) =>\n\t\t\t\tcurr.radius >= midRadius &&\n\t\t\t\tcurr.radius - midRadius < prev.radius - midRadius\n\t\t\t\t\t? curr\n\t\t\t\t\t: prev,\n\t\t\t);\n\n\t\t\tshowNumbers.push(bubbles.indexOf(midBubble));\n\t\t}\n\n\t\tbubbles.forEach((b, i) => {\n\t\t\tif (!showNumbers.includes(i)) {\n\t\t\t\tdelete b.text;\n\t\t\t}\n\t\t});\n\t}\n\n\ttextLength = Math.ceil(getLongestTextLength(bubbles, \"text\") * digitWidth);\n\n\tconst offset = textLength + guideLength + textPadding;\n\n\treturn (\n\t\t<div style={style}>\n\t\t\t<svg width={legendWidth} height={height + 50}>\n\t\t\t\t<g transform={`translate(${alternate ? offset : \"16\"} 24)`}>\n\t\t\t\t\t{bubbles.map((bubble, i) => (\n\t\t\t\t\t\t<Bubble\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t{...bubble}\n\t\t\t\t\t\t\ttextAlign={\n\t\t\t\t\t\t\t\talternate && i % 2 == 0 ? \"left\" : \"right\"\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</g>\n\t\t\t</svg>\n\t\t</div>\n\t);\n};\n\nexport default memo(Bubbles);\n"]}

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

@@ -3,8 +3,8 @@
 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');
+var LegendCardHeader = require('../../../../../LegendArea/components/LegendCardHeader/index.js');
+var Bubbles = require('./components/Bubbles.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

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

@@ -1 +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"]}
+{"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/index.js\";\nimport LegendCardHeader from \"../../../../../LegendArea/components/LegendCardHeader/index.js\";\nimport Bubbles from \"./components/Bubbles.js\";\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/index.js

@@ -5,8 +5,8 @@ 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');
+var map_js = require('../../../../../../utils/map.js');
+var CustomTooltip = require('../CustomTooltip/index.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -35,11 +35,11 @@ function Bubble({
     {
       interactive: true,
       eventHandlers: {
-        mouseover: (e) => map.highlightFeature(e, highlightStyle),
-        mouseout: (e) => map.resetHighlight(e, defaultStyle)
+        mouseover: (e) => map_js.highlightFeature(e, highlightStyle),
+        mouseout: (e) => map_js.resetHighlight(e, defaultStyle)
       },
       pathOptions: {
-        fillColor: map.getColorFromLegendSet(legends, data.data),
+        fillColor: map_js.getColorFromLegendSet(legends, data.data),
         fillOpacity: 1,
         color: ui.colors.grey900,
         weight: 1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/index.tsx"],"names":[],"mappings":"AAyCI,mBAeI,WAfJ;AAzCJ,SAAS,cAAc;AAEvB,SAAS,eAAe;AACxB,SAAgB,eAAe;AAC/B,SAAS,oBAAoB;AAC7B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,OAAO,mBAAmB;AAE1B,MAAM,eAAe;AAAA,EACpB,QAAQ;AACT;AACA,MAAM,iBAAiB;AAAA,EACrB,QAAQ;AACV;AAEe,SAAR,OAAwB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,EAAE,SAAS,MAAM,MAAM,IAAI,QAAQ,CAAC;AAE1C,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,SAAS,QAAQ,aAAa,EAAE,UAAU,EAAE,UAAU;AAE5D,QAAM,eAAe,QAAQ,MAAM;AACjC,YAAS,SAAS,MAAM,QAAQ,OAAO,MAAO;AAAA,EAChD,GAAG,CAAC,QAAQ,MAAM,WAAW,CAAC;AAE9B,SACE,gCACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAe;AAAA,QACb,WAAW,CAAC,MAAM,iBAAiB,GAAG,cAAc;AAAA,QACpD,UAAU,CAAC,MAAM,eAAe,GAAG,YAAY;AAAA,MACjD;AAAA,MACA,aAAa;AAAA,QACX,WAAW,sBAAsB,SAAS,KAAK,IAAI;AAAA,QACnD,aAAa;AAAA,QACb,OAAO,OAAO;AAAA,QACd,QAAQ;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,8BAAC,iBAAc,MAAY;AAAA;AAAA,EAC7B,GACF;AAEJ","sourcesContent":["import { colors } from \"@dhis2/ui\";\nimport type { Legend } from \"@hisptz/dhis2-utils\";\nimport { geoJSON } from \"leaflet\";\nimport React, { useMemo } from \"react\";\nimport { CircleMarker } from \"react-leaflet\";\nimport {\n\tgetColorFromLegendSet,\n\thighlightFeature,\n\tresetHighlight,\n} from \"../../../../../../utils/map\";\nimport { ThematicLayerData } from \"../../../../interfaces\";\nimport CustomTooltip from \"../CustomTooltip\";\n\nconst defaultStyle = {\n\tweight: 1,\n};\nconst highlightStyle = {\n  weight: 2,\n};\n\nexport default function Bubble({\n  data,\n  highestData,\n  legends,\n  radius,\n}: {\n  data: ThematicLayerData;\n  highestData: number;\n  legends: Legend[];\n  radius?: { min: number; max: number };\n}) {\n  const { orgUnit, data: value } = data ?? {};\n\n  const geoJSONObject = orgUnit.geoJSON;\n  const center = geoJSON(geoJSONObject).getBounds().getCenter();\n\n  const circleRadius = useMemo(() => {\n    return ((value ?? 0) * (radius?.max ?? 50)) / highestData;\n  }, [radius, data, highestData]);\n\n  return (\n    <>\n      <CircleMarker\n        interactive\n        eventHandlers={{\n          mouseover: (e) => highlightFeature(e, highlightStyle),\n          mouseout: (e) => resetHighlight(e, defaultStyle),\n        }}\n        pathOptions={{\n          fillColor: getColorFromLegendSet(legends, data.data),\n          fillOpacity: 1,\n          color: colors.grey900,\n          weight: 1,\n        }}\n        radius={circleRadius}\n        center={center}>\n        <CustomTooltip data={data} />\n      </CircleMarker>\n    </>\n  );\n}\n"]}
+{"version":3,"sources":["../../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/index.tsx"],"names":[],"mappings":"AAyCE,mBAgBE,WAhBF;AAzCF,SAAS,cAAc;AAEvB,SAAS,eAAe;AACxB,SAAgB,eAAe;AAC/B,SAAS,oBAAoB;AAC7B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,OAAO,mBAAmB;AAE1B,MAAM,eAAe;AAAA,EACpB,QAAQ;AACT;AACA,MAAM,iBAAiB;AAAA,EACtB,QAAQ;AACT;AAEe,SAAR,OAAwB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAKG;AACF,QAAM,EAAE,SAAS,MAAM,MAAM,IAAI,QAAQ,CAAC;AAE1C,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,SAAS,QAAQ,aAAa,EAAE,UAAU,EAAE,UAAU;AAE5D,QAAM,eAAe,QAAQ,MAAM;AAClC,YAAS,SAAS,MAAM,QAAQ,OAAO,MAAO;AAAA,EAC/C,GAAG,CAAC,QAAQ,MAAM,WAAW,CAAC;AAE9B,SACC,gCACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAW;AAAA,MACX,eAAe;AAAA,QACd,WAAW,CAAC,MAAM,iBAAiB,GAAG,cAAc;AAAA,QACpD,UAAU,CAAC,MAAM,eAAe,GAAG,YAAY;AAAA,MAChD;AAAA,MACA,aAAa;AAAA,QACZ,WAAW,sBAAsB,SAAS,KAAK,IAAI;AAAA,QACnD,aAAa;AAAA,QACb,OAAO,OAAO;AAAA,QACd,QAAQ;AAAA,MACT;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MAEA,8BAAC,iBAAc,MAAY;AAAA;AAAA,EAC5B,GACD;AAEF","sourcesContent":["import { colors } from \"@dhis2/ui\";\nimport type { Legend } from \"@hisptz/dhis2-utils\";\nimport { geoJSON } from \"leaflet\";\nimport React, { useMemo } from \"react\";\nimport { CircleMarker } from \"react-leaflet\";\nimport {\n\tgetColorFromLegendSet,\n\thighlightFeature,\n\tresetHighlight,\n} from \"../../../../../../utils/map.js\";\nimport { ThematicLayerData } from \"../../../../interfaces/index.js\";\nimport CustomTooltip from \"../CustomTooltip/index.js\";\n\nconst defaultStyle = {\n\tweight: 1,\n};\nconst highlightStyle = {\n\tweight: 2,\n};\n\nexport default function Bubble({\n\tdata,\n\thighestData,\n\tlegends,\n\tradius,\n}: {\n\tdata: ThematicLayerData;\n\thighestData: number;\n\tlegends: Legend[];\n\tradius?: { min: number; max: number };\n}) {\n\tconst { orgUnit, data: value } = data ?? {};\n\n\tconst geoJSONObject = orgUnit.geoJSON;\n\tconst center = geoJSON(geoJSONObject).getBounds().getCenter();\n\n\tconst circleRadius = useMemo(() => {\n\t\treturn ((value ?? 0) * (radius?.max ?? 50)) / highestData;\n\t}, [radius, data, highestData]);\n\n\treturn (\n\t\t<>\n\t\t\t<CircleMarker\n\t\t\t\tinteractive\n\t\t\t\teventHandlers={{\n\t\t\t\t\tmouseover: (e) => highlightFeature(e, highlightStyle),\n\t\t\t\t\tmouseout: (e) => resetHighlight(e, defaultStyle),\n\t\t\t\t}}\n\t\t\t\tpathOptions={{\n\t\t\t\t\tfillColor: getColorFromLegendSet(legends, data.data),\n\t\t\t\t\tfillOpacity: 1,\n\t\t\t\t\tcolor: colors.grey900,\n\t\t\t\t\tweight: 1,\n\t\t\t\t}}\n\t\t\t\tradius={circleRadius}\n\t\t\t\tcenter={center}\n\t\t\t>\n\t\t\t\t<CustomTooltip data={data} />\n\t\t\t</CircleMarker>\n\t\t</>\n\t);\n}\n"]}

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/components/ChoroplethLegend.js

@@ -6,8 +6,8 @@ var jsxRuntime = require('react/jsx-runtime');
 require('../../../styles/legends.css');
 var ui = require('@dhis2/ui');
 var react = require('react');
-var map = require('../../../../../../../utils/map');
-var LegendCardHeader = require('../../../../LegendArea/components/LegendCardHeader');
+var map_js = require('../../../../../../../utils/map.js');
+var LegendCardHeader = require('../../../../LegendArea/components/LegendCardHeader/index.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -38,9 +38,23 @@ function ChoroplethLegend({
   legends
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "legend-card", ref, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(LegendCardHeader__default.default, { title: dataItem.displayName, collapsible, onCollapse }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      LegendCardHeader__default.default,
+      {
+        title: dataItem.displayName,
+        collapsible,
+        onCollapse
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { margin: "0" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "legend-list pt-8", children: legends?.map((legend) => /* @__PURE__ */ jsxRuntime.jsx(LegendItem, { legend, value: map.getLegendCount(legend, data) }, `${legend?.color}-legend-list`)) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "legend-list pt-8", children: legends?.map((legend) => /* @__PURE__ */ jsxRuntime.jsx(
+      LegendItem,
+      {
+        legend,
+        value: map_js.getLegendCount(legend, data)
+      },
+      `${legend?.color}-legend-list`
+    )) })
   ] });
 }
 var ChoroplethLegend_default = react.forwardRef(ChoroplethLegend);

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/components/ChoroplethLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/components/ChoroplethLegend.tsx"],"names":[],"mappings":"AAmBE,SACC,KADD;AAnBF,OAAO;AACP,SAAS,eAAe;AAExB,SAAgB,kBAAkB;AAClC,SAAS,sBAAsB;AAK/B,OAAO,sBAAsB;AAEtB,SAAS,WAAW;AAAA,EAC1B;AAAA,EACA;AACD,GAGG;AACF,SACC,qBAAC,SAAI,WAAU,eACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,EAAE,iBAAiB,OAAO,MAAM;AAAA;AAAA,IACxC;AAAA,IACA,oBAAC,SAAI,WAAU,qBAAqB,aAAG,OAAO,UAAU,MAAM,OAAO,QAAQ,IAAG;AAAA,IAChF,oBAAC,SAAI,WAAU,qBAAqB,cAAI,KAAK,KAAI;AAAA,KAClD;AAEF;AAEA,SAAS,iBACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,KACA;AACA,SACE,qBAAC,SAAI,WAAU,eAAc,KAC3B;AAAA,wBAAC,oBAAiB,OAAO,SAAS,aAAa,aAA0B,YAAwB;AAAA,IACjG,oBAAC,WAAQ,QAAQ,KAAK;AAAA,IACtB,oBAAC,SAAI,WAAU,oBACZ,mBAAS,IAAI,CAAC,WACb,oBAAC,cAAgD,QAAgB,OAAO,eAAe,QAAQ,IAAI,KAAlF,GAAG,QAAQ,KAAK,cAAqE,CACvG,GACH;AAAA,KACF;AAEJ;AAEA,IAAO,2BAAQ,WAAW,gBAAgB","sourcesContent":["import \"../../../styles/legends.css\";\nimport { Divider } from \"@dhis2/ui\";\nimport type { Legend } from \"@hisptz/dhis2-utils\";\nimport React, { forwardRef } from \"react\";\nimport { getLegendCount } from \"../../../../../../../utils/map\";\nimport {\n\tThematicLayerData,\n\tThematicLayerDataItem,\n} from \"../../../../../interfaces\";\nimport LegendCardHeader from \"../../../../LegendArea/components/LegendCardHeader\";\n\nexport function LegendItem({\n\tlegend,\n\tvalue,\n}: {\n\tlegend: { startValue: number; endValue: number; color: string };\n\tvalue: number;\n}) {\n\treturn (\n\t\t<div className=\"legend-item\">\n\t\t\t<div\n\t\t\t\tclassName=\"legend-item-color\"\n\t\t\t\tstyle={{ backgroundColor: legend.color }}\n\t\t\t/>\n\t\t\t<div className=\"legend-item-label\">{`${legend.startValue} - ${legend.endValue}`}</div>\n\t\t\t<div className=\"legend-item-value\">{`(${value})`}</div>\n\t\t</div>\n\t);\n}\n\nfunction ChoroplethLegend(\n  {\n    dataItem,\n    data,\n    name,\n    collapsible,\n    onCollapse,\n    legends,\n  }: { data: ThematicLayerData[]; dataItem: ThematicLayerDataItem; name?: string; collapsible?: boolean; onCollapse?: () => void; legends: Legend[] },\n  ref: React.LegacyRef<HTMLDivElement> | undefined\n) {\n  return (\n    <div className=\"legend-card\" ref={ref}>\n      <LegendCardHeader title={dataItem.displayName} collapsible={collapsible} onCollapse={onCollapse} />\n      <Divider margin={\"0\"} />\n      <div className=\"legend-list pt-8\">\n        {legends?.map((legend: any) => (\n          <LegendItem key={`${legend?.color}-legend-list`} legend={legend} value={getLegendCount(legend, data)} />\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default forwardRef(ChoroplethLegend);\n"]}
+{"version":3,"sources":["../../../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/components/ChoroplethLegend.tsx"],"names":[],"mappings":"AAmBE,SACC,KADD;AAnBF,OAAO;AACP,SAAS,eAAe;AAExB,SAAgB,kBAAkB;AAClC,SAAS,sBAAsB;AAK/B,OAAO,sBAAsB;AAEtB,SAAS,WAAW;AAAA,EAC1B;AAAA,EACA;AACD,GAGG;AACF,SACC,qBAAC,SAAI,WAAU,eACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,EAAE,iBAAiB,OAAO,MAAM;AAAA;AAAA,IACxC;AAAA,IACA,oBAAC,SAAI,WAAU,qBAAqB,aAAG,OAAO,UAAU,MAAM,OAAO,QAAQ,IAAG;AAAA,IAChF,oBAAC,SAAI,WAAU,qBAAqB,cAAI,KAAK,KAAI;AAAA,KAClD;AAEF;AAEA,SAAS,iBACR;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAQA,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,oBACb,mBAAS,IAAI,CAAC,WACd;AAAA,MAAC;AAAA;AAAA,QAEA;AAAA,QACA,OAAO,eAAe,QAAQ,IAAI;AAAA;AAAA,MAF7B,GAAG,QAAQ,KAAK;AAAA,IAGtB,CACA,GACF;AAAA,KACD;AAEF;AAEA,IAAO,2BAAQ,WAAW,gBAAgB","sourcesContent":["import \"../../../styles/legends.css\";\nimport { Divider } from \"@dhis2/ui\";\nimport type { Legend } from \"@hisptz/dhis2-utils\";\nimport React, { forwardRef } from \"react\";\nimport { getLegendCount } from \"../../../../../../../utils/map.js\";\nimport {\n\tThematicLayerData,\n\tThematicLayerDataItem,\n} from \"../../../../../interfaces/index.js\";\nimport LegendCardHeader from \"../../../../LegendArea/components/LegendCardHeader/index.js\";\n\nexport function LegendItem({\n\tlegend,\n\tvalue,\n}: {\n\tlegend: { startValue: number; endValue: number; color: string };\n\tvalue: number;\n}) {\n\treturn (\n\t\t<div className=\"legend-item\">\n\t\t\t<div\n\t\t\t\tclassName=\"legend-item-color\"\n\t\t\t\tstyle={{ backgroundColor: legend.color }}\n\t\t\t/>\n\t\t\t<div className=\"legend-item-label\">{`${legend.startValue} - ${legend.endValue}`}</div>\n\t\t\t<div className=\"legend-item-value\">{`(${value})`}</div>\n\t\t</div>\n\t);\n}\n\nfunction ChoroplethLegend(\n\t{\n\t\tdataItem,\n\t\tdata,\n\t\tname,\n\t\tcollapsible,\n\t\tonCollapse,\n\t\tlegends,\n\t}: {\n\t\tdata: ThematicLayerData[];\n\t\tdataItem: ThematicLayerDataItem;\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\tcollapsible={collapsible}\n\t\t\t\tonCollapse={onCollapse}\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{legends?.map((legend: any) => (\n\t\t\t\t\t<LegendItem\n\t\t\t\t\t\tkey={`${legend?.color}-legend-list`}\n\t\t\t\t\t\tlegend={legend}\n\t\t\t\t\t\tvalue={getLegendCount(legend, data)}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default forwardRef(ChoroplethLegend);\n"]}

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/index.js

@@ -3,8 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@dhis2/ui');
 var reactLeaflet = require('react-leaflet');
-var map = require('../../../../../../utils/map');
-var CustomTooltip = require('../CustomTooltip');
+var map_js = require('../../../../../../utils/map.js');
+var CustomTooltip = require('../CustomTooltip/index.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -16,18 +16,21 @@ const defaultStyle = {
 const highlightStyle = {
   weight: 2
 };
-function Choropleth({ data, legends }) {
+function Choropleth({
+  data,
+  legends
+}) {
   const { orgUnit } = data;
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
     reactLeaflet.GeoJSON,
     {
       data: orgUnit.geoJSON,
       eventHandlers: {
-        mouseover: (e) => map.highlightFeature(e, highlightStyle),
-        mouseout: (e) => map.resetHighlight(e, defaultStyle)
+        mouseover: (e) => map_js.highlightFeature(e, highlightStyle),
+        mouseout: (e) => map_js.resetHighlight(e, defaultStyle)
       },
       pathOptions: {
-        fillColor: map.getColorFromLegendSet(legends, data.data),
+        fillColor: map_js.getColorFromLegendSet(legends, data.data),
         fillOpacity: 1,
         color: ui.colors.grey900,
         weight: 1

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/index.tsx"],"names":[],"mappings":"AAuBI,mBAcI,WAdJ;AAvBJ,SAAS,cAAc;AAGvB,SAAS,eAAe;AAExB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,OAAO,mBAAmB;AAE1B,MAAM,eAAe;AAAA,EACpB,QAAQ;AACT;AACA,MAAM,iBAAiB;AAAA,EACrB,QAAQ;AACV;AAEe,SAAR,WAA4B,EAAE,MAAM,QAAQ,GAAyG;AAC1J,QAAM,EAAE,QAAQ,IAAI;AACpB,SACE,gCACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ;AAAA,MACd,eAAe;AAAA,QACb,WAAW,CAAC,MAAM,iBAAiB,GAAG,cAAc;AAAA,QACpD,UAAU,CAAC,MAAM,eAAe,GAAG,YAAY;AAAA,MACjD;AAAA,MACA,aAAa;AAAA,QACX,WAAW,sBAAsB,SAAS,KAAK,IAAI;AAAA,QACnD,aAAa;AAAA,QACb,OAAO,OAAO;AAAA,QACd,QAAQ;AAAA,MACV;AAAA,MAEA,8BAAC,iBAAc,MAAY;AAAA;AAAA,IADtB,GAAG,KAAK,SAAS,EAAE;AAAA,EAE1B,GACF;AAEJ","sourcesContent":["import { colors } from \"@dhis2/ui\";\nimport type { Legend } from \"@hisptz/dhis2-utils\";\nimport React from \"react\";\nimport { GeoJSON } from \"react-leaflet\";\nimport { MapOrgUnit } from \"../../../../../../interfaces\";\nimport {\n\tgetColorFromLegendSet,\n\thighlightFeature,\n\tresetHighlight,\n} from \"../../../../../../utils/map\";\nimport { ThematicLayerDataItem } from \"../../../../interfaces\";\nimport CustomTooltip from \"../CustomTooltip\";\n\nconst defaultStyle = {\n\tweight: 1,\n};\nconst highlightStyle = {\n  weight: 2,\n};\n\nexport default function Choropleth({ data, legends }: { data: { orgUnit: MapOrgUnit; data?: number; dataItem: ThematicLayerDataItem }; legends: Legend[] }) {\n  const { orgUnit } = data;\n  return (\n    <>\n      <GeoJSON\n        data={orgUnit.geoJSON}\n        eventHandlers={{\n          mouseover: (e) => highlightFeature(e, highlightStyle),\n          mouseout: (e) => resetHighlight(e, defaultStyle),\n        }}\n        pathOptions={{\n          fillColor: getColorFromLegendSet(legends, data.data),\n          fillOpacity: 1,\n          color: colors.grey900,\n          weight: 1,\n        }}\n        key={`${data.dataItem.id}-layer`}>\n        <CustomTooltip data={data} />\n      </GeoJSON>\n    </>\n  );\n}\n"]}
+{"version":3,"sources":["../../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/index.tsx"],"names":[],"mappings":"AAiCE,mBAeE,WAfF;AAjCF,SAAS,cAAc;AAGvB,SAAS,eAAe;AAExB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,OAAO,mBAAmB;AAE1B,MAAM,eAAe;AAAA,EACpB,QAAQ;AACT;AACA,MAAM,iBAAiB;AAAA,EACtB,QAAQ;AACT;AAEe,SAAR,WAA4B;AAAA,EAClC;AAAA,EACA;AACD,GAOG;AACF,QAAM,EAAE,QAAQ,IAAI;AACpB,SACC,gCACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAM,QAAQ;AAAA,MACd,eAAe;AAAA,QACd,WAAW,CAAC,MAAM,iBAAiB,GAAG,cAAc;AAAA,QACpD,UAAU,CAAC,MAAM,eAAe,GAAG,YAAY;AAAA,MAChD;AAAA,MACA,aAAa;AAAA,QACZ,WAAW,sBAAsB,SAAS,KAAK,IAAI;AAAA,QACnD,aAAa;AAAA,QACb,OAAO,OAAO;AAAA,QACd,QAAQ;AAAA,MACT;AAAA,MAGA,8BAAC,iBAAc,MAAY;AAAA;AAAA,IAFtB,GAAG,KAAK,SAAS,EAAE;AAAA,EAGzB,GACD;AAEF","sourcesContent":["import { colors } from \"@dhis2/ui\";\nimport type { Legend } from \"@hisptz/dhis2-utils\";\nimport React from \"react\";\nimport { GeoJSON } from \"react-leaflet\";\nimport { MapOrgUnit } from \"../../../../../../interfaces/index.js\";\nimport {\n\tgetColorFromLegendSet,\n\thighlightFeature,\n\tresetHighlight,\n} from \"../../../../../../utils/map.js\";\nimport { ThematicLayerDataItem } from \"../../../../interfaces/index.js\";\nimport CustomTooltip from \"../CustomTooltip/index.js\";\n\nconst defaultStyle = {\n\tweight: 1,\n};\nconst highlightStyle = {\n\tweight: 2,\n};\n\nexport default function Choropleth({\n\tdata,\n\tlegends,\n}: {\n\tdata: {\n\t\torgUnit: MapOrgUnit;\n\t\tdata?: number;\n\t\tdataItem: ThematicLayerDataItem;\n\t};\n\tlegends: Legend[];\n}) {\n\tconst { orgUnit } = data;\n\treturn (\n\t\t<>\n\t\t\t<GeoJSON\n\t\t\t\tdata={orgUnit.geoJSON}\n\t\t\t\teventHandlers={{\n\t\t\t\t\tmouseover: (e) => highlightFeature(e, highlightStyle),\n\t\t\t\t\tmouseout: (e) => resetHighlight(e, defaultStyle),\n\t\t\t\t}}\n\t\t\t\tpathOptions={{\n\t\t\t\t\tfillColor: getColorFromLegendSet(legends, data.data),\n\t\t\t\t\tfillOpacity: 1,\n\t\t\t\t\tcolor: colors.grey900,\n\t\t\t\t\tweight: 1,\n\t\t\t\t}}\n\t\t\t\tkey={`${data.dataItem.id}-layer`}\n\t\t\t>\n\t\t\t\t<CustomTooltip data={data} />\n\t\t\t</GeoJSON>\n\t\t</>\n\t);\n}\n"]}

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/CustomTooltip/index.js

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var i18n = require('@dhis2/d2-i18n');
 var reactLeaflet = require('react-leaflet');
-var hooks = require('../../../../../MapProvider/hooks');
+var index_js = require('../../../../../MapProvider/hooks/index.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -13,7 +13,7 @@ function CustomTooltip({
   data: dataObject
 }) {
   const { dataItem, orgUnit, data } = dataObject ?? {};
-  const { periods } = hooks.useMapPeriods() ?? {};
+  const { periods } = index_js.useMapPeriods() ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactLeaflet.Pane,
     {

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/CustomTooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/components/CustomTooltip/index.tsx"],"names":[],"mappings":"AAmBG,SAIC,KAJD;AAnBH,OAAO,UAAU;AAEjB,SAAS,MAAM,OAAO,eAAe;AACrC,SAAS,qBAAqB;AAGf,SAAR,cAA+B;AAAA,EACrC,MAAM;AACP,GAEG;AACF,QAAM,EAAE,UAAU,SAAS,KAAK,IAAI,cAAc,CAAC;AACnD,QAAM,EAAE,QAAQ,IAAI,cAAc,KAAK,CAAC;AAExC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAM,GAAG,SAAS,WAAW,IAAI,QAAQ,EAAE;AAAA,MAC3C,MAAK;AAAA,MAEL;AAAA,6BAAC,WACC;AAAA,mBAAS;AAAA,UAAK;AAAA,UAAG;AAAA,UAAK;AAAA,WACxB;AAAA,QACA,qBAAC,SAAM,UAAU,IAChB;AAAA,8BAAC,QAAG,OAAO,EAAE,QAAQ,EAAE,GAAI,mBAAS,MAAK;AAAA,UACzC,oBAAC,SAAK,oBAAU,aAAY;AAAA,UAC5B,oBAAC,SAAK,mBAAS,IAAI,CAAC,WAAW,OAAO,IAAI,EAAE,KAAK,GAAG,GAAE;AAAA,UACtD,qBAAC,SACC;AAAA,iBAAK,EAAE,OAAO;AAAA,YAAE;AAAA,YAAG;AAAA,aACrB;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAEF","sourcesContent":["import i18n from \"@dhis2/d2-i18n\";\nimport React from \"react\";\nimport { Pane, Popup, Tooltip } from \"react-leaflet\";\nimport { useMapPeriods } from \"../../../../../MapProvider/hooks\";\nimport { ThematicLayerData } from \"../../../../interfaces\";\n\nexport default function CustomTooltip({\n\tdata: dataObject,\n}: {\n\tdata: ThematicLayerData;\n}) {\n\tconst { dataItem, orgUnit, data } = dataObject ?? {};\n\tconst { periods } = useMapPeriods() ?? {};\n\n\treturn (\n\t\t<Pane\n\t\t\tname={`${dataItem.displayName}-${orgUnit.id}-popup-pane`}\n\t\t\tpane=\"popupPane\"\n\t\t>\n\t\t\t<Tooltip>\n\t\t\t\t{orgUnit?.name} ({data})\n\t\t\t</Tooltip>\n\t\t\t<Popup minWidth={80}>\n\t\t\t\t<h3 style={{ margin: 0 }}>{orgUnit?.name}</h3>\n\t\t\t\t<div>{dataItem?.displayName}</div>\n\t\t\t\t<div>{periods?.map((period) => period.name).join(\",\")}</div>\n\t\t\t\t<div>\n\t\t\t\t\t{i18n.t(\"Value\")}: {data}\n\t\t\t\t</div>\n\t\t\t</Popup>\n\t\t</Pane>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/components/CustomTooltip/index.tsx"],"names":[],"mappings":"AAmBG,SAIC,KAJD;AAnBH,OAAO,UAAU;AAEjB,SAAS,MAAM,OAAO,eAAe;AACrC,SAAS,qBAAqB;AAGf,SAAR,cAA+B;AAAA,EACrC,MAAM;AACP,GAEG;AACF,QAAM,EAAE,UAAU,SAAS,KAAK,IAAI,cAAc,CAAC;AACnD,QAAM,EAAE,QAAQ,IAAI,cAAc,KAAK,CAAC;AAExC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAM,GAAG,SAAS,WAAW,IAAI,QAAQ,EAAE;AAAA,MAC3C,MAAK;AAAA,MAEL;AAAA,6BAAC,WACC;AAAA,mBAAS;AAAA,UAAK;AAAA,UAAG;AAAA,UAAK;AAAA,WACxB;AAAA,QACA,qBAAC,SAAM,UAAU,IAChB;AAAA,8BAAC,QAAG,OAAO,EAAE,QAAQ,EAAE,GAAI,mBAAS,MAAK;AAAA,UACzC,oBAAC,SAAK,oBAAU,aAAY;AAAA,UAC5B,oBAAC,SAAK,mBAAS,IAAI,CAAC,WAAW,OAAO,IAAI,EAAE,KAAK,GAAG,GAAE;AAAA,UACtD,qBAAC,SACC;AAAA,iBAAK,EAAE,OAAO;AAAA,YAAE;AAAA,YAAG;AAAA,aACrB;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAEF","sourcesContent":["import i18n from \"@dhis2/d2-i18n\";\nimport React from \"react\";\nimport { Pane, Popup, Tooltip } from \"react-leaflet\";\nimport { useMapPeriods } from \"../../../../../MapProvider/hooks/index.js\";\nimport { ThematicLayerData } from \"../../../../interfaces/index.js\";\n\nexport default function CustomTooltip({\n\tdata: dataObject,\n}: {\n\tdata: ThematicLayerData;\n}) {\n\tconst { dataItem, orgUnit, data } = dataObject ?? {};\n\tconst { periods } = useMapPeriods() ?? {};\n\n\treturn (\n\t\t<Pane\n\t\t\tname={`${dataItem.displayName}-${orgUnit.id}-popup-pane`}\n\t\t\tpane=\"popupPane\"\n\t\t>\n\t\t\t<Tooltip>\n\t\t\t\t{orgUnit?.name} ({data})\n\t\t\t</Tooltip>\n\t\t\t<Popup minWidth={80}>\n\t\t\t\t<h3 style={{ margin: 0 }}>{orgUnit?.name}</h3>\n\t\t\t\t<div>{dataItem?.displayName}</div>\n\t\t\t\t<div>{periods?.map((period) => period.name).join(\",\")}</div>\n\t\t\t\t<div>\n\t\t\t\t\t{i18n.t(\"Value\")}: {data}\n\t\t\t\t</div>\n\t\t\t</Popup>\n\t\t</Pane>\n\t);\n}\n"]}

package/dist/components/Map/components/MapLayer/components/ThematicLayer/hooks/config.js

@@ -2,10 +2,10 @@
 
 var lodash = require('lodash');
 var react = require('react');
-var state = require('../../../../../state');
+var index_js = require('../../../../../state/index.js');
 
 function useThematicLayer(layerId) {
-  const { layers } = react.useContext(state.MapLayersContext);
+  const { layers } = react.useContext(index_js.MapLayersContext);
   return lodash.find(layers, ["id", layerId]);
 }
 

package/dist/components/Map/components/MapLayer/components/ThematicLayer/hooks/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/hooks/config.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAGlB,SAAR,iBACN,SACkC;AAClC,QAAM,EAAE,OAAO,IAAI,WAAW,gBAAgB;AAE9C,SAAO,KAAK,QAAiC,CAAC,MAAM,OAAO,CAAC;AAC7D","sourcesContent":["import { find } from \"lodash\";\nimport { useContext } from \"react\";\nimport { MapLayersContext } from \"../../../../../state\";\nimport { CustomThematicLayer } from \"../../../interfaces\";\n\nexport default function useThematicLayer(\n\tlayerId: string,\n): CustomThematicLayer | undefined {\n\tconst { layers } = useContext(MapLayersContext);\n\n\treturn find(layers as CustomThematicLayer[], [\"id\", layerId]);\n}\n"]}
+{"version":3,"sources":["../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/hooks/config.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAGlB,SAAR,iBACN,SACkC;AAClC,QAAM,EAAE,OAAO,IAAI,WAAW,gBAAgB;AAE9C,SAAO,KAAK,QAAiC,CAAC,MAAM,OAAO,CAAC;AAC7D","sourcesContent":["import { find } from \"lodash\";\nimport { useContext } from \"react\";\nimport { MapLayersContext } from \"../../../../../state/index.js\";\nimport { CustomThematicLayer } from \"../../../interfaces/index.js\";\n\nexport default function useThematicLayer(\n\tlayerId: string,\n): CustomThematicLayer | undefined {\n\tconst { layers } = useContext(MapLayersContext);\n\n\treturn find(layers as CustomThematicLayer[], [\"id\", layerId]);\n}\n"]}

package/dist/components/Map/components/MapLayer/components/ThematicLayer/index.js

@@ -3,9 +3,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var lodash = require('lodash');
 var reactLeaflet = require('react-leaflet');
-var Bubble = require('./components/Bubble');
-var Choropleth = require('./components/Choropleth');
-var useThematicLayer = require('./hooks/config');
+var Bubble = require('./components/Bubble/index.js');
+var Choropleth = require('./components/Choropleth/index.js');
+var useThematicLayer = require('./hooks/config.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/dist/components/Map/components/MapLayer/components/ThematicLayer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/index.tsx"],"names":[],"mappings":"AAwBE,mBAWM,KAHH,YARH;AAxBF,SAAS,YAAY;AAErB,SAAS,YAAY,eAAe,YAAY;AAEhD,OAAO,YAAY;AACnB,OAAO,gBAAgB;AACvB,OAAO,sBAAsB;AAEd,SAAR,cAA+B;AAAA,EACrC;AAAA,EACA;AACD,GAGG;AACF,QAAM,QAAQ,iBAAiB,OAAO;AAEtC,MAAI,CAAC,OAAO;AACX,WAAO;AAAA,EACR;AAEA,QAAM,EAAE,MAAM,UAAU,MAAM,MAAM,SAAS,QAAQ,IAAI,SAAS,CAAC;AACnE,QAAM,aAAa,QAAQ,SAAS;AACpC,SACC,gCACC,8BAAC,cAAc,SAAd,EAAsB,SAAS,SAAS,MAAM,YAC9C;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,QAAQ,SAAS,WAAW,MAAM,OAAO,QAAQ;AAAA,MAClD;AAAA,MACA,MAAM;AAAA,MAEN,+BAAC,cACC;AAAA,cAAM;AAAA,UAAI,CAAC,UACX,SAAS,eACR;AAAA,YAAC;AAAA;AAAA,cACA,SAAS,WAAW,CAAC;AAAA,cACrB,MAAM;AAAA;AAAA,YACD,GAAG,OAAO,UAAU,EAAE,IAAI,OAAO,SAAS,EAAE;AAAA,UAClD,IACG;AAAA,QACL;AAAA,QACC,MAAM;AAAA,UAAI,CAAC,UACX,SAAS,WACR;AAAA,YAAC;AAAA;AAAA,cACA,QACE,OAA6B;AAAA,cAE/B,SAAS,WAAW,CAAC;AAAA,cACrB,aAAa,KAAK,IAAI,GAAG,QAAQ;AAAA,cACjC,MAAM;AAAA;AAAA,YACD,GAAG,OAAO,UAAU,EAAE,IAAI,OAAO,SAAS,EAAE;AAAA,UAClD,IACG;AAAA,QACL;AAAA,SACD;AAAA;AAAA,EACD,GACD,GACD;AAEF","sourcesContent":["import { last } from \"lodash\";\nimport React from \"react\";\nimport { LayerGroup, LayersControl, Pane } from \"react-leaflet\";\nimport { CustomBubbleLayer } from \"../../interfaces\";\nimport Bubble from \"./components/Bubble\";\nimport Choropleth from \"./components/Choropleth\";\nimport useThematicLayer from \"./hooks/config\";\n\nexport default function ThematicLayer({\n\tlayerId,\n\tindex,\n}: {\n\tlayerId: string;\n\tindex: number;\n}) {\n\tconst layer = useThematicLayer(layerId);\n\n\tif (!layer) {\n\t\treturn null;\n\t}\n\n\tconst { type, dataItem, name, data, enabled, legends } = layer ?? {};\n\tconst uniqueName = name ?? dataItem.displayName;\n\treturn (\n\t\t<>\n\t\t\t<LayersControl.Overlay checked={enabled} name={uniqueName}>\n\t\t\t\t<Pane\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tzIndex: type === \"bubble\" ? 500 : 500 - (index + 1),\n\t\t\t\t\t}}\n\t\t\t\t\tname={uniqueName}\n\t\t\t\t>\n\t\t\t\t\t<LayerGroup>\n\t\t\t\t\t\t{data?.map((datum) =>\n\t\t\t\t\t\t\ttype === \"choropleth\" ? (\n\t\t\t\t\t\t\t\t<Choropleth\n\t\t\t\t\t\t\t\t\tlegends={legends ?? []}\n\t\t\t\t\t\t\t\t\tdata={datum}\n\t\t\t\t\t\t\t\t\tkey={`${datum?.dataItem?.id}-${datum?.orgUnit?.id}-layer`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : null,\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{data?.map((datum) =>\n\t\t\t\t\t\t\ttype === \"bubble\" ? (\n\t\t\t\t\t\t\t\t<Bubble\n\t\t\t\t\t\t\t\t\tradius={\n\t\t\t\t\t\t\t\t\t\t(layer as CustomBubbleLayer)?.radius\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tlegends={legends ?? []}\n\t\t\t\t\t\t\t\t\thighestData={last(data)?.data ?? 1}\n\t\t\t\t\t\t\t\t\tdata={datum}\n\t\t\t\t\t\t\t\t\tkey={`${datum?.dataItem?.id}-${datum?.orgUnit?.id}-layer`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : null,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</LayerGroup>\n\t\t\t\t</Pane>\n\t\t\t</LayersControl.Overlay>\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/index.tsx"],"names":[],"mappings":"AAwBE,mBAWM,KAHH,YARH;AAxBF,SAAS,YAAY;AAErB,SAAS,YAAY,eAAe,YAAY;AAEhD,OAAO,YAAY;AACnB,OAAO,gBAAgB;AACvB,OAAO,sBAAsB;AAEd,SAAR,cAA+B;AAAA,EACrC;AAAA,EACA;AACD,GAGG;AACF,QAAM,QAAQ,iBAAiB,OAAO;AAEtC,MAAI,CAAC,OAAO;AACX,WAAO;AAAA,EACR;AAEA,QAAM,EAAE,MAAM,UAAU,MAAM,MAAM,SAAS,QAAQ,IAAI,SAAS,CAAC;AACnE,QAAM,aAAa,QAAQ,SAAS;AACpC,SACC,gCACC,8BAAC,cAAc,SAAd,EAAsB,SAAS,SAAS,MAAM,YAC9C;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,QAAQ,SAAS,WAAW,MAAM,OAAO,QAAQ;AAAA,MAClD;AAAA,MACA,MAAM;AAAA,MAEN,+BAAC,cACC;AAAA,cAAM;AAAA,UAAI,CAAC,UACX,SAAS,eACR;AAAA,YAAC;AAAA;AAAA,cACA,SAAS,WAAW,CAAC;AAAA,cACrB,MAAM;AAAA;AAAA,YACD,GAAG,OAAO,UAAU,EAAE,IAAI,OAAO,SAAS,EAAE;AAAA,UAClD,IACG;AAAA,QACL;AAAA,QACC,MAAM;AAAA,UAAI,CAAC,UACX,SAAS,WACR;AAAA,YAAC;AAAA;AAAA,cACA,QACE,OAA6B;AAAA,cAE/B,SAAS,WAAW,CAAC;AAAA,cACrB,aAAa,KAAK,IAAI,GAAG,QAAQ;AAAA,cACjC,MAAM;AAAA;AAAA,YACD,GAAG,OAAO,UAAU,EAAE,IAAI,OAAO,SAAS,EAAE;AAAA,UAClD,IACG;AAAA,QACL;AAAA,SACD;AAAA;AAAA,EACD,GACD,GACD;AAEF","sourcesContent":["import { last } from \"lodash\";\nimport React from \"react\";\nimport { LayerGroup, LayersControl, Pane } from \"react-leaflet\";\nimport { CustomBubbleLayer } from \"../../interfaces/index.js\";\nimport Bubble from \"./components/Bubble/index.js\";\nimport Choropleth from \"./components/Choropleth/index.js\";\nimport useThematicLayer from \"./hooks/config.js\";\n\nexport default function ThematicLayer({\n\tlayerId,\n\tindex,\n}: {\n\tlayerId: string;\n\tindex: number;\n}) {\n\tconst layer = useThematicLayer(layerId);\n\n\tif (!layer) {\n\t\treturn null;\n\t}\n\n\tconst { type, dataItem, name, data, enabled, legends } = layer ?? {};\n\tconst uniqueName = name ?? dataItem.displayName;\n\treturn (\n\t\t<>\n\t\t\t<LayersControl.Overlay checked={enabled} name={uniqueName}>\n\t\t\t\t<Pane\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tzIndex: type === \"bubble\" ? 500 : 500 - (index + 1),\n\t\t\t\t\t}}\n\t\t\t\t\tname={uniqueName}\n\t\t\t\t>\n\t\t\t\t\t<LayerGroup>\n\t\t\t\t\t\t{data?.map((datum) =>\n\t\t\t\t\t\t\ttype === \"choropleth\" ? (\n\t\t\t\t\t\t\t\t<Choropleth\n\t\t\t\t\t\t\t\t\tlegends={legends ?? []}\n\t\t\t\t\t\t\t\t\tdata={datum}\n\t\t\t\t\t\t\t\t\tkey={`${datum?.dataItem?.id}-${datum?.orgUnit?.id}-layer`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : null,\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{data?.map((datum) =>\n\t\t\t\t\t\t\ttype === \"bubble\" ? (\n\t\t\t\t\t\t\t\t<Bubble\n\t\t\t\t\t\t\t\t\tradius={\n\t\t\t\t\t\t\t\t\t\t(layer as CustomBubbleLayer)?.radius\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tlegends={legends ?? []}\n\t\t\t\t\t\t\t\t\thighestData={last(data)?.data ?? 1}\n\t\t\t\t\t\t\t\t\tdata={datum}\n\t\t\t\t\t\t\t\t\tkey={`${datum?.dataItem?.id}-${datum?.orgUnit?.id}-layer`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : null,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</LayerGroup>\n\t\t\t\t</Pane>\n\t\t\t</LayersControl.Overlay>\n\t\t</>\n\t);\n}\n"]}

package/dist/components/Map/components/MapLayer/components/ThematicLayer/styles/legends.css

@@ -0,0 +1,56 @@
+.legend-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding: 0.5rem;
+  border-radius: 0.2rem;
+  background-color: #fff;
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
+  border: 2px solid rgba(0, 0, 0, 0.2);
+}
+.legend-card.collapsed {
+  padding: 0 !important;
+  float: right;
+}
+.legend-header {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+.legend-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+  padding: 0 1rem;
+  gap: 16px;
+  width: 100%;
+}
+.legend-item-color {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 1px;
+}
+.legend-item-label {
+}
+.source-url {
+  background: none !important;
+  line-height: inherit !important;
+  text-align: inherit !important;
+  width: auto !important;
+  height: auto !important;
+  text-decoration: underline !important;
+  color: #0078A8 !important;
+}
+.legend-list {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  gap: 4px;
+}
+/*# sourceMappingURL=legends.css.map */

package/dist/components/Map/components/MapLayer/components/ThematicLayer/styles/legends.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/styles/legends.css"],"sourcesContent":[".legend-card {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    padding: 0.5rem;\n    border-radius: 0.2rem;\n    background-color: #fff;\n    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);\n    border: 2px solid rgba(0, 0, 0, 0.2);\n}\n\n.legend-card.collapsed {\n    padding: 0 !important;\n    float: right;\n}\n\n.legend-header {\n    font-weight: bold;\n    margin-bottom: 0.5rem;\n}\n\n.legend-item {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: start;\n    padding: 0 1rem;\n    gap: 16px;\n    width: 100%;\n}\n\n.legend-item-color {\n    width: 1rem;\n    height: 1rem;\n    border-radius: 1px;\n}\n\n.legend-item-label {\n}\n\n.source-url {\n    background: none !important;\n    line-height: inherit !important;\n    text-align: inherit !important;\n    width: auto !important;\n    height: auto !important;\n    text-decoration: underline !important;\n    color: #0078A8 !important;\n}\n\n.legend-list {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    background-color: #fff;\n    gap: 4px;\n}\n"],"mappings":"AAAA,CAAC;AACG,WAAS;AACT,kBAAgB;AAChB,mBAAiB;AACjB,eAAa;AACb,UAAQ;AACR,WAAS;AACT,iBAAe;AACf,oBAAkB;AAClB,cAAY,EAAE,QAAQ,OAAO,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC3C,UAAQ,IAAI,MAAM,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpC;AAEA,CAbC,WAaW,CAAC;AACT,WAAS;AACT,SAAO;AACX;AAEA,CAAC;AACG,eAAa;AACb,iBAAe;AACnB;AAEA,CAAC;AACG,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,mBAAiB;AACjB,WAAS,EAAE;AACX,OAAK;AACL,SAAO;AACX;AAEA,CAAC;AACG,SAAO;AACP,UAAQ;AACR,iBAAe;AACnB;AAEA,CAAC;AACD;AAEA,CAAC;AACG,cAAY;AACZ,eAAa;AACb,cAAY;AACZ,SAAO;AACP,UAAQ;AACR,mBAAiB;AACjB,SAAO;AACX;AAEA,CAAC;AACG,WAAS;AACT,kBAAgB;AAChB,mBAAiB;AACjB,eAAa;AACb,SAAO;AACP,UAAQ;AACR,oBAAkB;AAClB,OAAK;AACT;","names":[]}

package/dist/components/Map/components/MapLayer/index.js

@@ -1,10 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var BoundaryLayer = require('./components/BoundaryLayer');
-var GoogleEngineLayer = require('./components/GoogleEngineLayer');
-var PointLayer = require('./components/PointLayer');
-var ThematicLayer = require('./components/ThematicLayer');
+var BoundaryLayer = require('./components/BoundaryLayer/index.js');
+var GoogleEngineLayer = require('./components/GoogleEngineLayer/index.js');
+var index_js = require('./components/PointLayer/index.js');
+var ThematicLayer = require('./components/ThematicLayer/index.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -24,7 +24,7 @@ function MapLayer({
     case "choropleth":
       return /* @__PURE__ */ jsxRuntime.jsx(ThematicLayer__default.default, { layerId: layer.id, index });
     case "point":
-      return /* @__PURE__ */ jsxRuntime.jsx(PointLayer.PointLayer, {});
+      return /* @__PURE__ */ jsxRuntime.jsx(index_js.PointLayer, {});
     case "population":
     case "elevation":
     case "footprints":

package/dist/components/Map/components/MapLayer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Map/components/MapLayer/index.tsx"],"names":[],"mappings":"AA0BU;AAzBV,OAAO,mBAAmB;AAC1B,OAAO,uBAAuB;AAC9B,SAAS,kBAAkB;AAC3B,OAAO,mBAAmB;AAQX,SAAR,SAA0B;AAAA,EAChC;AAAA,EACA;AACD,GAOG;AACF,UAAQ,MAAM,MAAM;AAAA,IACnB,KAAK;AAAA,IACL,KAAK;AACJ,aAAO,oBAAC,iBAAe,GAAG,OAAO;AAAA,IAClC,KAAK;AAAA,IACL,KAAK;AACJ,aAAO,oBAAC,iBAAc,SAAS,MAAM,IAAI,OAAc;AAAA,IACxD,KAAK;AACJ,aAAO,oBAAC,cAAW;AAAA,IACpB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACJ,aAAO,oBAAC,qBAAkB,SAAS,MAAM,IAAI;AAAA,IAC9C;AACC,aAAO;AAAA,EACT;AACD","sourcesContent":["import React from \"react\";\nimport BoundaryLayer from \"./components/BoundaryLayer\";\nimport GoogleEngineLayer from \"./components/GoogleEngineLayer\";\nimport { PointLayer } from \"./components/PointLayer\";\nimport ThematicLayer from \"./components/ThematicLayer\";\nimport {\n\tCustomBoundaryLayer,\n\tCustomGoogleEngineLayer,\n\tCustomPointLayer,\n\tCustomThematicLayer,\n} from \"./interfaces\";\n\nexport default function MapLayer({\n\tlayer,\n\tindex,\n}: {\n\tlayer:\n\t\t| CustomThematicLayer\n\t\t| CustomBoundaryLayer\n\t\t| CustomPointLayer\n\t\t| CustomGoogleEngineLayer;\n\tindex: number;\n}) {\n\tswitch (layer.type) {\n\t\tcase \"overlay\":\n\t\tcase \"basemap\":\n\t\t\treturn <BoundaryLayer {...layer} />;\n\t\tcase \"bubble\":\n\t\tcase \"choropleth\":\n\t\t\treturn <ThematicLayer layerId={layer.id} index={index} />;\n\t\tcase \"point\":\n\t\t\treturn <PointLayer />;\n\t\tcase \"population\":\n\t\tcase \"elevation\":\n\t\tcase \"footprints\":\n\t\tcase \"landCover\":\n\t\t\treturn <GoogleEngineLayer layerId={layer.id} />;\n\t\tdefault:\n\t\t\treturn null;\n\t}\n}\n"]}
+{"version":3,"sources":["../../../../../src/components/Map/components/MapLayer/index.tsx"],"names":[],"mappings":"AA0BU;AAzBV,OAAO,mBAAmB;AAC1B,OAAO,uBAAuB;AAC9B,SAAS,kBAAkB;AAC3B,OAAO,mBAAmB;AAQX,SAAR,SAA0B;AAAA,EAChC;AAAA,EACA;AACD,GAOG;AACF,UAAQ,MAAM,MAAM;AAAA,IACnB,KAAK;AAAA,IACL,KAAK;AACJ,aAAO,oBAAC,iBAAe,GAAG,OAAO;AAAA,IAClC,KAAK;AAAA,IACL,KAAK;AACJ,aAAO,oBAAC,iBAAc,SAAS,MAAM,IAAI,OAAc;AAAA,IACxD,KAAK;AACJ,aAAO,oBAAC,cAAW;AAAA,IACpB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACJ,aAAO,oBAAC,qBAAkB,SAAS,MAAM,IAAI;AAAA,IAC9C;AACC,aAAO;AAAA,EACT;AACD","sourcesContent":["import React from \"react\";\nimport BoundaryLayer from \"./components/BoundaryLayer/index.js\";\nimport GoogleEngineLayer from \"./components/GoogleEngineLayer/index.js\";\nimport { PointLayer } from \"./components/PointLayer/index.js\";\nimport ThematicLayer from \"./components/ThematicLayer/index.js\";\nimport {\n\tCustomBoundaryLayer,\n\tCustomGoogleEngineLayer,\n\tCustomPointLayer,\n\tCustomThematicLayer,\n} from \"./interfaces/index.js\";\n\nexport default function MapLayer({\n\tlayer,\n\tindex,\n}: {\n\tlayer:\n\t\t| CustomThematicLayer\n\t\t| CustomBoundaryLayer\n\t\t| CustomPointLayer\n\t\t| CustomGoogleEngineLayer;\n\tindex: number;\n}) {\n\tswitch (layer.type) {\n\t\tcase \"overlay\":\n\t\tcase \"basemap\":\n\t\t\treturn <BoundaryLayer {...layer} />;\n\t\tcase \"bubble\":\n\t\tcase \"choropleth\":\n\t\t\treturn <ThematicLayer layerId={layer.id} index={index} />;\n\t\tcase \"point\":\n\t\t\treturn <PointLayer />;\n\t\tcase \"population\":\n\t\tcase \"elevation\":\n\t\tcase \"footprints\":\n\t\tcase \"landCover\":\n\t\t\treturn <GoogleEngineLayer layerId={layer.id} />;\n\t\tdefault:\n\t\t\treturn null;\n\t}\n}\n"]}

package/dist/components/Map/components/MapLayer/interfaces/index.js

@@ -1,6 +1,11 @@
 'use strict';
 
-const SUPPORTED_EARTH_ENGINE_LAYERS = ["population", "footprints", "elevation", "landCover"];
+const SUPPORTED_EARTH_ENGINE_LAYERS = [
+  "population",
+  "footprints",
+  "elevation",
+  "landCover"
+];
 
 exports.SUPPORTED_EARTH_ENGINE_LAYERS = SUPPORTED_EARTH_ENGINE_LAYERS;
 //# sourceMappingURL=out.js.map