Notification Center

Collects system and workflow updates that users may need to revisit.

Where to use it

Open it from the global header or provide a dedicated notifications view when updates must remain available for later review.

When to use it

Use it for persistent, revisit-able updates that users may need after the moment they arrive.

When not to use it

Avoid filling it with low-value events that create noise rather than actionable awareness.

Behavior and rules

Preserve unread/read state and history so users can return later; this is not a transient toast queue.

Anatomy

Header & unread count: Title with the unread count in text, and a Mark all read action.
Notification item: One event with a short title and a destination. Unread items are distinguished by more than colour.
Notification type: Groups or tags events (approvals, reports, incidents) so people can filter what matters.
Timestamp: Relative time (5 min ago) with the exact time on hover. Order is newest first.
View-all action: Opens the full history, so the popover can stay short.

All lessons

Bar Chart — Compares values across categories using length on a common scale.
Line Chart — Shows change across an ordered sequence, most often time.
Area Chart — Emphasizes magnitude over an ordered sequence by filling the area under a line.
Pie / Donut Chart — Shows a small number of parts that make up one meaningful whole.
Scatter Plot — Reveals relationships, clusters and outliers between two numeric variables.
Histogram — Shows the distribution of a numeric variable across value ranges.
Box Plot — Summarizes distribution, median, spread and potential outliers compactly.
Heatmap — Uses color intensity across a matrix to reveal patterns and concentration.
Treemap — Shows hierarchical part-to-whole relationships through nested rectangles.
Funnel Chart — Shows how a population changes through ordered stages of a process.
Waterfall Chart — Explains how positive and negative contributions produce a final total.
Sparkline — Shows a compact trend without the full framing of a standard chart.
Gauge — Shows one value within a bounded range when position against a threshold matters.
Combo Chart — Combines compatible visual marks when two related measures need coordinated comparison.
Geographic Data Map — Maps values to locations or regions when geography is part of the question.
KPI / Stat Card — Presents one important metric with enough context to judge its current value and change.
Data Table — Presents structured records in rows and columns, with table-level search, filtering, sorting, selection and pagination treated as parts of the whole component.
Dashboard Card / Panel — Groups one coherent dashboard task, metric or visualization into a bounded region with clear hierarchy.
Filter Bar — Places the most important scope controls close to the data they affect.
Filter Panel — Collects a larger set of filtering controls in a dedicated surface.
Date Picker / Date Range Picker — Lets users choose one date or a bounded time range for reports, filters and analytics.
Sidebar Navigation — Provides persistent access to major dashboard destinations and groups.
Top App Bar — Holds page identity, global actions and high-priority controls at the top of an application.
Breadcrumbs — Shows hierarchy and provides a path back through nested dashboard levels.
Tabs — Switches between peer views inside the same dashboard context.
Alert / Banner — Communicates important contextual or page-wide information that should remain visible until understood or resolved.
Toast — Confirms a brief asynchronous outcome without blocking the current task.
Notification Center — Collects system and workflow updates that users may need to revisit.
Dropdown / Overflow Menu — Moves lower-priority or contextual actions into an on-demand menu.
Modal / Dialog — Creates a focused temporary task that may block interaction with the underlying dashboard.
Drawer / Side Panel — Opens contextual controls or details from an edge while preserving the page behind it.