@hisptz/dhis2-analytics 2.1.36 → 2.2.0

package/dist/esm/components/Map/components/MapControls/components/TimelineControl/index.js

@@ -0,0 +1,234 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { axisBottom } from 'd3-axis';
+import { scaleTime } from 'd3-scale';
+import { select } from 'd3-selection';
+import { DomUtil, DomEvent } from 'leaflet';
+import { DateTime } from 'luxon';
+import { createPortal } from 'react-dom';
+import { useContext, useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { useMap } from 'react-leaflet';
+import { MapPeriodFilterContext } from '../../../../state/index.js';
+import { dateToDHIS2PeriodId } from '../../../../utils/helpers.js';
+
+function resolveDates(tl) {
+  if ("step" in tl) {
+    const [start, end] = tl.range;
+    const dates = [];
+    let cur = DateTime.fromJSDate(start);
+    const endDt = DateTime.fromJSDate(end);
+    while (cur <= endDt) {
+      dates.push(cur.toJSDate());
+      cur = cur.plus(tl.step);
+    }
+    return dates;
+  }
+  return [...tl.range];
+}
+const ACCENT = "#2c6693";
+const PADDING_LEFT = 40;
+const PADDING_RIGHT = 20;
+const LABEL_WIDTH = 80;
+const PERIOD_RECT_HEIGHT = 8;
+const PERIOD_RECT_GAP = 1;
+const AXIS_OFFSET = 4;
+function TimelineUI({
+  autoplay: initialAutoplay,
+  button,
+  dates,
+  interval,
+  onStep
+}) {
+  const [index, setIndex] = useState(0);
+  const [playing, setPlaying] = useState(initialAutoplay);
+  const [svgWidth, setSvgWidth] = useState(null);
+  const svgRef = useRef(null);
+  const axisRef = useRef(null);
+  const intervalRef = useRef(null);
+  useEffect(() => {
+    const el = svgRef.current;
+    if (!el) return;
+    const measure = () => {
+      setSvgWidth(el.getBoundingClientRect().width);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+    };
+  }, []);
+  const trackWidth = svgWidth !== null ? svgWidth - PADDING_LEFT - PADDING_RIGHT : 0;
+  const timeScale = useMemo(() => {
+    if (!trackWidth || dates.length < 2) return null;
+    const periodMs = dates[1].getTime() - dates[0].getTime();
+    const domainEnd = new Date(dates[dates.length - 1].getTime() + periodMs);
+    return scaleTime().domain([dates[0], domainEnd]).range([0, trackWidth]);
+  }, [dates, trackWidth]);
+  useEffect(() => {
+    if (!timeScale || !axisRef.current || !trackWidth) return;
+    const maxTicks = Math.round(trackWidth / LABEL_WIDTH);
+    const axis = axisBottom(timeScale).ticks(maxTicks);
+    select(axisRef.current).call(axis);
+    select(axisRef.current).select(".domain").attr("stroke", "#ccc");
+    select(axisRef.current).selectAll(".tick line").attr("stroke", "#ccc");
+    select(axisRef.current).selectAll(".tick text").attr("fill", "#666").attr("font-size", "10px").attr("font-family", "sans-serif");
+  }, [timeScale, trackWidth]);
+  const stepTo = useCallback(
+    (idx) => {
+      setIndex(idx);
+      onStep(dates[idx]);
+    },
+    [dates, onStep]
+  );
+  useEffect(() => {
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    if (!playing) return;
+    intervalRef.current = setInterval(() => {
+      setIndex((prev) => {
+        const next = prev + 1 >= dates.length ? 0 : prev + 1;
+        onStep(dates[next]);
+        return next;
+      });
+    }, interval);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [playing, interval, dates, onStep]);
+  const periodRects = useMemo(() => {
+    if (!timeScale || dates.length < 2) return null;
+    const unitWidth = timeScale(dates[1]) - timeScale(dates[0]);
+    return dates.map((date, i) => {
+      const x = timeScale(date);
+      const spanWidth = i < dates.length - 1 ? timeScale(dates[i + 1]) - x : unitWidth;
+      const w = Math.max(spanWidth - PERIOD_RECT_GAP, 1);
+      const capturedIndex = i;
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          fill: capturedIndex === index ? ACCENT : "#b0c4d8",
+          height: PERIOD_RECT_HEIGHT,
+          onClick: () => {
+            setPlaying(false);
+            stepTo(capturedIndex);
+          },
+          rx: 1,
+          style: { cursor: "pointer" },
+          width: w,
+          x,
+          y: 0
+        },
+        date.toISOString()
+      );
+    });
+  }, [timeScale, dates, index, stepTo]);
+  const RECT_ROW_Y = 6;
+  const svgHeight = RECT_ROW_Y + PERIOD_RECT_HEIGHT + AXIS_OFFSET + 24;
+  const playLabel = playing ? button?.playingText ?? "Pause" : button?.pausedText ?? "Play";
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-label": "Timeline",
+      height: svgHeight,
+      ref: svgRef,
+      style: {
+        background: "white",
+        boxShadow: "0 -1px 4px rgba(0,0,0,0.15)",
+        display: "block",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "g",
+          {
+            "aria-label": playLabel,
+            onClick: () => {
+              setPlaying((p) => !p);
+            },
+            role: "button",
+            style: { cursor: "pointer" },
+            transform: `translate(7, ${RECT_ROW_Y - 8})`,
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M0 0h24v24H0z", fillOpacity: 0 }),
+              playing ? /* @__PURE__ */ jsx("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z", fill: ACCENT }) : /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z", fill: ACCENT })
+            ]
+          }
+        ),
+        timeScale !== null && /* @__PURE__ */ jsx("g", { transform: `translate(${PADDING_LEFT}, ${RECT_ROW_Y})`, children: periodRects }),
+        timeScale !== null && /* @__PURE__ */ jsx(
+          "g",
+          {
+            ref: axisRef,
+            transform: `translate(${PADDING_LEFT}, ${RECT_ROW_Y + PERIOD_RECT_HEIGHT + AXIS_OFFSET})`
+          }
+        )
+      ]
+    }
+  );
+}
+function TimelineControl({
+  autoplay = false,
+  button,
+  interval = 1e3,
+  periodType,
+  position = "bottom",
+  timeline
+}) {
+  const map = useMap();
+  const {
+    periodType: contextPeriodType,
+    setActivePeriod,
+    setPeriodType
+  } = useContext(MapPeriodFilterContext);
+  const [container, setContainer] = useState(null);
+  useEffect(() => {
+    if (periodType) setPeriodType(periodType);
+  }, [periodType, setPeriodType]);
+  const resolvedPeriodType = periodType ?? contextPeriodType ?? "Monthly";
+  const dates = useMemo(() => resolveDates(timeline), [timeline]);
+  useEffect(() => {
+    const mapEl = map.getContainer();
+    const div = DomUtil.create("div", "", mapEl);
+    DomEvent.disableClickPropagation(div);
+    DomEvent.disableScrollPropagation(div);
+    const isTop = position.startsWith("top");
+    Object.assign(div.style, {
+      bottom: isTop ? "auto" : "18px",
+      boxSizing: "border-box",
+      left: "0",
+      padding: isTop ? "8px 8px 0" : "0 8px 8px",
+      position: "absolute",
+      right: "0",
+      top: isTop ? "0" : "auto",
+      zIndex: "1000"
+    });
+    setContainer(div);
+    return () => {
+      div.remove();
+      setContainer(null);
+    };
+  }, [map, position]);
+  const handleStep = useCallback(
+    (date) => {
+      setActivePeriod(dateToDHIS2PeriodId(date, resolvedPeriodType));
+    },
+    [resolvedPeriodType, setActivePeriod]
+  );
+  if (!container) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      TimelineUI,
+      {
+        autoplay,
+        button,
+        dates,
+        interval,
+        onStep: handleStep
+      }
+    ),
+    container
+  );
+}
+
+export { TimelineControl };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Map/components/MapControls/components/TimelineControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/components/Map/components/MapControls/components/TimelineControl/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAiDA,SAAS,aAAa,EAAA,EAAgD;AACrE,EAAA,IAAI,UAAU,EAAA,EAAI;AACjB,IAAA,MAAM,CAAC,KAAA,EAAO,GAAG,CAAA,GAAI,EAAA,CAAG,KAAA;AACxB,IAAA,MAAM,QAAgB,EAAC;AACvB,IAAA,IAAI,GAAA,GAAM,QAAA,CAAS,UAAA,CAAW,KAAK,CAAA;AACnC,IAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,UAAA,CAAW,GAAG,CAAA;AACrC,IAAA,OAAO,OAAO,KAAA,EAAO;AACpB,MAAA,KAAA,CAAM,IAAA,CAAK,GAAA,CAAI,QAAA,EAAU,CAAA;AACzB,MAAA,GAAA,GAAM,GAAA,CAAI,IAAA,CAAK,EAAA,CAAG,IAAI,CAAA;AAAA,IACvB;AACA,IAAA,OAAO,KAAA;AAAA,EACR;AACA,EAAA,OAAO,CAAC,GAAG,EAAA,CAAG,KAAK,CAAA;AACpB;AAEA,MAAM,MAAA,GAAS,SAAA;AACf,MAAM,YAAA,GAAe,EAAA;AACrB,MAAM,aAAA,GAAgB,EAAA;AACtB,MAAM,WAAA,GAAc,EAAA;AACpB,MAAM,kBAAA,GAAqB,CAAA;AAC3B,MAAM,eAAA,GAAkB,CAAA;AACxB,MAAM,WAAA,GAAc,CAAA;AAGpB,SAAS,UAAA,CAAW;AAAA,EACnB,QAAA,EAAU,eAAA;AAAA,EACV,MAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACD,CAAA,EAMiB;AAChB,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,CAAC,CAAA;AACpC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,eAAe,CAAA;AACtD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAwB,IAAI,CAAA;AAC5D,EAAA,MAAM,MAAA,GAAS,OAAsB,IAAI,CAAA;AACzC,EAAA,MAAM,OAAA,GAAU,OAAoB,IAAI,CAAA;AACxC,EAAA,MAAM,WAAA,GAAc,OAA8C,IAAI,CAAA;AAEtE,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,MAAM,KAAK,MAAA,CAAO,OAAA;AAClB,IAAA,IAAI,CAAC,EAAA,EAAI;AACT,IAAA,MAAM,UAAU,MAAY;AAAE,MAAA,WAAA,CAAY,EAAA,CAAG,qBAAA,EAAsB,CAAE,KAAK,CAAA;AAAA,IAAG,CAAA;AAC7E,IAAA,OAAA,EAAQ;AACR,IAAA,MAAM,EAAA,GAAK,IAAI,cAAA,CAAe,OAAO,CAAA;AACrC,IAAA,EAAA,CAAG,QAAQ,EAAE,CAAA;AACb,IAAA,OAAO,MAAM;AAAE,MAAA,EAAA,CAAG,UAAA,EAAW;AAAA,IAAG,CAAA;AAAA,EACjC,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,UAAA,GAAa,QAAA,KAAa,IAAA,GAAO,QAAA,GAAW,eAAe,aAAA,GAAgB,CAAA;AAEjF,EAAA,MAAM,SAAA,GAAY,QAAQ,MAAM;AAC/B,IAAA,IAAI,CAAC,UAAA,IAAc,KAAA,CAAM,MAAA,GAAS,GAAG,OAAO,IAAA;AAC5C,IAAA,MAAM,QAAA,GAAW,MAAM,CAAC,CAAA,CAAE,SAAQ,GAAI,KAAA,CAAM,CAAC,CAAA,CAAE,OAAA,EAAQ;AACvD,IAAA,MAAM,SAAA,GAAY,IAAI,IAAA,CAAK,KAAA,CAAM,KAAA,CAAM,SAAS,CAAC,CAAA,CAAE,OAAA,EAAQ,GAAI,QAAQ,CAAA;AACvE,IAAA,OAAO,SAAA,EAAU,CACf,MAAA,CAAO,CAAC,MAAM,CAAC,CAAA,EAAG,SAAS,CAAC,CAAA,CAC5B,KAAA,CAAM,CAAC,CAAA,EAAG,UAAU,CAAC,CAAA;AAAA,EACxB,CAAA,EAAG,CAAC,KAAA,EAAO,UAAU,CAAC,CAAA;AAEtB,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,IAAI,CAAC,SAAA,IAAa,CAAC,OAAA,CAAQ,OAAA,IAAW,CAAC,UAAA,EAAY;AACnD,IAAA,MAAM,QAAA,GAAW,IAAA,CAAK,KAAA,CAAM,UAAA,GAAa,WAAW,CAAA;AACpD,IAAA,MAAM,IAAA,GAAO,UAAA,CAAiB,SAAS,CAAA,CAAE,MAAM,QAAQ,CAAA;AACvD,IAAA,MAAA,CAA6B,OAAA,CAAQ,OAAO,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AACvD,IAAA,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAA,CAAE,MAAA,CAAO,SAAS,CAAA,CAAE,IAAA,CAAK,UAAU,MAAM,CAAA;AAC/D,IAAA,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAA,CAAE,SAAA,CAAU,YAAY,CAAA,CAAE,IAAA,CAAK,UAAU,MAAM,CAAA;AACrE,IAAA,MAAA,CAAO,QAAQ,OAAO,CAAA,CACpB,SAAA,CAAmC,YAAY,EAC/C,IAAA,CAAK,MAAA,EAAQ,MAAM,CAAA,CACnB,KAAK,WAAA,EAAa,MAAM,CAAA,CACxB,IAAA,CAAK,eAAe,YAAY,CAAA;AAAA,EACnC,CAAA,EAAG,CAAC,SAAA,EAAW,UAAU,CAAC,CAAA;AAE1B,EAAA,MAAM,MAAA,GAAS,WAAA;AAAA,IACd,CAAC,GAAA,KAAgB;AAChB,MAAA,QAAA,CAAS,GAAG,CAAA;AACZ,MAAA,MAAA,CAAO,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IAClB,CAAA;AAAA,IACA,CAAC,OAAO,MAAM;AAAA,GACf;AAGA,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,IAAI,WAAA,CAAY,OAAA,EAAS,aAAA,CAAc,WAAA,CAAY,OAAO,CAAA;AAC1D,IAAA,IAAI,CAAC,OAAA,EAAS;AACd,IAAA,WAAA,CAAY,OAAA,GAAU,YAAY,MAAM;AACvC,MAAA,QAAA,CAAS,CAAC,IAAA,KAAS;AAClB,QAAA,MAAM,OAAO,IAAA,GAAO,CAAA,IAAK,KAAA,CAAM,MAAA,GAAS,IAAI,IAAA,GAAO,CAAA;AACnD,QAAA,MAAA,CAAO,KAAA,CAAM,IAAI,CAAC,CAAA;AAClB,QAAA,OAAO,IAAA;AAAA,MACR,CAAC,CAAA;AAAA,IACF,GAAG,QAAQ,CAAA;AACX,IAAA,OAAO,MAAM;AACZ,MAAA,IAAI,WAAA,CAAY,OAAA,EAAS,aAAA,CAAc,WAAA,CAAY,OAAO,CAAA;AAAA,IAC3D,CAAA;AAAA,EACD,GAAG,CAAC,OAAA,EAAS,QAAA,EAAU,KAAA,EAAO,MAAM,CAAC,CAAA;AAErC,EAAA,MAAM,WAAA,GAAc,QAAQ,MAAM;AACjC,IAAA,IAAI,CAAC,SAAA,IAAa,KAAA,CAAM,MAAA,GAAS,GAAG,OAAO,IAAA;AAC3C,IAAA,MAAM,SAAA,GAAY,UAAU,KAAA,CAAM,CAAC,CAAC,CAAA,GAAI,SAAA,CAAU,KAAA,CAAM,CAAC,CAAC,CAAA;AAC1D,IAAA,OAAO,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,CAAA,KAAM;AAC7B,MAAA,MAAM,CAAA,GAAI,UAAU,IAAI,CAAA;AACxB,MAAA,MAAM,SAAA,GAAY,CAAA,GAAI,KAAA,CAAM,MAAA,GAAS,CAAA,GAClC,SAAA,CAAU,KAAA,CAAM,CAAA,GAAI,CAAC,CAAC,CAAA,GAAI,CAAA,GAC1B,SAAA;AACH,MAAA,MAAM,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,SAAA,GAAY,iBAAiB,CAAC,CAAA;AACjD,MAAA,MAAM,aAAA,GAAgB,CAAA;AACtB,MAAA,uBACC,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UAEA,IAAA,EAAM,aAAA,KAAkB,KAAA,GAAQ,MAAA,GAAS,SAAA;AAAA,UACzC,MAAA,EAAQ,kBAAA;AAAA,UACR,SAAS,MAAM;AAAE,YAAA,UAAA,CAAW,KAAK,CAAA;AAAG,YAAA,MAAA,CAAO,aAAa,CAAA;AAAA,UAAG,CAAA;AAAA,UAC3D,EAAA,EAAI,CAAA;AAAA,UACJ,KAAA,EAAO,EAAE,MAAA,EAAQ,SAAA,EAAU;AAAA,UAC3B,KAAA,EAAO,CAAA;AAAA,UACP,CAAA;AAAA,UACA,CAAA,EAAG;AAAA,SAAA;AAAA,QARE,KAAK,WAAA;AAAY,OASvB;AAAA,IAEF,CAAC,CAAA;AAAA,EACF,GAAG,CAAC,SAAA,EAAW,KAAA,EAAO,KAAA,EAAO,MAAM,CAAC,CAAA;AAGpC,EAAA,MAAM,UAAA,GAAa,CAAA;AACnB,EAAA,MAAM,SAAA,GAAY,UAAA,GAAa,kBAAA,GAAqB,WAAA,GAAc,EAAA;AAElE,EAAA,MAAM,YAAY,OAAA,GACd,MAAA,EAAQ,WAAA,IAAe,OAAA,GACvB,QAAQ,UAAA,IAAc,MAAA;AAE1B,EAAA,uBACC,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,YAAA,EAAW,UAAA;AAAA,MACX,MAAA,EAAQ,SAAA;AAAA,MACR,GAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAO;AAAA,QACN,UAAA,EAAY,OAAA;AAAA,QACZ,SAAA,EAAW,6BAAA;AAAA,QACX,OAAA,EAAS,OAAA;AAAA,QACT,KAAA,EAAO;AAAA,OACR;AAAA,MAGA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACA,YAAA,EAAY,SAAA;AAAA,YACZ,SAAS,MAAM;AAAE,cAAA,UAAA,CAAW,CAAC,CAAA,KAAM,CAAC,CAAC,CAAA;AAAA,YAAG,CAAA;AAAA,YACxC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAO,EAAE,MAAA,EAAQ,SAAA,EAAU;AAAA,YAC3B,SAAA,EAAW,CAAA,aAAA,EAAgB,UAAA,GAAa,CAAC,CAAA,CAAA,CAAA;AAAA,YAEzC,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,eAAA,EAAgB,WAAA,EAAa,CAAA,EAAG,CAAA;AAAA,cACvC,OAAA,mBACE,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,iCAAA,EAAkC,IAAA,EAAM,MAAA,EAAQ,CAAA,mBACxD,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,eAAA,EAAgB,MAAM,MAAA,EAAQ;AAAA;AAAA;AAAA,SAE1C;AAAA,QAGC,SAAA,KAAc,IAAA,oBACd,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAW,aAAa,YAAY,CAAA,EAAA,EAAK,UAAU,CAAA,CAAA,CAAA,EACpD,QAAA,EAAA,WAAA,EACF,CAAA;AAAA,QAIA,cAAc,IAAA,oBACd,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACA,GAAA,EAAK,OAAA;AAAA,YACL,WAAW,CAAA,UAAA,EAAa,YAAY,CAAA,EAAA,EAAK,UAAA,GAAa,qBAAqB,WAAW,CAAA,CAAA;AAAA;AAAA;AACvF;AAAA;AAAA,GAEF;AAEF;AAGO,SAAS,eAAA,CAAgB;AAAA,EAC/B,QAAA,GAAW,KAAA;AAAA,EACX,MAAA;AAAA,EACA,QAAA,GAAW,GAAA;AAAA,EACX,UAAA;AAAA,EACA,QAAA,GAAW,QAAA;AAAA,EACX;AACD,CAAA,EAAgD;AAC/C,EAAA,MAAM,MAAM,MAAA,EAAO;AACnB,EAAA,MAAM;AAAA,IACL,UAAA,EAAY,iBAAA;AAAA,IACZ,eAAA;AAAA,IACA;AAAA,GACD,GAAI,WAAW,sBAAsB,CAAA;AACrC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAA6B,IAAI,CAAA;AAEnE,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,IAAI,UAAA,gBAA0B,UAAU,CAAA;AAAA,EACzC,CAAA,EAAG,CAAC,UAAA,EAAY,aAAa,CAAC,CAAA;AAE9B,EAAA,MAAM,kBAAA,GAAqB,cAAc,iBAAA,IAAqB,SAAA;AAC9D,EAAA,MAAM,KAAA,GAAQ,QAAQ,MAAM,YAAA,CAAa,QAAQ,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAE9D,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,MAAM,KAAA,GAAQ,IAAI,YAAA,EAAa;AAC/B,IAAA,MAAM,GAAA,GAAM,OAAA,CAAQ,MAAA,CAAO,KAAA,EAAO,IAAI,KAAK,CAAA;AAC3C,IAAA,QAAA,CAAS,wBAAwB,GAAG,CAAA;AACpC,IAAA,QAAA,CAAS,yBAAyB,GAAG,CAAA;AAErC,IAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,UAAA,CAAW,KAAK,CAAA;AACvC,IAAA,MAAA,CAAO,MAAA,CAAO,IAAI,KAAA,EAAO;AAAA,MACxB,MAAA,EAAQ,QAAQ,MAAA,GAAS,MAAA;AAAA,MACzB,SAAA,EAAW,YAAA;AAAA,MACX,IAAA,EAAM,GAAA;AAAA,MACN,OAAA,EAAS,QAAQ,WAAA,GAAc,WAAA;AAAA,MAC/B,QAAA,EAAU,UAAA;AAAA,MACV,KAAA,EAAO,GAAA;AAAA,MACP,GAAA,EAAK,QAAQ,GAAA,GAAM,MAAA;AAAA,MACnB,MAAA,EAAQ;AAAA,KACR,CAAA;AAED,IAAA,YAAA,CAAa,GAAG,CAAA;AAChB,IAAA,OAAO,MAAM;AACZ,MAAA,GAAA,CAAI,MAAA,EAAO;AACX,MAAA,YAAA,CAAa,IAAI,CAAA;AAAA,IAClB,CAAA;AAAA,EACD,CAAA,EAAG,CAAC,GAAA,EAAK,QAAQ,CAAC,CAAA;AAElB,EAAA,MAAM,UAAA,GAAa,WAAA;AAAA,IAClB,CAAC,IAAA,KAAe;AACf,MAAA,eAAA,CAAgB,mBAAA,CAAoB,IAAA,EAAM,kBAAkB,CAAC,CAAA;AAAA,IAC9D,CAAA;AAAA,IACA,CAAC,oBAAoB,eAAe;AAAA,GACrC;AAEA,EAAA,IAAI,CAAC,WAAW,OAAO,IAAA;AAEvB,EAAA,OAAO,YAAA;AAAA,oBACN,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA,EAAQ;AAAA;AAAA,KACT;AAAA,IACA;AAAA,GACD;AACD","file":"index.js","sourcesContent":["import { axisBottom } from \"d3-axis\";\nimport { scaleTime } from \"d3-scale\";\nimport { select } from \"d3-selection\";\nimport { DomEvent, DomUtil } from \"leaflet\";\nimport { DateTime, type DurationObjectUnits } from \"luxon\";\nimport { createPortal } from \"react-dom\";\nimport {\n\ttype ReactElement,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport { useMap } from \"react-leaflet\";\nimport { MapPeriodFilterContext } from \"../../../../state/index.js\";\nimport { dateToDHIS2PeriodId, type DHIS2PeriodType } from \"../../../../utils/helpers.js\";\n\nexport type { DHIS2PeriodType };\n\nexport type TimelineRange =\n\t| { range: [Date, Date]; step: DurationObjectUnits }\n\t| { range: [Date, Date, ...Date[]] };\n\nexport type TimelinePosition =\n\t| \"bottom\"\n\t| \"bottomleft\"\n\t| \"bottomright\"\n\t| \"bottomcenter\"\n\t| \"top\"\n\t| \"topleft\"\n\t| \"topright\"\n\t| \"topcenter\";\n\nexport interface TimelineControlOptions {\n\tautoplay?: boolean;\n\tbutton?: {\n\t\tpausedText?: string;\n\t\tplayingText?: string;\n\t};\n\tinterval?: number;\n\tperiodType?: DHIS2PeriodType;\n\tposition?: TimelinePosition;\n\ttimeline: {\n\t\tdateFormat: string;\n\t} & TimelineRange;\n}\n\nfunction resolveDates(tl: TimelineControlOptions[\"timeline\"]): Date[] {\n\tif (\"step\" in tl) {\n\t\tconst [start, end] = tl.range;\n\t\tconst dates: Date[] = [];\n\t\tlet cur = DateTime.fromJSDate(start);\n\t\tconst endDt = DateTime.fromJSDate(end);\n\t\twhile (cur <= endDt) {\n\t\t\tdates.push(cur.toJSDate());\n\t\t\tcur = cur.plus(tl.step);\n\t\t}\n\t\treturn dates;\n\t}\n\treturn [...tl.range];\n}\n\nconst ACCENT = \"#2c6693\";\nconst PADDING_LEFT = 40;   // space for play/pause icon\nconst PADDING_RIGHT = 20;\nconst LABEL_WIDTH = 80;    // min pixels per axis tick label\nconst PERIOD_RECT_HEIGHT = 8;\nconst PERIOD_RECT_GAP = 1; // gap between adjacent period rects\nconst AXIS_OFFSET = 4;     // pixels between rect bottom and axis line\n\n\nfunction TimelineUI({\n\tautoplay: initialAutoplay,\n\tbutton,\n\tdates,\n\tinterval,\n\tonStep,\n}: {\n\tautoplay: boolean;\n\tbutton?: TimelineControlOptions[\"button\"];\n\tdates: Date[];\n\tinterval: number;\n\tonStep: (date: Date) => void;\n}): ReactElement {\n\tconst [index, setIndex] = useState(0);\n\tconst [playing, setPlaying] = useState(initialAutoplay);\n\tconst [svgWidth, setSvgWidth] = useState<number | null>(null);\n\tconst svgRef = useRef<SVGSVGElement>(null);\n\tconst axisRef = useRef<SVGGElement>(null);\n\tconst intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);\n\n\tuseEffect(() => {\n\t\tconst el = svgRef.current;\n\t\tif (!el) return;\n\t\tconst measure = (): void => { setSvgWidth(el.getBoundingClientRect().width); };\n\t\tmeasure();\n\t\tconst ro = new ResizeObserver(measure);\n\t\tro.observe(el);\n\t\treturn () => { ro.disconnect(); };\n\t}, []);\n\n\tconst trackWidth = svgWidth !== null ? svgWidth - PADDING_LEFT - PADDING_RIGHT : 0;\n\n\tconst timeScale = useMemo(() => {\n\t\tif (!trackWidth || dates.length < 2) return null;\n\t\tconst periodMs = dates[1].getTime() - dates[0].getTime();\n\t\tconst domainEnd = new Date(dates[dates.length - 1].getTime() + periodMs);\n\t\treturn scaleTime()\n\t\t\t.domain([dates[0], domainEnd])\n\t\t\t.range([0, trackWidth]);\n\t}, [dates, trackWidth]);\n\n\tuseEffect(() => {\n\t\tif (!timeScale || !axisRef.current || !trackWidth) return;\n\t\tconst maxTicks = Math.round(trackWidth / LABEL_WIDTH);\n\t\tconst axis = axisBottom<Date>(timeScale).ticks(maxTicks);\n\t\tselect<SVGGElement, unknown>(axisRef.current).call(axis);\n\t\tselect(axisRef.current).select(\".domain\").attr(\"stroke\", \"#ccc\");\n\t\tselect(axisRef.current).selectAll(\".tick line\").attr(\"stroke\", \"#ccc\");\n\t\tselect(axisRef.current)\n\t\t\t.selectAll<SVGTextElement, unknown>(\".tick text\")\n\t\t\t.attr(\"fill\", \"#666\")\n\t\t\t.attr(\"font-size\", \"10px\")\n\t\t\t.attr(\"font-family\", \"sans-serif\");\n\t}, [timeScale, trackWidth]);\n\n\tconst stepTo = useCallback(\n\t\t(idx: number) => {\n\t\t\tsetIndex(idx);\n\t\t\tonStep(dates[idx]);\n\t\t},\n\t\t[dates, onStep],\n\t);\n\n\t// Autoplay interval\n\tuseEffect(() => {\n\t\tif (intervalRef.current) clearInterval(intervalRef.current);\n\t\tif (!playing) return;\n\t\tintervalRef.current = setInterval(() => {\n\t\t\tsetIndex((prev) => {\n\t\t\t\tconst next = prev + 1 >= dates.length ? 0 : prev + 1;\n\t\t\t\tonStep(dates[next]);\n\t\t\t\treturn next;\n\t\t\t});\n\t\t}, interval);\n\t\treturn () => {\n\t\t\tif (intervalRef.current) clearInterval(intervalRef.current);\n\t\t};\n\t}, [playing, interval, dates, onStep]);\n\n\tconst periodRects = useMemo(() => {\n\t\tif (!timeScale || dates.length < 2) return null;\n\t\tconst unitWidth = timeScale(dates[1]) - timeScale(dates[0]);\n\t\treturn dates.map((date, i) => {\n\t\t\tconst x = timeScale(date);\n\t\t\tconst spanWidth = i < dates.length - 1\n\t\t\t\t? timeScale(dates[i + 1]) - x\n\t\t\t\t: unitWidth;\n\t\t\tconst w = Math.max(spanWidth - PERIOD_RECT_GAP, 1);\n\t\t\tconst capturedIndex = i;\n\t\t\treturn (\n\t\t\t\t<rect\n\t\t\t\t\tkey={date.toISOString()}\n\t\t\t\t\tfill={capturedIndex === index ? ACCENT : \"#b0c4d8\"}\n\t\t\t\t\theight={PERIOD_RECT_HEIGHT}\n\t\t\t\t\tonClick={() => { setPlaying(false); stepTo(capturedIndex); }}\n\t\t\t\t\trx={1}\n\t\t\t\t\tstyle={{ cursor: \"pointer\" }}\n\t\t\t\t\twidth={w}\n\t\t\t\t\tx={x}\n\t\t\t\t\ty={0}\n\t\t\t\t/>\n\t\t\t);\n\t\t});\n\t}, [timeScale, dates, index, stepTo]);\n\n\n\tconst RECT_ROW_Y = 6;\n\tconst svgHeight = RECT_ROW_Y + PERIOD_RECT_HEIGHT + AXIS_OFFSET + 24\n\n\tconst playLabel = playing\n\t\t? (button?.playingText ?? \"Pause\")\n\t\t: (button?.pausedText ?? \"Play\");\n\n\treturn (\n\t\t<svg\n\t\t\taria-label=\"Timeline\"\n\t\t\theight={svgHeight}\n\t\t\tref={svgRef}\n\t\t\tstyle={{\n\t\t\t\tbackground: \"white\",\n\t\t\t\tboxShadow: \"0 -1px 4px rgba(0,0,0,0.15)\",\n\t\t\t\tdisplay: \"block\",\n\t\t\t\twidth: \"100%\",\n\t\t\t}}\n\t\t>\n\t\t\t{/* Play / Pause — Material Design SVG icon */}\n\t\t\t<g\n\t\t\t\taria-label={playLabel}\n\t\t\t\tonClick={() => { setPlaying((p) => !p); }}\n\t\t\t\trole=\"button\"\n\t\t\t\tstyle={{ cursor: \"pointer\" }}\n\t\t\t\ttransform={`translate(7, ${RECT_ROW_Y - 8})`}\n\t\t\t>\n\t\t\t\t<path d=\"M0 0h24v24H0z\" fillOpacity={0} />\n\t\t\t\t{playing\n\t\t\t\t\t? <path d=\"M6 19h4V5H6v14zm8-14v14h4V5h-4z\" fill={ACCENT} />\n\t\t\t\t\t: <path d=\"M8 5v14l11-7z\" fill={ACCENT} />\n\t\t\t\t}\n\t\t\t</g>\n\n\t\t\t{/* Period rectangles */}\n\t\t\t{timeScale !== null && (\n\t\t\t\t<g transform={`translate(${PADDING_LEFT}, ${RECT_ROW_Y})`}>\n\t\t\t\t\t{periodRects}\n\t\t\t\t</g>\n\t\t\t)}\n\n\t\t\t{/* D3 x-axis */}\n\t\t\t{timeScale !== null && (\n\t\t\t\t<g\n\t\t\t\t\tref={axisRef}\n\t\t\t\t\ttransform={`translate(${PADDING_LEFT}, ${RECT_ROW_Y + PERIOD_RECT_HEIGHT + AXIS_OFFSET})`}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n}\n\n\nexport function TimelineControl({\n\tautoplay = false,\n\tbutton,\n\tinterval = 1000,\n\tperiodType,\n\tposition = \"bottom\",\n\ttimeline,\n}: TimelineControlOptions): ReactElement | null {\n\tconst map = useMap();\n\tconst {\n\t\tperiodType: contextPeriodType,\n\t\tsetActivePeriod,\n\t\tsetPeriodType,\n\t} = useContext(MapPeriodFilterContext);\n\tconst [container, setContainer] = useState<HTMLElement | null>(null);\n\n\tuseEffect(() => {\n\t\tif (periodType) setPeriodType(periodType);\n\t}, [periodType, setPeriodType]);\n\n\tconst resolvedPeriodType = periodType ?? contextPeriodType ?? \"Monthly\";\n\tconst dates = useMemo(() => resolveDates(timeline), [timeline]);\n\n\tuseEffect(() => {\n\t\tconst mapEl = map.getContainer();\n\t\tconst div = DomUtil.create(\"div\", \"\", mapEl);\n\t\tDomEvent.disableClickPropagation(div);\n\t\tDomEvent.disableScrollPropagation(div);\n\n\t\tconst isTop = position.startsWith(\"top\");\n\t\tObject.assign(div.style, {\n\t\t\tbottom: isTop ? \"auto\" : \"18px\",\n\t\t\tboxSizing: \"border-box\",\n\t\t\tleft: \"0\",\n\t\t\tpadding: isTop ? \"8px 8px 0\" : \"0 8px 8px\",\n\t\t\tposition: \"absolute\",\n\t\t\tright: \"0\",\n\t\t\ttop: isTop ? \"0\" : \"auto\",\n\t\t\tzIndex: \"1000\",\n\t\t});\n\n\t\tsetContainer(div);\n\t\treturn () => {\n\t\t\tdiv.remove();\n\t\t\tsetContainer(null);\n\t\t};\n\t}, [map, position]);\n\n\tconst handleStep = useCallback(\n\t\t(date: Date) => {\n\t\t\tsetActivePeriod(dateToDHIS2PeriodId(date, resolvedPeriodType));\n\t\t},\n\t\t[resolvedPeriodType, setActivePeriod],\n\t);\n\n\tif (!container) return null;\n\n\treturn createPortal(\n\t\t<TimelineUI\n\t\t\tautoplay={autoplay}\n\t\t\tbutton={button}\n\t\t\tdates={dates}\n\t\t\tinterval={interval}\n\t\t\tonStep={handleStep}\n\t\t/>,\n\t\tcontainer,\n\t);\n}\n"]}

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

