@jorgerdz/timeview 0.1.0

package/src/timeview/LaneCalendar.tsx

@@ -0,0 +1,496 @@
+// LaneCalendar.tsx — week-grid projection of a TimeDataset.
+//
+// Weeks are rows, days are columns. Intervals render as chips spanning day
+// cells and split across week boundaries; milestones render as hollow diamonds.
+
+import { useMemo, useState } from "react";
+import { DAY_MS, domainOf, fmt } from "./core/time";
+import { packLanes } from "./core/intervals";
+import { startOfDayUTC, tvDayCell, tvGridWeeks, tvSplitInterval } from "./core/calendar";
+import type { CalendarIntervalSegment, CalendarWeek } from "./core/calendar";
+import { colorMap, labelName, mix } from "./core/labels";
+import { Caption } from "./shared/Caption";
+import { EmptyState } from "./shared/EmptyState";
+import { Legend } from "./shared/Legend";
+import { Tooltip } from "./shared/Tooltip";
+import { useMeasuredWidth } from "./shared/useMeasuredWidth";
+import type { Density, LaneCalendarSpec, LaneMode, TimeDataset, TimeEvent, TimeInterval } from "./types";
+
+export interface LaneCalendarProps {
+  /** schema `timeview.dataset.v1` */
+  dataset: TimeDataset;
+  /** calendar projection options (lanes, density, legend, caption, today...) */
+  spec: LaneCalendarSpec;
+  /** colors mapped to `dataset.labels` by index */
+  palette: string[];
+}
+
+const DOW = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const DOW_SHORT = ["M", "T", "W", "T", "F", "S", "S"];
+
+interface DensitySpec {
+  pad: number;
+  headH: number;
+  laneH: number;
+  milestoneH: number;
+  vgap: number;
+  chip: number;
+  dot: number;
+  diamond: number;
+}
+
+const DENS: Record<Density, DensitySpec> = {
+  comfortable: { pad: 22, headH: 30, laneH: 26, milestoneH: 26, vgap: 5, chip: 12.5, dot: 7, diamond: 11 },
+  compact: { pad: 16, headH: 25, laneH: 21, milestoneH: 22, vgap: 4, chip: 11.5, dot: 6, diamond: 10 },
+};
+
+type ModelInterval = TimeInterval & { _s: number; _e: number; _lane: number };
+type ModelEvent = TimeEvent & { _t: number };
+type Segment = CalendarIntervalSegment & { iv: ModelInterval };
+type WeekModel = { week: CalendarWeek; segs: Segment[]; events: { ev: ModelEvent; col: number }[]; maxLane: number };
+
+interface Model {
+  t0: number;
+  t1: number;
+  weeks: CalendarWeek[];
+  perWeek: WeekModel[];
+  intervals: ModelInterval[];
+  events: ModelEvent[];
+  laneCount: number;
+}
+
+type Hover =
+  | { kind: "interval"; id: string; iv: ModelInterval; c: string; mx: number; my: number }
+  | { kind: "event"; id: string; ev: ModelEvent; c: string; mx: number; my: number };
+
+function resolveToday(today: LaneCalendarSpec["today"]): number | null {
+  if (today == null) return null;
+  if (today === "auto") {
+    const now = new Date();
+    return Date.UTC(now.getFullYear(), now.getMonth(), now.getDate());
+  }
+  return startOfDayUTC(today);
+}
+
+function buildModel(dataset: TimeDataset, laneMode: LaneMode): Model {
+  const [t0, t1] = domainOf(dataset);
+  const weeks = tvGridWeeks(t0, t1);
+  const intervals: ModelInterval[] = (dataset.intervals || []).map((iv) => ({
+    ...iv,
+    _s: new Date(iv.range.start).getTime(),
+    _e: new Date(iv.range.end).getTime(),
+    _lane: 0,
+  }));
+
+  let laneCount: number;
+  if (laneMode === "category") {
+    const idx: Record<string, number> = {};
+    (dataset.labels || []).forEach((l, i) => {
+      idx[l.id] = i;
+    });
+    intervals.forEach((iv) => {
+      iv._lane = idx[iv.labelIds?.[0] || ""] ?? 0;
+    });
+    laneCount = Math.max(1, (dataset.labels || []).length);
+  } else {
+    laneCount = Math.max(1, packLanes(intervals));
+  }
+
+  const events: ModelEvent[] = (dataset.events || []).map((e) => ({ ...e, _t: new Date(e.at).getTime() }));
+  const perWeek: WeekModel[] = weeks.map((week) => ({ week, segs: [], events: [], maxLane: -1 }));
+
+  intervals.forEach((iv) => {
+    tvSplitInterval(iv._s, iv._e, weeks).forEach((seg) => {
+      perWeek[seg.wi].segs.push({ ...seg, iv });
+      perWeek[seg.wi].maxLane = Math.max(perWeek[seg.wi].maxLane, iv._lane);
+    });
+  });
+
+  events.forEach((ev) => {
+    const cell = tvDayCell(ev._t, weeks);
+    if (cell) perWeek[cell.wi].events.push({ ev, col: cell.col });
+  });
+
+  return { t0, t1, weeks, perWeek, intervals, events, laneCount };
+}
+
+export function LaneCalendar({ dataset, spec, palette }: LaneCalendarProps) {
+  const [wrapRef, w] = useMeasuredWidth<HTMLDivElement>();
+  const [hover, setHover] = useState<Hover | null>(null);
+  const [sel, setSel] = useState<string | null>(null);
+
+  const density: Density = spec.density || "comfortable";
+  const D = DENS[density] || DENS.comfortable;
+  const laneMode: LaneMode = spec.laneMode || "packed";
+  const showLabels = spec.events?.showLabels !== false;
+  const rawLegendPos = spec.legend?.position || "bottom";
+  const captionPos = spec.caption?.position || "bottom";
+  const today = resolveToday(spec.today);
+  const narrow = w < 560;
+  const ultra = w < 430;
+  const legendPos = rawLegendPos === "right" && narrow ? "bottom" : rawLegendPos;
+  const legendOn = legendPos !== "off" && (dataset.labels || []).length > 0;
+  const captionText = spec.caption?.text || "";
+  const captionOn = captionPos !== "off" && !!captionText;
+
+  const model = useMemo(() => buildModel(dataset, laneMode), [dataset, laneMode]);
+  const cmap = useMemo(() => colorMap(dataset, palette), [dataset, palette]);
+  const isEmpty = model.intervals.length === 0 && model.events.length === 0;
+
+  const legendW = legendPos === "right" ? Math.min(220, Math.max(168, w * 0.2)) : 0;
+  const gridW = Math.max(120, w - D.pad * 2 - (legendW ? legendW + D.pad : 0));
+  const colW = gridW / 7;
+  const inDomain = (d: Date) => {
+    const t = startOfDayUTC(d);
+    return t >= model.t0 && t < model.t1;
+  };
+
+  const track = (e: { clientX: number; clientY: number }) => {
+    const r = wrapRef.current!.getBoundingClientRect();
+    return { mx: e.clientX - r.left, my: e.clientY - r.top };
+  };
+
+  const Weekday = () => (
+    <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", width: gridW, borderBottom: "1px solid var(--tv-grid-week)", marginBottom: 2 }}>
+      {DOW.map((d, i) => (
+        <div
+          key={i}
+          style={{
+            fontFamily: "var(--tv-mono)",
+            fontSize: ultra ? 10 : 11,
+            fontWeight: 600,
+            letterSpacing: ".04em",
+            color: i >= 5 ? "var(--tv-ink-4)" : "var(--tv-ink-3)",
+            textTransform: "uppercase",
+            padding: "0 0 7px 7px",
+            textAlign: "left",
+          }}
+        >
+          {ultra ? DOW_SHORT[i] : d}
+        </div>
+      ))}
+    </div>
+  );
+
+  const WeekRow = ({ pw, last }: { pw: WeekModel; last: boolean }) => {
+    const { week, segs, events, maxLane } = pw;
+    const laneRows = Math.max(0, maxLane + 1);
+    const hasMilestones = events.length > 0;
+    const bodyH = (hasMilestones ? D.milestoneH : 0) + laneRows * D.laneH + (laneRows || hasMilestones ? D.vgap : 0);
+
+    return (
+      <div style={{ position: "relative", width: gridW, borderBottom: last ? "none" : "1px solid var(--tv-grid-week)" }}>
+        <div style={{ position: "absolute", inset: 0, display: "grid", gridTemplateColumns: "repeat(7, 1fr)", pointerEvents: "none" }}>
+          {week.days.map((d, i) => {
+            const out = !inDomain(d);
+            return (
+              <div
+                key={i}
+                style={{
+                  borderLeft: i === 0 ? "none" : "1px solid var(--tv-grid)",
+                  background: out ? "transparent" : i >= 5 ? "var(--tv-rail)" : "transparent",
+                }}
+              />
+            );
+          })}
+        </div>
+
+        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "repeat(7, 1fr)", height: D.headH, alignItems: "start" }}>
+          {week.days.map((d, i) => {
+            const out = !inDomain(d);
+            const isToday = today != null && startOfDayUTC(d) === today;
+            const dayNum = d.getUTCDate();
+            const showMonth = dayNum === 1 || (week.index === 0 && i === 0);
+            return (
+              <div key={i} style={{ display: "flex", alignItems: "baseline", gap: 5, padding: "6px 0 0 7px", minWidth: 0 }}>
+                {showMonth && !ultra && (
+                  <span
+                    style={{
+                      fontFamily: "var(--tv-mono)",
+                      fontSize: 10,
+                      fontWeight: 600,
+                      color: out ? "var(--tv-ink-5)" : "var(--tv-accent)",
+                      letterSpacing: ".02em",
+                    }}
+                  >
+                    {fmt.mon(d)}
+                  </span>
+                )}
+                <span
+                  style={{
+                    fontFamily: "var(--tv-mono)",
+                    fontSize: ultra ? 11.5 : 12.5,
+                    fontWeight: 600,
+                    lineHeight: 1,
+                    letterSpacing: ".01em",
+                    color: out ? "var(--tv-ink-5)" : isToday ? "#fff" : "var(--tv-ink-2)",
+                    background: isToday ? "var(--tv-accent)" : "transparent",
+                    borderRadius: "var(--tv-r-pill)",
+                    padding: isToday ? "3px 6px" : 0,
+                    margin: isToday ? "-3px 0" : 0,
+                    boxShadow: isToday ? "0 1px 2px rgba(79,70,229,.35)" : "none",
+                  }}
+                >
+                  {dayNum}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+
+        {bodyH > 0 && (
+          <div style={{ position: "relative", width: gridW, height: bodyH, marginBottom: D.vgap }}>
+            {hasMilestones &&
+              events.map(({ ev, col }) => {
+                const c = cmap[ev.labelIds?.[0] || ""] || "var(--tv-ink-2)";
+                const hovered = hover?.id === ev.id;
+                const selected = sel === ev.id;
+                const left = col * colW;
+                return (
+                  <div
+                    key={"m" + ev.id}
+                    tabIndex={0}
+                    role="button"
+                    aria-label={`Milestone: ${ev.title}, ${fmt.full(ev._t)}`}
+                    onMouseEnter={(e) => setHover({ kind: "event", id: ev.id, ev, c, ...track(e) })}
+                    onMouseMove={(e) => setHover({ kind: "event", id: ev.id, ev, c, ...track(e) })}
+                    onFocus={() => setHover({ kind: "event", id: ev.id, ev, c, mx: left + 60, my: 70 })}
+                    onMouseLeave={() => setHover(null)}
+                    onBlur={() => setHover(null)}
+                    onClick={() => setSel((s) => (s === ev.id ? null : ev.id))}
+                    style={{
+                      position: "absolute",
+                      left,
+                      top: 0,
+                      width: colW,
+                      height: D.milestoneH,
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6,
+                      padding: "0 4px 0 7px",
+                      cursor: "pointer",
+                      outline: "none",
+                      borderRadius: "var(--tv-r-sm)",
+                      boxShadow: selected ? "var(--tv-focus-ring)" : "none",
+                      minWidth: 0,
+                    }}
+                  >
+                    <span
+                      style={{
+                        width: D.diamond,
+                        height: D.diamond,
+                        transform: "rotate(45deg)",
+                        flex: "none",
+                        background: "#fff",
+                        border: `2px solid ${c}`,
+                        borderRadius: 2,
+                        boxShadow: hovered ? `0 0 0 4px ${mix(c, 18)}` : "0 1px 1px rgba(16,24,40,.12)",
+                        transition: "box-shadow var(--tv-fast) var(--tv-ease)",
+                      }}
+                    />
+                    {showLabels && !ultra && (
+                      <span
+                        style={{
+                          fontSize: D.chip - 0.5,
+                          fontWeight: 500,
+                          color: "var(--tv-ink-2)",
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          flex: "1 1 auto",
+                          minWidth: 0,
+                        }}
+                      >
+                        {ev.title}
+                      </span>
+                    )}
+                  </div>
+                );
+              })}
+
+            {segs.map((seg, i) => {
+              const iv = seg.iv;
+              const c = cmap[iv.labelIds?.[0] || ""] || "#64748b";
+              const left = seg.c0 * colW + 2;
+              const width = Math.max(10, (seg.c1 - seg.c0 + 1) * colW - 4);
+              const top = (hasMilestones ? D.milestoneH : 0) + iv._lane * D.laneH;
+              const h = D.laneH - 3;
+              const hovered = hover?.id === iv.id;
+              const selected = sel === iv.id;
+              const tiny = width < 46 || ultra;
+              const contL = !seg.startsHere;
+              const contR = !seg.endsHere;
+              const boxShadow =
+                [
+                  seg.startsHere ? `inset 3px 0 0 0 ${c}` : null,
+                  selected ? "var(--tv-focus-ring)" : hovered ? "var(--tv-shadow-pop)" : null,
+                ]
+                  .filter(Boolean)
+                  .join(", ") || "none";
+
+              return (
+                <div
+                  key={iv.id + "-" + i}
+                  tabIndex={0}
+                  role="button"
+                  aria-label={`${iv.title}, ${fmt.full(iv._s)} to ${fmt.full(new Date(iv._e))}`}
+                  onMouseEnter={(e) => setHover({ kind: "interval", id: iv.id, iv, c, ...track(e) })}
+                  onMouseMove={(e) => setHover({ kind: "interval", id: iv.id, iv, c, ...track(e) })}
+                  onFocus={() => setHover({ kind: "interval", id: iv.id, iv, c, mx: left + Math.min(90, width / 2), my: top + 150 })}
+                  onMouseLeave={() => setHover(null)}
+                  onBlur={() => setHover(null)}
+                  onClick={() => setSel((s) => (s === iv.id ? null : iv.id))}
+                  style={{
+                    position: "absolute",
+                    left,
+                    width,
+                    top,
+                    height: h,
+                    background: mix(c, 13),
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    padding: `0 ${tiny ? 5 : 8}px 0 ${seg.startsHere ? (tiny ? 7 : 9) : 6}px`,
+                    border: `1px solid ${hovered || selected ? c : mix(c, 34)}`,
+                    borderTopLeftRadius: contL ? 0 : "var(--tv-r-sm)",
+                    borderBottomLeftRadius: contL ? 0 : "var(--tv-r-sm)",
+                    borderTopRightRadius: contR ? 0 : "var(--tv-r-sm)",
+                    borderBottomRightRadius: contR ? 0 : "var(--tv-r-sm)",
+                    borderLeftStyle: contL ? "dashed" : "solid",
+                    borderRightStyle: contR ? "dashed" : "solid",
+                    boxShadow,
+                    cursor: "pointer",
+                    outline: "none",
+                    overflow: "hidden",
+                    transition: "box-shadow var(--tv-fast) var(--tv-ease), border-color var(--tv-fast) var(--tv-ease)",
+                    zIndex: hovered || selected ? 6 : 2,
+                    minWidth: 0,
+                  }}
+                >
+                  {seg.startsHere && !tiny && <span style={{ width: D.dot, height: D.dot, borderRadius: "50%", background: c, flex: "none" }} />}
+                  {!tiny && (
+                    <span
+                      style={{
+                        fontSize: D.chip,
+                        fontWeight: 500,
+                        color: "var(--tv-ink-2)",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        flex: "1 1 auto",
+                        minWidth: 0,
+                      }}
+                    >
+                      {iv.title}
+                    </span>
+                  )}
+                  {seg.startsHere && !tiny && !narrow && width > 150 && (
+                    <span style={{ fontFamily: "var(--tv-mono)", fontSize: 10, color: "var(--tv-ink-4)", flex: "none", whiteSpace: "nowrap" }}>
+                      {fmt.span(iv._s, iv._e)}
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div
+      ref={wrapRef}
+      className="tv-component"
+      style={{
+        background: "var(--tv-canvas)",
+        border: "1px solid var(--tv-line)",
+        borderRadius: "var(--tv-r-lg)",
+        boxShadow: "var(--tv-shadow-1)",
+        padding: D.pad,
+        fontFamily: "var(--tv-font)",
+        color: "var(--tv-ink)",
+        position: "relative",
+        width: "100%",
+        overflow: "hidden",
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, marginBottom: 14, flexWrap: "wrap" }}>
+        <div style={{ fontSize: narrow ? 15 : 17, fontWeight: 600, letterSpacing: "-0.01em", color: "var(--tv-ink)", lineHeight: 1.25, minWidth: 0 }}>
+          {spec.title || dataset.meta?.title}
+        </div>
+        <div style={{ fontFamily: "var(--tv-mono)", fontSize: 11, color: "var(--tv-ink-4)", whiteSpace: "nowrap", flex: "none" }}>
+          {fmt.monDay(model.t0)} – {fmt.monDay(new Date(model.t1 - DAY_MS))}
+        </div>
+      </div>
+
+      {captionOn && captionPos === "top" && <Caption position={captionPos} text={captionText} narrow={narrow} />}
+      {legendOn && legendPos === "top" && <Legend labels={dataset.labels || []} colors={cmap} position={legendPos} />}
+
+      <div style={{ display: "flex", gap: D.pad, alignItems: "flex-start" }}>
+        <div style={{ width: gridW, flex: "none" }}>
+          {!isEmpty && <Weekday />}
+          {isEmpty ? (
+            <EmptyState
+              title="No events or intervals in this window"
+              description="Add intervals or milestones to populate the calendar."
+              icon="calendar"
+              variant="panel"
+              bordered
+              height={200}
+              narrow={narrow}
+            />
+          ) : (
+            model.perWeek.map((pw, i) => <WeekRow key={i} pw={pw} last={i === model.perWeek.length - 1} />)
+          )}
+        </div>
+
+        {legendOn && legendPos === "right" && (
+          <div style={{ width: legendW, flex: "none", paddingTop: 4 }}>
+            <div
+              style={{
+                fontFamily: "var(--tv-mono)",
+                fontSize: 10,
+                letterSpacing: ".08em",
+                textTransform: "uppercase",
+                color: "var(--tv-ink-4)",
+                marginBottom: 12,
+              }}
+            >
+              Legend
+            </div>
+            <Legend labels={dataset.labels || []} colors={cmap} position={legendPos} vertical />
+          </div>
+        )}
+      </div>
+
+      {legendOn && legendPos === "bottom" && <Legend labels={dataset.labels || []} colors={cmap} position={legendPos} />}
+      {captionOn && captionPos === "bottom" && <Caption position={captionPos} text={captionText} narrow={narrow} />}
+
+      {hover &&
+        (() => {
+          const isEvent = hover.kind === "event";
+          const src = isEvent ? hover.ev : hover.iv;
+          const line = isEvent ? fmt.full(hover.ev._t) : `${fmt.full(hover.iv._s)} → ${fmt.full(new Date(hover.iv._e))}`;
+          const sub = isEvent ? fmt.time(hover.ev._t) || "All-day milestone" : fmt.span(hover.iv._s, hover.iv._e);
+          const TW = 234;
+          const left = Math.max(8, Math.min(w - TW - 8, hover.mx - TW / 2));
+          const top = Math.max(8, hover.my - 96);
+          return (
+            <Tooltip
+              left={left}
+              top={top}
+              width={TW}
+              color={hover.c}
+              label={labelName(dataset, src.labelIds?.[0])}
+              title={src.title}
+              line={line}
+              sub={sub}
+              kindLabel={isEvent ? "Milestone" : "Interval"}
+              isEvent={isEvent}
+            />
+          );
+        })()}
+    </div>
+  );
+}