@byline/admin 5.1.3 → 5.1.4

package/dist/modules/analytics/components/dashboard.d.ts

@@ -6,15 +6,25 @@
  * Copyright (c) Infonomic Company Limited
  */
 import type React from 'react';
+import type { AnalyticsPathTotal, AnalyticsRankedTotals, AnalyticsReferrerTotal } from '@byline/analytics';
 import type { AnalyticsDashboardData, AnalyticsDashboardPeriod } from '../types.js';
+export { shareWidth } from './ranking.js';
+/** Rows each ranked card shows before offering the full list. */
+export declare const ANALYTICS_PREVIEW_ROWS = 10;
+/** The truncated lists a host can fetch in full on demand. */
+export type AnalyticsFullListKind = 'pages' | 'downloads' | 'referrers';
 export interface AnalyticsDashboardProps {
     data: AnalyticsDashboardData;
     period: AnalyticsDashboardPeriod;
     onPeriodChange(period: AnalyticsDashboardPeriod): void;
+    /**
+     * Fetch a larger top-N for one of the truncated lists when its "View all"
+     * modal opens. Countries are always complete and never use this. Omit it
+     * and those cards still show their preview, without the action.
+     */
+    loadFullList?(kind: AnalyticsFullListKind): Promise<AnalyticsRankedTotals<AnalyticsPathTotal | AnalyticsReferrerTotal>>;
 }
-export declare function AnalyticsDashboard({ data, period, onPeriodChange, }: AnalyticsDashboardProps): React.JSX.Element;
-/** Never collapse the bar entirely: a visible sliver still encodes "smallest". */
-export declare function shareWidth(value: number, ceiling: number): number;
+export declare function AnalyticsDashboard({ data, period, onPeriodChange, loadFullList, }: AnalyticsDashboardProps): React.JSX.Element;
 export declare function formatShare(part: number, whole: number, locale: string): string;
 /** Return the retained boundary only when it truncates the selected range. */
 export declare function partialCoverageFrom(rangeFrom: string, coverageFrom: string | null): string | undefined;

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.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_module.css

@@ -266,3 +266,60 @@
   }
 }
 
