Spaces:
Sleeping
Sleeping
File size: 2,482 Bytes
382dea6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | import React from 'react';
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts';
const CacheStats = ({ stats, analytics, minimal = false }) => {
if (!stats || !analytics) return null;
const hits = analytics.cache_hits || 0;
const misses = (analytics.total_queries || 0) - hits;
const data = [
{ name: 'Cache Hits', value: hits },
{ name: 'Cache Misses', value: misses },
];
const COLORS = ['#10b981', '#ef4444']; // Green for hit, Red for miss
return (
<div className={minimal ? "fade-in" : "chart-container glass-panel fade-in"} style={{ marginTop: minimal ? 0 : '1rem', padding: minimal ? 0 : '1rem', display: 'flex', alignItems: 'center', height: '100%' }}>
<div style={{ flex: 1 }}>
<h4 style={{ margin: 0, fontSize: minimal ? '0.8rem' : '1rem' }}><span style={{color: '#9ca3af', fontSize: minimal ? '0.65rem' : '0.8rem', textTransform: 'uppercase', letterSpacing: '1px'}}>Caching</span>{minimal ? ' Stats' : <><br/>Hit/Miss Ratio</>}</h4>
<div style={{ marginTop: minimal ? '0.2rem' : '0.5rem', display: minimal ? 'flex' : 'block', gap: '1rem' }}>
<p style={{ margin: 0, fontSize: minimal ? '0.75rem' : '0.9rem', color: '#e5e7eb' }}>Queries: {analytics.total_queries || 0}</p>
<p style={{ margin: 0, fontSize: minimal ? '0.75rem' : '0.9rem', color: '#e5e7eb' }}>Hit Rate: {analytics.cache_hit_rate || 0}%</p>
{!minimal && <p style={{ margin: 0, fontSize: '0.9rem', color: '#e5e7eb' }}>Items: {stats.total_entries || 0}</p>}
</div>
</div>
<div style={{ width: minimal ? 50 : 120, height: minimal ? 50 : 120, marginLeft: '1rem' }}>
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={data}
cx="50%"
cy="50%"
innerRadius={30}
outerRadius={50}
paddingAngle={5}
dataKey="value"
stroke="none"
>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip
contentStyle={{ backgroundColor: 'rgba(17, 24, 39, 0.9)', borderColor: '#374151', borderRadius: '8px' }}
itemStyle={{ color: '#e5e7eb' }}
/>
</PieChart>
</ResponsiveContainer>
</div>
</div>
);
};
export default CacheStats;
|