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

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

@@ -0,0 +1,204 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lodash = require('lodash');
+var react = require('react');
+var reactLeaflet = require('react-leaflet');
+var useBoundaryData = require('../BoundaryLayer/hooks/useBoundaryData');
+var useGoogleEngineLayer = require('./hooks');
+var map = require('../../../../utils/map');
+var BoundaryLayer = require('../BoundaryLayer');
+var reactQuery = require('react-query');
+var ui = require('@dhis2/ui');
+var i18n = require('@dhis2/d2-i18n');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var useGoogleEngineLayer__default = /*#__PURE__*/_interopDefault(useGoogleEngineLayer);
+var i18n__default = /*#__PURE__*/_interopDefault(i18n);
+
+function formatValues(value) {
+  return Intl.NumberFormat("en-GB", { maximumFractionDigits: 2 }).format(
+    value
+  );
+}
+function getUnit(unit) {
+  if (unit === "percentage") {
+    return "%";
+  }
+}
+function Legend({
+  header,
+  legends,
+  value,
+  unit
+}) {
+  const legend = lodash.find(legends, ["id", header]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row gap-8 space-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row gap-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "legend-item-color",
+          style: { backgroundColor: legend?.color }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: legend?.name })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      formatValues(value),
+      getUnit(unit)
+    ] })
+  ] });
+}
+function AggregationView({ header, value }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row space-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: lodash.capitalize(header.toString()) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatValues(value) })
+  ] });
+}
+function EarthEnginePopup({
+  layer,
+  orgUnit,
+  loading,
+  error
+}) {
+  const engine = layer?.engine;
+  const legends = layer?.engine?.options?.legend?.items;
+  const data = engine?.getAggregation(orgUnit)?.data;
+  const unit = layer?.engine?.options?.unit ?? lodash.head(layer?.engine?.options.aggregations);
+  const aggregations = react.useMemo(() => {
+    if (!lodash.isEmpty(legends)) {
+      return lodash.sortBy(
+        Object.keys(data ?? {}).map((key) => {
+          return {
+            id: parseInt(key),
+            value: data[key]
+          };
+        }),
+        ["value"]
+      ).reverse();
+    }
+    return data ?? {};
+  }, [data]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 200, height: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Center, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.CircularLoader, { extrasmall: true }) }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0" }, children: orgUnit.name }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { margin: "0" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "column gap-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "column", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("b", { children: layer?.options?.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: layer?.options?.unit })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "column", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: i18n__default.default.t("Could not get aggregate data") }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: error })
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: "0" }, children: orgUnit.name }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { margin: "0" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "column gap-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "column", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("b", { children: layer?.options?.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: layer?.options?.unit ?? unit })
+      ] }),
+      data && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "column", children: Array.isArray(aggregations) ? aggregations?.map(({ id, value }) => /* @__PURE__ */ jsxRuntime.jsx(
+        Legend,
+        {
+          legends: legends ?? [],
+          value,
+          header: id,
+          unit
+        },
+        `${orgUnit.id}-legend-details-${id}`
+      )) : Object.keys(aggregations)?.map((key) => /* @__PURE__ */ jsxRuntime.jsx(
+        AggregationView,
+        {
+          header: key,
+          value: aggregations[key]
+        },
+        `${orgUnit.id}-aggregate-details-${key}`
+      )) })
+    ] })
+  ] });
+}
+function EarthEngineArea({
+  area,
+  layer,
+  loading,
+  error
+}) {
+  const ref = react.useRef();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactLeaflet.GeoJSON,
+    {
+      ref,
+      data: area.geoJSON,
+      interactive: true,
+      eventHandlers: {
+        mouseover: (e) => map.highlightFeature(e, BoundaryLayer.highlightStyle),
+        mouseout: (e) => map.resetHighlight(e, BoundaryLayer.defaultStyle)
+      },
+      pathOptions: BoundaryLayer.defaultStyle,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Tooltip, { children: area.name }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Popup, { minWidth: 100, children: /* @__PURE__ */ jsxRuntime.jsx(
+          EarthEnginePopup,
+          {
+            error,
+            layer,
+            orgUnit: area,
+            loading
+          }
+        ) })
+      ]
+    },
+    `${area.id}-polygon`
+  );
+}
+function GoogleEngineLayer({ layerId }) {
+  const layer = useGoogleEngineLayer__default.default(layerId);
+  const { name, type, enabled, url, options, engine } = layer ?? {};
+  const { isLoading: loadingAggregateData, error } = reactQuery.useQuery(
+    [engine],
+    async () => engine?.getAggregations(),
+    {
+      suspense: false
+    }
+  );
+  const orgUnits = useBoundaryData.useBoundaryData();
+  if (!url)
+    return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactLeaflet.LayersControl.Overlay,
+    {
+      checked: enabled,
+      name: name ?? lodash.capitalize(type),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactLeaflet.LayerGroup, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.TileLayer, { id: options?.id, url }),
+        orgUnits?.map((area) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            EarthEngineArea,
+            {
+              error: error?.toString(),
+              loading: loadingAggregateData,
+              area,
+              layer
+            },
+            `${area.id}-polygon`
+          );
+        })
+      ] })
+    }
+  );
+}
+
+module.exports = GoogleEngineLayer;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/Map/components/MapLayer/components/GoogleEngineLayer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { capitalize, find, head, isEmpty, sortBy } from \"lodash\";\nimport React, { useMemo, useRef } from \"react\";\nimport {\n\tGeoJSON,\n\tLayerGroup,\n\tLayersControl,\n\tPopup,\n\tTileLayer,\n\tTooltip,\n} from \"react-leaflet\";\nimport { useBoundaryData } from \"../BoundaryLayer/hooks/useBoundaryData\";\nimport useGoogleEngineLayer from \"./hooks\";\nimport { MapOrgUnit } from \"../../../../interfaces\";\nimport { highlightFeature, resetHighlight } from \"../../../../utils/map\";\nimport { defaultStyle, highlightStyle } from \"../BoundaryLayer\";\nimport { useQuery } from \"react-query\";\nimport { Center, CircularLoader, Divider } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { CustomGoogleEngineLayer } from \"../../interfaces\";\n\nfunction formatValues(value: number): string {\n\treturn Intl.NumberFormat(\"en-GB\", { maximumFractionDigits: 2 }).format(\n\t\tvalue,\n\t);\n}\n\nfunction getUnit(unit?: string) {\n\tif (unit === \"percentage\") {\n\t\treturn \"%\";\n\t}\n}\n\nfunction Legend({\n\theader,\n\tlegends,\n\tvalue,\n\tunit,\n}: {\n\theader: number;\n\tlegends: { id: number | string; color: string; name: string }[];\n\tvalue: number;\n\tunit?: string;\n}) {\n\tconst legend = find(legends, [\"id\", header]);\n\n\treturn (\n\t\t<div className=\"row gap-8 space-between\">\n\t\t\t<div className=\"row gap-8\">\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"legend-item-color\"\n\t\t\t\t\tstyle={{ backgroundColor: legend?.color }}\n\t\t\t\t/>\n\t\t\t\t<div>{legend?.name}</div>\n\t\t\t</div>\n\t\t\t<span>\n\t\t\t\t{formatValues(value)}\n\t\t\t\t{getUnit(unit)}\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n\nfunction AggregationView({ header, value }: { header: string; value: number }) {\n\treturn (\n\t\t<div className=\"row space-between\">\n\t\t\t<span>{capitalize(header.toString())}</span>\n\t\t\t<span>{formatValues(value)}</span>\n\t\t</div>\n\t);\n}\n\nfunction EarthEnginePopup({\n\tlayer,\n\torgUnit,\n\tloading,\n\terror,\n}: {\n\tlayer?: CustomGoogleEngineLayer;\n\torgUnit: MapOrgUnit;\n\tloading: boolean;\n\terror?: string;\n}) {\n\tconst engine = layer?.engine;\n\tconst legends = layer?.engine?.options?.legend?.items;\n\tconst data = engine?.getAggregation(orgUnit)?.data;\n\tconst unit =\n\t\tlayer?.engine?.options?.unit ??\n\t\thead(layer?.engine?.options.aggregations);\n\n\tconst aggregations = useMemo(() => {\n\t\tif (!isEmpty(legends)) {\n\t\t\treturn sortBy(\n\t\t\t\tObject.keys(data ?? {}).map((key) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tid: parseInt(key),\n\t\t\t\t\t\tvalue: data[key],\n\t\t\t\t\t};\n\t\t\t\t}),\n\t\t\t\t[\"value\"],\n\t\t\t).reverse();\n\t\t}\n\t\treturn data ?? {};\n\t}, [data]);\n\n\tif (loading) {\n\t\treturn (\n\t\t\t<div style={{ width: 200, height: 200 }}>\n\t\t\t\t<Center>\n\t\t\t\t\t<CircularLoader extrasmall />\n\t\t\t\t</Center>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (error) {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<h3 style={{ margin: \"0\" }}>{orgUnit.name}</h3>\n\t\t\t\t<Divider margin={\"0\"} />\n\t\t\t\t<div className=\"column gap-8\">\n\t\t\t\t\t<div className=\"column\">\n\t\t\t\t\t\t<b>{layer?.options?.name}</b>\n\t\t\t\t\t\t<div>{layer?.options?.unit}</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"column\">\n\t\t\t\t\t\t<p>{i18n.t(\"Could not get aggregate data\")}</p>\n\t\t\t\t\t\t<p>{error}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div>\n\t\t\t<h3 style={{ margin: \"0\" }}>{orgUnit.name}</h3>\n\t\t\t<Divider margin={\"0\"} />\n\t\t\t<div className=\"column gap-8\">\n\t\t\t\t<div className=\"column\">\n\t\t\t\t\t<b>{layer?.options?.name}</b>\n\t\t\t\t\t<div>{layer?.options?.unit ?? unit}</div>\n\t\t\t\t</div>\n\t\t\t\t{data && (\n\t\t\t\t\t<div className=\"column\">\n\t\t\t\t\t\t{Array.isArray(aggregations)\n\t\t\t\t\t\t\t? aggregations?.map(({ id, value }) => (\n\t\t\t\t\t\t\t\t\t<Legend\n\t\t\t\t\t\t\t\t\t\tkey={`${orgUnit.id}-legend-details-${id}`}\n\t\t\t\t\t\t\t\t\t\tlegends={legends ?? []}\n\t\t\t\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\t\t\t\theader={id}\n\t\t\t\t\t\t\t\t\t\tunit={unit}\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: Object.keys(aggregations)?.map((key) => (\n\t\t\t\t\t\t\t\t\t<AggregationView\n\t\t\t\t\t\t\t\t\t\tkey={`${orgUnit.id}-aggregate-details-${key}`}\n\t\t\t\t\t\t\t\t\t\theader={key}\n\t\t\t\t\t\t\t\t\t\tvalue={aggregations[key]}\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</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction EarthEngineArea({\n\tarea,\n\tlayer,\n\tloading,\n\terror,\n}: {\n\tarea: MapOrgUnit;\n\tlayer?: CustomGoogleEngineLayer;\n\tloading: boolean;\n\terror?: string;\n}) {\n\tconst ref = useRef<any>();\n\n\treturn (\n\t\t<GeoJSON\n\t\t\tref={ref}\n\t\t\tdata={area.geoJSON}\n\t\t\tinteractive\n\t\t\teventHandlers={{\n\t\t\t\tmouseover: (e) => highlightFeature(e, highlightStyle),\n\t\t\t\tmouseout: (e) => resetHighlight(e, defaultStyle),\n\t\t\t}}\n\t\t\tkey={`${area.id}-polygon`}\n\t\t\tpathOptions={defaultStyle}\n\t\t>\n\t\t\t<Tooltip>{area.name}</Tooltip>\n\t\t\t<Popup minWidth={100}>\n\t\t\t\t<EarthEnginePopup\n\t\t\t\t\terror={error}\n\t\t\t\t\tlayer={layer}\n\t\t\t\t\torgUnit={area}\n\t\t\t\t\tloading={loading}\n\t\t\t\t/>\n\t\t\t</Popup>\n\t\t</GeoJSON>\n\t);\n}\n\nexport default function GoogleEngineLayer({ layerId }: { layerId: string }) {\n\tconst layer = useGoogleEngineLayer(layerId);\n\tconst { name, type, enabled, url, options, engine } = layer ?? {};\n\tconst { isLoading: loadingAggregateData, error } = useQuery(\n\t\t[engine],\n\t\tasync () => engine?.getAggregations(),\n\t\t{\n\t\t\tsuspense: false,\n\t\t},\n\t);\n\tconst orgUnits = useBoundaryData();\n\n\tif (!url) return null;\n\n\treturn (\n\t\t<LayersControl.Overlay\n\t\t\tchecked={enabled}\n\t\t\tname={name ?? capitalize(type)}\n\t\t>\n\t\t\t<LayerGroup>\n\t\t\t\t<TileLayer id={options?.id} url={url} />\n\t\t\t\t{orgUnits?.map((area: MapOrgUnit) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<EarthEngineArea\n\t\t\t\t\t\t\terror={\n\t\t\t\t\t\t\t\t(error as any)?.toString() as string | undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tloading={loadingAggregateData}\n\t\t\t\t\t\t\tkey={`${area.id}-polygon`}\n\t\t\t\t\t\t\tarea={area}\n\t\t\t\t\t\t\tlayer={layer}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</LayerGroup>\n\t\t</LayersControl.Overlay>\n\t);\n}\n"]}

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

