3interface ChartData {
4 algorithm: string;
5 compression_ratio: number;
6 encode_speed: number;
7 decode_speed: number;
8}
10interface BenchmarkChartsProps {
11 chartData: ChartData[];
12}
14export function BenchmarkCharts({ chartData }: BenchmarkChartsProps) {
15 if (!chartData.length) return null;
17 return (
18 <div style={{ marginBottom: '30px' }}>
19 <div style={{ marginBottom: '20px' }}>
20 <h3 style={{ marginBottom: '10px' }}>Compression Ratio</h3>
21 <Plot
22 data={[{
23 type: 'bar',
24 orientation: 'h',
25 y: chartData.map(d => d.algorithm),
26 x: chartData.map(d => d.compression_ratio),
27 marker: { color: '#8884d8' }
28 }]}
29 layout={{
30 width: 800,
31 height: 400,
32 margin: { t: 5, r: 30, l: 120, b: 30 },
33 xaxis: { title: 'Ratio' }
34 }}
35 config={{ displayModeBar: false }}
36 />
37 </div>
39 <div style={{ marginBottom: '20px' }}>
40 <h3 style={{ marginBottom: '10px' }}>Encode Speed (MB/s)</h3>
41 <Plot
42 data={[{
43 type: 'bar',
44 orientation: 'h',
45 y: chartData.map(d => d.algorithm),
46 x: chartData.map(d => d.encode_speed),
47 marker: { color: '#82ca9d' }
48 }]}
49 layout={{
50 width: 800,
51 height: 400,
52 margin: { t: 5, r: 30, l: 120, b: 30 },
53 xaxis: { title: 'MB/s' }
54 }}
55 config={{ displayModeBar: false }}
56 />
57 </div>
59 <div style={{ marginBottom: '20px' }}>
60 <h3 style={{ marginBottom: '10px' }}>Decode Speed (MB/s)</h3>
61 <Plot
62 data={[{
63 type: 'bar',
64 orientation: 'h',
65 y: chartData.map(d => d.algorithm),
66 x: chartData.map(d => d.decode_speed),
67 marker: { color: '#ff7300' }
68 }]}
69 layout={{
70 width: 800,
71 height: 400,
72 margin: { t: 5, r: 30, l: 120, b: 30 },
73 xaxis: { title: 'MB/s' }
74 }}
75 config={{ displayModeBar: false }}
76 />
77 </div>
78 </div>
79 );
80}