Skip to content

Commit 087f7c4

Browse files
CopilotBoshen
Copilot
and
Boshen
committed
Separate minification benchmarks into dedicated components
Co-authored-by: Boshen <1430279+Boshen@users.noreply.github.com>
1 parent dc679ab commit 087f7c4

4 files changed

Lines changed: 444 additions & 206 deletions

File tree

‎apps/dashboard/src/App.css‎

Lines changed: 58 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -64,53 +64,86 @@
6464

6565
/* Page Navigation */
6666
.page-nav {
67-
background: #f8fafc;
67+
background: transparent;
6868
padding: 1rem 2rem;
6969
display: flex;
7070
gap: 0.5rem;
7171
max-width: 1200px;
7272
margin: 0 auto;
73-
border-bottom: 1px solid #e2e8f0;
73+
border-radius: 0.75rem;
74+
margin-top: -0.5rem;
75+
position: relative;
76+
z-index: 10;
7477
}
7578

7679
.page-button {
7780
display: flex;
7881
align-items: center;
79-
gap: 0.5rem;
80-
padding: 0.75rem 1.5rem;
82+
gap: 0.625rem;
83+
padding: 1rem 1.5rem;
8184
border: 2px solid transparent;
82-
background: white;
83-
border-radius: 0.5rem;
85+
background: transparent;
86+
border-radius: 0.75rem;
8487
cursor: pointer;
8588
font-weight: 600;
86-
font-size: 0.9rem;
87-
transition: all 0.2s ease;
89+
font-size: 0.95rem;
90+
transition: all 0.3s ease;
8891
color: #64748b;
8992
text-transform: capitalize;
9093
letter-spacing: -0.025em;
91-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
94+
position: relative;
95+
overflow: hidden;
96+
min-width: 160px;
97+
justify-content: center;
98+
}
99+
100+
.page-button::before {
101+
content: '';
102+
position: absolute;
103+
top: 0;
104+
left: -100%;
105+
width: 100%;
106+
height: 100%;
107+
background: linear-gradient(90deg,
108+
transparent,
109+
rgba(16, 185, 129, 0.3),
110+
transparent);
111+
transition: left 0.5s ease;
92112
}
93113

94114
.page-button:hover {
95-
background: #f1f5f9;
96-
color: #475569;
97-
transform: translateY(-1px);
98-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
115+
background: transparent;
116+
border-color: #10b981;
117+
color: #059669;
118+
transform: translateY(-2px);
119+
box-shadow: 0 8px 16px rgba(16, 185, 129, 0.2);
120+
}
121+
122+
.page-button:hover::before {
123+
left: 100%;
99124
}
100125

101126
.page-button.active {
102-
background: #000000;
103-
color: white;
104-
border-color: #000000;
105-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
127+
background: transparent;
128+
border-color: #10b981;
129+
color: #059669;
130+
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
131+
transform: translateY(-1px);
132+
}
133+
134+
.page-button.active::before {
135+
background: linear-gradient(90deg,
136+
transparent,
137+
rgba(16, 185, 129, 0.2),
138+
transparent);
106139
}
107140

108141
.page-button.active:hover {
109-
background: #374151;
110-
transform: translateY(-1px);
142+
transform: translateY(-3px);
143+
box-shadow: 0 12px 24px rgba(16, 185, 129, 0.4);
111144
}
112145

