@esportsplus/ui 0.56.4 → 0.57.0

package/src/components/marquee/velocity.ts

@@ -0,0 +1,144 @@
+type Tracker = {
+    // Smoothed velocity mapped to a speed boost: signed, capped at MAX_FACTOR.
+    factor: number;
+    // Last raw scroll sample.
+    position: number;
+    release: (wake: VoidFunction) => void;
+    // Spring state: the smoothed velocity and its rate of change.
+    smooth: number;
+    smoothRate: number;
+    // Frame the spring last advanced on, so marquees sharing a tracker step it once.
+    stepped: number;
+    time: number;
+    // Raw velocity in px/s from the last two scroll events.
+    velocity: number;
+    // One per marquee using it: a scroll restarts a marquee whose loop is asleep.
+    wakes: Set<VoidFunction>;
+};
+
+
+// Spring that smooths raw scroll velocity, so the marquee eases into and out of a burst instead of jumping.
+const DAMPING = 50;
+
+const MAX_FACTOR = 5;
+
+// Scroll events stop arriving when scrolling stops, so a quiet gap this long means the velocity is zero.
+const SETTLE = 50;
+
+const STIFFNESS = 400;
+
+// Sub-step for the spring; a stiff spring stepped once per slow frame would overshoot and blow up.
+const SUBSTEP = 1 / 240;
+
+
+// Every marquee on one scroller shares a tracker, so they stay in step however many there are.
+let trackers = new Map<EventTarget, Tracker>();
+
+
+function offset(scroller: EventTarget) {
+    return scroller instanceof Element ? scroller.scrollTop : window.scrollY;
+}
+
+// The nearest ancestor that scrolls vertically, else the window.
+function scroller(element: HTMLElement): EventTarget {
+    let node = element.parentElement;
+
+    while (node && node !== document.body && node !== document.documentElement) {
+        let overflow = getComputedStyle(node).overflowY;
+
+        if (overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay') {
+            return node;
+        }
+
+        node = node.parentElement;
+    }
+
+    // Pages that scroll the body instead of the root report scroll position through the body.
+    let overflow = getComputedStyle(document.body).overflowY;
+
+    if (overflow === 'auto' || overflow === 'scroll') {
+        return document.body;
+    }
+
+    return window;
+}
+
+
+// No scroll is feeding the spring and it has come to rest, so stepping it changes nothing a marquee would show.
+const settled = (t: Tracker, now: number) => {
+    return now - t.time > SETTLE && Math.abs(t.smooth) < 1 && Math.abs(t.smoothRate) < 1;
+};
+
+const step = (t: Tracker, now: number, dt: number) => {
+    if (t.stepped === now) {
+        return;
+    }
+
+    let target = now - t.time > SETTLE ? 0 : t.velocity;
+
+    t.stepped = now;
+
+    for (let remaining = dt; remaining > 0; remaining -= SUBSTEP) {
+        let h = Math.min(remaining, SUBSTEP);
+
+        t.smoothRate += (STIFFNESS * (target - t.smooth) - DAMPING * t.smoothRate) * h;
+        t.smooth += t.smoothRate * h;
+    }
+
+    t.factor = Math.sign(t.smooth) * Math.min(MAX_FACTOR, (Math.abs(t.smooth) / 1000) * MAX_FACTOR);
+};
+
+const track = (element: HTMLElement, wake: VoidFunction) => {
+    let target = scroller(element),
+        existing = trackers.get(target);
+
+    if (existing) {
+        existing.wakes.add(wake);
+        return existing;
+    }
+
+    let t: Tracker = {
+            factor: 0,
+            position: offset(target),
+            release: (wake) => {
+                t.wakes.delete(wake);
+
+                if (t.wakes.size > 0) {
+                    return;
+                }
+
+                target.removeEventListener('scroll', scroll);
+                trackers.delete(target);
+            },
+            smooth: 0,
+            smoothRate: 0,
+            stepped: 0,
+            time: 0,
+            velocity: 0,
+            wakes: new Set([wake])
+        };
+
+    function scroll() {
+        let now = performance.now(),
+            position = offset(target),
+            dt = now - t.time;
+
+        // A first event after a long pause has no meaningful interval, so it only records the position.
+        t.velocity = dt > 0 && dt < 200 ? ((position - t.position) / dt) * 1000 : 0;
+        t.position = position;
+        t.time = now;
+
+        for (let wake of t.wakes) {
+            wake();
+        }
+    }
+
+    target.addEventListener('scroll', scroll, { passive: true });
+    trackers.set(target, t);
+
+    return t;
+};
+
+
+export { MAX_FACTOR, settled, step, track };
+export type { Tracker };

