Analytics

Last updated on 2026-03-26

The analytics module provides eight screens covering every dimension of social media performance. All charts use Recharts wrapped in shadcn/ui ChartContainer for consistent theming. All screens include a DateRangePicker for filtering data by time period. All screens are in the (dashboard) route group.

Analytics Overview

Route: /analytics

The main analytics dashboard with cross-platform metrics and high-level trends.

Date range selector -- DateRangePicker component with preset buttons for 7d, 30d, 90d, and Custom; selecting a range filters all charts and KPIs
KPI cards -- four StatsCard components: Total Impressions (with trend), Total Engagement (with trend), Follower Growth (net new), and Average Engagement Rate
Engagement trend chart -- EngagementChart (Recharts AreaChart) showing daily engagement (likes, comments, shares, saves stacked) over the selected period
Platform comparison bar chart -- PlatformBarChart showing engagement breakdown per platform with platform-specific colors
Content type chart -- ContentTypeChart (Recharts PieChart) showing the distribution of post types (image, video, carousel, text, story, reel) and their relative engagement
Metric comparison cards -- MetricComparison components comparing current period to previous period with percentage change indicators

import { StatsCard } from "@/components/dashboard/stats-card"
import { DateRangePicker } from "@/components/analytics/date-range-picker"
import { EngagementChart } from "@/components/charts/engagement-chart"
import { PlatformBarChart } from "@/components/charts/platform-bar-chart"
import { ContentTypeChart } from "@/components/charts/content-type-chart"
import { MetricComparison } from "@/components/analytics/metric-comparison"

Analytics Overview Layout

┌──────────┬──────────┬──────────┬──────────┐
│ Total    │ Total    │ Follower │ Avg Eng  │
│ Impress. │ Engage.  │ Growth   │ Rate     │
├──────────┴──────────┼──────────┴──────────┤
│ Engagement Trends   │ Platform Comparison │
│ (stacked area)      │ (bar chart)         │
├─────────────────────┼─────────────────────┤
│ Content Type        │ Metric Comparison   │
│ (pie chart)         │ (period vs period)  │
└─────────────────────┴─────────────────────┘

Data Sources

Data	Source	Location
Engagement data	`engagementData`	`data/seed.ts`
Platform metrics	`platformMetrics`	`data/seed.ts`
Posts	`posts` (for content type distribution)	`data/seed.ts`

Audience Demographics

Route: /analytics/audience

Detailed audience composition and geographic distribution.

Total audience card -- total audience size, growth rate percentage, and active audience percentage from the AudienceDemographic type
Age group chart -- AudienceDemographics component (Recharts BarChart) showing percentage distribution across age ranges (13-17, 18-24, 25-34, 35-44, 45-54, 55-64, 65+)
Gender split donut -- DonutChart showing male/female/other distribution with percentage labels
Top locations world map -- WorldMap component showing a stylized geographic heatmap of audience concentration by country
Top locations table -- ranked table of countries and cities with audience count and percentage
Languages table -- list of top languages spoken by the audience with percentage bars
New vs returning -- donut chart showing the ratio of new to returning audience members

import { AudienceDemographics } from "@/components/charts/audience-demographics"
import { DonutChart } from "@/components/charts/donut-chart"
import { WorldMap } from "@/components/charts/world-map"

// types/index.ts
interface AudienceDemographic {
  totalAudience: number
  growthRate: number
  activeAudiencePercent: number
  ageGroups: AgeGroup[]
  genderSplit: GenderSplit
  topLocations: LocationData[]
  topLanguages: { language: string; percentage: number }[]
  newVsReturning: { new: number; returning: number }
}

Data Sources

Data	Source	Location
Demographics	`audienceDemographic`	`data/seed.ts`
Locations	`audienceDemographic.topLocations`	`data/seed.ts`
Languages	`audienceDemographic.topLanguages`	`data/seed.ts`

Hashtag Tracking

Route: /analytics/hashtags

Hashtag performance analytics and saved hashtag set management.

