1import Plot from 'react-plotly.js';
2import { useState } from 'react';
4interface ChartData {
5 algorithm: string;
6 compression_ratio: number;
7 encode_speed: number;
8 decode_speed: number;
9}
11interface BenchmarkChartsProps {
12 chartData: ChartData[];
13}
15export function BenchmarkCharts({ chartData }: BenchmarkChartsProps) {
16 const [sortByRatio, setSortByRatio] = useState(true);
18 if (!chartData.length) return null;
20 const sortedData = sortByRatio
21 ? [...chartData].sort((a, b) => a.compression_ratio - b.compression_ratio)
22 : chartData;
24 return (
25 <div>
26 <div style={{ marginBottom: '10px' }}>
27 <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
28 <input
29 type="checkbox"
30 checked={sortByRatio}
31 onChange={(e) => setSortByRatio(e.target.checked)}
32 />
33 Sort by compression ratio
34 </label>
35 </div>
36 <div style={{ marginBottom: '30px' }}>
37 <div style={{ marginBottom: '20px' }}>
38 <h3 style={{ marginBottom: '10px' }}>Compression Ratio</h3>
39 <Plot
40 data={[{
41 type: 'bar',
42 orientation: 'h',
43 y: sortedData.map(d => d.algorithm),
44 x: sortedData.map(d => d.compression_ratio),
45 marker: { color: '#8884d8' }
46 }]}
47 layout={{
48 width: 800,
49 height: 400,
50 margin: { t: 5, r: 30, l: 120, b: 30 },
51 xaxis: { title: 'Ratio' }
52 }}
53 config={{ displayModeBar: false }}
54 />
55 </div>
57 <div style={{ marginBottom: '20px' }}>
58 <h3 style={{ marginBottom: '10px' }}>Encode Speed (MB/s)</h3>
59 <Plot
60 data={[{
61 type: 'bar',
62 orientation: 'h',
63 y: sortedData.map(d => d.algorithm),
64 x: sortedData.map(d => d.encode_speed),
65 marker: { color: '#82ca9d' }
66 }]}
67 layout={{
68 width: 800,
69 height: 400,
70 margin: { t: 5, r: 30, l: 120, b: 30 },
71 xaxis: { title: 'MB/s' }
72 }}
73 config={{ displayModeBar: false }}
74 />
75 </div>
77 <div style={{ marginBottom: '20px' }}>
78 <h3 style={{ marginBottom: '10px' }}>Decode Speed (MB/s)</h3>
79 <Plot
80 data={[{
81 type: 'bar',
82 orientation: 'h',
83 y: sortedData.map(d => d.algorithm),
84 x: sortedData.map(d => d.decode_speed),
85 marker: { color: '#ff7300' }
86 }]}
87 layout={{
88 width: 800,
89 height: 400,
90 margin: { t: 5, r: 30, l: 120, b: 30 },
91 xaxis: { title: 'MB/s' }
92 }}
93 config={{ displayModeBar: false }}
94 />
95 </div>
96 </div>
97 </div>
98 );
99}