Overview
CohortGrid displays retention or engagement data in a triangular grid format where rows represent cohorts and columns represent time periods. Color intensity indicates retention/engagement levels. Perfect for analyzing user behavior patterns over time.
Features
- Triangular grid layout for cohort analysis
- Color intensity based on values
- Optional percentage display
- Multiple color scale options
- Click handler for drill-down
- Custom period labels
Examples
Basic CohortGrid
Monthly user retention cohorts
| Cohort | Period 0 | Period 1 | Period 2 | Period 3 | Period 4 | Period 5 | Period 6 |
|---|---|---|---|---|---|---|---|
| Jan 2024 | 100% | 75% | 62% | 55% | 48% | 42% | 38% |
| Feb 2024 | 100% | 78% | 65% | 58% | 50% | 45% | |
| Mar 2024 | 100% | 72% | 60% | 52% | 46% | ||
| Apr 2024 | 100% | 80% | 68% | 59% | |||
| May 2024 | 100% | 76% | 64% | ||||
| Jun 2024 | 100% | 82% |
LowHigh
With Percentages
Showing percentage values in cells
| Cohort | Period 0 | Period 1 | Period 2 | Period 3 | Period 4 | Period 5 | Period 6 |
|---|---|---|---|---|---|---|---|
| Jan 2024 | 100% | 75% | 62% | 55% | 48% | 42% | 38% |
| Feb 2024 | 100% | 78% | 65% | 58% | 50% | 45% | |
| Mar 2024 | 100% | 72% | 60% | 52% | 46% | ||
| Apr 2024 | 100% | 80% | 68% | 59% | |||
| May 2024 | 100% | 76% | 64% | ||||
| Jun 2024 | 100% | 82% |
LowHigh
Color Scale Variants
Green, blue, and purple color scales
Green (default)
| Cohort | Period 0 | Period 1 | Period 2 | Period 3 | Period 4 | Period 5 | Period 6 |
|---|---|---|---|---|---|---|---|
| Jan 2024 | 100% | 75% | 62% | 55% | 48% | 42% | 38% |
| Feb 2024 | 100% | 78% | 65% | 58% | 50% | 45% | |
| Mar 2024 | 100% | 72% | 60% | 52% | 46% | ||
| Apr 2024 | 100% | 80% | 68% | 59% |
LowHigh
Blue
| Cohort | Period 0 | Period 1 | Period 2 | Period 3 | Period 4 | Period 5 | Period 6 |
|---|---|---|---|---|---|---|---|
| Jan 2024 | 100% | 75% | 62% | 55% | 48% | 42% | 38% |
| Feb 2024 | 100% | 78% | 65% | 58% | 50% | 45% | |
| Mar 2024 | 100% | 72% | 60% | 52% | 46% | ||
| Apr 2024 | 100% | 80% | 68% | 59% |
LowHigh
Purple
| Cohort | Period 0 | Period 1 | Period 2 | Period 3 | Period 4 | Period 5 | Period 6 |
|---|---|---|---|---|---|---|---|
| Jan 2024 | 100% | 75% | 62% | 55% | 48% | 42% | 38% |
| Feb 2024 | 100% | 78% | 65% | 58% | 50% | 45% | |
| Mar 2024 | 100% | 72% | 60% | 52% | 46% | ||
| Apr 2024 | 100% | 80% | 68% | 59% |
LowHigh
With ChartCard
Wrapped in ChartCard
User Retention Analysis
Monthly cohort retention rates
| Cohort | Period 0 | Period 1 | Period 2 | Period 3 | Period 4 | Period 5 | Period 6 |
|---|---|---|---|---|---|---|---|
| Jan 2024 | 100% | 75% | 62% | 55% | 48% | 42% | 38% |
| Feb 2024 | 100% | 78% | 65% | 58% | 50% | 45% | |
| Mar 2024 | 100% | 72% | 60% | 52% | 46% | ||
| Apr 2024 | 100% | 80% | 68% | 59% | |||
| May 2024 | 100% | 76% | 64% | ||||
| Jun 2024 | 100% | 82% |
LowHigh
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | CohortData[] | required | Array of cohort objects with values array |
metric | 'retention' | 'engagement' | 'activity' | 'retention' | Metric type for tooltips |
colorScale | 'green' | 'blue' | 'purple' | 'green' | Color scale for cells |
showPercentages | boolean | false | Show percentage values in cells |
periodLabels | string[] | - | Custom labels for period columns |
onCellClick | (cohort, period, value) => void | - | Click handler for cells |
className | string | - | Additional CSS classes |
Usage
import { CohortGrid, ChartCard } from '@/ui/components/charts';
// Retention cohort analysis
<ChartCard title="User Retention by Cohort">
<CohortGrid
data={[
{ cohort: 'Jan 2024', periods: [100, 75, 62, 55, 48, 42] },
{ cohort: 'Feb 2024', periods: [100, 78, 65, 58, 50] },
{ cohort: 'Mar 2024', periods: [100, 72, 60, 52] },
]}
showPercentages
colorScale="green"
onCellClick={(cohort, period, value) =>
console.log(cohort, period, value)
}
/>
</ChartCard>