88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from 'recharts';
|
|
import { useAppContext } from '../../context/AppContext.tsx';
|
|
import { formatNumber, createYAxisFormatter } from '../../utils/formatters.ts';
|
|
|
|
interface ChickenCountDataPoint {
|
|
date: string;
|
|
count: number | null;
|
|
}
|
|
|
|
interface ChickenCountTrendChartProps {
|
|
data: ChickenCountDataPoint[];
|
|
}
|
|
|
|
const ChickenCountTrendChart: React.FC<ChickenCountTrendChartProps> = ({ data }) => {
|
|
const { apiMode: _apiMode } = useAppContext();
|
|
|
|
// In LIVE mode, show empty state if no data
|
|
if (data.length === 0) {
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-sm">
|
|
<h2 className="text-xl font-bold mb-4">Tren Chicken Counting</h2>
|
|
<div className="h-60 flex items-center justify-center">
|
|
<div className="text-center text-gray-500">
|
|
<i className="fa-solid fa-chart-line text-5xl text-gray-300 mb-3"></i>
|
|
<p className="font-medium text-gray-600">Tidak ada data</p>
|
|
<p className="text-sm text-gray-500 mt-1">
|
|
Belum ada data chicken counting yang diinput
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-sm">
|
|
<h2 className="text-xl font-bold mb-4">Tren Chicken Counting</h2>
|
|
<div className="h-60">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={data} margin={{ top: 5, right: 20, left: -15, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
|
|
<XAxis dataKey="date" fontSize={12} tick={{ fill: '#6b7280' }} />
|
|
<YAxis
|
|
fontSize={12}
|
|
tick={{ fill: '#6b7280' }}
|
|
domain={['dataMin - 50', 'dataMax + 50']}
|
|
tickFormatter={createYAxisFormatter()}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
border: '1px solid #ccc',
|
|
borderRadius: '8px',
|
|
}}
|
|
formatter={(value: number | null) => {
|
|
if (value === null || value === undefined)
|
|
return ['Tidak ada data', 'Chicken Count'];
|
|
return [formatNumber(value), 'Chicken Count'];
|
|
}}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="count"
|
|
stroke="#3b82f6"
|
|
strokeWidth={2.5}
|
|
name="Chicken Count"
|
|
dot={{ r: 4 }}
|
|
activeDot={{ r: 6 }}
|
|
connectNulls={false}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChickenCountTrendChart;
|