@sportsdataverse/sdvplot 0.0.0-stage → 0.2.0

package/dist/react.js

@@ -0,0 +1,522 @@
+"use client";
+import { logoLayer, teamColors } from './chunk-RPVVJY74.js';
+import { trajectoryTube } from './chunk-AMXASQHT.js';
+import { aspect, seasons, imageSource } from './chunk-UL5M6KDE.js';
+import { checkAlpha, logoUrlSync, placeSync, placedName } from './chunk-7ULOCCFL.js';
+import { loadLeague, resolveSync, getLeagueSync, loadGsis, headshotUrl, palette, HEADSHOT_ASPECT, checkLeague } from './chunk-ZAEQXFJM.js';
+import './chunk-J6R2LEJ7.js';
+import { OptionalDependencyError, warn, UnsupportedTargetError, InputError } from './chunk-E7G7VSLV.js';
+import { lazy, useId, useMemo, createElement, useEffect, Suspense, useState, useRef, useSyncExternalStore, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var missing = (peer, e) => new OptionalDependencyError(
+  `SurfaceBackdrop needs the optional peer ${peer}, which could not be loaded: pnpm add ${peer}`,
+  { cause: e }
+);
+var numeric = (d) => d !== void 0 && d.length === 2 && d.every((v) => typeof v === "number" && Number.isFinite(v)) && d[1] !== d[0];
+function linear(scale, d0, d1, dir) {
+  if (scale === void 0) return true;
+  const [a, m, b] = [d0, (d0 + d1) / 2, d1].map((v) => Number(scale(v)));
+  if (![a, m, b].every((v) => Number.isFinite(v))) return true;
+  return dir * (b - a) > 0 && Math.abs(m - (a + b) / 2) < 0.5;
+}
+var Backdrop = lazy(async () => {
+  const [rc, surfaces, svg] = await Promise.all([
+    import('recharts').catch((e) => {
+      throw missing("recharts", e);
+    }),
+    import('./surfaces-MIG7HOFU.js').catch((e) => {
+      throw missing("@sportsdataverse/sporty", e);
+    }),
+    import('@sportsdataverse/sporty/svg').catch((e) => {
+      throw missing("@sportsdataverse/sporty", e);
+    })
+  ]);
+  const noScale = () => void 0;
+  const useXScale = rc.useXAxisScale ?? noScale;
+  const useYScale = rc.useYAxisScale ?? noScale;
+  function Drawn({ league, xAxisId, yAxisId, ...o }) {
+    const area = rc.usePlotArea();
+    const xd = rc.useXAxisDomain(xAxisId);
+    const yd = rc.useYAxisDomain(yAxisId);
+    const sx = useXScale(xAxisId);
+    const sy = useYScale(yAxisId);
+    const clip = `sdv-surface-${useId().replace(/[^\w-]/g, "")}`;
+    const key = JSON.stringify(o, (_k, v) => typeof v === "bigint" ? `${v}n` : v);
+    const scene = useMemo(() => surfaces.surfaceScene(league, o), [league, key]);
+    if (area === void 0 || xd === void 0 || yd === void 0) return null;
+    if (!numeric(xd) || !numeric(yd)) {
+      warn(
+        "react:SurfaceBackdrop:domain",
+        `SurfaceBackdrop draws nothing: both axes must be type="number" with a numeric domain in the surface's units (got x ${JSON.stringify(xd)}, y ${JSON.stringify(yd)})`
+      );
+      return null;
+    }
+    const [dx0, dx1] = xd;
+    const [dy0, dy1] = yd;
+    if (!linear(sx, dx0, dx1, 1) || !linear(sy, dy0, dy1, -1)) {
+      warn(
+        "react:SurfaceBackdrop:scale",
+        "SurfaceBackdrop draws nothing on a reversed or log axis: use linear, unreversed number axes"
+      );
+      return null;
+    }
+    const fx = (v) => area.x + (v - dx0) / (dx1 - dx0) * area.width;
+    const fy = (v) => area.y + (dy1 - v) / (dy1 - dy0) * area.height;
+    const [x0, y0, x1, y1] = scene.bbox;
+    const width = fx(x1) - fx(x0);
+    const height = fy(y0) - fy(y1);
+    if (!(width > 0 && height > 0)) {
+      warn(
+        "react:SurfaceBackdrop:empty",
+        `SurfaceBackdrop draws nothing: the surface spans ${width} x ${height} px`
+      );
+      return null;
+    }
+    const drawn = svg.toSVG(scene, { width, height }).replace("<svg ", `<svg x="${fx(x0)}" y="${fy(y1)}" preserveAspectRatio="none" `);
+    return /* @__PURE__ */ jsxs("g", { "data-sdv-surface": "", className: "sdv-surface", children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clip, children: /* @__PURE__ */ jsx("rect", { x: area.x, y: area.y, width: area.width, height: area.height }) }) }),
+      /* @__PURE__ */ jsx("g", { clipPath: `url(#${clip})`, dangerouslySetInnerHTML: { __html: drawn } })
+    ] });
+  }
+  return { default: Drawn };
+});
+function SurfaceBackdrop(props) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Backdrop, { ...props }) });
+}
+var LAYERS = ["grid", "axes", "labels", "lines", "points"];
+var Chart = lazy(async () => {
+  const m = await import('@nivo/bump').catch((e) => {
+    throw new OptionalDependencyError(
+      "LogoBump needs the optional peer @nivo/bump, which could not be loaded: pnpm add @nivo/bump @nivo/core",
+      { cause: e }
+    );
+  });
+  const Drawn = (p) => createElement(
+    p.width === void 0 || p.height === void 0 ? m.ResponsiveBump : m.Bump,
+    p
+  );
+  return { default: Drawn };
+});
+function LogoBump({
+  league,
+  season,
+  idSystem,
+  background,
+  logoHeight,
+  at,
+  variant,
+  markType,
+  layers,
+  ...rest
+}) {
+  const teams = rest.data.map((s) => s.id);
+  const key = JSON.stringify([
+    league,
+    season,
+    idSystem,
+    background,
+    logoHeight,
+    at,
+    variant,
+    markType,
+    teams
+  ]);
+  const drawn = useMemo(() => {
+    const o = {
+      league,
+      ...season === void 0 ? {} : { season },
+      ...idSystem === void 0 ? {} : { idSystem }
+    };
+    return {
+      colors: teamColors({ ...o, ...background === void 0 ? {} : { teams, background } }),
+      logos: logoLayer({
+        ...o,
+        ...logoHeight === void 0 ? {} : { height: logoHeight },
+        ...at === void 0 ? {} : { at },
+        ...variant === void 0 ? {} : { variant },
+        ...markType === void 0 ? {} : { markType }
+      })
+    };
+  }, [key]);
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+    Chart,
+    {
+      colors: drawn.colors,
+      ...rest,
+      layers: layers === void 0 ? [...LAYERS, drawn.logos, "mesh"] : [...layers, drawn.logos]
+    }
+  ) });
+}
+var isNum = (v) => typeof v === "number" && Number.isFinite(v);
+function checkSize(size) {
+  if (!(isNum(size) && size > 0))
+    throw new InputError(`size is an image height in px > 0, got ${String(size)}`);
+  if (size < 1)
+    throw new InputError(
+      `size is a height in px, not a fraction of the plot (echarts' \`height\`): got ${size}, which draws a sub-pixel image`
+    );
+  return size;
+}
+function placed(x, y, raw, rows, o) {
+  const season = seasons(rows, o.season);
+  return placeSync([x], [y], [raw], {
+    league: o.league,
+    kind: o.markType ?? "logo",
+    ...season === void 0 ? {} : { season },
+    ...o.variant === void 0 ? {} : { variant: o.variant },
+    ...o.idSystem === void 0 ? {} : { idSystem: o.idSystem }
+  })[0];
+}
+function image(p, o, raw, box, at, extra) {
+  const kind = o.markType ?? "logo";
+  return createElement("image", {
+    ...extra,
+    href: imageSource(p, o.embed),
+    x: box.left,
+    y: box.top,
+    width: box.h * aspect(p),
+    height: box.h,
+    preserveAspectRatio: "xMidYMid meet",
+    role: "img",
+    "aria-label": `${placedName(p, o.league, raw)} ${kind}`,
+    "data-sdv-id": p.id,
+    "data-sdv-kind": kind,
+    "data-sdv-x": String(at.x),
+    "data-sdv-y": String(at.y),
+    "data-sdv-frame": "1"
+  });
+}
+function noBox(props, name, how) {
+  for (const k of ["height", "width"]) if (k in props) throw new InputError(`${name} takes no ${k}: ${how}`);
+}
+function LogoPoint(props) {
+  noBox(
+    props,
+    "LogoPoint",
+    "each logo is as tall as Victory drew the point (twice the scatter's size, in px)"
+  );
+  const alpha = checkAlpha(props.alpha ?? 1);
+  const { x, y, size } = props;
+  if (!(isNum(x) && isNum(y) && isNum(size)))
+    throw new UnsupportedTargetError(
+      "LogoPoint is a VictoryScatter dataComponent: it needs the point's x, y and size, which the scatter hands it"
+    );
+  const row = props.datum ?? {};
+  const raw = row[props.team];
+  if (raw === void 0 || raw === null) {
+    warn(
+      `victory:LogoPoint:no-team:${props.team}`,
+      `LogoPoint: a datum has no ${props.team} field: nothing drawn`
+    );
+    return null;
+  }
+  if (!(size > 0)) {
+    warn(
+      `victory:LogoPoint:size:${size}`,
+      `LogoPoint: Victory drew a point of size ${size} (px): nothing drawn`
+    );
+    return null;
+  }
+  const p = placed(x, y, raw, [row], props);
+  if (p === void 0) return null;
+  const h = 2 * size;
+  const w = h * aspect(p);
+  return image(
+    p,
+    props,
+    raw,
+    { left: x - w / 2, top: y - h / 2, h },
+    { x, y },
+    { ...props.events, ...alpha === 1 ? {} : { opacity: alpha } }
+  );
+}
+var Label = lazy(async () => {
+  const m = await import('victory').catch((e) => {
+    throw new OptionalDependencyError(
+      "LogoTick needs the optional peer victory to draw a label as text, and it could not be loaded: pnpm add victory",
+      { cause: e }
+    );
+  });
+  return { default: m.VictoryLabel };
+});
+function LogoTick(props) {
+  noBox(props, "LogoTick", "size is the logo's height in px (Victory hands a tick label no plot height)");
+  const h = checkSize(props.size ?? 24);
+  const { league, season, variant, idSystem, markType, embed, size, ...label } = props;
+  const x = isNum(props.x) ? props.x : 0;
+  const y = isNum(props.y) ? props.y : 0;
+  const raw = typeof props.text === "string" || typeof props.text === "number" ? props.text : void 0;
+  const p = raw === void 0 ? void 0 : placed(x, y, raw, [], props);
+  if (p === void 0)
+    return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Label, { ...label }) });
+  const w = h * aspect(p);
+  const anchor = props.textAnchor ?? "start";
+  const vertical = props.verticalAnchor ?? "middle";
+  const left = anchor === "end" ? x - w : anchor === "middle" ? x - w / 2 : x;
+  const top = vertical === "end" ? y - h : vertical === "middle" ? y - h / 2 : y;
+  return image(p, props, raw, { left, top, h }, { x, y }, {});
+}
+async function peers(who) {
+  try {
+    return await Promise.all([import('three'), import('@react-three/fiber')]);
+  } catch (e) {
+    throw new OptionalDependencyError(
+      `${who} needs the optional peers three and @react-three/fiber, which could not be loaded: pnpm add three @react-three/fiber`,
+      { cause: e }
+    );
+  }
+}
+function meshOf(THREE, fiber) {
+  return function Drawn({ buffers, material, renderOrder }) {
+    const invalidate = fiber.useThree((s) => s.invalidate);
+    const geometry = useMemo(() => {
+      const g = new THREE.BufferGeometry();
+      g.setAttribute("position", new THREE.BufferAttribute(buffers.positions, 3));
+      if (buffers.colors !== void 0) g.setAttribute("color", new THREE.BufferAttribute(buffers.colors, 4));
+      if (buffers.normals !== void 0)
+        g.setAttribute("normal", new THREE.BufferAttribute(buffers.normals, 3));
+      g.setIndex(new THREE.BufferAttribute(buffers.indices, 1));
+      g.computeBoundingSphere();
+      return g;
+    }, [buffers]);
+    useEffect(() => {
+      invalidate();
+      return () => geometry.dispose();
+    }, [geometry, invalidate]);
+    return createElement("mesh", { geometry, renderOrder }, createElement("meshBasicMaterial", material));
+  };
+}
+function loaded(league) {
+  checkLeague(league);
+  try {
+    getLeagueSync(league);
+    return true;
+  } catch {
+    return false;
+  }
+}
+var SurfaceBody = lazy(async () => {
+  const [[THREE, fiber], { surfaceMesh }] = await Promise.all([
+    peers("Surface3D"),
+    import('./surface-TR7YFJW3.js').catch((e) => {
+      throw new OptionalDependencyError(
+        "Surface3D needs the optional peer @sportsdataverse/sporty, which could not be loaded: pnpm add @sportsdataverse/sporty",
+        { cause: e }
+      );
+    })
+  ]);
+  const Drawn = meshOf(THREE, fiber);
+  const material = {
+    vertexColors: true,
+    transparent: true,
+    depthWrite: false,
+    toneMapped: false,
+    side: THREE.DoubleSide
+  };
+  function Body({ sport, league, options, renderOrder = -1 }) {
+    const key = JSON.stringify([sport, league, options]);
+    const buffers = useMemo(() => surfaceMesh(sport, league, options), [key]);
+    return createElement(Drawn, { buffers, material, renderOrder });
+  }
+  return { default: Body };
+});
+function Surface3D(props) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(SurfaceBody, { ...props }) });
+}
+var TubeBody = lazy(
+  async () => {
+    const [THREE, fiber] = await peers("Trajectory");
+    const Drawn = meshOf(THREE, fiber);
+    function Body({ tube, renderOrder }) {
+      const material = useMemo(() => ({ color: tube.color, toneMapped: false }), [tube.color]);
+      return createElement(Drawn, { buffers: tube, material, renderOrder });
+    }
+    return { default: Body };
+  }
+);
+function Trajectory({ points, renderOrder = 0, ...o }) {
+  const league = o.color === void 0 ? o.league : void 0;
+  const ready = league === void 0 || loaded(league);
+  const [, loadedNow] = useState(0);
+  useEffect(() => {
+    if (ready || league === void 0) return;
+    let live = true;
+    loadLeague(league).then(
+      () => live && loadedNow((n) => n + 1),
+      () => {
+      }
+      // a league that cannot load leaves the tube undrawn, as it is now
+    );
+    return () => {
+      live = false;
+    };
+  }, [league, ready]);
+  const key = JSON.stringify([points, o, ready]);
+  const tube = useMemo(() => ready ? trajectoryTube(points, o) : null, [key]);
+  if (tube === null) {
+    warn(
+      `three:Trajectory:unloaded:${league}`,
+      `<Trajectory team> draws nothing until league ${league} is loaded: await loadLeague("${league}") first (on a server, before rendering)`
+    );
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(TubeBody, { tube, renderOrder }) });
+}
+function TeamLogo({
+  team,
+  league,
+  season,
+  variant,
+  markType,
+  size,
+  alt,
+  ...imgProps
+}) {
+  const [mark, setMark] = useState();
+  useEffect(() => {
+    let live = true;
+    (async () => {
+      await loadLeague(league);
+      if (!live) return;
+      const o = {};
+      if (season !== void 0) o.season = season;
+      if (variant !== void 0) o.variant = variant;
+      if (markType !== void 0) o.markType = markType;
+      const src = logoUrlSync(team, league, o);
+      const id = resolveSync(team, league, { season });
+      const name = getLeagueSync(league).teams.find((t) => t.team_id === id)?.name ?? "";
+      setMark(src === void 0 ? void 0 : { src, name });
+    })().catch(() => {
+      if (live) setMark(void 0);
+    });
+    return () => {
+      live = false;
+    };
+  }, [team, league, season, variant, markType]);
+  if (mark === void 0) return null;
+  return /* @__PURE__ */ jsx("img", { src: mark.src, alt: alt ?? mark.name, height: size, ...imgProps });
+}
+function Wordmark(props) {
+  return /* @__PURE__ */ jsx(TeamLogo, { ...props, markType: "wordmark" });
+}
+var initialsOf = (name) => name.split(" ").map((w) => Array.from(w)[0] ?? "").join("").slice(0, 3);
+var useClientLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+function Headshot({
+  playerId,
+  league,
+  idSystem,
+  height = 60,
+  alt,
+  fallback = "none",
+  name,
+  ...imgProps
+}) {
+  const [, setGsisReady] = useState(false);
+  const [failed, setFailed] = useState();
+  const img = useRef(null);
+  useEffect(() => {
+    if (idSystem !== "gsis") return;
+    let live = true;
+    loadGsis().then(
+      () => {
+        if (live) setGsisReady(true);
+      },
+      () => {
+      }
+    );
+    return () => {
+      live = false;
+    };
+  }, [idSystem]);
+  let src;
+  try {
+    src = headshotUrl(playerId, league, idSystem === void 0 ? {} : { idSystem });
+  } catch {
+    src = void 0;
+  }
+  const label = alt ?? (name || void 0) ?? "Player headshot";
+  const width = Math.round(height * HEADSHOT_ASPECT);
+  useClientLayoutEffect(() => {
+    if (img.current?.complete && img.current.naturalWidth === 0) setFailed(src);
+  }, [src]);
+  if (src === void 0 || fallback === "initials" && src === failed) {
+    if (fallback !== "initials" || name === void 0) return null;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...label === "" ? { "aria-hidden": true } : { role: "img", "aria-label": label },
+        className: imgProps.className,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width,
+          height,
+          background: "var(--sdv-line, #e2e2e2)",
+          color: "var(--sdv-muted, #525252)",
+          ...imgProps.style
+        },
+        children: initialsOf(name)
+      }
+    );
+  }
+  const shown = src;
+  return (
+    // biome-ignore lint/a11y/useAltText: alt always defaults to a string; imgProps cannot carry it
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref: img,
+        src: shown,
+        alt: label,
+        height,
+        width,
+        ...imgProps,
+        onError: (e) => {
+          setFailed(shown);
+          imgProps.onError?.(e);
+        }
+      }
+    )
+  );
+}
+function useTeamColors(league, { which } = {}) {
+  const [colors, setColors] = useState();
+  useEffect(() => {
+    let live = true;
+    setColors(void 0);
+    palette(league, void 0, which === void 0 ? {} : { which }).then((c) => {
+      if (live) setColors(c);
+    }).catch(() => {
+      if (live) setColors(void 0);
+    });
+    return () => {
+      live = false;
+    };
+  }, [league, which]);
+  return colors;
+}
+function useResolve(league) {
+  const [ready, setReady] = useState();
+  useEffect(() => {
+    let live = true;
+    setReady(void 0);
+    loadLeague(league).then(() => {
+      if (live) setReady(league);
+    }).catch(() => {
+      if (live) setReady(void 0);
+    });
+    return () => {
+      live = false;
+    };
+  }, [league]);
+  return ready === void 0 ? void 0 : (value, opts) => resolveSync(value, ready, opts);
+}
+function useSelection(store) {
+  return useSyncExternalStore(store.subscribe, store.getState, store.getState);
+}
+
+export { Headshot, LogoBump, LogoPoint, LogoTick, Surface3D, SurfaceBackdrop, TeamLogo, Trajectory, Wordmark, useResolve, useSelection, useTeamColors };
+//# sourceMappingURL=react.js.map
+//# sourceMappingURL=react.js.map