package/src/components/metric/flash.ts

@@ -0,0 +1,128 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
+import triangle from '@esportsplus/ui/svg/triangle.svg';
+
+
+type Direction = 'down' | 'up';
+
+type Entry = { direction: Direction | ''; leaving: boolean; text: string };
+
+
+export default ({ announceAfter = 700, format = String, hold = 900, label, state: api, ...attributes }: Attributes & {
+    announceAfter?: number;
+    format?: (value: number) => string;
+    hold?: number;
+    label?: string;
+    state: { value: number };
+}) => {
+    let announcer: ReturnType<typeof setTimeout> | undefined,
+        holder: ReturnType<typeof setTimeout> | undefined,
+        previous = api.value,
+        render = reactive([] as Entry[]),
+        state = reactive({ changes: 0, direction: '' as Direction | '', flashing: false, settled: format(previous) });
+
+    effect(() => {
+        let value = api.value;
+
+        untrack(() => {
+            let prior = previous,
+                text = format(value);
+
+            previous = value;
+
+            clearTimeout(announcer);
+            announcer = setTimeout(() => state.settled = text, announceAfter);
+
+            // First run seeds the display without rolling it in.
+            if (render.length === 0) {
+                render.push(reactive({ direction: '', leaving: false, text }));
+                return;
+            }
+
+            let delta = value - prior;
+
+            if (!delta) {
+                if (render[render.length - 1].text !== text) {
+                    render[render.length - 1].text = text;
+                }
+
+                return;
+            }
+
+            let direction: Direction = delta > 0 ? 'up' : 'down';
+
+            // Outgoing text leaves the way the incoming text travels.
+            for (let i = 0, n = render.length; i < n; i++) {
+                render[i].direction = direction;
+                render[i].leaving = true;
+            }
+
+            render.push(reactive({ direction, leaving: false, text }));
+
+            state.changes++;
+            state.direction = direction;
+            state.flashing = true;
+
+            clearTimeout(holder);
+            holder = setTimeout(() => state.flashing = false, hold);
+        });
+    });
+
+    // Alternating parity swaps between identical keyframes, restarting the arrow pop per change.
+    function phase() {
+        return state.flashing ? (state.changes % 2 ? 'odd' : 'even') : state.changes > 0 ? 'off' : '';
+    }
+
+    function remove(entry: Entry) {
+        let index = render.indexOf(entry);
+
+        if (index !== -1) {
+            render.splice(index, 1);
+        }
+    }
+
+    onCleanup(() => {
+        clearTimeout(announcer);
+        clearTimeout(holder);
+    });
+
+    return html`
+        <span
+            class='metric-flash'
+            ${attributes}
+            ${{
+                class: [
+                    () => state.direction && `metric-flash--${state.direction}`,
+                    () => state.flashing && 'metric-flash--flashing'
+                ]
+            }}
+        >
+            <span aria-hidden='true' class='metric-flash-tint ${() => state.flashing && 'metric-flash-tint--flashing'}'></span>
+            <span aria-hidden='true' class='metric-flash-value'>
+                ${html.reactive(render, function (entry) {
+                    return html`
+                        <span
+                            class='metric-flash-text ${() => entry.direction && `metric-flash-text--${entry.direction}`} ${() => entry.leaving && 'metric-flash-text--leaving'}'
+                            onanimationend='${() => {
+                                if (entry.leaving) {
+                                    remove(entry);
+                                }
+                            }}'
+                        >
+                            ${() => entry.text}
+                        </span>
+                    `;
+                })}
+            </span>
+            <span
+                aria-hidden='true'
+                class='metric-flash-arrow ${() => state.direction === 'down' && 'metric-flash-arrow--down'} ${() => phase() && `metric-flash-arrow--${phase()}`}'
+            >
+                <svg class='metric-flash-icon'><use href='#${triangle}' /></svg>
+            </span>
+            <span aria-live='polite' class='metric-flash-announcement'>
+                ${() => label ? `${label}: ${state.settled}` : state.settled}
+            </span>
+        </span>
+    `;
+};

package/src/components/metric/index.ts

