42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { DayCount } from '../types/api';
|
|
import AreaTrendChart from './AreaTrendChart';
|
|
|
|
interface Props {
|
|
title: string;
|
|
data?: DayCount[];
|
|
color: string;
|
|
className?: string;
|
|
}
|
|
|
|
const DailyLineChartCard: React.FC<Props> = ({ title, data, color, className }) => {
|
|
const chartData = (data ?? []).map((item) => ({
|
|
date: item.date,
|
|
count: item.count,
|
|
}));
|
|
|
|
if (chartData.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Card className={className}>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">{title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<AreaTrendChart
|
|
data={chartData}
|
|
xKey="date"
|
|
series={[{ key: 'count', color, name: title }]}
|
|
height={280}
|
|
yAllowDecimals={false}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default DailyLineChartCard;
|