Analytics Dashboard Website Template

Quick Start

1. Unzip the folder and open index.html in a browser, or serve it:

Code snippet omitted: it ships with the download.

2. Load /index.html (or the folder with a trailing slash) so the relative assets/ paths resolve.
3. Change the dashboard name (.logo, plain text by default; put your own mark inside it if you have one) and the site name (.site-name, .site-domain) on each page.
4. Replace assets/data.js with your own figures (see "Re-pointing the data").

No build step. Each page is a plain HTML file with assets/style.css, assets/data.js, assets/charts.js, GSAP from a CDN and assets/script.js.

Using It With Your Own Design

• Colour: change the tokens at the top of assets/style.css. The light block is :root; the dark theme restates the same names under :root[data-theme="dark"]. Bars need 3:1 against --sheet, text 4.5:1; the measured pairs are noted in the first comment.
• Type: Funnel Sans (UI and figures) and Spline Sans Mono (axes, paths, keys) are self-hosted in assets/fonts/. Swap --font-ui and --font-mono and the @font-face rules.
• Shape: --r is the control corner (3px). Regions have none. Keep box-shadow out to keep the register.
• Density: --pad, --pad-x and --side-w set the cell padding and sidebar width. The bar chart height is .bc-plot { height }.
• Brand: the dashboard name is plain text in .logo. The site favicon square is .site-fav.

Pages and Configuration

Shared shell

Every page has the same sidebar ([data-nav]), phone bar (.phonebar with [data-nav-open]), top row (.top), a page-list footer (.pagelist) and the shortcuts dialog (#shortcuts). To add a page, copy one, change its <title>, h1 and content, and add its link to the sidebar and footer of every page. Mark the current link with aria-current="page".

The top row's period menu ([data-range] items), comparison switch ([data-compare]) and filter chips ([data-chips]) are optional per page: delete them where they make no sense, as Settings does.

Re-pointing the data

assets/data.js exposes window.Dashboard.data:

• METRICS: key, label, format (int, pct, dur, gbp), how days combine (sum or avg), a daily target and better (up or down).
• RANGES: the periods in the menu, their day count, step (7 for weekly bars) and shortcut key.
• series(metric, range, { previous, filter }) returns [{ t, v }]; total(...) returns a number; target(metric, range) scales the target to the bar size.
• Lists: SOURCES, CHANNELS, CAMPAIGNS, PAGES, COUNTRIES, DEVICES, BROWSERS, SYSTEMS, DEPTH, GOALS, FUNNEL_STEPS, COHORTS, HEAT. Each row has an id, a name and a share of visitors.

The demo builds a year of days from a seeded random sequence. Replace the body of days (or the helpers) with rows from your API and keep the return shapes; the charts, filters and tables read only these helpers. The static HTML was rendered from the same helpers, so update the numbers in the markup too if you need the no-JavaScript view to match your data.

assets/charts.js (window.Dashboard.charts) turns numbers into markup: barcode, minibars, sparkline, proportion, listRows, lineChart, heatmap, funnel, plus formatting helpers. Colours come from CSS classes, never from the chart code.

Barcode charts

Any element with data-barcode and data-key="<metric>" draws a bar chart. Optional attributes:

• data-range-fixed="30d" keeps it on one period instead of following the menu.
• data-show-prev adds previous-period ticks.
• data-target, data-better and data-target-label override the metric's target (Settings uses this for the daily plan allowance).

Bars that miss the target take .is-miss (pink). Focus the chart and use the arrow keys, Home, End, Page Up and Page Down to read a day.

Metric strip

[data-strip] holds role="tab" buttons with data-metric. On the Overview it drives #chart-main; elsewhere set data-strip-for="<id>" to the barcode it controls.

Breakdown lists and filters

A ul[data-brk] is redrawn from its data attributes: data-list (a list name in the data file), data-kind (makes rows filter buttons: source, channel, campaign, page, country, browser), data-limit, data-pct, data-marks (mark or id monograms), data-name="path" for page lists. On the Overview a filter is kept in the address (index.html?source=google), so links from other pages can open a filtered Overview.

Line charts

[data-revenue-chart] wraps a [data-lines] chart with [data-series-toggle] checkboxes and an optional [data-compare-local] switch for dotted previous-period lines.

Page hooks

• Pages: [data-page-table], [data-section-tab], [data-search], [data-sort], [data-per-page], [data-row-check], [data-check-all], [data-bulk], [data-export-all], [data-open-page], drawer [data-drawer].
• Sources: [data-channel], [data-prop="channels"], [data-referrers], campaign builder [data-utm-form], [data-utm-out], [data-utm-save], list [data-campaigns].
• Audience: [data-heatmap], [data-heat-measure], readout [data-hr-when], [data-hr-value], [data-hr-share].
• Goals: [data-add-goal] opens #goal-modal; funnel [data-funnel], steps [data-steps] with [data-handle], [data-step-up], [data-step-down], [data-step-remove], [data-step-pick], [data-step-add].
• Revenue: [data-rev-tile], [data-sortable] tables, cohorts [data-cohorts] with [data-co-mode].
• Settings: tabs [data-set-tabs] linked to the address hash; forms marked [data-dirty-form] show the [data-unsaved] bar; [data-invite], [data-remove-member], [data-share], [data-recips], [data-verify], [data-danger].
• Anywhere: data-toast="message" shows a toast; data-copy="text" copies text; data-open-modal="<id>" opens a dialog.

Front end only

Nothing is saved or sent. Goals, invites, recipients, share links, campaigns and the delete confirmation update the page only; CSV export builds the file in the browser. Wire each form to your backend (Supabase, Firebase or your own API). The tracking snippet points at a placeholder stats.example.com.

Keyboard shortcuts

M, Q, H and Y pick the period; C toggles the comparison; 1 to 6 pick a metric on the Overview; X clears a filter; / focuses search; T switches theme; ? lists them. They are ignored while typing in a field.

Palette

The theme follows the system on first visit; the sidebar button switches it and remembers the choice. To ship one theme, delete the other block and the button.

Accessibility

• Every control is a native button, link or input with a visible focus ring for keyboard use only.
• The metric strip and tabs are ARIA tab lists with arrow keys. The heatmap and cohort grid use a roving tab stop with arrow keys.
• Charts are focusable groups that announce the day under the arrow keys; every chart has a table or list carrying the same figures.
• Drawers, dialogs and the phone sheet trap focus, close on Escape and return focus to their trigger.
• Colour is never the only signal: misses are also announced and listed, deltas carry a sign.
• Reduced motion draws charts at rest and stops the live dot pulsing. Without JavaScript every page shows its static charts and tables and a page list for navigation.

Dependencies

• GSAP 3.12+ (demo built against 3.15.0) from jsDelivr. Flip is loaded on pages.html and Draggable on goals.html; both are optional, and the pages work without them (no reorder animation; buttons and keys still reorder the funnel).
• Funnel Sans and Spline Sans Mono, self-hosted in assets/fonts/ (latin, the weights used). SIL Open Font License; see assets/fonts/OFL.txt.
• No other libraries. Plain page loads crossfade with a CSS view transition where the browser supports it.

Teardown

Each page is standalone. On pagehide the script removes its listeners, timers and observers and reverts its GSAP context. If you embed the dashboard in a single-page app, call the same cleanup when the view unmounts, or load the page in its own route.