Skip to content

Conversation

@adriandarian
Copy link
Contributor

Description

This PR implements the "Visualize chunk/assets size in nanovis" feature from #9.

Changes

Adds three new visualization options for chunks in the session view:

  • Treemap - Nested rectangles showing chunk sizes proportionally
  • Sunburst - Radial donut chart with drill-down navigation
  • Flamegraph - Horizontal bar chart hierarchy

Implementation

  • Extended chunkViewType settings to include 'treemap' | 'sunburst' | 'flamegraph'
  • Added ChunkChartInfo and ChunkChartNode types for chart data
  • Created Sunburst.vue and Flamegraph.vue components in components/chunks/
  • Updated chunks.vue page with:
    • View type selector buttons for the new visualizations
    • Chunk size calculation (from asset size or module transforms)
    • useChartGraph composable integration
    • Hover tooltip showing chunk details (name, size, modules, initial badge)

Linked Issues

#9

Additional context

- Add treemap, sunburst, and flamegraph view types for chunks
- Create ChunkChartInfo and ChunkChartNode types for chart visualization
- Add Sunburst.vue and Flamegraph.vue components for chunks
- Calculate chunk size from asset size or module transforms
- Add hover tooltip showing chunk name, size, modules count
- Extend chunkViewType settings to include new visualization options

Closes vitejs#9
@antfu antfu merged commit 16af242 into vitejs:main Jan 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants