Charts

The charts family visualizes code-coverage-style data: one hierarchy chart with three interchangeable layouts (sunburst, icicle, treemap), a trend chart for a metric over time, and an inline sparkline. Arc/tile size follows the amount of code (lines); color follows the coverage metric through a red→green scale over the 60–80% range.

Hierarchy chart

Depth:

Dataset:

The workspace dataset is this repository's own coverage tree (803 files, 11 levels deep) — dense enough to show how the chart behaves when sections get very small.

The treeview below is the same data as an equivalent control (WCAG 2.2 target size): selecting a folder re-roots the chart.

src
libs
tools
README.md

Keyboard shortcuts & zoom gestures

Tab — one tab stop for the whole chart (plus the zoom-out button and breadcrumb)
← / → — previous / next sibling in the ring (wraps)
↓ — into the first child (one ring outward)
↑ — to the parent (one ring inward)
Enter — drill into a folder / select a file
Esc — dismiss the tooltip, then reset the magnification, then drill out (Backspace always drills out)
+ / − / 0 — magnify / shrink around the focused node / reset
Home / End — first / last sibling
Type letters — jump to the next node starting with them

Pointer zoom: Ctrl + scroll (trackpad pinch works too) magnifies around the cursor — labels keep their size, so small sections become readable as you zoom in. Drag to pan while magnified. On touch, pinch with two fingers and pan with two fingers; one finger keeps scrolling the page. Clicking a section still drills into it.

  
    
      
        <bs-hierarchy-chart
        
    
      
          [data]="coverageTree"
        
    
      
          [layout]="layout()"
        
    
      
          [(rootId)]="rootId"
        
    
      
          [maxDepth]="maxDepth()"
        
    
      
          [colorMin]="60"
        
    
      
          [colorMax]="80"
        
    
      
          [showBreadcrumb]="true"
        
    
      
          inputLabel="Coverage by folder"
        
    
      
          valueUnitLabel="lines"
        
    
      
          (nodeSelect)="openFile($event.node)" />

  
    
      
        readonly layout = signal<HierarchyChartLayout>('sunburst');
        
    
      
        readonly rootId = signal<string | null>(null);
        
    
      
        // The element caps at 2 levels by default; 'auto' draws every loaded level.
        
    
      
        readonly maxDepth = signal<number | 'auto'>('auto');
        
    
      
        readonly coverageTree: HierarchyNode = {
        
    
      
          id: 'repo', name: 'repo',
        
    
      
          children: [
        
    
      
            { id: 'src', name: 'src', children: [
        
    
      
              { id: 'src/main.ts', name: 'main.ts', value: 120, colorValue: 100 },
        
    
      
            ]},
        
    
      
          ],
        
    
      
        };

Trend chart

Keyboard shortcuts

Tab — one tab stop for the data points
← / → — previous / next point in the series
↑ / ↓ — same moment in the previous / next series
Home / End — first / last point
Enter or Space — select the point

  
    
      
        <bs-trend-chart
        
    
      
          [series]="trendSeries"
        
    
      
          [yMin]="0" [yMax]="100"
        
    
      
          [goal]="80" goalLabel="Goal 80%"
        
    
      
          inputLabel="Coverage over time"
        
    
      
          summary="Coverage rose from 62% to 85% between January and March." />

Sparklines

Inline, non-interactive trends for table cells — the numbers live in the row.

Flag	Coverage	Trend
unit	84%
integration	66%
e2e	41%

  
    
      
        <bs-sparkline [points]="row.trend" [area]="true" [yMin]="0" [yMax]="100" />