npm - @hisptz/dhis2-analytics - Versions diffs - 2.0.1 → 2.0.2 - Mend

@hisptz/dhis2-analytics 2.0.1 → 2.0.2

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

Files changed (99) hide show

package/dist/esm/components/Map/DHIS2Map.stories.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { DHIS2Map } from './DHIS2Map';
+import { COLOR_SCALES } from './constants/colors.js';
 const meta = {
   title: "DHIS2 Map",
@@ -49,7 +50,10 @@ BoundaryLayer.args = {
     userSubX2Unit: true
   },
   boundaryLayer: {
-    enabled: true
+    enabled: true,
+    onLayerClick: (e, data) => {
+      console.log(e, data);
+    }
   }
 };
 const BoundaryLayerWithLevels = {
@@ -91,7 +95,11 @@ ChoroplethThematicLayer.args = {
       dataItem: {
         id: "Uvn6LCg7dVU",
         displayName: "ANC 1 Coverage",
-        type: "indicator"
+        type: "indicator",
+        legendConfig: {
+          colorClass: COLOR_SCALES[0],
+          scale: 5
+        }
       },
       control: {
         enabled: true,
@@ -100,7 +108,7 @@ ChoroplethThematicLayer.args = {
     }
   ],
   periodSelection: {
-    periods: ["2022"]
+    periods: ["2023"]
   },
   legends: {
     enabled: true,
@@ -114,7 +122,7 @@ BubbleThematicLayer.args = {
     orgUnits: [],
     userOrgUnit: true,
     userSubUnit: true,
-    userSubX2Unit: true
+    userSubX2Unit: false
   },
   boundaryLayer: {
     enabled: true
@@ -127,7 +135,11 @@ BubbleThematicLayer.args = {
       dataItem: {
         id: "Uvn6LCg7dVU",
         displayName: "ANC 1 Coverage",
-        type: "indicator"
+        type: "indicator",
+        legendConfig: {
+          colorClass: COLOR_SCALES[0],
+          scale: 5
+        }
       },
       control: {
         enabled: true,
@@ -145,7 +157,7 @@ BubbleThematicLayer.args = {
     collapsible: true
   },
   periodSelection: {
-    periods: ["2022"]
+    periods: ["2023"]
   },
   controls: [
     {
@@ -170,6 +182,9 @@ AllThematicLayers.args = {
       type: "choropleth",
       id: "ReUHfIn0pTQ",
       enabled: true,
+      onLayerClick: (e, data) => {
+        console.log(e, data);
+      },
       dataItem: {
         id: "ReUHfIn0pTQ",
         displayName: "ANC 1-3 Dropout Rate",
@@ -182,13 +197,17 @@ AllThematicLayers.args = {
       }
     },
     {
-      type: "choropleth",
+      type: "bubble",
       id: "Uvn6LCg7dVU",
       enabled: true,
       dataItem: {
         id: "Uvn6LCg7dVU",
         displayName: "ANC 1 Coverage",
-        type: "indicator"
+        type: "indicator",
+        legendConfig: {
+          colorClass: COLOR_SCALES[0],
+          scale: 5
+        }
       },
       control: {
         enabled: true,
@@ -202,7 +221,7 @@ AllThematicLayers.args = {
     collapsible: true
   },
   periodSelection: {
-    periods: ["2022"]
+    periods: ["2023"]
   },
   controls: [
     {
@@ -258,7 +277,7 @@ ChoroplethThematicLayerWithLevels.args = {
     collapsible: true
   },
   periodSelection: {
-    periods: ["2022"]
+    periods: ["2023"]
   },
   controls: [
     {
@@ -297,14 +316,17 @@ PointLayer.args = {
     }
   ],
   periodSelection: {
-    periods: ["2022"]
+    periods: ["2023"]
   },
   pointLayer: {
     enabled: true,
     label: "Facilities",
     level: "m9lBJogzE95",
     style: {
-      groupSet: "J5jldMd8OHv"
+      icon: "hospital_negative"
+    },
+    onLayerClick: (e, data) => {
+      console.log(e, data);
     }
   }
 };
@@ -318,7 +340,7 @@ GoogleEarthEngineLayers.args = {
   },
   thematicLayers: [],
   periodSelection: {
-    periods: ["2022"]
+    periods: ["2023"]
   },
   earthEngineLayers: [
     {

package/dist/esm/components/Map/DHIS2Map.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Map/DHIS2Map.stories.tsx"],"names":[],"mappings":"AACA,SAAS,gBAAgB;AAEzB,MAAM,OAA8B;AAAA,EACnC,OAAO;AAAA,EACP,WAAW;AACZ;AACA,IAAO,2BAAQ;AAGR,MAAM,UAAiB;AAAA,EAC7B,MAAM;AACP;AACA,QAAQ,OAAO;AAAA,EACd,kBAAkB;AAAA,IACjB,UAAU,CAAC;AAAA,IACX,aAAa;AAAA,IACb,aAAa;AAAA,IACb,eAAe;AAAA,EAChB;AACD;AAEO,MAAM,WAAkB;AAAA,EAC9B,MAAM;AACP;AACA,SAAS,OAAO;AAAA,EACf,kBAAkB;AAAA,IACjB,UAAU,CAAC;AAAA,IACX,aAAa;AAAA,IACb,aAAa;AAAA,IACb,eAAe;AAAA,EAChB;AAAA,EACA,UAAU;AAAA,IACT;AAAA,MACC,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,QACR,QAAQ;AAAA,QACR,sBAAsB;AAAA,QACtB,WAAW,CAAC,eAAe,cAAc,SAAS;AAAA,MACnD;AAAA,IACD;AAAA,EACD;AACD;AAEO,MAAM,gBAAuB;AAAA,EACnC,MAAM;AACP;AACA,cAAc,OAAO;AAAA,EACpB,kBAAkB;AAAA,IACjB,UAAU,CAAC;AAAA,IACX,aAAa;AAAA,IACb,aAAa;AAAA,IACb,eAAe;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACd,SAAS;AAAA,EACV;AACD;AAEO,MAAM,0BAAiC;AAAA,EAC7C,MAAM;AACP;AACA,wBAAwB,OAAO;AAAA,EAC9B,kBAAkB;AAAA,IACjB,UAAU;AAAA,MACT;AAAA,QACC,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,MAAM;AAAA,QACN,MAAM;AAAA,QACN,UAAU,CAAC;AAAA,MACZ;AAAA,IACD;AAAA,IACA,QAAQ,CAAC,GAAG;AAAA,EACb;AAAA,EACA,eAAe;AAAA,IACd,SAAS;AAAA,EACV;AACD;AAEO,MAAM,0BAAiC,CAAC;AAC/C,wBAAwB,OAAO;AAAA,EAC9B,kBAAkB;AAAA,IACjB,UAAU,CAAC;AAAA,IACX,aAAa;AAAA,IACb,aAAa;AAAA,IACb,eAAe;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACd,SAAS;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,IACf;AAAA,MACC,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,UAAU;AAAA,QACT,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,MAAM;AAAA,MACP;AAAA,MACA,SAAS;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,MACX;AAAA,IACD;AAAA,EACD;AAAA,EACA,iBAAiB;AAAA,IAChB,SAAS,CAAC,MAAM;AAAA,EACjB;AAAA,EACA,SAAS;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,aAAa;AAAA,EACd;AACD;AAEO,MAAM,sBAA6B,CAAC;AAC3C,oBAAoB,OAAO;AAAA,EAC1B,kBAAkB;AAAA,IACjB,UAAU,CAAC;AAAA,IACX,aAAa;AAAA,IACb,aAAa;AAAA,IACb,eAAe;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACd,SAAS;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,IACf;AAAA,MACC,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,UAAU;AAAA,QACT,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,MAAM;AAAA,MACP;AAAA,MACA,SAAS;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACP,KAAK;AAAA,QACL,KAAK;AAAA,MACN;AAAA,IACD;AAAA,EACD;AAAA,EACA,SAAS;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,aAAa;AAAA,EACd;AAAA,EACA,iBAAiB;AAAA,IAChB,SAAS,CAAC,MAAM;AAAA,EACjB;AAAA,EACA,UAAU;AAAA,IACT;AAAA,MACC,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACD;AACD;AAEO,MAAM,oBAA2B,CAAC;AACzC,kBAAkB,OAAO;AAAA,EACxB,kBAAkB;AAAA,IACjB,UAAU,CAAC;AAAA,IACX,aAAa;AAAA,IACb,aAAa;AAAA,IACb,eAAe;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACd,SAAS;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,IACf;AAAA,MACC,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,UAAU;AAAA,QACT,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,MAAM;AAAA,QACN,WAAW;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,MACX;AAAA,IACD;AAAA,IACA;AAAA,MACC,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,UAAU;AAAA,QACT,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,MAAM;AAAA,MACP;AAAA,MACA,SAAS;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,MACX;AAAA,IACD;AAAA,EACD;AAAA,EACA,SAAS;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,aAAa;AAAA,EACd;AAAA,EACA,iBAAiB;AAAA,IAChB,SAAS,CAAC,MAAM;AAAA,EACjB;AAAA,EACA,UAAU;AAAA,IACT;AAAA,MACC,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,QACR,UAAU;AAAA,QACV,QAAQ;AAAA,MACT;AAAA,IACD;AAAA,IACA;AAAA,MACC,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACD;AACD;AAEO,MAAM,oCAA2C,CAAC;AACzD,kCAAkC,OAAO;AAAA,EACxC,kBAAkB;AAAA,IACjB,UAAU;AAAA,MACT;AAAA,QACC,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,MAAM;AAAA,QACN,MAAM;AAAA,QACN,UAAU,CAAC;AAAA,MACZ;AAAA,IACD;AAAA,IACA,QAAQ,CAAC,GAAG;AAAA,EACb;AAAA,EACA,eAAe;AAAA,IACd,SAAS;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,IACf;AAAA,MACC,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,UAAU;AAAA,QACT,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,MAAM;AAAA,MACP;AAAA,MACA,SAAS;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,MACX;AAAA,IACD;AAAA,EACD;AAAA,EACA,SAAS;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,aAAa;AAAA,EACd;AAAA,EACA,iBAAiB;AAAA,IAChB,SAAS,CAAC,MAAM;AAAA,EACjB;AAAA,EACA,UAAU;AAAA,IACT;AAAA,MACC,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,QACR,QAAQ;AAAA,QACR,sBAAsB;AAAA,QACtB,WAAW,CAAC,eAAe,cAAc,SAAS;AAAA,MACnD;AAAA,IACD;AAAA,EACD;AACD;AAEO,MAAM,aAAoB,CAAC;AAClC,WAAW,OAAO;AAAA,EACjB,kBAAkB;AAAA,IACjB,UAAU,CAAC;AAAA,IACX,aAAa;AAAA,IACb,aAAa;AAAA,IACb,eAAe;AAAA,EAChB;AAAA,EACA,gBAAgB;AAAA,IACf;AAAA,MACC,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,UAAU;AAAA,QACT,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,MAAM;AAAA,MACP;AAAA,MACA,SAAS;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,MACX;AAAA,IACD;AAAA,EACD;AAAA,EACA,iBAAiB;AAAA,IAChB,SAAS,CAAC,MAAM;AAAA,EACjB;AAAA,EACA,YAAY;AAAA,IACX,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACD;AACD;AAEO,MAAM,0BAAiC,CAAC;AAC/C,wBAAwB,OAAO;AAAA,EAC9B,kBAAkB;AAAA,IACjB,UAAU,CAAC;AAAA,IACX,aAAa;AAAA,IACb,aAAa;AAAA,IACb,eAAe;AAAA,EAChB;AAAA,EACA,gBAAgB,CAAC;AAAA,EACjB,iBAAiB;AAAA,IAChB,SAAS,CAAC,MAAM;AAAA,EACjB;AAAA,EACA,mBAAmB;AAAA,IAClB;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,QAAQ;AAAA,QACP,KAAK;AAAA,QACL,KAAK;AAAA,QACL,SACC;AAAA,MACF;AAAA,MACA,cAAc,CAAC,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,QACR,QAAQ;AAAA,MACT;AAAA,IACD;AAAA,IACA;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,cAAc,CAAC,OAAO;AAAA,MACtB,SAAS;AAAA,IACV;AAAA,IACA;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,cAAc,CAAC,YAAY;AAAA,IAC5B;AAAA,EACD;AAAA,EACA,YAAY;AAAA,IACX,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACD;AACD","sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport { DHIS2Map } from \"./DHIS2Map\";\n\nconst meta: Meta<typeof DHIS2Map> = {\n\ttitle: \"DHIS2 Map\",\n\tcomponent: DHIS2Map,\n};\nexport default meta;\n\ntype Story = StoryObj<typeof DHIS2Map>;\nexport const BaseMap: Story = {\n\tname: \"Base map\",\n};\nBaseMap.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: true,\n\t},\n};\n\nexport const Controls: Story = {\n\tname: \"Controls\",\n};\nControls.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: true,\n\t},\n\tcontrols: [\n\t\t{\n\t\t\ttype: \"print\",\n\t\t\tposition: \"topleft\",\n\t\t\toptions: {\n\t\t\t\thidden: false,\n\t\t\t\thideControlContainer: true,\n\t\t\t\tsizeModes: [\"A4Landscape\", \"A4Portrait\", \"Current\"],\n\t\t\t},\n\t\t},\n\t],\n};\n\nexport const BoundaryLayer: Story = {\n\tname: \"Boundary layer\",\n};\nBoundaryLayer.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: true,\n\t},\n\tboundaryLayer: {\n\t\tenabled: true,\n\t},\n};\n\nexport const BoundaryLayerWithLevels: Story = {\n\tname: \"Boundary layer with levels\",\n};\nBoundaryLayerWithLevels.args = {\n\torgUnitSelection: {\n\t\torgUnits: [\n\t\t\t{\n\t\t\t\tid: \"ImspTQPwCqd\",\n\t\t\t\tdisplayName: \"Sierra Leone\",\n\t\t\t\tname: \"Sierra Leone\",\n\t\t\t\tpath: \"/ImspTQPwCqd\",\n\t\t\t\tchildren: [],\n\t\t\t},\n\t\t],\n\t\tlevels: [\"2\"],\n\t},\n\tboundaryLayer: {\n\t\tenabled: true,\n\t},\n};\n\nexport const ChoroplethThematicLayer: Story = {};\nChoroplethThematicLayer.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: false,\n\t},\n\tboundaryLayer: {\n\t\tenabled: true,\n\t},\n\tthematicLayers: [\n\t\t{\n\t\t\ttype: \"choropleth\",\n\t\t\tid: \"choropleth\",\n\t\t\tenabled: true,\n\t\t\tdataItem: {\n\t\t\t\tid: \"Uvn6LCg7dVU\",\n\t\t\t\tdisplayName: \"ANC 1 Coverage\",\n\t\t\t\ttype: \"indicator\",\n\t\t\t},\n\t\t\tcontrol: {\n\t\t\t\tenabled: true,\n\t\t\t\tposition: \"topright\",\n\t\t\t},\n\t\t},\n\t],\n\tperiodSelection: {\n\t\tperiods: [\"2022\"],\n\t},\n\tlegends: {\n\t\tenabled: true,\n\t\tposition: \"topright\",\n\t\tcollapsible: true,\n\t},\n};\n\nexport const BubbleThematicLayer: Story = {};\nBubbleThematicLayer.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: true,\n\t},\n\tboundaryLayer: {\n\t\tenabled: true,\n\t},\n\tthematicLayers: [\n\t\t{\n\t\t\ttype: \"bubble\",\n\t\t\tid: \"bubble\",\n\t\t\tenabled: true,\n\t\t\tdataItem: {\n\t\t\t\tid: \"Uvn6LCg7dVU\",\n\t\t\t\tdisplayName: \"ANC 1 Coverage\",\n\t\t\t\ttype: \"indicator\",\n\t\t\t},\n\t\t\tcontrol: {\n\t\t\t\tenabled: true,\n\t\t\t\tposition: \"topright\",\n\t\t\t},\n\t\t\tradius: {\n\t\t\t\tmin: 0,\n\t\t\t\tmax: 40,\n\t\t\t},\n\t\t},\n\t],\n\tlegends: {\n\t\tenabled: true,\n\t\tposition: \"topright\",\n\t\tcollapsible: true,\n\t},\n\tperiodSelection: {\n\t\tperiods: [\"2022\"],\n\t},\n\tcontrols: [\n\t\t{\n\t\t\ttype: \"fullscreen\",\n\t\t\tposition: \"topleft\",\n\t\t},\n\t],\n};\n\nexport const AllThematicLayers: Story = {};\nAllThematicLayers.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: true,\n\t},\n\tboundaryLayer: {\n\t\tenabled: true,\n\t},\n\tthematicLayers: [\n\t\t{\n\t\t\ttype: \"choropleth\",\n\t\t\tid: \"ReUHfIn0pTQ\",\n\t\t\tenabled: true,\n\t\t\tdataItem: {\n\t\t\t\tid: \"ReUHfIn0pTQ\",\n\t\t\t\tdisplayName: \"ANC 1-3 Dropout Rate\",\n\t\t\t\ttype: \"indicator\",\n\t\t\t\tlegendSet: \"fqs276KXCXi\",\n\t\t\t},\n\t\t\tcontrol: {\n\t\t\t\tenabled: true,\n\t\t\t\tposition: \"topright\",\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttype: \"choropleth\",\n\t\t\tid: \"Uvn6LCg7dVU\",\n\t\t\tenabled: true,\n\t\t\tdataItem: {\n\t\t\t\tid: \"Uvn6LCg7dVU\",\n\t\t\t\tdisplayName: \"ANC 1 Coverage\",\n\t\t\t\ttype: \"indicator\",\n\t\t\t},\n\t\t\tcontrol: {\n\t\t\t\tenabled: true,\n\t\t\t\tposition: \"topright\",\n\t\t\t},\n\t\t},\n\t],\n\tlegends: {\n\t\tenabled: true,\n\t\tposition: \"topright\",\n\t\tcollapsible: true,\n\t},\n\tperiodSelection: {\n\t\tperiods: [\"2022\"],\n\t},\n\tcontrols: [\n\t\t{\n\t\t\ttype: \"scale\",\n\t\t\tposition: \"bottomleft\",\n\t\t\toptions: {\n\t\t\t\timperial: false,\n\t\t\t\tmetric: true,\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttype: \"fullscreen\",\n\t\t\tposition: \"bottomleft\",\n\t\t},\n\t],\n};\n\nexport const ChoroplethThematicLayerWithLevels: Story = {};\nChoroplethThematicLayerWithLevels.args = {\n\torgUnitSelection: {\n\t\torgUnits: [\n\t\t\t{\n\t\t\t\tid: \"ImspTQPwCqd\",\n\t\t\t\tdisplayName: \"Sierra Leone\",\n\t\t\t\tname: \"Sierra Leone\",\n\t\t\t\tpath: \"/ImspTQPwCqd\",\n\t\t\t\tchildren: [],\n\t\t\t},\n\t\t],\n\t\tlevels: [\"3\"],\n\t},\n\tboundaryLayer: {\n\t\tenabled: true,\n\t},\n\tthematicLayers: [\n\t\t{\n\t\t\ttype: \"choropleth\",\n\t\t\tid: \"choropleth\",\n\t\t\tenabled: true,\n\t\t\tdataItem: {\n\t\t\t\tid: \"Uvn6LCg7dVU\",\n\t\t\t\tdisplayName: \"ANC 1 Coverage\",\n\t\t\t\ttype: \"indicator\",\n\t\t\t},\n\t\t\tcontrol: {\n\t\t\t\tenabled: true,\n\t\t\t\tposition: \"topright\",\n\t\t\t},\n\t\t},\n\t],\n\tlegends: {\n\t\tenabled: true,\n\t\tposition: \"topright\",\n\t\tcollapsible: true,\n\t},\n\tperiodSelection: {\n\t\tperiods: [\"2022\"],\n\t},\n\tcontrols: [\n\t\t{\n\t\t\ttype: \"print\",\n\t\t\tposition: \"topleft\",\n\t\t\toptions: {\n\t\t\t\thidden: false,\n\t\t\t\thideControlContainer: true,\n\t\t\t\tsizeModes: [\"A4Landscape\", \"A4Portrait\", \"Current\"],\n\t\t\t},\n\t\t},\n\t],\n};\n\nexport const PointLayer: Story = {};\nPointLayer.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: false,\n\t},\n\tthematicLayers: [\n\t\t{\n\t\t\ttype: \"choropleth\",\n\t\t\tid: \"choropleth\",\n\t\t\tenabled: true,\n\t\t\tdataItem: {\n\t\t\t\tid: \"Uvn6LCg7dVU\",\n\t\t\t\tdisplayName: \"ANC 1 Coverage\",\n\t\t\t\ttype: \"indicator\",\n\t\t\t},\n\t\t\tcontrol: {\n\t\t\t\tenabled: true,\n\t\t\t\tposition: \"topright\",\n\t\t\t},\n\t\t},\n\t],\n\tperiodSelection: {\n\t\tperiods: [\"2022\"],\n\t},\n\tpointLayer: {\n\t\tenabled: true,\n\t\tlabel: \"Facilities\",\n\t\tlevel: \"m9lBJogzE95\",\n\t\tstyle: {\n\t\t\tgroupSet: \"J5jldMd8OHv\",\n\t\t},\n\t},\n};\n\nexport const GoogleEarthEngineLayers: Story = {};\nGoogleEarthEngineLayers.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: false,\n\t},\n\tthematicLayers: [],\n\tperiodSelection: {\n\t\tperiods: [\"2022\"],\n\t},\n\tearthEngineLayers: [\n\t\t{\n\t\t\tname: \"Population\",\n\t\t\ttype: \"population\",\n\t\t\tid: \"population\",\n\t\t\tenabled: false,\n\t\t\tparams: {\n\t\t\t\tmin: 0,\n\t\t\t\tmax: 10,\n\t\t\t\tpalette:\n\t\t\t\t\t\"#f7fbff,#deebf7,#c6dbef,#9ecae1,#6baed6,#4292c6,#2171b5,#08519c,#08306b\",\n\t\t\t},\n\t\t\taggregations: [\"sum\", \"mean\"],\n\t\t\tfilters: {\n\t\t\t\tperiod: \"2020\",\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tname: \"Footprints\",\n\t\t\ttype: \"footprints\",\n\t\t\tid: \"footprints\",\n\t\t\taggregations: [\"count\"],\n\t\t\tenabled: false,\n\t\t},\n\t\t{\n\t\t\tname: \"Land Cover\",\n\t\t\ttype: \"landCover\",\n\t\t\tid: \"landCover\",\n\t\t\tenabled: true,\n\t\t\taggregations: [\"percentage\"],\n\t\t},\n\t],\n\tpointLayer: {\n\t\tenabled: false,\n\t\tlabel: \"Facilities\",\n\t\tlevel: \"m9lBJogzE95\",\n\t\tstyle: {\n\t\t\tgroupSet: \"J5jldMd8OHv\",\n\t\t},\n\t},\n};\n"]}
1	+ {"version":3,"sources":["../../../../src/components/Map/DHIS2Map.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport { DHIS2Map } from \"./DHIS2Map\";\n\nimport { COLOR_SCALES } from \"./constants/colors.js\";\n\nconst meta: Meta<typeof DHIS2Map> = {\n\ttitle: \"DHIS2 Map\",\n\tcomponent: DHIS2Map,\n};\nexport default meta;\n\ntype Story = StoryObj<typeof DHIS2Map>;\nexport const BaseMap: Story = {\n\tname: \"Base map\",\n};\nBaseMap.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: true,\n\t},\n};\n\nexport const Controls: Story = {\n\tname: \"Controls\",\n};\nControls.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: true,\n\t},\n\tcontrols: [\n\t\t{\n\t\t\ttype: \"print\",\n\t\t\tposition: \"topleft\",\n\t\t\toptions: {\n\t\t\t\thidden: false,\n\t\t\t\thideControlContainer: true,\n\t\t\t\tsizeModes: [\"A4Landscape\", \"A4Portrait\", \"Current\"],\n\t\t\t},\n\t\t},\n\t],\n};\n\nexport const BoundaryLayer: Story = {\n\tname: \"Boundary layer\",\n};\nBoundaryLayer.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: true,\n\t},\n\tboundaryLayer: {\n\t\tenabled: true,\n\t\tonLayerClick: (e, data) => {\n\t\t\tconsole.log(e, data);\n\t\t},\n\t},\n};\n\nexport const BoundaryLayerWithLevels: Story = {\n\tname: \"Boundary layer with levels\",\n};\nBoundaryLayerWithLevels.args = {\n\torgUnitSelection: {\n\t\torgUnits: [\n\t\t\t{\n\t\t\t\tid: \"ImspTQPwCqd\",\n\t\t\t\tdisplayName: \"Sierra Leone\",\n\t\t\t\tname: \"Sierra Leone\",\n\t\t\t\tpath: \"/ImspTQPwCqd\",\n\t\t\t\tchildren: [],\n\t\t\t},\n\t\t],\n\t\tlevels: [\"2\"],\n\t},\n\tboundaryLayer: {\n\t\tenabled: true,\n\t},\n};\n\nexport const ChoroplethThematicLayer: Story = {};\nChoroplethThematicLayer.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: false,\n\t},\n\tboundaryLayer: {\n\t\tenabled: true,\n\t},\n\tthematicLayers: [\n\t\t{\n\t\t\ttype: \"choropleth\",\n\t\t\tid: \"choropleth\",\n\t\t\tenabled: true,\n\t\t\tdataItem: {\n\t\t\t\tid: \"Uvn6LCg7dVU\",\n\t\t\t\tdisplayName: \"ANC 1 Coverage\",\n\t\t\t\ttype: \"indicator\",\n\t\t\t\tlegendConfig: {\n\t\t\t\t\tcolorClass: COLOR_SCALES[0],\n\t\t\t\t\tscale: 5,\n\t\t\t\t},\n\t\t\t},\n\t\t\tcontrol: {\n\t\t\t\tenabled: true,\n\t\t\t\tposition: \"topright\",\n\t\t\t},\n\t\t},\n\t],\n\tperiodSelection: {\n\t\tperiods: [\"2023\"],\n\t},\n\tlegends: {\n\t\tenabled: true,\n\t\tposition: \"topright\",\n\t\tcollapsible: true,\n\t},\n};\n\nexport const BubbleThematicLayer: Story = {};\nBubbleThematicLayer.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: false,\n\t},\n\tboundaryLayer: {\n\t\tenabled: true,\n\t},\n\tthematicLayers: [\n\t\t{\n\t\t\ttype: \"bubble\",\n\t\t\tid: \"bubble\",\n\t\t\tenabled: true,\n\n\t\t\tdataItem: {\n\t\t\t\tid: \"Uvn6LCg7dVU\",\n\t\t\t\tdisplayName: \"ANC 1 Coverage\",\n\t\t\t\ttype: \"indicator\",\n\t\t\t\tlegendConfig: {\n\t\t\t\t\tcolorClass: COLOR_SCALES[0],\n\t\t\t\t\tscale: 5,\n\t\t\t\t},\n\t\t\t},\n\t\t\tcontrol: {\n\t\t\t\tenabled: true,\n\t\t\t\tposition: \"topright\",\n\t\t\t},\n\t\t\tradius: {\n\t\t\t\tmin: 0,\n\t\t\t\tmax: 40,\n\t\t\t},\n\t\t},\n\t],\n\tlegends: {\n\t\tenabled: true,\n\t\tposition: \"topright\",\n\t\tcollapsible: true,\n\t},\n\tperiodSelection: {\n\t\tperiods: [\"2023\"],\n\t},\n\tcontrols: [\n\t\t{\n\t\t\ttype: \"fullscreen\",\n\t\t\tposition: \"topleft\",\n\t\t},\n\t],\n};\n\nexport const AllThematicLayers: Story = {};\nAllThematicLayers.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: true,\n\t},\n\tboundaryLayer: {\n\t\tenabled: true,\n\t},\n\tthematicLayers: [\n\t\t{\n\t\t\ttype: \"choropleth\",\n\t\t\tid: \"ReUHfIn0pTQ\",\n\t\t\tenabled: true,\n\t\t\tonLayerClick: (e, data) => {\n\t\t\t\tconsole.log(e, data);\n\t\t\t},\n\t\t\tdataItem: {\n\t\t\t\tid: \"ReUHfIn0pTQ\",\n\t\t\t\tdisplayName: \"ANC 1-3 Dropout Rate\",\n\t\t\t\ttype: \"indicator\",\n\t\t\t\tlegendSet: \"fqs276KXCXi\",\n\t\t\t},\n\t\t\tcontrol: {\n\t\t\t\tenabled: true,\n\t\t\t\tposition: \"topright\",\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttype: \"bubble\",\n\t\t\tid: \"Uvn6LCg7dVU\",\n\t\t\tenabled: true,\n\t\t\tdataItem: {\n\t\t\t\tid: \"Uvn6LCg7dVU\",\n\t\t\t\tdisplayName: \"ANC 1 Coverage\",\n\t\t\t\ttype: \"indicator\",\n\t\t\t\tlegendConfig: {\n\t\t\t\t\tcolorClass: COLOR_SCALES[0],\n\t\t\t\t\tscale: 5,\n\t\t\t\t},\n\t\t\t},\n\t\t\tcontrol: {\n\t\t\t\tenabled: true,\n\t\t\t\tposition: \"topright\",\n\t\t\t},\n\t\t},\n\t],\n\tlegends: {\n\t\tenabled: true,\n\t\tposition: \"topright\",\n\t\tcollapsible: true,\n\t},\n\tperiodSelection: {\n\t\tperiods: [\"2023\"],\n\t},\n\tcontrols: [\n\t\t{\n\t\t\ttype: \"scale\",\n\t\t\tposition: \"bottomleft\",\n\t\t\toptions: {\n\t\t\t\timperial: false,\n\t\t\t\tmetric: true,\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttype: \"fullscreen\",\n\t\t\tposition: \"bottomleft\",\n\t\t},\n\t],\n};\n\nexport const ChoroplethThematicLayerWithLevels: Story = {};\nChoroplethThematicLayerWithLevels.args = {\n\torgUnitSelection: {\n\t\torgUnits: [\n\t\t\t{\n\t\t\t\tid: \"ImspTQPwCqd\",\n\t\t\t\tdisplayName: \"Sierra Leone\",\n\t\t\t\tname: \"Sierra Leone\",\n\t\t\t\tpath: \"/ImspTQPwCqd\",\n\t\t\t\tchildren: [],\n\t\t\t},\n\t\t],\n\t\tlevels: [\"3\"],\n\t},\n\tboundaryLayer: {\n\t\tenabled: true,\n\t},\n\tthematicLayers: [\n\t\t{\n\t\t\ttype: \"choropleth\",\n\t\t\tid: \"choropleth\",\n\t\t\tenabled: true,\n\t\t\tdataItem: {\n\t\t\t\tid: \"Uvn6LCg7dVU\",\n\t\t\t\tdisplayName: \"ANC 1 Coverage\",\n\t\t\t\ttype: \"indicator\",\n\t\t\t},\n\t\t\tcontrol: {\n\t\t\t\tenabled: true,\n\t\t\t\tposition: \"topright\",\n\t\t\t},\n\t\t},\n\t],\n\tlegends: {\n\t\tenabled: true,\n\t\tposition: \"topright\",\n\t\tcollapsible: true,\n\t},\n\tperiodSelection: {\n\t\tperiods: [\"2023\"],\n\t},\n\tcontrols: [\n\t\t{\n\t\t\ttype: \"print\",\n\t\t\tposition: \"topleft\",\n\t\t\toptions: {\n\t\t\t\thidden: false,\n\t\t\t\thideControlContainer: true,\n\t\t\t\tsizeModes: [\"A4Landscape\", \"A4Portrait\", \"Current\"],\n\t\t\t},\n\t\t},\n\t],\n};\n\nexport const PointLayer: Story = {};\nPointLayer.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: false,\n\t},\n\tthematicLayers: [\n\t\t{\n\t\t\ttype: \"choropleth\",\n\t\t\tid: \"choropleth\",\n\t\t\tenabled: true,\n\t\t\tdataItem: {\n\t\t\t\tid: \"Uvn6LCg7dVU\",\n\t\t\t\tdisplayName: \"ANC 1 Coverage\",\n\t\t\t\ttype: \"indicator\",\n\t\t\t},\n\t\t\tcontrol: {\n\t\t\t\tenabled: true,\n\t\t\t\tposition: \"topright\",\n\t\t\t},\n\t\t},\n\t],\n\tperiodSelection: {\n\t\tperiods: [\"2023\"],\n\t},\n\tpointLayer: {\n\t\tenabled: true,\n\t\tlabel: \"Facilities\",\n\t\tlevel: \"m9lBJogzE95\",\n\t\tstyle: {\n\t\t\ticon: \"hospital_negative\",\n\t\t},\n\t\tonLayerClick: (e, data) => {\n\t\t\tconsole.log(e, data);\n\t\t},\n\t},\n};\n\nexport const GoogleEarthEngineLayers: Story = {};\nGoogleEarthEngineLayers.args = {\n\torgUnitSelection: {\n\t\torgUnits: [],\n\t\tuserOrgUnit: true,\n\t\tuserSubUnit: true,\n\t\tuserSubX2Unit: false,\n\t},\n\tthematicLayers: [],\n\tperiodSelection: {\n\t\tperiods: [\"2023\"],\n\t},\n\tearthEngineLayers: [\n\t\t{\n\t\t\tname: \"Population\",\n\t\t\ttype: \"population\",\n\t\t\tid: \"population\",\n\t\t\tenabled: false,\n\t\t\tparams: {\n\t\t\t\tmin: 0,\n\t\t\t\tmax: 10,\n\t\t\t\tpalette:\n\t\t\t\t\t\"#f7fbff,#deebf7,#c6dbef,#9ecae1,#6baed6,#4292c6,#2171b5,#08519c,#08306b\",\n\t\t\t},\n\t\t\taggregations: [\"sum\", \"mean\"],\n\t\t\tfilters: {\n\t\t\t\tperiod: \"2020\",\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tname: \"Footprints\",\n\t\t\ttype: \"footprints\",\n\t\t\tid: \"footprints\",\n\t\t\taggregations: [\"count\"],\n\t\t\tenabled: false,\n\t\t},\n\t\t{\n\t\t\tname: \"Land Cover\",\n\t\t\ttype: \"landCover\",\n\t\t\tid: \"landCover\",\n\t\t\tenabled: true,\n\t\t\taggregations: [\"percentage\"],\n\t\t},\n\t],\n\tpointLayer: {\n\t\tenabled: false,\n\t\tlabel: \"Facilities\",\n\t\tlevel: \"m9lBJogzE95\",\n\t\tstyle: {\n\t\t\tgroupSet: \"J5jldMd8OHv\",\n\t\t},\n\t},\n};\n"]}

package/dist/esm/components/Map/components/EarthEngineLayerConfiguration/EarthEngineLayerConfiguration.js CHANGED Viewed

@@ -12,13 +12,23 @@ function EarthEngineLayerConfiguration({
   form,
   excluded
 }) {
-  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsxs("div", { className: "column gap-16", children: [
-    /* @__PURE__ */ jsx(TypeField, { excluded }),
-    /* @__PURE__ */ jsx(Name, {}),
-    /* @__PURE__ */ jsx(AggregationSelector, {}),
-    /* @__PURE__ */ jsx(PeriodSelector, {}),
-    /* @__PURE__ */ jsx(StylesConfig, {})
-  ] }) }) });
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 16
+      },
+      children: [
+        /* @__PURE__ */ jsx(TypeField, { excluded }),
+        /* @__PURE__ */ jsx(Name, {}),
+        /* @__PURE__ */ jsx(AggregationSelector, {}),
+        /* @__PURE__ */ jsx(PeriodSelector, {}),
+        /* @__PURE__ */ jsx(StylesConfig, {})
+      ]
+    }
+  ) }) });
 }
 export { EarthEngineLayerConfiguration };

package/dist/esm/components/Map/components/EarthEngineLayerConfiguration/EarthEngineLayerConfiguration.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/components/Map/components/EarthEngineLayerConfiguration/EarthEngineLayerConfiguration.tsx"],"names":[],"mappings":"~~AAyBI~~,~~SACC~~,~~KADD~~;~~AAxBJ~~,SAAS,oBAAmC;AAE5C,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,aAAa,2BAA2B;AAEjD,MAAM,cAAc,IAAI,YAAY;~~AAQ7B~~,SAAS,8BAA8B;AAAA,EAC7C;AAAA,EACA;AACD,GAAuC;AACtC,SACC,oBAAC,uBAAoB,QAAQ,aAC5B,8BAAC,gBAAc,GAAG,MACjB~~,+BAAC~~,~~SAAI~~,~~WAAU~~,~~iBACd~~;AAAA,~~wBAAC~~,aAAU,UAAoB;AAAA,~~IAC~~/B,oBAAC,QAAK;AAAA,~~IACN~~,oBAAC,uBAAoB;AAAA,~~IACrB~~,oBAAC,kBAAe;AAAA,~~IAChB~~,oBAAC,gBAAa;AAAA,~~KACf~~,GACD,GACD;AAEF","sourcesContent":["import { EarthEngineLayerConfig } from \"../MapLayer/interfaces\";\nimport { FormProvider, UseFormReturn } from \"react-hook-form\";\nimport React from \"react\";\nimport { StylesConfig } from \"./components/StylesConfig.js\";\nimport { Name } from \"./components/Name.js\";\nimport { TypeField } from \"./components/TypeField.js\";\nimport { AggregationSelector } from \"./components/AggregationSelector.js\";\nimport { PeriodSelector } from \"./components/PeriodSelector.js\";\nimport { QueryClient, QueryClientProvider } from \"react-query\";\n\nconst queryClient = new QueryClient();\nexport interface EarthEngineLayerConfigurationProps {\n\tform: UseFormReturn<EarthEngineLayerConfig>;\n\texcluded?: string[];\n\n\t[key: string]: any;\n}\n\nexport function EarthEngineLayerConfiguration({\n\tform,\n\texcluded,\n}: EarthEngineLayerConfigurationProps) {\n\treturn (\n\t\t<QueryClientProvider client={queryClient}>\n\t\t\t<FormProvider {...form}>\n\t\t\t\t<div ~~className=\~~"column ~~gap-~~16\">\n\t\t\t\t\t<TypeField excluded={excluded} />\n\t\t\t\t\t<Name />\n\t\t\t\t\t<AggregationSelector />\n\t\t\t\t\t<PeriodSelector />\n\t\t\t\t\t<StylesConfig />\n\t\t\t\t</div>\n\t\t\t</FormProvider>\n\t\t</QueryClientProvider>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["../../../../../../src/components/Map/components/EarthEngineLayerConfiguration/EarthEngineLayerConfiguration.tsx"],"names":[],"mappings":"AA0BI,SAOC,KAPD;AAzBJ,SAAS,oBAAmC;AAE5C,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,aAAa,2BAA2B;AAEjD,MAAM,cAAc,IAAI,YAAY;AAS7B,SAAS,8BAA8B;AAAA,EAC7C;AAAA,EACA;AACD,GAAuC;AACtC,SACC,oBAAC,uBAAoB,QAAQ,aAC5B,8BAAC,gBAAc,GAAG,MACjB;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,MACN;AAAA,MAEA;AAAA,4BAAC,aAAU,UAAoB;AAAA,QAC/B,oBAAC,QAAK;AAAA,QACN,oBAAC,uBAAoB;AAAA,QACrB,oBAAC,kBAAe;AAAA,QAChB,oBAAC,gBAAa;AAAA;AAAA;AAAA,EACf,GACD,GACD;AAEF","sourcesContent":["import { EarthEngineLayerConfig } from \"../MapLayer/interfaces\";\nimport { FormProvider, UseFormReturn } from \"react-hook-form\";\nimport React from \"react\";\nimport { StylesConfig } from \"./components/StylesConfig.js\";\nimport { Name } from \"./components/Name.js\";\nimport { TypeField } from \"./components/TypeField.js\";\nimport { AggregationSelector } from \"./components/AggregationSelector.js\";\nimport { PeriodSelector } from \"./components/PeriodSelector.js\";\nimport { QueryClient, QueryClientProvider } from \"react-query\";\n\nconst queryClient = new QueryClient();\n\nexport interface EarthEngineLayerConfigurationProps {\n\tform: UseFormReturn<EarthEngineLayerConfig>;\n\texcluded?: string[];\n\n\t[key: string]: any;\n}\n\nexport function EarthEngineLayerConfiguration({\n\tform,\n\texcluded,\n}: EarthEngineLayerConfigurationProps) {\n\treturn (\n\t\t<QueryClientProvider client={queryClient}>\n\t\t\t<FormProvider {...form}>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TypeField excluded={excluded} />\n\t\t\t\t\t<Name />\n\t\t\t\t\t<AggregationSelector />\n\t\t\t\t\t<PeriodSelector />\n\t\t\t\t\t<StylesConfig />\n\t\t\t\t</div>\n\t\t\t</FormProvider>\n\t\t</QueryClientProvider>\n\t);\n}\n"]}

