SaaS / Internal Tools
Analytics dashboard with real interactivity
SaaS metrics dashboard.
Project
Orbit
Industry
SaaS / Internal Tools
Timeline
1 day
Stack
The brief
An internal analytics dashboard showing MRR, signups, churn, and active users. Not a screenshot of charts, but a fully interactive tool with date filtering, sortable tables, and CSV export.
Our approach
We generated 365 days of realistic SaaS metrics with natural trends (growth, churn spikes, launch boosts) and built the entire chart layer in pure SVG. No chart library dependencies. Date range filtering updates all KPIs, charts, and tables instantly.
The result
A production-quality analytics dashboard that would take most teams a week. Four KPI cards with period comparisons, an MRR line chart with tooltips, a revenue-by-plan bar chart, a sortable data table, and CSV export. All in a single day.
Live demo
See it in action
This is a fully built, interactive demo. Not a mockup. Browse it like a real site.
Open the demoWhat we built
Pure SVG charts
Line chart with area fill and hover tooltips, bar chart with plan breakdown. No Recharts, no Chart.js. Zero dependencies, full control over rendering.
Interactive filtering
Date range presets (7d, 30d, 90d, 12m) that update every element on the page: KPI cards, charts, and data table all react to the selection.
Sortable table + CSV export
Click any column header to sort. Export the filtered dataset as CSV. The kind of detail that separates a real tool from a mockup.
Build your own
Want to build something like this yourself? Here are the spec and prompt we used.
Paste the prompt into Claude, Cursor, or any AI coding tool. The spec gives you the full requirements. Adapt it to your product and you can have a working version in hours.
Spec
# Interactive Analytics Dashboard ## What to build A SaaS metrics dashboard with charts, KPI cards, filtering, and data export. ## Components 1. **KPI cards**: 4 cards (MRR, New Signups, Churn Rate, Active Users) showing current value and period-over-period change with up/down arrows 2. **Date range selector**: preset buttons (Last 7 days, 30 days, 90 days, 12 months) that filter all data 3. **Line chart**: MRR over time with area fill, hover tooltips showing exact values, built with SVG paths 4. **Bar chart**: revenue by plan (3 tiers), SVG rectangles with labels 5. **Data table**: top 20 rows of underlying data, sortable by clicking column headers 6. **CSV export**: button that downloads the filtered dataset ## Data requirements - Generate 365 days of fake SaaS data at build time (TypeScript constants) - MRR in 50k-200k SEK range, growing ~10-15% MoM with variance - Include a churn spike around month 6 and a signup boost around month 9 - Revenue split across Starter/Pro/Enterprise plans
Prompt
Build an interactive analytics dashboard for SaaS metrics. Single self-contained page, no chart libraries (pure SVG). Generate 365 days of realistic data: MRR growing from ~52k to ~200k SEK with month-over-month variance, a churn spike at day 180, and a signup boost at day 270. Revenue split across Starter (30%), Pro (50%), Enterprise (20%). Components: 4 KPI cards with period comparison arrows, date range selector (7d/30d/90d/12m presets), SVG line chart for MRR with area fill and hover tooltips, SVG bar chart for revenue by plan, sortable data table (20 rows, click headers to sort), CSV export button. All components react to the date range filter. Use seeded pseudo-random data so values are consistent across renders.
What this means for you
This project was built in 1 day. Not planned in 1 day. Built, tested, deployed, and live.
Traditional agencies would scope a project like this at 2-4 weeks and $15,000-$30,000. We build at a pace that compresses those timelines by 10x because our workflow is AI-native from the first line of code.
You get the same quality, the same attention to detail, the same production-readiness. Just faster, and at a fraction of the cost. If you have a project in mind, we would love to hear about it.
Start a project