Real-time analytics dashboard with KPI cards, sentiment trend line charts, resolution breakdowns, and AI-generated insights. Built with React 19, ECharts 6, and TanStack React Query.
Six key metrics displayed as cards across the top of the analytics page. AI Resolution Rate is the primary north-star metric.
| Metric | Source | Computation |
|---|---|---|
| AI Resolution Rate | AnalyticsDB.get_resolution_rate() |
Conversations resolved by AI without handoff / total conversations. Primary north star. |
| Total Conversations | ConversationDB.count() |
Count of all conversations in the selected period (Today, 7d, 30d, 90d). |
| Pending | ConversationDB.count(status="pending") |
Conversations awaiting human agent handoff. |
| Closed Today | ConversationDB.count(status="closed", date=today) |
Conversations marked as resolved today. |
| Active | ConversationDB.count(status="active") |
Currently in-progress conversations (AI or human agent). |
| Satisfaction | AnalyticsDB.get_avg_sentiment() |
Average sentiment score (1-5) from LLM-scored messages. |
The AnalyticsPage is organized in four rows below the KPI strip. Period selector (Today / 7d / 30d / 90d) controls all data.
Row 1 — Breakdown Charts
Row 2 — Volume & Sentiment Trends
Row 3 — Agent Status & AI Insights
How data flows from conversations to KPI visualizations.
messagesdatabase/v2/analytics_db.py/api/v2/analyticsMessages are auto-scored by the LLM on a 1-5 scale. Scores feed the sentiment trend line chart and satisfaction KPI.
| Score | Meaning | Example Triggers |
|---|---|---|
| 1 | Very negative | Complaints, frustration, threats to cancel |
| 2 | Negative | Confusion, dissatisfaction, repeated questions |
| 3 | Neutral | Factual requests, information queries |
| 4 | Positive | Satisfaction expressed, thank you messages |
| 5 | Very positive | Praise, recommendation intent, loyalty signals |
The Sentiment Trend line chart (LineChart.tsx) plots AI and Human sentiment scores over time on a 2.0-5.0 Y-axis.
This is the primary visualization for tracking conversation quality trends.
Built with ECharts 6 via the @datastudios/viz component library.
Key React components that power the analytics dashboard.
| Component | File | Purpose |
|---|---|---|
AnalyticsPage |
pages/AnalyticsPage.tsx |
Main page layout: KPI strip, charts grid, period selector, insights panel |
KPICard |
components/KPICard.tsx |
Individual metric card with value, label, and optional trend indicator |
LineChart |
components/LineChart.tsx |
Sentiment trend visualization (AI vs Human) using ECharts 6. Y-axis 2.0-5.0 range. |
useConversations |
api/hooks.ts |
React Query hook for conversation data (10s polling) |
useMessages |
api/hooks.ts |
React Query hook for message data (5s polling) |
@datastudios/viz |
vendor/datastudios-viz/ |
DataStudios-branded React + ECharts component library (themed to brand) |
Periodic LLM-generated summaries stored in the ai_insights collection. Surfaced in the bottom row of the dashboard.
ai_insights collectionREST endpoints that serve the dashboard. All require JWT authentication.
| Endpoint | Method | Returns |
|---|---|---|
/api/v2/analytics/kpis |
GET | Six KPI values for the selected period |
/api/v2/analytics/sentiment-trend |
GET | Time-series data for AI and Human sentiment scores (line chart) |
/api/v2/analytics/resolution-split |
GET | AI vs Human resolution counts (donut chart) |
/api/v2/analytics/handoff-reasons |
GET | Categorized handoff reasons with counts (bar chart) |
/api/v2/analytics/top-intents |
GET | Top 5 detected intents from tool usage (bar chart) |
/api/v2/analytics/volume |
GET | AI vs Human conversation volume over time (stacked bar) |
/api/v2/analytics/insights |
GET | Latest AI-generated insights (positive + attention) |
/api/v2/agents |
GET | Human agent roster with online/busy/offline status |