Vanilla Breeze

burndown-chart

Sprint burndown plot. Wraps with auto-computed ideal line and scope-change annotations.

Overview

The <burndown-chart> component plots sprint progress as a two-series line chart: the actual remaining work each day vs. the ideal straight-line trend from total → 0 across the sprint duration.

It composes <chart-wc type="line"> for rendering. The author supplies only the daily remaining counts (and optional scope-change deltas) — the ideal slope is mechanical and should not be hand-computed in author data.

Data source

Provide a <template> child whose <tr> rows have these cells in order:

  1. date — ISO 8601 (YYYY-MM-DD)
  2. remaining — number of points/items left at end of day
  3. (optional) ±delta — scope change applied that day (e.g. +5 or -2)

Days with a non-zero 3rd cell are surfaced as a Scope changes aside under the chart so the cause of trend reversals is visible at a glance.

Attributes

Excluding weekends

By default, the ideal line decrements every day equally. For sprints where weekends don't count, set weekends="exclude" — the component holds the ideal value flat over Saturdays and Sundays so the slope reflects working-day capacity:

Progressive Enhancement

  1. HTML. Without JS, the <template> child is invisible (templates do not render). The chart is purely additive over <chart-wc>.
  2. CSS. The :not(:defined) selector keeps the host visible pre-upgrade.
  3. JS. Reads the template, computes the ideal series, builds a <chart-wc> with two series, and surfaces scope changes as a sibling <aside>.

This component requires the optional vanilla-breeze-charts bundle for <chart-wc>:

Related
↑