typescript-runtime-type-benchmarks icon indicating copy to clipboard operation
typescript-runtime-type-benchmarks copied to clipboard

feat(web): add rank numbers to benchmark results display

Open ImBIOS opened this issue 5 months ago โ€ข 0 comments

๐ŸŽฏ Purpose

This PR adds rank numbers to the benchmark results display in the web interface to make performance comparisons more accessible for presentations and quick analysis.

๐Ÿ“‹ Changes

  • Display rank numbers: Each library now shows its ranking position (e.g., #1 typia, #2 ajv) next to the library name
  • Smart ranking calculation: Rankings are calculated based on average performance across all selected benchmarks
  • Multi-sort support: Ranking works correctly with all three sorting modes:
    • Fastest: Ranks by average operations per second (descending)
    • Alphabetical: Maintains alphabetical order with rank numbers
    • Popularity: Ranks by npm weekly downloads
  • Performance-aware: When multiple benchmarks are selected, uses average ops/sec for fair comparison

๐Ÿ–ผ๏ธ Visual Impact

Before: Library names displayed without ranking context After: Clear rank indicators (#1, #2, #3, etc.) make it easy to identify top performers at a glance

๐Ÿงช Testing

  • โœ… TypeScript compilation passes
  • โœ… Build process completes successfully
  • โœ… All sorting modes work correctly with rankings
  • โœ… Multi-benchmark averaging works as expected

๐Ÿ’ผ Business Value

Makes benchmark presentations more professional and easier to understand for stakeholders by providing clear performance rankings without requiring detailed analysis of raw numbers.

Closes #2062

ImBIOS avatar Jul 23 '25 04:07 ImBIOS