@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

package/dist/esm/components/graph/graph.js

@@ -0,0 +1,606 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createChart } from "lightweight-charts";
+import * as React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { generateColorsFromBase } from "../../utils/colors.js";
+import {
+  getDefaultOptions,
+  getDefaultSeries,
+  getDefaultVerticalLine
+} from "./default-config.js";
+import { getXFormatter, getYFormatter } from "./formatters.js";
+import { GraphCurrentValue } from "./graph-current-value.js";
+import { GraphTooltip } from "./graph-tooltip.js";
+import { VertLine } from "./plugins/vertical-line.js";
+const DEFAULT_SERIES_COLORS = [
+  {
+    line: "#02c39a",
+    top: "rgba(2, 195, 154, 0.56)",
+    bottom: "rgba(2, 195, 154, 0.04)"
+  },
+  {
+    line: "#3b82f6",
+    top: "rgba(59, 130, 246, 0.56)",
+    bottom: "rgba(59, 130, 246, 0.04)"
+  },
+  {
+    line: "#f59e0b",
+    top: "rgba(245, 158, 11, 0.56)",
+    bottom: "rgba(245, 158, 11, 0.04)"
+  },
+  {
+    line: "#ef4444",
+    top: "rgba(239, 68, 68, 0.56)",
+    bottom: "rgba(239, 68, 68, 0.04)"
+  },
+  {
+    line: "#8b5cf6",
+    top: "rgba(139, 92, 246, 0.56)",
+    bottom: "rgba(139, 92, 246, 0.04)"
+  },
+  {
+    line: "#ec4899",
+    top: "rgba(236, 72, 153, 0.56)",
+    bottom: "rgba(236, 72, 153, 0.04)"
+  },
+  {
+    line: "#10b981",
+    top: "rgba(16, 185, 129, 0.56)",
+    bottom: "rgba(16, 185, 129, 0.04)"
+  },
+  {
+    line: "#06b6d4",
+    top: "rgba(6, 182, 212, 0.56)",
+    bottom: "rgba(6, 182, 212, 0.04)"
+  }
+];
+function Graph({
+  series,
+  graphId,
+  className,
+  showLegend = false,
+  onUnselectSeries,
+  xMeasureUnit = "time",
+  yMeasureUnit = "token",
+  optionsOverrides,
+  verticalLineOptions
+}) {
+  const chartRef = useRef(null);
+  const seriesRefs = useRef(/* @__PURE__ */ new Map());
+  const parentRef = useRef(null);
+  const allPoints = React.useMemo(() => {
+    return series.flatMap((s) => s.data);
+  }, [series]);
+  const initialPoint = React.useMemo(() => {
+    if (series.length > 0) {
+      const lastSeries = series[series.length - 1];
+      if (lastSeries.data.length > 0) {
+        return lastSeries.data[lastSeries.data.length - 1];
+      }
+    }
+    return void 0;
+  }, [series]);
+  const [currentPoints, subscribeLegendMove, tooltipPosition] = useCurrentPoint(
+    {
+      series,
+      initialPoint,
+      chartRef,
+      parentRef
+    }
+  );
+  useEffect(() => {
+    const handleUpdate = () => {
+      if (chartRef.current && parentRef.current) {
+        const width = parentRef.current.clientWidth;
+        const height = parentRef.current.clientHeight;
+        chartRef.current.resize(width, height);
+        chartRef.current.timeScale().fitContent();
+      }
+    };
+    const ref = parentRef.current;
+    const observer = ref ? new ResizeObserver(handleUpdate) : null;
+    if (ref) observer?.observe(ref);
+    return () => {
+      ref && observer?.unobserve(ref);
+    };
+  }, []);
+  useEffect(() => {
+    if (series.length === 0) return;
+    const xFormatter = xMeasureUnit === "time" ? getXFormatter(xMeasureUnit, allPoints) : getXFormatter(xMeasureUnit);
+    const yFormatter = getYFormatter(yMeasureUnit);
+    const minValue = allPoints.length > 0 ? Math.min(...allPoints.map((p) => p.value)) : 0;
+    const hasNegativeValues = minValue < 0;
+    const hasZero = allPoints.some((p) => p.value === 0);
+    const shouldPreventNegativeAxis = !hasNegativeValues && hasZero;
+    const useMultiplePriceScales = series.length > 1;
+    const shouldHideScaleLabels = useMultiplePriceScales;
+    const defaultOptions = getDefaultOptions();
+    const chart = initChart(graphId, {
+      ...defaultOptions,
+      localization: {
+        ...defaultOptions.localization || {},
+        timeFormatter: xFormatter ? (
+          // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
+          (price) => xFormatter(parseFloat(price), void 0)
+        ) : void 0
+      },
+      timeScale: {
+        ...defaultOptions.timeScale || {},
+        tickMarkFormatter: xFormatter ? (
+          // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
+          (price) => xFormatter(parseFloat(price), void 0)
+        ) : void 0,
+        minBarSpacing: 0
+      },
+      rightPriceScale: {
+        ...defaultOptions.rightPriceScale || {},
+        ...shouldPreventNegativeAxis && {
+          scaleMargins: {
+            top: 0.3,
+            bottom: 0
+          }
+        }
+      },
+      ...optionsOverrides
+    });
+    chartRef.current = chart;
+    chart.timeScale().fitContent();
+    const newSeriesMap = /* @__PURE__ */ new Map();
+    const defaultSeries = getDefaultSeries();
+    const priceScaleConfigs = [];
+    for (let i = 0; i < series.length; i++) {
+      const seriesConfig = series[i];
+      const colorPalette = DEFAULT_SERIES_COLORS[i % DEFAULT_SERIES_COLORS.length];
+      const baseColor = seriesConfig.color || colorPalette.line;
+      let topColor;
+      let bottomColor;
+      if (seriesConfig.color) {
+        if (seriesConfig.topColor && seriesConfig.bottomColor) {
+          topColor = seriesConfig.topColor;
+          bottomColor = seriesConfig.bottomColor;
+        } else if (seriesConfig.topColor) {
+          const generated = generateColorsFromBase(baseColor);
+          topColor = seriesConfig.topColor;
+          bottomColor = generated.bottomColor;
+        } else if (seriesConfig.bottomColor) {
+          const generated = generateColorsFromBase(baseColor);
+          topColor = generated.topColor;
+          bottomColor = seriesConfig.bottomColor;
+        } else {
+          const generated = generateColorsFromBase(baseColor);
+          topColor = generated.topColor;
+          bottomColor = generated.bottomColor;
+        }
+      } else {
+        topColor = seriesConfig.topColor || colorPalette.top;
+        bottomColor = seriesConfig.bottomColor || colorPalette.bottom;
+      }
+      const seriesMinValue = seriesConfig.data.length > 0 ? Math.min(...seriesConfig.data.map((p) => p.value)) : 0;
+      const seriesHasNegativeValues = seriesMinValue < 0;
+      const seriesHasZero = seriesConfig.data.some((p) => p.value === 0);
+      const seriesShouldPreventNegativeAxis = !seriesHasNegativeValues && seriesHasZero;
+      const priceScaleId = useMultiplePriceScales ? i === 0 ? void 0 : `scale-${i}` : void 0;
+      if (useMultiplePriceScales) {
+        priceScaleConfigs.push({
+          priceScaleId: priceScaleId || "right",
+          // Use "right" for default scale
+          shouldPreventNegativeAxis: seriesShouldPreventNegativeAxis,
+          seriesIndex: i
+        });
+      }
+      const areaSeries = chart.addAreaSeries({
+        ...defaultSeries,
+        lineColor: baseColor,
+        topColor,
+        bottomColor,
+        priceScaleId,
+        priceFormat: {
+          type: "custom",
+          formatter: (price) => yFormatter(parseFloat(price.toString()), void 0, "short")
+        }
+      });
+      areaSeries.setData(seriesConfig.data);
+      newSeriesMap.set(seriesConfig.label, areaSeries);
+    }
+    if (useMultiplePriceScales && priceScaleConfigs.length > 0) {
+      for (const config of priceScaleConfigs) {
+        try {
+          const priceScale = chart.priceScale(config.priceScaleId);
+          if (priceScale) {
+            priceScale.applyOptions({
+              visible: !shouldHideScaleLabels,
+              // Hide entire scale when spread is large
+              autoScale: true,
+              scaleMargins: {
+                top: 0.1,
+                bottom: 0.1,
+                ...config.shouldPreventNegativeAxis && {
+                  top: 0.3,
+                  bottom: 0
+                }
+              },
+              alignLabels: true,
+              borderVisible: true,
+              borderColor: "rgba(224, 227, 235, 0.1)",
+              entireTextOnly: false
+            });
+          }
+        } catch (error) {
+          console.warn(
+            `Failed to configure price scale ${config.priceScaleId} for series ${config.seriesIndex}:`,
+            error
+          );
+        }
+      }
+    }
+    seriesRefs.current = newSeriesMap;
+    subscribeLegendMove(chart, Array.from(newSeriesMap.values()));
+    const timeScale = chart.timeScale();
+    const maxLength = Math.max(...series.map((s) => s.data.length));
+    const handleVisibleTimeRangeChange = () => {
+      if (maxLength === 0) return;
+      const visibleRange = timeScale.getVisibleLogicalRange();
+      if (!visibleRange) return;
+      const dataRange = {
+        from: 0,
+        to: maxLength - 1
+      };
+      const fromValue = typeof visibleRange.from === "number" ? visibleRange.from : 0;
+      const toValue = typeof visibleRange.to === "number" ? visibleRange.to : maxLength - 1;
+      const TOLERANCE = 0.01;
+      let needsAdjustment = false;
+      const newRange = { ...visibleRange };
+      if (fromValue < dataRange.from - TOLERANCE) {
+        newRange.from = dataRange.from;
+        needsAdjustment = true;
+      }
+      if (toValue > dataRange.to + TOLERANCE) {
+        newRange.to = dataRange.to;
+        needsAdjustment = true;
+      }
+      if (needsAdjustment) {
+        timeScale.setVisibleLogicalRange(newRange);
+      }
+    };
+    timeScale.subscribeVisibleLogicalRangeChange(handleVisibleTimeRangeChange);
+    return () => {
+      timeScale.unsubscribeVisibleLogicalRangeChange(
+        handleVisibleTimeRangeChange
+      );
+      chart.remove();
+    };
+  }, [
+    graphId,
+    series,
+    allPoints,
+    xMeasureUnit,
+    yMeasureUnit,
+    optionsOverrides,
+    subscribeLegendMove
+  ]);
+  useEffect(() => {
+    const ch = chartRef.current;
+    const seriesList = Array.from(seriesRefs.current.values());
+    const list = [];
+    if (ch && seriesList.length > 0 && verticalLineOptions) {
+      const defaultVerticalLine = getDefaultVerticalLine();
+      const firstSeries = seriesList[0];
+      for (const v of verticalLineOptions) {
+        const vertLine = new VertLine(ch, firstSeries, v.xCoordinate, {
+          ...defaultVerticalLine,
+          ...v.options || {}
+        });
+        firstSeries.attachPrimitive(vertLine);
+        list.push(vertLine);
+      }
+    }
+    return () => {
+      if (seriesList.length > 0) {
+        const firstSeries = seriesList[0];
+        for (const l of list) {
+          firstSeries.detachPrimitive(l);
+        }
+      }
+    };
+  }, [verticalLineOptions]);
+  const isSingleMode = series.length === 1;
+  const singleModePoint = React.useMemo(() => {
+    if (isSingleMode && series.length > 0) {
+      const singleSeries = series[0];
+      if (singleSeries.data.length > 0) {
+        return singleSeries.data[singleSeries.data.length - 1];
+      }
+    }
+    return void 0;
+  }, [isSingleMode, series]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: parentRef,
+      className: cn(
+        "relative z-[1] w-full h-full overflow-hidden p-0",
+        className
+      ),
+      children: [
+        isSingleMode && singleModePoint && /* @__PURE__ */ jsx(
+          GraphCurrentValue,
+          {
+            point: singleModePoint,
+            xMeasureUnit,
+            yMeasureUnit
+          }
+        ),
+        currentPoints && tooltipPosition && /* @__PURE__ */ jsx(
+          GraphTooltip,
+          {
+            points: currentPoints,
+            xMeasureUnit,
+            yMeasureUnit,
+            series,
+            position: tooltipPosition,
+            containerRef: parentRef
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsx(GraphLegend, { series, onUnselect: onUnselectSeries }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: graphId,
+            className: "LightweightChart w-full h-full overflow-hidden"
+          }
+        )
+      ]
+    }
+  );
+}
+function initChart(id, config) {
+  return createChart(id, config);
+}
+function useCurrentPoint({
+  series,
+  initialPoint,
+  chartRef,
+  parentRef
+}) {
+  const [currentPoints, setCurrentPoints] = useState(() => {
+    if (!initialPoint) return void 0;
+    const map = /* @__PURE__ */ new Map();
+    for (const s of series) {
+      if (s.data.length > 0) {
+        map.set(s.label, s.data[s.data.length - 1]);
+      }
+    }
+    return map;
+  });
+  const [tooltipPosition, setTooltipPosition] = useState(null);
+  useEffect(() => {
+    if (initialPoint) {
+      const map = /* @__PURE__ */ new Map();
+      for (const s of series) {
+        if (s.data.length > 0) {
+          map.set(s.label, initialPoint);
+        }
+      }
+      setCurrentPoints(map);
+    } else {
+      const map = /* @__PURE__ */ new Map();
+      for (const s of series) {
+        if (s.data.length > 0) {
+          map.set(s.label, s.data[s.data.length - 1]);
+        }
+      }
+      setCurrentPoints(map.size > 0 ? map : void 0);
+    }
+  }, [initialPoint, series]);
+  const updateLastPointPosition = useCallback(
+    (chart, areaSeriesList, lastTime) => {
+      if (areaSeriesList.length === 0 || series.length === 0) return;
+      const lastPoints = /* @__PURE__ */ new Map();
+      let lastFirstValue;
+      for (let i = 0; i < series.length; i++) {
+        const seriesConfig = series[i];
+        if (seriesConfig.data.length === 0) continue;
+        const lastPoint = seriesConfig.data[seriesConfig.data.length - 1];
+        lastPoints.set(seriesConfig.label, lastPoint);
+        if (i === 0) {
+          lastFirstValue = lastPoint.value;
+        }
+      }
+      setCurrentPoints(lastPoints.size > 0 ? lastPoints : void 0);
+      if (lastFirstValue !== void 0 && areaSeriesList[0]) {
+        const timeScale = chart.timeScale();
+        const xCoord = timeScale.timeToCoordinate(lastTime);
+        const yCoord = areaSeriesList[0].priceToCoordinate(lastFirstValue);
+        if (xCoord !== null && yCoord !== null) {
+          const container = parentRef.current;
+          if (container) {
+            const chartElement = container.querySelector(
+              ".LightweightChart"
+            );
+            if (chartElement) {
+              const chartRect = chartElement.getBoundingClientRect();
+              const containerRect = container.getBoundingClientRect();
+              const relativeX = xCoord + (chartRect.left - containerRect.left);
+              const relativeY = yCoord + (chartRect.top - containerRect.top);
+              setTooltipPosition({ x: relativeX, y: relativeY });
+            } else {
+              setTooltipPosition({ x: xCoord, y: yCoord });
+            }
+          } else {
+            setTooltipPosition({ x: xCoord, y: yCoord });
+          }
+        } else {
+          setTooltipPosition(null);
+        }
+      } else {
+        setTooltipPosition(null);
+      }
+    },
+    [series, parentRef]
+  );
+  const subscribeLegendMove = useCallback(
+    (chart, areaSeriesList) => {
+      let lastTime;
+      for (const s of series) {
+        if (s.data.length > 0) {
+          const lastPoint = s.data[s.data.length - 1];
+          lastTime = lastPoint.time;
+          break;
+        }
+      }
+      if (!lastTime) return;
+      const isSingleMode = series.length === 1;
+      if (!isSingleMode) {
+        requestAnimationFrame(() => {
+          if (lastTime) {
+            updateLastPointPosition(chart, areaSeriesList, lastTime);
+          }
+        });
+      } else {
+        const lastPoints = /* @__PURE__ */ new Map();
+        for (const s of series) {
+          if (s.data.length > 0) {
+            const lastPoint = s.data[s.data.length - 1];
+            lastPoints.set(s.label, lastPoint);
+          }
+        }
+        if (lastPoints.size > 0) {
+          setCurrentPoints(lastPoints);
+        }
+        setTooltipPosition(null);
+      }
+      chart.subscribeCrosshairMove((param) => {
+        const { time = lastTime, seriesData, point } = param || {};
+        if (!point || !time) {
+          if (isSingleMode) {
+            const lastPoints = /* @__PURE__ */ new Map();
+            for (const s of series) {
+              if (s.data.length > 0) {
+                const lastPoint = s.data[s.data.length - 1];
+                lastPoints.set(s.label, lastPoint);
+              }
+            }
+            if (lastPoints.size > 0) {
+              setCurrentPoints(lastPoints);
+            }
+            setTooltipPosition(null);
+          } else {
+            updateLastPointPosition(chart, areaSeriesList, lastTime);
+          }
+          return;
+        }
+        const newPoints = /* @__PURE__ */ new Map();
+        let firstValue;
+        for (let i = 0; i < series.length; i++) {
+          const seriesConfig = series[i];
+          const areaSeries = areaSeriesList[i];
+          if (!areaSeries) continue;
+          const valueData = seriesData?.get(areaSeries);
+          const unsafeValue = valueData && "value" in valueData ? valueData.value : void 0;
+          const lastPoint = seriesConfig.data[seriesConfig.data.length - 1];
+          const value = unsafeValue !== void 0 ? unsafeValue : lastPoint.value;
+          if (i === 0) {
+            firstValue = value;
+          }
+          newPoints.set(seriesConfig.label, { value, time });
+        }
+        setCurrentPoints(newPoints);
+        if (chartRef.current && firstValue !== void 0 && areaSeriesList[0]) {
+          const timeScale = chart.timeScale();
+          const xCoord = timeScale.timeToCoordinate(time);
+          const yCoord = areaSeriesList[0].priceToCoordinate(firstValue);
+          if (xCoord !== null && yCoord !== null) {
+            const container = parentRef.current;
+            if (container) {
+              const chartElement = container.querySelector(
+                ".LightweightChart"
+              );
+              if (chartElement) {
+                const chartRect = chartElement.getBoundingClientRect();
+                const containerRect = container.getBoundingClientRect();
+                const relativeX = xCoord + (chartRect.left - containerRect.left);
+                const relativeY = yCoord + (chartRect.top - containerRect.top);
+                setTooltipPosition({ x: relativeX, y: relativeY });
+              } else {
+                setTooltipPosition({ x: xCoord, y: yCoord });
+              }
+            } else {
+              setTooltipPosition({ x: xCoord, y: yCoord });
+            }
+          } else {
+            setTooltipPosition(null);
+          }
+        } else {
+          setTooltipPosition(null);
+        }
+      });
+    },
+    [series, chartRef, parentRef, updateLastPointPosition]
+  );
+  return [currentPoints, subscribeLegendMove, tooltipPosition];
+}
+function GraphLegend({
+  series,
+  onUnselect
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: series.map((s, index) => {
+    const colorPalette = DEFAULT_SERIES_COLORS[index % DEFAULT_SERIES_COLORS.length];
+    const lineColor = s.color || colorPalette.line;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-3 h-3 rounded-sm",
+              style: { backgroundColor: lineColor }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: s.label }),
+          onUnselect && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onUnselect(s.label);
+              },
+              className: "ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors",
+              "aria-label": `Remove ${s.label}`,
+              children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "12",
+                  height: "12",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "text-muted-foreground hover:text-foreground",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx("title", { children: "Close" }),
+                    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      },
+      s.label
+    );
+  }) });
+}
+export {
+  DEFAULT_SERIES_COLORS,
+  Graph
+};

package/dist/esm/components/graph/index.js

@@ -0,0 +1,15 @@
+export * from "./default-config.js";
+import {
+  getXFormatter,
+  getYFormatter
+} from "./formatters.js";
+export * from "./graph.js";
+export * from "./graph-current-value.js";
+export * from "./graph-tooltip.js";
+export * from "./graph-view.js";
+import { VertLine } from "./plugins/vertical-line.js";
+export {
+  VertLine,
+  getXFormatter,
+  getYFormatter
+};