Spaces:
Sleeping
Sleeping
File size: 1,895 Bytes
82e6bed | 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 | import React, { useMemo } from 'react';
// Fix #10: Memoized graph with computed max
const MiniGraph = React.memo(({ data }) => {
const maxVal = useMemo(() => {
let m = 10;
for (let i = 0; i < data.length; i++) {
if (data[i].baseline > m) m = data[i].baseline;
if (data[i].memory > m) m = data[i].memory;
}
return m;
}, [data]);
if (data.length < 2) {
return (
<div className="h-full w-full flex items-center justify-center text-slate-700 text-xs font-mono">
WAITING FOR DATA...
</div>
);
}
const width = 100;
const height = 100;
const makePath = (key) => {
let points = '';
for (let i = 0; i < data.length; i++) {
const x = (i / (data.length - 1)) * width;
const y = height - (data[i][key] / maxVal) * height;
if (i > 0) points += ' ';
points += `${x},${y}`;
}
return points;
};
return (
<svg viewBox={`0 0 ${width} ${height}`} className="w-full h-full overflow-visible" role="img" aria-label="Throughput comparison graph">
<line x1="0" y1="25" x2="100" y2="25" stroke="#334155" strokeWidth="0.5" strokeDasharray="2" />
<line x1="0" y1="50" x2="100" y2="50" stroke="#334155" strokeWidth="0.5" strokeDasharray="2" />
<line x1="0" y1="75" x2="100" y2="75" stroke="#334155" strokeWidth="0.5" strokeDasharray="2" />
<polyline
points={makePath('baseline')}
fill="none" stroke="#06b6d4" strokeWidth="2"
vectorEffect="non-scaling-stroke"
style={{ filter: 'drop-shadow(0 0 3px rgba(6,182,212,0.8))' }}
/>
<polyline
points={makePath('memory')}
fill="none" stroke="#d946ef" strokeWidth="2"
vectorEffect="non-scaling-stroke"
style={{ filter: 'drop-shadow(0 0 3px rgba(217,70,239,0.8))' }}
/>
</svg>
);
});
MiniGraph.displayName = 'MiniGraph';
export default MiniGraph;
|