@@ -2,29 +2,34 @@ import { jsx } from 'react/jsx-runtime';
 import { ScaleControl, ZoomControl } from 'react-leaflet';
 import FullscreenControl from './components/FullscreenControl/index.js';
 import DownloadControl from './components/DownloadControl/index.js';
+import { TimelineControl } from './components/TimelineControl';
 
-function MapControl({
-  type,
-  options,
-  position,
-  mapId
-}) {
+function MapControl(props) {
+  const { type } = props;
   switch (type) {
     case "zoom":
-      return /* @__PURE__ */ jsx(ZoomControl, { position, ...options });
+      return /* @__PURE__ */ jsx(ZoomControl, { position: props.position, ...props.options });
     case "scale":
-      return /* @__PURE__ */ jsx(ScaleControl, { position, ...options });
+      return /* @__PURE__ */ jsx(ScaleControl, { position: props.position, ...props.options });
     case "fullscreen":
-      return /* @__PURE__ */ jsx(FullscreenControl, { position, ...options });
+      return /* @__PURE__ */ jsx(
+        FullscreenControl,
+        {
+          position: props.position,
+          ...props.options
+        }
+      );
     case "print":
       return /* @__PURE__ */ jsx(
         DownloadControl,
         {
-          mapId,
-          position,
-          options
+          mapId: props.mapId,
+          options: props.options,
+          position: props.position
         }
       );
+    case "timeline":
+      return /* @__PURE__ */ jsx(TimelineControl, { ...props });
     default:
       return null;
   }

package/dist/esm/components/Map/components/MapControls/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Map/components/MapControls/index.tsx"],"names":[],"mappings":";;;;;AAUe,SAAR,UAAA,CAA4B;AAAA,EAClC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA;AACD,CAAA,EAAoB;AACnB,EAAA,QAAQ,IAAA;AAAM,IACb,KAAK,MAAA;AACJ,MAAA,uBAAO,GAAA,CAAC,WAAA,EAAA,EAAY,QAAA,EAAqB,GAAG,OAAA,EAAS,CAAA;AAAA,IACtD,KAAK,OAAA;AACJ,MAAA,uBAAO,GAAA,CAAC,YAAA,EAAA,EAAa,QAAA,EAAqB,GAAG,OAAA,EAAS,CAAA;AAAA,IACvD,KAAK,YAAA;AACJ,MAAA,uBAAO,GAAA,CAAC,iBAAA,EAAA,EAAkB,QAAA,EAAqB,GAAG,OAAA,EAAS,CAAA;AAAA,IAC5D,KAAK,OAAA;AACJ,MAAA,uBACC,GAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA,OACD;AAAA,IAEF;AACC,MAAA,OAAO,IAAA;AAAA;AAEV","file":"index.js","sourcesContent":["import React from \"react\";\nimport { ScaleControl, ZoomControl } from \"react-leaflet\";\nimport { MapControls } from \"../MapArea/interfaces/index.js\";\nimport FullscreenControl from \"./components/FullscreenControl/index.js\";\nimport DownloadControl from \"./components/DownloadControl/index.js\";\n\nexport interface MapControlProps extends MapControls {\n\tmapId: string;\n}\n\nexport default function MapControl({\n\ttype,\n\toptions,\n\tposition,\n\tmapId,\n}: MapControlProps) {\n\tswitch (type) {\n\t\tcase \"zoom\":\n\t\t\treturn <ZoomControl position={position} {...options} />;\n\t\tcase \"scale\":\n\t\t\treturn <ScaleControl position={position} {...options} />;\n\t\tcase \"fullscreen\":\n\t\t\treturn <FullscreenControl position={position} {...options} />;\n\t\tcase \"print\":\n\t\t\treturn (\n\t\t\t\t<DownloadControl\n\t\t\t\t\tmapId={mapId}\n\t\t\t\t\tposition={position}\n\t\t\t\t\toptions={options}\n\t\t\t\t/>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn null;\n\t}\n}\n"]}
+{"version":3,"sources":["../../../../../../src/components/Map/components/MapControls/index.tsx"],"names":[],"mappings":";;;;;;AAOe,SAAR,WAA4B,KAAA,EAAwC;AAC1E,EAAA,MAAM,EAAE,MAAK,GAAI,KAAA;AACjB,EAAA,QAAQ,IAAA;AAAM,IACb,KAAK,MAAA;AACJ,MAAA,2BAAQ,WAAA,EAAA,EAAY,QAAA,EAAU,MAAM,QAAA,EAAW,GAAG,MAAM,OAAA,EAAS,CAAA;AAAA,IAClE,KAAK,OAAA;AACJ,MAAA,2BACE,YAAA,EAAA,EAAa,QAAA,EAAU,MAAM,QAAA,EAAW,GAAG,MAAM,OAAA,EAAS,CAAA;AAAA,IAE7D,KAAK,YAAA;AACJ,MAAA,uBACC,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACA,UAAU,KAAA,CAAM,QAAA;AAAA,UACf,GAAG,KAAA,CAAM;AAAA;AAAA,OACX;AAAA,IAEF,KAAK,OAAA;AACJ,MAAA,uBACC,GAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UACA,OAAO,KAAA,CAAM,KAAA;AAAA,UACb,SAAS,KAAA,CAAM,OAAA;AAAA,UACf,UAAU,KAAA,CAAM;AAAA;AAAA,OACjB;AAAA,IAEF,KAAK,UAAA;AACJ,MAAA,uBAAO,GAAA,CAAC,eAAA,EAAA,EAAiB,GAAG,KAAA,EAAO,CAAA;AAAA,IACpC;AACC,MAAA,OAAO,IAAA;AAAA;AAEV","file":"index.js","sourcesContent":["import React from \"react\";\nimport { ScaleControl, ZoomControl } from \"react-leaflet\";\nimport { MapControls } from \"../MapArea/interfaces\";\nimport FullscreenControl from \"./components/FullscreenControl/index.js\";\nimport DownloadControl from \"./components/DownloadControl/index.js\";\nimport { TimelineControl } from \"./components/TimelineControl\";\n\nexport default function MapControl(props: MapControls & { mapId: string }) {\n\tconst { type } = props;\n\tswitch (type) {\n\t\tcase \"zoom\":\n\t\t\treturn <ZoomControl position={props.position} {...props.options} />;\n\t\tcase \"scale\":\n\t\t\treturn (\n\t\t\t\t<ScaleControl position={props.position} {...props.options} />\n\t\t\t);\n\t\tcase \"fullscreen\":\n\t\t\treturn (\n\t\t\t\t<FullscreenControl\n\t\t\t\t\tposition={props.position}\n\t\t\t\t\t{...props.options}\n\t\t\t\t/>\n\t\t\t);\n\t\tcase \"print\":\n\t\t\treturn (\n\t\t\t\t<DownloadControl\n\t\t\t\t\tmapId={props.mapId}\n\t\t\t\t\toptions={props.options}\n\t\t\t\t\tposition={props.position}\n\t\t\t\t/>\n\t\t\t);\n\t\tcase \"timeline\":\n\t\t\treturn <TimelineControl {...props} />;\n\t\tdefault:\n\t\t\treturn null;\n\t}\n}\n"]}

