Charts

Coverage-style visualizations: a hierarchy chart with three interchangeable layouts, a trend chart, and inline sparklines. Size encodes lines of code; color encodes the coverage metric over the 60–80% range. Ctrl + scroll (or pinch) magnifies the chart; labels keep their size, so small sections become readable as you zoom in.

sunbursticicletreemap

samplethis workspace (1,603 nodes)

Trend

Sparkline

unit coverage 84%

Source

<BsHierarchyChart  data={tree}  layout={layout}  rootId={rootId}  colorMin={60}  colorMax={80}  inputLabel="Coverage by folder"  valueUnitLabel="lines"  onRootIdChange={setRootId}/><BsTrendChart series={series} yMin={0} yMax={100} goal={80}  goalLabel="Goal 80%" inputLabel="Coverage over time" /><BsSparkline points={[62, 65, 71, 74, 82]} area yMin={0} yMax={100} />