@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/stat-counter/index.ts

@@ -0,0 +1,337 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, onCleanup, reactive } from '@esportsplus/reactivity';
+import counter from '~/components/counter';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [STAT_COUNTER_CARD]?: Attributes;
+    [STAT_COUNTER_SLIDER]?: Attributes;
+    state?: State;
+    stats: Stat[];
+};
+
+type Stat = {
+    decimals?: number;
+    // Which direction is good news: latency going up is not.
+    goodWhen?: 'down' | 'up';
+    label: string;
+    prefix?: string;
+    series: number[];
+    suffix?: string;
+    // Change against the previous period as a fraction (0.12 is +12%); defaults to the last two points.
+    trend?: number;
+    // Defaults to the last point of the series.
+    value?: number;
+};
+
+type State = {
+    stats: Stat[];
+};
+
+
+const HEIGHT = 32;
+
+const STAT_COUNTER_CARD = Symbol.for('@esportsplus/ui/stat-counter.card');
+
+const STAT_COUNTER_SLIDER = Symbol.for('@esportsplus/ui/stat-counter.slider');
+
+const TREND = new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 1,
+    signDisplay: 'exceptZero',
+    style: 'percent'
+});
+
+const WIDTH = 120;
+
+
+function ago(days: number) {
+    return days === 0 ? 'Today' : days === 1 ? 'Yesterday' : `${days} days ago`;
+}
+
+function format(stat: Stat, value: number) {
+    let decimals = stat.decimals ?? 0;
+
+    return `${stat.prefix ?? ''}${value.toLocaleString('en-US', { maximumFractionDigits: decimals, minimumFractionDigits: decimals })}${stat.suffix ?? ''}`;
+}
+
+function path(series: number[]) {
+    return points(series).map((point, i) => `${i ? 'L' : 'M'}${point.x.toFixed(1)} ${point.y.toFixed(1)}`).join(' ');
+}
+
+function points(series: number[]) {
+    let max = Math.max(...series),
+        min = Math.min(...series),
+        span = max - min || 1;
+
+    // 2px inset so the line is never clipped at the extremes.
+    return series.map((value, i) => ({
+        x: (i / (series.length - 1)) * WIDTH,
+        y: 2 + (1 - (value - min) / span) * (HEIGHT - 4)
+    }));
+}
+
+function trendOf(stat: Stat) {
+    let series = stat.series;
+
+    return stat.trend ?? valueOf(stat) / series[series.length - 2] - 1;
+}
+
+function valueOf(stat: Stat) {
+    return stat.value ?? stat.series[stat.series.length - 1];
+}
+
+
+function template(this: { attributes?: Partial<A> } | void, { state, stats, ...attributes }: A) {
+    let inherited = this?.attributes,
+        observer: IntersectionObserver | undefined,
+        s = state ?? reactive({ stats });
+
+    function card(index: number) {
+        let initial = s.stats[index],
+            number = reactive({ value: valueOf(initial) }),
+            previous = '',
+            text: HTMLElement | undefined,
+            view = reactive({ scrub: null as number | null });
+
+        function current() {
+            return s.stats[index];
+        }
+
+        function last() {
+            return current().series.length - 1;
+        }
+
+        function pick(e: PointerEvent) {
+            let box = (e.currentTarget as HTMLElement).getBoundingClientRect(),
+                t = Math.min(Math.max((e.clientX - box.left) / box.width, 0), 1);
+
+            view.scrub = Math.round(t * last());
+        }
+
+        function point() {
+            let scrub = view.scrub;
+
+            return scrub === null ? null : points(current().series)[scrub];
+        }
+
+        function shown() {
+            let scrub = view.scrub;
+
+            return scrub === null ? valueOf(current()) : current().series[scrub];
+        }
+
+        function up() {
+            return trendOf(current()) >= 0;
+        }
+
+        let stopNumber = effect(() => {
+            number.value = shown();
+        });
+
+        // Fades in from a soft blur whenever the figure changes, rather than snapping.
+        let stopTrend = effect(() => {
+            let next = TREND.format(trendOf(current()));
+
+            if (previous && previous !== next) {
+                text?.animate(
+                    [{ filter: 'blur(4px)', opacity: 0 }, { filter: 'blur(0px)', opacity: 1 }],
+                    { duration: 200, easing: 'ease-out' }
+                );
+            }
+
+            previous = next;
+        });
+
+        onCleanup(() => {
+            stopNumber();
+            stopTrend();
+        });
+
+        return html`
+            <div
+                class='stat-counter-card ${() => view.scrub !== null && '--scrubbing'} ${() => view.scrub !== null && view.scrub !== last() && '--past'}'
+                style='--index: ${index}'
+                ${inherited?.[STAT_COUNTER_CARD]}
+                ${attributes[STAT_COUNTER_CARD]}
+            >
+                <dt class='stat-counter-label'>${() => current().label}</dt>
+                <dd class='stat-counter-body'>
+                    <span class='stat-counter-sr'>${() => `${format(current(), valueOf(current()))}, ${TREND.format(trendOf(current()))}`}</span>
+                    <span aria-hidden='true' class='stat-counter-value'>
+                        <span class='stat-counter-affix'>${() => current().prefix ?? ''}</span>
+                        ${counter({
+                            class: 'counter--ticker stat-counter-counter',
+                            currency: 'IGNORE',
+                            decimals: initial.decimals ?? 0,
+                            delay: 0,
+                            startOnView: true,
+                            state: number,
+                            value: valueOf(initial)
+                        })}
+                        <span class='stat-counter-affix'>${() => current().suffix ?? ''}</span>
+                    </span>
+                    <span aria-hidden='true' class='stat-counter-chips'>
+                        <span class='stat-counter-chip stat-counter-trend ${() => up() !== ((current().goodWhen ?? 'up') === 'up') && '--bad'} ${() => !up() && '--down'} ${() => view.scrub !== null && '--hidden'}'>
+                            <svg
+                                class='stat-counter-arrow'
+                                fill='none'
+                                stroke='currentColor'
+                                stroke-linecap='round'
+                                stroke-linejoin='round'
+                                stroke-width='1.5'
+                                viewBox='0 0 12 12'
+                            >
+                                <path d='M6 9.5v-7M3 5.5l3-3 3 3' />
+                            </svg>
+                            <span ${{ onrender: (element: HTMLElement) => { text = element; } }}>
+                                ${() => TREND.format(trendOf(current()))}
+                            </span>
+                        </span>
+                        <span class='stat-counter-chip stat-counter-when ${() => view.scrub === null && '--hidden'}'>
+                            ${() => ago(last() - (view.scrub ?? last()))}
+                        </span>
+                    </span>
+                    <div
+                        aria-valuemin='0'
+                        class='stat-counter-slider'
+                        role='slider'
+                        tabindex='0'
+                        ${inherited?.[STAT_COUNTER_SLIDER]}
+                        ${attributes[STAT_COUNTER_SLIDER]}
+                        ${{
+                            'aria-label': () => `${current().label} history`,
+                            'aria-valuemax': () => String(last()),
+                            'aria-valuenow': () => String(view.scrub ?? last()),
+                            'aria-valuetext': () => `${format(current(), shown())}, ${ago(last() - (view.scrub ?? last()))}`,
+                            onblur: () => {
+                                view.scrub = null;
+                            },
+                            onkeydown: (e: KeyboardEvent) => {
+                                let end = last(),
+                                    now = view.scrub ?? end,
+                                    next = ({
+                                        ArrowLeft: now - 1,
+                                        ArrowRight: now + 1,
+                                        End: end,
+                                        Escape: end,
+                                        Home: 0
+                                    } as Record<string, number>)[e.key];
+
+                                if (next === undefined) {
+                                    return;
+                                }
+
+                                e.preventDefault();
+                                next = Math.min(Math.max(next, 0), end);
+                                view.scrub = next === end ? null : next;
+                            },
+                            onpointercancel: () => {
+                                view.scrub = null;
+                            },
+                            // Touch scrubs by dragging along the line.
+                            onpointerdown: (e: PointerEvent) => {
+                                (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+                                pick(e);
+                            },
+                            onpointerleave: (e: PointerEvent) => {
+                                if (!(e.currentTarget as HTMLElement).hasPointerCapture(e.pointerId)) {
+                                    view.scrub = null;
+                                }
+                            },
+                            onpointermove: (e: PointerEvent) => {
+                                if (e.pointerType === 'mouse' || e.buttons) {
+                                    pick(e);
+                                }
+                            },
+                            onpointerup: (e: PointerEvent) => {
+                                if (e.pointerType !== 'mouse') {
+                                    view.scrub = null;
+                                }
+                            }
+                        }}
+                    >
+                        <div aria-hidden='true' class='stat-counter-spark'>
+                            <svg class='stat-counter-line' preserveAspectRatio='none' viewBox='0 0 ${WIDTH} ${HEIGHT}'>
+                                <path
+                                    d='${() => path(current().series)}'
+                                    fill='none'
+                                    stroke='currentColor'
+                                    stroke-linecap='round'
+                                    stroke-linejoin='round'
+                                    stroke-width='1.5'
+                                    style='${() => `d: path('${path(current().series)}')`}'
+                                    vector-effect='non-scaling-stroke'
+                                />
+                            </svg>
+                            <svg
+                                class='stat-counter-line stat-counter-line--past'
+                                preserveAspectRatio='none'
+                                style='${() => {
+                                    let scrub = view.scrub;
+
+                                    return `clip-path: inset(-4px ${scrub === null ? 0 : (1 - scrub / last()) * 100}% -4px -4px)`;
+                                }}'
+                                viewBox='0 0 ${WIDTH} ${HEIGHT}'
+                            >
+                                <path
+                                    d='${() => path(current().series)}'
+                                    fill='none'
+                                    stroke='currentColor'
+                                    stroke-linecap='round'
+                                    stroke-linejoin='round'
+                                    stroke-width='1.5'
+                                    style='${() => `d: path('${path(current().series)}')`}'
+                                    vector-effect='non-scaling-stroke'
+                                />
+                            </svg>
+                            <span
+                                class='stat-counter-cursor'
+                                style='${() => `left: ${((point()?.x ?? WIDTH) / WIDTH) * 100}%`}'
+                            ></span>
+                            <span
+                                class='stat-counter-dot'
+                                style='${() => {
+                                    let at = point();
+
+                                    return `left: ${((at?.x ?? WIDTH) / WIDTH) * 100}%; top: ${((at?.y ?? HEIGHT / 2) / HEIGHT) * 100}%`;
+                                }}'
+                            ></span>
+                        </div>
+                    </div>
+                </dd>
+            </div>
+        `;
+    }
+
+    onCleanup(() => {
+        observer?.disconnect();
+    });
+
+    return html`
+        <div class='stat-counter' ${inherited} ${attributes}>
+            <dl
+                class='stat-counter-list'
+                ${{
+                    onconnect: (element: HTMLElement) => {
+                        observer = new IntersectionObserver((entries) => {
+                            if (!entries.some((entry) => entry.isIntersecting)) {
+                                return;
+                            }
+
+                            observer?.disconnect();
+                            element.classList.add('--started');
+                        }, { threshold: 0.5 });
+                        observer.observe(element);
+                    }
+                }}
+            >
+                ${stats.map((_, index) => card(index))}
+            </dl>
+        </div>
+    `;
+}
+
+
+export default Object.assign(template, { card: STAT_COUNTER_CARD, slider: STAT_COUNTER_SLIDER } as const);
+export type { Stat as StatCounterStat, State as StatCounterState };

