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

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

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

package/dist/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/index.mjs

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

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

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

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

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('../../../styles/legends.css');
+var ui = require('@dhis2/ui');
+var react = require('react');
+var map = require('../../../../../../../utils/map');
+var LegendCardHeader = require('../../../../LegendArea/components/LegendCardHeader');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var LegendCardHeader__default = /*#__PURE__*/_interopDefault(LegendCardHeader);
+
+function LegendItem({
+  legend,
+  value
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "legend-item", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "legend-item-color",
+        style: { backgroundColor: legend.color }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "legend-item-label", children: `${legend.startValue} - ${legend.endValue}` }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "legend-item-value", children: `(${value})` })
+  ] });
+}
+function ChoroplethLegend({
+  dataItem,
+  data,
+  name,
+  collapsible,
+  onCollapse,
+  legends
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "legend-card", ref, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(LegendCardHeader__default.default, { title: dataItem.displayName, collapsible, onCollapse }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { margin: "0" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "legend-list pt-8", children: legends?.map((legend) => /* @__PURE__ */ jsxRuntime.jsx(LegendItem, { legend, value: map.getLegendCount(legend, data) }, `${legend?.color}-legend-list`)) })
+  ] });
+}
+var ChoroplethLegend_default = react.forwardRef(ChoroplethLegend);
+
+exports.LegendItem = LegendItem;
+exports.default = ChoroplethLegend_default;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=ChoroplethLegend.js.map

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

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

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

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '../../../styles/legends.css';
+import { Divider } from '@dhis2/ui';
+import { forwardRef } from 'react';
+import { getLegendCount } from '../../../../../../../utils/map';
+import LegendCardHeader from '../../../../LegendArea/components/LegendCardHeader';
+
+function LegendItem({
+  legend,
+  value
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "legend-item", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "legend-item-color",
+        style: { backgroundColor: legend.color }
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "legend-item-label", children: `${legend.startValue} - ${legend.endValue}` }),
+    /* @__PURE__ */ jsx("div", { className: "legend-item-value", children: `(${value})` })
+  ] });
+}
+function ChoroplethLegend({
+  dataItem,
+  data,
+  name,
+  collapsible,
+  onCollapse,
+  legends
+}, ref) {
+  return /* @__PURE__ */ jsxs("div", { className: "legend-card", ref, children: [
+    /* @__PURE__ */ jsx(LegendCardHeader, { title: dataItem.displayName, collapsible, onCollapse }),
+    /* @__PURE__ */ jsx(Divider, { margin: "0" }),
+    /* @__PURE__ */ jsx("div", { className: "legend-list pt-8", children: legends?.map((legend) => /* @__PURE__ */ jsx(LegendItem, { legend, value: getLegendCount(legend, data) }, `${legend?.color}-legend-list`)) })
+  ] });
+}
+var ChoroplethLegend_default = forwardRef(ChoroplethLegend);
+
+export { LegendItem, ChoroplethLegend_default as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=ChoroplethLegend.mjs.map

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

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

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

@@ -0,0 +1,43 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ui = require('@dhis2/ui');
+var reactLeaflet = require('react-leaflet');
+var map = require('../../../../../../utils/map');
+var CustomTooltip = require('../CustomTooltip');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var CustomTooltip__default = /*#__PURE__*/_interopDefault(CustomTooltip);
+
+const defaultStyle = {
+  weight: 1
+};
+const highlightStyle = {
+  weight: 2
+};
+function Choropleth({ data, legends }) {
+  const { orgUnit } = data;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactLeaflet.GeoJSON,
+    {
+      data: orgUnit.geoJSON,
+      eventHandlers: {
+        mouseover: (e) => map.highlightFeature(e, highlightStyle),
+        mouseout: (e) => map.resetHighlight(e, defaultStyle)
+      },
+      pathOptions: {
+        fillColor: map.getColorFromLegendSet(legends, data.data),
+        fillOpacity: 1,
+        color: ui.colors.grey900,
+        weight: 1
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip__default.default, { data })
+    },
+    `${data.dataItem.id}-layer`
+  ) });
+}
+
+module.exports = Choropleth;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,37 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { colors } from '@dhis2/ui';
+import { GeoJSON } from 'react-leaflet';
+import { highlightFeature, resetHighlight, getColorFromLegendSet } from '../../../../../../utils/map';
+import CustomTooltip from '../CustomTooltip';
+
+const defaultStyle = {
+  weight: 1
+};
+const highlightStyle = {
+  weight: 2
+};
+function Choropleth({ data, legends }) {
+  const { orgUnit } = data;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    GeoJSON,
+    {
+      data: orgUnit.geoJSON,
+      eventHandlers: {
+        mouseover: (e) => highlightFeature(e, highlightStyle),
+        mouseout: (e) => resetHighlight(e, defaultStyle)
+      },
+      pathOptions: {
+        fillColor: getColorFromLegendSet(legends, data.data),
+        fillOpacity: 1,
+        color: colors.grey900,
+        weight: 1
+      },
+      children: /* @__PURE__ */ jsx(CustomTooltip, { data })
+    },
+    `${data.dataItem.id}-layer`
+  ) });
+}
+
+export { Choropleth as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

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

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

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

@@ -0,0 +1,46 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var i18n = require('@dhis2/d2-i18n');
+var reactLeaflet = require('react-leaflet');
+var hooks = require('../../../../../MapProvider/hooks');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var i18n__default = /*#__PURE__*/_interopDefault(i18n);
+
+function CustomTooltip({
+  data: dataObject
+}) {
+  const { dataItem, orgUnit, data } = dataObject ?? {};
+  const { periods } = hooks.useMapPeriods() ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactLeaflet.Pane,
+    {
+      name: `${dataItem.displayName}-${orgUnit.id}-popup-pane`,
+      pane: "popupPane",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactLeaflet.Tooltip, { children: [
+          orgUnit?.name,
+          " (",
+          data,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactLeaflet.Popup, { minWidth: 80, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0 }, children: orgUnit?.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: dataItem?.displayName }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: periods?.map((period) => period.name).join(",") }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            i18n__default.default.t("Value"),
+            ": ",
+            data
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+module.exports = CustomTooltip;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { Pane, Tooltip, Popup } from 'react-leaflet';
+import { useMapPeriods } from '../../../../../MapProvider/hooks';
+
+function CustomTooltip({
+  data: dataObject
+}) {
+  const { dataItem, orgUnit, data } = dataObject ?? {};
+  const { periods } = useMapPeriods() ?? {};
+  return /* @__PURE__ */ jsxs(
+    Pane,
+    {
+      name: `${dataItem.displayName}-${orgUnit.id}-popup-pane`,
+      pane: "popupPane",
+      children: [
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          orgUnit?.name,
+          " (",
+          data,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxs(Popup, { minWidth: 80, children: [
+          /* @__PURE__ */ jsx("h3", { style: { margin: 0 }, children: orgUnit?.name }),
+          /* @__PURE__ */ jsx("div", { children: dataItem?.displayName }),
+          /* @__PURE__ */ jsx("div", { children: periods?.map((period) => period.name).join(",") }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            i18n.t("Value"),
+            ": ",
+            data
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { CustomTooltip as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

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

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

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var lodash = require('lodash');
+var react = require('react');
+var state = require('../../../../../state');
+
+function useThematicLayer(layerId) {
+  const { layers } = react.useContext(state.MapLayersContext);
+  return lodash.find(layers, ["id", layerId]);
+}
+
+module.exports = useThematicLayer;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=config.js.map

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

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

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

@@ -0,0 +1,12 @@
+import { find } from 'lodash';
+import { useContext } from 'react';
+import { MapLayersContext } from '../../../../../state';
+
+function useThematicLayer(layerId) {
+  const { layers } = useContext(MapLayersContext);
+  return find(layers, ["id", layerId]);
+}
+
+export { useThematicLayer as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=config.mjs.map

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

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

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

@@ -0,0 +1,63 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lodash = require('lodash');
+var reactLeaflet = require('react-leaflet');
+var Bubble = require('./components/Bubble');
+var Choropleth = require('./components/Choropleth');
+var useThematicLayer = require('./hooks/config');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Bubble__default = /*#__PURE__*/_interopDefault(Bubble);
+var Choropleth__default = /*#__PURE__*/_interopDefault(Choropleth);
+var useThematicLayer__default = /*#__PURE__*/_interopDefault(useThematicLayer);
+
+function ThematicLayer({
+  layerId,
+  index
+}) {
+  const layer = useThematicLayer__default.default(layerId);
+  if (!layer) {
+    return null;
+  }
+  const { type, dataItem, name, data, enabled, legends } = layer ?? {};
+  const uniqueName = name ?? dataItem.displayName;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.LayersControl.Overlay, { checked: enabled, name: uniqueName, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactLeaflet.Pane,
+    {
+      style: {
+        zIndex: type === "bubble" ? 500 : 500 - (index + 1)
+      },
+      name: uniqueName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactLeaflet.LayerGroup, { children: [
+        data?.map(
+          (datum) => type === "choropleth" ? /* @__PURE__ */ jsxRuntime.jsx(
+            Choropleth__default.default,
+            {
+              legends: legends ?? [],
+              data: datum
+            },
+            `${datum?.dataItem?.id}-${datum?.orgUnit?.id}-layer`
+          ) : null
+        ),
+        data?.map(
+          (datum) => type === "bubble" ? /* @__PURE__ */ jsxRuntime.jsx(
+            Bubble__default.default,
+            {
+              radius: layer?.radius,
+              legends: legends ?? [],
+              highestData: lodash.last(data)?.data ?? 1,
+              data: datum
+            },
+            `${datum?.dataItem?.id}-${datum?.orgUnit?.id}-layer`
+          ) : null
+        )
+      ] })
+    }
+  ) }) });
+}
+
+module.exports = ThematicLayer;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,55 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { last } from 'lodash';
+import { LayersControl, Pane, LayerGroup } from 'react-leaflet';
+import Bubble from './components/Bubble';
+import Choropleth from './components/Choropleth';
+import useThematicLayer from './hooks/config';
+
+function ThematicLayer({
+  layerId,
+  index
+}) {
+  const layer = useThematicLayer(layerId);
+  if (!layer) {
+    return null;
+  }
+  const { type, dataItem, name, data, enabled, legends } = layer ?? {};
+  const uniqueName = name ?? dataItem.displayName;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(LayersControl.Overlay, { checked: enabled, name: uniqueName, children: /* @__PURE__ */ jsx(
+    Pane,
+    {
+      style: {
+        zIndex: type === "bubble" ? 500 : 500 - (index + 1)
+      },
+      name: uniqueName,
+      children: /* @__PURE__ */ jsxs(LayerGroup, { children: [
+        data?.map(
+          (datum) => type === "choropleth" ? /* @__PURE__ */ jsx(
+            Choropleth,
+            {
+              legends: legends ?? [],
+              data: datum
+            },
+            `${datum?.dataItem?.id}-${datum?.orgUnit?.id}-layer`
+          ) : null
+        ),
+        data?.map(
+          (datum) => type === "bubble" ? /* @__PURE__ */ jsx(
+            Bubble,
+            {
+              radius: layer?.radius,
+              legends: legends ?? [],
+              highestData: last(data)?.data ?? 1,
+              data: datum
+            },
+            `${datum?.dataItem?.id}-${datum?.orgUnit?.id}-layer`
+          ) : null
+        )
+      ] })
+    }
+  ) }) });
+}
+
+export { ThematicLayer as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

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

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

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

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var BoundaryLayer = require('./components/BoundaryLayer');
+var GoogleEngineLayer = require('./components/GoogleEngineLayer');
+var PointLayer = require('./components/PointLayer');
+var ThematicLayer = require('./components/ThematicLayer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var BoundaryLayer__default = /*#__PURE__*/_interopDefault(BoundaryLayer);
+var GoogleEngineLayer__default = /*#__PURE__*/_interopDefault(GoogleEngineLayer);
+var ThematicLayer__default = /*#__PURE__*/_interopDefault(ThematicLayer);
+
+function MapLayer({
+  layer,
+  index
+}) {
+  switch (layer.type) {
+    case "overlay":
+    case "basemap":
+      return /* @__PURE__ */ jsxRuntime.jsx(BoundaryLayer__default.default, { ...layer });
+    case "bubble":
+    case "choropleth":
+      return /* @__PURE__ */ jsxRuntime.jsx(ThematicLayer__default.default, { layerId: layer.id, index });
+    case "point":
+      return /* @__PURE__ */ jsxRuntime.jsx(PointLayer.PointLayer, {});
+    case "population":
+    case "elevation":
+    case "footprints":
+    case "landCover":
+      return /* @__PURE__ */ jsxRuntime.jsx(GoogleEngineLayer__default.default, { layerId: layer.id });
+    default:
+      return null;
+  }
+}
+
+module.exports = MapLayer;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import BoundaryLayer from './components/BoundaryLayer';
+import GoogleEngineLayer from './components/GoogleEngineLayer';
+import { PointLayer } from './components/PointLayer';
+import ThematicLayer from './components/ThematicLayer';
+
+function MapLayer({
+  layer,
+  index
+}) {
+  switch (layer.type) {
+    case "overlay":
+    case "basemap":
+      return /* @__PURE__ */ jsx(BoundaryLayer, { ...layer });
+    case "bubble":
+    case "choropleth":
+      return /* @__PURE__ */ jsx(ThematicLayer, { layerId: layer.id, index });
+    case "point":
+      return /* @__PURE__ */ jsx(PointLayer, {});
+    case "population":
+    case "elevation":
+    case "footprints":
+    case "landCover":
+      return /* @__PURE__ */ jsx(GoogleEngineLayer, { layerId: layer.id });
+    default:
+      return null;
+  }
+}
+
+export { MapLayer as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map