1import Plot from "react-plotly.js";
2import { useState } from "react";
4interface ChartData {
5 algorithmOrDataset: string;
6 compression_ratio: number;
7 encode_speed: number;
8 decode_speed: number;
9}
11interface BenchmarkScatterPlotsProps {
12 chartData: ChartData[];
13}
15export function BenchmarkScatterPlots({
16 chartData,
17}: BenchmarkScatterPlotsProps) {
18 const [showLabels, setShowLabels] = useState(false);
20 if (!chartData.length) return null;
22 const uniqueAlgorithms = Array.from(
23 new Set(chartData.map((d) => d.algorithmOrDataset)),
24 );
26 const colors = [
27 "#1f77b4", // blue
28 "#ff7f0e", // orange
29 "#2ca02c", // green
30 "#d62728", // red
31 "#9467bd", // purple
32 "#8c564b", // brown
33 "#e377c2", // pink
34 "#7f7f7f", // gray
35 ];
37 const markers = ["circle", "square", "diamond", "triangle-up", "star"];
39 // Create traces for each algorithm
40 const traces = uniqueAlgorithms.flatMap((algo, i) => {
41 const algoData = chartData.filter((d) => d.algorithmOrDataset === algo);
42 const baseTrace = {
43 name: algo,
44 mode: showLabels ? ("markers+text" as const) : ("markers" as const),
45 marker: {
46 color: colors[i % colors.length],
47 symbol: markers[Math.floor(i / colors.length) % markers.length],
48 size: 10,
49 },
50 text: showLabels ? algoData.map(() => algo) : [],
51 textposition: "top center" as const,
52 showlegend: true,
53 legendgroup: algo,
54 };
56 return [
57 // Compression Ratio vs Decode Speed (upper left)
58 {
59 ...baseTrace,
60 x: algoData.map((d) => d.compression_ratio),
61 y: algoData.map((d) => d.decode_speed),
62 xaxis: "x" as const,
63 yaxis: "y" as const,
64 showlegend: true,
65 },
66 // Compression Ratio vs Encode Speed (lower left)
67 {
68 ...baseTrace,
69 x: algoData.map((d) => d.compression_ratio),
70 y: algoData.map((d) => d.encode_speed),
71 xaxis: "x2" as const,
72 yaxis: "y2" as const,
73 showlegend: false,
74 },
75 // Decode Speed vs Encode Speed (lower right)
76 {
77 ...baseTrace,
78 x: algoData.map((d) => d.decode_speed),
79 y: algoData.map((d) => d.encode_speed),
80 xaxis: "x3" as const,
81 yaxis: "y3" as const,
82 showlegend: false,
83 },
84 ];
85 });
87 return (
88 <div style={{ margin: "20px 0" }}>
89 <div style={{ marginBottom: "10px" }}>
90 <h2 style={{ marginBottom: "10px" }}>Performance Relationships</h2>
91 <label style={{ display: "flex", alignItems: "center", gap: "8px" }}>
92 <input
93 type="checkbox"
94 checked={showLabels}
95 onChange={(e) => setShowLabels(e.target.checked)}
96 />
97 Show point labels
98 </label>
99 </div>
100 <Plot
101 data={traces}
102 layout={{
103 width: 1000,
104 height: 670,
105 grid: {
106 rows: 2,
107 columns: 2,
108 pattern: "independent",
109 },
110 xaxis: {
111 title: "Compression Ratio",
112 domain: [0, 0.45],
113 },
114 yaxis: {
115 title: "Decode Speed (MB/s)",
116 domain: [0.55, 1],
117 },
118 xaxis2: {
119 title: "Compression Ratio",
120 domain: [0, 0.45],
121 },
122 yaxis2: {
123 title: "Encode Speed (MB/s)",
124 domain: [0, 0.45],
125 },
126 xaxis3: {
127 title: "Decode Speed (MB/s)",
128 domain: [0.55, 1],
129 },
130 yaxis3: {
131 title: "Encode Speed (MB/s)",
132 domain: [0, 0.45],
133 },
134 showlegend: true,
135 legend: {
136 x: 1.08,
137 y: 1,
138 xanchor: "left" as const,
139 yanchor: "top" as const,
140 },
141 margin: {
142 l: 60,
143 r: 40,
144 t: 20,
145 b: 60,
146 },
147 }}
148 config={{
149 displayModeBar: true,
150 displaylogo: false,
151 modeBarButtonsToRemove: [
152 "lasso2d",
153 "select2d",
154 "hoverClosestCartesian",
155 "hoverCompareCartesian",
156 ],
157 }}
158 />
159 </div>
160 );
161}