@wakastellar/ui 3.2.0 → 3.3.0

package/src/components/waka-credit-burn-rate/index.tsx

@@ -0,0 +1,475 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { TrendingDown, Clock, AlertTriangle } from "lucide-react"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface WakaCreditBurnRateProps {
+  /** Array of daily usage data points */
+  dailyUsage: { date: string; value: number }[]
+  /** Current credit balance */
+  balance: number
+  /** Show projection line on the sparkline */
+  showProjection?: boolean
+  /** Number of days to project forward */
+  projectionDays?: number
+  /** Width of the SVG sparkline */
+  width?: number
+  /** Height of the SVG sparkline */
+  height?: number
+  /** Animate the sparkline on mount */
+  animated?: boolean
+  /** Display variant */
+  variant?: "sparkline" | "card"
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+function calculateAvgBurnRate(dailyUsage: { date: string; value: number }[]): number {
+  if (dailyUsage.length === 0) return 0
+
+  const last7 = dailyUsage.slice(-7)
+  const sum = last7.reduce((acc, point) => acc + point.value, 0)
+  return sum / last7.length
+}
+
+function getDaysRemaining(balance: number, avgBurnRate: number): number {
+  if (avgBurnRate <= 0) return Infinity
+  return Math.floor(balance / avgBurnRate)
+}
+
+function getDepletionDate(daysRemaining: number): Date | null {
+  if (!isFinite(daysRemaining) || daysRemaining <= 0) return null
+  const date = new Date()
+  date.setDate(date.getDate() + daysRemaining)
+  return date
+}
+
+function formatDate(date: Date): string {
+  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
+}
+
+function getStatusColor(daysRemaining: number): {
+  stroke: string
+  text: string
+  bg: string
+  label: string
+} {
+  if (daysRemaining < 7) {
+    return {
+      stroke: "#ef4444",
+      text: "text-red-600",
+      bg: "bg-red-100 dark:bg-red-950",
+      label: "Critical",
+    }
+  }
+  if (daysRemaining <= 30) {
+    return {
+      stroke: "#f59e0b",
+      text: "text-amber-600",
+      bg: "bg-amber-100 dark:bg-amber-950",
+      label: "Warning",
+    }
+  }
+  return {
+    stroke: "#22c55e",
+    text: "text-green-600",
+    bg: "bg-green-100 dark:bg-green-950",
+    label: "Healthy",
+  }
+}
+
+// ============================================================================
+// Sparkline SVG Component
+// ============================================================================
+
+interface SparklineSVGProps {
+  dailyUsage: { date: string; value: number }[]
+  avgBurnRate: number
+  width: number
+  height: number
+  showProjection: boolean
+  projectionDays: number
+  statusColor: string
+  animated: boolean
+}
+
+function SparklineSVG({
+  dailyUsage,
+  avgBurnRate,
+  width,
+  height,
+  showProjection,
+  projectionDays,
+  statusColor,
+  animated,
+}: SparklineSVGProps) {
+  const [pathLength, setPathLength] = React.useState(0)
+  const [isAnimated, setIsAnimated] = React.useState(!animated)
+  const pathRef = React.useRef<SVGPolylineElement>(null)
+
+  const padding = 2
+  const chartWidth = width - padding * 2
+  const chartHeight = height - padding * 2
+
+  // Calculate total data length (historical + projection)
+  const totalPoints = dailyUsage.length + (showProjection ? projectionDays : 0)
+
+  // Get min/max across all data
+  const values = dailyUsage.map((d) => d.value)
+  const projectedValues = showProjection
+    ? Array.from({ length: projectionDays }, () => avgBurnRate)
+    : []
+  const allValues = [...values, ...projectedValues]
+
+  const min = Math.min(...allValues, 0)
+  const max = Math.max(...allValues, 1)
+  const range = max - min || 1
+
+  // Historical points
+  const historicalPoints = dailyUsage.map((d, i) => {
+    const x = padding + (i / (totalPoints - 1)) * chartWidth
+    const y = padding + chartHeight - ((d.value - min) / range) * chartHeight
+    return `${x},${y}`
+  })
+
+  // Projection points (continue from last historical point)
+  const projectionPoints: string[] = []
+  if (showProjection && dailyUsage.length > 0) {
+    // Start from the last historical point
+    const lastHistIdx = dailyUsage.length - 1
+    const lastX = padding + (lastHistIdx / (totalPoints - 1)) * chartWidth
+    const lastY =
+      padding + chartHeight - ((dailyUsage[lastHistIdx].value - min) / range) * chartHeight
+    projectionPoints.push(`${lastX},${lastY}`)
+
+    for (let i = 1; i <= projectionDays; i++) {
+      const x = padding + ((dailyUsage.length - 1 + i) / (totalPoints - 1)) * chartWidth
+      const y = padding + chartHeight - ((avgBurnRate - min) / range) * chartHeight
+      projectionPoints.push(`${x},${y}`)
+    }
+  }
+
+  // Animation effect
+  React.useEffect(() => {
+    if (pathRef.current) {
+      setPathLength(pathRef.current.getTotalLength())
+    }
+  }, [dailyUsage])
+
+  React.useEffect(() => {
+    if (animated && pathLength > 0) {
+      const timer = setTimeout(() => setIsAnimated(true), 50)
+      return () => clearTimeout(timer)
+    }
+  }, [animated, pathLength])
+
+  if (dailyUsage.length < 2) {
+    return (
+      <svg width={width} height={height}>
+        <text
+          x={width / 2}
+          y={height / 2}
+          textAnchor="middle"
+          dominantBaseline="middle"
+          className="text-xs fill-muted-foreground"
+        >
+          Not enough data
+        </text>
+      </svg>
+    )
+  }
+
+  return (
+    <svg width={width} height={height} className="overflow-visible">
+      {/* Historical data line (solid) */}
+      <polyline
+        ref={pathRef}
+        points={historicalPoints.join(" ")}
+        fill="none"
+        stroke={statusColor}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={
+          animated && pathLength > 0
+            ? {
+                strokeDasharray: pathLength,
+                strokeDashoffset: isAnimated ? 0 : pathLength,
+                transition: "stroke-dashoffset 1s ease-out",
+              }
+            : undefined
+        }
+      />
+
+      {/* Projection line (dashed, lighter) */}
+      {showProjection && projectionPoints.length > 1 && (
+        <polyline
+          points={projectionPoints.join(" ")}
+          fill="none"
+          stroke={statusColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeDasharray="4,3"
+          opacity="0.5"
+          className={cn(
+            animated && "transition-opacity duration-500",
+            animated && (isAnimated ? "opacity-50" : "opacity-0")
+          )}
+        />
+      )}
+
+      {/* Current point indicator */}
+      {dailyUsage.length > 0 && (
+        <circle
+          cx={parseFloat(historicalPoints[historicalPoints.length - 1].split(",")[0])}
+          cy={parseFloat(historicalPoints[historicalPoints.length - 1].split(",")[1])}
+          r="2.5"
+          fill={statusColor}
+          stroke="white"
+          strokeWidth="1"
+          className={cn(
+            animated && "transition-opacity duration-500",
+            animated && (isAnimated ? "opacity-100" : "opacity-0")
+          )}
+        />
+      )}
+    </svg>
+  )
+}
+
+// ============================================================================
+// Sparkline Variant
+// ============================================================================
+
+interface SparklineVariantProps {
+  dailyUsage: { date: string; value: number }[]
+  avgBurnRate: number
+  daysRemaining: number
+  width: number
+  height: number
+  showProjection: boolean
+  projectionDays: number
+  animated: boolean
+  className?: string
+}
+
+function SparklineVariant({
+  dailyUsage,
+  avgBurnRate,
+  daysRemaining,
+  width,
+  height,
+  showProjection,
+  projectionDays,
+  animated,
+  className,
+}: SparklineVariantProps) {
+  const status = getStatusColor(daysRemaining)
+
+  return (
+    <div className={cn("inline-flex items-center gap-2", className)}>
+      <SparklineSVG
+        dailyUsage={dailyUsage}
+        avgBurnRate={avgBurnRate}
+        width={width}
+        height={height}
+        showProjection={showProjection}
+        projectionDays={projectionDays}
+        statusColor={status.stroke}
+        animated={animated}
+      />
+      <span className={cn("text-xs font-medium tabular-nums", status.text)}>
+        {isFinite(daysRemaining) ? `${daysRemaining}d` : "--"}
+      </span>
+    </div>
+  )
+}
+
+// ============================================================================
+// Card Variant
+// ============================================================================
+
+interface CardVariantProps {
+  dailyUsage: { date: string; value: number }[]
+  balance: number
+  avgBurnRate: number
+  daysRemaining: number
+  depletionDate: Date | null
+  width: number
+  height: number
+  showProjection: boolean
+  projectionDays: number
+  animated: boolean
+  className?: string
+}
+
+function CardVariant({
+  dailyUsage,
+  balance,
+  avgBurnRate,
+  daysRemaining,
+  depletionDate,
+  width,
+  height,
+  showProjection,
+  projectionDays,
+  animated,
+  className,
+}: CardVariantProps) {
+  const status = getStatusColor(daysRemaining)
+
+  return (
+    <div className={cn("rounded-lg border bg-card p-4 space-y-4", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+          <TrendingDown className="h-4 w-4" />
+          <span>Credit Burn Rate</span>
+        </div>
+        <div
+          className={cn(
+            "px-2 py-0.5 rounded-full text-xs font-medium",
+            status.bg,
+            status.text
+          )}
+        >
+          {status.label}
+        </div>
+      </div>
+
+      {/* Sparkline */}
+      <div className="flex justify-center">
+        <SparklineSVG
+          dailyUsage={dailyUsage}
+          avgBurnRate={avgBurnRate}
+          width={width}
+          height={height}
+          showProjection={showProjection}
+          projectionDays={projectionDays}
+          statusColor={status.stroke}
+          animated={animated}
+        />
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-3 gap-3">
+        {/* Burn Rate */}
+        <div className="space-y-1">
+          <div className="text-xs text-muted-foreground">Burn Rate</div>
+          <div className="text-lg font-bold tabular-nums">
+            {avgBurnRate.toFixed(1)}
+          </div>
+          <div className="text-xs text-muted-foreground">credits/day</div>
+        </div>
+
+        {/* Days Remaining */}
+        <div className="space-y-1">
+          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Clock className="h-3 w-3" />
+            <span>Days Left</span>
+          </div>
+          <div className={cn("text-lg font-bold tabular-nums", status.text)}>
+            {isFinite(daysRemaining) ? daysRemaining : "--"}
+          </div>
+          <div className="text-xs text-muted-foreground">
+            {balance.toLocaleString()} credits
+          </div>
+        </div>
+
+        {/* Depletion Date */}
+        <div className="space-y-1">
+          <div className="text-xs text-muted-foreground">Depleted By</div>
+          <div className={cn("text-sm font-semibold", status.text)}>
+            {depletionDate ? formatDate(depletionDate) : "--"}
+          </div>
+          {daysRemaining < 7 && isFinite(daysRemaining) && (
+            <div className="flex items-center gap-1 text-xs text-red-600">
+              <AlertTriangle className="h-3 w-3" />
+              <span>Critical</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaCreditBurnRate({
+  dailyUsage,
+  balance,
+  showProjection = false,
+  projectionDays = 7,
+  width = 120,
+  height = 32,
+  animated = true,
+  variant = "sparkline",
+  className,
+}: WakaCreditBurnRateProps) {
+  // Calculate burn metrics
+  const avgBurnRate = React.useMemo(() => calculateAvgBurnRate(dailyUsage), [dailyUsage])
+  const daysRemaining = React.useMemo(
+    () => getDaysRemaining(balance, avgBurnRate),
+    [balance, avgBurnRate]
+  )
+  const depletionDate = React.useMemo(
+    () => getDepletionDate(daysRemaining),
+    [daysRemaining]
+  )
+
+  // Validate data
+  if (!dailyUsage || dailyUsage.length === 0) {
+    return (
+      <div className={cn("inline-flex items-center gap-2 text-muted-foreground text-sm", className)}>
+        No data
+      </div>
+    )
+  }
+
+  if (variant === "card") {
+    return (
+      <CardVariant
+        dailyUsage={dailyUsage}
+        balance={balance}
+        avgBurnRate={avgBurnRate}
+        daysRemaining={daysRemaining}
+        depletionDate={depletionDate}
+        width={Math.max(width, 200)}
+        height={Math.max(height, 48)}
+        showProjection={showProjection}
+        projectionDays={projectionDays}
+        animated={animated}
+        className={className}
+      />
+    )
+  }
+
+  return (
+    <SparklineVariant
+      dailyUsage={dailyUsage}
+      avgBurnRate={avgBurnRate}
+      daysRemaining={daysRemaining}
+      width={width}
+      height={height}
+      showProjection={showProjection}
+      projectionDays={projectionDays}
+      animated={animated}
+      className={className}
+    />
+  )
+}
+
+export default WakaCreditBurnRate