ComplexDashboard
Dashboard with composed components
Dashboard example, showcase
System info
Data is refreshed every 30 seconds.
Quick filters
Example of composing Field + InputGroup + Button.
Menu and Popover
Menu + Popover + Dialog in one place.
Deployment status
The last release completed successfully.
Dashboard summary
Combination of Card + Item + Progress + Spinner + Chart.
Charts overview
Multiple types: line, bar, doughnut.
Form elements
Input, Textarea, Checkbox, RadioGroup, Switch, Combobox, Select and FieldGroup.
Metrics table
| Metric | Status | Value |
|---|---|---|
| Build pipeline | OK | 98% |
| Test coverage | WARN | 74% |
More base components
Avatar, Accordion and a combination of other elements.
The Accordion works with complex content too (Carousel + Card + Button).
Slide 1
Combination of card + toast action.
We are testing that a complex layout works inside an accordion panel too.
Slide 2
Nested components without collisions.
import { ComplexDashboard } from "~/components/ui/qui-test-complex/complex-dashboard";
<ComplexDashboard title="Project overview" items={["Build #142", "2 new tasks", "1 failing test"]} />
Metadata
Source: meta.generated.json (see npm run generate)
File qui-test-complex/complex-dashboard/meta.generated.json not found or path not allowed.