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() { - + )} @@ -114,7 +127,7 @@ function App() {

Latest Bundle Size

-

{bundleSizeData[bundleSizeData.length - 1]?.value}KB

+

{formatNumberWithCommas(bundleSizeData[bundleSizeData.length - 1]?.value || 0)} bytes

v{rolldownStats[rolldownStats.length - 1]?.version}