first commit

components/counting/SimplePopulationChart.tsx

@@ -0,0 +1,111 @@
+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;