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

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

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

package/dist/esm/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":"AAyCE,mBAgBE,WAhBF;AAzCF,SAAS,cAAc;AAEvB,SAAS,eAAe;AACxB,SAAgB,eAAe;AAC/B,SAAS,oBAAoB;AAC7B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,OAAO,mBAAmB;AAE1B,MAAM,eAAe;AAAA,EACpB,QAAQ;AACT;AACA,MAAM,iBAAiB;AAAA,EACtB,QAAQ;AACT;AAEe,SAAR,OAAwB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAKG;AACF,QAAM,EAAE,SAAS,MAAM,MAAM,IAAI,QAAQ,CAAC;AAE1C,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,SAAS,QAAQ,aAAa,EAAE,UAAU,EAAE,UAAU;AAE5D,QAAM,eAAe,QAAQ,MAAM;AAClC,YAAS,SAAS,MAAM,QAAQ,OAAO,MAAO;AAAA,EAC/C,GAAG,CAAC,QAAQ,MAAM,WAAW,CAAC;AAE9B,SACC,gCACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAW;AAAA,MACX,eAAe;AAAA,QACd,WAAW,CAAC,MAAM,iBAAiB,GAAG,cAAc;AAAA,QACpD,UAAU,CAAC,MAAM,eAAe,GAAG,YAAY;AAAA,MAChD;AAAA,MACA,aAAa;AAAA,QACZ,WAAW,sBAAsB,SAAS,KAAK,IAAI;AAAA,QACnD,aAAa;AAAA,QACb,OAAO,OAAO;AAAA,QACd,QAAQ;AAAA,MACT;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MAEA,8BAAC,iBAAc,MAAY;AAAA;AAAA,EAC5B,GACD;AAEF","sourcesContent":["import { colors } from \"@dhis2/ui\";\nimport type { Legend } from \"@hisptz/dhis2-utils\";\nimport { geoJSON } from \"leaflet\";\nimport React, { useMemo } from \"react\";\nimport { CircleMarker } from \"react-leaflet\";\nimport {\n\tgetColorFromLegendSet,\n\thighlightFeature,\n\tresetHighlight,\n} from \"../../../../../../utils/map.js\";\nimport { ThematicLayerData } from \"../../../../interfaces/index.js\";\nimport CustomTooltip from \"../CustomTooltip/index.js\";\n\nconst defaultStyle = {\n\tweight: 1,\n};\nconst highlightStyle = {\n\tweight: 2,\n};\n\nexport default function Bubble({\n\tdata,\n\thighestData,\n\tlegends,\n\tradius,\n}: {\n\tdata: ThematicLayerData;\n\thighestData: number;\n\tlegends: Legend[];\n\tradius?: { min: number; max: number };\n}) {\n\tconst { orgUnit, data: value } = data ?? {};\n\n\tconst geoJSONObject = orgUnit.geoJSON;\n\tconst center = geoJSON(geoJSONObject).getBounds().getCenter();\n\n\tconst circleRadius = useMemo(() => {\n\t\treturn ((value ?? 0) * (radius?.max ?? 50)) / highestData;\n\t}, [radius, data, highestData]);\n\n\treturn (\n\t\t<>\n\t\t\t<CircleMarker\n\t\t\t\tinteractive\n\t\t\t\teventHandlers={{\n\t\t\t\t\tmouseover: (e) => highlightFeature(e, highlightStyle),\n\t\t\t\t\tmouseout: (e) => resetHighlight(e, defaultStyle),\n\t\t\t\t}}\n\t\t\t\tpathOptions={{\n\t\t\t\t\tfillColor: getColorFromLegendSet(legends, data.data),\n\t\t\t\t\tfillOpacity: 1,\n\t\t\t\t\tcolor: colors.grey900,\n\t\t\t\t\tweight: 1,\n\t\t\t\t}}\n\t\t\t\tradius={circleRadius}\n\t\t\t\tcenter={center}\n\t\t\t>\n\t\t\t\t<CustomTooltip data={data} />\n\t\t\t</CircleMarker>\n\t\t</>\n\t);\n}\n"]}

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

@@ -0,0 +1,56 @@
+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.js';
+import LegendCardHeader from '../../../../LegendArea/components/LegendCardHeader/index.js';
+
+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.js.map

