Spaces:
Sleeping
Sleeping
File size: 2,396 Bytes
3786a3f | 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 58 59 60 61 62 63 64 65 66 67 | 'use client';
import { useMemo } from 'react';
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, Tooltip } from 'recharts';
import { useGraphStore } from '@/store/graph';
import { entityColor } from '@/lib/constants';
import { HubEntities } from './HubEntities';
export function GraphStats() {
const data = useGraphStore((s) => s.data);
const typeData = useMemo(() => {
const counts: Record<string, number> = {};
data.nodes.forEach((n) => (counts[n.type] = (counts[n.type] || 0) + 1));
return Object.entries(counts).map(([type, count]) => ({ type, count }));
}, [data.nodes]);
return (
<div className="space-y-4 rounded-md border border-border bg-bg-surface p-4">
<div className="grid grid-cols-2 gap-3">
<div className="rounded-md bg-bg-elevated p-3 text-center">
<p className="text-2xl font-bold text-accent-violet">{data.nodes.length}</p>
<p className="text-xs text-text-muted">Nodes</p>
</div>
<div className="rounded-md bg-bg-elevated p-3 text-center">
<p className="text-2xl font-bold text-accent-cyan">{data.links.length}</p>
<p className="text-xs text-text-muted">Edges</p>
</div>
</div>
<div>
<p className="mb-2 text-xs font-semibold uppercase tracking-wide text-text-muted">
By Type
</p>
<div className="h-40 w-full">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={typeData} layout="vertical" margin={{ left: 10, right: 10 }}>
<XAxis type="number" hide />
<YAxis
type="category"
dataKey="type"
width={80}
tick={{ fontSize: 10, fill: 'hsl(215 20% 65%)' }}
/>
<Tooltip
contentStyle={{
background: 'hsl(215 28% 11%)',
border: '1px solid hsl(215 20% 15%)',
fontSize: 12,
}}
cursor={{ fill: 'hsl(215 28% 15%)' }}
/>
<Bar dataKey="count" radius={[0, 4, 4, 0]}>
{typeData.map((d) => (
<Cell key={d.type} fill={entityColor(d.type)} />
))}
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
</div>
<HubEntities />
</div>
);
}
|