Confirm?

Are you sure you want to proceed?
S
Simon Tournay

Realtime Dashboard Widgets

Clone & Customize via AI

This MudBlazor realtime dashboard displays dynamic widgets with line charts and usage progress, demonstrating component binding and live updates in a responsive Bootstrap layout.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Dynamic list of realtime data widgets with add/remove controls - Line charts showing historical values for each widget - Circular progress indicators for usage percentage - Controls for update interval and play/pause toggle - Display of last updated time per widget ## Key components - MudPaper, MudSlider, MudSwitch, MudButton - MudGrid, MudItem, MudCard, MudIconButton - MudText, MudDivider, MudProgressCircular - MudChart with ChartSeries and ChartOptions ## How it works Widgets are stored in a list with unique IDs and data series. A background task updates widget values periodically using a cancellation token source controlled by interval and running state bound to UI controls. Each widget’s chart series is synchronized from its value list. UI components use @bind for state and event callbacks to add or remove widgets trigger re-rendering. The dashboard uses Bootstrap flex and grid classes for responsive layout. ## Styling Uses MudBlazor components and theming with Bootstrap utility classes (d-flex, align-center, justify-between, me-3) for layout. Responsive breakpoints define grid item widths. Some inline styles for width and margin. ## Reuse steps 1. Add MudBlazor NuGet package to the Blazor project. 2. Register MudBlazor services and themes in Program.cs. 3. Import MudBlazor and MudBlazor.Charts namespaces. 4. Include DataModel.cs defining widget logic. 5. Integrate RealtimeDashboard.razor component and route. 6. Wire any required app state or auth if needed. ## Limitations & next steps This example simulates data locally without backend integration. Extend by connecting real data sources, user authentication, and persistent state management. Additional widget types and chart configurations can be customized. UI responsiveness depends on parent layout and MudBlazor theming settings.