package/src/components/stat-counter/scss/index.scss

@@ -0,0 +1,246 @@
+@use 'variables';
+
+.stat-counter {
+    color: var(--color);
+    container-type: inline-size;
+    max-width: 100%;
+    width: var(--width);
+
+
+    &-affix {
+        white-space: pre;
+    }
+
+    &-arrow {
+        height: 12px;
+        transition: rotate 0.2s var(--ease-out);
+        width: 12px;
+    }
+
+    &-body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--grid-gap);
+        margin: 0;
+        min-width: 0;
+    }
+
+    &-card {
+        background: var(--card-background);
+        border-radius: var(--card-radius);
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        min-width: 0;
+        padding: var(--card-padding);
+    }
+
+    &-chip {
+        align-items: center;
+        align-self: start;
+        background: var(--chip-background);
+        border-radius: 999px;
+        display: inline-flex;
+        font-size: var(--font-size-300);
+        font-variant-numeric: tabular-nums;
+        font-weight: var(--font-weight-500);
+        gap: 4px;
+        grid-area: 1 / 1;
+        line-height: 24px;
+        padding-inline: 8px;
+        transition:
+            filter 0.2s ease-out,
+            opacity 0.2s ease-out;
+        white-space: nowrap;
+
+        &.--hidden {
+            filter: blur(4px);
+            opacity: 0;
+            transition-duration: 0.1s;
+        }
+    }
+
+    // Trend and date share one cell and swap through a blur, so the chip never jumps in width mid-scrub.
+    &-chips {
+        align-self: start;
+        display: grid;
+        height: 24px;
+    }
+
+    // Qualified by the root so the roll timing beats the reused ticker's own.
+    & &-counter {
+        --font-weight: var(--value-font-weight);
+        --stagger: 0s;
+        --transition-duration: var(--count-duration);
+        --timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+    }
+
+    &-card.--scrubbing &-counter {
+        --transition-duration: var(--scrub-duration);
+    }
+
+    &-cursor {
+        background: color-mix(in oklab, var(--color-text-500) 20%, transparent);
+        inset-block: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        transition:
+            left 0.15s ease-out,
+            opacity 0.15s ease-out;
+        width: 1px;
+    }
+
+    &-dot {
+        background: var(--color);
+        border-radius: 50%;
+        box-shadow: 0 0 0 2px var(--card-background);
+        height: 7px;
+        margin: -3.5px 0 0 -3.5px;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        scale: 0.5;
+        transition:
+            left 0.15s ease-out,
+            opacity 0.15s ease-out,
+            scale 0.15s ease-out,
+            top 0.15s ease-out;
+        width: 7px;
+    }
+
+    &-label {
+        color: var(--muted-color);
+        font-size: var(--label-font-size);
+    }
+
+    &-line {
+        color: var(--line-color);
+        height: 100%;
+        inset: 0;
+        overflow: visible;
+        position: absolute;
+        transition: opacity 0.15s ease-out;
+        width: 100%;
+
+        path {
+            transition: d 0.5s var(--ease-out);
+        }
+
+        // The same line again, clipped at the inspected point, so everything up to it stays at full strength.
+        &--past {
+            opacity: 0;
+            transition:
+                clip-path 0.15s ease-out,
+                opacity 0.15s ease-out;
+        }
+    }
+
+    // Four across when there's room, two by two on a phone.
+    &-list {
+        display: grid;
+        gap: var(--grid-gap);
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        margin: 0;
+
+        @container (min-width: 560px) {
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+        }
+
+        &.--started .stat-counter-spark {
+            clip-path: inset(-4px);
+        }
+    }
+
+    // A few px of padding widens the target without moving the line.
+    &-slider {
+        border-radius: var(--border-radius-400);
+        cursor: ew-resize;
+        margin: -4px;
+        outline: none;
+        padding: 4px;
+        touch-action: pan-y;
+        user-select: none;
+
+        &:focus-visible {
+            outline: 2px solid var(--focus-color);
+        }
+    }
+
+    // Wipes in left to right, the direction time runs along the line.
+    &-spark {
+        clip-path: inset(-4px 100% -4px -4px);
+        height: 32px;
+        position: relative;
+        transition: clip-path var(--wipe-duration) var(--ease-out) calc(var(--index) * var(--stagger));
+        width: 100%;
+    }
+
+    &-sr {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-trend {
+        &.--bad {
+            color: var(--bad-color);
+        }
+
+        &.--down .stat-counter-arrow {
+            rotate: 180deg;
+        }
+    }
+
+    // Muted while it shows the past, so a glance never mistakes an old figure for today's.
+    &-value {
+        display: flex;
+        font-size: var(--value-font-size);
+        font-variant-numeric: tabular-nums;
+        font-weight: var(--value-font-weight);
+        letter-spacing: -0.025em;
+        line-height: 1.25;
+        overflow: hidden;
+        transition: color 0.15s ease-out;
+        white-space: nowrap;
+
+        .stat-counter-card.--past & {
+            color: var(--muted-color);
+        }
+    }
+
+    &-when {
+        color: var(--muted-color);
+    }
+
+    &-card.--scrubbing {
+        .stat-counter-cursor {
+            opacity: 1;
+        }
+
+        .stat-counter-dot {
+            opacity: 1;
+            scale: 1;
+        }
+
+        .stat-counter-line {
+            opacity: 0.3;
+        }
+
+        .stat-counter-line--past {
+            opacity: 1;
+        }
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+        &-arrow,
+        &-line path,
+        &-spark {
+            transition: none;
+        }
+    }
+}

package/src/components/stat-counter/scss/variables.scss

@@ -0,0 +1,24 @@
+.stat-counter {
+    --bad-color: var(--color-red-500);
+    --card-background: var(--color-grey-400);
+    --card-padding: var(--size-400);
+    --card-radius: var(--border-radius-700);
+    --chip-background: var(--color-white-300);
+    --color: var(--color-text-500);
+    // Long enough to read as counting; shorter and the number just blinks to its value.
+    --count-duration: 0.7s;
+    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+    --focus-color: var(--color-text-500);
+    --grid-gap: 12px;
+    --label-font-size: var(--font-size-300);
+    --line-color: color-mix(in oklab, var(--color-text-500) 60%, transparent);
+    --muted-color: var(--color-text-300);
+    // Scrubbing glides faster, so the number keeps up with the finger but still counts.
+    --scrub-duration: 0.3s;
+    // Cards wipe their sparklines in one after another.
+    --stagger: 50ms;
+    --value-font-size: var(--font-size-600);
+    --value-font-weight: var(--font-weight-600);
+    --width: 600px;
+    --wipe-duration: 0.5s;
+}