2import { useState } from "react";
eacabc8test real dataJeremy Magland 3
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) {
8a6e869delta encoding for other algsJeremy Magland 16 const [sortByRatio, setSortByRatio] = useState(true);
21 ? [...chartData].sort((a, b) => a.compression_ratio - b.compression_ratio)
22 : chartData;
27 <label style={{ display: "flex", alignItems: "center", gap: "8px" }}>
29 type="checkbox"
30 checked={sortByRatio}
31 onChange={(e) => setSortByRatio(e.target.checked)}
32 />
33 Sort by compression ratio
34 </label>
35 </div>
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,
54 }}
55 config={{ displayModeBar: false }}
56 />
57 </div>
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,
76 }}
77 config={{ displayModeBar: false }}
78 />
79 </div>
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,
98 }}
99 config={{ displayModeBar: false }}
100 />
101 </div>
104 );
105}