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,
56 config={{ displayModeBar: false }}
57 />
58 </div>
61 <h3 style={{ marginBottom: "10px" }}>Encode Speed (MB/s)</h3>
62 <Plot
63 data={[
64 {
65 type: "bar",
66 orientation: "h",
67 y: sortedData.map((d) => d.algorithm),
68 x: sortedData.map((d) => d.encode_speed),
69 marker: { color: "#82ca9d" },
70 },
71 ]}
72 layout={{
73 width: 800,
74 height: 400,
77 }}
78 config={{ displayModeBar: false }}
79 />
80 </div>
83 <h3 style={{ marginBottom: "10px" }}>Decode Speed (MB/s)</h3>
84 <Plot
85 data={[
86 {
87 type: "bar",
88 orientation: "h",
89 y: sortedData.map((d) => d.algorithm),
90 x: sortedData.map((d) => d.decode_speed),
91 marker: { color: "#ff7300" },
92 },
93 ]}
94 layout={{
95 width: 800,
96 height: 400,
99 }}
100 config={{ displayModeBar: false }}
101 />
102 </div>
105 );
106}