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