SparklineWidget

'use client';
import { useState, useEffect } from 'react';

export default function SparklineWidget({ label = "Revenue", value = "$48,293", change = "+12.4%" }) {
  const [data, setData] = useState([30, 45, 28, 60, 52, 75, 63, 80, 72, 90, 85, 95]);
  const [animating, setAnimating] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setAnimating(true);
      setData(prev => {
        const newVal = Math.max(20, Math.min(100, prev[prev.length - 1] + (Math.random() - 0.4) * 20));
        return [...prev.slice(1), Math.round(newVal)];
      });
      setTimeout(() => setAnimating(false), 300);
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  const max = Math.max(...data);
  const min = Math.min(...data);
  const range = max - min || 1;
  const w = 120, h = 40;
  const points = data.map((v, i) => `${(i / (data.length - 1)) * w},${h - ((v - min) / range) * h}`).join(' ');
  const areaPoints = `0,${h} ${points} ${w},${h}`;

  return (
    <div style={{
      background: '#111111',
      border: '1px solid rgba(255,255,255,0.08)',
      borderRadius: '16px',
      padding: '20px 24px',
      display: 'inline-flex',
      gap: '24px',
      alignItems: 'center',
      fontFamily: 'system-ui, sans-serif',
      minWidth: '260px',
    }}>
      <div>
        <p style={{ margin: '0 0 4px 0', color: 'rgba(245,245,240,0.5)', fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{label}</p>
        <p style={{ margin: '0 0 6px 0', color: '#F5F5F0', fontSize: '24px', fontWeight: 700 }}>{value}</p>
        <span style={{
          display: 'inline-block',
          background: 'rgba(74,222,128,0.1)',
          color: '#4ade80',
          borderRadius: '6px',
          padding: '2px 8px',
          fontSize: '12px',
          fontWeight: 600,
        }}>{change}</span>
      </div>
      <svg width={w} height={h} style={{ opacity: animating ? 0.7 : 1, transition: 'opacity 0.3s' }}>
        <defs>
          <linearGradient id="sg" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#C9A84C" stopOpacity="0.3" />
            <stop offset="100%" stopColor="#C9A84C" stopOpacity="0" />
          </linearGradient>
        </defs>
        <polygon points={areaPoints} fill="url(#sg)" />
        <polyline points={points} fill="none" stroke="#C9A84C" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
        <circle
          cx={(data.length - 1) / (data.length - 1) * w}
          cy={h - ((data[data.length - 1] - min) / range) * h}
          r="3" fill="#C9A84C"
        />
      </svg>
    </div>
  );
}

Component info

About

Mini sparkline chart widget with live data animation