package/dist/esm/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,iBACR;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAQA,KACC;AACD,SACC,qBAAC,SAAI,WAAU,eAAc,KAC5B;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,SAAS;AAAA,QAChB;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IACA,oBAAC,WAAQ,QAAQ,KAAK;AAAA,IACtB,oBAAC,SAAI,WAAU,oBACb,mBAAS,IAAI,CAAC,WACd;AAAA,MAAC;AAAA;AAAA,QAEA;AAAA,QACA,OAAO,eAAe,QAAQ,IAAI;AAAA;AAAA,MAF7B,GAAG,QAAQ,KAAK;AAAA,IAGtB,CACA,GACF;AAAA,KACD;AAEF;AAEA,IAAO,2BAAQ,WAAW,gBAAgB","sourcesContent":["import \"../../../styles/legends.css\";\nimport { Divider } from \"@dhis2/ui\";\nimport type { Legend } from \"@hisptz/dhis2-utils\";\nimport React, { forwardRef } from \"react\";\nimport { getLegendCount } from \"../../../../../../../utils/map.js\";\nimport {\n\tThematicLayerData,\n\tThematicLayerDataItem,\n} from \"../../../../../interfaces/index.js\";\nimport LegendCardHeader from \"../../../../LegendArea/components/LegendCardHeader/index.js\";\n\nexport function LegendItem({\n\tlegend,\n\tvalue,\n}: {\n\tlegend: { startValue: number; endValue: number; color: string };\n\tvalue: number;\n}) {\n\treturn (\n\t\t<div className=\"legend-item\">\n\t\t\t<div\n\t\t\t\tclassName=\"legend-item-color\"\n\t\t\t\tstyle={{ backgroundColor: legend.color }}\n\t\t\t/>\n\t\t\t<div className=\"legend-item-label\">{`${legend.startValue} - ${legend.endValue}`}</div>\n\t\t\t<div className=\"legend-item-value\">{`(${value})`}</div>\n\t\t</div>\n\t);\n}\n\nfunction ChoroplethLegend(\n\t{\n\t\tdataItem,\n\t\tdata,\n\t\tname,\n\t\tcollapsible,\n\t\tonCollapse,\n\t\tlegends,\n\t}: {\n\t\tdata: ThematicLayerData[];\n\t\tdataItem: ThematicLayerDataItem;\n\t\tname?: string;\n\t\tcollapsible?: boolean;\n\t\tonCollapse?: () => void;\n\t\tlegends: Legend[];\n\t},\n\tref: React.LegacyRef<HTMLDivElement> | undefined,\n) {\n\treturn (\n\t\t<div className=\"legend-card\" ref={ref}>\n\t\t\t<LegendCardHeader\n\t\t\t\ttitle={dataItem.displayName}\n\t\t\t\tcollapsible={collapsible}\n\t\t\t\tonCollapse={onCollapse}\n\t\t\t/>\n\t\t\t<Divider margin={\"0\"} />\n\t\t\t<div className=\"legend-list pt-8\">\n\t\t\t\t{legends?.map((legend: any) => (\n\t\t\t\t\t<LegendItem\n\t\t\t\t\t\tkey={`${legend?.color}-legend-list`}\n\t\t\t\t\t\tlegend={legend}\n\t\t\t\t\t\tvalue={getLegendCount(legend, data)}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default forwardRef(ChoroplethLegend);\n"]}

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

@@ -0,0 +1,40 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { colors } from '@dhis2/ui';
+import { GeoJSON } from 'react-leaflet';
+import { highlightFeature, resetHighlight, getColorFromLegendSet } from '../../../../../../utils/map.js';
+import CustomTooltip from '../CustomTooltip/index.js';
+
+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.js.map

