@wakastellar/ui 3.2.0 → 3.3.0

package/src/components/waka-credit-projection/index.tsx

@@ -0,0 +1,345 @@
+"use client"
+
+import * as React from "react"
+import {
+  AreaChart,
+  Area,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ReferenceLine,
+  ResponsiveContainer,
+} from "recharts"
+import { cn } from "../../utils/cn"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface WakaCreditProjectionProps {
+  /** Historical balance data points (date string + value) */
+  historicalData: { date: string; value: number }[]
+  /** Current credit balance */
+  balance: number
+  /** Number of days to project into the future */
+  projectionDays?: number
+  /** Show confidence interval band around projection */
+  confidenceInterval?: boolean
+  /** Chart height in pixels */
+  height?: number
+  /** Enable chart animations */
+  animated?: boolean
+  /** Additional CSS classes */
+  className?: string
+}
+
+interface ChartDataPoint {
+  date: string
+  historical?: number
+  projected?: number
+  upperBound?: number
+  lowerBound?: number
+}
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+function parseDate(dateStr: string): Date {
+  return new Date(dateStr)
+}
+
+function formatDateShort(dateStr: string): string {
+  const d = parseDate(dateStr)
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" })
+}
+
+function addDays(dateStr: string, days: number): string {
+  const d = parseDate(dateStr)
+  d.setDate(d.getDate() + days)
+  return d.toISOString().split("T")[0]
+}
+
+function calculateAvgDailyBurn(
+  data: { date: string; value: number }[]
+): number {
+  if (data.length < 2) return 0
+
+  const sorted = [...data].sort(
+    (a, b) => parseDate(a.date).getTime() - parseDate(b.date).getTime()
+  )
+
+  const first = sorted[0]
+  const last = sorted[sorted.length - 1]
+  const daysDiff =
+    (parseDate(last.date).getTime() - parseDate(first.date).getTime()) /
+    (1000 * 60 * 60 * 24)
+
+  if (daysDiff === 0) return 0
+
+  const totalDecrease = first.value - last.value
+  return totalDecrease / daysDiff
+}
+
+function buildChartData(
+  historicalData: { date: string; value: number }[],
+  balance: number,
+  projectionDays: number,
+  confidenceInterval: boolean
+): { chartData: ChartDataPoint[]; depletionDate: string | null } {
+  const sorted = [...historicalData].sort(
+    (a, b) => parseDate(a.date).getTime() - parseDate(b.date).getTime()
+  )
+
+  const avgDailyBurn = calculateAvgDailyBurn(sorted)
+
+  // Historical portion
+  const chartData: ChartDataPoint[] = sorted.map((d) => ({
+    date: d.date,
+    historical: d.value,
+  }))
+
+  // Projection portion
+  const lastDate =
+    sorted.length > 0 ? sorted[sorted.length - 1].date : new Date().toISOString().split("T")[0]
+  let depletionDate: string | null = null
+
+  // Add the transition point: last historical point is also first projection point
+  if (sorted.length > 0) {
+    chartData[chartData.length - 1].projected = balance
+    if (confidenceInterval) {
+      chartData[chartData.length - 1].upperBound = balance
+      chartData[chartData.length - 1].lowerBound = balance
+    }
+  }
+
+  for (let day = 1; day <= projectionDays; day++) {
+    const date = addDays(lastDate, day)
+    const projectedValue = Math.max(0, balance - avgDailyBurn * day)
+
+    // Confidence bounds widen over time: +/- 20% * (day/projectionDays)
+    const widening = 0.2 * (day / projectionDays)
+    const upperValue = Math.max(0, balance - avgDailyBurn * day * (1 - widening))
+    const lowerValue = Math.max(0, balance - avgDailyBurn * day * (1 + widening))
+
+    const point: ChartDataPoint = {
+      date,
+      projected: projectedValue,
+    }
+
+    if (confidenceInterval) {
+      point.upperBound = upperValue
+      point.lowerBound = lowerValue
+    }
+
+    chartData.push(point)
+
+    // Track depletion date
+    if (depletionDate === null && projectedValue <= 0) {
+      depletionDate = date
+    }
+  }
+
+  return { chartData, depletionDate }
+}
+
+// ============================================================================
+// Custom Tooltip
+// ============================================================================
+
+interface CustomTooltipProps {
+  active?: boolean
+  payload?: Array<{
+    dataKey: string
+    value: number
+    color: string
+  }>
+  label?: string
+}
+
+function CustomTooltipContent({ active, payload, label }: CustomTooltipProps) {
+  if (!active || !payload || payload.length === 0 || !label) return null
+
+  const historicalEntry = payload.find((p) => p.dataKey === "historical")
+  const projectedEntry = payload.find((p) => p.dataKey === "projected")
+  const upperEntry = payload.find((p) => p.dataKey === "upperBound")
+  const lowerEntry = payload.find((p) => p.dataKey === "lowerBound")
+
+  return (
+    <div className="rounded-lg border bg-background px-3 py-2 shadow-md">
+      <p className="text-xs font-medium text-foreground mb-1">
+        {formatDateShort(label)}
+      </p>
+      {historicalEntry && historicalEntry.value != null && (
+        <p className="text-xs text-blue-600">
+          Balance: {historicalEntry.value.toLocaleString()}
+        </p>
+      )}
+      {projectedEntry && projectedEntry.value != null && (
+        <p className="text-xs text-muted-foreground">
+          Projected: {projectedEntry.value.toLocaleString()}
+        </p>
+      )}
+      {upperEntry && lowerEntry && upperEntry.value != null && lowerEntry.value != null && (
+        <p className="text-xs text-muted-foreground/70">
+          Range: {lowerEntry.value.toLocaleString()} - {upperEntry.value.toLocaleString()}
+        </p>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Depletion Annotation
+// ============================================================================
+
+interface DepletionAnnotationProps {
+  depletionDate: string | null
+}
+
+function DepletionAnnotation({ depletionDate }: DepletionAnnotationProps) {
+  if (!depletionDate) return null
+
+  return (
+    <div className="mt-2 text-sm text-red-600 font-medium text-center">
+      Estimated depletion: {formatDateShort(depletionDate)}
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaCreditProjection({
+  historicalData,
+  balance,
+  projectionDays = 30,
+  confidenceInterval = false,
+  height = 300,
+  animated = true,
+  className,
+}: WakaCreditProjectionProps) {
+  const { chartData, depletionDate } = React.useMemo(
+    () => buildChartData(historicalData, balance, projectionDays, confidenceInterval),
+    [historicalData, balance, projectionDays, confidenceInterval]
+  )
+
+  if (historicalData.length === 0) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center text-muted-foreground text-sm border border-dashed border-border rounded-lg",
+          className
+        )}
+        style={{ height }}
+      >
+        No historical data available
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("w-full", className)}>
+      <ResponsiveContainer width="100%" height={height}>
+        <AreaChart
+          data={chartData}
+          margin={{ top: 10, right: 30, left: 10, bottom: 0 }}
+        >
+          <defs>
+            <linearGradient id="historicalGradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
+              <stop offset="95%" stopColor="#3b82f6" stopOpacity={0.05} />
+            </linearGradient>
+            <linearGradient id="confidenceGradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#9ca3af" stopOpacity={0.2} />
+              <stop offset="95%" stopColor="#9ca3af" stopOpacity={0.05} />
+            </linearGradient>
+          </defs>
+
+          <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" vertical={false} />
+
+          <XAxis
+            dataKey="date"
+            tickFormatter={formatDateShort}
+            tick={{ fontSize: 12, fill: "#6b7280" }}
+            axisLine={{ stroke: "#d1d5db" }}
+            tickLine={{ stroke: "#d1d5db" }}
+          />
+
+          <YAxis
+            tick={{ fontSize: 12, fill: "#6b7280" }}
+            axisLine={{ stroke: "#d1d5db" }}
+            tickLine={{ stroke: "#d1d5db" }}
+            tickFormatter={(value: number) =>
+              value >= 1000 ? `${(value / 1000).toFixed(0)}k` : String(value)
+            }
+          />
+
+          <Tooltip content={<CustomTooltipContent />} />
+
+          {/* Red reference line at y=0 */}
+          <ReferenceLine y={0} stroke="#ef4444" strokeWidth={2} />
+
+          {/* Confidence interval: upper bound area */}
+          {confidenceInterval && (
+            <Area
+              type="monotone"
+              dataKey="upperBound"
+              stroke="none"
+              fill="url(#confidenceGradient)"
+              fillOpacity={1}
+              isAnimationActive={animated}
+              animationDuration={1000}
+            />
+          )}
+
+          {/* Confidence interval: lower bound (fills "below" to clip the band) */}
+          {confidenceInterval && (
+            <Area
+              type="monotone"
+              dataKey="lowerBound"
+              stroke="none"
+              fill="#ffffff"
+              fillOpacity={1}
+              isAnimationActive={animated}
+              animationDuration={1000}
+            />
+          )}
+
+          {/* Historical balance area (solid blue) */}
+          <Area
+            type="monotone"
+            dataKey="historical"
+            stroke="#3b82f6"
+            strokeWidth={2}
+            fill="url(#historicalGradient)"
+            fillOpacity={1}
+            isAnimationActive={animated}
+            animationDuration={1000}
+            connectNulls={false}
+          />
+
+          {/* Projected balance (dashed line) */}
+          <Line
+            type="monotone"
+            dataKey="projected"
+            stroke="#6b7280"
+            strokeWidth={2}
+            strokeDasharray="6 3"
+            dot={false}
+            isAnimationActive={animated}
+            animationDuration={1000}
+            connectNulls={false}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+
+      <DepletionAnnotation depletionDate={depletionDate} />
+    </div>
+  )
+}
+
+export default WakaCreditProjection

package/src/components/waka-credit-quota/WakaCreditQuota.stories.tsx

@@ -0,0 +1,260 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaCreditQuota } from './index'
+
+const meta: Meta<typeof WakaCreditQuota> = {
+  title: 'Components/Credit/WakaCreditQuota',
+  component: WakaCreditQuota,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Quota bar showing credit usage with optional reset date countdown. Supports compact (single bar) and detailed (stacked colored segments per service) variants.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['compact', 'detailed'],
+      description: 'Visual variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Component size',
+    },
+    used: {
+      control: { type: 'number', min: 0, max: 10000 },
+      description: 'Credits used',
+    },
+    total: {
+      control: { type: 'number', min: 0, max: 10000 },
+      description: 'Total credit quota',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animated bar fill',
+    },
+    showResetCountdown: {
+      control: 'boolean',
+      description: 'Show reset date countdown',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCreditQuota>
+
+// ============================================================================
+// Default
+// ============================================================================
+
+export const Default: Story = {
+  args: {
+    used: 3200,
+    total: 5000,
+    variant: 'compact',
+  },
+}
+
+// ============================================================================
+// Compact
+// ============================================================================
+
+export const Compact: Story = {
+  render: () => (
+    <div className="space-y-6 w-[400px]">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <WakaCreditQuota used={1500} total={5000} variant="compact" size="sm" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Medium (default)</p>
+        <WakaCreditQuota used={3200} total={5000} variant="compact" size="md" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <WakaCreditQuota used={4600} total={5000} variant="compact" size="lg" />
+      </div>
+    </div>
+  ),
+}
+
+// ============================================================================
+// Detailed
+// ============================================================================
+
+const sampleServices = [
+  { id: 'compute', name: 'Compute', value: 1200, color: 'bg-blue-500' },
+  { id: 'storage', name: 'Storage', value: 800, color: 'bg-emerald-500' },
+  { id: 'network', name: 'Network', value: 450, color: 'bg-amber-500' },
+  { id: 'database', name: 'Database', value: 350, color: 'bg-violet-500' },
+]
+
+export const Detailed: Story = {
+  args: {
+    used: 2800,
+    total: 5000,
+    variant: 'detailed',
+    services: sampleServices,
+  },
+}
+
+// ============================================================================
+// WithServices
+// ============================================================================
+
+export const WithServices: Story = {
+  render: () => (
+    <div className="space-y-6 w-[400px]">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">
+          Detailed with service breakdown
+        </p>
+        <WakaCreditQuota
+          used={2800}
+          total={5000}
+          variant="detailed"
+          services={sampleServices}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">
+          Many services (auto-colored)
+        </p>
+        <WakaCreditQuota
+          used={4200}
+          total={5000}
+          variant="detailed"
+          services={[
+            { id: 'compute', name: 'Compute', value: 1000 },
+            { id: 'storage', name: 'Storage', value: 800 },
+            { id: 'network', name: 'Network', value: 600 },
+            { id: 'database', name: 'Database', value: 500 },
+            { id: 'cdn', name: 'CDN', value: 700 },
+            { id: 'monitoring', name: 'Monitoring', value: 600 },
+          ]}
+        />
+      </div>
+    </div>
+  ),
+}
+
+// ============================================================================
+// WithResetDate
+// ============================================================================
+
+export const WithResetDate: Story = {
+  render: () => {
+    const in12Days = new Date()
+    in12Days.setDate(in12Days.getDate() + 12)
+
+    const in1Day = new Date()
+    in1Day.setDate(in1Day.getDate() + 1)
+
+    const in3Hours = new Date()
+    in3Hours.setHours(in3Hours.getHours() + 3)
+
+    return (
+      <div className="space-y-6 w-[400px]">
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">
+            Resets in 12 days
+          </p>
+          <WakaCreditQuota
+            used={2100}
+            total={5000}
+            resetDate={in12Days}
+            variant="compact"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">
+            Resets in 1 day
+          </p>
+          <WakaCreditQuota
+            used={4500}
+            total={5000}
+            resetDate={in1Day}
+            variant="compact"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">
+            Resets in a few hours
+          </p>
+          <WakaCreditQuota
+            used={4900}
+            total={5000}
+            resetDate={in3Hours}
+            variant="compact"
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">
+            Detailed with reset date
+          </p>
+          <WakaCreditQuota
+            used={2800}
+            total={5000}
+            resetDate={in12Days}
+            variant="detailed"
+            services={sampleServices}
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+// ============================================================================
+// NearLimit
+// ============================================================================
+
+export const NearLimit: Story = {
+  render: () => (
+    <div className="space-y-6 w-[400px]">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">
+          75% used (warning)
+        </p>
+        <WakaCreditQuota used={3750} total={5000} variant="compact" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">
+          90% used (danger)
+        </p>
+        <WakaCreditQuota used={4500} total={5000} variant="compact" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">
+          100% used (at limit)
+        </p>
+        <WakaCreditQuota used={5000} total={5000} variant="compact" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">
+          Over limit (overflow)
+        </p>
+        <WakaCreditQuota used={5500} total={5000} variant="compact" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">
+          Near limit detailed with services
+        </p>
+        <WakaCreditQuota
+          used={4700}
+          total={5000}
+          variant="detailed"
+          services={[
+            { id: 'compute', name: 'Compute', value: 2000, color: 'bg-blue-500' },
+            { id: 'storage', name: 'Storage', value: 1500, color: 'bg-emerald-500' },
+            { id: 'network', name: 'Network', value: 1200, color: 'bg-amber-500' },
+          ]}
+        />
+      </div>
+    </div>
+  ),
+}