@hybridcore/ui 1.5.90 → 1.6.1

package/dist/components/raster-grid-map/components/controls/index.js

@@ -0,0 +1,12 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { Container as t, Button as r } from "./styled.js";
+import { I as s, a as l } from "../../../../IconPlus-yPkff_Vj.js";
+function m({ mapRef: n }) {
+  return n ? /* @__PURE__ */ i(t, { children: [
+    /* @__PURE__ */ o(r, { onClick: n.zoomIn, children: /* @__PURE__ */ o(s, { size: 18 }) }),
+    /* @__PURE__ */ o(r, { onClick: n.zoomOut, children: /* @__PURE__ */ o(l, { size: 18 }) })
+  ] }) : null;
+}
+export {
+  m as Controls
+};

package/dist/components/raster-grid-map/components/controls/styled.js

@@ -0,0 +1,34 @@
+import { styled as a, Box as r, IconButton as n } from "@mui/material";
+const t = a(r, {
+  name: "HCRasterGridMapControls",
+  slot: "Root"
+})(({ theme: o }) => ({
+  position: "absolute",
+  left: o.spacing(1),
+  bottom: o.spacing(1),
+  display: "flex",
+  flexDirection: "column",
+  gap: o.spacing(0.5)
+})), s = a(n, {
+  name: "HCRasterGridMapControls",
+  slot: "Button"
+})(({ theme: o }) => ({
+  borderRadius: o.shape.borderRadius,
+  backgroundColor: o.palette.background.paper,
+  border: "1px solid",
+  borderColor: o.palette.divider,
+  width: o.spacing(3),
+  height: o.spacing(3),
+  padding: o.spacing(0.5),
+  ".MuiSvgIcon-root": {
+    width: o.spacing(2),
+    height: o.spacing(2)
+  },
+  "&:hover": {
+    backgroundColor: o.palette.background.default
+  }
+}));
+export {
+  s as Button,
+  t as Container
+};

package/dist/components/raster-grid-map/components/legend/index.js

@@ -0,0 +1,14 @@
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { Typography as l } from "@mui/material";
+import { FlexCol as e } from "../../../flex-col/index.js";
+import { FlexRow as p } from "../../../flex-row/index.js";
+import { Container as t, ColorBox as x } from "./styled.js";
+function a({ heatScale: m }) {
+  return !m || m.bins.length === 0 ? null : /* @__PURE__ */ o(t, { children: /* @__PURE__ */ o(e, { children: m.bins.map((r, n) => /* @__PURE__ */ i(p, { gap: 0.5, children: [
+    /* @__PURE__ */ o(x, { bgcolor: r.color }),
+    /* @__PURE__ */ o(l, { variant: "overline", children: r.min !== r.max ? r.min + "-" + r.max : r.min })
+  ] }, n)) }) });
+}
+export {
+  a as Legend
+};

package/dist/components/raster-grid-map/components/legend/styled.js

@@ -0,0 +1,21 @@
+import { styled as t, Paper as a, Box as n } from "@mui/material";
+const i = t(a, {
+  name: "HCRasterGridMapLegend",
+  slot: "Root"
+})(({ theme: o }) => ({
+  position: "absolute",
+  right: o.spacing(1),
+  bottom: o.spacing(1),
+  padding: o.spacing(0.5),
+  backgroundColor: o.palette.background.default
+})), s = t(n, {
+  name: "HCRasterGridMapLegend",
+  slot: "ColorBox"
+})(() => ({
+  height: 18,
+  width: 24
+}));
+export {
+  s as ColorBox,
+  i as Container
+};

package/dist/components/raster-grid-map/helpers.js

