816c3b3f2e
Add comprehensive analytics system with: - Analytics data layer (aggregator, metrics, trends, cache) - 6 API endpoints (overview, plants, transport, farms, sustainability, export) - 6 chart components (LineChart, BarChart, PieChart, AreaChart, Gauge, Heatmap) - 5 dashboard widgets (KPICard, TrendIndicator, DataTable, DateRangePicker, FilterPanel) - 5 dashboard pages (overview, plants, transport, farms, sustainability) - Export functionality (CSV, JSON) Dependencies added: recharts, d3, date-fns Also includes minor fixes: - Fix EnvironmentalForm spread type error - Fix AgentOrchestrator Map iteration issues - Fix next.config.js image domains undefined error - Add downlevelIteration to tsconfig
85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
/**
|
|
* Line Chart Component
|
|
* Displays time series data as a line chart
|
|
*/
|
|
|
|
import {
|
|
LineChart as RechartsLineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
} from 'recharts';
|
|
|
|
interface LineChartProps {
|
|
data: any[];
|
|
xKey: string;
|
|
yKey: string | string[];
|
|
title?: string;
|
|
colors?: string[];
|
|
height?: number;
|
|
showGrid?: boolean;
|
|
showLegend?: boolean;
|
|
formatter?: (value: number) => string;
|
|
}
|
|
|
|
const DEFAULT_COLORS = ['#10b981', '#3b82f6', '#8b5cf6', '#f59e0b', '#ef4444'];
|
|
|
|
export default function LineChart({
|
|
data,
|
|
xKey,
|
|
yKey,
|
|
title,
|
|
colors = DEFAULT_COLORS,
|
|
height = 300,
|
|
showGrid = true,
|
|
showLegend = true,
|
|
formatter = (value) => value.toLocaleString(),
|
|
}: LineChartProps) {
|
|
const yKeys = Array.isArray(yKey) ? yKey : [yKey];
|
|
|
|
return (
|
|
<div className="bg-white rounded-lg shadow-lg p-6">
|
|
{title && <h3 className="text-lg font-bold text-gray-900 mb-4">{title}</h3>}
|
|
<ResponsiveContainer width="100%" height={height}>
|
|
<RechartsLineChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
|
|
{showGrid && <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />}
|
|
<XAxis
|
|
dataKey={xKey}
|
|
tick={{ fill: '#6b7280', fontSize: 12 }}
|
|
tickLine={{ stroke: '#e5e7eb' }}
|
|
/>
|
|
<YAxis
|
|
tick={{ fill: '#6b7280', fontSize: 12 }}
|
|
tickLine={{ stroke: '#e5e7eb' }}
|
|
tickFormatter={formatter}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: '#fff',
|
|
border: '1px solid #e5e7eb',
|
|
borderRadius: '8px',
|
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
|
}}
|
|
formatter={(value: number) => [formatter(value), '']}
|
|
/>
|
|
{showLegend && <Legend />}
|
|
{yKeys.map((key, index) => (
|
|
<Line
|
|
key={key}
|
|
type="monotone"
|
|
dataKey={key}
|
|
stroke={colors[index % colors.length]}
|
|
strokeWidth={2}
|
|
dot={{ fill: colors[index % colors.length], r: 4 }}
|
|
activeDot={{ r: 6 }}
|
|
/>
|
|
))}
|
|
</RechartsLineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|