@@ -0,0 +1,197 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { capitalize, head, isEmpty, sortBy, find } from 'lodash';
+import { useRef, useMemo } from 'react';
+import { LayersControl, LayerGroup, TileLayer, GeoJSON, Tooltip, Popup } from 'react-leaflet';
+import { useBoundaryData } from '../BoundaryLayer/hooks/useBoundaryData';
+import useGoogleEngineLayer from './hooks';
+import { highlightFeature, resetHighlight } from '../../../../utils/map';
+import { highlightStyle, defaultStyle } from '../BoundaryLayer';
+import { useQuery } from 'react-query';
+import { Center, CircularLoader, Divider } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+
+function formatValues(value) {
+  return Intl.NumberFormat("en-GB", { maximumFractionDigits: 2 }).format(
+    value
+  );
+}
+function getUnit(unit) {
+  if (unit === "percentage") {
+    return "%";
+  }
+}
+function Legend({
+  header,
+  legends,
+  value,
+  unit
+}) {
+  const legend = find(legends, ["id", header]);
+  return /* @__PURE__ */ jsxs("div", { className: "row gap-8 space-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "row gap-8", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "legend-item-color",
+          style: { backgroundColor: legend?.color }
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { children: legend?.name })
+    ] }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      formatValues(value),
+      getUnit(unit)
+    ] })
+  ] });
+}
+function AggregationView({ header, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "row space-between", children: [
+    /* @__PURE__ */ jsx("span", { children: capitalize(header.toString()) }),
+    /* @__PURE__ */ jsx("span", { children: formatValues(value) })
+  ] });
+}
+function EarthEnginePopup({
+  layer,
+  orgUnit,
+  loading,
+  error
+}) {
+  const engine = layer?.engine;
+  const legends = layer?.engine?.options?.legend?.items;
+  const data = engine?.getAggregation(orgUnit)?.data;
+  const unit = layer?.engine?.options?.unit ?? head(layer?.engine?.options.aggregations);
+  const aggregations = useMemo(() => {
+    if (!isEmpty(legends)) {
+      return sortBy(
+        Object.keys(data ?? {}).map((key) => {
+          return {
+            id: parseInt(key),
+            value: data[key]
+          };
+        }),
+        ["value"]
+      ).reverse();
+    }
+    return data ?? {};
+  }, [data]);
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { style: { width: 200, height: 200 }, children: /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(CircularLoader, { extrasmall: true }) }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { style: { margin: "0" }, children: orgUnit.name }),
+      /* @__PURE__ */ jsx(Divider, { margin: "0" }),
+      /* @__PURE__ */ jsxs("div", { className: "column gap-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "column", children: [
+          /* @__PURE__ */ jsx("b", { children: layer?.options?.name }),
+          /* @__PURE__ */ jsx("div", { children: layer?.options?.unit })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "column", children: [
+          /* @__PURE__ */ jsx("p", { children: i18n.t("Could not get aggregate data") }),
+          /* @__PURE__ */ jsx("p", { children: error })
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("h3", { style: { margin: "0" }, children: orgUnit.name }),
+    /* @__PURE__ */ jsx(Divider, { margin: "0" }),
+    /* @__PURE__ */ jsxs("div", { className: "column gap-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "column", children: [
+        /* @__PURE__ */ jsx("b", { children: layer?.options?.name }),
+        /* @__PURE__ */ jsx("div", { children: layer?.options?.unit ?? unit })
+      ] }),
+      data && /* @__PURE__ */ jsx("div", { className: "column", children: Array.isArray(aggregations) ? aggregations?.map(({ id, value }) => /* @__PURE__ */ jsx(
+        Legend,
+        {
+          legends: legends ?? [],
+          value,
+          header: id,
+          unit
+        },
+        `${orgUnit.id}-legend-details-${id}`
+      )) : Object.keys(aggregations)?.map((key) => /* @__PURE__ */ jsx(
+        AggregationView,
+        {
+          header: key,
+          value: aggregations[key]
+        },
+        `${orgUnit.id}-aggregate-details-${key}`
+      )) })
+    ] })
+  ] });
+}
+function EarthEngineArea({
+  area,
+  layer,
+  loading,
+  error
+}) {
+  const ref = useRef();
+  return /* @__PURE__ */ jsxs(
+    GeoJSON,
+    {
+      ref,
+      data: area.geoJSON,
+      interactive: true,
+      eventHandlers: {
+        mouseover: (e) => highlightFeature(e, highlightStyle),
+        mouseout: (e) => resetHighlight(e, defaultStyle)
+      },
+      pathOptions: defaultStyle,
+      children: [
+        /* @__PURE__ */ jsx(Tooltip, { children: area.name }),
+        /* @__PURE__ */ jsx(Popup, { minWidth: 100, children: /* @__PURE__ */ jsx(
+          EarthEnginePopup,
+          {
+            error,
+            layer,
+            orgUnit: area,
+            loading
+          }
+        ) })
+      ]
+    },
+    `${area.id}-polygon`
+  );
+}
+function GoogleEngineLayer({ layerId }) {
+  const layer = useGoogleEngineLayer(layerId);
+  const { name, type, enabled, url, options, engine } = layer ?? {};
+  const { isLoading: loadingAggregateData, error } = useQuery(
+    [engine],
+    async () => engine?.getAggregations(),
+    {
+      suspense: false
+    }
+  );
+  const orgUnits = useBoundaryData();
+  if (!url)
+    return null;
+  return /* @__PURE__ */ jsx(
+    LayersControl.Overlay,
+    {
+      checked: enabled,
+      name: name ?? capitalize(type),
+      children: /* @__PURE__ */ jsxs(LayerGroup, { children: [
+        /* @__PURE__ */ jsx(TileLayer, { id: options?.id, url }),
+        orgUnits?.map((area) => {
+          return /* @__PURE__ */ jsx(
+            EarthEngineArea,
+            {
+              error: error?.toString(),
+              loading: loadingAggregateData,
+              area,
+              layer
+            },
+            `${area.id}-polygon`
+          );
+        })
+      ] })
+    }
+  );
+}
+
+export { GoogleEngineLayer as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/Map/components/MapLayer/components/GoogleEngineLayer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { capitalize, find, head, isEmpty, sortBy } from \"lodash\";\nimport React, { useMemo, useRef } from \"react\";\nimport {\n\tGeoJSON,\n\tLayerGroup,\n\tLayersControl,\n\tPopup,\n\tTileLayer,\n\tTooltip,\n} from \"react-leaflet\";\nimport { useBoundaryData } from \"../BoundaryLayer/hooks/useBoundaryData\";\nimport useGoogleEngineLayer from \"./hooks\";\nimport { MapOrgUnit } from \"../../../../interfaces\";\nimport { highlightFeature, resetHighlight } from \"../../../../utils/map\";\nimport { defaultStyle, highlightStyle } from \"../BoundaryLayer\";\nimport { useQuery } from \"react-query\";\nimport { Center, CircularLoader, Divider } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { CustomGoogleEngineLayer } from \"../../interfaces\";\n\nfunction formatValues(value: number): string {\n\treturn Intl.NumberFormat(\"en-GB\", { maximumFractionDigits: 2 }).format(\n\t\tvalue,\n\t);\n}\n\nfunction getUnit(unit?: string) {\n\tif (unit === \"percentage\") {\n\t\treturn \"%\";\n\t}\n}\n\nfunction Legend({\n\theader,\n\tlegends,\n\tvalue,\n\tunit,\n}: {\n\theader: number;\n\tlegends: { id: number | string; color: string; name: string }[];\n\tvalue: number;\n\tunit?: string;\n}) {\n\tconst legend = find(legends, [\"id\", header]);\n\n\treturn (\n\t\t<div className=\"row gap-8 space-between\">\n\t\t\t<div className=\"row gap-8\">\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"legend-item-color\"\n\t\t\t\t\tstyle={{ backgroundColor: legend?.color }}\n\t\t\t\t/>\n\t\t\t\t<div>{legend?.name}</div>\n\t\t\t</div>\n\t\t\t<span>\n\t\t\t\t{formatValues(value)}\n\t\t\t\t{getUnit(unit)}\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n\nfunction AggregationView({ header, value }: { header: string; value: number }) {\n\treturn (\n\t\t<div className=\"row space-between\">\n\t\t\t<span>{capitalize(header.toString())}</span>\n\t\t\t<span>{formatValues(value)}</span>\n\t\t</div>\n\t);\n}\n\nfunction EarthEnginePopup({\n\tlayer,\n\torgUnit,\n\tloading,\n\terror,\n}: {\n\tlayer?: CustomGoogleEngineLayer;\n\torgUnit: MapOrgUnit;\n\tloading: boolean;\n\terror?: string;\n}) {\n\tconst engine = layer?.engine;\n\tconst legends = layer?.engine?.options?.legend?.items;\n\tconst data = engine?.getAggregation(orgUnit)?.data;\n\tconst unit =\n\t\tlayer?.engine?.options?.unit ??\n\t\thead(layer?.engine?.options.aggregations);\n\n\tconst aggregations = useMemo(() => {\n\t\tif (!isEmpty(legends)) {\n\t\t\treturn sortBy(\n\t\t\t\tObject.keys(data ?? {}).map((key) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tid: parseInt(key),\n\t\t\t\t\t\tvalue: data[key],\n\t\t\t\t\t};\n\t\t\t\t}),\n\t\t\t\t[\"value\"],\n\t\t\t).reverse();\n\t\t}\n\t\treturn data ?? {};\n\t}, [data]);\n\n\tif (loading) {\n\t\treturn (\n\t\t\t<div style={{ width: 200, height: 200 }}>\n\t\t\t\t<Center>\n\t\t\t\t\t<CircularLoader extrasmall />\n\t\t\t\t</Center>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (error) {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<h3 style={{ margin: \"0\" }}>{orgUnit.name}</h3>\n\t\t\t\t<Divider margin={\"0\"} />\n\t\t\t\t<div className=\"column gap-8\">\n\t\t\t\t\t<div className=\"column\">\n\t\t\t\t\t\t<b>{layer?.options?.name}</b>\n\t\t\t\t\t\t<div>{layer?.options?.unit}</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"column\">\n\t\t\t\t\t\t<p>{i18n.t(\"Could not get aggregate data\")}</p>\n\t\t\t\t\t\t<p>{error}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div>\n\t\t\t<h3 style={{ margin: \"0\" }}>{orgUnit.name}</h3>\n\t\t\t<Divider margin={\"0\"} />\n\t\t\t<div className=\"column gap-8\">\n\t\t\t\t<div className=\"column\">\n\t\t\t\t\t<b>{layer?.options?.name}</b>\n\t\t\t\t\t<div>{layer?.options?.unit ?? unit}</div>\n\t\t\t\t</div>\n\t\t\t\t{data && (\n\t\t\t\t\t<div className=\"column\">\n\t\t\t\t\t\t{Array.isArray(aggregations)\n\t\t\t\t\t\t\t? aggregations?.map(({ id, value }) => (\n\t\t\t\t\t\t\t\t\t<Legend\n\t\t\t\t\t\t\t\t\t\tkey={`${orgUnit.id}-legend-details-${id}`}\n\t\t\t\t\t\t\t\t\t\tlegends={legends ?? []}\n\t\t\t\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\t\t\t\theader={id}\n\t\t\t\t\t\t\t\t\t\tunit={unit}\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: Object.keys(aggregations)?.map((key) => (\n\t\t\t\t\t\t\t\t\t<AggregationView\n\t\t\t\t\t\t\t\t\t\tkey={`${orgUnit.id}-aggregate-details-${key}`}\n\t\t\t\t\t\t\t\t\t\theader={key}\n\t\t\t\t\t\t\t\t\t\tvalue={aggregations[key]}\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</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction EarthEngineArea({\n\tarea,\n\tlayer,\n\tloading,\n\terror,\n}: {\n\tarea: MapOrgUnit;\n\tlayer?: CustomGoogleEngineLayer;\n\tloading: boolean;\n\terror?: string;\n}) {\n\tconst ref = useRef<any>();\n\n\treturn (\n\t\t<GeoJSON\n\t\t\tref={ref}\n\t\t\tdata={area.geoJSON}\n\t\t\tinteractive\n\t\t\teventHandlers={{\n\t\t\t\tmouseover: (e) => highlightFeature(e, highlightStyle),\n\t\t\t\tmouseout: (e) => resetHighlight(e, defaultStyle),\n\t\t\t}}\n\t\t\tkey={`${area.id}-polygon`}\n\t\t\tpathOptions={defaultStyle}\n\t\t>\n\t\t\t<Tooltip>{area.name}</Tooltip>\n\t\t\t<Popup minWidth={100}>\n\t\t\t\t<EarthEnginePopup\n\t\t\t\t\terror={error}\n\t\t\t\t\tlayer={layer}\n\t\t\t\t\torgUnit={area}\n\t\t\t\t\tloading={loading}\n\t\t\t\t/>\n\t\t\t</Popup>\n\t\t</GeoJSON>\n\t);\n}\n\nexport default function GoogleEngineLayer({ layerId }: { layerId: string }) {\n\tconst layer = useGoogleEngineLayer(layerId);\n\tconst { name, type, enabled, url, options, engine } = layer ?? {};\n\tconst { isLoading: loadingAggregateData, error } = useQuery(\n\t\t[engine],\n\t\tasync () => engine?.getAggregations(),\n\t\t{\n\t\t\tsuspense: false,\n\t\t},\n\t);\n\tconst orgUnits = useBoundaryData();\n\n\tif (!url) return null;\n\n\treturn (\n\t\t<LayersControl.Overlay\n\t\t\tchecked={enabled}\n\t\t\tname={name ?? capitalize(type)}\n\t\t>\n\t\t\t<LayerGroup>\n\t\t\t\t<TileLayer id={options?.id} url={url} />\n\t\t\t\t{orgUnits?.map((area: MapOrgUnit) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<EarthEngineArea\n\t\t\t\t\t\t\terror={\n\t\t\t\t\t\t\t\t(error as any)?.toString() as string | undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tloading={loadingAggregateData}\n\t\t\t\t\t\t\tkey={`${area.id}-polygon`}\n\t\t\t\t\t\t\tarea={area}\n\t\t\t\t\t\t\tlayer={layer}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</LayerGroup>\n\t\t</LayersControl.Overlay>\n\t);\n}\n"]}

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

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

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

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/Map/components/MapLayer/components/GoogleEngineLayer/interfaces/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}