package/dist/esm/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":"AAiCE,mBAeE,WAfF;AAjCF,SAAS,cAAc;AAGvB,SAAS,eAAe;AAExB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,OAAO,mBAAmB;AAE1B,MAAM,eAAe;AAAA,EACpB,QAAQ;AACT;AACA,MAAM,iBAAiB;AAAA,EACtB,QAAQ;AACT;AAEe,SAAR,WAA4B;AAAA,EAClC;AAAA,EACA;AACD,GAOG;AACF,QAAM,EAAE,QAAQ,IAAI;AACpB,SACC,gCACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAM,QAAQ;AAAA,MACd,eAAe;AAAA,QACd,WAAW,CAAC,MAAM,iBAAiB,GAAG,cAAc;AAAA,QACpD,UAAU,CAAC,MAAM,eAAe,GAAG,YAAY;AAAA,MAChD;AAAA,MACA,aAAa;AAAA,QACZ,WAAW,sBAAsB,SAAS,KAAK,IAAI;AAAA,QACnD,aAAa;AAAA,QACb,OAAO,OAAO;AAAA,QACd,QAAQ;AAAA,MACT;AAAA,MAGA,8BAAC,iBAAc,MAAY;AAAA;AAAA,IAFtB,GAAG,KAAK,SAAS,EAAE;AAAA,EAGzB,GACD;AAEF","sourcesContent":["import { colors } from \"@dhis2/ui\";\nimport type { Legend } from \"@hisptz/dhis2-utils\";\nimport React from \"react\";\nimport { GeoJSON } from \"react-leaflet\";\nimport { MapOrgUnit } from \"../../../../../../interfaces/index.js\";\nimport {\n\tgetColorFromLegendSet,\n\thighlightFeature,\n\tresetHighlight,\n} from \"../../../../../../utils/map.js\";\nimport { ThematicLayerDataItem } from \"../../../../interfaces/index.js\";\nimport CustomTooltip from \"../CustomTooltip/index.js\";\n\nconst defaultStyle = {\n\tweight: 1,\n};\nconst highlightStyle = {\n\tweight: 2,\n};\n\nexport default function Choropleth({\n\tdata,\n\tlegends,\n}: {\n\tdata: {\n\t\torgUnit: MapOrgUnit;\n\t\tdata?: number;\n\t\tdataItem: ThematicLayerDataItem;\n\t};\n\tlegends: Legend[];\n}) {\n\tconst { orgUnit } = data;\n\treturn (\n\t\t<>\n\t\t\t<GeoJSON\n\t\t\t\tdata={orgUnit.geoJSON}\n\t\t\t\teventHandlers={{\n\t\t\t\t\tmouseover: (e) => highlightFeature(e, highlightStyle),\n\t\t\t\t\tmouseout: (e) => resetHighlight(e, defaultStyle),\n\t\t\t\t}}\n\t\t\t\tpathOptions={{\n\t\t\t\t\tfillColor: getColorFromLegendSet(legends, data.data),\n\t\t\t\t\tfillOpacity: 1,\n\t\t\t\t\tcolor: colors.grey900,\n\t\t\t\t\tweight: 1,\n\t\t\t\t}}\n\t\t\t\tkey={`${data.dataItem.id}-layer`}\n\t\t\t>\n\t\t\t\t<CustomTooltip data={data} />\n\t\t\t</GeoJSON>\n\t\t</>\n\t);\n}\n"]}

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

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

package/dist/esm/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/index.js\";\nimport { ThematicLayerData } from \"../../../../interfaces/index.js\";\n\nexport default function CustomTooltip({\n\tdata: dataObject,\n}: {\n\tdata: ThematicLayerData;\n}) {\n\tconst { dataItem, orgUnit, data } = dataObject ?? {};\n\tconst { periods } = useMapPeriods() ?? {};\n\n\treturn (\n\t\t<Pane\n\t\t\tname={`${dataItem.displayName}-${orgUnit.id}-popup-pane`}\n\t\t\tpane=\"popupPane\"\n\t\t>\n\t\t\t<Tooltip>\n\t\t\t\t{orgUnit?.name} ({data})\n\t\t\t</Tooltip>\n\t\t\t<Popup minWidth={80}>\n\t\t\t\t<h3 style={{ margin: 0 }}>{orgUnit?.name}</h3>\n\t\t\t\t<div>{dataItem?.displayName}</div>\n\t\t\t\t<div>{periods?.map((period) => period.name).join(\",\")}</div>\n\t\t\t\t<div>\n\t\t\t\t\t{i18n.t(\"Value\")}: {data}\n\t\t\t\t</div>\n\t\t\t</Popup>\n\t\t</Pane>\n\t);\n}\n"]}

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

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

package/dist/esm/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/index.js\";\nimport { CustomThematicLayer } from \"../../../interfaces/index.js\";\n\nexport default function useThematicLayer(\n\tlayerId: string,\n): CustomThematicLayer | undefined {\n\tconst { layers } = useContext(MapLayersContext);\n\n\treturn find(layers as CustomThematicLayer[], [\"id\", layerId]);\n}\n"]}

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

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

