Files
git.stella-ops.org/docs/features/unchecked/web/risk-budget-burn-up-chart.md

2.5 KiB

Risk Budget Burn-Up Chart

Module

Web

Status

IMPLEMENTED

Description

SVG-based burn-up chart displaying risk budget consumption over time (X: calendar days, Y: risk points) with budget limit line, actual consumption, grid lines, and headroom visualization.

Implementation Details

  • Feature directory: src/Web/StellaOps.Web/src/app/features/risk/
  • Components:
    • budget-burnup-chart (src/Web/StellaOps.Web/src/app/features/risk/components/budget-burnup-chart.component.ts)
    • budget-kpi-tiles (src/Web/StellaOps.Web/src/app/features/risk/components/budget-kpi-tiles.component.ts)
    • create-exception-modal (src/Web/StellaOps.Web/src/app/features/risk/components/create-exception-modal.component.ts)
    • evidence-buttons (src/Web/StellaOps.Web/src/app/features/risk/components/evidence-buttons.component.ts)
    • exception-ledger (src/Web/StellaOps.Web/src/app/features/risk/components/exception-ledger.component.ts)
    • reachability-slice (src/Web/StellaOps.Web/src/app/features/risk/components/reachability-slice.component.ts)
    • risk-dashboard-layout (src/Web/StellaOps.Web/src/app/features/risk/components/risk-dashboard-layout.component.ts)
    • sbom-diff-panel (src/Web/StellaOps.Web/src/app/features/risk/components/sbom-diff-panel.component.ts)
    • side-by-side-diff (src/Web/StellaOps.Web/src/app/features/risk/components/side-by-side-diff.component.ts)
    • verdict-badge (src/Web/StellaOps.Web/src/app/features/risk/components/verdict-badge.component.ts)
    • verdict-why-summary (src/Web/StellaOps.Web/src/app/features/risk/components/verdict-why-summary.component.ts)
    • vex-sources-panel (src/Web/StellaOps.Web/src/app/features/risk/components/vex-sources-panel.component.ts)
    • risk-dashboard (src/Web/StellaOps.Web/src/app/features/risk/risk-dashboard.component.ts)
  • Source: Feature matrix scan

E2E Test Plan

  • Setup:
    • Log in with a user that has appropriate permissions
    • Navigate to /risk
    • Ensure test data exists (scanned artifacts, SBOM data, or seed data as needed)
  • Core verification:
    • Verify the visualization renders correctly with sample data
    • Verify interactive elements (hover tooltips, click-to-drill-down) work
    • Verify the visualization handles empty/minimal data gracefully
  • Edge cases:
    • Verify graceful handling when backend API is unavailable (error state)
    • Verify responsive layout at different viewport sizes
    • Verify accessibility (keyboard navigation, screen reader labels, ARIA attributes)