Overview
QuestionMatrix displays a grid view of multiple survey questions with their response distributions. Each row shows a question with rating bars and optional statistics. Perfect for comparing responses across multiple questions at a glance.
Features
- Rating distribution bars for each question
- Optional average score display
- Response count column
- Click handler for drill-down
- Hover tooltips with detailed breakdown
- Configurable color scales
Examples
Basic QuestionMatrix
Survey satisfaction questions
| Question | 1 | 2 | 3 | 4 | 5 | Avg | N |
|---|---|---|---|---|---|---|---|
| How satisfied are you with the product overall? | 5 | 12 | 35 | 78 | 120 | 4.1 | 250 |
| How easy was the product to use? | 3 | 8 | 28 | 95 | 116 | 4.3 | 250 |
| How likely are you to recommend this product? | 8 | 15 | 42 | 68 | 117 | 4.0 | 250 |
| How would you rate the value for money? | 12 | 25 | 58 | 85 | 70 | 3.7 | 250 |
| How satisfied are you with customer support? | 18 | 22 | 45 | 88 | 77 | 3.7 | 250 |
With Statistics
With average scores and response counts
| Question | 1 | 2 | 3 | 4 | 5 | Avg | N |
|---|---|---|---|---|---|---|---|
| How satisfied are you with the product overall? | 5 | 12 | 35 | 78 | 120 | 4.1 | 250 |
| How easy was the product to use? | 3 | 8 | 28 | 95 | 116 | 4.3 | 250 |
| How likely are you to recommend this product? | 8 | 15 | 42 | 68 | 117 | 4.0 | 250 |
| How would you rate the value for money? | 12 | 25 | 58 | 85 | 70 | 3.7 | 250 |
| How satisfied are you with customer support? | 18 | 22 | 45 | 88 | 77 | 3.7 | 250 |
With ChartCard
Wrapped in ChartCard
Survey Results
Customer satisfaction survey - 250 responses
| Question | 1 | 2 | 3 | 4 | 5 | Avg | N |
|---|---|---|---|---|---|---|---|
| How satisfied are you with the product overall? | 5 | 12 | 35 | 78 | 120 | 4.1 | 250 |
| How easy was the product to use? | 3 | 8 | 28 | 95 | 116 | 4.3 | 250 |
| How likely are you to recommend this product? | 8 | 15 | 42 | 68 | 117 | 4.0 | 250 |
| How would you rate the value for money? | 12 | 25 | 58 | 85 | 70 | 3.7 | 250 |
| How satisfied are you with customer support? | 18 | 22 | 45 | 88 | 77 | 3.7 | 250 |
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
questions | QuestionData[] | required | Array of questions with response distributions |
showAverages | boolean | false | Show average score column |
showResponseCounts | boolean | false | Show response count column |
colorScale | 'diverging' | 'sequential' | 'sequential' | Color scale for rating bars |
maxRating | number | 5 | Maximum rating value |
onQuestionClick | (questionId: string) => void | - | Click handler for question rows |
className | string | - | Additional CSS classes |
Usage
import { QuestionMatrix, ChartCard } from '@/ui/components/charts';
// Basic question matrix
<QuestionMatrix
questions={[
{
id: 'q1',
label: 'How satisfied are you?',
responses: [
{ rating: 1, count: 5 },
{ rating: 2, count: 8 },
{ rating: 3, count: 25 },
{ rating: 4, count: 42 },
{ rating: 5, count: 20 },
],
averageScore: 3.6,
responseCount: 100,
},
// More questions...
]}
showAverages
showResponseCounts
onQuestionClick={(id) => console.log(id)}
/>