'use client'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts'
interface MetricsChartsProps {
data?: {
performance: Array<{ time: string; workflows: number; apiCalls: number }>
success: Array<{ name: string; count: number }>
}
}
export default function MetricsCharts({ data }: MetricsChartsProps) {
const mockPerformanceData = data?.performance || [
{ time: '00:00', workflows: 4, apiCalls: 24 },
{ time: '04:00', workflows: 3, apiCalls: 18 },
{ time: '08:00', workflows: 8, apiCalls: 45 },
{ time: '12:00', workflows: 12, apiCalls: 67 },
{ time: '16:00', workflows: 15, apiCalls: 89 },
{ time: '20:00', workflows: 9, apiCalls: 52 },
]
const mockSuccessData = data?.success || [
{ name: 'Success', count: 45 },
{ name: 'Warning', count: 8 },
{ name: 'Failed', count: 3 },
]
return (
<div className="bg-white overflow-hidden shadow rounded-lg">
<div className="p-6">
<h3 className="text-lg leading-6 font-medium text-gray-900 mb-6">
Performance Metrics
</h3>
{/* Performance Chart */}
<div className="mb-8">
<h4 className="text-sm font-medium text-gray-900 mb-4">
Workflow Activity (24h)
</h4>
<div className="h-64">
<ResponsiveContainer width="100%" height="100%">
<LineChart data={mockPerformanceData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="time" />
<YAxis />
<Tooltip />
<Line
type="monotone"
dataKey="workflows"
stroke="#3b82f6"
strokeWidth={2}
name="Workflows"
/>
<Line
type="monotone"
dataKey="apiCalls"
stroke="#10b981"
strokeWidth={2}
name="API Calls"
/>
</LineChart>
</ResponsiveContainer>
</div>
</div>
{/* Success Rate Chart */}
<div>
<h4 className="text-sm font-medium text-gray-900 mb-4">
Success Rate
</h4>
<div className="h-48">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={mockSuccessData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Bar dataKey="count" fill="#3b82f6" />
</BarChart>
</ResponsiveContainer>
</div>
</div>
</div>
</div>
)
}
