sentryagent-idp/portal/components/charts/AgentHeatmap.tsx

'use client';

/**
 * AgentHeatmap — Recharts BarChart showing agent activity grouped by day-of-week.
 *
 * The API returns daily aggregates (no hour granularity), so this component
 * aggregates event counts per day-of-week across all agents and renders a
 * grouped bar chart (one bar per day, Mon–Sun).
 *
 * This component is designed to be lazy-loaded via `next/dynamic`. Do NOT
 * import it directly from a page; use dynamic(() => import('./AgentHeatmap'))
 * so that recharts stays out of the main bundle.
 *
 * @module components/charts/AgentHeatmap
 */

import React, { useMemo } from 'react';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts';

/** A single activity bucket from the API response. */
export interface AgentActivityBucket {
  /** The agent's unique identifier. */
  agent_id: string;
  /** Day-of-week as an integer (0 = Sunday … 6 = Saturday). */
  dow: number;
  /** Total event count for this agent on this day-of-week. */
  count: number;
}

/** Props for the AgentHeatmap component. */
export interface AgentHeatmapProps {
  /**
   * Array of per-agent, per-day-of-week activity buckets from
   * `GET /api/analytics/agents/activity`.
   */
  data: AgentActivityBucket[];
}

/** Display labels for days of the week, ordered Mon–Sun (dow 1–0). */
const DOW_LABELS: Record<number, string> = {
  0: 'Sun',
  1: 'Mon',
  2: 'Tue',
  3: 'Wed',
  4: 'Thu',
  5: 'Fri',
  6: 'Sat',
};

/** Ordered day-of-week values for Mon → Sun display. */
const DOW_ORDER = [1, 2, 3, 4, 5, 6, 0];

/** Aggregated count per day-of-week for chart rendering. */
interface DowAggregate {
  day: string;
  count: number;
}

/**
 * Aggregates raw per-agent activity buckets into per-day-of-week totals
 * suitable for the bar chart.
 *
 * @param data - Raw activity buckets from the API
 * @returns Array of { day, count } sorted Mon → Sun
 */
function aggregateByDow(data: AgentActivityBucket[]): DowAggregate[] {
  const totals: Record<number, number> = {};
  for (const dow of DOW_ORDER) {
    totals[dow] = 0;
  }
  for (const bucket of data) {
    if (bucket.dow in totals) {
      totals[bucket.dow] += bucket.count;
    }
  }
  return DOW_ORDER.map((dow) => ({
    day: DOW_LABELS[dow],
    count: totals[dow],
  }));
}

/**
 * Renders a responsive bar chart of agent activity grouped by day-of-week
 * using recharts. Data is aggregated across all agents.
 *
 * @param props - AgentHeatmapProps
 * @returns JSX element
 */
export default function AgentHeatmap({
  data,
}: AgentHeatmapProps): React.ReactElement {
  const chartData = useMemo(() => aggregateByDow(data), [data]);

  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart
        data={chartData}
        margin={{ top: 8, right: 16, left: 0, bottom: 8 }}
      >
        <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" vertical={false} />
        <XAxis
          dataKey="day"
          tick={{ fontSize: 12, fill: '#64748b' }}
          tickLine={false}
          axisLine={{ stroke: '#cbd5e1' }}
        />
        <YAxis
          tick={{ fontSize: 12, fill: '#64748b' }}
          tickLine={false}
          axisLine={false}
          allowDecimals={false}
        />
        <Tooltip
          formatter={(value: number) => [value.toLocaleString(), 'Events']}
          contentStyle={{
            borderRadius: '8px',
            border: '1px solid #e2e8f0',
            fontSize: '13px',
          }}
        />
        <Bar dataKey="count" fill="#6366f1" radius={[4, 4, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  );
}