@schandlergarcia/sf-web-components 1.9.37 → 1.9.39

package/src/components/library/charts/D3Chart.jsx

@@ -0,0 +1,109 @@
+import React from "react";
+
+/**
+ * Minimal D3 chart host:
+ * - Owns the <svg> element
+ * - Computes responsive dimensions from container size
+ * - Calls renderChart(svgEl, data, dims, options)
+ */
+export default function D3Chart({
+  data,
+  renderChart,
+  options = {},
+  width,
+  height = 280,
+  responsive = false,
+  aspectRatio,
+  className = "",
+  style,
+  containerStyle,
+  svgStyle,
+  loading = false,
+  error,
+  ariaLabel = "Chart"
+}) {
+  const containerRef = React.useRef(null);
+  const svgRef = React.useRef(null);
+  const [containerWidth, setContainerWidth] = React.useState(null);
+
+  React.useEffect(() => {
+    if (!responsive) return;
+    const el = containerRef.current;
+    if (!el) return;
+
+    const obs = new ResizeObserver((entries) => {
+      const w = entries?.[0]?.contentRect?.width;
+      if (typeof w === "number" && Number.isFinite(w)) setContainerWidth(w);
+    });
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, [responsive]);
+
+  const computedWidth = responsive ? containerWidth : width;
+  const computedHeight = React.useMemo(() => {
+    if (!responsive) return height;
+    if (!containerWidth) return height;
+    if (aspectRatio && Number.isFinite(aspectRatio) && aspectRatio > 0) return containerWidth / aspectRatio;
+    return height;
+  }, [responsive, containerWidth, height, aspectRatio]);
+
+  React.useEffect(() => {
+    if (loading || error) return;
+    if (!renderChart) return;
+    const svgEl = svgRef.current;
+    if (!svgEl) return;
+
+    const dims = {
+      width: computedWidth ?? 0,
+      height: computedHeight ?? 0
+    };
+
+    // Avoid calling renderChart before we have a measurable width in responsive mode
+    if (responsive && (!dims.width || dims.width < 10)) return;
+    if (!dims.height || dims.height < 10) return;
+
+    renderChart(svgEl, data, dims, options);
+  }, [data, renderChart, options, computedWidth, computedHeight, responsive, loading, error]);
+
+  if (error) {
+    return (
+      <div
+        ref={containerRef}
+        className={["w-full rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900 dark:border-rose-900/40 dark:bg-rose-950/30 dark:text-rose-100", className]
+          .filter(Boolean)
+          .join(" ")}
+        style={containerStyle}
+      >
+        {String(error)}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={["w-full", className].filter(Boolean).join(" ")}
+      style={{ ...containerStyle, position: "relative" }}
+    >
+      {loading ? (
+        <div className="h-full w-full rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+          <div className="space-y-3">
+            <div className="h-4 w-1/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+            <div className="h-44 w-full animate-pulse rounded bg-slate-200 dark:bg-slate-800" />
+          </div>
+        </div>
+      ) : (
+        <svg
+          ref={svgRef}
+          role="img"
+          aria-label={ariaLabel}
+          width={computedWidth ?? width ?? "100%"}
+          height={computedHeight}
+          style={{ ...svgStyle, ...style, display: "block" }}
+        />
+      )}
+    </div>
+  );
+}
+
+

package/src/components/library/charts/D3ChartTemplates.jsx

@@ -0,0 +1,126 @@
+import * as d3 from "d3";
+
+function clear(svg) {
+  d3.select(svg).selectAll("*").remove();
+}
+
+export const D3ChartTemplates = {
+  lineChart(svg, data, dims, opts = {}) {
+    const {
+      xKey = "x",
+      yKey = "y",
+      margin = { top: 12, right: 16, bottom: 28, left: 40 },
+      stroke = "#6366F1",
+      strokeWidth = 2,
+      showAxes = true,
+      showGrid = true
+    } = opts;
+
+    clear(svg);
+
+    const width = dims.width;
+    const height = dims.height;
+    const innerW = Math.max(0, width - margin.left - margin.right);
+    const innerH = Math.max(0, height - margin.top - margin.bottom);
+
+    const g = d3.select(svg).attr("viewBox", `0 0 ${width} ${height}`).append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const xs = data.map((d) => d?.[xKey]).filter((v) => v != null);
+    const ys = data.map((d) => d?.[yKey]).filter((v) => v != null);
+
+    const xDomain = d3.extent(xs);
+    const yDomain = d3.extent(ys);
+
+    const x = d3.scaleLinear().domain(xDomain).nice().range([0, innerW]);
+    const y = d3.scaleLinear().domain(yDomain).nice().range([innerH, 0]);
+
+    if (showGrid) {
+      g.append("g")
+        .attr("class", "grid")
+        .call(d3.axisLeft(y).ticks(5).tickSize(-innerW).tickFormat(""))
+        .call((grid) => grid.selectAll("line").attr("stroke", "currentColor").attr("opacity", 0.12))
+        .call((grid) => grid.selectAll("path").attr("stroke", "none"));
+    }
+
+    const line = d3
+      .line()
+      .x((d) => x(d[xKey]))
+      .y((d) => y(d[yKey]))
+      .defined((d) => d?.[xKey] != null && d?.[yKey] != null);
+
+    g.append("path")
+      .datum(data)
+      .attr("fill", "none")
+      .attr("stroke", stroke)
+      .attr("stroke-width", strokeWidth)
+      .attr("d", line);
+
+    if (showAxes) {
+      g.append("g")
+        .attr("transform", `translate(0,${innerH})`)
+        .call(d3.axisBottom(x).ticks(6))
+        .call((ax) => ax.selectAll("text").attr("font-size", 10));
+
+      g.append("g")
+        .call(d3.axisLeft(y).ticks(5))
+        .call((ax) => ax.selectAll("text").attr("font-size", 10));
+    }
+  },
+
+  groupedBarChart(svg, data, dims, opts = {}) {
+    const {
+      groups = [],
+      margin = { top: 20, right: 20, bottom: 40, left: 55 },
+      xKey = "x",
+      colors = ["#6366F1", "#CBD5E1"],
+      barRadius = 4,
+      yFormat = ",.0f",
+      showGrid = true,
+    } = opts;
+
+    clear(svg);
+
+    const width = dims.width;
+    const height = dims.height;
+    const innerW = Math.max(0, width - margin.left - margin.right);
+    const innerH = Math.max(0, height - margin.top - margin.bottom);
+
+    const sel = d3.select(svg).attr("viewBox", `0 0 ${width} ${height}`);
+    const g = sel.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const groupKeys = groups.length ? groups : Object.keys(data[0] || {}).filter((k) => k !== xKey);
+
+    const x0 = d3.scaleBand().domain(data.map((d) => d[xKey])).range([0, innerW]).padding(0.3);
+    const x1 = d3.scaleBand().domain(groupKeys).range([0, x0.bandwidth()]).padding(0.05);
+    const yMax = d3.max(data, (d) => d3.max(groupKeys, (k) => d[k])) * 1.15;
+    const y = d3.scaleLinear().domain([0, yMax]).range([innerH, 0]);
+
+    g.append("g")
+      .attr("transform", `translate(0,${innerH})`)
+      .call(d3.axisBottom(x0).tickSize(0))
+      .call((ax) => ax.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "11px"))
+      .call((ax) => ax.select(".domain").remove());
+
+    g.append("g")
+      .call(d3.axisLeft(y).ticks(5).tickFormat(d3.format(yFormat)).tickSize(showGrid ? -innerW : 0))
+      .call((ax) => ax.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "10px"))
+      .call((ax) => ax.selectAll(".tick line").attr("stroke", "#e2e8f0").attr("stroke-dasharray", "2,2"))
+      .call((ax) => ax.select(".domain").remove());
+
+    const rows = g.selectAll(".bar-group").data(data).join("g")
+      .attr("class", "bar-group")
+      .attr("transform", (d) => `translate(${x0(d[xKey])},0)`);
+
+    groupKeys.forEach((key, i) => {
+      rows.append("rect")
+        .attr("x", x1(key))
+        .attr("y", (d) => y(d[key]))
+        .attr("width", x1.bandwidth())
+        .attr("height", (d) => innerH - y(d[key]))
+        .attr("rx", barRadius)
+        .attr("fill", colors[i % colors.length]);
+    });
+  },
+};
+
+

