@hisptz/dhis2-analytics 1.0.49 → 1.0.51

package/src/components/Map/components/MapLayer/components/LegendArea/index.tsx

@@ -0,0 +1,167 @@
+import {colors, IconLegend24, Popper, Portal} from "@dhis2/ui";
+import {ControlPosition} from "leaflet";
+import {compact, head} from "lodash";
+import React, {useEffect, useRef, useState} from "react";
+import {MapLegendConfig} from "../../../MapArea/interfaces";
+import {CustomControl} from "../../../MapControls/components/CustomControl";
+import {
+  CustomBubbleLayer,
+  CustomGoogleEngineLayer,
+  CustomPointLayer,
+  CustomThematicLayer,
+  SUPPORTED_EARTH_ENGINE_LAYERS
+} from "../../interfaces";
+import PointLegend from "../PointLayer/components/PointLegend";
+import BubbleLegend from "../ThematicLayer/components/Bubble/components/BubbleLegend";
+import ChoroplethLegend from "../ThematicLayer/components/Choropleth/components/ChoroplethLegend";
+import EarthEngineLegend from "../GoogleEngineLayer/components/EarthEngineLegend";
+import classes from "./LegendArea.module.css";
+import {usePrintMedia} from "../../../../hooks/map";
+
+const TOOLTIP_OFFSET = 4;
+
+function getLegendComponent(layer: CustomThematicLayer | CustomPointLayer | CustomGoogleEngineLayer) {
+  if (layer.type === "point") {
+    return <PointLegend name={layer.label} />;
+  }
+
+  if (SUPPORTED_EARTH_ENGINE_LAYERS.includes(layer.type)) {
+    return <EarthEngineLegend name={layer.name ?? ""} layer={layer as CustomGoogleEngineLayer} />;
+  }
+
+  const { type, enabled, control, dataItem, name, data, legends } = (layer as CustomThematicLayer) ?? {};
+
+  if (!enabled || !control) {
+    return null;
+  }
+  switch (type) {
+    case "bubble":
+      return (
+        <BubbleLegend
+          radius={(layer as CustomBubbleLayer)?.radius ?? { min: 0, max: 50 }}
+          legends={legends ?? []}
+          name={name ?? dataItem.displayName}
+          data={data}
+          dataItem={head(data)?.dataItem ?? dataItem}
+        />
+      );
+    case "choropleth":
+      return <ChoroplethLegend legends={legends ?? []} name={name ?? dataItem.displayName} data={data} dataItem={head(data)?.dataItem ?? dataItem} />;
+  }
+}
+
+function CollapsedLegendIcon({ onCollapse, name }: { name: string; onCollapse: () => void }) {
+  const openDelay = 200;
+  const closeDelay = 200;
+  const [openTooltip, setOpenTooltip] = useState(false);
+  const openTimerRef = useRef<any>(null);
+  const closeTimerRef = useRef<any>(null);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const hideModifier = { name: "hide" };
+  const offsetModifier = {
+    name: "offset",
+    options: {
+      offset: [0, TOOLTIP_OFFSET],
+    },
+  };
+
+  const flipModifier = {
+    name: "flip",
+    options: { altBoundary: true },
+  };
+
+  const onMouseOver = () => {
+    clearTimeout(closeTimerRef.current);
+
+    openTimerRef.current = setTimeout(() => {
+      setOpenTooltip(true);
+    }, openDelay);
+  };
+
+  const onMouseOut = () => {
+    clearTimeout(openTimerRef.current);
+
+    closeTimerRef.current = setTimeout(() => {
+      setOpenTooltip(false);
+    }, closeDelay);
+  };
+
+  useEffect(
+    () => () => {
+      clearTimeout(openTimerRef.current);
+      clearTimeout(closeTimerRef.current);
+    },
+    []
+  );
+
+  return (
+    <div ref={ref} onMouseOver={onMouseOver} onMouseOut={onMouseOut} onClick={onCollapse} style={{ width: 28, height: 28 }} className="legend-card collapsed">
+      <IconLegend24 />
+      {openTooltip && (
+        <Portal className={classes["map-tooltip"]}>
+          <Popper className={classes["map-tooltip"]} reference={ref} modifiers={[offsetModifier, flipModifier, hideModifier]}>
+            <div
+              style={{
+                backgroundColor: `${colors.grey900}`,
+                borderRadius: 3,
+                color: `${colors.white}`,
+                padding: "4px 6px",
+              }}
+              data-test={`content`}>
+              {name}
+            </div>
+          </Popper>
+        </Portal>
+      )}
+    </div>
+  );
+}
+
+function Legend({ children, collapsible }: { children: React.ReactElement; collapsible: boolean }) {
+  const [collapsed, setCollapsed] = useState(collapsible);
+  const inPrintMode = usePrintMedia();
+  const onCollapse = () => {
+    if (collapsible) {
+      setCollapsed((prevState) => !prevState);
+    }
+  };
+
+  const name = head(React.Children.toArray(children) as React.ReactElement[])?.props.name;
+
+  const shouldCollapse = collapsed && !inPrintMode;
+
+  return (
+    <div className="w-100">
+      {shouldCollapse ? (
+        <CollapsedLegendIcon name={name} onCollapse={onCollapse} />
+      ) : (
+        React.Children.map(children, (child) => React.cloneElement(child, { collapsible, onCollapse }))
+      )}
+    </div>
+  );
+}
+
+export default function LegendArea({
+  layers,
+  legends: legendConfig,
+}: {
+  layers: Array<CustomThematicLayer | CustomPointLayer | CustomGoogleEngineLayer>;
+  position: ControlPosition;
+  legends?: MapLegendConfig;
+}) {
+  const legends: JSX.Element[] = compact(layers.filter((layer) => layer.enabled).map(getLegendComponent));
+  const { position, collapsible } = legendConfig ?? {};
+
+  return (
+    <CustomControl position={position}>
+      <div className="column gap-16 align-items-end">
+        {legends?.map((legend: any, index) => (
+          <Legend collapsible={collapsible ?? true} key={`${index}-map-legend`}>
+            {legend}
+          </Legend>
+        ))}
+      </div>
+    </CustomControl>
+  );
+}

