eacabc8test real dataJeremy Magland 3
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;
16function BenchmarkBarChart({
17 title,
18 data,
19 dataKey,
20 color,
21 xAxisTitle,
25 normalize && dataKey === "compression_ratio"
26 ? data.map((d) => ({
27 ...d,
28 compression_ratio: d.reference_compression_ratio
29 ? d.compression_ratio / d.reference_compression_ratio
30 : d.compression_ratio,
31 reference_compression_ratio: d.reference_compression_ratio ? 1 : null,
32 }))
33 : data;
36 <div style={{ margin: "0 20px 20px 0" }}>
37 <h3 style={{ marginBottom: "10px" }}>{title}</h3>
38 <Plot
39 data={[
40 {
41 type: "bar",
42 orientation: "h",
7245151normalize to best compressionJeremy Magland 43 y: normalizedData.map((d) => d.algorithmOrDataset),
44 x: normalizedData.map((d) => d[dataKey]),
48 normalize && dataKey === "compression_ratio"
49 ? "%{x:.3f}×<extra></extra>"
50 : "%{x:.2f}<extra></extra>",
7245151normalize to best compressionJeremy Magland 53 normalizedData.some((d) => d.reference_compression_ratio !== null)
a2daa82reference compression ratiosJeremy Magland 56 .filter((d) => d.reference_compression_ratio !== null)
57 .flatMap((d) => [
58 {
59 type: "scatter" as const,
60 mode: "lines" as const,
61 y: [d.algorithmOrDataset, d.algorithmOrDataset],
62 x: [0, d.reference_compression_ratio],
65 hoverinfo: "skip" as const,
66 },
67 {
68 type: "scatter" as const,
69 mode: "markers" as const,
70 y: [d.algorithmOrDataset],
71 x: [d.reference_compression_ratio],
72 marker: { color: "#aaaaaa", size: 8 },
73 name: "Best Compression",
75 ? "Best: 1.000×<extra></extra>"
76 : "Best: %{x:.2f}<extra></extra>",
79 normalizedData[0].algorithmOrDataset,
81 ]),
82 ]
83 : []),
85 layout={{
86 width: 700,
87 height: Math.max(300, data.length * 23 + 40),
88 margin: { t: 5, r: 30, l: 200, b: 30 },
89 xaxis: { title: xAxisTitle },
90 yaxis: { automargin: true, ticksuffix: " " },
91 dragmode: false,
92 }}
93 config={{ displayModeBar: false }}
94 />
95 </div>
96 );
97}
a2daa82reference compression ratiosJeremy Magland 102 reference_compression_ratio: number | null; // the highest compression ratio for the dataset (if algorithmOrDataset is a dataset)
104 decode_speed: number;
105}
107interface BenchmarkChartsProps {
108 chartData: ChartData[];
114 chartData,
115 showSortByCompressionRatio,
118 const [sortByRatio, setSortByRatio] = useState(
119 showSortByCompressionRatio ? true : false,
120 );
7245151normalize to best compressionJeremy Magland 121 const [normalize, setNormalize] = useState(false);
8a6e869delta encoding for other algsJeremy Magland 122
126 ? [...chartData].sort((a, b) => a.compression_ratio - b.compression_ratio)
127 : chartData;
132 <div style={{ marginBottom: "10px" }}>
133 <label style={{ display: "flex", alignItems: "center", gap: "8px" }}>
134 <input
135 type="checkbox"
136 checked={sortByRatio}
137 onChange={(e) => setSortByRatio(e.target.checked)}
138 />
139 Sort by compression ratio
140 </label>
141 </div>
142 )}
144 <div style={{ marginBottom: "10px" }}>
145 <label style={{ display: "flex", alignItems: "center", gap: "8px" }}>
146 <input
147 type="checkbox"
148 checked={normalize}
149 onChange={(e) => setNormalize(e.target.checked)}
150 />
151 Normalize to best compression
152 </label>
153 </div>
154 )}
156 style={{
157 display: "flex",
158 flexWrap: "wrap",
159 gap: "20px",
160 }}
161 >
162 <BenchmarkBarChart
163 title="Compression Ratio"
164 data={sortedData}
165 dataKey="compression_ratio"
166 color="#8884d8"
7245151normalize to best compressionJeremy Magland 167 xAxisTitle={normalize ? "Fraction of Best Compression" : "Ratio"}
168 normalize={normalize}
170 <BenchmarkBarChart
171 title="Encode Speed (MB/s)"
172 data={sortedData}
173 dataKey="encode_speed"
174 color="#82ca9d"
175 xAxisTitle="MB/s"
176 />
177 <BenchmarkBarChart
178 title="Decode Speed (MB/s)"
179 data={sortedData}
180 dataKey="decode_speed"
181 color="#ff7300"
182 xAxisTitle="MB/s"
183 />
186 );
187}