@peers-app/peers-ui 0.27.2 → 0.27.4

package/src/screens/network-viewer/usage-graph.tsx

@@ -1,455 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-interface IDataPoint {
-  timestamp: number;
-  value: number;
-}
-
-interface IColorZone {
-  /**
-   * Maximum value for this zone (exclusive). Use Infinity for the last zone.
-   */
-  maxValue: number;
-  /**
-   * Color to use in this zone
-   */
-  color: string;
-}
-
-interface IUsageGraphProps {
-  /**
-   * Function to fetch current usage value
-   */
-  fetchUsage: () => Promise<number>;
-  /**
-   * Label to display in the overlay (e.g., "CPU", "Memory")
-   */
-  label: string;
-  /**
-   * Duration in minutes to display
-   */
-  durationMinutes?: number;
-  /**
-   * Update interval in milliseconds
-   */
-  updateInterval?: number;
-  /**
-   * Minimum height in pixels (optional, defaults to 80)
-   */
-  minHeight?: number;
-  /**
-   * Color for the graph line and gradient (optional, defaults to blue)
-   */
-  color?: string;
-  /**
-   * Color for the overlay text (optional, defaults to transparent white)
-   */
-  overlayTextColor?: string;
-  /**
-   * Minimum value for y-axis (optional, defaults to 0)
-   */
-  minValue?: number;
-  /**
-   * Maximum value for y-axis (optional, defaults to 100)
-   */
-  maxValue?: number;
-  /**
-   * Custom function to format the overlay text (optional, defaults to showing percentage)
-   */
-  formatOverlayText?: (value: number, label: string) => string;
-  /**
-   * Color zones based on value thresholds (optional)
-   * Example: [{ maxValue: 50, color: 'green' }, { maxValue: 75, color: 'orange' }, { maxValue: Infinity, color: 'red' }]
-   * If not provided, uses single color throughout
-   */
-  colorZones?: IColorZone[];
-}
-
-export function UsageGraph({
-  fetchUsage,
-  label,
-  durationMinutes = 5,
-  updateInterval = 5000,
-  minHeight = 80,
-  color = "rgba(13, 110, 253, 1)",
-  overlayTextColor = "rgba(255, 255, 255, 0.7)",
-  minValue = 0,
-  maxValue = 100,
-  formatOverlayText,
-  colorZones,
-}: IUsageGraphProps) {
-  const [dataPoints, setDataPoints] = useState<IDataPoint[]>([]);
-  const [currentValue, setCurrentValue] = useState<number>(0);
-  const [width, setWidth] = useState<number>(400);
-  const [height, setHeight] = useState<number>(minHeight);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
-
-  // const maxDataPoints = ((durationMinutes * 60 * 1000) / updateInterval) + 2;
-
-  // Observe container size and update width and height
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const newWidth = entry.contentRect.width;
-        const newHeight = entry.contentRect.height;
-        if (newWidth > 0) {
-          setWidth(newWidth);
-        }
-        if (newHeight > 0) {
-          setHeight(Math.max(newHeight, minHeight));
-        }
-      }
-    });
-
-    resizeObserver.observe(containerRef.current);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [minHeight]);
-
-  useEffect(() => {
-    const updateData = async () => {
-      try {
-        const value = await fetchUsage();
-        setCurrentValue(value);
-
-        setDataPoints((prev) => {
-          const newPoint: IDataPoint = {
-            timestamp: Date.now(),
-            value: value,
-          };
-
-          const updated = [...prev, newPoint];
-          const oldestAllowedTime = Date.now() - durationMinutes * 60 * 1000;
-          const filtered = updated.filter((point) => point.timestamp >= oldestAllowedTime);
-          return filtered;
-        });
-      } catch (error) {
-        console.error(`Error fetching ${label} usage:`, error);
-      }
-    };
-
-    // Initial fetch
-    updateData();
-
-    // Set up interval
-    intervalRef.current = setInterval(updateData, updateInterval);
-
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, [fetchUsage, updateInterval, label, durationMinutes]);
-
-  // Get color for a value based on color zones
-  const getColorForValue = (value: number): string => {
-    if (!colorZones || colorZones.length === 0) {
-      return color;
-    }
-
-    // Find the appropriate color zone
-    for (const zone of colorZones) {
-      if (value < zone.maxValue) {
-        return zone.color;
-      }
-    }
-
-    // Default to last zone color if value exceeds all zones
-    return colorZones[colorZones.length - 1].color;
-  };
-
-  // Calculate SVG path segments with colors
-  const getLineSegments = (): Array<{ path: string; color: string }> => {
-    if (dataPoints.length < 2) return [];
-
-    const paddingLeft = 25;
-    const paddingRight = 10;
-    const paddingTop = 10;
-    const paddingBottom = 10;
-    const chartWidth = width - paddingLeft - paddingRight;
-    const chartHeight = height - paddingTop - paddingBottom;
-
-    // Use full time range, but adjust minTime to start at oldest data point
-    const now = Date.now();
-    const timeRange = durationMinutes * 60 * 1000;
-    const minTime = Math.min(dataPoints[0].timestamp, now - timeRange);
-
-    const points = dataPoints.map((point) => {
-      // X: Map timestamp to chart width
-      const x = paddingLeft + ((point.timestamp - minTime) / timeRange) * chartWidth;
-
-      // Y: Map value (minValue-maxValue) to chart height (inverted because SVG Y grows downward)
-      const valueRange = maxValue - minValue;
-      const normalizedValue = (point.value - minValue) / valueRange;
-      const y = paddingTop + chartHeight - normalizedValue * chartHeight;
-
-      return { x, y, value: point.value };
-    });
-
-    // If no color zones, return single segment
-    if (!colorZones || colorZones.length === 0) {
-      const pathData = points
-        .map((point, idx) => {
-          if (idx === 0) {
-            return `M ${point.x} ${point.y}`;
-          }
-          return `L ${point.x} ${point.y}`;
-        })
-        .join(" ");
-      return [{ path: pathData, color }];
-    }
-
-    // Create segments based on color zones
-    const segments: Array<{ path: string; color: string }> = [];
-    let currentPath = `M ${points[0].x} ${points[0].y}`;
-    let currentColor = getColorForValue(points[0].value);
-
-    for (let i = 1; i < points.length; i++) {
-      const pointColor = getColorForValue(points[i].value);
-
-      if (pointColor !== currentColor) {
-        // Color changed, finish current segment and start new one
-        segments.push({ path: currentPath, color: currentColor });
-        currentPath = `M ${points[i - 1].x} ${points[i - 1].y} L ${points[i].x} ${points[i].y}`;
-        currentColor = pointColor;
-      } else {
-        // Same color, continue path
-        currentPath += ` L ${points[i].x} ${points[i].y}`;
-      }
-    }
-
-    // Add final segment
-    if (currentPath) {
-      segments.push({ path: currentPath, color: currentColor });
-    }
-
-    return segments;
-  };
-
-  // Calculate SVG path (for gradient fill)
-  const getLinePath = (): string => {
-    if (dataPoints.length < 2) return "";
-
-    const paddingLeft = 25;
-    const paddingRight = 10;
-    const paddingTop = 10;
-    const paddingBottom = 10;
-    const chartWidth = width - paddingLeft - paddingRight;
-    const chartHeight = height - paddingTop - paddingBottom;
-
-    // Use full time range, but adjust minTime to start at oldest data point
-    const now = Date.now();
-    const timeRange = durationMinutes * 60 * 1000;
-    const minTime = Math.min(dataPoints[0].timestamp, now - timeRange);
-
-    const points = dataPoints.map((point) => {
-      // X: Map timestamp to chart width
-      const x = paddingLeft + ((point.timestamp - minTime) / timeRange) * chartWidth;
-
-      // Y: Map value (minValue-maxValue) to chart height (inverted because SVG Y grows downward)
-      const valueRange = maxValue - minValue;
-      const normalizedValue = (point.value - minValue) / valueRange;
-      const y = paddingTop + chartHeight - normalizedValue * chartHeight;
-
-      return { x, y };
-    });
-
-    // Create SVG path
-    const pathData = points
-      .map((point, idx) => {
-        if (idx === 0) {
-          return `M ${point.x} ${point.y}`;
-        }
-        return `L ${point.x} ${point.y}`;
-      })
-      .join(" ");
-
-    return pathData;
-  };
-
-  // Get gradient path for fill
-  const getGradientPath = (): string => {
-    const linePath = getLinePath();
-    if (!linePath) return "";
-
-    const paddingLeft = 25;
-    const paddingRight = 10;
-    const paddingBottom = 10;
-
-    // Close the path at the bottom
-    return `${linePath} L ${width - paddingRight} ${height - paddingBottom} L ${paddingLeft} ${height - paddingBottom} Z`;
-  };
-
-  const _linePath = getLinePath();
-  const gradientPath = getGradientPath();
-  const lineSegments = getLineSegments();
-
-  // Parse color for gradient
-  const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
-  const gradientColor = rgbaMatch
-    ? `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0.3)`
-    : "rgba(13, 110, 253, 0.3)";
-  const gradientColorLight = rgbaMatch
-    ? `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0.05)`
-    : "rgba(13, 110, 253, 0.05)";
-
-  return (
-    <div
-      ref={containerRef}
-      className="usage-graph"
-      style={{
-        margin: 0,
-        padding: 0,
-        position: "relative",
-        width: "100%",
-        height: "100%",
-        minHeight: `${minHeight}px`,
-      }}
-    >
-      <svg
-        width={width}
-        height={height}
-        style={{
-          border: "1px solid rgba(128, 128, 128, 0.2)",
-          borderRadius: "4px",
-          backgroundColor: "rgba(0, 0, 0, 0.02)",
-          display: "block",
-        }}
-      >
-        <defs>
-          <linearGradient id={`${label}Gradient`} x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" stopColor={gradientColor} />
-            <stop offset="100%" stopColor={gradientColorLight} />
-          </linearGradient>
-        </defs>
-
-        {/* Grid lines */}
-        {[0, 0.25, 0.5, 0.75, 1].map((fraction) => {
-          const paddingLeft = 25;
-          const paddingRight = 10;
-          const paddingTop = 10;
-          const paddingBottom = 10;
-          const chartHeight = height - paddingTop - paddingBottom;
-          const value = minValue + fraction * (maxValue - minValue);
-          const y = paddingTop + chartHeight - fraction * chartHeight;
-          return (
-            <g key={fraction}>
-              <line
-                x1={paddingLeft}
-                y1={y}
-                x2={width - paddingRight}
-                y2={y}
-                stroke="rgba(128, 128, 128, 0.1)"
-                strokeWidth="1"
-              />
-              <text
-                x={paddingLeft - 5}
-                y={y + 4}
-                fontSize="10"
-                fill="rgba(128, 128, 128, 0.6)"
-                textAnchor="end"
-              >
-                {Math.round(value)}
-              </text>
-            </g>
-          );
-        })}
-
-        {/* Fill area under the line */}
-        {gradientPath && <path d={gradientPath} fill={`url(#${label}Gradient)`} />}
-
-        {/* Line segments with color zones */}
-        {lineSegments.map((segment, idx) => (
-          <path
-            key={idx}
-            d={segment.path}
-            stroke={segment.color}
-            strokeWidth="2"
-            fill="none"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        ))}
-
-        {/* Data points */}
-        {dataPoints.map((point, idx) => {
-          const paddingLeft = 25;
-          const paddingRight = 10;
-          const paddingTop = 10;
-          const paddingBottom = 10;
-          const chartWidth = width - paddingLeft - paddingRight;
-          const chartHeight = height - paddingTop - paddingBottom;
-
-          // Use full time range, but adjust minTime to start at oldest data point
-          const now = Date.now();
-          const timeRange = durationMinutes * 60 * 1000;
-          const minTime = Math.min(dataPoints[0].timestamp, now - timeRange);
-
-          const x = paddingLeft + ((point.timestamp - minTime) / timeRange) * chartWidth;
-          const valueRange = maxValue - minValue;
-          const normalizedValue = (point.value - minValue) / valueRange;
-          const y = paddingTop + chartHeight - normalizedValue * chartHeight;
-
-          // Only show the last point as a visible dot
-          if (idx !== dataPoints.length - 1) return null;
-
-          const pointColor = getColorForValue(point.value);
-
-          return (
-            <circle
-              key={idx}
-              cx={x}
-              cy={y}
-              r="3"
-              fill={pointColor}
-              stroke="white"
-              strokeWidth="1.5"
-            />
-          );
-        })}
-
-        {/* No data message */}
-        {dataPoints.length === 0 && (
-          <text
-            x={width / 2}
-            y={height / 2}
-            fontSize="12"
-            fill="rgba(128, 128, 128, 0.6)"
-            textAnchor="middle"
-          >
-            Collecting data...
-          </text>
-        )}
-      </svg>
-
-      {/* Centered overlay text */}
-      <div
-        style={{
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
-          fontSize: "2rem",
-          fontWeight: "bold",
-          color: overlayTextColor,
-          pointerEvents: "none",
-          userSelect: "none",
-          textAlign: "center",
-          lineHeight: "1.2",
-          whiteSpace: "nowrap",
-          maxWidth: "95%",
-          overflowWrap: "break-word",
-        }}
-      >
-        {formatOverlayText
-          ? formatOverlayText(currentValue, label)
-          : `${label}  ${Math.round(currentValue)}%`}
-      </div>
-    </div>
-  );
-}