120 lines
3.8 KiB
TypeScript
120 lines
3.8 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
} from 'recharts';
|
|
import { PopulationDataPoint } from '../../types.ts';
|
|
import { useAppContext } from '../../context/AppContext.tsx';
|
|
import { formatNumber, createYAxisFormatter } from '../../utils/formatters.ts';
|
|
|
|
interface KandangPopulationData {
|
|
name: string;
|
|
data: PopulationDataPoint[];
|
|
color: string;
|
|
}
|
|
|
|
interface PopulationTrendChartProps {
|
|
data: PopulationDataPoint[];
|
|
perKandangData?: KandangPopulationData[];
|
|
}
|
|
|
|
const PopulationTrendChart: React.FC<PopulationTrendChartProps> = ({ data, perKandangData }) => {
|
|
const { apiMode: _apiMode } = useAppContext();
|
|
|
|
// Merge per-kandang data into chart data
|
|
const mergedData = useMemo(() => {
|
|
if (!perKandangData || perKandangData.length === 0) return data;
|
|
|
|
return data.map((point, index) => {
|
|
const merged: any = { ...point };
|
|
perKandangData.forEach((kandang) => {
|
|
if (kandang.data[index]) {
|
|
merged[kandang.name] = kandang.data[index].population;
|
|
}
|
|
});
|
|
return merged;
|
|
});
|
|
}, [data, perKandangData]);
|
|
|
|
// 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 Populasi</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 populasi yang tersedia</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const hasPerKandang = perKandangData && perKandangData.length > 0;
|
|
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-sm">
|
|
<h2 className="text-xl font-bold mb-4">Tren Populasi</h2>
|
|
<div className={hasPerKandang ? 'h-80' : 'h-60'}>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={mergedData} 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, name: string) => [
|
|
formatNumber(value),
|
|
name === 'population' ? 'Total' : name,
|
|
]}
|
|
/>
|
|
{hasPerKandang && <Legend />}
|
|
<Line
|
|
type="monotone"
|
|
dataKey="population"
|
|
stroke="#ef4444"
|
|
strokeWidth={2.5}
|
|
name={hasPerKandang ? 'Total' : 'Populasi'}
|
|
dot={{ r: hasPerKandang ? 3 : 4 }}
|
|
activeDot={{ r: 6 }}
|
|
/>
|
|
{hasPerKandang &&
|
|
perKandangData!.map((kandang) => (
|
|
<Line
|
|
key={kandang.name}
|
|
type="monotone"
|
|
dataKey={kandang.name}
|
|
stroke={kandang.color}
|
|
strokeWidth={1.5}
|
|
strokeDasharray="5 5"
|
|
name={kandang.name}
|
|
dot={false}
|
|
activeDot={{ r: 4 }}
|
|
/>
|
|
))}
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PopulationTrendChart;
|