+:is(.listHeader-nWIpzD, .byline-analytics-list-header) {
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: .75rem;
+  display: flex;
+}
+
+.listHeading-ljSubR {
+  min-width: 0;
+}
+
+:is(.viewAll-jPtoC0, .byline-analytics-view-all) {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+:is(.modal-_Fpti3, .byline-analytics-modal) {
+  width: min(40rem, 100vw - 2rem);
+}
+
+:is(.modalCaption-Z7Qsck, .byline-analytics-modal-caption) {
+  font-variant-numeric: tabular-nums;
+  margin: .25rem 0 0;
+  font-size: .75rem;
+}
+
+:is(.modalContent-raK5q1, .byline-analytics-modal-content) {
+  max-height: min(60vh, 48rem);
+  overflow-y: auto;
+}
+
+.modalStatus-bXbZr9 {
+  justify-content: center;
+  padding: 2rem 0;
+  display: flex;
+}
+
+:is(.modalActions-XVBrOS, .byline-analytics-modal-actions) {
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: .75rem;
+  display: flex;
+}
+
+.srOnly-szSAhX {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+

package/dist/modules/analytics/components/ranked-list-modal.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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
+ */
+/**
+ * Full ranking for one dashboard card, paged client-side.
+ *
+ * The dashboard cards show a short preview so the lists band stays even
+ * regardless of traffic. This modal shows the whole set behind a card's
+ * "View all" action. A `source` may be a ready list (countries are fully
+ * loaded with the dashboard) or a loader invoked once each time the modal
+ * opens (pages, downloads and referrers fetch a larger top-N on demand).
+ *
+ * The caption keeps the dashboard's honesty rule: when the loaded rows are
+ * a top-N slice of a larger set it says so alongside the page range.
+ */
+import type React from 'react';
+import { type AnalyticsTone, type RankedListSource } from './ranking.js';
+export type RankedListSourceInput = RankedListSource | (() => Promise<RankedListSource>);
+export interface RankedListModalProps {
+    isOpen: boolean;
+    onDismiss(): void;
+    title: string;
+    tone: AnalyticsTone;
+    locale: string;
+    source: RankedListSourceInput;
+    pageSize?: number;
+}
+export declare function RankedListModal({ isOpen, onDismiss, title, tone, locale, source, pageSize, }: RankedListModalProps): React.JSX.Element;

package/dist/modules/analytics/components/ranked-list-modal.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useTranslation } from "@byline/i18n/react";
+import { Alert, Button, LoaderRing, Modal, Pagination } from "@byline/ui/react";
+import clsx from "clsx";
+import dashboard_module from "./dashboard.module.js";
+import { RankingRows, pageWindow } from "./ranking.js";
+function RankedListModal({ isOpen, onDismiss, title, tone, locale, source, pageSize = 25 }) {
+    const { t } = useTranslation('byline-admin');
+    const [state, setState] = useState({
+        status: 'idle'
+    });
+    const [page, setPage] = useState(1);
+    useEffect(()=>{
+        if (!isOpen) {
+            setState({
+                status: 'idle'
+            });
+            setPage(1);
+            return;
+        }
+        if ('function' != typeof source) return void setState({
+            status: 'ready',
+            data: source
+        });
+        let current = true;
+        setState({
+            status: 'loading'
+        });
+        source().then((data)=>{
+            if (current) setState({
+                status: 'ready',
+                data
+            });
+        }).catch(()=>{
+            if (current) setState({
+                status: 'error'
+            });
+        });
+        return ()=>{
+            current = false;
+        };
+    }, [
+        isOpen,
+        source
+    ]);
+    const data = 'ready' === state.status ? state.data : void 0;
+    const loaded = data?.rows.length ?? 0;
+    const window = pageWindow(loaded, pageSize, page);
+    const visible = data?.rows.slice(window.start, window.end) ?? [];
+    const truncated = null != data && data.total > loaded;
+    const caption = data ? [
+        0 === loaded ? void 0 : t('analytics.range', {
+            from: window.start + 1,
+            to: window.end,
+            total: loaded
+        }),
+        truncated ? t('analytics.topOf', {
+            shown: loaded,
+            total: data.total
+        }) : void 0
+    ].filter((value)=>null != value).join(' · ') : void 0;
+    return /*#__PURE__*/ jsx(Modal, {
+        isOpen: isOpen,
+        onDismiss: onDismiss,
+        closeOnOverlayClick: true,
+        children: /*#__PURE__*/ jsxs(Modal.Container, {
+            className: clsx('byline-analytics-modal', dashboard_module.modal),
+            children: [
+                /*#__PURE__*/ jsxs(Modal.Header, {
+                    children: [
+                        /*#__PURE__*/ jsx("h2", {
+                            children: title
+                        }),
+                        null != caption && caption.length > 0 && /*#__PURE__*/ jsx("p", {
+                            className: clsx('muted', 'byline-analytics-modal-caption', dashboard_module.modalCaption),
+                            children: caption
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(Modal.Content, {
+                    className: clsx('byline-analytics-modal-content', dashboard_module.modalContent),
+                    children: [
+                        'loading' === state.status && /*#__PURE__*/ jsxs("div", {
+                            role: "status",
+                            "aria-live": "polite",
+                            className: dashboard_module.modalStatus,
+                            children: [
+                                /*#__PURE__*/ jsx(LoaderRing, {
+                                    size: 28,
+                                    "aria-hidden": "true"
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: dashboard_module.srOnly,
+                                    children: t('common.loading')
+                                })
+                            ]
+                        }),
+                        'error' === state.status && /*#__PURE__*/ jsx("div", {
+                            role: "alert",
+                            children: /*#__PURE__*/ jsx(Alert, {
+                                intent: "danger",
+                                close: false,
+                                children: t('analytics.loadError')
+                            })
+                        }),
+                        null != data && 0 === loaded && /*#__PURE__*/ jsx("p", {
+                            className: "muted",
+                            children: t('analytics.empty')
+                        }),
+                        null != data && loaded > 0 && /*#__PURE__*/ jsx(RankingRows, {
+                            rows: visible,
+                            tone: tone,
+                            locale: locale
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(Modal.Actions, {
+                    className: clsx('byline-analytics-modal-actions', dashboard_module.modalActions),
+                    children: [
+                        window.pageCount > 1 ? /*#__PURE__*/ jsx(Pagination, {
+                            variant: "dashboard",
+                            count: window.pageCount,
+                            page: Math.min(page, window.pageCount),
+                            onChange: (_event, next)=>setPage(next),
+                            children: /*#__PURE__*/ jsx(Pagination.Root, {
+                                ariaLabel: t('analytics.pager'),
+                                children: /*#__PURE__*/ jsx(Pagination.Pager, {})
+                            })
+                        }) : /*#__PURE__*/ jsx("span", {}),
+                        /*#__PURE__*/ jsx(Button, {
+                            type: "button",
+                            size: "sm",
+                            variant: "outlined",
+                            onClick: onDismiss,
+                            children: t('common.actions.close')
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export { RankedListModal };

package/dist/modules/analytics/components/ranking.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 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
+ */
+/**
+ * Ranked-row rendering shared by the dashboard cards and the full-list
+ * modal, plus the small pure helpers both rely on.
+ */
+import type React from 'react';
+export type AnalyticsTone = 'views' | 'visitors' | 'downloads';
+export interface RankedRow {
+    key: string;
+    label: string;
+    value: number;
+    visitors: number;
+    overflow: boolean;
+}
+/** A complete ranking plus the size of the set it was drawn from. */
+export interface RankedListSource {
+    rows: RankedRow[];
+    total: number;
+}
+/** The ordered list with a share bar behind each row. Renders no card chrome. */
+export declare function RankingRows({ rows, tone, locale, }: {
+    rows: RankedRow[];
+    tone: AnalyticsTone;
+    locale: string;
+}): React.JSX.Element;
+/** Never collapse the bar entirely: a visible sliver still encodes "smallest". */
+export declare function shareWidth(value: number, ceiling: number): number;
+/** Row indices for one page of a list, with the page clamped into range. */
+export declare function pageWindow(total: number, pageSize: number, page: number): {
+    start: number;
+    end: number;
+    pageCount: number;
+};
+/**
+ * Localised region name for an ISO 3166-1 alpha-2 code, or the code itself
+ * when the value is not a code or the runtime has no name for it. The
+ * dashboard stores bare codes, so this is purely a display concern.
+ */
+export declare function regionName(code: string, locale: string): string;

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

@@ -0,0 +1,71 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useTranslation } from "@byline/i18n/react";
+import clsx from "clsx";
+import dashboard_module from "./dashboard.module.js";
+const TONE_BAR = {
+    views: dashboard_module.barViews,
+    visitors: dashboard_module.barVisitors,
+    downloads: dashboard_module.barDownloads
+};
+function RankingRows({ rows, tone, locale }) {
+    const { t } = useTranslation('byline-admin');
+    const numbers = useMemo(()=>new Intl.NumberFormat(locale), [
+        locale
+    ]);
+    const ceiling = Math.max(1, ...rows.map((row)=>row.value));
+    return /*#__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))
+    });
+}
+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 pageWindow(total, pageSize, page) {
+    const pageCount = Math.max(1, Math.ceil(total / pageSize));
+    const current = Math.min(Math.max(1, page), pageCount);
+    const start = (current - 1) * pageSize;
+    return {
+        start,
+        end: Math.min(total, start + pageSize),
+        pageCount
+    };
+}
+function regionName(code, locale) {
+    if (!/^[A-Za-z]{2}$/.test(code)) return code;
+    try {
+        const names = new Intl.DisplayNames([
+            locale
+        ], {
+            type: 'region',
+            fallback: 'none'
+        });
+        return names.of(code.toUpperCase()) ?? code;
+    } catch  {
+        return code;
+    }
+}
+export { RankingRows, pageWindow, regionName, shareWidth };

package/dist/modules/analytics/components/ranking.test.node.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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
+ */
+export {};