dyolink/frontend/src/components/today/TodayAreaChart.tsx

'use client';

import {
  Area,
  AreaChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';
import { TodayChartFrame } from '@/components/today/TodayChartFrame';
import type { TodayChartBucket } from '@/types/today';
import {
  TODAY_CHART_AXIS_COLOR,
  TODAY_CHART_GRID_COLOR,
  TODAY_CHART_PRIMARY_COLOR,
  TODAY_CHART_TOOLTIP_STYLE,
} from '@/components/today/chart-theme';

interface TodayAreaChartProps {
  data: TodayChartBucket[];
}

export function TodayAreaChart({ data }: TodayAreaChartProps) {
  return (
    <TodayChartFrame>
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart data={data} margin={{ top: 8, right: 8, left: -12, bottom: 0 }}>
          <defs>
            <linearGradient id="todayAreaFill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={TODAY_CHART_PRIMARY_COLOR} stopOpacity={0.45} />
              <stop offset="100%" stopColor={TODAY_CHART_PRIMARY_COLOR} stopOpacity={0.05} />
            </linearGradient>
          </defs>
          <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
          <XAxis
            dataKey="label"
            tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
            axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
            tickLine={false}
            interval={1}
          />
          <YAxis
            allowDecimals={false}
            tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
            axisLine={false}
            tickLine={false}
            width={32}
          />
          <Tooltip
            cursor={{ stroke: 'rgba(0, 188, 255, 0.25)' }}
            contentStyle={TODAY_CHART_TOOLTIP_STYLE}
            labelFormatter={(label) => String(label)}
          />
          <Area
            type="monotone"
            dataKey="count"
            stroke={TODAY_CHART_PRIMARY_COLOR}
            strokeWidth={2}
            fill="url(#todayAreaFill)"
            dot={{ r: 3, fill: TODAY_CHART_PRIMARY_COLOR, strokeWidth: 0 }}
            activeDot={{ r: 5, fill: TODAY_CHART_PRIMARY_COLOR }}
          />
        </AreaChart>
      </ResponsiveContainer>
    </TodayChartFrame>
  );
}