1import { useState } from "react";
2import Plot from "react-plotly.js";
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.algorithmOrDataset),
31 x: data.map((d) => d[dataKey]),
32 marker: { color },
33 name: title,
34 },
35 ...(dataKey === "compression_ratio" &&
36 data.some((d) => d.reference_compression_ratio !== null)
37 ? [
38 ...data
39 .filter((d) => d.reference_compression_ratio !== null)
40 .flatMap((d) => [
41 {
42 type: "scatter" as const,
43 mode: "lines" as const,
44 y: [d.algorithmOrDataset, d.algorithmOrDataset],
45 x: [0, d.reference_compression_ratio],
46 line: { color: "#aaaaaa", width: 1 },
47 showlegend: false,
48 hoverinfo: "skip" as const,
49 },
50 {
51 type: "scatter" as const,
52 mode: "markers" as const,
53 y: [d.algorithmOrDataset],
54 x: [d.reference_compression_ratio],
55 marker: { color: "#aaaaaa", size: 8 },
56 name: "Best Compression",
57 hovertemplate: "Best: %{x:.2f}<extra></extra>",
58 showlegend:
59 d.algorithmOrDataset === data[0].algorithmOrDataset, // Only show legend for first point
60 },
61 ]),
62 ]
63 : []),
64 ]}
65 layout={{
66 width: 700,
67 height: Math.max(300, data.length * 23 + 40),
68 margin: { t: 5, r: 30, l: 200, b: 30 },
69 xaxis: { title: xAxisTitle },
70 yaxis: { automargin: true, ticksuffix: " " },
71 dragmode: false,
72 }}
73 config={{ displayModeBar: false }}
74 />
75 </div>
76 );
77}
79interface ChartData {
80 algorithmOrDataset: string;
81 compression_ratio: number;
82 reference_compression_ratio: number | null; // the highest compression ratio for the dataset (if algorithmOrDataset is a dataset)
83 encode_speed: number;
84 decode_speed: number;
85}
87interface BenchmarkChartsProps {
88 chartData: ChartData[];
89 showSortByCompressionRatio?: boolean;
90}
92export function BenchmarkCharts({
93 chartData,
94 showSortByCompressionRatio,
95}: BenchmarkChartsProps) {
96 const [sortByRatio, setSortByRatio] = useState(
97 showSortByCompressionRatio ? true : false,
98 );
100 console.log("--- showSortByCompressionRatio", showSortByCompressionRatio);
102 if (!chartData.length) return null;
104 const sortedData = sortByRatio
105 ? [...chartData].sort((a, b) => a.compression_ratio - b.compression_ratio)
106 : chartData;
108 return (
109 <div>
110 {showSortByCompressionRatio && (
111 <div style={{ marginBottom: "10px" }}>
112 <label style={{ display: "flex", alignItems: "center", gap: "8px" }}>
113 <input
114 type="checkbox"
115 checked={sortByRatio}
116 onChange={(e) => setSortByRatio(e.target.checked)}
117 />
118 Sort by compression ratio
119 </label>
120 </div>
121 )}
122 <div
123 style={{
124 display: "flex",
125 flexWrap: "wrap",
126 gap: "20px",
127 }}
128 >
129 <BenchmarkBarChart
130 title="Compression Ratio"
131 data={sortedData}
132 dataKey="compression_ratio"
133 color="#8884d8"
134 xAxisTitle="Ratio"
135 />
136 <BenchmarkBarChart
137 title="Encode Speed (MB/s)"
138 data={sortedData}
139 dataKey="encode_speed"
140 color="#82ca9d"
141 xAxisTitle="MB/s"
142 />
143 <BenchmarkBarChart
144 title="Decode Speed (MB/s)"
145 data={sortedData}
146 dataKey="decode_speed"
147 color="#ff7300"
148 xAxisTitle="MB/s"
149 />
150 </div>
151 </div>
152 );
153}