diff --git a/apps/dashboard/src/App.tsx b/apps/dashboard/src/App.tsx
index 7e898b0..867e8e8 100644
--- a/apps/dashboard/src/App.tsx
+++ b/apps/dashboard/src/App.tsx
@@ -4,6 +4,11 @@ import { BarChart3, Clock, Package, FileText } from 'lucide-react'
import './App.css'
import rolldownStats from '../../../rolldown-version-stats.json'
+// Utility function to format numbers with commas
+const formatNumberWithCommas = (num: number): string => {
+ return num.toLocaleString()
+}
+
// Transform rolldown stats data for charts
const buildTimeData = rolldownStats.map(stat => ({
name: `v${stat.version}`,
@@ -12,7 +17,7 @@ const buildTimeData = rolldownStats.map(stat => ({
const bundleSizeData = rolldownStats.map(stat => ({
name: `v${stat.version}`,
- value: Math.round(stat.totalSize / 1024) // Convert to KB
+ value: stat.totalSize // Use actual bytes instead of KB
}))
// Calculate file type breakdown from all versions
@@ -37,6 +42,14 @@ const fileTypeData = Object.entries(fileTypeStats).map(([type, size]) => ({
function App() {
const [selectedMetric, setSelectedMetric] = useState('buildTime')
+ // Custom tooltip formatter for bundle size
+ const customTooltipFormatter = (value: any, name: string) => {
+ if (selectedMetric === 'bundleSize') {
+ return [formatNumberWithCommas(value), name]
+ }
+ return [value, name]
+ }
+
const metrics = [
{ id: 'buildTime', name: 'Build Time', icon: Clock, data: buildTimeData, color: '#8884d8' },
{ id: 'bundleSize', name: 'Bundle Size', icon: Package, data: bundleSizeData, color: '#82ca9d' },
@@ -94,12 +107,12 @@ function App() {
{bundleSizeData[bundleSizeData.length - 1]?.value}KB
+{formatNumberWithCommas(bundleSizeData[bundleSizeData.length - 1]?.value || 0)} bytes
v{rolldownStats[rolldownStats.length - 1]?.version}