Data Visualization

Charts & Metrics

Comprehensive data visualization components: Recharts integration, metric cards, heatmaps, sparklines, and progress indicators with chakra color mapping.

Recharts Integration

ChartContainer wrapper for Recharts with theme integration and tooltips

Coherence Trend (Line)

Factor Scores (Bar)

Engagement Over Time (Area)

Metric Cards

Chakra-colored metric cards with trend indicators and hover glow

Coherence Score

73
+12%from last week

Active Rituals

18
+5%from last month

Community Size

127
-3%from yesterday

Avg. Session

42m
Last 7 days

Heatmap Grids

Intensity visualization with color scales, weekly activity, and contribution calendars

Color scale:

Basic Heatmap Grid

Weekly Activity

Contribution Calendar (12 weeks)

Sparklines

Mini trend charts for compact data visualization in cards and metrics

Color:
78
Coherence
+5
127
Activities
+12
18
Rituals
+3
42m
Avg Session
-2

Progress Indicators

Chakra-colored progress bars that change color based on value

Default Progress

25%
50%
75%

Chakra Mapped

Root (20%)
Heart (45%)
Crown (90%)

Gradient

30%
60%
85% (with label)
85%

Features & Best Practices

Recharts Integration

  • • ChartContainer - Theme-aware wrapper with CSS variable injection
  • • ChartTooltip - Styled tooltips with dot/line/dashed indicators
  • • ChartLegend - Legend with custom icons and colors
  • • Responsive - Auto-sizes to container with aspect-video default
  • • Accessible - SVG with proper ARIA labels and roles

Metric Cards

  • • Chakra Colors - 7 chakra variants with hover glow
  • • Trend Indicators - Up/down/neutral with percentages
  • • Icons - Optional icons with chakra coloring
  • • Glass Morphism - Subtle background with float-on-hover
  • • Flexible Content - Trends or subtitles

Heatmap Grids

  • • Color Scales - Violet, teal, green, diverging presets
  • • Auto-normalize - Scales values to intensity levels
  • • Tooltips - Optional hover tooltips with values
  • • Specialized - WeeklyHeatmap for 7 days, ContributionGrid for calendars
  • • Flexible Grid - Configurable rows, cols, cell size, gap

Sparklines & Progress

  • • Compact - Mini charts for cards and dashboards
  • • SVG-based - Crisp rendering at any size
  • • Sparkline - Line charts with area fill and dots
  • • SparklineBar - Bar chart variant for discrete data
  • • Progress - Chakra-mapped colors based on value

Use Cases

Dashboard Analytics
Metric cards + sparklines for KPI tracking
Coherence Trends
Line/area charts for score history
Activity Patterns
Heatmaps for weekly/monthly engagement
Factor Comparison
Bar charts for 7-factor breakdown
Progress Tracking
Chakra progress bars for ritual completion
Contribution History
GitHub-style grids for activity calendars
Charts & Data Visualization • Production Ready