HeatRingChart

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

export default function HeatRingChart() {
  const [progress, setProgress] = useState([0, 0, 0]);
  const goals = [
    { label: 'Move', value: 78, goal: 100, color: '#ef4444' },
    { label: 'Exercise', value: 45, goal: 60, color: '#4ade80' },
    { label: 'Stand', value: 10, goal: 12, color: '#22d3ee' },
  ];

  useEffect(() => {
    const t = setTimeout(() => setProgress(goals.map(g => g.value / g.goal)), 400);
    return () => clearTimeout(t);
  }, []);

  const size = 200, cx = 100, cy = 100;
  const radii = [80, 60, 40];
  const stroke = 14;

  const arc = (r, pct) => {
    const circ = 2 * Math.PI * r;
    const dash = circ * Math.min(pct, 1);
    return { strokeDasharray: `${dash} ${circ}`, strokeDashoffset: 0 };
  };

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', display: 'inline-flex', gap: '24px', alignItems: 'center' }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        {goals.map((g, i) => (
          <g key={i}>
            <circle cx={cx} cy={cy} r={radii[i]} fill="none" stroke={g.color} strokeWidth={stroke} opacity={0.15} />
            <circle
              cx={cx} cy={cy} r={radii[i]} fill="none" stroke={g.color} strokeWidth={stroke}
              strokeLinecap="round"
              style={{
                ...arc(radii[i], progress[i]),
                transition: 'stroke-dasharray 1.2s cubic-bezier(0.4,0,0.2,1)',
                filter: `drop-shadow(0 0 6px ${g.color}80)`,
              }}
            />
          </g>
        ))}
        <text x={cx} y={cy - 8} textAnchor="middle" fill="#F5F5F0" fontSize="20" fontWeight="800" fontFamily="system-ui" transform={`rotate(90, ${cx}, ${cy})`}>🔥</text>
      </svg>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
        {goals.map((g, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
            <div style={{ width: '10px', height: '10px', borderRadius: '50%', background: g.color, boxShadow: `0 0 8px ${g.color}` }} />
            <div>
              <p style={{ margin: 0, color: '#F5F5F0', fontSize: '13px', fontWeight: 600 }}>{g.label}</p>
              <p style={{ margin: 0, color: 'rgba(245,245,240,0.4)', fontSize: '12px' }}>{g.value}/{g.goal}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Component info

About

Apple Watch-style activity ring chart