package/dist/esm/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/index.js\";\nimport Bubble from \"./components/Bubble/index.js\";\nimport Choropleth from \"./components/Choropleth/index.js\";\nimport useThematicLayer from \"./hooks/config.js\";\n\nexport default function ThematicLayer({\n\tlayerId,\n\tindex,\n}: {\n\tlayerId: string;\n\tindex: number;\n}) {\n\tconst layer = useThematicLayer(layerId);\n\n\tif (!layer) {\n\t\treturn null;\n\t}\n\n\tconst { type, dataItem, name, data, enabled, legends } = layer ?? {};\n\tconst uniqueName = name ?? dataItem.displayName;\n\treturn (\n\t\t<>\n\t\t\t<LayersControl.Overlay checked={enabled} name={uniqueName}>\n\t\t\t\t<Pane\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tzIndex: type === \"bubble\" ? 500 : 500 - (index + 1),\n\t\t\t\t\t}}\n\t\t\t\t\tname={uniqueName}\n\t\t\t\t>\n\t\t\t\t\t<LayerGroup>\n\t\t\t\t\t\t{data?.map((datum) =>\n\t\t\t\t\t\t\ttype === \"choropleth\" ? (\n\t\t\t\t\t\t\t\t<Choropleth\n\t\t\t\t\t\t\t\t\tlegends={legends ?? []}\n\t\t\t\t\t\t\t\t\tdata={datum}\n\t\t\t\t\t\t\t\t\tkey={`${datum?.dataItem?.id}-${datum?.orgUnit?.id}-layer`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : null,\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{data?.map((datum) =>\n\t\t\t\t\t\t\ttype === \"bubble\" ? (\n\t\t\t\t\t\t\t\t<Bubble\n\t\t\t\t\t\t\t\t\tradius={\n\t\t\t\t\t\t\t\t\t\t(layer as CustomBubbleLayer)?.radius\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tlegends={legends ?? []}\n\t\t\t\t\t\t\t\t\thighestData={last(data)?.data ?? 1}\n\t\t\t\t\t\t\t\t\tdata={datum}\n\t\t\t\t\t\t\t\t\tkey={`${datum?.dataItem?.id}-${datum?.orgUnit?.id}-layer`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : null,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</LayerGroup>\n\t\t\t\t</Pane>\n\t\t\t</LayersControl.Overlay>\n\t\t</>\n\t);\n}\n"]}

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import BoundaryLayer from './components/BoundaryLayer/index.js';
+import GoogleEngineLayer from './components/GoogleEngineLayer/index.js';
+import { PointLayer } from './components/PointLayer/index.js';
+import ThematicLayer from './components/ThematicLayer/index.js';
+
+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.js.map

package/dist/esm/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/index.js\";\nimport GoogleEngineLayer from \"./components/GoogleEngineLayer/index.js\";\nimport { PointLayer } from \"./components/PointLayer/index.js\";\nimport ThematicLayer from \"./components/ThematicLayer/index.js\";\nimport {\n\tCustomBoundaryLayer,\n\tCustomGoogleEngineLayer,\n\tCustomPointLayer,\n\tCustomThematicLayer,\n} from \"./interfaces/index.js\";\n\nexport default function MapLayer({\n\tlayer,\n\tindex,\n}: {\n\tlayer:\n\t\t| CustomThematicLayer\n\t\t| CustomBoundaryLayer\n\t\t| CustomPointLayer\n\t\t| CustomGoogleEngineLayer;\n\tindex: number;\n}) {\n\tswitch (layer.type) {\n\t\tcase \"overlay\":\n\t\tcase \"basemap\":\n\t\t\treturn <BoundaryLayer {...layer} />;\n\t\tcase \"bubble\":\n\t\tcase \"choropleth\":\n\t\t\treturn <ThematicLayer layerId={layer.id} index={index} />;\n\t\tcase \"point\":\n\t\t\treturn <PointLayer />;\n\t\tcase \"population\":\n\t\tcase \"elevation\":\n\t\tcase \"footprints\":\n\t\tcase \"landCover\":\n\t\t\treturn <GoogleEngineLayer layerId={layer.id} />;\n\t\tdefault:\n\t\t\treturn null;\n\t}\n}\n"]}

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