package/src/components/Map/components/MapLayer/components/PointLayer/components/PointLegend/index.tsx

@@ -0,0 +1,44 @@
+import {useConfig} from "@dhis2/app-runtime";
+import {Divider} from "@dhis2/ui";
+import React, {forwardRef} from "react";
+import {getIconUrl} from "../../../../../../utils/helpers";
+import LegendCardHeader from "../../../LegendArea/components/LegendCardHeader";
+import {usePointLayer} from "../../hooks";
+
+function PointLegends({ orgUnitGroups, icon, label }: { orgUnitGroups: { name: string; symbol: string }[]; icon?: string; label?: string }) {
+  const { baseUrl } = useConfig();
+
+  return (
+    <div style={{ minWidth: 100, alignItems: "flex-start" }} className="w-100 p-8 legend-list column">
+      {icon && (
+        <div key={`${icon}-legend`} className="row gap-16  align-items-center">
+          <img height={20} width={20} alt={`${name}-icon`} src={getIconUrl(icon, { baseUrl })} />
+          <p>{label}</p>
+        </div>
+      )}
+      {orgUnitGroups.map(({ name, symbol }) => {
+        return (
+          <div key={`${name}-legend`} className="row gap-16  align-items-center">
+            <img height={20} width={20} alt={`${name}-icon`} src={getIconUrl(symbol ?? "", { baseUrl })} />
+            <p>{name}</p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function PointLegend({ collapsible, onCollapse }: any, ref: React.LegacyRef<HTMLDivElement>) {
+  const pointLayer = usePointLayer();
+  const { label, style } = pointLayer ?? {};
+
+  return (
+    <div ref={ref} className="legend-card">
+      <LegendCardHeader collapsible={collapsible} onCollapse={onCollapse} title={label ?? "Points"} />
+      <Divider margin={"0"} />
+      <PointLegends label={label} orgUnitGroups={style?.orgUnitGroups ?? []} icon={style?.icon} />
+    </div>
+  );
+}
+
+export default forwardRef(PointLegend);

package/src/components/Map/components/MapLayer/components/PointLayer/hooks/index.ts

@@ -0,0 +1,8 @@
+import {find} from "lodash";
+import {useMapLayers} from "../../../../MapProvider/hooks";
+import {CustomPointLayer} from "../../../interfaces";
+
+export function usePointLayer() {
+  const { layers } = useMapLayers();
+  return find(layers, ["type", "point"]) as CustomPointLayer;
+}

package/src/components/Map/components/MapLayer/components/PointLayer/index.tsx

@@ -0,0 +1,36 @@
+import {useConfig} from "@dhis2/app-runtime";
+import i18n from "@dhis2/d2-i18n";
+import L from "leaflet";
+import React from "react";
+import {GeoJSON, LayerGroup, LayersControl, Popup, Tooltip} from "react-leaflet";
+import {PointOrgUnit} from "../../../../interfaces";
+import {getIcon, getIconUrl} from "../../../../utils/helpers";
+import {usePointLayer} from "./hooks";
+
+export function PointLayer() {
+  const pointLayer = usePointLayer();
+  const { enabled, label, points: orgUnits, style } = pointLayer ?? {};
+  const { baseUrl } = useConfig();
+  return (
+    <LayersControl.Overlay checked={enabled} name={label ?? i18n.t("Points")}>
+      <LayerGroup>
+        {orgUnits?.map((area: PointOrgUnit) => {
+          return (
+            <GeoJSON
+              pointToLayer={(_, coordinates) => {
+                return L.marker(coordinates, { icon: getIcon(getIconUrl(area.icon.icon ?? style?.icon, { baseUrl })) });
+              }}
+              data={area.geoJSON}
+              interactive
+              key={`${area.id}-polygon`}>
+              <Tooltip>{area.name}</Tooltip>
+              <Popup minWidth={80}>
+                <h3>{area.name}</h3>
+              </Popup>
+            </GeoJSON>
+          );
+        })}
+      </LayerGroup>
+    </LayersControl.Overlay>
+  );
+}

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubble.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import {guideLength, textPadding} from "./Bubbles";
+
+export interface BubbleProps {
+  radius: number;
+  maxRadius: number;
+  text?: string;
+  textAlign?: "left" | "right";
+  color?: string;
+  stroke?: string;
+  pattern?: string;
+  gap?: number;
+}
+
+const Bubble = ({ radius, maxRadius, text, textAlign, color, stroke, pattern }: BubbleProps) => {
+  const leftAlign = textAlign === "left";
+  const x = maxRadius;
+  const y = maxRadius * 2 - radius;
+  const x2 = leftAlign ? x - maxRadius - guideLength : x + maxRadius + guideLength;
+  const y2 = maxRadius * 2 - radius * 2;
+  const textX = x2 + (leftAlign ? -textPadding : textPadding);
+  const textAnchor = leftAlign ? "end" : "start";
+
+  return (
+    <g>
+      <circle
+        cx={x}
+        cy={y}
+        r={radius}
+        stroke={stroke || "#000"}
+        style={{
+          fill: pattern ? `url(#${pattern})` : color || "none",
+          strokeWidth: 0.5,
+        }}
+      />
+      {text && (
+        <g>
+          <line x1={x} x2={x2} y1={y2} y2={y2} stroke="black" style={{ strokeDasharray: "2, 2", strokeWidth: 0.5 }} />
+          <text x={textX} y={y2} textAnchor={textAnchor} alignmentBaseline="middle" style={{ fontSize: 12 }}>
+            {text}
+          </text>
+        </g>
+      )}
+    </g>
+  );
+};
+
+export default Bubble;

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubbles.tsx

@@ -0,0 +1,150 @@
+import i18n from "@dhis2/d2-i18n";
+import {scaleSqrt} from "d3-scale";
+import {reduce} from "lodash";
+import React, {memo} from "react";
+import {getContrastColor} from "../../../../../../../../../utils/colors";
+import {getLongestTextLength} from "../../../../../../../../../utils/helpers";
+import Bubble, {BubbleProps} from "./Bubble";
+
+const style = {
+  paddingTop: 10,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+const legendWidth = 200;
+const digitWidth = 6.8;
+export const guideLength = 16;
+export const textPadding = 4;
+
+const Bubbles = ({ radiusLow, radiusHigh, color, classes }: { radiusLow: number; radiusHigh: number; color?: string; classes: Array<any> }) => {
+  const height = radiusHigh * 2 + 4;
+  const scale = scaleSqrt().range([radiusLow, radiusHigh]);
+  const radiusMid = scale(0.5);
+
+  if (isNaN(radiusLow) || isNaN(radiusHigh)) {
+    return null;
+  }
+
+  let bubbles: Array<BubbleProps> = [];
+
+  // If color legend
+  if (Array.isArray(classes) && classes.length) {
+    const startValue = classes[0].startValue;
+    const endValue = classes[classes.length - 1].endValue;
+    const itemScale = scale.domain([startValue, endValue]);
+
+    bubbles = [...classes].reverse().map((c) => ({
+      radius: itemScale(c.endValue),
+      maxRadius: radiusHigh,
+      color: c.color,
+      text: String(c.endValue),
+    }));
+
+    // Add the smallest bubble for the lowest value
+    bubbles.push({
+      radius: itemScale(startValue),
+      maxRadius: radiusHigh,
+      text: String(startValue),
+    });
+  } else {
+    // If single color
+    const stroke = color && getContrastColor(color);
+
+    bubbles = [
+      {
+        radius: radiusHigh,
+        maxRadius: radiusHigh,
+        color,
+        stroke,
+        text: i18n.t("Max"),
+      },
+      {
+        radius: radiusMid,
+        maxRadius: radiusHigh,
+        color,
+        stroke,
+        text: i18n.t("Mid"),
+      },
+      {
+        radius: radiusLow,
+        maxRadius: radiusHigh,
+        color,
+        stroke,
+        text: i18n.t("Min"),
+      },
+    ];
+  }
+
+  // Calculate the pixel length of the longest number
+  let textLength = Math.ceil(Math.max(getLongestTextLength(classes, "startValue"), getLongestTextLength(classes, "endValue")) * digitWidth);
+
+  // Calculate the total length if numbers are alternate on each side
+  const alternateLength = (radiusHigh + guideLength + textPadding + textLength) * 2;
+
+  let smallestGap = reduce(bubbles, (prev, curr: any, i) => {
+    const gap = prev.radius - curr.radius;
+    const smallestGap = prev.gap === undefined || gap < prev.gap ? gap : prev.gap;
+
+    return i === bubbles.length - 1
+      ? Math.round(smallestGap * 2)
+      : {
+          radius: curr.radius,
+          gap: smallestGap,
+        };
+  });
+
+  const alternateFit = alternateLength < legendWidth;
+
+  const alternate = alternateFit && smallestGap > 5 && smallestGap < 12;
+
+  if (!alternateFit) {
+    smallestGap = smallestGap / 2;
+  }
+
+  // Too cramped to show number for each bubble
+  if (smallestGap < 4) {
+    const [maxBubble] = bubbles;
+    const minBubble = bubbles[bubbles.length - 1];
+    const gap = maxBubble.radius - minBubble.radius;
+    const showNumbers = [0]; // Always show the largest number
+
+    if (gap > 4) {
+      showNumbers.push(bubbles.length - 1);
+    }
+
+    if (gap > 15) {
+      const midRadius = minBubble.radius + gap / 2;
+
+      // Find the closest bubble above the mid-radius
+      const midBubble = bubbles.reduce((prev, curr) => (curr.radius >= midRadius && curr.radius - midRadius < prev.radius - midRadius ? curr : prev));
+
+      showNumbers.push(bubbles.indexOf(midBubble));
+    }
+
+    bubbles.forEach((b, i) => {
+      if (!showNumbers.includes(i)) {
+        delete b.text;
+      }
+    });
+  }
+
+  textLength = Math.ceil(getLongestTextLength(bubbles, "text") * digitWidth);
+
+  const offset = textLength + guideLength + textPadding;
+
+  return (
+    <div style={style}>
+      <svg width={legendWidth} height={height + 50}>
+        <g transform={`translate(${alternate ? offset : "16"} 24)`}>
+          {bubbles.map((bubble, i) => (
+            <Bubble key={i} {...bubble} textAlign={alternate && i % 2 == 0 ? "left" : "right"} />
+          ))}
+        </g>
+      </svg>
+    </div>
+  );
+};
+
+export default memo(Bubbles);

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/index.tsx

@@ -0,0 +1,39 @@
+import {Divider} from "@dhis2/ui";
+import type {Legend} from "@hisptz/dhis2-utils";
+import React, {forwardRef} from "react";
+import {ThematicLayerData, ThematicLayerDataItem} from "../../../../../../interfaces";
+import LegendCardHeader from "../../../../../LegendArea/components/LegendCardHeader";
+import Bubbles from "./components/Bubbles";
+
+function BubbleLegend(
+  {
+    radius,
+    dataItem,
+    data,
+    name,
+    collapsible,
+    onCollapse,
+    legends,
+  }: {
+    radius: { min: number; max: number };
+    dataItem: ThematicLayerDataItem;
+    data: ThematicLayerData[];
+    name?: string;
+    collapsible?: boolean;
+    onCollapse?: () => void;
+    legends: Legend[];
+  },
+  ref: React.LegacyRef<HTMLDivElement> | undefined
+) {
+  return (
+    <div className="legend-card" ref={ref}>
+      <LegendCardHeader title={dataItem.displayName} onCollapse={onCollapse} collapsible={collapsible} />
+      <Divider margin={"0"} />
+      <div className="legend-list pt-8">
+        <Bubbles classes={legends.reverse()} radiusHigh={radius.max} radiusLow={radius.min} color={"#FF0000"} />
+      </div>
+    </div>
+  );
+}
+
+export default forwardRef(BubbleLegend);

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/index.tsx

@@ -0,0 +1,57 @@
+import {colors} from "@dhis2/ui";
+import type {Legend} from "@hisptz/dhis2-utils";
+import {geoJSON} from "leaflet";
+import React, {useMemo} from "react";
+import {CircleMarker} from "react-leaflet";
+import {getColorFromLegendSet, highlightFeature, resetHighlight} from "../../../../../../utils/map";
+import {ThematicLayerData} from "../../../../interfaces";
+import CustomTooltip from "../CustomTooltip";
+
+const defaultStyle = {
+  weight: 1,
+};
+const highlightStyle = {
+  weight: 2,
+};
+
+export default function Bubble({
+  data,
+  highestData,
+  legends,
+  radius,
+}: {
+  data: ThematicLayerData;
+  highestData: number;
+  legends: Legend[];
+  radius?: { min: number; max: number };
+}) {
+  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 (
+    <>
+      <CircleMarker
+        interactive
+        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={center}>
+        <CustomTooltip data={data} />
+      </CircleMarker>
+    </>
+  );
+}

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/components/ChoroplethLegend.tsx

@@ -0,0 +1,43 @@
+import "../../../styles/legends.css";
+import {Divider} from "@dhis2/ui";
+import type {Legend} from "@hisptz/dhis2-utils";
+import React, {forwardRef} from "react";
+import {getLegendCount} from "../../../../../../../utils/map";
+import {ThematicLayerData, ThematicLayerDataItem} from "../../../../../interfaces";
+import LegendCardHeader from "../../../../LegendArea/components/LegendCardHeader";
+
+export function LegendItem({ legend, value }: { legend: { startValue: number; endValue: number; color: string }; value: number }) {
+  return (
+    <div className="legend-item">
+      <div className="legend-item-color" style={{ backgroundColor: legend.color }} />
+      <div className="legend-item-label">{`${legend.startValue} - ${legend.endValue}`}</div>
+      <div className="legend-item-value">{`(${value})`}</div>
+    </div>
+  );
+}
+
+function ChoroplethLegend(
+  {
+    dataItem,
+    data,
+    name,
+    collapsible,
+    onCollapse,
+    legends,
+  }: { data: ThematicLayerData[]; dataItem: ThematicLayerDataItem; name?: string; collapsible?: boolean; onCollapse?: () => void; legends: Legend[] },
+  ref: React.LegacyRef<HTMLDivElement> | undefined
+) {
+  return (
+    <div className="legend-card" ref={ref}>
+      <LegendCardHeader title={dataItem.displayName} collapsible={collapsible} onCollapse={onCollapse} />
+      <Divider margin={"0"} />
+      <div className="legend-list pt-8">
+        {legends?.map((legend: any) => (
+          <LegendItem key={`${legend?.color}-legend-list`} legend={legend} value={getLegendCount(legend, data)} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default forwardRef(ChoroplethLegend);

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/index.tsx

@@ -0,0 +1,38 @@
+import {colors} from "@dhis2/ui";
+import type {Legend} from "@hisptz/dhis2-utils";
+import React from "react";
+import {GeoJSON} from "react-leaflet";
+import {MapOrgUnit} from "../../../../../../interfaces";
+import {getColorFromLegendSet, highlightFeature, resetHighlight} from "../../../../../../utils/map";
+import {ThematicLayerDataItem} from "../../../../interfaces";
+import CustomTooltip from "../CustomTooltip";
+
+const defaultStyle = {
+  weight: 1,
+};
+const highlightStyle = {
+  weight: 2,
+};
+
+export default function Choropleth({ data, legends }: { data: { orgUnit: MapOrgUnit; data?: number; dataItem: ThematicLayerDataItem }; legends: Legend[] }) {
+  const { orgUnit } = data;
+  return (
+    <>
+      <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,
+        }}
+        key={`${data.dataItem.id}-layer`}>
+        <CustomTooltip data={data} />
+      </GeoJSON>
+    </>
+  );
+}

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/CustomTooltip/index.tsx

@@ -0,0 +1,26 @@
+import i18n from "@dhis2/d2-i18n";
+import React from "react";
+import {Pane, Popup, Tooltip} from "react-leaflet";
+import {useMapPeriods} from "../../../../../MapProvider/hooks";
+import {ThematicLayerData} from "../../../../interfaces";
+
+export default function CustomTooltip({ data: dataObject }: { data: ThematicLayerData }) {
+  const { dataItem, orgUnit, data } = dataObject ?? {};
+  const { periods } = useMapPeriods() ?? {};
+
+  return (
+    <Pane name={`${dataItem.displayName}-${orgUnit.id}-popup-pane`} pane="popupPane">
+      <Tooltip>
+        {orgUnit?.name} ({data})
+      </Tooltip>
+      <Popup minWidth={80}>
+        <h3 style={{ margin: 0 }}>{orgUnit?.name}</h3>
+        <div>{dataItem?.displayName}</div>
+        <div>{periods?.map((period) => period.name).join(",")}</div>
+        <div>
+          {i18n.t("Value")}: {data}
+        </div>
+      </Popup>
+    </Pane>
+  );
+}

package/src/components/Map/components/MapLayer/components/ThematicLayer/hooks/config.ts

@@ -0,0 +1,10 @@
+import {find} from "lodash";
+import {useContext} from "react";
+import {MapLayersContext} from "../../../../../state";
+import {CustomThematicLayer} from "../../../interfaces";
+
+export default function useThematicLayer(layerId: string): CustomThematicLayer | undefined {
+  const { layers } = useContext(MapLayersContext);
+
+  return find(layers as CustomThematicLayer[], ["id", layerId]);
+}