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 {
42 type: "bar",
43 orientation: "h",
44 y: sortedData.map((d) => d.algorithm),
45 x: sortedData.map((d) => d.compression_ratio),
46 marker: { color: "#8884d8" },
47 },
48 ]}
49 layout={{
50 width: 800,
51 height: 400,
52 margin: { t: 5, r: 30, l: 250, b: 30 },
53 xaxis: { title: "Ratio" },
54 }}
55 config={{ displayModeBar: false }}
56 />
57 </div>
59 <div style={{ marginBottom: "20px" }}>
60 <h3 style={{ marginBottom: "10px" }}>Encode Speed (MB/s)</h3>
61 <Plot
62 data={[
63 {
64 type: "bar",
65 orientation: "h",
66 y: sortedData.map((d) => d.algorithm),
67 x: sortedData.map((d) => d.encode_speed),
68 marker: { color: "#82ca9d" },
69 },
70 ]}
71 layout={{
72 width: 800,
73 height: 400,
74 margin: { t: 5, r: 30, l: 250, b: 30 },
75 xaxis: { title: "MB/s" },
76 }}
77 config={{ displayModeBar: false }}
78 />
79 </div>
81 <div style={{ marginBottom: "20px" }}>
82 <h3 style={{ marginBottom: "10px" }}>Decode Speed (MB/s)</h3>
83 <Plot
84 data={[
85 {
86 type: "bar",
87 orientation: "h",
88 y: sortedData.map((d) => d.algorithm),
89 x: sortedData.map((d) => d.decode_speed),
90 marker: { color: "#ff7300" },
91 },
92 ]}
93 layout={{
94 width: 800,
95 height: 400,
96 margin: { t: 5, r: 30, l: 250, b: 30 },
97 xaxis: { title: "MB/s" },
98 }}
99 config={{ displayModeBar: false }}
100 />
101 </div>
102 </div>
103 </div>
104 );
105}