package/dist/esm/components/Map/components/MapProvider/components/MapLayerProvider/hooks/index.js

@@ -1,9 +1,10 @@
-import { compact, find, isEmpty, differenceBy, sortBy, last, head } from 'lodash';
-import { useMapOrganisationUnit, useMapPeriods } from '../../../hooks';
-import { useState, useMemo, useCallback } from 'react';
-import { getOrgUnitsSelection, sanitizeDate, sanitizeOrgUnits, toGeoJson, generateLegends } from '../../../../../utils';
+import { compact, find, isEmpty, sortBy, last, head, differenceBy } from 'lodash';
+import { useMapOrganisationUnit, useMapPeriods, useMapPeriodFilter } from '../../../hooks';
+import { useState, useMemo, useRef, useCallback } from 'react';
+import { getOrgUnitsSelection, sanitizeOrgUnits, toGeoJson, generateLegends } from '../../../../../utils';
 import { useDataEngine } from '@dhis2/app-runtime';
 import { map, asyncify } from 'async-es';
+import { computeTimelinePeriods } from '../../../../../utils/helpers.js';
 import { defaultColorScaleName, defaultClasses } from '../../../../../utils/colors.js';
 import { useGoogleEngineToken } from '../../../../MapLayer/components/GoogleEngineLayer/hooks/index.js';
 import { useBoundaryData } from '../../../../MapLayer/components/BoundaryLayer/hooks/useBoundaryData.js';