Hashtag cloud -- HashtagCloud component displaying a word-cloud-style visualization of frequently used hashtags, sized by usage count and colored by trend direction (green for up, red for down, gray for stable)
Top hashtags table -- ranked table of hashtags with columns: Tag, Times Used, Average Reach, Average Engagement, and Trend indicator (up/down/stable arrow with color)
Hashtag performance chart -- EngagementChart filtered to show reach and engagement for a selected hashtag over time
Saved hashtag sets -- collapsible sections listing saved groups of hashtags (e.g., "Product Launch", "Brand Awareness") with the ability to copy the full set to clipboard

import { HashtagCloud } from "@/components/analytics/hashtag-cloud"

// types/index.ts
interface Hashtag {
  id: string
  tag: string
  timesUsed: number
  avgReach: number
  avgEngagement: number
  trend: "up" | "down" | "stable"
}

interface HashtagSet {
  id: string
  name: string
  tags: string[]
}

interface HashtagPerformance {
  tag: string
  date: string
  reach: number
  engagement: number
}

Data Sources

Data	Source	Location
Hashtags	`hashtags`	`data/seed.ts`
Hashtag sets	`hashtagSets`	`data/seed.ts`
Hashtag performance	`hashtagPerformance`	`data/seed.ts`

Engagement Trends

Route: /analytics/engagement

Deep dive into engagement patterns and trends over time.

Engagement breakdown chart -- EngagementChart (Recharts AreaChart) with stacked areas for likes, comments, shares, and saves, each in a distinct chart color
Engagement rate trend -- line chart showing engagement rate percentage over time with an average line and trend annotation
Top engaging posts -- grid of the top 5 posts by total engagement with thumbnail, caption preview, and per-metric breakdown
Engagement by platform -- PlatformBarChart showing total engagement split by platform with platform brand colors
Period comparison -- MetricComparison cards comparing engagement metrics between the current and previous period

import { EngagementChart } from "@/components/charts/engagement-chart"
import { PlatformBarChart } from "@/components/charts/platform-bar-chart"
import { MetricComparison } from "@/components/analytics/metric-comparison"

// types/index.ts
interface EngagementData {
  date: string
  likes: number
  comments: number
  shares: number
  saves: number
  total: number
}

Data Sources

Data	Source	Location
Engagement data	`engagementData`	`data/seed.ts`
Top posts	`posts` (sorted by total engagement)	`data/seed.ts`
Platform metrics	`platformMetrics`	`data/seed.ts`

Best Posting Times

Route: /analytics/best-times

Heatmap analysis showing when your audience is most active and engaged.

Engagement heatmap -- HeatmapChart component rendering a 7x24 grid (days of the week by hours of the day) where cell color intensity represents engagement levels; darker teal = higher engagement, lighter = lower
Best times summary -- ranked list of the top 5 optimal posting times (e.g., "Tuesday 10:00 AM", "Thursday 2:00 PM") with average engagement rate for each slot
Platform-specific heatmaps -- toggle between a cross-platform aggregate heatmap and individual platform heatmaps to see when each platform's audience is most active
Legend -- color scale from low engagement (light) to high engagement (dark teal) with numeric values

import { HeatmapChart } from "@/components/charts/heatmap-chart"

Heatmap Layout

┌─────┬──────┬──────┬──────┬──────┬──────┬──────┐
│     │ 6am  │ 9am  │ 12pm │ 3pm  │ 6pm  │ 9pm  │
├─────┼──────┼──────┼──────┼──────┼──────┼──────┤
│ Mon │ ░░░░ │ ████ │ ██░░ │ ████ │ ██░░ │ ░░░░ │
│ Tue │ ░░░░ │ ████ │ ████ │ ██░░ │ ████ │ ██░░ │
│ Wed │ ░░░░ │ ██░░ │ ████ │ ████ │ ██░░ │ ░░░░ │
│ Thu │ ░░░░ │ ████ │ ██░░ │ ████ │ ████ │ ██░░ │
│ Fri │ ░░░░ │ ██░░ │ ████ │ ██░░ │ ██░░ │ ░░░░ │
│ Sat │ ██░░ │ ░░░░ │ ██░░ │ ░░░░ │ ████ │ ████ │
│ Sun │ ██░░ │ ░░░░ │ ░░░░ │ ░░░░ │ ██░░ │ ████ │
└─────┴──────┴──────┴──────┴──────┴──────┴──────┘
 ░ Low engagement                    █ High engagement

