112 lines
3.4 KiB
TypeScript
112 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
} from 'recharts';
|
|
import { formatNumber, createYAxisFormatter } from '../../utils/formatters.ts';
|
|
|
|
interface PopulationDataPoint {
|
|
date: string;
|
|
population: number;
|
|
chickenCount?: number;
|
|
}
|
|
|
|
interface SimplePopulationChartProps {
|
|
data: PopulationDataPoint[];
|
|
title?: string;
|
|
}
|
|
|
|
const SimplePopulationChart: React.FC<SimplePopulationChartProps> = ({
|
|
data,
|
|
title = 'Tren Populasi',
|
|
}) => {
|
|
if (!data || data.length === 0) {
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-sm">
|
|
<h3 className="text-lg font-bold text-gray-800 mb-4">{title}</h3>
|
|
<div className="h-64 flex items-center justify-center text-gray-400">
|
|
<div className="text-center">
|
|
<i className="fa-solid fa-chart-line text-4xl mb-2"></i>
|
|
<p>Tidak ada data tersedia</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-sm">
|
|
<h3 className="text-lg font-bold text-gray-800 mb-4">{title}</h3>
|
|
<div className="h-64">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={data} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
|
|
<XAxis
|
|
dataKey="date"
|
|
fontSize={11}
|
|
tick={{ fill: '#6b7280' }}
|
|
interval="preserveStartEnd"
|
|
/>
|
|
<YAxis
|
|
fontSize={11}
|
|
tick={{ fill: '#6b7280' }}
|
|
scale="log"
|
|
domain={[
|
|
(dataMin: number) => {
|
|
// For log scale, use multipliers
|
|
return Math.max(1, Math.floor(dataMin * 0.7));
|
|
},
|
|
(dataMax: number) => {
|
|
return Math.ceil(dataMax * 1.3);
|
|
},
|
|
]}
|
|
tickFormatter={createYAxisFormatter()}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
border: '1px solid #e0e0e0',
|
|
borderRadius: '8px',
|
|
padding: '8px 12px',
|
|
}}
|
|
formatter={(value: any, name: string) => {
|
|
if (value === null || value === undefined) return ['Tidak ada data', name];
|
|
return [formatNumber(value as number), name];
|
|
}}
|
|
labelStyle={{ fontWeight: 600, marginBottom: '4px' }}
|
|
/>
|
|
<Legend />
|
|
<Line
|
|
type="monotone"
|
|
dataKey="population"
|
|
stroke="#ef4444"
|
|
strokeWidth={2.5}
|
|
name="Populasi (Stock Akhir)"
|
|
dot={{ r: 3, fill: '#ef4444' }}
|
|
activeDot={{ r: 5, strokeWidth: 2, stroke: '#fff' }}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="chickenCount"
|
|
stroke="#3b82f6"
|
|
strokeWidth={2.5}
|
|
name="Chicken Counting (IOT)"
|
|
dot={{ r: 3, fill: '#3b82f6' }}
|
|
activeDot={{ r: 5, strokeWidth: 2, stroke: '#fff' }}
|
|
connectNulls={false}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SimplePopulationChart;
|