plausible/analytics

Simple, open source, lightweight and privacy-friendly web analytics alternative to Google Analytics.

24,499 stars Elixir 10 components 2 connections

Privacy-focused web analytics platform built with Elixir/Phoenix and React

User interactions update dashboard state, trigger API calls to Elixir backend, which queries ClickHouse and returns formatted analytics data for visualization

Under the hood, the system uses 2 feedback loops, 3 data pools, 3 control points to manage its runtime behavior.

Structural Verdict

A 10-component dashboard with 2 connections. 1412 files analyzed. Minimal connections — components operate mostly in isolation.

How Data Flows Through the System

User interactions update dashboard state, trigger API calls to Elixir backend, which queries ClickHouse and returns formatted analytics data for visualization

User Interaction — User selects time periods, applies filters, or clicks drill-down links
State Update — Dashboard state context updates with new filters, dates, or segments
API Request — Frontend serializes state and makes HTTP request to Phoenix API endpoints
Data Query — Backend queries ClickHouse database with aggregated analytics data
Response Formatting — Backend formats and returns JSON response with metrics and metadata
Visualization — Frontend components render charts, tables, and statistics from API response

System Behavior

How the system actually operates at runtime — where data accumulates, what loops, what waits, and what controls what.

Data Pools

ClickHouse Analytics Store (database)
Aggregated pageview and event data

PostgreSQL Main Database (database)
User accounts, site configurations, and feature flags

Browser Local Storage (cache)
Dashboard preferences and filter states

Feedback Loops

Dashboard Auto-refresh (polling, reinforcing) — Trigger: Real-time mode enabled. Action: Fetch current visitor count every 30 seconds. Exit: User switches to historical period.
API Retry Logic (retry, balancing) — Trigger: API request fails. Action: Exponential backoff retry with cancel on new request. Exit: Success or max retries reached.

Delays & Async Processing

ClickHouse Query Latency (async-processing, ~varies) — Dashboard loading time depends on query complexity and data volume
Real-time Data Lag (eventual-consistency, ~~30 seconds) — Current visitor counts may be slightly delayed from actual traffic

Control Points

Feature Flags (feature-flag) — Controls: Available dashboard features like funnels, props, segments. Default: site.flags object
API Rate Limiting (rate-limit) — Controls: Request frequency to prevent backend overload. Default: abortController cancellation
Dashboard Periods (env-var) — Controls: Available time period options for analytics queries. Default: site.validIntervalsByPeriod

Technology Stack

Elixir/Phoenix (framework)
Backend web framework and API server

ClickHouse (database)
Columnar database for analytics data storage

React (framework)
Frontend dashboard UI framework

PostgreSQL (database)
Primary database for user data and configuration

Ecto (library)
Database wrapper and query builder

React Router (library)
Frontend routing and navigation

Tailwind CSS (library)
Utility-first CSS framework

Alpine.js (library)
Lightweight JavaScript for LiveView interactions

ExUnit (testing)
Elixir testing framework

Mix (build)
Build tool and task runner

Key Components

DashboardStateContextProvider (component) — Manages global dashboard state including filters, time periods, and segments assets/js/dashboard/dashboard-state-context.tsx
SiteContextProvider (component) — Provides site configuration and feature flags to dashboard components assets/js/dashboard/site-context.tsx
Dashboard (component) — Main dashboard component orchestrating visitor graphs, sources, pages, and device stats assets/js/dashboard/index.tsx
apiPath (utility) — Constructs API endpoint URLs for stats queries assets/js/dashboard/util/url.ts
api.get (service) — Handles HTTP requests to backend analytics API with authentication and state serialization assets/js/dashboard/api.ts
createVisitors (function) — Factory function for creating visitor count metrics with different labels based on context assets/js/dashboard/stats/reports/metrics.js
Modal (component) — Base modal component with keyboard navigation and responsive design assets/js/dashboard/stats/modals/modal.js
useAppNavigate (hook) — Navigation hook that preserves dashboard state and segments across route changes assets/js/dashboard/navigation/use-app-navigate.tsx
getFiltersByKeyPrefix (utility) — Extracts and manipulates dashboard filters by their key prefixes assets/js/dashboard/util/filters.js
DrilldownLink (component) — Provides clickable links that add filters to drill down into specific data segments assets/js/dashboard/components/drilldown-link.tsx

Sub-Modules

Tracking Script (independence: high)
Lightweight JavaScript library for collecting website analytics data

Analytics Dashboard (independence: medium)
React-based frontend application for viewing and analyzing website statistics

Explore the interactive analysis

See the full architecture map, data flow, and code patterns visualization.

Analyze on CodeSea

Related Dashboard Repositories

Frequently Asked Questions

What is analytics used for?

Privacy-focused web analytics platform built with Elixir/Phoenix and React plausible/analytics is a 10-component dashboard written in Elixir. Minimal connections — components operate mostly in isolation. The codebase contains 1412 files.

How is analytics architected?

analytics is organized into 5 architecture layers: Core Application, Web Layer, Data Layer, Frontend Dashboard, and 1 more. Minimal connections — components operate mostly in isolation. This layered structure keeps concerns separated and modules independent.

How does data flow through analytics?

Data moves through 6 stages: User Interaction → State Update → API Request → Data Query → Response Formatting → .... User interactions update dashboard state, trigger API calls to Elixir backend, which queries ClickHouse and returns formatted analytics data for visualization This pipeline design reflects a complex multi-stage processing system.

What technologies does analytics use?

The core stack includes Elixir/Phoenix (Backend web framework and API server), ClickHouse (Columnar database for analytics data storage), React (Frontend dashboard UI framework), PostgreSQL (Primary database for user data and configuration), Ecto (Database wrapper and query builder), React Router (Frontend routing and navigation), and 4 more. This broad technology surface reflects a mature project with many integration points.

What system dynamics does analytics have?

analytics exhibits 3 data pools (ClickHouse Analytics Store, PostgreSQL Main Database), 2 feedback loops, 3 control points, 2 delays. The feedback loops handle polling and retry. These runtime behaviors shape how the system responds to load, failures, and configuration changes.

What design patterns does analytics use?

5 design patterns detected: Context Providers, Modal System, Metric Factory Pattern, Filter State Management, Navigation Hooks.

Analyzed on March 31, 2026 by CodeSea. Written by Karolina Sarna.