package/dist/esm/components/Map/components/MapLayer/components/BoundaryLayer/index.js CHANGED Viewed

@@ -18,7 +18,7 @@ const highlightStyle = {
   fillOpacity: 0.1
 };
 function BoundaryLayer(props) {
-  const { enabled } = props ?? {};
+  const { enabled, customEventHandlers, onLayerClick } = props ?? {};
   const orgUnits = useBoundaryData();
   return /* @__PURE__ */ jsx(LayersControl.Overlay, { checked: enabled, name: i18n.t("Boundaries"), children: /* @__PURE__ */ jsx(LayerGroup, { children: orgUnits?.map((area) => {
     return /* @__PURE__ */ jsxs(
@@ -28,7 +28,13 @@ function BoundaryLayer(props) {
         interactive: true,
         eventHandlers: {
           mouseover: (e) => highlightFeature(e, highlightStyle),
-          mouseout: (e) => resetHighlight(e, defaultStyle)
+          mouseout: (e) => resetHighlight(e, defaultStyle),
+          ...customEventHandlers ?? {},
+          mousedown: (e) => {
+            if (onLayerClick) {
+              onLayerClick(e, { orgUnit: area });
+            }
+          }
         },
         pathOptions: defaultStyle,
         children: [

package/dist/esm/components/Map/components/MapLayer/components/BoundaryLayer/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/components/Map/components/MapLayer/components/BoundaryLayer/index.tsx"],"names":[],"mappings":"~~AAiDO~~,cAGC,YAHD;~~AAjDP~~,OAAO,UAAU;AACjB,SAAS,cAAc;AAEvB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,SAAS,kBAAkB,sBAAsB;AAEjD,SAAS,uBAAuB;AAEzB,MAAM,eAAe;AAAA,EAC3B,QAAQ;AAAA,EACR,OAAO,OAAO;AAAA,EACd,WAAW,OAAO;AAAA,EAClB,aAAa;AACd;AACO,MAAM,iBAAiB;AAAA,EAC7B,QAAQ;AAAA,EACR,OAAO,OAAO;AAAA,EACd,WAAW;AAAA,EACX,aAAa;AACd;AAEe,SAAR,cAA+B,OAA+B;AACpE,QAAM,EAAE,~~QAAQ~~,IAAI,SAAS,CAAC;~~AAC9B~~,QAAM,WAAW,gBAAgB;AAEjC,SACC,oBAAC,cAAc,SAAd,EAAsB,SAAS,SAAS,MAAM,KAAK,EAAE,YAAY,GACjE,8BAAC,cACC,oBAAU,IAAI,CAAC,SAAqB;AACpC,WACC;AAAA,MAAC;AAAA;AAAA,QACA,MAAM,KAAK;AAAA,QACX,aAAW;AAAA,QACX,eAAe;AAAA,UACd,WAAW,CAAC,MACX,iBAAiB,GAAG,cAAc;AAAA,UACnC,UAAU,CAAC,MACV,eAAe,GAAG,YAAY;AAAA,~~QAChC~~;AAAA,QAEA,aAAa;AAAA,QAEb;AAAA,8BAAC,WAAS,eAAK,MAAK;AAAA,UACpB,qBAAC,SAAM,UAAU,IAChB;AAAA,gCAAC,QAAI,eAAK,MAAK;AAAA,YACf,qBAAC,SACA;AAAA,kCAAC,OAAE,qBAAO;AAAA,cACT,KAAK;AAAA,eACP;AAAA,aACD;AAAA;AAAA;AAAA,MAVK,GAAG,KAAK,EAAE;AAAA,IAWhB;AAAA,EAEF,CAAC,GACF,GACD;AAEF","sourcesContent":["import i18n from \"@dhis2/d2-i18n\";\nimport { colors } from \"@dhis2/ui\";\nimport React from \"react\";\nimport {\n\tGeoJSON,\n\tLayerGroup,\n\tLayersControl,\n\tPopup,\n\tTooltip,\n} from \"react-leaflet\";\nimport { MapOrgUnit } from \"../../../../interfaces/index.js\";\nimport { highlightFeature, resetHighlight } from \"../../../../utils/map.js\";\nimport { CustomBoundaryLayer as BoundaryLayerInterface } from \"../../interfaces/index.js\";\nimport { useBoundaryData } from \"./hooks/useBoundaryData.js\";\n\nexport const defaultStyle = {\n\tweight: 1,\n\tcolor: colors.grey900,\n\tfillColor: colors.grey900,\n\tfillOpacity: 0.0,\n};\nexport const highlightStyle = {\n\tweight: 2,\n\tcolor: colors.grey900,\n\tdashArray: \"\",\n\tfillOpacity: 0.1,\n};\n\nexport default function BoundaryLayer(props: BoundaryLayerInterface) {\n\tconst { enabled } = props ?? {};\n\tconst orgUnits = useBoundaryData();\n\n\treturn (\n\t\t<LayersControl.Overlay checked={enabled} name={i18n.t(\"Boundaries\")}>\n\t\t\t<LayerGroup>\n\t\t\t\t{orgUnits?.map((area: MapOrgUnit) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<GeoJSON\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\teventHandlers={{\n\t\t\t\t\t\t\t\tmouseover: (e) =>\n\t\t\t\t\t\t\t\t\thighlightFeature(e, highlightStyle),\n\t\t\t\t\t\t\t\tmouseout: (e) =>\n\t\t\t\t\t\t\t\t\tresetHighlight(e, defaultStyle),\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkey={`${area.id}-polygon`}\n\t\t\t\t\t\t\tpathOptions={defaultStyle}\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\t<div>\n\t\t\t\t\t\t\t\t\t<b>Level: </b>\n\t\t\t\t\t\t\t\t\t{area.level}\n\t\t\t\t\t\t\t\t</div>\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"]}
1	+ {"version":3,"sources":["../../../../../../../../src/components/Map/components/MapLayer/components/BoundaryLayer/index.tsx"],"names":[],"mappings":"AAuDO,cAGC,YAHD;AAvDP,OAAO,UAAU;AACjB,SAAS,cAAc;AAEvB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,SAAS,kBAAkB,sBAAsB;AAEjD,SAAS,uBAAuB;AAEzB,MAAM,eAAe;AAAA,EAC3B,QAAQ;AAAA,EACR,OAAO,OAAO;AAAA,EACd,WAAW,OAAO;AAAA,EAClB,aAAa;AACd;AACO,MAAM,iBAAiB;AAAA,EAC7B,QAAQ;AAAA,EACR,OAAO,OAAO;AAAA,EACd,WAAW;AAAA,EACX,aAAa;AACd;AAEe,SAAR,cAA+B,OAA+B;AACpE,QAAM,EAAE,SAAS,qBAAqB,aAAa,IAAI,SAAS,CAAC;AACjE,QAAM,WAAW,gBAAgB;AAEjC,SACC,oBAAC,cAAc,SAAd,EAAsB,SAAS,SAAS,MAAM,KAAK,EAAE,YAAY,GACjE,8BAAC,cACC,oBAAU,IAAI,CAAC,SAAqB;AACpC,WACC;AAAA,MAAC;AAAA;AAAA,QACA,MAAM,KAAK;AAAA,QACX,aAAW;AAAA,QACX,eAAe;AAAA,UACd,WAAW,CAAC,MACX,iBAAiB,GAAG,cAAc;AAAA,UACnC,UAAU,CAAC,MACV,eAAe,GAAG,YAAY;AAAA,UAC/B,GAAI,uBAAuB,CAAC;AAAA,UAC5B,WAAW,CAAC,MAAM;AACjB,gBAAI,cAAc;AACjB,2BAAa,GAAG,EAAE,SAAS,KAAK,CAAC;AAAA,YAClC;AAAA,UACD;AAAA,QACD;AAAA,QAEA,aAAa;AAAA,QAEb;AAAA,8BAAC,WAAS,eAAK,MAAK;AAAA,UACpB,qBAAC,SAAM,UAAU,IAChB;AAAA,gCAAC,QAAI,eAAK,MAAK;AAAA,YACf,qBAAC,SACA;AAAA,kCAAC,OAAE,qBAAO;AAAA,cACT,KAAK;AAAA,eACP;AAAA,aACD;AAAA;AAAA;AAAA,MAVK,GAAG,KAAK,EAAE;AAAA,IAWhB;AAAA,EAEF,CAAC,GACF,GACD;AAEF","sourcesContent":["import i18n from \"@dhis2/d2-i18n\";\nimport { colors } from \"@dhis2/ui\";\nimport React from \"react\";\nimport {\n\tGeoJSON,\n\tLayerGroup,\n\tLayersControl,\n\tPopup,\n\tTooltip,\n} from \"react-leaflet\";\nimport { MapOrgUnit } from \"../../../../interfaces/index.js\";\nimport { highlightFeature, resetHighlight } from \"../../../../utils/map.js\";\nimport { CustomBoundaryLayer as BoundaryLayerInterface } from \"../../interfaces/index.js\";\nimport { useBoundaryData } from \"./hooks/useBoundaryData.js\";\n\nexport const defaultStyle = {\n\tweight: 1,\n\tcolor: colors.grey900,\n\tfillColor: colors.grey900,\n\tfillOpacity: 0.0,\n};\nexport const highlightStyle = {\n\tweight: 2,\n\tcolor: colors.grey900,\n\tdashArray: \"\",\n\tfillOpacity: 0.1,\n};\n\nexport default function BoundaryLayer(props: BoundaryLayerInterface) {\n\tconst { enabled, customEventHandlers, onLayerClick } = props ?? {};\n\tconst orgUnits = useBoundaryData();\n\n\treturn (\n\t\t<LayersControl.Overlay checked={enabled} name={i18n.t(\"Boundaries\")}>\n\t\t\t<LayerGroup>\n\t\t\t\t{orgUnits?.map((area: MapOrgUnit) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<GeoJSON\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\teventHandlers={{\n\t\t\t\t\t\t\t\tmouseover: (e) =>\n\t\t\t\t\t\t\t\t\thighlightFeature(e, highlightStyle),\n\t\t\t\t\t\t\t\tmouseout: (e) =>\n\t\t\t\t\t\t\t\t\tresetHighlight(e, defaultStyle),\n\t\t\t\t\t\t\t\t...(customEventHandlers ?? {}),\n\t\t\t\t\t\t\t\tmousedown: (e) => {\n\t\t\t\t\t\t\t\t\tif (onLayerClick) {\n\t\t\t\t\t\t\t\t\t\tonLayerClick(e, { orgUnit: area });\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\tkey={`${area.id}-polygon`}\n\t\t\t\t\t\t\tpathOptions={defaultStyle}\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\t<div>\n\t\t\t\t\t\t\t\t\t<b>Level: </b>\n\t\t\t\t\t\t\t\t\t{area.level}\n\t\t\t\t\t\t\t\t</div>\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/LegendArea/components/LegendCardHeader/index.js CHANGED Viewed

@@ -6,10 +6,22 @@ function LegendCardHeader({
   collapsible,
   onCollapse
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "row w-100 space-between align-items-center", children: [
-    /* @__PURE__ */ jsx("h4", { style: { margin: 0 }, className: "legend-header", children: title }),
-    collapsible && /* @__PURE__ */ jsx("div", { onClick: onCollapse, children: /* @__PURE__ */ jsx(IconLaunch16, {}) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        width: "100%",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: 8
+      },
+      children: [
+        /* @__PURE__ */ jsx("h4", { style: { margin: 0 }, className: "legend-header", children: title }),
+        collapsible && /* @__PURE__ */ jsx("div", { onClick: onCollapse, children: /* @__PURE__ */ jsx(IconLaunch16, {}) })
+      ]
+    }
+  );
 }
 export { LegendCardHeader as default };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../../../src/components/Map/components/MapLayer/components/LegendArea/components/LegendCardHeader/index.tsx"],"names":[],"mappings":"AAaE,~~SACC~~,~~KADD~~;AAbF,SAAS,oBAAoB;AAGd,SAAR,iBAAkC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AACD,GAIG;AACF,SACC,~~qBAAC~~,~~SAAI~~,~~WAAU~~,~~8CACd~~;AAAA,~~wBAAC~~,QAAG,OAAO,EAAE,QAAQ,EAAE,GAAG,WAAU,iBAClC,iBACF;AAAA,~~IACC~~,eACA,oBAAC,SAAI,SAAS,YACb,8BAAC,gBAAa,GACf;AAAA,~~KAEF~~;AAEF","sourcesContent":["import { IconLaunch16 } from \"@dhis2/ui\";\nimport React from \"react\";\n\nexport default function LegendCardHeader({\n\ttitle,\n\tcollapsible,\n\tonCollapse,\n}: {\n\ttitle: string;\n\tonCollapse?: () => void;\n\tcollapsible?: boolean;\n}) {\n\treturn (\n\t\t<div ~~className=\~~"~~row~~ w-100 space-between ~~align-items-~~center\">\n\t\t\t<h4 style={{ margin: 0 }} className=\"legend-header\">\n\t\t\t\t{title}\n\t\t\t</h4>\n\t\t\t{collapsible && (\n\t\t\t\t<div onClick={onCollapse}>\n\t\t\t\t\t<IconLaunch16 />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["../../../../../../../../../../src/components/Map/components/MapLayer/components/LegendArea/components/LegendCardHeader/index.tsx"],"names":[],"mappings":"AAaE,SASC,KATD;AAbF,SAAS,oBAAoB;AAGd,SAAR,iBAAkC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AACD,GAIG;AACF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,SAAS;AAAA,MACV;AAAA,MAEA;AAAA,4BAAC,QAAG,OAAO,EAAE,QAAQ,EAAE,GAAG,WAAU,iBAClC,iBACF;AAAA,QACC,eACA,oBAAC,SAAI,SAAS,YACb,8BAAC,gBAAa,GACf;AAAA;AAAA;AAAA,EAEF;AAEF","sourcesContent":["import { IconLaunch16 } from \"@dhis2/ui\";\nimport React from \"react\";\n\nexport default function LegendCardHeader({\n\ttitle,\n\tcollapsible,\n\tonCollapse,\n}: {\n\ttitle: string;\n\tonCollapse?: () => void;\n\tcollapsible?: boolean;\n}) {\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\twidth: \"100%\",\n\t\t\t\tjustifyContent: \"space-between\",\n\t\t\t\talignItems: \"center\",\n\t\t\t\tpadding: 8,\n\t\t\t}}\n\t\t>\n\t\t\t<h4 style={{ margin: 0 }} className=\"legend-header\">\n\t\t\t\t{title}\n\t\t\t</h4>\n\t\t\t{collapsible && (\n\t\t\t\t<div onClick={onCollapse}>\n\t\t\t\t\t<IconLaunch16 />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"]}

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

@@ -164,14 +164,25 @@ function LegendArea({
     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,
+  return /* @__PURE__ */ jsx(CustomControl, { position, children: /* @__PURE__ */ jsx(
+    "div",
     {
-      collapsible: collapsible ?? true,
-      children: legend
-    },
-    `${index}-map-legend`
-  )) }) });
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        alignItems: "flex-end"
+      },
+      children: legends?.map((legend, index) => /* @__PURE__ */ jsx(
+        Legend,
+        {
+          collapsible: collapsible ?? true,
+          children: legend
+        },
+        `${index}-map-legend`
+      ))
+    }
+  ) });
 }
 export { LegendArea as default };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/components/Map/components/MapLayer/components/LegendArea/index.tsx"],"names":[],"mappings":"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~~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"]}
1	+ {"version":3,"sources":["../../../../../../../../src/components/Map/components/MapLayer/components/LegendArea/index.tsx"],"names":[],"mappings":"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","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\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\tflexDirection: \"column\",\n\t\t\t\t\tgap: 16,\n\t\t\t\t\talignItems: \"flex-end\",\n\t\t\t\t}}\n\t\t\t>\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 CHANGED Viewed

@@ -5,6 +5,7 @@ import { forwardRef } from 'react';
 import { getIconUrl } from '../../../../../../utils/helpers.js';
 import LegendCardHeader from '../../../LegendArea/components/LegendCardHeader/index.js';
 import { usePointLayer } from '../../hooks/index.js';
+import i18n from '@dhis2/d2-i18n';
 function PointLegends({
   orgUnitGroups,
@@ -15,12 +16,23 @@ function PointLegends({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      style: { minWidth: 100, alignItems: "flex-start" },
-      className: "w-100 p-8 legend-list column",
+      style: {
+        minWidth: 100,
+        alignItems: "flex-start",
+        width: "100%",
+        padding: 8,
+        display: "flex",
+        flexDirection: "column"
+      },
       children: [
         icon && /* @__PURE__ */ jsxs(
           "div",
           {
+            style: {
+              display: "flex",
+              gap: 16,
+              alignItems: "center"
+            },
             className: "row gap-16  align-items-center",
             children: [
               /* @__PURE__ */ jsx(
@@ -71,7 +83,7 @@ function PointLegend({ collapsible, onCollapse }, ref) {
       {
         collapsible,
         onCollapse,
-        title: label ?? "Points"
+        title: label ?? i18n.t("Points")
       }
     ),
     /* @__PURE__ */ jsx(Divider, { margin: "0" }),

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

	@@ -1 +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,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"]}
1	+ {"version":3,"sources":["../../../../../../../../../../src/components/Map/components/MapLayer/components/PointLayer/components/PointLegend/index.tsx"],"names":["name"],"mappings":"AA+BI,SASC,KATD;AA/BJ,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,OAAO,sBAAsB;AAC7B,SAAS,qBAAqB;AAC9B,OAAO,UAAU;AAEjB,SAAS,aAAa;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACD,GAIG;AACF,QAAM,EAAE,QAAQ,IAAI,UAAU;AAE9B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,eAAe;AAAA,MAChB;AAAA,MAEC;AAAA,gBACA;AAAA,UAAC;AAAA;AAAA,YAEA,OAAO;AAAA,cACN,SAAS;AAAA,cACT,KAAK;AAAA,cACL,YAAY;AAAA,YACb;AAAA,YACA,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,UAdL,GAAG,IAAI;AAAA,QAeb;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,KAAK,EAAE,QAAQ;AAAA;AAAA,IAChC;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\";\nimport i18n from \"@dhis2/d2-i18n\";\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={{\n\t\t\t\tminWidth: 100,\n\t\t\t\talignItems: \"flex-start\",\n\t\t\t\twidth: \"100%\",\n\t\t\t\tpadding: 8,\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tflexDirection: \"column\",\n\t\t\t}}\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\tstyle={{\n\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t}}\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 ?? i18n.t(\"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/index.js CHANGED Viewed

@@ -8,7 +8,14 @@ import { usePointLayer } from './hooks/index.js';
 function PointLayer() {
   const pointLayer = usePointLayer();
-  const { enabled, label, points: orgUnits, style } = pointLayer ?? {};
+  const {
+    enabled,
+    label,
+    points: orgUnits,
+    style,
+    customEventHandlers,
+    onLayerClick
+  } = pointLayer ?? {};
   const { baseUrl } = useConfig();
   return /* @__PURE__ */ jsx(
     LayersControl.Overlay,
@@ -29,6 +36,14 @@ function PointLayer() {
                 )
               });
             },
+            eventHandlers: {
+              ...customEventHandlers ?? {},
+              mousedown: (e) => {
+                if (onLayerClick) {
+                  onLayerClick(e, { orgUnit: area });
+                }
+              }
+            },
             data: area.geoJSON,
             interactive: true,
             children: [

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

	@@ -1 +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/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"]}
1	+ {"version":3,"sources":["../../../../../../../../src/components/Map/components/MapLayer/components/PointLayer/index.tsx"],"names":[],"mappings":"AAkCM,SAuBC,KAvBD;AAlCN,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;AAAA,IACL;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,cAAc,CAAC;AACnB,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,eAAe;AAAA,cACd,GAAI,uBAAuB,CAAC;AAAA,cAC5B,WAAW,CAAC,MAAM;AACjB,oBAAI,cAAc;AACjB,+BAAa,GAAG,EAAE,SAAS,KAAK,CAAC;AAAA,gBAClC;AAAA,cACD;AAAA,YACD;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 {\n\t\tenabled,\n\t\tlabel,\n\t\tpoints: orgUnits,\n\t\tstyle,\n\t\tcustomEventHandlers,\n\t\tonLayerClick,\n\t} = 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\teventHandlers={{\n\t\t\t\t\t\t\t\t...(customEventHandlers ?? {}),\n\t\t\t\t\t\t\t\tmousedown: (e) => {\n\t\t\t\t\t\t\t\t\tif (onLayerClick) {\n\t\t\t\t\t\t\t\t\t\tonLayerClick(e, { orgUnit: area });\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/index.js CHANGED Viewed

@@ -16,7 +16,9 @@ function Bubble({
   data,
   highestData,
   legends,
-  radius
+  radius,
+  customEventHandlers,
+  onLayerClick
 }) {
   const { orgUnit, data: value } = data ?? {};
   const geoJSONObject = orgUnit.geoJSON;
@@ -30,7 +32,13 @@ function Bubble({
       interactive: true,
       eventHandlers: {
         mouseover: (e) => highlightFeature(e, highlightStyle),
-        mouseout: (e) => resetHighlight(e, defaultStyle)
+        mouseout: (e) => resetHighlight(e, defaultStyle),
+        ...customEventHandlers ?? {},
+        mousedown: (e) => {
+          if (onLayerClick) {
+            onLayerClick(e, data);
+          }
+        }
       },
       pathOptions: {
         fillColor: getColorFromLegendSet(legends, data.data),

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/index.tsx"],"names":[],"mappings":"~~AAyCE~~,~~mBAgBE~~,~~WAhBF~~;~~AAzCF~~,SAAS,cAAc;AAEvB,~~SAAS~~,~~eAAe~~;~~AACxB~~,SAAgB,eAAe;AAC/B,SAAS,oBAAoB;AAC7B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;~~AAEP~~,OAAO,mBAAmB;~~AAE1B~~,MAAM,eAAe;AAAA,EACpB,QAAQ;AACT;AACA,MAAM,iBAAiB;AAAA,EACtB,QAAQ;AACT;~~AAEe~~,SAAR,OAAwB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,~~GAKG~~;AACF,QAAM,EAAE,SAAS,MAAM,MAAM,IAAI,QAAQ,CAAC;AAE1C,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,SAAS,QAAQ,aAAa,EAAE,UAAU,EAAE,UAAU;AAE5D,QAAM,eAAe,QAAQ,MAAM;AAClC,YAAS,SAAS,MAAM,QAAQ,OAAO,MAAO;AAAA,EAC/C,GAAG,CAAC,QAAQ,MAAM,WAAW,CAAC;AAE9B,SACC,gCACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAW;AAAA,MACX,eAAe;AAAA,QACd,WAAW,CAAC,MAAM,iBAAiB,GAAG,cAAc;AAAA,QACpD,UAAU,CAAC,MAAM,eAAe,GAAG,YAAY;AAAA,~~MAChD~~;AAAA,MACA,aAAa;AAAA,QACZ,WAAW,sBAAsB,SAAS,KAAK,IAAI;AAAA,QACnD,aAAa;AAAA,QACb,OAAO,OAAO;AAAA,QACd,QAAQ;AAAA,MACT;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MAEA,8BAAC,iBAAc,MAAY;AAAA;AAAA,EAC5B,GACD;AAEF","sourcesContent":["import { colors } from \"@dhis2/ui\";\nimport type { Legend } from \"@hisptz/dhis2-utils\";\nimport { ~~geoJSON~~ } from \"leaflet\";\nimport React, { useMemo } from \"react\";\nimport { CircleMarker } from \"react-leaflet\";\nimport {\n\tgetColorFromLegendSet,\n\thighlightFeature,\n\tresetHighlight,\n} from \"../../../../../../utils/map.js\";\nimport { ~~ThematicLayerData~~ } from \"../../../../interfaces/index.js\";\nimport CustomTooltip from \"../CustomTooltip/index.js\";\n\nconst defaultStyle = {\n\tweight: 1,\n};\nconst highlightStyle = {\n\tweight: 2,\n};\n\nexport default function Bubble({\n\tdata,\n\thighestData,\n\tlegends,\n\tradius,\n}: {\n\tdata: ThematicLayerData;\n\thighestData: number;\n\tlegends: Legend[];\n\tradius?: { min: number; max: number };\n}) {\n\tconst { orgUnit, data: value } = data ?? {};\n\n\tconst geoJSONObject = orgUnit.geoJSON;\n\tconst center = geoJSON(geoJSONObject).getBounds().getCenter();\n\n\tconst circleRadius = useMemo(() => {\n\t\treturn ((value ?? 0) * (radius?.max ?? 50)) / highestData;\n\t}, [radius, data, highestData]);\n\n\treturn (\n\t\t<>\n\t\t\t<CircleMarker\n\t\t\t\tinteractive\n\t\t\t\teventHandlers={{\n\t\t\t\t\tmouseover: (e) => highlightFeature(e, highlightStyle),\n\t\t\t\t\tmouseout: (e) => resetHighlight(e, defaultStyle),\n\t\t\t\t}}\n\t\t\t\tpathOptions={{\n\t\t\t\t\tfillColor: getColorFromLegendSet(legends, data.data),\n\t\t\t\t\tfillOpacity: 1,\n\t\t\t\t\tcolor: colors.grey900,\n\t\t\t\t\tweight: 1,\n\t\t\t\t}}\n\t\t\t\tradius={circleRadius}\n\t\t\t\tcenter={center}\n\t\t\t>\n\t\t\t\t<CustomTooltip data={data} />\n\t\t\t</CircleMarker>\n\t\t</>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["../../../../../../../../../../src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/index.tsx"],"names":[],"mappings":"AA2DE,mBAsBE,WAtBF;AA3DF,SAAS,cAAc;AAEvB;AAAA,EACC;AAAA,OAGM;AACP,SAAgB,eAAe;AAC/B,SAAS,oBAAoB;AAC7B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAKP,OAAO,mBAAmB;AAG1B,MAAM,eAAe;AAAA,EACpB,QAAQ;AACT;AACA,MAAM,iBAAiB;AAAA,EACtB,QAAQ;AACT;AAQe,SAAR,OAAwB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAOG;AACF,QAAM,EAAE,SAAS,MAAM,MAAM,IAAI,QAAQ,CAAC;AAE1C,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,SAAS,QAAQ,aAAa,EAAE,UAAU,EAAE,UAAU;AAE5D,QAAM,eAAe,QAAQ,MAAM;AAClC,YAAS,SAAS,MAAM,QAAQ,OAAO,MAAO;AAAA,EAC/C,GAAG,CAAC,QAAQ,MAAM,WAAW,CAAC;AAE9B,SACC,gCACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAW;AAAA,MACX,eAAe;AAAA,QACd,WAAW,CAAC,MAAM,iBAAiB,GAAG,cAAc;AAAA,QACpD,UAAU,CAAC,MAAM,eAAe,GAAG,YAAY;AAAA,QAC/C,GAAI,uBAAuB,CAAC;AAAA,QAC5B,WAAW,CAAC,MAAM;AACjB,cAAI,cAAc;AACjB,yBAAa,GAAG,IAAI;AAAA,UACrB;AAAA,QACD;AAAA,MACD;AAAA,MACA,aAAa;AAAA,QACZ,WAAW,sBAAsB,SAAS,KAAK,IAAI;AAAA,QACnD,aAAa;AAAA,QACb,OAAO,OAAO;AAAA,QACd,QAAQ;AAAA,MACT;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MAEA,8BAAC,iBAAc,MAAY;AAAA;AAAA,EAC5B,GACD;AAEF","sourcesContent":["import { colors } from \"@dhis2/ui\";\nimport type { Legend } from \"@hisptz/dhis2-utils\";\nimport {\n\tgeoJSON,\n\ttype LeafletEventHandlerFnMap,\n\ttype LeafletMouseEvent,\n} from \"leaflet\";\nimport React, { useMemo } from \"react\";\nimport { CircleMarker } from \"react-leaflet\";\nimport {\n\tgetColorFromLegendSet,\n\thighlightFeature,\n\tresetHighlight,\n} from \"../../../../../../utils/map.js\";\nimport {\n\tThematicLayerData,\n\tThematicLayerDataItem,\n} from \"../../../../interfaces/index.js\";\nimport CustomTooltip from \"../CustomTooltip/index.js\";\nimport { MapOrgUnit } from \"../../../../../../interfaces/index.js\";\n\nconst defaultStyle = {\n\tweight: 1,\n};\nconst highlightStyle = {\n\tweight: 2,\n};\n\ninterface LayerData {\n\torgUnit: MapOrgUnit;\n\tdata?: number;\n\tdataItem: ThematicLayerDataItem;\n}\n\nexport default function Bubble({\n\tdata,\n\thighestData,\n\tlegends,\n\tradius,\n\tcustomEventHandlers,\n\tonLayerClick,\n}: {\n\tdata: ThematicLayerData;\n\thighestData: number;\n\tlegends: Legend[];\n\tradius?: { min: number; max: number };\n\tcustomEventHandlers?: LeafletEventHandlerFnMap;\n\tonLayerClick?: (e: LeafletMouseEvent, data: LayerData) => void;\n}) {\n\tconst { orgUnit, data: value } = data ?? {};\n\n\tconst geoJSONObject = orgUnit.geoJSON;\n\tconst center = geoJSON(geoJSONObject).getBounds().getCenter();\n\n\tconst circleRadius = useMemo(() => {\n\t\treturn ((value ?? 0) * (radius?.max ?? 50)) / highestData;\n\t}, [radius, data, highestData]);\n\n\treturn (\n\t\t<>\n\t\t\t<CircleMarker\n\t\t\t\tinteractive\n\t\t\t\teventHandlers={{\n\t\t\t\t\tmouseover: (e) => highlightFeature(e, highlightStyle),\n\t\t\t\t\tmouseout: (e) => resetHighlight(e, defaultStyle),\n\t\t\t\t\t...(customEventHandlers ?? {}),\n\t\t\t\t\tmousedown: (e) => {\n\t\t\t\t\t\tif (onLayerClick) {\n\t\t\t\t\t\t\tonLayerClick(e, data);\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t\tpathOptions={{\n\t\t\t\t\tfillColor: getColorFromLegendSet(legends, data.data),\n\t\t\t\t\tfillOpacity: 1,\n\t\t\t\t\tcolor: colors.grey900,\n\t\t\t\t\tweight: 1,\n\t\t\t\t}}\n\t\t\t\tradius={circleRadius}\n\t\t\t\tcenter={center}\n\t\t\t>\n\t\t\t\t<CustomTooltip data={data} />\n\t\t\t</CircleMarker>\n\t\t</>\n\t);\n}\n"]}

package/dist/esm/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/components/ChoroplethLegend.js CHANGED Viewed

@@ -39,7 +39,7 @@ function ChoroplethLegend({
       }
     ),
     /* @__PURE__ */ jsx(Divider, { margin: "0" }),
-    /* @__PURE__ */ jsx("div", { className: "legend-list pt-8", children: legends?.map((legend) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: { paddingTop: 8 }, className: "legend-list", children: legends?.map((legend) => /* @__PURE__ */ jsx(
       LegendItem,
       {
         legend,

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

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