113-
/* Navigation */
146+
/* Metric Navigation */
114147
.dashboard-nav {
115148
background: transparent;
116149
padding: 1.25rem 2rem;
@@ -286,6 +319,11 @@
286319

287320
/* Responsive Design */
288321
@media (max-width: 768px) {
322+
.page-nav {
323+
flex-direction: column;
324+
gap: 0.5rem;
325+
}
326+
289327
.dashboard-nav {
290328
flex-direction: column;
291329
gap: 0.5rem;

‎apps/dashboard/src/App.tsx‎

Lines changed: 44 additions & 186 deletions
Original file line numberDiff line numberDiff line change
@@ -1,207 +1,65 @@
11
import { useState } from 'react'
2-
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell } from 'recharts'
3-
import { BarChart3, Clock, Package } from 'lucide-react'
2+
import { BarChart3, Package, Zap } from 'lucide-react'
43
import './App.css'
5-
import rolldownStats from '../../../rolldown-version-stats.json'
6-
7-
// Utility function to format numbers with commas
8-
const formatNumberWithCommas = (num: number): string => {
9-
return num.toLocaleString()
10-
}
11-
12-
// Transform rolldown stats data for charts
13-
const buildTimeData = rolldownStats.map(stat => ({
14-
name: `v${stat.version}`,
15-
value: stat.buildTime
16-
}))
17-
18-
// Calculate bundle size differences between consecutive versions
19-
const bundleSizeDiffData = rolldownStats.map((stat, index) => {
20-
if (index === 0) {
21-
// For the first version, show 0 difference or could show absolute value
22-
return {
23-
name: `v${stat.version}`,
24-
value: 0,
25-
previousSize: null,
26-
currentSize: stat.totalSize,
27-
isBaseline: true
28-
}
29-
}
30-
31-
const prevSize = rolldownStats[index - 1].totalSize
32-
const currentSize = stat.totalSize
33-
const diff = currentSize - prevSize
34-
35-
return {
36-
name: `v${stat.version}`,
37-
value: diff,
38-
previousSize: prevSize,
39-
currentSize: currentSize,
40-
isBaseline: false
41-
}
42-
})
4+
import RolldownStats from './RolldownStats'
5+
import MinificationBenchmarks from './MinificationBenchmarks'
436

447
function App() {
8+
const [selectedPage, setSelectedPage] = useState('rolldown')
459
const [selectedMetric, setSelectedMetric] = useState('bundleSize')
4610

47-
// Custom tooltip formatter for bundle size differences
48-
const bundleSizeDiffTooltipFormatter = (value: any, name: string, props: any) => {
49-
const data = props.payload
50-
if (!data) return [value, name]
51-
52-
if (data.isBaseline) {
53-
return [`${formatNumberWithCommas(data.currentSize)} bytes (baseline)`, 'Bundle Size']
54-
}
55-
56-
const sign = value >= 0 ? '+' : ''
57-
const changeText = `${sign}${formatNumberWithCommas(value)} bytes`
58-
const fromTo = `(${formatNumberWithCommas(data.previousSize)} → ${formatNumberWithCommas(data.currentSize)})`
59-
60-
return [`${changeText} ${fromTo}`, 'Size Change']
61-
}
62-
63-
const metrics = [
64-
{ id: 'bundleSize', name: 'Bundle Size', icon: Package, data: bundleSizeDiffData, color: '#374151' },
65-
{ id: 'buildTime', name: 'Build Time', icon: Clock, data: buildTimeData, color: '#000000' },
66-
]
67-
68-
const currentMetric = metrics.find(m => m.id === selectedMetric) || metrics[0]
69-
7011
return (
7112
<div className="dashboard">
7213
<header className="dashboard-header">
7314
<div className="header-content">
7415
<div className="logo">
7516
<BarChart3 size={28} />
76-
<h1>Rolldown-Vite dashboard</h1>
17+
<h1>{selectedPage === 'rolldown' ? 'Rolldown-Vite Dashboard' : 'Minification Benchmarks'}</h1>
7718
</div>
78-
<p className="header-subtitle">Statistics collected from different Rolldown-Vite versions</p>
19+
<p className="header-subtitle">
20+
{selectedPage === 'rolldown'
21+
? 'Statistics collected from different Rolldown-Vite versions'
22+
: 'Performance comparison of JavaScript minification tools'}
23+
</p>
7924
</div>
8025
</header>
8126

82-
<nav className="dashboard-nav">
83-
{metrics.map((metric) => {
84-
const Icon = metric.icon
85-
return (
86-
<button
87-
key={metric.id}
88-
className={`nav-button ${selectedMetric === metric.id ? 'active' : ''}`}
89-
onClick={() => {
90-
setSelectedMetric(metric.id)
91-
}}
92-
>
93-
<Icon size={20} />
94-
{metric.name}
95-
</button>
96-
)
97-
})}
27+
{/* Page Navigation */}
28+
<nav className="page-nav">
29+
<button
30+
className={`page-button ${selectedPage === 'rolldown' ? 'active' : ''}`}
31+
onClick={() => {
32+
setSelectedPage('rolldown')
33+
setSelectedMetric('bundleSize')
34+
}}
35+
>
36+
<Package size={20} />
37+
Rolldown Stats
38+
</button>
39+
<button
40+
className={`page-button ${selectedPage === 'minification' ? 'active' : ''}`}
41+
onClick={() => {
42+
setSelectedPage('minification')
43+
setSelectedMetric('minTime')
44+
}}
45+
>
46+
<Zap size={20} />
47+
Minification Benchmarks
48+
</button>
9849
</nav>
9950

100-
<main className="dashboard-main">
101-
<div className="chart-container">
102-
<h2>{currentMetric.name}</h2>
103-
<ResponsiveContainer width="100%" height={400}>
104-
{selectedMetric === 'bundleSize' ? (
105-
<BarChart data={currentMetric.data}>
106-
<CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
107-
<XAxis
108-
dataKey="name"
109-
tick={{ fill: '#374151', fontSize: 12 }}
110-
axisLine={{ stroke: '#d1d5db' }}
111-
tickLine={{ stroke: '#d1d5db' }}
112-
/>
113-
<YAxis
114-
tick={{ fill: '#374151', fontSize: 12 }}
115-
axisLine={{ stroke: '#d1d5db' }}
116-
tickLine={{ stroke: '#d1d5db' }}
117-
/>
118-
<Tooltip
119-
formatter={bundleSizeDiffTooltipFormatter}
120-
contentStyle={{
121-
backgroundColor: 'white',
122-
border: '1px solid #d1d5db',
123-
borderRadius: '0.5rem',
124-
color: '#111827',
125-
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)'
126-
}}
127-
/>
128-
<Legend
129-
wrapperStyle={{ color: '#374151' }}
130-
/>
131-
<Bar dataKey="value" name="Bundle Size Change (bytes)">
132-
{currentMetric.data.map((entry: any, index: number) => (
133-
<Cell
134-
key={`cell-${index}`}
135-
fill={entry.isBaseline ? '#6b7280' : (entry.value >= 0 ? '#dc2626' : '#16a34a')}
136-
/>
137-
))}
138-
</Bar>
139-
</BarChart>
140-
) : (
141-
<BarChart data={currentMetric.data}>
142-
<CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
143-
<XAxis
144-
dataKey="name"
145-
tick={{ fill: '#374151', fontSize: 12 }}
146-
axisLine={{ stroke: '#d1d5db' }}
147-
tickLine={{ stroke: '#d1d5db' }}
148-
/>
149-
<YAxis
150-
tick={{ fill: '#374151', fontSize: 12 }}
151-
axisLine={{ stroke: '#d1d5db' }}
152-
tickLine={{ stroke: '#d1d5db' }}
153-
/>
154-
<Tooltip
155-
contentStyle={{
156-
backgroundColor: 'white',
157-
border: '1px solid #d1d5db',
158-
borderRadius: '0.5rem',
159-
color: '#111827',
160-
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)'
161-
}}
162-
/>
163-
<Legend
164-
wrapperStyle={{ color: '#374151' }}
165-
/>
166-
<Bar
167-
dataKey="value"
168-
fill="url(#buildTimeGradient)"
169-
name="Build Time (ms)"
170-
/>
171-
<defs>
172-
<linearGradient id="buildTimeGradient" x1="0" y1="0" x2="0" y2="1">
173-
<stop offset="0%" stopColor="#000000" stopOpacity={1}/>
174-
<stop offset="100%" stopColor="#374151" stopOpacity={0.8}/>
175-
</linearGradient>
176-
</defs>
177-
</BarChart>
178-
)}
179-
</ResponsiveContainer>
180-
</div>
181-
182-
<div className="stats-grid">
183-
<div className="stat-card">
184-
<h3>Average Build Time</h3>
185-
<p className="stat-value">{Math.round(buildTimeData.reduce((sum, item) => sum + item.value, 0) / buildTimeData.length)}ms</p>
186-
<span className="stat-change positive">Across {buildTimeData.length} versions</span>
187-
</div>
188-
<div className="stat-card">
189-
<h3>Latest Bundle Size</h3>
190-
<p className="stat-value">{formatNumberWithCommas(rolldownStats[rolldownStats.length - 1]?.totalSize || 0)} bytes</p>
191-
<span className="stat-change positive">v{rolldownStats[rolldownStats.length - 1]?.version}</span>
192-
</div>
193-
<div className="stat-card">
194-
<h3>Bundle Size Range</h3>
195-
<p className="stat-value">{Math.round((Math.max(...rolldownStats.map(s => s.totalSize)) - Math.min(...rolldownStats.map(s => s.totalSize))) / 1024)}KB</p>
196-
<span className="stat-change positive">Size Variation</span>
197-
</div>
198-
<div className="stat-card">
199-
<h3>Versions Tested</h3>
200-
<p className="stat-value">{rolldownStats.length}</p>
201-
<span className="stat-change positive">{rolldownStats[0]?.version} - {rolldownStats[rolldownStats.length - 1]?.version}</span>
202-
</div>
203-
</div>
204-
</main>
51+
{/* Render the appropriate component based on selected page */}
52+
{selectedPage === 'rolldown' ? (
53+
<RolldownStats
54+
selectedMetric={selectedMetric}
55+
setSelectedMetric={setSelectedMetric}
56+
/>
57+
) : (
58+
<MinificationBenchmarks
59+
selectedMetric={selectedMetric}
60+
setSelectedMetric={setSelectedMetric}
61+
/>
62+
)}
20563
</div>
20664
)
20765
}

0 commit comments

Comments
 (0)