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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/components/Map/components/MapLayer/components/LegendArea/index.tsx"],"names":[],"mappings":"AA0BS,cAkGP,YAlGO;AA1BT,SAAS,QAAQ,cAAc,QAAQ,cAAc;AAErD,SAAS,SAAS,YAAY;AAC9B,OAAO,SAAS,WAAW,QAAQ,gBAAgB;AAEnD,SAAS,qBAAqB;AAC9B;AAAA,EAKC;AAAA,OACM;AACP,OAAO,iBAAiB;AACxB,OAAO,kBAAkB;AACzB,OAAO,sBAAsB;AAC7B,OAAO,uBAAuB;AAC9B,OAAO,aAAa;AACpB,SAAS,qBAAqB;AAE9B,MAAM,iBAAiB;AAEvB,SAAS,mBACR,OACC;AACD,MAAI,MAAM,SAAS,SAAS;AAC3B,WAAO,oBAAC,eAAY,MAAM,MAAM,OAAO;AAAA,EACxC;AAEA,MAAI,8BAA8B,SAAS,MAAM,IAAI,GAAG;AACvD,WACC;AAAA,MAAC;AAAA;AAAA,QACA,MAAM,MAAM,QAAQ;AAAA,QACpB;AAAA;AAAA,IACD;AAAA,EAEF;AAEA,QAAM,EAAE,MAAM,SAAS,SAAS,UAAU,MAAM,MAAM,QAAQ,IAC5D,SAAiC,CAAC;AAEpC,MAAI,CAAC,WAAW,CAAC,SAAS;AACzB,WAAO;AAAA,EACR;AACA,UAAQ,MAAM;AAAA,IACb,KAAK;AACJ,aACC;AAAA,QAAC;AAAA;AAAA,UACA,QACE,OAA6B,UAAU;AAAA,YACvC,KAAK;AAAA,YACL,KAAK;AAAA,UACN;AAAA,UAED,SAAS,WAAW,CAAC;AAAA,UACrB,MAAM,QAAQ,SAAS;AAAA,UACvB;AAAA,UACA,UAAU,KAAK,IAAI,GAAG,YAAY;AAAA;AAAA,MACnC;AAAA,IAEF,KAAK;AACJ,aACC;AAAA,QAAC;AAAA;AAAA,UACA,SAAS,WAAW,CAAC;AAAA,UACrB,MAAM,QAAQ,SAAS;AAAA,UACvB;AAAA,UACA,UAAU,KAAK,IAAI,GAAG,YAAY;AAAA;AAAA,MACnC;AAAA,EAEH;AACD;AAEA,SAAS,oBAAoB;AAAA,EAC5B;AAAA,EACA;AACD,GAGG;AACF,QAAM,YAAY;AAClB,QAAM,aAAa;AACnB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,eAAe,OAAY,IAAI;AACrC,QAAM,gBAAgB,OAAY,IAAI;AACtC,QAAM,MAAM,OAAuB,IAAI;AAEvC,QAAM,eAAe,EAAE,MAAM,OAAO;AACpC,QAAM,iBAAiB;AAAA,IACtB,MAAM;AAAA,IACN,SAAS;AAAA,MACR,QAAQ,CAAC,GAAG,cAAc;AAAA,IAC3B;AAAA,EACD;AAEA,QAAM,eAAe;AAAA,IACpB,MAAM;AAAA,IACN,SAAS,EAAE,aAAa,KAAK;AAAA,EAC9B;AAEA,QAAM,cAAc,MAAM;AACzB,iBAAa,cAAc,OAAO;AAElC,iBAAa,UAAU,WAAW,MAAM;AACvC,qBAAe,IAAI;AAAA,IACpB,GAAG,SAAS;AAAA,EACb;AAEA,QAAM,aAAa,MAAM;AACxB,iBAAa,aAAa,OAAO;AAEjC,kBAAc,UAAU,WAAW,MAAM;AACxC,qBAAe,KAAK;AAAA,IACrB,GAAG,UAAU;AAAA,EACd;AAEA;AAAA,IACC,MAAM,MAAM;AACX,mBAAa,aAAa,OAAO;AACjC,mBAAa,cAAc,OAAO;AAAA,IACnC;AAAA,IACA,CAAC;AAAA,EACF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAG;AAAA,MAC/B,WAAU;AAAA,MAEV;AAAA,4BAAC,gBAAa;AAAA,QACb,eACA;AAAA,UAAC;AAAA;AAAA,YAGA,WAAW,QAAQ,aAAa;AAAA,YAEhC;AAAA,cAAC;AAAA;AAAA,gBACA,WAAW,QAAQ,aAAa;AAAA,gBAChC,WAAW;AAAA,gBAGX,WAAW,CAAC,gBAAgB,cAAc,YAAY;AAAA,gBAEtD;AAAA,kBAAC;AAAA;AAAA,oBACA,OAAO;AAAA,sBACN,iBAAiB,GAAG,OAAO,OAAO;AAAA,sBAClC,cAAc;AAAA,sBACd,OAAO,GAAG,OAAO,KAAK;AAAA,sBACtB,SAAS;AAAA,oBACV;AAAA,oBACA,aAAW;AAAA,oBAEV;AAAA;AAAA,gBACF;AAAA;AAAA,YACD;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF;AAEF;AAEA,SAAS,OAAO;AAAA,EACf;AAAA,EACA;AACD,GAGG;AACF,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,WAAW;AACtD,QAAM,cAAc,cAAc;AAClC,QAAM,aAAa,MAAM;AACxB,QAAI,aAAa;AAChB,mBAAa,CAAC,cAAc,CAAC,SAAS;AAAA,IACvC;AAAA,EACD;AAEA,QAAM,OAAO,KAAK,MAAM,SAAS,QAAQ,QAAQ,CAAyB,GACvE,MAAM;AAET,QAAM,iBAAiB,aAAa,CAAC;AAErC,SACC,oBAAC,SAAI,WAAU,SACb,2BACA,oBAAC,uBAAoB,MAAY,YAAwB,IAEzD,MAAM,SAAS;AAAA,IAAI;AAAA,IAAU,CAAC,UAC7B,MAAM,aAAa,OAAO,EAAE,aAAa,WAAW,CAAC;AAAA,EACtD,GAEF;AAEF;AAEe,SAAR,WAA4B;AAAA,EAClC;AAAA,EACA,SAAS;AACV,GAMG;AACF,QAAM,UAAyB;AAAA,IAC9B,OAAO,OAAO,CAAC,UAAU,MAAM,OAAO,EAAE,IAAI,kBAAkB;AAAA,EAC/D;AACA,QAAM,EAAE,UAAU,YAAY,IAAI,gBAAgB,CAAC;AAEnD,SACC,oBAAC,iBAAc,UACd,8BAAC,SAAI,WAAU,iCACb,mBAAS,IAAI,CAAC,QAAa,UAC3B;AAAA,IAAC;AAAA;AAAA,MACA,aAAa,eAAe;AAAA,MAG3B;AAAA;AAAA,IAFI,GAAG,KAAK;AAAA,EAGd,CACA,GACF,GACD;AAEF","sourcesContent":["import { colors, IconLegend24, Popper, Portal } from \"@dhis2/ui\";\nimport { ControlPosition } from \"leaflet\";\nimport { compact, head } from \"lodash\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { MapLegendConfig } from \"../../../MapArea/interfaces/index.js\";\nimport { CustomControl } from \"../../../MapControls/components/CustomControl/index.js\";\nimport {\n\tCustomBubbleLayer,\n\tCustomGoogleEngineLayer,\n\tCustomPointLayer,\n\tCustomThematicLayer,\n\tSUPPORTED_EARTH_ENGINE_LAYERS,\n} from \"../../interfaces/index.js\";\nimport PointLegend from \"../PointLayer/components/PointLegend/index.js\";\nimport BubbleLegend from \"../ThematicLayer/components/Bubble/components/BubbleLegend/index.js\";\nimport ChoroplethLegend from \"../ThematicLayer/components/Choropleth/components/ChoroplethLegend.js\";\nimport EarthEngineLegend from \"../GoogleEngineLayer/components/EarthEngineLegend.js\";\nimport classes from \"./LegendArea.module.css\";\nimport { usePrintMedia } from \"../../../../hooks/map.js\";\n\nconst TOOLTIP_OFFSET = 4;\n\nfunction getLegendComponent(\n\tlayer: CustomThematicLayer | CustomPointLayer | CustomGoogleEngineLayer,\n) {\n\tif (layer.type === \"point\") {\n\t\treturn <PointLegend name={layer.label} />;\n\t}\n\n\tif (SUPPORTED_EARTH_ENGINE_LAYERS.includes(layer.type)) {\n\t\treturn (\n\t\t\t<EarthEngineLegend\n\t\t\t\tname={layer.name ?? \"\"}\n\t\t\t\tlayer={layer as CustomGoogleEngineLayer}\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst { type, enabled, control, dataItem, name, data, legends } =\n\t\t(layer as CustomThematicLayer) ?? {};\n\n\tif (!enabled || !control) {\n\t\treturn null;\n\t}\n\tswitch (type) {\n\t\tcase \"bubble\":\n\t\t\treturn (\n\t\t\t\t<BubbleLegend\n\t\t\t\t\tradius={\n\t\t\t\t\t\t(layer as CustomBubbleLayer)?.radius ?? {\n\t\t\t\t\t\t\tmin: 0,\n\t\t\t\t\t\t\tmax: 50,\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tlegends={legends ?? []}\n\t\t\t\t\tname={name ?? dataItem.displayName}\n\t\t\t\t\tdata={data}\n\t\t\t\t\tdataItem={head(data)?.dataItem ?? dataItem}\n\t\t\t\t/>\n\t\t\t);\n\t\tcase \"choropleth\":\n\t\t\treturn (\n\t\t\t\t<ChoroplethLegend\n\t\t\t\t\tlegends={legends ?? []}\n\t\t\t\t\tname={name ?? dataItem.displayName}\n\t\t\t\t\tdata={data}\n\t\t\t\t\tdataItem={head(data)?.dataItem ?? dataItem}\n\t\t\t\t/>\n\t\t\t);\n\t}\n}\n\nfunction CollapsedLegendIcon({\n\tonCollapse,\n\tname,\n}: {\n\tname: string;\n\tonCollapse: () => void;\n}) {\n\tconst openDelay = 200;\n\tconst closeDelay = 200;\n\tconst [openTooltip, setOpenTooltip] = useState(false);\n\tconst openTimerRef = useRef<any>(null);\n\tconst closeTimerRef = useRef<any>(null);\n\tconst ref = useRef<HTMLDivElement>(null);\n\n\tconst hideModifier = { name: \"hide\" };\n\tconst offsetModifier = {\n\t\tname: \"offset\",\n\t\toptions: {\n\t\t\toffset: [0, TOOLTIP_OFFSET],\n\t\t},\n\t};\n\n\tconst flipModifier = {\n\t\tname: \"flip\",\n\t\toptions: { altBoundary: true },\n\t};\n\n\tconst onMouseOver = () => {\n\t\tclearTimeout(closeTimerRef.current);\n\n\t\topenTimerRef.current = setTimeout(() => {\n\t\t\tsetOpenTooltip(true);\n\t\t}, openDelay);\n\t};\n\n\tconst onMouseOut = () => {\n\t\tclearTimeout(openTimerRef.current);\n\n\t\tcloseTimerRef.current = setTimeout(() => {\n\t\t\tsetOpenTooltip(false);\n\t\t}, closeDelay);\n\t};\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tclearTimeout(openTimerRef.current);\n\t\t\tclearTimeout(closeTimerRef.current);\n\t\t},\n\t\t[],\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tonMouseOver={onMouseOver}\n\t\t\tonMouseOut={onMouseOut}\n\t\t\tonClick={onCollapse}\n\t\t\tstyle={{ width: 28, height: 28 }}\n\t\t\tclassName=\"legend-card collapsed\"\n\t\t>\n\t\t\t<IconLegend24 />\n\t\t\t{openTooltip && (\n\t\t\t\t<Portal\n\t\t\t\t\t/*\n\t\t\t  // @ts-ignore */\n\t\t\t\t\tclassName={classes[\"map-tooltip\"]}\n\t\t\t\t>\n\t\t\t\t\t<Popper\n\t\t\t\t\t\tclassName={classes[\"map-tooltip\"]}\n\t\t\t\t\t\treference={ref}\n\t\t\t\t\t\t/*\n      // @ts-ignore */\n\t\t\t\t\t\tmodifiers={[offsetModifier, flipModifier, hideModifier]}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tbackgroundColor: `${colors.grey900}`,\n\t\t\t\t\t\t\t\tborderRadius: 3,\n\t\t\t\t\t\t\t\tcolor: `${colors.white}`,\n\t\t\t\t\t\t\t\tpadding: \"4px 6px\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-test={`content`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{name}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Popper>\n\t\t\t\t</Portal>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction Legend({\n\tchildren,\n\tcollapsible,\n}: {\n\tchildren: React.ReactElement;\n\tcollapsible: boolean;\n}) {\n\tconst [collapsed, setCollapsed] = useState(collapsible);\n\tconst inPrintMode = usePrintMedia();\n\tconst onCollapse = () => {\n\t\tif (collapsible) {\n\t\t\tsetCollapsed((prevState) => !prevState);\n\t\t}\n\t};\n\n\tconst name = head(React.Children.toArray(children) as React.ReactElement[])\n\t\t?.props.name;\n\n\tconst shouldCollapse = collapsed && !inPrintMode;\n\n\treturn (\n\t\t<div className=\"w-100\">\n\t\t\t{shouldCollapse ? (\n\t\t\t\t<CollapsedLegendIcon name={name} onCollapse={onCollapse} />\n\t\t\t) : (\n\t\t\t\tReact.Children.map(children, (child) =>\n\t\t\t\t\tReact.cloneElement(child, { collapsible, onCollapse }),\n\t\t\t\t)\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport default function LegendArea({\n\tlayers,\n\tlegends: legendConfig,\n}: {\n\tlayers: Array<\n\t\tCustomThematicLayer | CustomPointLayer | CustomGoogleEngineLayer\n\t>;\n\tposition: ControlPosition;\n\tlegends?: MapLegendConfig;\n}) {\n\tconst legends: JSX.Element[] = compact(\n\t\tlayers.filter((layer) => layer.enabled).map(getLegendComponent),\n\t);\n\tconst { position, collapsible } = legendConfig ?? {};\n\n\treturn (\n\t\t<CustomControl position={position}>\n\t\t\t<div className=\"column gap-16 align-items-end\">\n\t\t\t\t{legends?.map((legend: any, index) => (\n\t\t\t\t\t<Legend\n\t\t\t\t\t\tcollapsible={collapsible ?? true}\n\t\t\t\t\t\tkey={`${index}-map-legend`}\n\t\t\t\t\t>\n\t\t\t\t\t\t{legend}\n\t\t\t\t\t</Legend>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</CustomControl>\n\t);\n}\n"]}

