LiveActivityMap

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

export default function LiveActivityMap() {
  const cols = 24, rows = 7;
  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  const [data, setData] = useState(() =>
    Array.from({ length: rows }, (_, r) =>
      Array.from({ length: cols }, (_, c) => {
        const weekday = r < 5;
        const businessHour = c >= 8 && c <= 18;
        return weekday && businessHour ? Math.floor(Math.random() * 80 + 20) : Math.floor(Math.random() * 20);
      })
    )
  );
  const [hovered, setHovered] = useState(null);

  useEffect(() => {
    const t = setInterval(() => {
      setData(prev => prev.map(row => row.map(v => Math.max(0, Math.min(100, v + (Math.random() - 0.5) * 10))));
    }, 1500);
    return () => clearInterval(t);
  }, []);

  const getColor = v => {
    if (v < 20) return 'rgba(201,168,76,0.08)';
    if (v < 40) return 'rgba(201,168,76,0.2)';
    if (v < 60) return 'rgba(201,168,76,0.4)';
    if (v < 80) return 'rgba(201,168,76,0.7)';
    return '#C9A84C';
  };

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        <h3 style={{ color: '#F5F5F0', margin: 0, fontSize: '15px', fontWeight: 700 }}>Activity Heatmap</h3>
        <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
          <div style={{ width: '8px', height: '8px', borderRadius: '2px', background: 'rgba(201,168,76,0.08)', border: '1px solid rgba(201,168,76,0.2)' }} />
          <span style={{ color: 'rgba(245,245,240,0.3)', fontSize: '11px' }}>Low</span>
          <div style={{ width: '8px', height: '8px', borderRadius: '2px', background: '#C9A84C' }} />
          <span style={{ color: 'rgba(245,245,240,0.3)', fontSize: '11px' }}>High</span>
        </div>
      </div>
      <div style={{ display: 'flex', gap: '8px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', paddingTop: '0' }}>
          {days.map(d => (
            <div key={d} style={{ height: '16px', fontSize: '10px', color: 'rgba(245,245,240,0.3)', display: 'flex', alignItems: 'center' }}>{d}</div>
          ))}
        </div>
        <div>
          {data.map((row, r) => (
            <div key={r} style={{ display: 'flex', gap: '3px', marginBottom: '3px' }}>
              {row.map((v, c) => (
                <div
                  key={c}
                  onMouseEnter={() => setHovered({ r, c, v: Math.round(v) })}
                  onMouseLeave={() => setHovered(null)}
                  style={{
                    width: '16px', height: '16px',
                    borderRadius: '3px',
                    background: getColor(v),
                    transition: 'background 1s ease',
                    cursor: 'default',
                    position: 'relative',
                    outline: hovered?.r === r && hovered?.c === c ? '1px solid rgba(255,255,255,0.3)' : 'none',
                  }}
                />
              ))}
            </div>
          ))}
          {hovered && (
            <p style={{ margin: '8px 0 0 0', color: 'rgba(245,245,240,0.5)', fontSize: '12px' }}>
              {days[hovered.r]}, Hour {hovered.c}: <strong style={{ color: '#C9A84C' }}>{hovered.v}</strong> events
            </p>
          )}
        </div>
      </div>
    </div>
  );
}

Component info

About

Simulated live activity heatmap grid