Complete guide to the FlowBoard interactive dashboard — tabs, settings, themes, and user interactions.
FlowBoard generates a self-contained HTML file with all CSS and JS inline. Chart.js is loaded via CDN. The dashboard is fully interactive with client-side tab navigation, filtering, sorting, settings, and theme switching.
No server is required — open the generated HTML file directly in any modern browser.
#
Tab
Description
1
Overview
High-level summary with cards, charts, and signals
2
Workload
Team capacity, backlog quality, sprint readiness
3
Sprints
Sprint health, goals, scope changes, capacity
4
Timeline
Interactive Gantt with multiple swimlane modes
5
PI View
Program Increment Gantt with sprint slots
6
Insights
Risks, conflicts, blockers, delivery forecast
7
Dependencies
Dependency table and heatmap
8
Issues
Filterable, sortable table of all issues
Single view with:
Summary cards (9 types)
6 charts (status, types, risk, team SP, per-person SP, sprint progress)
Risk signals
Product progress
Ceremony tracker
Workload Tab — 3 sub-tabs
Sub-tab
Content
Workload
Per-person story points and issue counts
Backlog Quality
Unestimated issues, stale items, missing priorities
Sprint Readiness
Upcoming sprint capacity and commitment analysis
Sub-tab
Content
Sprint Health
Velocity, burndown indicators, completion rates
Sprint Goals
Goal tracking and achievement status
Scope Changes
Issues added/removed mid-sprint
Capacity vs Commitment
Planned vs actual capacity utilization
Mode
Swimlanes
Assignee
Grouped by person
Team
Grouped by team
Epic
Grouped by epic
Conflict
Highlights scheduling overlaps and resource conflicts
Executive
Simplified high-level view
Simulation
What-if scenario modeling
Program Increment Gantt chart
Sprint slots as columns
Feature/epic progress bars
Cross-sprint dependency lines
Insights Tab — 4 sub-tabs
Sub-tab
Content
Risks
Risk severity breakdown and aging analysis
Conflicts
Resource and scheduling conflicts
Blockers
Blocked issues with dependency chains
Delivery Forecast
Predicted completion based on velocity
Dependencies Tab — 2 sub-tabs
Sub-tab
Content
Dependency Table
Tabular view of all issue dependencies
Dependency Heatmap
Visual matrix of cross-team/project dependencies
Full issue table with all fields
Column sorting (click headers)
Text filter / search
Status, type, and priority filters
9 card types displayed on the Overview tab:
Card
Value Shown
Total Issues
Count of all issues
Open Issues
Count of non-done issues
Blocked
Issues with blocker dependencies
Story Points
Total estimated story points
Completed SP
Story points in Done status
Critical Risks
Count of critical-severity risks
High Risks
Count of high-severity risks
Overloaded
People exceeding capacity threshold
Conflicts
Number of scheduling conflicts
6 charts rendered with Chart.js on the Overview tab:
Chart
Type
Data
Status Distribution
Doughnut
Issues by status category
Issue Types
Bar
Issues by type (bug, story, etc.)
Risk Severity
Bar
Risks by severity level
Team Story Points
Bar
Story points by team
Story Points per Person
Bar
Story points by assignee
Sprint Progress
Bar
Completed vs remaining per sprint
Charts adapt to the active theme colors. If Chart.js fails to load, a "Chart unavailable" fallback message is shown.
5 swimlane modes plus a simulation mode:
Assignee — one row per person, shows all their issuesTeam — one row per team, aggregated viewEpic — one row per epic, shows child issuesConflict — highlights resource conflicts and overlapsExecutive — simplified bars for leadership reviewSimulation — what-if mode for drag-and-drop scenario modeling
Zoom: 25% to 400% (buttons or keyboard shortcuts)Filter: Text input to filter visible itemsSprint boundaries: Vertical lines marking sprint start/endToday marker: Red vertical line at current dateOverlap zones: Highlighted areas where issues conflict
Click any bar to open the Detail Panel
Hover for tooltip with key details
Scroll horizontally to navigate time range
Zoom with controls or Ctrl+Scroll
Opens when clicking a timeline bar or issue row.
Field
Description
Key
Jira issue key (e.g., PROJ-123)
Title
Issue summary
Type
Story, Bug, Task, Epic, etc.
Status
Current status with category color
Priority
Issue priority level
Assignee
Assigned person
Team
Team name
Sprint
Current sprint name
Epic
Parent epic name
Story Points
Estimated effort
Dates
Start and end dates
Duration
Calculated duration in days
Progress
Completion percentage
Blocked
Blocked status and blocker details
Conflict mode: Shows conflicting issues and overlap durationSimulation mode: Shows original vs simulated dates and delta
Focus trap while open (Tab cycles within the panel)
Keyboard accessible — press Esc to close
Screen reader–friendly labels and structure
Click the gear icon in the top-right corner
Or use the keyboard shortcut
5 theme buttons: Light, Dark, Midnight, Slate, System2 language buttons: English, PolishTheme applies immediately on selection
Language change persists in localStorage
Setting
Description
Title
Dashboard main title
Subtitle
Dashboard subtitle
Company
Company name in header
Primary Color
Main accent color (hex)
Secondary Color
Secondary accent color (hex)
Tertiary Color
Third accent color (hex)
Density: Compact, Comfortable, or Spacious8 tab toggles: Show or hide each main tab independently
Threshold
Default
Description
Overload Points
—
SP threshold per person for overload
Overload Issues
—
Issue count threshold for overload
WIP Limit
—
Work-in-progress limit per person
Aging Days
—
Days before an issue is "stale"
Capacity per Person
—
Expected SP capacity per sprint
Charts toggle: Show or hide the charts sectionRisk display options: Configure risk severity visibilityRoadmap zoom: Default zoom level for timelineTimeline mode: Default swimlane modeTimeline display options: Bar labels, date format, etc.
Action
Behavior
Apply
Applies current settings to the dashboard view
Reset
Restores all settings to defaults
Export
Downloads flowboard-config.json
Import
Loads a JSON config file
Cancel
Closes the drawer without applying changes
Serializes the current configuration to JSON
Downloads as flowboard-config.json
Includes all settings: branding, thresholds, tabs, charts, timeline, etc.
Useful for sharing configurations across teams
Accepts .json files only
Validates JSON structure (must be a JSON object)
Invalid JSON shows an error toast notification
Populates settings fields from imported values
Changes are reflected in the settings drawer immediately
Full regeneration needed for complete effect
Themes control:
Background and surface colors
Text colors and contrast ratios
Chart colors and gradients
Card borders and shadows
Timeline bar fills and labels
Scrollbar styling
Language switching: English and PolishPersistence: Language choice saved in localStorageApplication: Applied on next regeneration for full effectCoverage: 927 translation keys per localeScope: All UI labels, tooltips, status text, tab names, settings labels, and error messages
Key / Action
Behavior
TabNavigate between interactive elements
Enter / SpaceActivate buttons and timeline bars
EscapeClose panels and drawers
Tab from page loadSkip-to-content link appears
Focus in settings drawer
Focus trap — Tab cycles within the drawer
Focus in detail panel
Focus trap — Tab cycles within the panel
Trigger with Ctrl+P (Windows/Linux) or Cmd+P (macOS)
Navigation bar, settings drawer, and overlays are hidden in print
Page-break optimization for charts and cards
Summary cards and charts print in a grid layout
Timeline prints at current zoom level