package/dist/esm/components/Map/components/MapLayer/components/PointLayer/components/PointLegend/index.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useConfig } from '@dhis2/app-runtime';
+import { Divider } from '@dhis2/ui';
+import { forwardRef } from 'react';
+import { getIconUrl } from '../../../../../../utils/helpers.js';
+import LegendCardHeader from '../../../LegendArea/components/LegendCardHeader/index.js';
+import { usePointLayer } from '../../hooks/index.js';
+
+function PointLegends({
+  orgUnitGroups,
+  icon,
+  label
+}) {
+  const { baseUrl } = useConfig();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { minWidth: 100, alignItems: "flex-start" },
+      className: "w-100 p-8 legend-list column",
+      children: [
+        icon && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "row gap-16  align-items-center",
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  height: 20,
+                  width: 20,
+                  alt: `${name}-icon`,
+                  src: getIconUrl(icon, { baseUrl })
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { children: label })
+            ]
+          },
+          `${icon}-legend`
+        ),
+        orgUnitGroups.map(({ name: name2, symbol }) => {
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "row gap-16  align-items-center",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    height: 20,
+                    width: 20,
+                    alt: `${name2}-icon`,
+                    src: getIconUrl(symbol ?? "", { baseUrl })
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { children: name2 })
+              ]
+            },
+            `${name2}-legend`
+          );
+        })
+      ]
+    }
+  );
+}
+function PointLegend({ collapsible, onCollapse }, ref) {
+  const pointLayer = usePointLayer();
+  const { label, style } = pointLayer ?? {};
+  return /* @__PURE__ */ jsxs("div", { ref, className: "legend-card", children: [
+    /* @__PURE__ */ jsx(
+      LegendCardHeader,
+      {
+        collapsible,
+        onCollapse,
+        title: label ?? "Points"
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, { margin: "0" }),
+    /* @__PURE__ */ jsx(
+      PointLegends,
+      {
+        label,
+        orgUnitGroups: style?.orgUnitGroups ?? [],
+        icon: style?.icon
+      }
+    )
+  ] });
+}
+var PointLegend_default = forwardRef(PointLegend);
+
+export { PointLegend_default as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../src/components/Map/components/MapLayer/components/PointLayer/components/PointLegend/index.tsx"],"names":["name"],"mappings":"AAwBI,SAIC,KAJD;AAxBJ,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,OAAO,sBAAsB;AAC7B,SAAS,qBAAqB;AAE9B,SAAS,aAAa;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACD,GAIG;AACF,QAAM,EAAE,QAAQ,IAAI,UAAU;AAE9B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,EAAE,UAAU,KAAK,YAAY,aAAa;AAAA,MACjD,WAAU;AAAA,MAET;AAAA,gBACA;AAAA,UAAC;AAAA;AAAA,YAEA,WAAU;AAAA,YAEV;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,QAAQ;AAAA,kBACR,OAAO;AAAA,kBACP,KAAK,GAAG,IAAI;AAAA,kBACZ,KAAK,WAAW,MAAM,EAAE,QAAQ,CAAC;AAAA;AAAA,cAClC;AAAA,cACA,oBAAC,OAAG,iBAAM;AAAA;AAAA;AAAA,UATL,GAAG,IAAI;AAAA,QAUb;AAAA,QAEA,cAAc,IAAI,CAAC,EAAE,MAAAA,OAAM,OAAO,MAAM;AACxC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,WAAU;AAAA,cAEV;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACA,QAAQ;AAAA,oBACR,OAAO;AAAA,oBACP,KAAK,GAAGA,KAAI;AAAA,oBACZ,KAAK,WAAW,UAAU,IAAI,EAAE,QAAQ,CAAC;AAAA;AAAA,gBAC1C;AAAA,gBACA,oBAAC,OAAG,UAAAA,OAAK;AAAA;AAAA;AAAA,YATJ,GAAGA,KAAI;AAAA,UAUb;AAAA,QAEF,CAAC;AAAA;AAAA;AAAA,EACF;AAEF;AAEA,SAAS,YACR,EAAE,aAAa,WAAW,GAC1B,KACC;AACD,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,OAAO,MAAM,IAAI,cAAc,CAAC;AAExC,SACC,qBAAC,SAAI,KAAU,WAAU,eACxB;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,SAAS;AAAA;AAAA,IACjB;AAAA,IACA,oBAAC,WAAQ,QAAQ,KAAK;AAAA,IACtB;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,eAAe,OAAO,iBAAiB,CAAC;AAAA,QACxC,MAAM,OAAO;AAAA;AAAA,IACd;AAAA,KACD;AAEF;AAEA,IAAO,sBAAQ,WAAW,WAAW","sourcesContent":["import { useConfig } from \"@dhis2/app-runtime\";\nimport { Divider } from \"@dhis2/ui\";\nimport React, { forwardRef } from \"react\";\nimport { getIconUrl } from \"../../../../../../utils/helpers.js\";\nimport LegendCardHeader from \"../../../LegendArea/components/LegendCardHeader/index.js\";\nimport { usePointLayer } from \"../../hooks/index.js\";\n\nfunction PointLegends({\n\torgUnitGroups,\n\ticon,\n\tlabel,\n}: {\n\torgUnitGroups: { name: string; symbol: string }[];\n\ticon?: string;\n\tlabel?: string;\n}) {\n\tconst { baseUrl } = useConfig();\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ minWidth: 100, alignItems: \"flex-start\" }}\n\t\t\tclassName=\"w-100 p-8 legend-list column\"\n\t\t>\n\t\t\t{icon && (\n\t\t\t\t<div\n\t\t\t\t\tkey={`${icon}-legend`}\n\t\t\t\t\tclassName=\"row gap-16  align-items-center\"\n\t\t\t\t>\n\t\t\t\t\t<img\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\talt={`${name}-icon`}\n\t\t\t\t\t\tsrc={getIconUrl(icon, { baseUrl })}\n\t\t\t\t\t/>\n\t\t\t\t\t<p>{label}</p>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{orgUnitGroups.map(({ name, symbol }) => {\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={`${name}-legend`}\n\t\t\t\t\t\tclassName=\"row gap-16  align-items-center\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\talt={`${name}-icon`}\n\t\t\t\t\t\t\tsrc={getIconUrl(symbol ?? \"\", { baseUrl })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<p>{name}</p>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n\nfunction PointLegend(\n\t{ collapsible, onCollapse }: any,\n\tref: React.LegacyRef<HTMLDivElement>,\n) {\n\tconst pointLayer = usePointLayer();\n\tconst { label, style } = pointLayer ?? {};\n\n\treturn (\n\t\t<div ref={ref} className=\"legend-card\">\n\t\t\t<LegendCardHeader\n\t\t\t\tcollapsible={collapsible}\n\t\t\t\tonCollapse={onCollapse}\n\t\t\t\ttitle={label ?? \"Points\"}\n\t\t\t/>\n\t\t\t<Divider margin={\"0\"} />\n\t\t\t<PointLegends\n\t\t\t\tlabel={label}\n\t\t\t\torgUnitGroups={style?.orgUnitGroups ?? []}\n\t\t\t\ticon={style?.icon}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default forwardRef(PointLegend);\n"]}