@@ -0,0 +1,190 @@
+import { DEFAULT_VIRIDIS_COOL as A } from "../charts/_common/utils.js";
+const E = A;
+function H(r) {
+  const { min: i, max: o, count: n, mode: t } = r;
+  if (n <= 0) return [];
+  if (i > o) return [];
+  if (i === o)
+    return Array.from({ length: n }, () => ({ min: i, max: o }));
+  const c = [];
+  if (t === "linear") {
+    const e = (o - i) / n;
+    for (let l = 0; l <= n; l++) c.push(i + e * l);
+  } else {
+    const e = Math.max(1, i), l = Math.log10(e), f = (Math.log10(o) - l) / n;
+    for (let M = 0; M <= n; M++) c.push(Math.pow(10, l + f * M));
+    c[0] = i;
+  }
+  c[c.length - 1] = o;
+  const u = [];
+  let m = i - 1;
+  for (let e = 0; e < n; e++) {
+    const l = m + 1;
+    let a = e === n - 1 ? o : Math.floor(c[e + 1]);
+    if (a = Math.max(a, l), a = Math.min(a, o), u.push({ min: l, max: a }), m = a, m >= o) {
+      for (let f = e + 1; f < n; f++) u.push({ min: o, max: o });
+      break;
+    }
+  }
+  return u;
+}
+function p(r, i, o) {
+  return Math.min(o, Math.max(i, Math.trunc(r)));
+}
+function k(r, i, o) {
+  const n = r.map((t) => ({ ...t, min: Math.trunc(t.min), max: Math.trunc(t.max) }));
+  if (n.length === 0) return n;
+  n.sort((t, c) => t.min - c.min), n[0].min = p(n[0].min, i, o), n[0].max = p(n[0].max, n[0].min, o);
+  for (let t = 1; t < n.length; t++)
+    n[t].min = Math.max(n[t].min, n[t - 1].max + 1), n[t].min = p(n[t].min, i, o), n[t].max = p(n[t].max, n[t].min, o);
+  return n[n.length - 1].max = o, n;
+}
+function w(r, i, o) {
+  if (i === 1) return r[r.length - 1];
+  const n = o / (i - 1), t = Math.round(n * (r.length - 1));
+  return r[Math.min(r.length - 1, Math.max(0, t))];
+}
+function D(r) {
+  const { palette: i, colorsCount: o, positives: n, lowCut: t, highCut: c, middleMode: u = "log" } = r;
+  if (o < 1) throw new Error("colorsCount must be >= 1");
+  if (i.length < o) throw new Error("palette has fewer colors than colorsCount");
+  const m = n.filter((x) => Number.isFinite(x) && x > 0).map((x) => Math.trunc(x));
+  if (m.length === 0)
+    return Array.from({ length: o }, (x, C) => ({
+      index: C,
+      color: w(i, o, C),
+      min: 0,
+      max: 0
+    }));
+  const e = Math.min(...m), l = Math.max(...m), a = t == null ? void 0 : p(t, e, l), f = c == null ? void 0 : p(c, e, l), M = a ?? e, d = f ?? l, N = Math.min(M, d), b = Math.max(M, d), s = a != null ? 1 : 0, h = f != null ? 1 : 0, I = Math.max(0, o - s - h), P = [];
+  let g = 0;
+  s && (P.push({
+    index: g,
+    color: w(i, o, g),
+    min: e,
+    max: N
+  }), g++);
+  const B = s ? N + 1 : e, L = h ? b - 1 : l;
+  if (I > 0 && B <= L) {
+    const x = H({
+      min: B,
+      max: L,
+      count: I,
+      mode: u
+    });
+    for (let C = 0; C < x.length; C++)
+      P.push({
+        index: g,
+        color: w(i, o, g),
+        min: x[C].min,
+        max: x[C].max
+      }), g++;
+  } else if (I > 0)
+    for (let x = 0; x < I; x++)
+      P.push({
+        index: g,
+        color: w(i, o, g),
+        min: b,
+        max: b
+      }), g++;
+  return h && (P.push({
+    index: g,
+    color: w(i, o, g),
+    min: b,
+    max: l
+  }), g++), k(P, e, l);
+}
+function _(r) {
+  const { palette: i, colorsCount: o, positives: n } = r;
+  if (n.length === 0) return [];
+  const t = n[0], c = n[n.length - 1];
+  if (t === c) {
+    const u = w(i, o, o - 1);
+    return [{ index: o, color: u, min: t, max: c }];
+  }
+  return D(r);
+}
+function v(r) {
+  const i = [], o = r.result ?? [];
+  for (const n of o)
+    if (n !== null)
+      for (const t of n)
+        t == null || Number.isNaN(t) || t > 0 && i.push(Math.trunc(t));
+  return i.sort((n, t) => n - t), i;
+}
+function y(r, i) {
+  if (r.length === 0) return 0;
+  const o = Math.min(1, Math.max(0, i)), n = (r.length - 1) * o, t = Math.floor(n), c = Math.ceil(n);
+  if (t === c) return r[t];
+  const u = n - t;
+  return r[t] * (1 - u) + r[c] * u;
+}
+function z(r, i) {
+  const { lowPct: o = 0.8, highPct: n = 0.99, minLowCut: t = 1, minGap: c = 1 } = i ?? {};
+  if (r.length === 0) return { lowCut: 0, highCut: 0 };
+  const u = r[0], m = r[r.length - 1];
+  if (u === m) return { lowCut: u, highCut: m };
+  let e = Math.floor(y(r, o)), l = Math.ceil(y(r, n));
+  return e = p(e, Math.max(t, u), m), l = p(l, u, m), l < e + c && (e + c <= m ? l = e + c : e = Math.max(u, m - c)), { lowCut: e, highCut: l };
+}
+function O(r, i) {
+  const {
+    mode: o = "log",
+    palette: n = [...E].reverse(),
+    nullColor: t = "transparent",
+    zeroColor: c = n[0] ?? "transparent",
+    clamp: u = !0,
+    treatNegativeAsNull: m = !0
+  } = i ?? {};
+  if (!n.length) throw new Error("Palette must have at least 1 color.");
+  const e = r.result ?? [];
+  for (const s of e)
+    if (s !== null)
+      for (const h of s)
+        h == null || Number.isNaN(h) || m && h < 0;
+  const l = v(r), a = l.length > 0, { lowCut: f, highCut: M } = z(l, {
+    lowPct: 0.8,
+    // try 0.7–0.9
+    highPct: 0.99
+    // try 0.97–0.995
+  }), d = _({
+    palette: n,
+    colorsCount: 5,
+    positives: l,
+    lowCut: f,
+    highCut: M,
+    middleMode: "log"
+  }), N = (s) => {
+    if (s == null || Number.isNaN(s) || m && s < 0 || s === 0 || !a) return null;
+    if (u) {
+      if (s <= f) return d[0] ?? null;
+      if (s >= M) return d[d.length - 1] ?? null;
+    }
+    for (const h of d)
+      if (s >= h.min && s <= h.max) return h;
+    return null;
+  };
+  return {
+    mode: o,
+    palette: n,
+    lowCut: f,
+    highCut: M,
+    bins: d,
+    getColor: (s) => {
+      if (s == null || Number.isNaN(s) || m && s < 0) return t;
+      if (s === 0) return c;
+      const h = N(s);
+      return h ? h.color : u ? s < f ? n[0] : n[n.length - 1] : t;
+    },
+    getBin: N,
+    zeroColor: c,
+    nullColor: t
+  };
+}
+export {
+  O as createHeatMapScale,
+  z as deriveDynamicCuts,
+  v as extractPositiveInts,
+  y as percentileSorted,
+  E as viridisCool
+};