@@ -0,0 +1,315 @@
+import { component, html, type Attributes } from '@esportsplus/template';
+import { batch, computed, onCleanup, reactive, ReactiveArray, read } from '@esportsplus/reactivity';
+import { clamp } from '~/shared/clamp';
+import { observeSize } from '~/shared/resize';
+import subscribe from '~/shared/subscribe';
+import { onceVisible } from '~/shared/visible';
+import flash from './flash';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [METRIC_PLOT]?: Attributes;
+    data: Point[];
+    format?: (value: number) => string;
+    state?: State;
+    title: string;
+};
+
+type Point = {
+    label: string;
+    value: number;
+};
+
+type State = {
+    active: boolean;
+    index: number;
+};
+
+
+const KEYS: Record<string, (index: number, last: number) => number> = {
+    ArrowLeft: (index) => index - 1,
+    ArrowRight: (index) => index + 1,
+    End: (_, last) => last,
+    Home: () => 0
+};
+
+const METRIC_PLOT = Symbol.for('@esportsplus/ui/metric.plot');
+
+// Room for the scrub dot and its ring at the extremes.
+const PAD_X = 8;
+
+const PAD_Y = 10;
+
+
+function template(this: { attributes?: Partial<A> } | void, { data, format = String, state = reactive({ active: false, index: data.length - 1 }), title, ...attributes }: A) {
+    let plot: HTMLElement | undefined,
+        // Plot and tip sizes in CSS pixels: the chart is drawn at the size it is shown, so the stroke, dot and tip
+        // keep their size in any card instead of scaling with it.
+        size = reactive({ height: 0, tip: 0, width: 0 }),
+        view = reactive({ announcement: '', revision: 0, shown: false });
+
+    // A snapshot per revision, so every binding reads one consistent series while the array changes under it.
+    let series = computed(() => {
+        void view.revision;
+
+        let max = -Infinity,
+            min = Infinity,
+            points = data.slice();
+
+        for (let i = 0, n = points.length; i < n; i++) {
+            max = Math.max(max, points[i].value);
+            min = Math.min(min, points[i].value);
+        }
+
+        return { max, min, points, span: max - min || 1 };
+    });
+
+    // Built once per change for both the line and the area under it.
+    let line = computed(() => {
+        let width = size.width;
+
+        if (!width) {
+            return '';
+        }
+
+        let { min, points, span } = read(series);
+
+        if (!points.length) {
+            return '';
+        }
+
+        let dx = (width - PAD_X * 2) / Math.max(points.length - 1, 1),
+            h = size.height - PAD_Y * 2,
+            path = '';
+
+        for (let i = 0, n = points.length; i < n; i++) {
+            path += `${i ? ' L' : 'M'}${(PAD_X + i * dx).toFixed(1)} ${(PAD_Y + (1 - (points[i].value - min) / span) * h).toFixed(1)}`;
+        }
+
+        return path;
+    });
+
+    function delta() {
+        let points = read(series).points;
+
+        if (!points.length) {
+            return '';
+        }
+
+        let change = points[points.length - 1].value - points[0].value;
+
+        return `${change > 0 ? '+' : change < 0 ? '-' : ''}${format(Math.abs(change))}`;
+    }
+
+    function describe(index: number) {
+        let point = read(series).points[index];
+
+        return point ? `${point.label}: ${format(point.value)}` : '';
+    }
+
+    function last() {
+        return Math.max(read(series).points.length - 1, 0);
+    }
+
+    function nearest(clientX: number) {
+        if (!plot) {
+            return state.index;
+        }
+
+        let box = plot.getBoundingClientRect(),
+            // Divides out any CSS scale so the maths holds inside a scaled container.
+            at = (clientX - box.left) / (box.width / plot.clientWidth || 1);
+
+        return clamp(Math.round((at - PAD_X) / step()), 0, last());
+    }
+
+    function point() {
+        return read(series).points[state.index];
+    }
+
+    function row(point: Point) {
+        return html`
+            <tr>
+                <th scope='row'>${point.label}</th>
+                <td>${format(point.value)}</td>
+            </tr>
+        `;
+    }
+
+    function step() {
+        return (size.width - PAD_X * 2) / Math.max(read(series).points.length - 1, 1);
+    }
+
+    function x(index: number) {
+        return PAD_X + index * step();
+    }
+
+    function y(value: number) {
+        let { min, span } = read(series);
+
+        return PAD_Y + (1 - (value - min) / span) * (size.height - PAD_Y * 2);
+    }
+
+    if (data instanceof ReactiveArray) {
+        onCleanup(subscribe(data, () => {
+            batch(() => {
+                view.revision++;
+
+                // Rests on the newest point unless someone is reading the chart.
+                if (!state.active || state.index > last()) {
+                    state.index = last();
+                }
+            });
+        }));
+    }
+
+    return html`
+        <div class='metric' ${this?.attributes} ${attributes}>
+            <div class='metric-header'>
+                <div>
+                    <div class='metric-title'>${title}</div>
+                    <div class='metric-value'>${() => {
+                        let points = read(series).points;
+
+                        return points.length > 0 && format(points[points.length - 1].value);
+                    }}</div>
+                </div>
+                <div class='metric-delta'>
+                    <span class='metric-delta-value'>${() => delta()}</span>
+                    vs ${() => read(series).points[0]?.label ?? ''}
+                </div>
+            </div>
+
+            <div
+                aria-roledescription='line chart'
+                class='metric-plot'
+                role='group'
+                tabindex='0'
+                ${this?.attributes?.[METRIC_PLOT]}
+                ${attributes[METRIC_PLOT]}
+                ${observeSize(({ height, width }) => {
+                    batch(() => {
+                        size.height = height;
+                        size.width = width;
+                    });
+                })}
+                ${onceVisible(() => view.shown = true)}
+                ${{
+                    'aria-label': () => `${title}, ${read(series).points.length} points. Use arrow keys to read values.`,
+                    class: [
+                        () => state.active && '--active',
+                        () => view.shown && 'metric-plot--shown'
+                    ],
+                    onblur: () => {
+                        state.active = false;
+                    },
+                    onconnect: (element: HTMLElement) => {
+                        plot = element;
+                    },
+                    onfocus: () => {
+                        state.active = true;
+                        view.announcement = describe(state.index);
+                    },
+                    onkeydown: (e: KeyboardEvent) => {
+                        let key = KEYS[e.key];
+
+                        if (!key) {
+                            return;
+                        }
+
+                        e.preventDefault();
+
+                        let index = clamp(key(state.index, last()), 0, last());
+
+                        state.active = true;
+                        state.index = index;
+                        view.announcement = describe(index);
+                    },
+                    onpointercancel: () => {
+                        state.active = false;
+                    },
+                    onpointerdown: (e: PointerEvent) => {
+                        if (e.pointerType !== 'touch') {
+                            return;
+                        }
+
+                        state.index = nearest(e.clientX);
+                        state.active = true;
+                    },
+                    onpointerleave: (e: PointerEvent) => {
+                        if (e.pointerType !== 'touch') {
+                            state.active = false;
+                        }
+                    },
+                    onpointermove: (e: PointerEvent) => {
+                        if (e.pointerType === 'touch' && !state.active) {
+                            return;
+                        }
+
+                        state.index = nearest(e.clientX);
+                        state.active = true;
+                    },
+                    onpointerup: (e: PointerEvent) => {
+                        if (e.pointerType === 'touch') {
+                            state.active = false;
+                        }
+                    }
+                }}
+            >
+                <svg aria-hidden='true' class='metric-svg'>
+                    <path class='metric-area' d='${() => {
+                        let path = read(line);
+
+                        return path && `${path} L${x(last()).toFixed(1)} ${size.height} L${x(0).toFixed(1)} ${size.height} Z`;
+                    }}' />
+                    <path class='metric-line' d='${() => read(line)}' fill='none' pathLength='1' />
+                </svg>
+
+                <div aria-hidden='true' class='metric-overlay'>
+                    <div class='metric-cursor' style='${() => `left: ${x(state.index)}px`}'></div>
+                    <div class='metric-dot' style='${() => `left: ${x(state.index)}px; top: ${y(point()?.value ?? 0)}px`}'></div>
+                    <div
+                        class='metric-tip'
+                        style='${() => {
+                            let half = size.tip / 2;
+
+                            // Kept inside the card near either edge, and centred when the card is narrower than the tip.
+                            return `left: ${size.width < size.tip ? size.width / 2 : clamp(x(state.index), half, size.width - half)}px`;
+                        }}'
+                        ${observeSize(({ width }) => {
+                            size.tip = width;
+                        })}
+                    >
+                        <span class='metric-tip-value'>${() => {
+                            let at = point();
+
+                            return at && format(at.value);
+                        }}</span>
+                        <span class='metric-tip-label'>${() => point()?.label ?? ''}</span>
+                    </div>
+                </div>
+            </div>
+
+            <span aria-live='polite' class='metric-sr'>${() => view.announcement}</span>
+            <div class='metric-sr'>
+                <table>
+                    <caption>${title}</caption>
+                    <thead>
+                        <tr>
+                            <th scope='col'>Day</th>
+                            <th scope='col'>Value</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${data instanceof ReactiveArray ? html.reactive(data, row) : data.map(row)}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    `;
+}
+
+
+export default component(template, { flash, plot: METRIC_PLOT });
+export type { Point as MetricPoint, State as MetricState };