@byline/admin 4.14.1 → 4.16.0

package/dist/modules/analytics/components/dashboard_module.css

@@ -0,0 +1,268 @@
+:is(.header-zAoAGd, .byline-analytics-header) {
+  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 1rem 1.5rem;
+  margin-bottom: 1.25rem;
+  padding-bottom: 1rem;
+  display: flex;
+}
+
+:is(.title-ZhxB2D, .byline-analytics-title) {
+  letter-spacing: -.02em;
+  margin: 0;
+  font-size: 1.875rem;
+  font-weight: 650;
+}
+
+:is(.help-HT9JOI, .byline-analytics-help) {
+  max-width: 48ch;
+  margin: .35rem 0 0;
+  font-size: .8125rem;
+}
+
+:is(.chartCard-NaXVMm .byline-card-title, .list-sR__nc .byline-card-title) {
+  letter-spacing: normal;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+:is(.chartCard-NaXVMm .byline-card-description, .list-sR__nc .byline-card-description) {
+  font-size: .75rem;
+}
+
+:is(.controls-_Alpbi, .byline-analytics-controls) {
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .75rem;
+  display: flex;
+}
+
+:is(.stats-u3kcTH, .byline-analytics-stats) {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: .75rem;
+  margin-bottom: .75rem;
+  display: grid;
+}
+
+:is(.stat-KhSBeS, .byline-analytics-stat) {
+  border-radius: .375rem;
+  flex-direction: column;
+  gap: .5rem;
+  min-width: 0;
+  padding: 1rem 1.125rem 1.125rem;
+  display: flex;
+}
+
+:is(.statLabel-X0_tdu, .byline-analytics-stat-label) {
+  text-transform: uppercase;
+  letter-spacing: .1em;
+  font-size: .625rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+:is(.statValue-D32ine, .byline-analytics-stat-value) {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -.02em;
+  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
+  font-weight: 700;
+  line-height: 1;
+}
+
+:is(.statFoot-yvtZiS, .byline-analytics-stat-foot) {
+  font-variant-numeric: tabular-nums;
+  color: var(--gray-600);
+  font-size: .6875rem;
+}
+
+.toneViews-QGWabX {
+  background-color: #f0f9ff;
+}
+
+.toneViews-QGWabX .statLabel-X0_tdu, .toneViews-QGWabX .statValue-D32ine {
+  color: #0369a1;
+}
+
+.toneVisitors-GTLZDo {
+  background-color: #f5f3ff;
+}
+
+.toneVisitors-GTLZDo .statLabel-X0_tdu, .toneVisitors-GTLZDo .statValue-D32ine {
+  color: #6d28d9;
+}
+
+.toneDownloads-WuDN7n {
+  background-color: #ecfdf5;
+}
+
+.toneDownloads-WuDN7n .statLabel-X0_tdu, .toneDownloads-WuDN7n .statValue-D32ine {
+  color: #047857;
+}
+
+:is(:is([data-theme="dark"], .dark) .statFoot-yvtZiS, :is([data-theme="dark"], .dark) .byline-analytics-stat-foot) {
+  color: var(--gray-400);
+}
+
+:is([data-theme="dark"], .dark) .toneViews-QGWabX {
+  background-color: #0c4a6e47;
+}
+
+:is([data-theme="dark"], .dark) .toneViews-QGWabX .statLabel-X0_tdu, :is([data-theme="dark"], .dark) .toneViews-QGWabX .statValue-D32ine {
+  color: #7dd3fc;
+}
+
+:is([data-theme="dark"], .dark) .toneVisitors-GTLZDo {
+  background-color: #4c1d954d;
+}
+
+:is([data-theme="dark"], .dark) .toneVisitors-GTLZDo .statLabel-X0_tdu, :is([data-theme="dark"], .dark) .toneVisitors-GTLZDo .statValue-D32ine {
+  color: #c4b5fd;
+}
+
+:is([data-theme="dark"], .dark) .toneDownloads-WuDN7n {
+  background-color: #064e3b47;
+}
+
+:is([data-theme="dark"], .dark) .toneDownloads-WuDN7n .statLabel-X0_tdu, :is([data-theme="dark"], .dark) .toneDownloads-WuDN7n .statValue-D32ine {
+  color: #6ee7b7;
+}
+
+:is(.chartCard-NaXVMm, .byline-analytics-chart-card) {
+  margin-bottom: .75rem;
+}
+
+:is(.lists-BLqFfy, .byline-analytics-lists) {
+  grid-template-columns: 1.55fr 1fr;
+  align-items: start;
+  gap: .75rem;
+  margin-bottom: .75rem;
+  display: grid;
+}
+
+.stack-Yzch8f {
+  flex-direction: column;
+  gap: .75rem;
+  display: flex;
+}
+
+:is(.ranking-yfNSnw, .byline-analytics-ranking) {
+  flex-direction: column;
+  gap: 1px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+:is(.rankingRow-CH1cHn, .byline-analytics-ranking-row) {
+  isolation: isolate;
+  border-radius: .25rem;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: .75rem;
+  padding: .45rem .625rem;
+  display: grid;
+  position: relative;
+}
+
+.rankingRow-CH1cHn:before {
+  content: "";
+  z-index: -1;
+  width: var(--byline-analytics-share, 0%);
+  background-color: var(--byline-analytics-bar, transparent);
+  opacity: .16;
+  border-radius: .25rem;
+  position: absolute;
+  inset: 0 auto 0 0;
+}
+
+.barViews-E6VuaR {
+  --byline-analytics-bar: #38bdf8;
+}
+
+.barVisitors-eIANXw {
+  --byline-analytics-bar: #7c3aed;
+}
+
+.barDownloads-Z50NxT {
+  --byline-analytics-bar: #10b981;
+}
+
+.rankingOverflow-hUQMKU {
+  border: var(--border-width-thin) dashed var(--gray-300);
+}
+
+.rankingOverflow-hUQMKU:before {
+  opacity: .07;
+}
+
+.rankingOverflow-hUQMKU .rankingLabel-wsuniC {
+  color: var(--gray-600);
+  font-style: italic;
+}
+
+.rankingLabel-wsuniC {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  font-size: .8125rem;
+  overflow: hidden;
+}
+
+.rankingValue-i_vmgf {
+  font-variant-numeric: tabular-nums;
+  font-size: .8125rem;
+  font-weight: 600;
+}
+
+.rankingVisitors-NZl_jj {
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+  min-width: 3ch;
+  color: var(--gray-500);
+  font-size: .6875rem;
+}
+
+:is(:is([data-theme="dark"], .dark) .header-zAoAGd, :is([data-theme="dark"], .dark) .byline-analytics-header) {
+  border-bottom-color: var(--gray-700);
+}
+
+:is([data-theme="dark"], .dark) .rankingVisitors-NZl_jj {
+  color: var(--gray-400);
+}
+
+:is([data-theme="dark"], .dark) .rankingOverflow-hUQMKU {
+  border-color: var(--gray-600);
+}
+
+:is([data-theme="dark"], .dark) .rankingOverflow-hUQMKU .rankingLabel-wsuniC {
+  color: var(--gray-400);
+}
+
+:is([data-theme="dark"], .dark) .barVisitors-eIANXw {
+  --byline-analytics-bar: #a78bfa;
+}
+
+:is([data-theme="dark"], .dark) .barDownloads-Z50NxT {
+  --byline-analytics-bar: #34d399;
+}
+
+@media (max-width: 900px) {
+  :is(.lists-BLqFfy, .byline-analytics-lists) {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  :is(.header-zAoAGd, .byline-analytics-header) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  :is(.stats-u3kcTH, .byline-analytics-stats) {
+    grid-template-columns: 1fr;
+  }
+}
+

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

@@ -0,0 +1,59 @@
+/**
+ * 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
+ */
+/**
+ * The analytics timeseries — one column per explicit UTC reporting bucket.
+ *
+ * A column rather than a continuous line is a claim about the data, not a
+ * style: the rows behind this chart are sums of daily aggregates and visitor
+ * hashes rotate at UTC midnight, so nothing is measured between two points.
+ * The dashboard selects the granularity and passes it into this renderer;
+ * the chart never guesses from the number of rows.
+ */
+import type React from 'react';
+import type { AnalyticsSummaryDay } from '@byline/analytics';
+import type { AnalyticsDashboardPeriod } from '@byline/analytics/config';
+export type AnalyticsChartGranularity = 'day' | 'seven-day' | 'month';
+export interface AnalyticsChartBucket {
+    from: string;
+    to: string;
+    granularity: AnalyticsChartGranularity;
+    /** Actual number of daily rows, including partial first or last buckets. */
+    dayCount: number;
+    views: number;
+    /** Sum of the bucket's daily-unique visitor values. */
+    visitors: number;
+    downloads: number;
+}
+export interface AnalyticsColumn {
+    index: number;
+    /** Full-height mark: that bucket's page views. */
+    x: number;
+    width: number;
+    y: number;
+    height: number;
+    /** Inset mark: summed daily uniques, always no greater than views. */
+    insetX: number;
+    insetWidth: number;
+    insetY: number;
+    insetHeight: number;
+    /** Full-height transparent target, so narrow columns stay easy to hit. */
+    hitX: number;
+    hitWidth: number;
+}
+/** Resolve chart density outside the renderer so the chosen width is explicit. */
+export declare function resolveAnalyticsChartGranularity(period: AnalyticsDashboardPeriod, dayCount: number): AnalyticsChartGranularity;
+/** Combine complete daily query rows using the caller-selected granularity. */
+export declare function bucketAnalyticsTimeseries(days: readonly AnalyticsSummaryDay[], granularity: AnalyticsChartGranularity): readonly AnalyticsChartBucket[];
+/** Project reporting buckets into column geometry. */
+export declare function buildAnalyticsColumns(buckets: readonly Pick<AnalyticsChartBucket, 'views' | 'visitors'>[]): readonly AnalyticsColumn[];
+export interface AnalyticsTimeseriesProps {
+    days: readonly AnalyticsSummaryDay[];
+    granularity: AnalyticsChartGranularity;
+    locale: string;
+}
+export declare function AnalyticsTimeseries({ days, granularity, locale, }: AnalyticsTimeseriesProps): React.JSX.Element;

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

@@ -0,0 +1,253 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { useTranslation } from "@byline/i18n/react";
+import clsx from "clsx";
+import timeseries_module from "./timeseries.module.js";
+const VIEWBOX_WIDTH = 900;
+const VIEWBOX_HEIGHT = 180;
+const COLUMN_GAP_RATIO = 0.38;
+const MAX_COLUMN_WIDTH = 26;
+function resolveAnalyticsChartGranularity(period, dayCount) {
+    if ('number' == typeof period || 'all' === period && dayCount <= 90) return 'day';
+    if ('ytd' === period || dayCount <= 732) return 'seven-day';
+    return 'month';
+}
+function bucketAnalyticsTimeseries(days, granularity) {
+    if ('day' === granularity) return days.map((day)=>({
+            from: day.day,
+            to: day.day,
+            granularity,
+            dayCount: 1,
+            views: day.views,
+            visitors: day.visitors,
+            downloads: day.downloads
+        }));
+    if ('seven-day' === granularity) return bucketBySevenDays(days);
+    return bucketByUtcMonth(days);
+}
+function buildAnalyticsColumns(buckets) {
+    if (0 === buckets.length) return [];
+    const ceiling = Math.max(1, ...buckets.map((bucket)=>bucket.views));
+    const step = VIEWBOX_WIDTH / buckets.length;
+    const width = Math.max(2, Math.min(step * (1 - COLUMN_GAP_RATIO), MAX_COLUMN_WIDTH));
+    return buckets.map((bucket, index)=>{
+        const centre = index * step + step / 2;
+        const height = bucket.views / ceiling * VIEWBOX_HEIGHT;
+        const insetHeight = bucket.visitors / ceiling * VIEWBOX_HEIGHT;
+        const insetWidth = Math.max(1, width / 2);
+        return {
+            index,
+            x: centre - width / 2,
+            width,
+            y: VIEWBOX_HEIGHT - height,
+            height,
+            insetX: centre - insetWidth / 2,
+            insetWidth,
+            insetY: VIEWBOX_HEIGHT - insetHeight,
+            insetHeight,
+            hitX: index * step,
+            hitWidth: step
+        };
+    });
+}
+function AnalyticsTimeseries({ days, granularity, locale }) {
+    const { t } = useTranslation('byline-admin');
+    const [hovered, setHovered] = useState(null);
+    const plot = useRef(null);
+    const buckets = useMemo(()=>bucketAnalyticsTimeseries(days, granularity), [
+        days,
+        granularity
+    ]);
+    const columns = useMemo(()=>buildAnalyticsColumns(buckets), [
+        buckets
+    ]);
+    const numbers = useMemo(()=>new Intl.NumberFormat(locale), [
+        locale
+    ]);
+    const dayLabel = useMemo(()=>new Intl.DateTimeFormat(locale, {
+            month: 'short',
+            day: 'numeric',
+            timeZone: 'UTC'
+        }), [
+        locale
+    ]);
+    const formatDay = (day)=>dayLabel.format(new Date(`${day}T00:00:00.000Z`));
+    const formatBucket = (bucket)=>1 === bucket.dayCount ? formatDay(bucket.from) : `${formatDay(bucket.from)} – ${formatDay(bucket.to)}`;
+    const visitorLabel = (bucket)=>'day' === bucket.granularity ? t('analytics.stats.dailyUniques') : t('analytics.stats.summedDailyUniques');
+    const active = null == hovered ? void 0 : buckets[hovered];
+    const readBucket = (bucket)=>[
+            formatBucket(bucket),
+            `${t('analytics.stats.views')} ${numbers.format(bucket.views)}`,
+            `${visitorLabel(bucket)} ${numbers.format(bucket.visitors)}`,
+            `${t('analytics.stats.downloads')} ${numbers.format(bucket.downloads)}`
+        ].join(', ');
+    const trackPointer = (event)=>{
+        if (0 === buckets.length || null == plot.current) return;
+        const bounds = plot.current.getBoundingClientRect();
+        if (0 === bounds.width) return;
+        const ratio = (event.clientX - bounds.left) / bounds.width;
+        setHovered(Math.min(buckets.length - 1, Math.max(0, Math.floor(ratio * buckets.length))));
+    };
+    const trackKey = (event)=>{
+        if (0 === buckets.length) return;
+        const step = 'ArrowRight' === event.key ? 1 : 'ArrowLeft' === event.key ? -1 : 0;
+        if (0 === step && 'Home' !== event.key && 'End' !== event.key && 'Escape' !== event.key) return;
+        event.preventDefault();
+        if ('Escape' === event.key) return setHovered(null);
+        if ('Home' === event.key) return setHovered(0);
+        if ('End' === event.key) return setHovered(buckets.length - 1);
+        setHovered((current)=>{
+            const next = (current ?? (step > 0 ? -1 : buckets.length)) + step;
+            return Math.min(buckets.length - 1, Math.max(0, next));
+        });
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsx('byline-analytics-timeseries', timeseries_module.root),
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": t('analytics.chart.views'),
+        "aria-valuemin": 0,
+        "aria-valuemax": Math.max(0, buckets.length - 1),
+        "aria-valuenow": hovered ?? 0,
+        "aria-valuetext": null == active ? t('analytics.chart.hint') : readBucket(active),
+        onPointerMove: trackPointer,
+        onPointerLeave: ()=>setHovered(null),
+        onKeyDown: trackKey,
+        onBlur: ()=>setHovered(null),
+        children: [
+            /*#__PURE__*/ jsxs("svg", {
+                ref: plot,
+                className: clsx('byline-analytics-chart', timeseries_module.chart),
+                viewBox: `0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`,
+                preserveAspectRatio: "none",
+                "aria-hidden": "true",
+                children: [
+                    /*#__PURE__*/ jsx("title", {
+                        children: t('analytics.chart.views')
+                    }),
+                    [
+                        0.5,
+                        1
+                    ].map((fraction)=>/*#__PURE__*/ jsx("line", {
+                            className: timeseries_module.gridline,
+                            x1: 0,
+                            x2: VIEWBOX_WIDTH,
+                            y1: VIEWBOX_HEIGHT - VIEWBOX_HEIGHT * fraction,
+                            y2: VIEWBOX_HEIGHT - VIEWBOX_HEIGHT * fraction,
+                            vectorEffect: "non-scaling-stroke"
+                        }, fraction)),
+                    columns.map((column)=>/*#__PURE__*/ jsxs("g", {
+                            className: clsx(timeseries_module.column, hovered === column.index && timeseries_module.columnActive),
+                            children: [
+                                /*#__PURE__*/ jsx("rect", {
+                                    className: timeseries_module.views,
+                                    x: column.x,
+                                    width: column.width,
+                                    y: column.y,
+                                    height: column.height
+                                }),
+                                /*#__PURE__*/ jsx("rect", {
+                                    className: timeseries_module.visitors,
+                                    x: column.insetX,
+                                    width: column.insetWidth,
+                                    y: column.insetY,
+                                    height: column.insetHeight
+                                })
+                            ]
+                        }, buckets[column.index]?.from))
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: clsx('byline-analytics-axis', timeseries_module.axis),
+                "aria-hidden": "true",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        children: buckets.length > 0 && null != buckets[0] ? formatDay(buckets[0].from) : ''
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        children: buckets.length > 0 && null != buckets[buckets.length - 1] ? formatDay(buckets[buckets.length - 1]?.to ?? '') : ''
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("p", {
+                className: clsx('byline-analytics-readout', timeseries_module.readout),
+                "aria-live": "polite",
+                children: null == active ? t('analytics.chart.hint') : /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx("strong", {
+                            children: formatBucket(active)
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            className: timeseries_module.swatchViews
+                        }),
+                        t('analytics.stats.views'),
+                        " ",
+                        numbers.format(active.views),
+                        /*#__PURE__*/ jsx("span", {
+                            className: timeseries_module.swatchVisitors
+                        }),
+                        visitorLabel(active),
+                        " ",
+                        numbers.format(active.visitors),
+                        /*#__PURE__*/ jsx("span", {
+                            className: timeseries_module.swatchDownloads
+                        }),
+                        t('analytics.stats.downloads'),
+                        " ",
+                        numbers.format(active.downloads)
+                    ]
+                })
+            })
+        ]
+    });
+}
+function bucketBySevenDays(days) {
+    const buckets = [];
+    for(let index = 0; index < days.length; index += 7){
+        const rows = days.slice(index, index + 7);
+        const first = rows[0];
+        const last = rows[rows.length - 1];
+        if (null != first && null != last) buckets.push(combineRows(first.day, last.day, 'seven-day', rows));
+    }
+    return buckets;
+}
+function bucketByUtcMonth(days) {
+    const buckets = [];
+    let rows = [];
+    let month;
+    const flush = ()=>{
+        const first = rows[0];
+        const last = rows[rows.length - 1];
+        if (null != first && null != last) buckets.push(combineRows(first.day, last.day, 'month', rows));
+        rows = [];
+    };
+    for (const day of days){
+        const nextMonth = day.day.slice(0, 7);
+        if (null != month && nextMonth !== month) flush();
+        month = nextMonth;
+        rows.push(day);
+    }
+    flush();
+    return buckets;
+}
+function combineRows(from, to, granularity, rows) {
+    let views = 0;
+    let visitors = 0;
+    let downloads = 0;
+    for (const row of rows){
+        views += row.views;
+        visitors += row.visitors;
+        downloads += row.downloads;
+    }
+    return {
+        from,
+        to,
+        granularity,
+        dayCount: rows.length,
+        views,
+        visitors,
+        downloads
+    };
+}
+export { AnalyticsTimeseries, bucketAnalyticsTimeseries, buildAnalyticsColumns, resolveAnalyticsChartGranularity };

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

@@ -0,0 +1,17 @@
+import "./timeseries_module.css";
+const timeseries_module = {
+    root: "root-L2qL4D",
+    chart: "chart-giYTrx",
+    gridline: "gridline-R_wAwP",
+    column: "column-_Cw2Ua",
+    views: "views-WHbm44",
+    columnActive: "columnActive-CwHwbo",
+    visitors: "visitors-n6IL4B",
+    hit: "hit-ZxDHvk",
+    axis: "axis-fBshTw",
+    readout: "readout-L9jEpz",
+    swatchViews: "swatchViews-OCeKNe",
+    swatchVisitors: "swatchVisitors-O3BWz6",
+    swatchDownloads: "swatchDownloads-SVo9mN"
+};
+export default timeseries_module;