package/src/components/library/charts/GeoMap.jsx

@@ -0,0 +1,293 @@
+import React, { useMemo, useRef, useEffect, useState, useCallback } from "react";
+import * as d3 from "d3";
+import { feature } from "topojson-client";
+import world from "world-atlas/land-110m.json";
+
+const land = feature(world, world.objects.land);
+
+const PROJECTIONS = {
+  naturalEarth: d3.geoNaturalEarth1,
+  mercator: d3.geoMercator,
+  equirectangular: d3.geoEquirectangular,
+};
+
+const THEMES = {
+  dark: {
+    bg: "#050b15",
+    bgGradient: ["#0a1628", "#050b15"],
+    land: "#1a2d4a",
+    landStroke: "#2a4060",
+    sphere: "#1e3a5f",
+    graticule: "#162a45",
+    graticuleOpacity: 0.35,
+    markerActive: "#cbd5e1",
+    markerInactive: "#64748b",
+    label: "#cbd5e1",
+    labelInactive: "#64748b",
+    arc: "#818cf8",
+    arcHighlight: "#c4b5fd",
+    arcDanger: "#f87171",
+    dot: "#a5b4fc",
+    dotDanger: "#f87171",
+    overlayFill: "rgba(248,113,113,0.10)",
+    overlayStroke: "rgba(248,113,113,0.30)",
+  },
+  light: {
+    bg: "#f8fafc",
+    bgGradient: ["#f8fafc", "#f1f5f9"],
+    land: "#e2e8f0",
+    landStroke: "#cbd5e1",
+    sphere: "#cbd5e1",
+    graticule: "#e2e8f0",
+    graticuleOpacity: 0.6,
+    markerActive: "#334155",
+    markerInactive: "#94a3b8",
+    label: "#334155",
+    labelInactive: "#94a3b8",
+    arc: "#6366f1",
+    arcHighlight: "#4f46e5",
+    arcDanger: "#ef4444",
+    dot: "#6366f1",
+    dotDanger: "#ef4444",
+    overlayFill: "rgba(239,68,68,0.08)",
+    overlayStroke: "rgba(239,68,68,0.3)",
+  },
+};
+
+function buildProjection(type, width, height) {
+  const factory = PROJECTIONS[type] ?? PROJECTIONS.naturalEarth;
+  return factory().fitSize([width, height], { type: "Sphere" });
+}
+
+export default function GeoMap({
+  width = 960,
+  height = 480,
+  projection: projType = "naturalEarth",
+  theme = "dark",
+  markers = [],
+  arcs = [],
+  overlays = [],
+  selectedId = null,
+  onArcClick,
+  onMarkerClick,
+  zoomable = true,
+  minZoom = 1,
+  maxZoom = 8,
+  initialBounds = null,
+  className = "",
+  children,
+}) {
+  const t = THEMES[theme] ?? THEMES.dark;
+  const svgRef = useRef(null);
+  const [transform, setTransform] = useState(d3.zoomIdentity);
+  const zoomRef = useRef(null);
+
+  const { proj, pathGen, graticulePath, spherePath, landPath } = useMemo(() => {
+    const proj = buildProjection(projType, width, height);
+    const pathGen = d3.geoPath(proj);
+    return {
+      proj,
+      pathGen,
+      graticulePath: pathGen(d3.geoGraticule10()),
+      spherePath: pathGen({ type: "Sphere" }),
+      landPath: pathGen(land),
+    };
+  }, [projType, width, height]);
+
+  // D3 zoom behavior
+  useEffect(() => {
+    if (!zoomable || !svgRef.current) return;
+    const svg = d3.select(svgRef.current);
+    const zoom = d3.zoom()
+      .scaleExtent([minZoom, maxZoom])
+      .on("zoom", (e) => setTransform(e.transform));
+    zoomRef.current = zoom;
+    svg.call(zoom);
+    return () => svg.on(".zoom", null);
+  }, [zoomable, minZoom, maxZoom]);
+
+  // Apply initial zoom to fit bounds (markers/region) on mount
+  const initialBoundsApplied = useRef(false);
+  useEffect(() => {
+    if (!initialBounds || initialBoundsApplied.current) return;
+    if (!svgRef.current || !zoomRef.current || !proj) return;
+    const { sw, ne, padding = 40 } = initialBounds; // sw=[lonMin,latMin], ne=[lonMax,latMax]
+    const p0 = proj(sw);
+    const p1 = proj(ne);
+    if (!p0 || !p1) return;
+    const bx0 = Math.min(p0[0], p1[0]);
+    const by0 = Math.min(p0[1], p1[1]);
+    const bx1 = Math.max(p0[0], p1[0]);
+    const by1 = Math.max(p0[1], p1[1]);
+    const bw = bx1 - bx0;
+    const bh = by1 - by0;
+    if (bw < 1 || bh < 1) return;
+    const scale = Math.min((width - padding * 2) / bw, (height - padding * 2) / bh);
+    const cx = (bx0 + bx1) / 2;
+    const cy = (by0 + by1) / 2;
+    const tx = width / 2 - cx * scale;
+    const ty = height / 2 - cy * scale;
+    const clampedScale = Math.max(minZoom, Math.min(maxZoom, scale));
+    const t = d3.zoomIdentity.translate(tx, ty).scale(clampedScale);
+    d3.select(svgRef.current).call(zoomRef.current.transform, t);
+    initialBoundsApplied.current = true;
+  }, [initialBounds, proj, width, height, minZoom, maxZoom]);
+
+  const resetZoom = useCallback(() => {
+    if (!svgRef.current || !zoomRef.current) return;
+    d3.select(svgRef.current)
+      .transition()
+      .duration(400)
+      .call(zoomRef.current.transform, d3.zoomIdentity);
+  }, []);
+
+  const isZoomed = transform.k !== 1 || transform.x !== 0 || transform.y !== 0;
+
+  const arcPaths = useMemo(() => {
+    const cache = {};
+    arcs.forEach(a => {
+      const key = `${a.from[0]},${a.from[1]}-${a.to[0]},${a.to[1]}`;
+      if (cache[key]) { a._path = cache[key]; return; }
+      const interp = d3.geoInterpolate(a.from, a.to);
+      const pts = [];
+      for (let i = 0; i <= 1; i += 0.02) {
+        const p = proj(interp(i));
+        if (p) pts.push(p);
+      }
+      const path = pts.length > 1 ? d3.line()(pts) : null;
+      cache[key] = path;
+      a._path = path;
+    });
+    return arcs;
+  }, [arcs, proj]);
+
+  const activeMarkerIds = useMemo(() => {
+    const s = new Set();
+    markers.forEach(m => { if (m.active) s.add(m.id); });
+    return s;
+  }, [markers]);
+
+  const txStr = `translate(${transform.x},${transform.y}) scale(${transform.k})`;
+  const invScale = 1 / transform.k;
+
+  return (
+    <div className={`relative overflow-hidden ${className}`} style={{ background: t.bg }}>
+      <svg ref={svgRef} viewBox={`0 0 ${width} ${height}`} className="h-full w-full" preserveAspectRatio="xMidYMid slice" style={zoomable ? { cursor: "grab" } : undefined}>
+        <defs>
+          <radialGradient id="geo-bg" cx="50%" cy="50%" r="55%">
+            <stop offset="0%" stopColor={t.bgGradient[0]} />
+            <stop offset="100%" stopColor={t.bgGradient[1]} />
+          </radialGradient>
+          <filter id="geo-glow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="b" />
+            <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
+          </filter>
+        </defs>
+        <style>{`
+          .geo-arc{stroke-dasharray:8,6;animation:geo-flow 1.5s linear infinite}
+          @keyframes geo-flow{to{stroke-dashoffset:-14}}
+          .geo-dot{animation:geo-pulse 2s ease-in-out infinite}
+          @keyframes geo-pulse{0%,100%{opacity:1}50%{opacity:.5}}
+        `}</style>
+
+        <rect width={width} height={height} fill="url(#geo-bg)" />
+
+        {/* Zoomable content group */}
+        <g transform={txStr}>
+          <path d={spherePath} fill="none" stroke={t.sphere} strokeWidth={0.8 * invScale} />
+          <path d={landPath} fill={t.land} stroke={t.landStroke} strokeWidth={0.4 * invScale} />
+          <path d={graticulePath} fill="none" stroke={t.graticule} strokeWidth={0.3 * invScale} opacity={t.graticuleOpacity} />
+
+          {/* Overlay zones (disruptions, weather) */}
+          {overlays.map(o => {
+            const c = proj(o.center);
+            if (!c) return null;
+            const edge = proj([o.center[0] + (o.radius ?? 5), o.center[1]]);
+            const r = edge ? Math.abs(edge[0] - c[0]) : 30;
+            return (
+              <circle
+                key={o.id}
+                cx={c[0]} cy={c[1]} r={r}
+                fill={o.fill ?? t.overlayFill}
+                stroke={o.stroke ?? t.overlayStroke}
+                strokeWidth={1 * invScale}
+                strokeDasharray="5,5"
+                className="animate-pulse"
+              />
+            );
+          })}
+
+          {/* Arcs */}
+          {arcPaths.map(a => {
+            if (!a._path) return null;
+            const sel = selectedId === a.id;
+            const danger = a.danger;
+            return (
+              <path
+                key={`arc-${a.id}`}
+                d={a._path}
+                fill="none"
+                stroke={danger ? t.arcDanger : sel ? t.arcHighlight : a.color ?? t.arc}
+                strokeWidth={(sel ? 3 : 2) * invScale}
+                opacity={selectedId != null && !sel ? 0.15 : danger ? 0.85 : 0.65}
+                className="geo-arc cursor-pointer"
+                onClick={() => onArcClick?.(a)}
+              />
+            );
+          })}
+
+          {/* Markers */}
+          {markers.map(m => {
+            const p = proj([m.lon, m.lat]);
+            if (!p) return null;
+            const active = m.active ?? activeMarkerIds.has(m.id);
+            return (
+              <g key={m.id} className={onMarkerClick ? "cursor-pointer" : ""} onClick={() => onMarkerClick?.(m)}>
+                <circle cx={p[0]} cy={p[1]} r={(active ? 3 : 2) * invScale} fill={active ? t.markerActive : t.markerInactive} />
+                {m.label !== false && (
+                  <text x={p[0] + 6 * invScale} y={p[1] + 4 * invScale} fontSize={8 * invScale} fill={active ? t.label : t.labelInactive} fontFamily="sans-serif" fontWeight={600}>
+                    {m.label ?? m.id}
+                  </text>
+                )}
+              </g>
+            );
+          })}
+
+          {/* Moving dots (flight positions) */}
+          {arcPaths.map(a => {
+            if (a.progress == null || a.progress <= 0) return null;
+            const interp = d3.geoInterpolate(a.from, a.to);
+            const p = proj(interp(Math.min(a.progress, 0.99)));
+            if (!p) return null;
+            const sel = selectedId === a.id;
+            return (
+              <circle
+                key={`dot-${a.id}`}
+                cx={p[0]} cy={p[1]}
+                r={(sel ? 6 : 4.5) * invScale}
+                fill={a.danger ? t.dotDanger : a.dotColor ?? t.dot}
+                filter="url(#geo-glow)"
+                className="geo-dot cursor-pointer"
+                opacity={selectedId != null && !sel ? 0.3 : 1}
+                onClick={() => onArcClick?.(a)}
+              />
+            );
+          })}
+
+          {/* Custom children get access to projection */}
+          {typeof children === "function" ? children({ proj, pathGen, theme: t, width, height, transform }) : children}
+        </g>
+      </svg>
+
+      {/* Reset zoom button */}
+      {zoomable && isZoomed && (
+        <button
+          onClick={resetZoom}
+          className="absolute bottom-3 right-3 rounded-lg border border-white/15 bg-black/50 px-2.5 py-1.5 text-[11px] font-medium text-white/80 backdrop-blur-md transition hover:bg-black/70 hover:text-white"
+        >
+          Reset view
+        </button>
+      )}
+    </div>
+  );
+}