@byline/admin 5.1.2 → 5.1.4

package/dist/modules/analytics/components/dashboard.js

@@ -4,11 +4,14 @@ import { useEffect, useMemo, useState } from "react";
 import { ANALYTICS_DASHBOARD_PERIODS, ANALYTICS_OVERFLOW_KEY, isAnalyticsDashboardPeriod } from "@byline/analytics/config";
 import { ANALYTICS_IGNORE_STORAGE_KEY } from "@byline/analytics-agent";
 import { useTranslation } from "@byline/i18n/react";
-import { Button, Card, Container, Section, Select } from "@byline/ui/react";
+import { Button, Card, Container, Section, Select, useModal } from "@byline/ui/react";
 import clsx from "clsx";
 import dashboard_module from "./dashboard.module.js";
+import { RankedListModal } from "./ranked-list-modal.js";
+import { RankingRows, regionName, shareWidth } from "./ranking.js";
 import { AnalyticsTimeseries, resolveAnalyticsChartGranularity } from "./timeseries.js";
-function AnalyticsDashboard({ data, period, onPeriodChange }) {
+const ANALYTICS_PREVIEW_ROWS = 10;
+function AnalyticsDashboard({ data, period, onPeriodChange, loadFullList }) {
     const { locale, t } = useTranslation('byline-admin');
     const [excluded, setExcluded] = useState(false);
     const numbers = useMemo(()=>new Intl.NumberFormat(locale), [
@@ -37,6 +40,30 @@ function AnalyticsDashboard({ data, period, onPeriodChange }) {
     const { views, visitors, downloads } = data.summary;
     const days = data.summary.timeseries.length;
     const chartGranularity = resolveAnalyticsChartGranularity(period, days);
+    const fullLists = useMemo(()=>{
+        if (!loadFullList) return {};
+        const load = (kind)=>()=>loadFullList(kind).then((result)=>({
+                        rows: result.rows.map(toRankedRow),
+                        total: result.total
+                    }));
+        return {
+            pages: load('pages'),
+            downloads: load('downloads'),
+            referrers: load('referrers')
+        };
+    }, [
+        loadFullList
+    ]);
+    const countryRows = useMemo(()=>data.countries.map((row)=>({
+                key: row.country,
+                label: regionName(row.country, locale),
+                value: row.views,
+                visitors: row.visitors,
+                overflow: false
+            })), [
+        data.countries,
+        locale
+    ]);
     return /*#__PURE__*/ jsx(Section, {
         children: /*#__PURE__*/ jsxs(Container, {
             children: [
@@ -136,8 +163,9 @@ function AnalyticsDashboard({ data, period, onPeriodChange }) {
                             caption: t('analytics.columns.viewsAndUniques'),
                             tone: "views",
                             locale: locale,
-                            rows: data.pages.rows.map(toPathRow),
+                            rows: data.pages.rows.map(toRankedRow),
                             total: data.pages.total,
+                            fullList: fullLists.pages,
                             coverageFrom: partialCoverageFrom(data.range.from, data.coverage.pathsFrom)
                         }),
                         /*#__PURE__*/ jsxs("div", {
@@ -147,27 +175,21 @@ function AnalyticsDashboard({ data, period, onPeriodChange }) {
                                     title: t('analytics.sections.referrers'),
                                     tone: "visitors",
                                     locale: locale,
+                                    rows: data.referrers.rows.map(toRankedRow),
                                     total: data.referrers.total,
-                                    coverageFrom: partialCoverageFrom(data.range.from, data.coverage.referrersFrom),
-                                    rows: data.referrers.rows.map((row)=>({
-                                            key: row.referrerHost,
-                                            label: row.referrerHost,
-                                            value: row.views,
-                                            visitors: row.visitors,
-                                            overflow: row.referrerHost === ANALYTICS_OVERFLOW_KEY
-                                        }))
+                                    fullList: fullLists.referrers,
+                                    coverageFrom: partialCoverageFrom(data.range.from, data.coverage.referrersFrom)
                                 }),
                                 /*#__PURE__*/ jsx(RankedList, {
                                     title: t('analytics.sections.countries'),
                                     tone: "visitors",
                                     locale: locale,
-                                    rows: data.countries.map((row)=>({
-                                            key: row.country,
-                                            label: row.country,
-                                            value: row.views,
-                                            visitors: row.visitors,
-                                            overflow: false
-                                        }))
+                                    rows: countryRows,
+                                    total: countryRows.length,
+                                    fullList: {
+                                        rows: countryRows,
+                                        total: countryRows.length
+                                    }
                                 })
                             ]
                         })
@@ -178,8 +200,9 @@ function AnalyticsDashboard({ data, period, onPeriodChange }) {
                     caption: t('analytics.columns.clicksAndUniques'),
                     tone: "downloads",
                     locale: locale,
-                    rows: data.downloads.rows.map(toPathRow),
+                    rows: data.downloads.rows.map(toRankedRow),
                     total: data.downloads.total,
+                    fullList: fullLists.downloads,
                     coverageFrom: partialCoverageFrom(data.range.from, data.coverage.pathsFrom)
                 })
             ]
@@ -191,11 +214,6 @@ const TONE_TILE = {
     visitors: dashboard_module.toneVisitors,
     downloads: dashboard_module.toneDownloads
 };
-const TONE_BAR = {
-    views: dashboard_module.barViews,
-    visitors: dashboard_module.barVisitors,
-    downloads: dashboard_module.barDownloads
-};
 function StatTile({ tone, label, value, foot }) {
     return /*#__PURE__*/ jsxs("div", {
         className: clsx('byline-analytics-stat', dashboard_module.stat, TONE_TILE[tone]),
@@ -215,22 +233,21 @@ function StatTile({ tone, label, value, foot }) {
         ]
     });
 }
-function toPathRow(row) {
+function toRankedRow(row) {
+    const key = 'path' in row ? row.path : row.referrerHost;
     return {
-        key: row.path,
-        label: row.path,
+        key,
+        label: key,
         value: row.views,
         visitors: row.visitors,
-        overflow: row.path === ANALYTICS_OVERFLOW_KEY
+        overflow: key === ANALYTICS_OVERFLOW_KEY
     };
 }
-function RankedList({ title, caption, rows, tone, locale, total, coverageFrom }) {
+function RankedList({ title, caption, rows, tone, locale, total, fullList, coverageFrom }) {
     const { t } = useTranslation('byline-admin');
-    const numbers = useMemo(()=>new Intl.NumberFormat(locale), [
-        locale
-    ]);
-    const ceiling = Math.max(1, ...rows.map((row)=>row.value));
-    const truncated = null != total && total > rows.length;
+    const modal = useModal();
+    const preview = rows.slice(0, ANALYTICS_PREVIEW_ROWS);
+    const truncated = total > preview.length;
     const coverageDate = useMemo(()=>new Intl.DateTimeFormat(locale, {
             dateStyle: 'medium',
             timeZone: 'UTC'
@@ -239,7 +256,7 @@ function RankedList({ title, caption, rows, tone, locale, total, coverageFrom })
     ]);
     const description = [
         truncated ? t('analytics.topOf', {
-            shown: rows.length,
+            shown: preview.length,
             total
         }) : caption,
         null == coverageFrom ? void 0 : t('analytics.coverage.since', {
@@ -250,51 +267,52 @@ function RankedList({ title, caption, rows, tone, locale, total, coverageFrom })
         className: clsx('byline-analytics-list', dashboard_module.list),
         children: [
             /*#__PURE__*/ jsxs(Card.Header, {
+                className: clsx('byline-analytics-list-header', dashboard_module.listHeader),
                 children: [
-                    /*#__PURE__*/ jsx(Card.Title, {
-                        children: title
+                    /*#__PURE__*/ jsxs("div", {
+                        className: dashboard_module.listHeading,
+                        children: [
+                            /*#__PURE__*/ jsx(Card.Title, {
+                                children: title
+                            }),
+                            description.length > 0 && /*#__PURE__*/ jsx(Card.Description, {
+                                children: description
+                            })
+                        ]
                     }),
-                    description.length > 0 && /*#__PURE__*/ jsx(Card.Description, {
-                        children: description
+                    null != fullList && truncated && /*#__PURE__*/ jsx(Button, {
+                        type: "button",
+                        size: "xs",
+                        variant: "outlined",
+                        className: clsx('byline-analytics-view-all', dashboard_module.viewAll),
+                        onClick: modal.onOpen,
+                        children: t('analytics.viewAll', {
+                            count: total
+                        })
                     })
                 ]
             }),
             /*#__PURE__*/ jsx(Card.Content, {
-                children: 0 === rows.length ? /*#__PURE__*/ jsx("p", {
+                children: 0 === preview.length ? /*#__PURE__*/ jsx("p", {
                     className: "muted",
                     children: t('analytics.empty')
-                }) : /*#__PURE__*/ jsx("ol", {
-                    className: clsx('byline-analytics-ranking', dashboard_module.ranking),
-                    children: rows.map((row)=>/*#__PURE__*/ jsxs("li", {
-                            className: clsx('byline-analytics-ranking-row', dashboard_module.rankingRow, TONE_BAR[tone], row.overflow && dashboard_module.rankingOverflow),
-                            style: {
-                                '--byline-analytics-share': `${shareWidth(row.value, ceiling)}%`
-                            },
-                            children: [
-                                /*#__PURE__*/ jsx("span", {
-                                    className: dashboard_module.rankingLabel,
-                                    title: row.key,
-                                    children: row.overflow ? t('analytics.overflow') : row.label
-                                }),
-                                /*#__PURE__*/ jsx("span", {
-                                    className: dashboard_module.rankingValue,
-                                    children: numbers.format(row.value)
-                                }),
-                                /*#__PURE__*/ jsx("span", {
-                                    className: dashboard_module.rankingVisitors,
-                                    children: numbers.format(row.visitors)
-                                })
-                            ]
-                        }, row.key))
+                }) : /*#__PURE__*/ jsx(RankingRows, {
+                    rows: preview,
+                    tone: tone,
+                    locale: locale
                 })
+            }),
+            null != fullList && /*#__PURE__*/ jsx(RankedListModal, {
+                isOpen: modal.isOpen,
+                onDismiss: modal.onDismiss,
+                title: title,
+                tone: tone,
+                locale: locale,
+                source: fullList
             })
         ]
     });
 }
-function shareWidth(value, ceiling) {
-    if (!Number.isFinite(value) || value <= 0 || ceiling <= 0) return 0;
-    return Math.max(3, Math.min(100, value / ceiling * 100));
-}
 function formatShare(part, whole, locale) {
     const percent = new Intl.NumberFormat(locale, {
         style: 'percent',
@@ -305,4 +323,4 @@ function formatShare(part, whole, locale) {
 function partialCoverageFrom(rangeFrom, coverageFrom) {
     return null != coverageFrom && coverageFrom > rangeFrom ? coverageFrom : void 0;
 }
-export { AnalyticsDashboard, formatShare, partialCoverageFrom, shareWidth };
+export { ANALYTICS_PREVIEW_ROWS, AnalyticsDashboard, formatShare, partialCoverageFrom, shareWidth };

package/dist/modules/analytics/components/dashboard.jsx

@@ -0,0 +1,208 @@
+'use client';
+import { useEffect, useMemo, useState } from 'react';
+import { ANALYTICS_DASHBOARD_PERIODS, ANALYTICS_OVERFLOW_KEY, isAnalyticsDashboardPeriod, } from '@byline/analytics/config';
+import { ANALYTICS_IGNORE_STORAGE_KEY } from '@byline/analytics-agent';
+import { useTranslation } from '@byline/i18n/react';
+import { Button, Card, Container, Section, Select } from '@byline/ui/react';
+import cx from 'clsx';
+import styles from './dashboard.module.css';
+import { AnalyticsTimeseries, resolveAnalyticsChartGranularity } from './timeseries.js';
+export function AnalyticsDashboard({ data, period, onPeriodChange, }) {
+    const { locale, t } = useTranslation('byline-admin');
+    const [excluded, setExcluded] = useState(false);
+    const numbers = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+    useEffect(() => {
+        try {
+            setExcluded(localStorage.getItem(ANALYTICS_IGNORE_STORAGE_KEY) != null);
+        }
+        catch {
+            setExcluded(false);
+        }
+    }, []);
+    const toggleExclusion = () => {
+        try {
+            if (excluded)
+                localStorage.removeItem(ANALYTICS_IGNORE_STORAGE_KEY);
+            else
+                localStorage.setItem(ANALYTICS_IGNORE_STORAGE_KEY, '1');
+            setExcluded(!excluded);
+        }
+        catch {
+            // A blocked storage surface leaves the current collection behavior unchanged.
+        }
+    };
+    const periodItems = ANALYTICS_DASHBOARD_PERIODS.map((value) => ({
+        value: String(value),
+        label: typeof value === 'number'
+            ? t('analytics.period.days', { count: value })
+            : t(`analytics.period.${value}`),
+    }));
+    const { views, visitors, downloads } = data.summary;
+    const days = data.summary.timeseries.length;
+    const chartGranularity = resolveAnalyticsChartGranularity(period, days);
+    return (<Section>
+      <Container>
+        <header className={cx('byline-analytics-header', styles.header)}>
+          <div>
+            <h1 className={cx('byline-analytics-title', styles.title)}>{t('analytics.title')}</h1>
+            <p className={cx('muted', 'byline-analytics-help', styles.help)}>
+              {t('analytics.dailyUniquesHelp')}
+            </p>
+          </div>
+          <div className={cx('byline-analytics-controls', styles.controls)}>
+            <Select id="analytics-period" name="analytics-period" aria-label={t('analytics.period.label')} size="sm" value={String(period)} items={periodItems} onValueChange={(value) => {
+            const next = value === 'ytd' || value === 'all' ? value : Number(value);
+            if (isAnalyticsDashboardPeriod(next))
+                onPeriodChange(next);
+        }}/>
+            <Button type="button" size="sm" aria-pressed={excluded} 
+    // Local storage is origin-scoped, so this only governs public-page
+    // collection when the admin and the public site share an origin.
+    title={t('analytics.exclusion.help')} onClick={toggleExclusion}>
+              {excluded ? t('analytics.exclusion.include') : t('analytics.exclusion.exclude')}
+            </Button>
+          </div>
+        </header>
+
+        {/* Tinted ground, saturated ink, tracked label, tabular number — the
+            same tile grammar as the collection dashboard's status counts. */}
+        <div className={cx('byline-analytics-stats', styles.stats)}>
+          <StatTile tone="views" label={t('analytics.stats.views')} value={numbers.format(views)} foot={t('analytics.stats.perDay', {
+            count: days === 0 ? 0 : Math.round(views / days),
+        })}/>
+          <StatTile tone="visitors" label={t('analytics.stats.dailyUniques')} value={numbers.format(visitors)} 
+    // The qualification rides under the figure it qualifies rather
+    // than sitting in help text several elements away.
+    foot={t('analytics.stats.sumOfDays', { count: days })}/>
+          <StatTile tone="downloads" label={t('analytics.stats.downloads')} value={numbers.format(downloads)} foot={t('analytics.stats.shareOfViews', {
+            share: formatShare(downloads, views, locale),
+        })}/>
+        </div>
+
+        <Card className={cx('byline-analytics-chart-card', styles.chartCard)}>
+          <Card.Header>
+            <Card.Title>
+              {chartGranularity === 'day'
+            ? t('analytics.chart.perDay')
+            : chartGranularity === 'seven-day'
+                ? t('analytics.chart.perSevenDays')
+                : t('analytics.chart.perMonth')}
+            </Card.Title>
+          </Card.Header>
+          <Card.Content>
+            <AnalyticsTimeseries days={data.summary.timeseries} granularity={chartGranularity} locale={locale}/>
+          </Card.Content>
+        </Card>
+
+        {/* Top pages is the list people actually read, so it gets the wide
+            column; referrers and countries stack beside it. */}
+        <div className={cx('byline-analytics-lists', styles.lists)}>
+          <RankedList title={t('analytics.sections.pages')} caption={t('analytics.columns.viewsAndUniques')} tone="views" locale={locale} rows={data.pages.rows.map(toPathRow)} total={data.pages.total} coverageFrom={partialCoverageFrom(data.range.from, data.coverage.pathsFrom)}/>
+          <div className={styles.stack}>
+            <RankedList title={t('analytics.sections.referrers')} tone="visitors" locale={locale} total={data.referrers.total} coverageFrom={partialCoverageFrom(data.range.from, data.coverage.referrersFrom)} rows={data.referrers.rows.map((row) => ({
+            key: row.referrerHost,
+            label: row.referrerHost,
+            value: row.views,
+            visitors: row.visitors,
+            overflow: row.referrerHost === ANALYTICS_OVERFLOW_KEY,
+        }))}/>
+            <RankedList title={t('analytics.sections.countries')} tone="visitors" locale={locale} rows={data.countries.map((row) => ({
+            key: row.country,
+            label: row.country,
+            value: row.views,
+            visitors: row.visitors,
+            overflow: false,
+        }))}/>
+          </div>
+        </div>
+
+        <RankedList title={t('analytics.sections.downloads')} caption={t('analytics.columns.clicksAndUniques')} tone="downloads" locale={locale} rows={data.downloads.rows.map(toPathRow)} total={data.downloads.total} coverageFrom={partialCoverageFrom(data.range.from, data.coverage.pathsFrom)}/>
+      </Container>
+    </Section>);
+}
+const TONE_TILE = {
+    views: styles.toneViews,
+    visitors: styles.toneVisitors,
+    downloads: styles.toneDownloads,
+};
+const TONE_BAR = {
+    views: styles.barViews,
+    visitors: styles.barVisitors,
+    downloads: styles.barDownloads,
+};
+function StatTile({ tone, label, value, foot, }) {
+    return (<div className={cx('byline-analytics-stat', styles.stat, TONE_TILE[tone])}>
+      <span className={cx('byline-analytics-stat-label', styles.statLabel)}>{label}</span>
+      <span className={cx('byline-analytics-stat-value', styles.statValue)}>{value}</span>
+      <span className={cx('byline-analytics-stat-foot', styles.statFoot)}>{foot}</span>
+    </div>);
+}
+function toPathRow(row) {
+    return {
+        key: row.path,
+        label: row.path,
+        value: row.views,
+        visitors: row.visitors,
+        overflow: row.path === ANALYTICS_OVERFLOW_KEY,
+    };
+}
+function RankedList({ title, caption, rows, tone, locale, total, coverageFrom, }) {
+    const { t } = useTranslation('byline-admin');
+    const numbers = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+    const ceiling = Math.max(1, ...rows.map((row) => row.value));
+    // Say so when the list is a top-N slice. Without this the card presents a
+    // truncated ranking as though it were the whole set.
+    const truncated = total != null && total > rows.length;
+    const coverageDate = useMemo(() => new Intl.DateTimeFormat(locale, {
+        dateStyle: 'medium',
+        timeZone: 'UTC',
+    }), [locale]);
+    const description = [
+        truncated ? t('analytics.topOf', { shown: rows.length, total }) : caption,
+        coverageFrom == null
+            ? undefined
+            : t('analytics.coverage.since', {
+                date: coverageDate.format(new Date(`${coverageFrom}T00:00:00.000Z`)),
+            }),
+    ]
+        .filter((value) => value != null)
+        .join(' · ');
+    return (<Card className={cx('byline-analytics-list', styles.list)}>
+      <Card.Header>
+        <Card.Title>{title}</Card.Title>
+        {description.length > 0 && <Card.Description>{description}</Card.Description>}
+      </Card.Header>
+      <Card.Content>
+        {rows.length === 0 ? (<p className="muted">{t('analytics.empty')}</p>) : (<ol className={cx('byline-analytics-ranking', styles.ranking)}>
+            {rows.map((row) => (<li key={row.key} className={cx('byline-analytics-ranking-row', styles.rankingRow, TONE_BAR[tone], row.overflow && styles.rankingOverflow)} 
+            // The share bar sits behind the row so the label and its
+            // magnitude occupy one line and are read together.
+            style={{
+                    '--byline-analytics-share': `${shareWidth(row.value, ceiling)}%`,
+                }}>
+                <span className={styles.rankingLabel} title={row.key}>
+                  {/* `__other__` is a reserved aggregate, not a page anyone
+                    visited — never render it as though it were a real path. */}
+                  {row.overflow ? t('analytics.overflow') : row.label}
+                </span>
+                <span className={styles.rankingValue}>{numbers.format(row.value)}</span>
+                <span className={styles.rankingVisitors}>{numbers.format(row.visitors)}</span>
+              </li>))}
+          </ol>)}
+      </Card.Content>
+    </Card>);
+}
+/** Never collapse the bar entirely: a visible sliver still encodes "smallest". */
+export function shareWidth(value, ceiling) {
+    if (!Number.isFinite(value) || value <= 0 || ceiling <= 0)
+        return 0;
+    return Math.max(3, Math.min(100, (value / ceiling) * 100));
+}
+export function formatShare(part, whole, locale) {
+    const percent = new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 1 });
+    return percent.format(whole <= 0 ? 0 : part / whole);
+}
+/** Return the retained boundary only when it truncates the selected range. */
+export function partialCoverageFrom(rangeFrom, coverageFrom) {
+    return coverageFrom != null && coverageFrom > rangeFrom ? coverageFrom : undefined;
+}

package/dist/modules/analytics/components/dashboard.module.js

@@ -24,6 +24,15 @@ const dashboard_module = {
     rankingOverflow: "rankingOverflow-hUQMKU",
     rankingLabel: "rankingLabel-wsuniC",
     rankingValue: "rankingValue-i_vmgf",
-    rankingVisitors: "rankingVisitors-NZl_jj"
+    rankingVisitors: "rankingVisitors-NZl_jj",
+    listHeader: "listHeader-nWIpzD",
+    listHeading: "listHeading-ljSubR",
+    viewAll: "viewAll-jPtoC0",
+    modal: "modal-_Fpti3",
+    modalCaption: "modalCaption-Z7Qsck",
+    modalContent: "modalContent-raK5q1",
+    modalStatus: "modalStatus-bXbZr9",
+    modalActions: "modalActions-XVBrOS",
+    srOnly: "srOnly-szSAhX"
 };
 export default dashboard_module;

package/dist/modules/analytics/components/dashboard.test.node.js

@@ -0,0 +1,162 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import { describe, expect, it } from 'vitest';
+import { formatShare, partialCoverageFrom, shareWidth } from './dashboard.js';
+import { bucketAnalyticsTimeseries, buildAnalyticsColumns, resolveAnalyticsChartGranularity, } from './timeseries.js';
+function day(date, views, visitors) {
+    return { day: date, views, visitors, downloads: 0 };
+}
+describe('buildAnalyticsColumns', () => {
+    it('scales every column against the tallest day in the window', () => {
+        const columns = buildAnalyticsColumns([
+            day('2026-08-20', 0, 0),
+            day('2026-08-21', 5, 3),
+            day('2026-08-22', 10, 4),
+        ]);
+        expect(columns).toHaveLength(3);
+        expect(columns[0]?.height).toBe(0);
+        expect(columns[1]?.height).toBe(90);
+        expect(columns[2]?.height).toBe(180);
+        // The tallest column reaches the top of the plot, and every column sits on
+        // the baseline: y + height is the full viewBox height.
+        for (const column of columns) {
+            expect(column.y + column.height).toBeCloseTo(180);
+        }
+    });
+    it('keeps the unique-visitor mark inset within its own day', () => {
+        const [column] = buildAnalyticsColumns([day('2026-08-20', 10, 4)]);
+        if (column == null)
+            throw new Error('expected one column');
+        // Visitors can never exceed that day's views, so the inset mark is always
+        // shorter and narrower than the column it sits inside.
+        expect(column.insetHeight).toBeLessThan(column.height);
+        expect(column.insetWidth).toBeLessThan(column.width);
+        expect(column.insetX).toBeGreaterThan(column.x);
+        expect(column.insetX + column.insetWidth).toBeLessThan(column.x + column.width);
+    });
+    it('survives an all-zero window without dividing by zero', () => {
+        const columns = buildAnalyticsColumns([day('2026-08-20', 0, 0), day('2026-08-21', 0, 0)]);
+        expect(columns.map((column) => column.height)).toEqual([0, 0]);
+        expect(columns.every((column) => Number.isFinite(column.x))).toBe(true);
+    });
+    it('returns nothing for an empty window', () => {
+        expect(buildAnalyticsColumns([])).toEqual([]);
+    });
+    it('spans the full plot width and never overlaps neighbouring hit targets', () => {
+        const columns = buildAnalyticsColumns([
+            day('2026-08-20', 1, 1),
+            day('2026-08-21', 2, 1),
+            day('2026-08-22', 3, 2),
+        ]);
+        expect(columns[0]?.hitX).toBe(0);
+        const last = columns[columns.length - 1];
+        expect((last?.hitX ?? 0) + (last?.hitWidth ?? 0)).toBeCloseTo(900);
+        for (let index = 1; index < columns.length; index += 1) {
+            const previous = columns[index - 1];
+            expect(columns[index]?.hitX).toBeCloseTo((previous?.hitX ?? 0) + (previous?.hitWidth ?? 0));
+        }
+    });
+});
+describe('analytics chart buckets', () => {
+    it('selects granularity explicitly from the reporting period and range size', () => {
+        expect(resolveAnalyticsChartGranularity(90, 90)).toBe('day');
+        expect(resolveAnalyticsChartGranularity('ytd', 90)).toBe('seven-day');
+        expect(resolveAnalyticsChartGranularity('all', 90)).toBe('day');
+        expect(resolveAnalyticsChartGranularity('all', 91)).toBe('seven-day');
+        expect(resolveAnalyticsChartGranularity('all', 733)).toBe('month');
+    });
+    it('keeps day boundaries and width in daily buckets', () => {
+        expect(bucketAnalyticsTimeseries([day('2026-01-01', 2, 1)], 'day')).toEqual([
+            {
+                from: '2026-01-01',
+                to: '2026-01-01',
+                granularity: 'day',
+                dayCount: 1,
+                views: 2,
+                visitors: 1,
+                downloads: 0,
+            },
+        ]);
+    });
+    it('sums daily rows into explicit seven-day buckets', () => {
+        const days = Array.from({ length: 8 }, (_, index) => day(`2026-01-${String(index + 1).padStart(2, '0')}`, 2, 1));
+        expect(bucketAnalyticsTimeseries(days, 'seven-day')).toEqual([
+            {
+                from: '2026-01-01',
+                to: '2026-01-07',
+                granularity: 'seven-day',
+                dayCount: 7,
+                views: 14,
+                visitors: 7,
+                downloads: 0,
+            },
+            {
+                from: '2026-01-08',
+                to: '2026-01-08',
+                granularity: 'seven-day',
+                dayCount: 1,
+                views: 2,
+                visitors: 1,
+                downloads: 0,
+            },
+        ]);
+    });
+    it('aligns month buckets to UTC calendar boundaries', () => {
+        expect(bucketAnalyticsTimeseries([day('2026-01-31', 2, 1), day('2026-02-01', 3, 2), day('2026-02-02', 4, 2)], 'month')).toEqual([
+            {
+                from: '2026-01-31',
+                to: '2026-01-31',
+                granularity: 'month',
+                dayCount: 1,
+                views: 2,
+                visitors: 1,
+                downloads: 0,
+            },
+            {
+                from: '2026-02-01',
+                to: '2026-02-02',
+                granularity: 'month',
+                dayCount: 2,
+                views: 7,
+                visitors: 4,
+                downloads: 0,
+            },
+        ]);
+    });
+});
+describe('shareWidth', () => {
+    it('scales a row against the largest row in its list', () => {
+        expect(shareWidth(50, 100)).toBe(50);
+        expect(shareWidth(100, 100)).toBe(100);
+    });
+    it('keeps the smallest row visible rather than collapsing it', () => {
+        expect(shareWidth(1, 10_000)).toBe(3);
+    });
+    it('returns no bar for absent or impossible values', () => {
+        expect(shareWidth(0, 100)).toBe(0);
+        expect(shareWidth(5, 0)).toBe(0);
+        expect(shareWidth(Number.NaN, 100)).toBe(0);
+    });
+});
+describe('formatShare', () => {
+    it('renders a locale-aware percentage of the whole', () => {
+        expect(formatShare(96, 1_200, 'en-US')).toBe('8%');
+        expect(formatShare(1, 3, 'en-US')).toBe('33.3%');
+    });
+    it('reports zero rather than NaN when there is nothing to divide', () => {
+        expect(formatShare(0, 0, 'en-US')).toBe('0%');
+    });
+});
+describe('partialCoverageFrom', () => {
+    it('returns a retained boundary only when it truncates the report', () => {
+        expect(partialCoverageFrom('2025-01-01', '2026-05-26')).toBe('2026-05-26');
+        expect(partialCoverageFrom('2026-05-27', '2026-05-26')).toBeUndefined();
+        expect(partialCoverageFrom('2026-05-26', '2026-05-26')).toBeUndefined();
+        expect(partialCoverageFrom('2025-01-01', null)).toBeUndefined();
+    });
+});