// types/index.ts
interface HeatmapCell {
  day: number   // 0-6 (Mon-Sun)
  hour: number  // 0-23
  value: number // engagement intensity
}

Data Sources

Data	Source	Location
Heatmap data	`heatmapData`	`data/seed.ts`

Competitor Analysis

Route: /analytics/competitors

Track and compare your performance against competitors on each platform.

Competitor cards -- CompetitorCard components displaying each competitor's avatar, name, handle, platform, follower count, engagement rate, posting frequency (posts/week), and growth rate
Radar comparison chart -- RadarComparison (Recharts RadarChart) overlaying your metrics against a selected competitor across 6 dimensions: Followers, Engagement Rate, Posting Frequency, Growth Rate, Average Likes, and Average Comments
Growth comparison chart -- FollowerGrowthChart with multi-line overlay comparing your follower growth trajectory against selected competitors over 30/60/90 days
Content type analysis -- bar chart comparing the distribution of post types (image, video, carousel, reel) between you and your competitors
Add competitor -- form to add a new competitor by handle and platform

import { CompetitorCard } from "@/components/analytics/competitor-card"
import { RadarComparison } from "@/components/charts/radar-comparison"
import { FollowerGrowthChart } from "@/components/charts/follower-growth-chart"

// types/index.ts
interface Competitor {
  id: string
  name: string
  handle: string
  avatarUrl: string
  platform: SocialPlatform
  followers: number
  engagementRate: number
  postingFrequency: number  // posts per week
  growthRate: number
  metrics: CompetitorMetrics
}

interface CompetitorMetrics {
  avgLikes: number
  avgComments: number
  avgShares: number
  topContentType: PostType
  followerGrowth30d: number
}

Data Sources

Data	Source	Location
Competitors	`competitors`	`data/seed.ts`
Your metrics	`platformMetrics`	`data/seed.ts`
Growth data	`growthData`	`data/seed.ts`

Stories & Reels

Route: /analytics/stories-reels

Performance metrics for ephemeral and short-form video content.

Story/Reel cards -- StoryReelCard components displaying thumbnail, caption, type badge (Story or Reel), views, completion rate (as a progress bar), replies, shares, saves, watch time, and platform badge
Performance summary -- KPI cards for Total Views, Average Completion Rate, Total Replies, and Average Watch Time
Content type toggle -- filter between Stories, Reels, or All
Platform filter -- filter by platform (Instagram Stories, Instagram Reels, Facebook Stories, TikTok, YouTube Shorts)
Completion rate chart -- bar chart comparing completion rates across recent stories/reels to identify optimal content length

import { StoryReelCard } from "@/components/analytics/story-reel-card"
import { StatsCard } from "@/components/dashboard/stats-card"

// types/index.ts
interface StoryReelMetrics {
  id: string
  type: "story" | "reel"
  platform: SocialPlatform
  thumbnailUrl: string
  caption: string
  views: number
  completionRate: number
  replies: number
  shares: number
  saves: number
  watchTime: number
  createdAt: string
}

Data Sources

Data	Source	Location
Stories & Reels	`storyReelMetrics`	`data/seed.ts`

Sentiment Analysis

Route: /analytics/sentiment

Audience sentiment tracking and mention monitoring.

Sentiment gauge -- SentimentGauge component showing the overall sentiment score (-1 to +1) as a semi-circular gauge with color zones (red for negative, yellow for neutral, green for positive)
Sentiment trend chart -- Recharts AreaChart with stacked areas for positive, neutral, and negative sentiment counts over time
Sentiment breakdown -- three cards showing the percentage and count of positive, neutral, and negative mentions
Mention feed -- SentimentFeed component displaying a scrollable timeline of recent mentions with username, avatar, text, platform badge, sentiment tag (color-coded: green positive, gray neutral, red negative), and timestamp
Platform sentiment comparison -- bar chart comparing sentiment distribution across platforms

