Overview
InsightClusterMap displays insights organized into thematic clusters with visual grouping. Perfect for showing AI-categorized feedback themes and related insight patterns. Clusters are color-coded and show insight previews with scores.
Features
- Thematic clustering of related insights
- Score-based insight highlighting
- Related cluster connections
- Click handlers for clusters and insights
- Responsive grid layout
Examples
Basic Cluster Map
Default cluster view
Performance Issues
App is slow on startup8
Loading times are too long7
Animation stuttering6
Memory usage too high8
+1 more
Related to: User Experience
Feature Requests
Dark mode support9
Offline capability8
Export to PDF6
Calendar integration7
User Experience
Navigation is confusing7
Settings hard to find5
Icons not intuitive4
Related to: Performance Issues, Feature Requests
Critical Bugs
Login fails intermittently9
Data loss on refresh10
Without Labels
Compact view without labels
5 insights
App is slow on startup8
Loading times are too long7
Animation stuttering6
Memory usage too high8
+1 more
Related to: User Experience
3 insights
Navigation is confusing7
Settings hard to find5
Icons not intuitive4
Related to: Performance Issues
Without Counts
Without insight count badges
Performance Issues
App is slow on startup8
Loading times are too long7
Animation stuttering6
Memory usage too high8
+1 more
Related to: User Experience
User Experience
Navigation is confusing7
Settings hard to find5
Icons not intuitive4
Related to: Performance Issues
Clickable Elements
Click clusters or insights
Performance Issues
App is slow on startup8
Loading times are too long7
Animation stuttering6
Memory usage too high8
+1 more
Related to: User Experience
Feature Requests
Dark mode support9
Offline capability8
Export to PDF6
Calendar integration7
User Experience
Navigation is confusing7
Settings hard to find5
Icons not intuitive4
Related to: Performance Issues, Feature Requests
With ChartCard
Wrapped in ChartCard
Insight Themes
AI-categorized feedback patterns from 14 insights
Performance Issues
App is slow on startup8
Loading times are too long7
Animation stuttering6
Memory usage too high8
+1 more
Related to: User Experience
Feature Requests
Dark mode support9
Offline capability8
Export to PDF6
Calendar integration7
User Experience
Navigation is confusing7
Settings hard to find5
Icons not intuitive4
Related to: Performance Issues, Feature Requests
Critical Bugs
Login fails intermittently9
Data loss on refresh10
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
clusters | InsightCluster[] | required | Array of insight clusters |
showLabels | boolean | true | Show cluster labels |
showCounts | boolean | true | Show insight count badges |
onClusterClick | (clusterId: string) => void | - | Click handler for clusters |
onInsightClick | (insightId: string) => void | - | Click handler for insights |
className | string | - | Additional CSS classes |
InsightCluster Type
id: string - Unique identifier
label: string - Cluster label
insights: ClusterInsight[] - Array of insights
relatedClusters?: string[] - IDs of related clusters
color?: string - Custom color
Usage
import { InsightClusterMap, ChartCard } from '@/ui/components/charts';
const clusters = [
{
id: 'performance',
label: 'Performance Issues',
insights: [
{ id: '1', title: 'App is slow', score: 8 },
{ id: '2', title: 'Loading times', score: 7 },
],
relatedClusters: ['ux'],
},
{
id: 'ux',
label: 'User Experience',
insights: [
{ id: '3', title: 'Navigation confusing', score: 7 },
],
},
];
// Basic cluster map
<InsightClusterMap clusters={clusters} />
// With click handlers
<InsightClusterMap
clusters={clusters}
showLabels
showCounts
onClusterClick={(id) => console.log('Cluster:', id)}
onInsightClick={(id) => console.log('Insight:', id)}
/>
// With ChartCard
<ChartCard title="Insight Themes">
<InsightClusterMap clusters={clusters} />
</ChartCard>