package/dist/esm/components/Map/components/MapLayer/components/PointLayer/hooks/index.js

@@ -0,0 +1,11 @@
+import { find } from 'lodash';
+import { useMapLayers } from '../../../../MapProvider/hooks/index.js';
+
+function usePointLayer() {
+  const { layers } = useMapLayers();
+  return find(layers, ["type", "point"]);
+}
+
+export { usePointLayer };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/Map/components/MapLayer/components/PointLayer/hooks/index.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAGtB,SAAS,gBAAgB;AAC/B,QAAM,EAAE,OAAO,IAAI,aAAa;AAChC,SAAO,KAAK,QAAQ,CAAC,QAAQ,OAAO,CAAC;AACtC","sourcesContent":["import { find } from \"lodash\";\nimport { useMapLayers } from \"../../../../MapProvider/hooks/index.js\";\nimport { CustomPointLayer } from \"../../../interfaces/index.js\";\n\nexport function usePointLayer() {\n\tconst { layers } = useMapLayers();\n\treturn find(layers, [\"type\", \"point\"]) as CustomPointLayer;\n}\n"]}

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

@@ -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.js';
+import { usePointLayer } from './hooks/index.js';
+
+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.js.map

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

@@ -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/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/esm/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubble.js

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { guideLength, textPadding } from './Bubbles.js';
+
+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.js.map

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

@@ -0,0 +1 @@
+{"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/esm/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubbles.js

@@ -0,0 +1,130 @@
+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.js';
+import { getLongestTextLength } from '../../../../../../../../../utils/helpers.js';
+import Bubble from './Bubble.js';
+
+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.js.map

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

@@ -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.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/esm/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/index.js

@@ -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/index.js';
+import Bubbles from './components/Bubbles.js';
+
+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.js.map

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

@@ -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/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"]}