import { SentimentGauge } from "@/components/charts/sentiment-gauge"
import { SentimentFeed } from "@/components/analytics/sentiment-feed"

// types/index.ts
interface SentimentData {
  date: string
  positive: number
  neutral: number
  negative: number
  score: number  // -1 to 1
}

interface MentionItem {
  id: string
  userName: string
  userAvatar: string
  text: string
  platform: SocialPlatform
  sentiment: SentimentType  // "positive" | "neutral" | "negative"
  createdAt: string
  url: string
}

Data Sources

Data	Source	Location
Sentiment data	`sentimentData`	`data/seed.ts`
Mentions	`mentions`	`data/seed.ts`

Charts Architecture

All analytics charts follow a consistent pattern using Recharts wrapped in the shadcn/ui ChartContainer component. This ensures unified theming, responsive sizing, and dark mode support across all visualizations.

How It Works

Each chart component receives its data as props and defines a ChartConfig object that maps data keys to oklch color tokens. The ChartContainer handles responsive width, applies theme-aware colors, and provides the Recharts ResponsiveContainer wrapper.

import { ChartContainer, ChartConfig, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { AreaChart, Area, XAxis, YAxis } from "recharts"

const chartConfig: ChartConfig = {
  engagement: {
    label: "Engagement",
    color: "oklch(0.55 0.2 175)",  // teal primary
  },
}

function EngagementTrendChart({ data }: { data: EngagementData[] }) {
  return (
    <ChartContainer config={chartConfig}>
      <AreaChart data={data}>
        <XAxis dataKey="date" />
        <YAxis />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Area
          type="monotone"
          dataKey="total"
          fill="var(--color-engagement)"
          stroke="var(--color-engagement)"
          fillOpacity={0.2}
        />
      </AreaChart>
    </ChartContainer>
  )
}

Chart Components

The following chart components live in components/charts/:

Component	Chart Type	Used On
`audience-demographics.tsx`	`BarChart`	Audience demographics
`content-type-chart.tsx`	`PieChart`	Analytics overview
`donut-chart.tsx`	`PieChart` (donut)	Dashboard, audience
`engagement-chart.tsx`	`AreaChart` (stacked)	Engagement trends, analytics overview
`follower-growth-chart.tsx`	`AreaChart`	Dashboard, platform dashboards, audience
`heatmap-chart.tsx`	Custom grid (div-based)	Best posting times
`platform-bar-chart.tsx`	`BarChart` (grouped)	Analytics overview, comparison
`radar-comparison.tsx`	`RadarChart`	Competitor analysis
`sentiment-gauge.tsx`	Custom gauge (SVG)	Sentiment analysis
`sparkline.tsx`	`LineChart` (minimal)	Dashboard stat cards
`world-map.tsx`	Custom SVG map	Audience demographics

All chart components follow the same pattern: accept typed data props, define a ChartConfig, and render inside ChartContainer. This makes it straightforward to add new charts or customize existing ones by adjusting the config colors and Recharts composition.

Next Steps

Reports -- generate and export analytics reports
Dashboard & Platforms -- home dashboard and platform dashboards
Design Tokens -- oklch color system and theming

Content Calendar

Reports

Analytics

Analytics Overview

Analytics Overview Layout

Data Sources

Audience Demographics

Related Types

Data Sources

Hashtag Tracking

Related Types

Data Sources

Engagement Trends

Related Types

Data Sources

Best Posting Times

Heatmap Layout

Related Types

Data Sources

Competitor Analysis

Related Types

Data Sources

Stories & Reels

Related Types

Data Sources

Sentiment Analysis

Related Types

Data Sources

Charts Architecture

How It Works

Chart Components

Next Steps