1import Plot from "react-plotly.js";
2import { useState } from "react";
4interface BenchmarkBarChartProps {
5 title: string;
6 data: ChartData[];
7 dataKey: keyof Pick<
8 ChartData,
9 "compression_ratio" | "encode_speed" | "decode_speed"
10 >;
11 color: string;
12 xAxisTitle: string;
13}
15function BenchmarkBarChart({
16 title,
17 data,
18 dataKey,
19 color,
20 xAxisTitle,
21}: BenchmarkBarChartProps) {
22 return (
23 <div style={{ margin: "0 20px 20px 0" }}>
24 <h3 style={{ marginBottom: "10px" }}>{title}</h3>
25 <Plot
26 data={[
27 {
28 type: "bar",
29 orientation: "h",
30 y: data.map((d) => d.algorithm),
31 x: data.map((d) => d[dataKey]),
32 marker: { color },
33 },
34 ]}
35 layout={{
36 width: 700,
37 height: Math.max(300, data.length * 23 + 40),
38 margin: { t: 5, r: 30, l: 200, b: 30 },
39 xaxis: { title: xAxisTitle },
40 yaxis: { automargin: true, ticksuffix: " " },
41 dragmode: false,
42 }}
43 config={{ displayModeBar: false }}
44 />
45 </div>
46 );
47}
49interface ChartData {
50 algorithm: string;
51 compression_ratio: number;
52 encode_speed: number;
53 decode_speed: number;
54}
56interface BenchmarkChartsProps {
57 chartData: ChartData[];
58}
60export function BenchmarkCharts({ chartData }: BenchmarkChartsProps) {
61 const [sortByRatio, setSortByRatio] = useState(true);
63 if (!chartData.length) return null;
65 const sortedData = sortByRatio
66 ? [...chartData].sort((a, b) => a.compression_ratio - b.compression_ratio)
67 : chartData;
69 return (
70 <div>
71 <div style={{ marginBottom: "10px" }}>
72 <label style={{ display: "flex", alignItems: "center", gap: "8px" }}>
73 <input
74 type="checkbox"
75 checked={sortByRatio}
76 onChange={(e) => setSortByRatio(e.target.checked)}
77 />
78 Sort by compression ratio
79 </label>
80 </div>
81 <div
82 style={{
83 display: "flex",
84 flexWrap: "wrap",
85 gap: "20px",
86 }}
87 >
88 <BenchmarkBarChart
89 title="Compression Ratio"
90 data={sortedData}
91 dataKey="compression_ratio"
92 color="#8884d8"
93 xAxisTitle="Ratio"
94 />
95 <BenchmarkBarChart
96 title="Encode Speed (MB/s)"
97 data={sortedData}
98 dataKey="encode_speed"
99 color="#82ca9d"
100 xAxisTitle="MB/s"
101 />
102 <BenchmarkBarChart
103 title="Decode Speed (MB/s)"
104 data={sortedData}
105 dataKey="decode_speed"
106 color="#ff7300"
107 xAxisTitle="MB/s"
108 />
109 </div>
110 </div>
111 );
112}