Charts & Analytics Displays
Relevant source files
The following files were used as context for generating this wiki page:
The Charts & Analytics Displays system in the Recoup Admin platform provides a unified interface for visualizing time-series data related to platform usage, agent performance, and user authentication. It leverages a reusable architecture to display metrics such as Slack tags, pull request conversions, video generation, and user login activity.
The system is built on top of recharts and a custom UI abstraction layer, allowing for consistent styling across different administrative modules. It integrates tightly with a period selection mechanism to filter data across various timeframes.
Architecture and Core Components
The analytics architecture consists of a high-level AdminLineChart component that consumes processed data and renders it using a standardized ChartContainer.
AdminLineChart
The AdminLineChart is the primary visualization component. It supports up to three data lines, enabling comparison between primary metrics (e.g., total tags) and secondary/tertiary outcomes (e.g., PRs merged).
- Data Merging: The component merges separate data arrays (primary,
secondLine, andthirdLine) into a single dataset keyed by date to ensure synchronized rendering on the X-axis. - Formatting: It implements custom tick formatters for the
XAxisto display localized date strings and aChartTooltipwith extended date information.
Sources: components/Admin/AdminLineChart.tsx:21-68
Chart UI Primitives
The project uses a low-level chart utility to manage theming and accessibility. This includes components like ChartContainer, ChartTooltipContent, and ChartLegendContent.
- Theme Management: Uses a
ChartStylecomponent to inject CSS variables (--color-*) based on the provided configuration, supporting both light and dark modes. - Context API: Employs
ChartContextto pass configuration down to sub-components like tooltips and legends.
Sources: components/ui/chart.tsx:39-100
Data Flow Visualization
The following diagram illustrates how data flows from API hooks through processing layers into the chart display.
The flow ensures that raw data fetched from the backend is correctly partitioned by date before being passed to the visualization layer. Sources: components/CodingAgentSlackTags/CodingAgentSlackTagsPage.tsx:16-25, components/PrivyLogins/PrivyLoginsPage.tsx:21-25
Feature Implementations
Coding Agent Analytics
Used to track Slack mentions of the Recoup Coding Agent. It visualizes the conversion funnel from a Slack "tag" to a generated "Pull Request" and finally to a "Merged PR".
- Metric Conversion: Displays a percentage conversion based on merged PRs relative to total tags.
- Multi-Line Tracking: Uses the
thirdLineproperty ofAdminLineChartto show merged PRs in a distinct green color (#22863a).
Sources: components/CodingAgentSlackTags/CodingAgentSlackTagsPage.tsx:47-59, components/CodingAgentSlackTags/CodingAgentSlackTagsPage.tsx:93-112
Content Agent & Login Tracking
Similarly, other modules utilize the line chart for specific activity:
- Content Agent: Tracks Slack tags against video links generated.
- Privy Logins: Tracks "Last Seen" activity over time to monitor user retention.
Sources: components/ContentSlack/ContentSlackPage.tsx:75-84, components/PrivyLogins/PrivyLoginsPage.tsx:61-63
Key Configuration & Types
Chart Configuration Options
The ChartConfig type defines how data keys are mapped to labels and colors.
| Property | Type | Description |
|---|---|---|
label | ReactNode | The text displayed in legends and tooltips. |
icon | ComponentType | Optional icon to display next to the label. |
color | string | Hex or CSS color value for the data line. |
theme | Record | Theme-specific color overrides (light/dark). |
Sources: components/ui/chart.tsx:13-22
AdminLineChart Props
The chart component accepts a structured set of properties to define its behavior.
| Prop | Type | Description |
|---|---|---|
title | string | Heading displayed above the chart. |
data | Array<{date, count}> | The primary dataset. |
label | string | Label for the primary data line (Default: "Count"). |
secondLine | ExtraLine | Optional configuration for a second data line. |
thirdLine | ExtraLine | Optional configuration for a third data line. |
Sources: components/Admin/AdminLineChart.tsx:13-19
User Interaction and Filtering
The analytics system includes a PeriodSelector that allows users to toggle between different time windows (e.g., "7d", "30d", "all"). Changing this period triggers a state update in the parent page, which refreshes the data via hooks and re-renders the charts.
Summary
The Charts & Analytics system provides the Recoup Admin platform with a scalable way to monitor system performance and agent usage. By abstracting Recharts into a standardized AdminLineChart and ChartContainer, the platform ensures that new analytics modules can be implemented with minimal boilerplate while maintaining a consistent visual language.