@@ -14,13 +15,13 @@ const analyticsQuery = {
   analytics: {
     resource: "analytics",
     params: ({ ou, pe, dx, startDate, endDate, analyticsOptions }) => {
-      const peDimension = !isEmpty(pe) ? `pe:${pe?.join(";")}` : void 0;
+      const usingDateRange = !isEmpty(startDate) && !isEmpty(endDate);
+      const peDimension = !usingDateRange && !isEmpty(pe) ? `pe:${pe?.join(";")}` : void 0;
       const ouDimension = !isEmpty(ou) ? `ou:${ou?.join(";")}` : void 0;
       const dxDimension = !isEmpty(dx) ? `dx:${dx?.join(";")}` : void 0;
       return {
         dimension: compact([dxDimension, peDimension, ouDimension]),
-        startDate,
-        endDate,
+        ...usingDateRange ? { startDate, endDate } : {},
         displayProperty: "NAME",
         ...analyticsOptions ?? {}
       };
@@ -77,24 +78,32 @@ function useThematicLayers({
   const [loading, setLoading] = useState(false);
   const { orgUnits, orgUnitSelection } = useMapOrganisationUnit();
   const { periods, range } = useMapPeriods() ?? {};
+  const { activePeriod, periodType } = useMapPeriodFilter();
   const ou = useMemo(
     () => getOrgUnitsSelection(orgUnitSelection),
     [orgUnitSelection]
   );
-  const pe = useMemo(() => periods?.map((pe2) => pe2.id), [periods]);
+  const timelinePeriods = useMemo(() => {
+    if (!range || !periodType) return null;
+    return computeTimelinePeriods(range, periodType);
+  }, [range, periodType]);
+  const pe = useMemo(() => {
+    if (timelinePeriods) return timelinePeriods;
+    return periods?.map((pe2) => pe2.id);
+  }, [periods, timelinePeriods]);
+  const toISODate = (date) => date.toISOString().slice(0, 10);
   const { startDate, endDate } = useMemo(() => {
-    if (!range) {
-      return {
-        startDate: void 0,
-        endDate: void 0
-      };
+    if (timelinePeriods || !range) {
+      return { startDate: void 0, endDate: void 0 };
     }
     return {
-      startDate: sanitizeDate(range.start.toDateString()),
-      endDate: sanitizeDate(range.end.toDateString())
+      startDate: toISODate(range.start),
+      endDate: toISODate(range.end)
     };
-  }, [range]);
-  const sanitizeData = (data, layer) => {
+  }, [range, timelinePeriods]);
+  const analyticsDataRef = useRef(null);
+  const legendSetsRef = useRef(/* @__PURE__ */ new Map());
+  const sanitizeData = (data, layer, currentPeriod) => {
     if (data) {
       const { analytics } = data;
       const rows = analytics?.rows;
@@ -107,18 +116,20 @@ function useThematicLayers({
       const valueIndex = analytics.headers.findIndex(
         (header) => header.name === "value"
       );
+      const peIndex = analytics.headers.findIndex(
+        (header) => header.name === "pe"
+      );
       if (!isEmpty(rows)) {
         return sortBy(
-          orgUnits?.map((ou2) => {
-            const row = rows.find(
-              (row2) => row2[ouIndex] === ou2.id && row2[dxIndex] === layer.dataItem.id
+          orgUnits?.map((orgUnit) => {
+            const matchingRows = rows.filter(
+              (row) => row[ouIndex] === orgUnit.id && row[dxIndex] === layer.dataItem.id && (currentPeriod && peIndex >= 0 ? row[peIndex] === currentPeriod : true)
             );
+            const values = matchingRows.map((row) => parseFloat(row[valueIndex])).filter((v) => !isNaN(v));
             return {
-              orgUnit: ou2,
-              data: row ? parseFloat(row[valueIndex]) : void 0,
-              dataItem: {
-                ...layer.dataItem
-              }
+              orgUnit,
+              data: values.length > 0 ? values.reduce((sum, v) => sum + v, 0) / values.length : void 0,
+              dataItem: { ...layer.dataItem }
             };
           }),
           ["data"]
@@ -135,15 +146,17 @@ function useThematicLayers({
         try {
           const legends = [];
           if (layer.dataItem.legendSet) {
-            const legendSetData = await engine.query(
-              legendSetsQuery,
-              {
-                variables: {
-                  id: layer.dataItem.legendSet
-                }
+            let legendSet = legendSetsRef.current.get(layer.dataItem.legendSet);
+            if (!legendSet) {
+              const legendSetData = await engine.query(
+                legendSetsQuery,
+                { variables: { id: layer.dataItem.legendSet } }
+              );
+              legendSet = legendSetData?.legendSets;
+              if (legendSet) {
+                legendSetsRef.current.set(layer.dataItem.legendSet, legendSet);
               }
-            );
-            const legendSet = legendSetData?.legendSets;
+            }
             if (legendSet) {
               legends.push(...legendSet.legends);
             }
@@ -159,17 +172,11 @@ function useThematicLayers({
             const autoLegends = generateLegends(
               last(sortedData)?.data ?? 0,
               head(sortedData)?.data ?? 0,
-              {
-                classesCount: scale,
-                colorClass
-              }
+              { classesCount: scale, colorClass }
             );
             legends.push(...autoLegends);
           }
-          return {
-            ...layer,
-            legends
-          };
+          return { ...layer, legends };
         } catch (e) {
           return layer;
         }
@@ -180,38 +187,25 @@ function useThematicLayers({
     try {
       setLoading(true);
       const layersWithoutData = layers?.filter((layer) => !layer.data);
-      const layersWithData = differenceBy(
-        layers,
-        layersWithoutData,
-        "id"
-      );
+      const layersWithData = differenceBy(layers, layersWithoutData, "id");
       const dx = layersWithoutData.map((layer) => layer.dataItem.id);
       let sanitizedLayersWithData = [];
       if (!isEmpty(dx)) {
         const data = await engine.query(analyticsQuery, {
-          variables: {
-            dx,
-            ou,
-            pe,
-            startDate,
-            endDate,
-            analyticsOptions
-          }
+          variables: { dx, ou, pe, startDate, endDate, analyticsOptions }
         });
+        analyticsDataRef.current = data;
         sanitizedLayersWithData = layersWithoutData.map((layer) => ({
           ...layer,
           name: layer?.name ?? layer?.dataItem?.displayName ?? layer.id,
-          data: sanitizeData(data, layer)
+          data: sanitizeData(data, layer, activePeriod)
         }));
       }
       const sanitizedLayersWithOrgUnits = layersWithData.map((layer) => ({
         ...layer,
         data: layer.data?.map((datum) => ({
           ...datum,
-          orgUnit: find(orgUnits, [
-            "id",
-            datum.orgUnit
-          ]),
+          orgUnit: find(orgUnits, ["id", datum.orgUnit]),
           dataItem: layer.dataItem,
           name: layer?.name ?? layer?.dataItem?.displayName ?? layer.id
         }))
@@ -227,8 +221,21 @@ function useThematicLayers({
       return [];
     }
   };
+  const refilterLayers = useCallback(
+    async (layers) => {
+      if (!analyticsDataRef.current) return [];
+      const processed = layers.filter((layer) => !layer.data).map((layer) => ({
+        ...layer,
+        name: layer?.name ?? layer?.dataItem?.displayName ?? layer.id,
+        data: sanitizeData(analyticsDataRef.current, layer, activePeriod)
+      }));
+      return sanitizeLegends(processed);
+    },
+    [activePeriod, orgUnits]
+  );
   return {
     sanitizeLayers,
+    refilterLayers,
     loading
   };
 }