70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
} from 'recharts';
|
|
import { ConsumptionPatternPoint } from '../../types';
|
|
|
|
interface ConsumptionPatternChartProps {
|
|
data: ConsumptionPatternPoint[];
|
|
}
|
|
|
|
const ConsumptionPatternChart: React.FC<ConsumptionPatternChartProps> = ({ data }) => {
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-sm">
|
|
<h2 className="text-xl font-bold mb-4">Pola Konsumsi Harian</h2>
|
|
<div className="h-64">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={data} margin={{ top: 5, right: 20, left: -10, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
|
|
<XAxis
|
|
dataKey="hour"
|
|
fontSize={12}
|
|
tick={{ fill: '#6b7280' }}
|
|
unit=":00"
|
|
interval={3}
|
|
/>
|
|
<YAxis fontSize={12} tick={{ fill: '#6b7280' }} unit="%" width={40} />
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
border: '1px solid #ccc',
|
|
borderRadius: '8px',
|
|
}}
|
|
formatter={(value: number) => [`${value.toFixed(1)}%`, '']}
|
|
/>
|
|
<Legend wrapperStyle={{ fontSize: '14px' }} verticalAlign="top" align="right" />
|
|
<Line
|
|
type="monotone"
|
|
dataKey="actual"
|
|
stroke="#ef4444"
|
|
strokeWidth={2.5}
|
|
name="Aktual"
|
|
dot={{ r: 3 }}
|
|
activeDot={{ r: 5 }}
|
|
connectNulls
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="predicted"
|
|
stroke="#8884d8"
|
|
strokeWidth={2}
|
|
name="Prediksi AI"
|
|
strokeDasharray="5 5"
|
|
dot={false}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ConsumptionPatternChart;
|