package/dist/components/raster-grid-map/index.js

@@ -0,0 +1,38 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { Typography as d } from "@mui/material";
+import { useEffect as l } from "react";
+import { u as h } from "../../index.esm-BLLrbTzY.js";
+import { M as u } from "../../index-kCJ_Zvl8.js";
+import { Controls as R } from "./components/controls/index.js";
+import { Legend as M } from "./components/legend/index.js";
+import { useRasterGridMapLogic as g } from "./logic.js";
+import { RasterGridMapRoot as z, RasterGridMapHeader as G, RasterGridMapContent as x } from "./styled.js";
+function D(o) {
+  const { refs: r, state: m, actions: i, ownerState: t, sx: f, other: p } = g(o), { width: a, height: s, ref: c } = h();
+  return l(() => (a && s && i.onMapResize(), () => {
+  }), [a, s]), /* @__PURE__ */ n(z, { ownerState: t, sx: f, ref: c, ...p, children: [
+    /* @__PURE__ */ e(G, { ownerState: t, children: /* @__PURE__ */ e(d, { variant: "h3", children: o.title }) }),
+    /* @__PURE__ */ n(x, { ownerState: t, children: [
+      /* @__PURE__ */ e(
+        u,
+        {
+          id: r.mapId.current,
+          ref: r.mapRef,
+          center: { latitude: 0, longitude: 0 },
+          zoom: 3,
+          options: {
+            cssPosition: "absolute",
+            controls: { zoom: !1 },
+            interactions: { mouseWheelZoom: !1 }
+          },
+          onInit: i.onInit
+        }
+      ),
+      /* @__PURE__ */ e(M, { heatScale: m.heatScale }),
+      /* @__PURE__ */ e(R, { mapRef: r.mapRef.current })
+    ] })
+  ] });
+}
+export {
+  D as RasterGridMap
+};

