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

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

@@ -1 +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\";\nimport { CustomControl } from \"../../../MapControls/components/CustomControl\";\nimport {\n\tCustomBubbleLayer,\n\tCustomGoogleEngineLayer,\n\tCustomPointLayer,\n\tCustomThematicLayer,\n\tSUPPORTED_EARTH_ENGINE_LAYERS,\n} from \"../../interfaces\";\nimport PointLegend from \"../PointLayer/components/PointLegend\";\nimport BubbleLegend from \"../ThematicLayer/components/Bubble/components/BubbleLegend\";\nimport ChoroplethLegend from \"../ThematicLayer/components/Choropleth/components/ChoroplethLegend\";\nimport EarthEngineLegend from \"../GoogleEngineLayer/components/EarthEngineLegend\";\nimport classes from \"./LegendArea.module.css\";\nimport { usePrintMedia } from \"../../../../hooks/map\";\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"]}
+{"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/components/Map/components/MapLayer/components/PointLayer/components/PointLegend/index.js

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

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

@@ -1 +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,YAAY,EAAE,aAAa,WAAW,GAAQ,KAAsC;AAC3F,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,OAAO,MAAM,IAAI,cAAc,CAAC;AAExC,SACE,qBAAC,SAAI,KAAU,WAAU,eACvB;AAAA,wBAAC,oBAAiB,aAA0B,YAAwB,OAAO,SAAS,UAAU;AAAA,IAC9F,oBAAC,WAAQ,QAAQ,KAAK;AAAA,IACtB,oBAAC,gBAAa,OAAc,eAAe,OAAO,iBAAiB,CAAC,GAAG,MAAM,OAAO,MAAM;AAAA,KAC5F;AAEJ;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\";\nimport LegendCardHeader from \"../../../LegendArea/components/LegendCardHeader\";\nimport { usePointLayer } from \"../../hooks\";\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({ collapsible, onCollapse }: any, ref: React.LegacyRef<HTMLDivElement>) {\n  const pointLayer = usePointLayer();\n  const { label, style } = pointLayer ?? {};\n\n  return (\n    <div ref={ref} className=\"legend-card\">\n      <LegendCardHeader collapsible={collapsible} onCollapse={onCollapse} title={label ?? \"Points\"} />\n      <Divider margin={\"0\"} />\n      <PointLegends label={label} orgUnitGroups={style?.orgUnitGroups ?? []} icon={style?.icon} />\n    </div>\n  );\n}\n\nexport default forwardRef(PointLegend);\n"]}
+{"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/components/Map/components/MapLayer/components/PointLayer/hooks/index.js

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

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

@@ -1 +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\";\nimport { CustomPointLayer } from \"../../../interfaces\";\n\nexport function usePointLayer() {\n\tconst { layers } = useMapLayers();\n\treturn find(layers, [\"type\", \"point\"]) as CustomPointLayer;\n}\n"]}
+{"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/components/Map/components/MapLayer/components/PointLayer/index.js

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

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,18 +1,24 @@
-'use strict';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { guideLength, textPadding } from './Bubbles.js';
 
-var jsxRuntime = require('react/jsx-runtime');
-var Bubbles = require('./Bubbles');
-
-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 - guideLength : x + maxRadius + guideLength;
   const y2 = maxRadius * 2 - radius * 2;
-  const textX = x2 + (leftAlign ? -Bubbles.textPadding : Bubbles.textPadding);
+  const textX = x2 + (leftAlign ? -textPadding : textPadding);
   const textAnchor = leftAlign ? "end" : "start";
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
       "circle",
       {
         cx: x,
@@ -25,14 +31,34 @@ 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 })
+    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;
 
-module.exports = Bubble_default;
+export { Bubble_default as default };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=Bubble.js.map

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

@@ -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

@@ -1,20 +1,11 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var i18n = require('@dhis2/d2-i18n');
-var d3Scale = require('d3-scale');
-var lodash = require('lodash');
-var react = require('react');
-var colors = require('../../../../../../../../../utils/colors');
-var helpers = require('../../../../../../../../../utils/helpers');
-var Bubble = require('./Bubble');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var i18n__default = /*#__PURE__*/_interopDefault(i18n);
-var Bubble__default = /*#__PURE__*/_interopDefault(Bubble);
+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,
@@ -26,9 +17,14 @@ 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 scale = scaleSqrt().range([radiusLow, radiusHigh]);
   const radiusMid = scale(0.5);
   if (isNaN(radiusLow) || isNaN(radiusHigh)) {
     return null;
@@ -50,34 +46,39 @@ const Bubbles = ({ radiusLow, radiusHigh, color, classes }) => {
       text: String(startValue)
     });
   } else {
-    const stroke = color && colors.getContrastColor(color);
+    const stroke = color && getContrastColor(color);
     bubbles = [
       {
         radius: radiusHigh,
         maxRadius: radiusHigh,
         color,
         stroke,
-        text: i18n__default.default.t("Max")
+        text: i18n.t("Max")
       },
       {
         radius: radiusMid,
         maxRadius: radiusHigh,
         color,
         stroke,
-        text: i18n__default.default.t("Mid")
+        text: i18n.t("Mid")
       },
       {
         radius: radiusLow,
         maxRadius: radiusHigh,
         color,
         stroke,
-        text: i18n__default.default.t("Min")
+        text: i18n.t("Min")
       }
     ];
   }
-  let textLength = Math.ceil(Math.max(helpers.getLongestTextLength(classes, "startValue"), helpers.getLongestTextLength(classes, "endValue")) * digitWidth);
+  let textLength = Math.ceil(
+    Math.max(
+      getLongestTextLength(classes, "startValue"),
+      getLongestTextLength(classes, "endValue")
+    ) * digitWidth
+  );
   const alternateLength = (radiusHigh + guideLength + textPadding + textLength) * 2;
-  let smallestGap = lodash.reduce(bubbles, (prev, curr, i) => {
+  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) : {
@@ -100,7 +101,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,14 +112,19 @@ const Bubbles = ({ radiusLow, radiusHigh, color, classes }) => {
       }
     });
   }
-  textLength = Math.ceil(helpers.getLongestTextLength(bubbles, "text") * digitWidth);
+  textLength = Math.ceil(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__ */ 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 = react.memo(Bubbles);
+var Bubbles_default = memo(Bubbles);
 
-exports.default = Bubbles_default;
-exports.guideLength = guideLength;
-exports.textPadding = textPadding;
+export { Bubbles_default as default, guideLength, textPadding };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=Bubbles.js.map

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

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