2import axios from 'axios';
3import {
4 createColumnHelper,
5 flexRender,
6 getCoreRowModel,
7 useReactTable,
8 getSortedRowModel,
9} from '@tanstack/react-table';
10import { BenchmarkResult } from '../types';
12const columnHelper = createColumnHelper<BenchmarkResult>();
14const formatNumber = (num: number, decimals = 2) => {
15 return new Intl.NumberFormat('en-US', {
16 minimumFractionDigits: decimals,
17 maximumFractionDigits: decimals,
18 }).format(num);
19};
21const formatSize = (bytes: number) => {
22 const mb = bytes / (1024 * 1024);
23 return `${formatNumber(mb)} MB`;
24};
26const columns = [
27 columnHelper.accessor('dataset', {
28 header: 'Dataset',
29 cell: info => info.getValue(),
30 }),
31 columnHelper.accessor('algorithm', {
32 header: 'Algorithm',
33 cell: info => info.getValue(),
34 }),
35 columnHelper.accessor('compression_ratio', {
36 header: 'Compression Ratio',
37 cell: info => `${formatNumber(info.getValue())}x`,
38 sortingFn: (rowA, rowB) => {
39 const a = rowA.original.compression_ratio;
40 const b = rowB.original.compression_ratio;
41 return a - b;
42 },
43 }),
44 columnHelper.accessor('encode_time', {
45 header: 'Encode Time (s)',
46 cell: info => formatNumber(info.getValue(), 4),
47 sortingFn: (rowA, rowB) => {
48 const a = rowA.original.encode_time;
49 const b = rowB.original.encode_time;
50 return a - b;
51 },
52 }),
53 columnHelper.accessor('decode_time', {
54 header: 'Decode Time (s)',
55 cell: info => formatNumber(info.getValue(), 4),
56 sortingFn: (rowA, rowB) => {
57 const a = rowA.original.decode_time;
58 const b = rowB.original.decode_time;
59 return a - b;
60 },
61 }),
62 columnHelper.accessor('encode_mb_per_sec', {
63 header: 'Encode Speed (MB/s)',
64 cell: info => formatNumber(info.getValue()),
65 sortingFn: (rowA, rowB) => {
66 const a = rowA.original.encode_mb_per_sec;
67 const b = rowB.original.encode_mb_per_sec;
68 return a - b;
69 },
70 }),
71 columnHelper.accessor('decode_mb_per_sec', {
72 header: 'Decode Speed (MB/s)',
73 cell: info => formatNumber(info.getValue()),
74 sortingFn: (rowA, rowB) => {
75 const a = rowA.original.decode_mb_per_sec;
76 const b = rowB.original.decode_mb_per_sec;
77 return a - b;
78 },
79 }),
80 columnHelper.accessor('original_size', {
81 header: 'Original Size',
82 cell: info => formatSize(info.getValue()),
83 sortingFn: (rowA, rowB) => {
84 const a = rowA.original.original_size;
85 const b = rowB.original.original_size;
86 return a - b;
87 },
88 }),
89 columnHelper.accessor('compressed_size', {
90 header: 'Compressed Size',
91 cell: info => formatSize(info.getValue()),
92 sortingFn: (rowA, rowB) => {
93 const a = rowA.original.compressed_size;
94 const b = rowB.original.compressed_size;
95 return a - b;
96 },
97 }),
98];
100export function BenchmarkTable() {
101 const [data, setData] = useState<BenchmarkResult[]>([]);
103 useEffect(() => {
104 const fetchData = async () => {
105 try {
106 const response = await axios.get(
107 'https://raw.githubusercontent.com/magland/zia/benchmark-results/benchmark_results/results.json'
108 );
109 setData(response.data.results);
110 } catch (error) {
111 console.error('Error fetching benchmark data:', error);
112 }
113 };
115 fetchData();
116 }, []);
118 const table = useReactTable({
119 data,
120 columns,
121 getCoreRowModel: getCoreRowModel(),
122 getSortedRowModel: getSortedRowModel(),
123 });
125 return (
126 <div className="table-container">
127 <table>
128 <thead>
129 {table.getHeaderGroups().map(headerGroup => (
130 <tr key={headerGroup.id}>
131 {headerGroup.headers.map(header => (
132 <th
133 key={header.id}
134 onClick={header.column.getToggleSortingHandler()}
135 style={{ cursor: 'pointer' }}
136 >
137 {flexRender(
138 header.column.columnDef.header,
139 header.getContext()
140 )}
141 {header.column.getIsSorted() && (
142 <span style={{ marginLeft: '4px' }}>
143 {header.column.getIsSorted() === 'asc' ? '↑' : '↓'}
144 </span>
145 )}
146 </th>
147 ))}
148 </tr>
149 ))}
150 </thead>
151 <tbody>
152 {table.getRowModel().rows.map(row => (
153 <tr key={row.id}>
154 {row.getVisibleCells().map(cell => (
155 <td key={cell.id}>
156 {flexRender(cell.column.columnDef.cell, cell.getContext())}
157 </td>
158 ))}
159 </tr>
160 ))}
161 </tbody>
162 </table>
163 </div>
164 );
165}