@@ -0,0 +1,10 @@
+const SUPPORTED_EARTH_ENGINE_LAYERS = [
+  "population",
+  "footprints",
+  "elevation",
+  "landCover"
+];
+
+export { SUPPORTED_EARTH_ENGINE_LAYERS };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/Map/components/MapLayer/interfaces/index.ts"],"names":[],"mappings":"AASO,MAAM,gCAAgC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD","sourcesContent":["import type { Legend } from \"@hisptz/dhis2-utils\";\nimport { MapOrgUnit, PointOrgUnit } from \"../../../interfaces/index.js\";\nimport { LegendColorScale } from \"../../../utils/colors.js\";\nimport { EarthEngineOptions } from \"../components/GoogleEngineLayer/interfaces/index.js\";\nimport { EarthEngine } from \"../components/GoogleEngineLayer/services/engine.js\";\n\nexport type BoundaryLayerType = \"basemap\" | \"overlay\";\nexport type ThematicLayerType = \"choropleth\" | \"bubble\";\n\nexport const SUPPORTED_EARTH_ENGINE_LAYERS = [\n\t\"population\",\n\t\"footprints\",\n\t\"elevation\",\n\t\"landCover\",\n];\n\nexport type GoogleEngineLayerType =\n\t| \"population\"\n\t| \"footprints\"\n\t| \"elevation\"\n\t| \"landCover\";\n\nexport interface CustomBoundaryLayer extends CustomMapLayer {\n\tid: string;\n\ttype: BoundaryLayerType;\n\tenabled: boolean;\n}\n\nexport interface EarthEngineLayerConfig extends CustomMapLayer {\n\ttype: GoogleEngineLayerType;\n\taggregations?: string[];\n\tname?: string;\n\tfilters?: {\n\t\tperiod: string;\n\t};\n\tparams?: {\n\t\tmin: number;\n\t\tmax: number;\n\t\tpalette?: string;\n\t};\n}\n\nexport interface CustomGoogleEngineLayer extends CustomMapLayer {\n\ttype: GoogleEngineLayerType;\n\toptions: EarthEngineOptions;\n\taggregations?: string[];\n\tname: string;\n\turl: string;\n\tengine?: EarthEngine;\n}\n\nexport interface CustomPointLayer extends CustomMapLayer {\n\tid: string;\n\ttype: \"point\";\n\tlabel?: string;\n\tlevel?: string | number;\n\tgroup?: string;\n\tstyle?: {\n\t\ticon?: string;\n\t\tgroupSet?: string;\n\t\torgUnitGroups?: Array<{ name: string; symbol: string }>;\n\t};\n\tpoints?: Array<PointOrgUnit>;\n}\n\nexport type DataItemType = \"dataElement\" | \"indicator\" | \"programIndicator\";\n\nexport interface ThematicLayerDataItem {\n\tid: string;\n\tdisplayName: string;\n\ttype: DataItemType;\n\tlegendSet?: string;\n\tlegendConfig?: {\n\t\tcolorClass: LegendColorScale;\n\t\tscale: number;\n\t};\n}\n\nexport interface ThematicLayerControl {\n\tposition: \"topleft\" | \"topright\" | \"bottomleft\" | \"bottomright\";\n\tenabled: boolean;\n}\n\nexport interface ThematicLayerData {\n\torgUnit: MapOrgUnit;\n\tdata?: number;\n\tdataItem: ThematicLayerDataItem;\n}\n\nexport interface ThematicLayerRawData {\n\torgUnit: string;\n\tdata?: number;\n\tdataItem: string;\n}\n\nexport interface CustomChoroplethLayer extends CustomMapLayer {\n\tenabled: boolean;\n\tname?: string;\n\tdata: ThematicLayerData[];\n\tdataItem: ThematicLayerDataItem;\n\ttype: \"choropleth\";\n\tcontrol?: ThematicLayerControl;\n\tlegends?: Legend[];\n}\n\nexport interface CustomBubbleLayer extends CustomMapLayer {\n\tenabled: boolean;\n\tname?: string;\n\tdata: ThematicLayerData[];\n\tdataItem: ThematicLayerDataItem;\n\ttype: \"bubble\";\n\tcontrol?: ThematicLayerControl;\n\tlegends?: Legend[];\n\tradius?: {\n\t\tmin: number;\n\t\tmax: number;\n\t};\n}\n\nexport type CustomThematicLayer = CustomBubbleLayer | CustomChoroplethLayer;\n\nexport interface ThematicLayerConfig {\n\tid: string;\n\tdata?: ThematicLayerRawData[];\n\tenabled: boolean;\n\tname?: string;\n\tdataItem: ThematicLayerDataItem;\n\ttype: ThematicLayerType;\n\tcontrol?: ThematicLayerControl;\n\tradius?: {\n\t\tmin: number;\n\t\tmax: number;\n\t};\n}\n\nexport interface CustomMapLayer {\n\tid: string;\n\ttype: string;\n\tenabled: boolean;\n}\n\nexport type MapLayer =\n\t| CustomBoundaryLayer\n\t| ThematicLayerConfig\n\t| CustomPointLayer\n\t| CustomGoogleEngineLayer;\n\nexport interface MapLayerProps {\n\tenabled: boolean;\n\ttype: \"boundary\" | \"thematic\" | \"external\" | \"point\" | \"earthEngine\";\n\tlayer: MapLayer;\n}\n"]}