gitea

frontend/components/sparkline.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+interface SparklineProps {
+    data: number[]
+    width?: number
+    height?: number
+    color?: string
+    strokeWidth?: number
+}
+
+export function Sparkline({
+    data,
+    width = 120,
+    height = 40,
+    color = 'currentColor',
+    strokeWidth = 2
+}: SparklineProps) {
+    if (!data || data.length < 2) {
+        return null
+    }
+
+    // Normalize data to fit height
+    const min = Math.min(...data)
+    const max = Math.max(...data)
+    const range = max - min || 1 // Avoid division by zero
+
+    // Calculate points
+    const points = data.map((value, index) => {
+        const x = (index / (data.length - 1)) * width
+        const y = height - ((value - min) / range) * height
+        return `${x},${y}`
+    }).join(' ')
+
+    return (
+        <svg width={width} height={height} className="overflow-visible">
+            <polyline
+                points={points}
+                fill="none"
+                stroke={color}
+                strokeWidth={strokeWidth}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    )
+}