package/dist/components/raster-grid-map/logic.js

@@ -0,0 +1,172 @@
+import { useThemeProps as gt, useTheme as xt } from "@mui/material";
+import { uniqueId as ht } from "lodash";
+import { Feature as yt } from "ol";
+import { b as wt, P as St, f as k, g as Tt } from "../../Source-BSZST_GH.js";
+import { V as Ct } from "../../Vector-BmuhQO4p.js";
+import { V as Lt } from "../../Vector-DfTqQEln.js";
+import { S as A, T as vt, F, I as Mt, a as bt, C as Xt } from "../../Text-ChJRuaD8.js";
+import { useRef as m, useState as q, useEffect as O } from "react";
+import { DEFAULT_VIRIDIS_COOL as Yt } from "../charts/_common/utils.js";
+import { createMapboxLayer as Gt } from "../map/helpers/mapbox.js";
+import { createHeatMapScale as Rt } from "./helpers.js";
+const Et = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='93'%20height='93'%20viewBox='0%200%2093%2093'%3e%3ccircle%20id='Ellipse_748'%20data-name='Ellipse%20748'%20cx='46.5'%20cy='46.5'%20r='46.5'%20fill='%23fff'%20opacity='0.925'/%3e%3c/svg%3e", Ft = 0.25, It = (r) => {
+  const u = r.getGeometry(), a = r.get("icon"), p = r.get("iconColor"), h = r.get("iconTextColor"), y = r.get("showText"), w = r.get("title"), S = r.get("scale");
+  return u && u.getType() === "Point" && a ? new A({
+    ...y && {
+      text: new vt({
+        text: w,
+        font: "10px sans-serif",
+        fill: new F({ color: h ?? "#ddd" })
+      })
+    },
+    image: new Mt({
+      anchor: [0.5, 0.5],
+      src: a,
+      scale: S ?? Ft,
+      color: p ?? "#b32f5b"
+    }),
+    zIndex: 2
+  }) : new A({
+    fill: new F({ color: "rgba(255, 255, 255, 0.25)" }),
+    stroke: new bt({ color: "#3069AA", width: 2 }),
+    image: new Xt({
+      radius: 5,
+      fill: new F({ color: "#444" })
+    })
+  });
+}, Ut = (r) => {
+  const u = gt({ props: r, name: "HCRasterGridMap" }), {
+    data: a,
+    payload: p,
+    onPayloadUpdate: h,
+    accessToken: y,
+    palette: w = Yt,
+    sx: S,
+    ...U
+  } = u, T = xt(), I = m(ht("map-")), o = m(null), l = m(null), C = m(null), s = m(null), L = m(), [B, W] = q(!1), [Z, N] = q(null), z = () => {
+    let t = 3;
+    if (o.current) {
+      const e = o.current.getZoomLevel() || 3;
+      e > 11 ? t = 6 : e > 9 ? t = 5 : e > 5 && (t = 4);
+    }
+    return t;
+  }, j = () => {
+    var P, D, H;
+    if (!B || !o.current || !a) return;
+    const { result: t, rowCount: e, columnCount: n, minX: c, minY: i, maxX: d, maxY: f } = a, v = [c, i, d, f], [nt, rt] = Tt(v), M = nt / n, b = rt / e, ct = ((P = o.current) == null ? void 0 : P.getZoomLevel()) || 3;
+    (D = C.current) == null || D.clear();
+    const X = Rt(a, {
+      palette: [...w].reverse(),
+      mode: "log",
+      nullColor: "transparent",
+      zeroColor: "transparent"
+    });
+    if (N(X), t !== null)
+      for (let g = 0; g < e; g++) {
+        const V = t[g];
+        if (V !== null)
+          for (let x = 0; x < n; x++) {
+            const Y = V[x];
+            if (Y < 2) continue;
+            const G = c + x * M, R = i + (e - g - 1) * b, at = G + M, st = R + b, it = G + M / 2, lt = R + b / 2, mt = wt(
+              [it, lt],
+              "EPSG:4326",
+              "EPSG:3857"
+            ), ut = {
+              bottomLeft: { latitude: R, longitude: G },
+              topRight: { latitude: st, longitude: at }
+            }, pt = ct / z(), E = X.getBin(Y), dt = (((E == null ? void 0 : E.index) || 0) + 1) * 0.1, ft = new yt({
+              geometry: new St(mt),
+              icon: Et,
+              iconColor: X.getColor(Y),
+              iconTextColor: "#fff",
+              showText: pt > 1.5,
+              boundingBox: ut,
+              scale: dt
+            });
+            (H = C.current) == null || H.addFeature(ft);
+          }
+      }
+  }, J = () => {
+    let t = {
+      gridLevel: z(),
+      minX: -180,
+      minY: -180,
+      maxX: 180,
+      maxY: 180
+    };
+    if (o.current) {
+      const e = o.current.getBoundingBox();
+      t = {
+        ...t,
+        minX: e.bottomLeft.longitude,
+        minY: e.bottomLeft.latitude,
+        maxX: e.topRight.longitude,
+        maxY: e.topRight.latitude
+      };
+    }
+    return t;
+  }, _ = () => {
+    const t = {
+      ...p,
+      heatGridMapFilter: J()
+    };
+    h(t);
+  }, K = () => {
+    L.current && clearTimeout(L.current), L.current = setTimeout(() => {
+      var t;
+      (t = o.current) == null || t.updateSize(), l.current && l.current.map.resize();
+    }, 100);
+  }, Q = () => {
+    var t, e;
+    (t = o.current) == null || t.on("movestart", () => {
+      s.current && (clearTimeout(s.current), s.current = null);
+    }), (e = o.current) == null || e.on("moveend", () => {
+      s.current && (clearTimeout(s.current), s.current = null), s.current = setTimeout(_, 500);
+    });
+  };
+  function $(t) {
+    const [e, n] = k([t.minX, t.minY]), [c, i] = k([t.maxX, t.maxY]);
+    return [e, n, c, i];
+  }
+  const tt = () => {
+    var d, f;
+    const t = T.palette.mode === "light" ? "mapbox://styles/mapbox/light-v11" : "mapbox://styles/mapbox/dark-v11", e = Gt({
+      id: I.current,
+      center: [0, 0],
+      style: t,
+      accessToken: y
+    });
+    (d = o.current) == null || d.addLayer(e.layer), l.current = e;
+    const n = new Lt(), c = new Ct({
+      source: n,
+      style: It
+    });
+    (f = o.current) == null || f.addLayer(c), C.current = n, W(!0), Q(), _();
+    const { heatGridMapFilter: i } = p;
+    if (i && o.current) {
+      const v = $(i);
+      o.current.centerToExtent(v);
+    }
+  }, et = () => {
+    var n, c;
+    if (!l.current) return;
+    const t = T.palette.mode === "light" ? "mapbox://styles/mapbox/light-v11" : "mapbox://styles/mapbox/dark-v11", e = ((c = (n = l.current.layer.getSource()) == null ? void 0 : n.getMapboxMap) == null ? void 0 : c.call(n)) || l.current.map;
+    e && e.setStyle(t);
+  };
+  O(() => (j(), () => {
+  }), [a, B]), O(() => (et(), () => {
+  }), [T.palette.mode]);
+  const ot = { ...u };
+  return {
+    refs: { mapRef: o, mapId: I },
+    state: { heatScale: Z },
+    actions: { onInit: tt, onMapResize: K },
+    ownerState: ot,
+    sx: S,
+    other: U
+  };
+};
+export {
+  Ut as useRasterGridMapLogic
+};

package/dist/components/raster-grid-map/styled.js

@@ -0,0 +1,32 @@
+import { styled as o, Paper as r, Box as t } from "@mui/material";
+const i = o(r, {
+  name: "HCRasterGridMap",
+  slot: "Root",
+  shouldForwardProp: (e) => e !== "ownerState"
+})(() => ({
+  height: "100%",
+  display: "flex",
+  flexDirection: "column"
+})), n = o(t, {
+  name: "HCRasterGridMap",
+  slot: "Header",
+  shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+  flex: "0 0 auto",
+  padding: e.spacing(1.25, 2)
+})), s = o(t, {
+  name: "HCRasterGridMap",
+  slot: "Content",
+  shouldForwardProp: (e) => e !== "ownerState"
+})(() => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  flex: "1 1 auto",
+  minHeight: 0
+}));
+export {
+  s as RasterGridMapContent,
+  n as RasterGridMapHeader,
+  i as RasterGridMapRoot
+};