Overview
InsightTimeline displays insights in a chronological stream format with optional filtering and grouping. Perfect for showing recent feedback activity, insight submissions, and activity feeds.
Features
- Chronological grouping (day, week, month)
- Type-based icons and colors (bug, feature, praise)
- Optional filter controls
- Score badges and discussion counts
- Author avatar and timestamp
- Loading and empty states
- Clickable items for drill-down
Examples
Basic Timeline
Standard insight feed
Dashboard loading is slow on mobile devices
Users report 5+ second load times on iOS Safari when accessing the main dashboard.
Add dark mode support
Multiple requests for a dark theme option, especially for late-night usage.
Love the new onboarding flow!
The step-by-step wizard made setup much easier than the old form.
Export to PDF not working
Clicking export generates a blank PDF file. Chrome 120 on Windows 11.
Integration with Slack
Would be great to receive notifications and updates directly in Slack channels.
With Filters
Filter by type and status
Dashboard loading is slow on mobile devices
Users report 5+ second load times on iOS Safari when accessing the main dashboard.
Add dark mode support
Multiple requests for a dark theme option, especially for late-night usage.
Love the new onboarding flow!
The step-by-step wizard made setup much easier than the old form.
Export to PDF not working
Clicking export generates a blank PDF file. Chrome 120 on Windows 11.
Integration with Slack
Would be great to receive notifications and updates directly in Slack channels.
Grouped by Week
Weekly grouping
Dashboard loading is slow on mobile devices
Users report 5+ second load times on iOS Safari when accessing the main dashboard.
Add dark mode support
Multiple requests for a dark theme option, especially for late-night usage.
Love the new onboarding flow!
The step-by-step wizard made setup much easier than the old form.
Export to PDF not working
Clicking export generates a blank PDF file. Chrome 120 on Windows 11.
Integration with Slack
Would be great to receive notifications and updates directly in Slack channels.
Empty State
No insights to display
Loading State
Loading indicator
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | InsightTimelineItem[] | required | Array of insight items |
groupBy | "day" | "week" | "month" | "day" | Time grouping period |
showFilters | boolean | false | Show filter controls |
filterOptions | object | - | Available filter options |
onItemClick | function | - | Click handler for items |
onFilterChange | function | - | Filter change handler |
emptyMessage | string | - | Custom empty state message |
isLoading | boolean | false | Show loading state |
Usage
import { InsightTimeline, type InsightTimelineItem } from '@/ui/components/charts';
// Basic timeline
<InsightTimeline
items={insights}
onItemClick={(item) => navigate(`/insights/${item.id}`)}
/>
// With filters
<InsightTimeline
items={insights}
showFilters
filterOptions={{
types: ['bug', 'feature', 'praise'],
statuses: ['open', 'in_progress', 'closed'],
}}
onFilterChange={(filters) => console.log(filters)}
/>
// Grouped by week
<InsightTimeline
items={insights}
groupBy="week"
/>
// Custom empty message
<InsightTimeline
items={[]}
emptyMessage="No insights submitted yet. Check back later!"
/>
// With loading state
<InsightTimeline
items={[]}
isLoading={true}
/>