@luxfi/ui 6.1.2 → 7.0.0

package/dist/pnl-diagram.js

@@ -0,0 +1,431 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function calcLegPnl(leg, price, multiplier) {
+  const premium = leg.premium ?? 0;
+  let intrinsic;
+  if (leg.type === "call") {
+    intrinsic = Math.max(price - leg.strike, 0);
+  } else {
+    intrinsic = Math.max(leg.strike - price, 0);
+  }
+  const sign = leg.action === "buy" ? 1 : -1;
+  return sign * (intrinsic - premium) * leg.quantity * multiplier;
+}
+function calcTotalPnl(legs, price, multiplier) {
+  return legs.reduce((sum, leg) => sum + calcLegPnl(leg, price, multiplier), 0);
+}
+function buildPath(points, vb, width, height) {
+  if (points.length === 0) return "";
+  const scaleX = (x) => (x - vb.xMin) / (vb.xMax - vb.xMin) * width;
+  const scaleY = (y) => height - (y - vb.yMin) / (vb.yMax - vb.yMin) * height;
+  const parts = points.map((p, i) => {
+    const sx = scaleX(p.x);
+    const sy = scaleY(p.y);
+    return i === 0 ? `M${sx},${sy}` : `L${sx},${sy}`;
+  });
+  return parts.join(" ");
+}
+var LEG_COLORS = ["#6366f1", "#f59e0b", "#ec4899", "#06b6d4"];
+var PnlDiagram = React.forwardRef(
+  function PnlDiagram2(props, ref) {
+    const {
+      legs,
+      spotPrice,
+      multiplier = 100,
+      className,
+      ...rest
+    } = props;
+    const containerRef = React.useRef(null);
+    const [hoverX, setHoverX] = React.useState(null);
+    const [dims, setDims] = React.useState({ width: 600, height: 240 });
+    React.useEffect(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) {
+          setDims({
+            width: Math.max(entry.contentRect.width, 200),
+            height: Math.max(entry.contentRect.height, 120)
+          });
+        }
+      });
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, []);
+    const allStrikes = legs.map((l) => l.strike);
+    const minStrike = Math.min(...allStrikes, spotPrice);
+    const maxStrike = Math.max(...allStrikes, spotPrice);
+    const range = maxStrike - minStrike || spotPrice * 0.1;
+    const xMin = minStrike - range * 0.3;
+    const xMax = maxStrike + range * 0.3;
+    const SAMPLES = 200;
+    const step = (xMax - xMin) / SAMPLES;
+    const combinedPoints = React.useMemo(() => {
+      const pts = [];
+      for (let i = 0; i <= SAMPLES; i++) {
+        const price = xMin + i * step;
+        pts.push({ x: price, y: calcTotalPnl(legs, price, multiplier) });
+      }
+      return pts;
+    }, [legs, multiplier, xMin, step]);
+    const legPointSets = React.useMemo(() => {
+      return legs.map((leg) => {
+        const pts = [];
+        for (let i = 0; i <= SAMPLES; i++) {
+          const price = xMin + i * step;
+          pts.push({ x: price, y: calcLegPnl(leg, price, multiplier) });
+        }
+        return pts;
+      });
+    }, [legs, multiplier, xMin, step]);
+    const allY = combinedPoints.map((p) => p.y);
+    const rawYMin = Math.min(...allY);
+    const rawYMax = Math.max(...allY);
+    const yPad = Math.max((rawYMax - rawYMin) * 0.15, 10);
+    const vb = { xMin, xMax, yMin: rawYMin - yPad, yMax: rawYMax + yPad };
+    const { width, height } = dims;
+    const PADDING = { top: 20, bottom: 28, left: 56, right: 16 };
+    const chartW = width - PADDING.left - PADDING.right;
+    const chartH = height - PADDING.top - PADDING.bottom;
+    const scaleX = (x) => PADDING.left + (x - vb.xMin) / (vb.xMax - vb.xMin) * chartW;
+    const scaleY = (y) => PADDING.top + chartH - (y - vb.yMin) / (vb.yMax - vb.yMin) * chartH;
+    const breakevens = React.useMemo(() => {
+      const pts = [];
+      for (let i = 1; i < combinedPoints.length; i++) {
+        const prev = combinedPoints[i - 1];
+        const curr = combinedPoints[i];
+        if (prev.y <= 0 && curr.y >= 0 || prev.y >= 0 && curr.y <= 0) {
+          const ratio = Math.abs(prev.y) / (Math.abs(prev.y) + Math.abs(curr.y));
+          pts.push(prev.x + ratio * (curr.x - prev.x));
+        }
+      }
+      return pts;
+    }, [combinedPoints]);
+    const maxGain = Math.max(...allY);
+    const maxLoss = Math.min(...allY);
+    const maxGainPoint = combinedPoints.find((p) => p.y === maxGain);
+    const maxLossPoint = combinedPoints.find((p) => p.y === maxLoss);
+    const zeroY = scaleY(0);
+    const handleMouseMove = React.useCallback(
+      (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const price = vb.xMin + (mouseX - PADDING.left) / chartW * (vb.xMax - vb.xMin);
+        if (price >= vb.xMin && price <= vb.xMax) {
+          setHoverX(price);
+        } else {
+          setHoverX(null);
+        }
+      },
+      [vb.xMin, vb.xMax, chartW]
+    );
+    const handleMouseLeave = React.useCallback(() => setHoverX(null), []);
+    const hoverPnl = hoverX !== null ? calcTotalPnl(legs, hoverX, multiplier) : null;
+    buildPath(
+      combinedPoints.map((p) => ({ x: scaleX(p.x), y: scaleY(p.y) })).map((p) => ({ x: p.x - PADDING.left, y: p.y - PADDING.top })),
+      { xMin: 0, xMax: chartW, yMin: 0, yMax: chartH },
+      chartW,
+      chartH
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("w-full", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("div", { ref: containerRef, className: "w-full h-full min-h-[200px]", children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width,
+              height,
+              viewBox: `0 0 ${width} ${height}`,
+              className: "select-none",
+              onMouseMove: handleMouseMove,
+              onMouseLeave: handleMouseLeave,
+              children: [
+                /* @__PURE__ */ jsx("rect", { x: PADDING.left, y: PADDING.top, width: chartW, height: chartH, fill: "#09090b", rx: "2" }),
+                Array.from({ length: 5 }).map((_, i) => {
+                  const y = PADDING.top + chartH / 4 * i;
+                  const val = vb.yMax - (vb.yMax - vb.yMin) / 4 * i;
+                  return /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: PADDING.left,
+                        y1: y,
+                        x2: PADDING.left + chartW,
+                        y2: y,
+                        stroke: "#27272a",
+                        strokeWidth: "1",
+                        strokeDasharray: "2,2"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "text",
+                      {
+                        x: PADDING.left - 4,
+                        y: y + 3,
+                        fill: "#71717a",
+                        fontSize: "9",
+                        fontFamily: "monospace",
+                        textAnchor: "end",
+                        children: [
+                          val >= 0 ? "+" : "",
+                          val.toFixed(0)
+                        ]
+                      }
+                    )
+                  ] }, `grid-y-${i}`);
+                }),
+                zeroY >= PADDING.top && zeroY <= PADDING.top + chartH && /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: PADDING.left,
+                    y1: zeroY,
+                    x2: PADDING.left + chartW,
+                    y2: zeroY,
+                    stroke: "#3f3f46",
+                    strokeWidth: "1"
+                  }
+                ),
+                legPointSets.map((pts, i) => {
+                  const path = pts.map((p, j) => {
+                    const sx = scaleX(p.x);
+                    const sy = scaleY(p.y);
+                    return j === 0 ? `M${sx},${sy}` : `L${sx},${sy}`;
+                  }).join(" ");
+                  return /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: path,
+                      fill: "none",
+                      stroke: LEG_COLORS[i % LEG_COLORS.length],
+                      strokeWidth: "1",
+                      strokeDasharray: "4,3",
+                      opacity: "0.5"
+                    },
+                    `leg-${i}`
+                  );
+                }),
+                combinedPoints.length > 0 && (() => {
+                  const path = combinedPoints.map((p, i) => {
+                    const sx = scaleX(p.x);
+                    const sy = scaleY(p.y);
+                    return i === 0 ? `M${sx},${sy}` : `L${sx},${sy}`;
+                  }).join(" ");
+                  const lastX = scaleX(combinedPoints[combinedPoints.length - 1].x);
+                  const firstX = scaleX(combinedPoints[0].x);
+                  const clampedZeroY = Math.max(PADDING.top, Math.min(PADDING.top + chartH, zeroY));
+                  const fillPath = `${path} L${lastX},${clampedZeroY} L${firstX},${clampedZeroY} Z`;
+                  return /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "pnl-grad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#22c55e", stopOpacity: "0.15" }),
+                      /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#22c55e", stopOpacity: "0.02" }),
+                      /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#ef4444", stopOpacity: "0.02" }),
+                      /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#ef4444", stopOpacity: "0.15" })
+                    ] }) }),
+                    /* @__PURE__ */ jsx("path", { d: fillPath, fill: "url(#pnl-grad)" })
+                  ] });
+                })(),
+                combinedPoints.length > 0 && /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: combinedPoints.map((p, i) => {
+                      const sx = scaleX(p.x);
+                      const sy = scaleY(p.y);
+                      return i === 0 ? `M${sx},${sy}` : `L${sx},${sy}`;
+                    }).join(" "),
+                    fill: "none",
+                    stroke: "#e4e4e7",
+                    strokeWidth: "1.5"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: scaleX(spotPrice),
+                    y1: PADDING.top,
+                    x2: scaleX(spotPrice),
+                    y2: PADDING.top + chartH,
+                    stroke: "#a1a1aa",
+                    strokeWidth: "1",
+                    strokeDasharray: "3,3"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: scaleX(spotPrice),
+                    y: PADDING.top + chartH + 14,
+                    fill: "#a1a1aa",
+                    fontSize: "9",
+                    fontFamily: "monospace",
+                    textAnchor: "middle",
+                    children: spotPrice.toFixed(2)
+                  }
+                ),
+                breakevens.map((be, i) => /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx("circle", { cx: scaleX(be), cy: zeroY, r: "3", fill: "#fbbf24", stroke: "#18181b", strokeWidth: "1" }),
+                  /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: scaleX(be),
+                      y: PADDING.top + chartH + 14,
+                      fill: "#fbbf24",
+                      fontSize: "8",
+                      fontFamily: "monospace",
+                      textAnchor: "middle",
+                      children: be.toFixed(1)
+                    }
+                  )
+                ] }, `be-${i}`)),
+                maxGainPoint && maxGain > 0 && /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+                  "polygon",
+                  {
+                    points: `${scaleX(maxGainPoint.x)},${scaleY(maxGainPoint.y) - 8} ${scaleX(maxGainPoint.x) - 4},${scaleY(maxGainPoint.y) - 2} ${scaleX(maxGainPoint.x) + 4},${scaleY(maxGainPoint.y) - 2}`,
+                    fill: "#22c55e"
+                  }
+                ) }),
+                maxLossPoint && maxLoss < 0 && /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+                  "polygon",
+                  {
+                    points: `${scaleX(maxLossPoint.x)},${scaleY(maxLossPoint.y) + 8} ${scaleX(maxLossPoint.x) - 4},${scaleY(maxLossPoint.y) + 2} ${scaleX(maxLossPoint.x) + 4},${scaleY(maxLossPoint.y) + 2}`,
+                    fill: "#ef4444"
+                  }
+                ) }),
+                hoverX !== null && hoverPnl !== null && /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: scaleX(hoverX),
+                      y1: PADDING.top,
+                      x2: scaleX(hoverX),
+                      y2: PADDING.top + chartH,
+                      stroke: "#52525b",
+                      strokeWidth: "1"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: scaleX(hoverX),
+                      cy: scaleY(hoverPnl),
+                      r: "3",
+                      fill: hoverPnl >= 0 ? "#22c55e" : "#ef4444",
+                      stroke: "#18181b",
+                      strokeWidth: "1"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: scaleX(hoverX) + 8,
+                      y: scaleY(hoverPnl) - 20,
+                      width: "90",
+                      height: "28",
+                      rx: "3",
+                      fill: "#18181b",
+                      stroke: "#3f3f46",
+                      strokeWidth: "1"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "text",
+                    {
+                      x: scaleX(hoverX) + 14,
+                      y: scaleY(hoverPnl) - 10,
+                      fill: "#a1a1aa",
+                      fontSize: "8",
+                      fontFamily: "monospace",
+                      children: [
+                        "$",
+                        hoverX.toFixed(2)
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "text",
+                    {
+                      x: scaleX(hoverX) + 14,
+                      y: scaleY(hoverPnl) + 1,
+                      fill: hoverPnl >= 0 ? "#22c55e" : "#ef4444",
+                      fontSize: "9",
+                      fontFamily: "monospace",
+                      fontWeight: "600",
+                      children: [
+                        hoverPnl >= 0 ? "+" : "",
+                        hoverPnl.toFixed(2)
+                      ]
+                    }
+                  )
+                ] }),
+                Array.from({ length: 5 }).map((_, i) => {
+                  const x = vb.xMin + (vb.xMax - vb.xMin) / 4 * i;
+                  return /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: scaleX(x),
+                      y: PADDING.top + chartH + 14,
+                      fill: "#52525b",
+                      fontSize: "8",
+                      fontFamily: "monospace",
+                      textAnchor: "middle",
+                      children: x.toFixed(0)
+                    },
+                    `x-label-${i}`
+                  );
+                })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4 px-2 pt-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-0.5 w-4 bg-zinc-200 rounded" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-zinc-400", children: "Combined" })
+            ] }),
+            legs.map((leg, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-0.5 w-4 rounded",
+                  style: {
+                    backgroundColor: LEG_COLORS[i % LEG_COLORS.length],
+                    opacity: 0.6,
+                    backgroundImage: `repeating-linear-gradient(90deg, transparent, transparent 2px, ${LEG_COLORS[i % LEG_COLORS.length]}00 2px, ${LEG_COLORS[i % LEG_COLORS.length]}00 5px)`
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+                leg.action === "buy" ? "B" : "S",
+                " ",
+                leg.quantity,
+                " ",
+                leg.strike,
+                " ",
+                leg.type === "call" ? "C" : "P"
+              ] })
+            ] }, i)),
+            breakevens.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-amber-400" }),
+              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+                "BE: ",
+                breakevens.map((b) => b.toFixed(1)).join(", ")
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+export { PnlDiagram };