@cube-nl/dmp-sdk 1.0.0-rc.4 → 1.1.0-rc.1

package/dist/ui/blocks/table.js

@@ -0,0 +1,607 @@
+import { CARD_CSS, PeriodFollower, requiredAttr, wholeAttr } from '../aggregate-block.js';
+import { exampleBadge, stateFor } from '../block.js';
+import { downloadCsv, toCsv } from '../csv.js';
+import { clear, h } from '../dom.js';
+import { choicesFor, columnsFor, fieldList, readFieldConfigs } from '../fields.js';
+import { formatValue, humanize, isoDate, NUMERIC_FORMATS, parseLocalDate, toNumber } from '../format.js';
+import { parseInput } from '../inputs.js';
+import { blockFilter, dateFieldFor, periodFilter, resolvePeriodSource } from '../query.js';
+import { NL } from '../texts.js';
+const CSS = `${CARD_CSS}
+.tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem;margin-bottom:.75rem}
+.control{display:flex;flex-direction:column;gap:.25rem;min-width:0;max-width:100%}
+.control>label,legend{font-weight:600}
+fieldset{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;margin:0;padding:0;border:0}
+fieldset legend{padding:0;margin-bottom:.25rem}
+fieldset.control{flex-direction:row;align-items:flex-end}
+.scroll{position:relative;overflow-x:auto;max-width:100%}
+table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
+th,td{padding:.5rem .75rem;text-align:start;border-bottom:1px solid var(--cube-color-border)}
+th{font-weight:600;white-space:nowrap}
+th button{min-height:auto;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:600}
+th button:hover{background:none;text-decoration:underline}
+th[aria-sort=ascending] button::after{content:" ▲";content:" ▲"/""}
+th[aria-sort=descending] button::after{content:" ▼";content:" ▼"/""}
+.num{text-align:end;white-space:nowrap}
+tbody tr{cursor:pointer}
+tbody tr:hover{background:var(--cube-color-primary-subtle)}
+tbody tr:focus-visible{outline:3px solid var(--cube-color-focus);outline-offset:-3px}
+tbody tr.chosen{background:var(--cube-color-primary-subtle);box-shadow:inset 4px 0 0 var(--cube-color-primary)}
+.pager{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem}
+.pager p,.export-status{margin:0;color:var(--cube-color-text-muted)}
+.pager p{margin-inline-end:auto}
+`;
+const NUMERIC = NUMERIC_FORMATS;
+const MAX_PAGE = 200;
+const EXPORT_PAGES = 50;
+const DEBOUNCE = 300;
+/** The key of the search box in `values`; no field name contains a space. */
+const SEARCH = ' search';
+/** The day after `day`, for an `lt` bound that keeps the whole of `day` for dates and date-times alike. */
+function dayAfter(day) {
+    const date = parseLocalDate(day.slice(0, 10));
+    if (date === null)
+        return null;
+    date.setDate(date.getDate() + 1);
+    return isoDate(date);
+}
+const isOps = (v) => v !== null && typeof v === 'object' && !Array.isArray(v);
+/** Two operator objects on one field are joined; anything else is replaced by the later one. */
+function merge(target, field, value) {
+    const current = target[field];
+    target[field] = isOps(current) && isOps(value) ? { ...current, ...value } : value;
+}
+/** -1, 0 or 1; numbers as numbers, anything else (ISO dates) as text. */
+function compare(a, b) {
+    if (typeof a === 'number' && typeof b === 'number')
+        return Math.sign(a - b);
+    const x = String(a);
+    const y = String(b);
+    return x < y ? -1 : x > y ? 1 : 0;
+}
+/**
+ * What the controls ask for, within the base (the `filter` attribute and the followed period): a bound takes the
+ * stricter of the two, and the base keeps any value it fixes. The controls can narrow the base, never widen it.
+ */
+function within(base, value) {
+    if (!isOps(base) || !isOps(value))
+        return base;
+    const result = { ...value, ...base };
+    for (const [op, pick] of [['gte', 1], ['gt', 1], ['lte', -1], ['lt', -1]]) {
+        const a = base[op];
+        const b = value[op];
+        if (a !== undefined && a !== null && b !== undefined && b !== null) {
+            result[op] = compare(b, a) === pick ? b : a;
+        }
+    }
+    return result;
+}
+/**
+ * `<cube-table>`: the rows of a resource, a page at a time, with search, filters, sortable headers and a CSV export.
+ * The controls are built once per load; what they change only asks for rows again, and only the newest answer is
+ * shown.
+ */
+export function tableBlock(Base, scope) {
+    const doc = scope.document;
+    class CubeTable extends Base {
+        static tag = 'cube-table';
+        static css = CSS;
+        period = new PeriodFollower(this);
+        context = null;
+        parts = new Map();
+        /** What the person typed or chose in each control, by field (`placed_on:min` for a bound). */
+        values = new Map();
+        sortBy = null;
+        page = 1;
+        requests = 0;
+        rowsController = null;
+        debounce = null;
+        exporting = null;
+        headers = new Map();
+        frame = null;
+        table = null;
+        pagerText = null;
+        previous = null;
+        next = null;
+        pager = null;
+        exportButton = null;
+        exportStatus = null;
+        /** The resource the kept values, sort and page belong to. */
+        shownResource = null;
+        /** The id of the chosen row, and the ids of the rows shown: a different set clears the choice. */
+        chosen = null;
+        shownIds = null;
+        updates = 0;
+        shownFields() {
+            return this.context?.columns.map((column) => column.name) ?? [];
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.stopDebounce();
+            this.rowsController?.abort();
+            this.exporting?.abort();
+            this.exporting = null;
+        }
+        async load(signal, session) {
+            if (session === null)
+                return;
+            // The old controls are gone (the loading state replaced them): nothing they asked for may land now.
+            this.stopDebounce();
+            this.context = null;
+            this.rowsController?.abort();
+            const resource = requiredAttr(this, 'resource');
+            ++this.updates;
+            if (resource !== this.shownResource) {
+                // Another resource: what the person chose belonged to the old one.
+                this.values.clear();
+                this.sortBy = null;
+                this.page = 1;
+                this.chosen = null;
+                this.shownIds = null;
+                this.shownResource = resource;
+            }
+            this.detailTarget();
+            const selector = this.attr('period');
+            const dateField = selector === null || selector === ''
+                ? null
+                : dateFieldFor(this.attr('date-field'), null, this.localName);
+            const filter = blockFilter(this);
+            const source = await resolvePeriodSource(this, selector);
+            if (signal.aborted)
+                return;
+            this.period.follow(source);
+            const base = source === null || dateField === null
+                ? filter
+                : { ...filter, ...periodFilter(dateField, source.value) };
+            const schema = await session.schema(resource);
+            if (signal.aborted)
+                return;
+            const names = fieldList(this.attr('fields'));
+            const hasId = schema === null || schema.fields.some((field) => field.name === 'id');
+            const context = {
+                session,
+                resource,
+                columns: [],
+                base,
+                fields: names === null ? undefined : [...new Set([...(hasId ? ['id'] : []), ...names])],
+                size: Math.min(wholeAttr(this, 'page-size', 1, 25), MAX_PAGE),
+            };
+            this.exporting?.abort();
+            this.exporting = null;
+            signal.addEventListener('abort', () => this.rowsController?.abort(), { once: true });
+            const asked = fieldList(this.attr('filters')) ?? [];
+            this.checkFilterable(schema, asked);
+            // A field the `filter` fixes to one value has nothing left to choose.
+            const filterNames = asked.filter((name) => !(name in filter) || isOps(filter[name]));
+            for (const name of [...this.parts.keys()])
+                if (!filterNames.includes(name))
+                    this.parts.delete(name);
+            const configs = readFieldConfigs(this);
+            // The controls exist only after this answer, so they cannot have asked for anything yet.
+            this.context = context;
+            const first = await this.fetchRows(context, this.query(context, context.size, this.page));
+            const response = first === null ? null : await this.lastPageIfPast(context, first);
+            if (response === null || signal.aborted)
+                return;
+            const sample = response.data[0];
+            context.columns = columnsFor(schema, names, configs, sample);
+            const unhidden = new Map([...configs].map(([name, config]) => [name, { ...config, hidden: false }]));
+            const filterColumns = columnsFor(schema, filterNames, unhidden, sample);
+            this.build(context, schema, filterColumns);
+            this.renderRows(context, response);
+        }
+        /** `filters` and `search` may only name fields the resource can be filtered on (when the schema says). */
+        checkFilterable(schema, filters) {
+            if (schema === null)
+                return;
+            const search = this.attr('search')?.trim() ?? '';
+            const named = filters.map((name) => ['filters', name]);
+            if (search !== '')
+                named.push(['search', search]);
+            for (const [attribute, field] of named) {
+                if (!schema.filterable.includes(field)) {
+                    throw new TypeError(NL.invalid.notFilterable(this.localName, attribute, field));
+                }
+            }
+        }
+        /** The element `detail` names, or null without one; an invalid selector is the author's error. */
+        detailTarget() {
+            const selector = this.attr('detail')?.trim() ?? '';
+            if (selector === '')
+                return null;
+            try {
+                return doc.querySelector(selector);
+            }
+            catch {
+                throw new TypeError(NL.invalid.selector(this.localName, 'detail', selector));
+            }
+        }
+        /** The list query of the controls as they are now. */
+        query(context, size, number) {
+            const asked = {};
+            const searchField = this.attr('search')?.trim() ?? '';
+            const term = this.values.get(SEARCH)?.trim() ?? '';
+            if (searchField !== '' && term !== '')
+                merge(asked, searchField, { ilike: `%${term}%` });
+            for (const [field, part] of this.parts) {
+                const value = part();
+                if (value !== null)
+                    merge(asked, field, value);
+            }
+            const filter = { ...context.base };
+            for (const [field, value] of Object.entries(asked)) {
+                const base = filter[field];
+                filter[field] = base === undefined ? value : within(base, value);
+            }
+            const sort = this.sortBy ?? (this.attr('sort')?.trim() || null);
+            const query = { filter, page: { size, number } };
+            if (sort !== null)
+                query.sort = sort;
+            if (context.fields !== undefined)
+                query.fields = context.fields;
+            return query;
+        }
+        /** Asks for one page; null when a newer request was made meanwhile (its answer is the one shown). */
+        async fetchRows(context, query) {
+            const id = ++this.requests;
+            this.rowsController?.abort();
+            const controller = new AbortController();
+            this.rowsController = controller;
+            this.setAttribute('aria-busy', 'true');
+            try {
+                const response = await context.session.resource(context.resource).list(query, {
+                    signal: controller.signal,
+                });
+                return id === this.requests && !controller.signal.aborted ? response : null;
+            }
+            finally {
+                if (id === this.requests)
+                    this.removeAttribute('aria-busy');
+            }
+        }
+        /**
+         * An empty page past the end (rows were removed while it was open, say) when the set has rows: the last page
+         * instead, so the pager stays usable. Null when a newer request was made meanwhile.
+         */
+        async lastPageIfPast(context, response) {
+            const meta = response.meta.page;
+            if (response.data.length > 0 || this.page <= 1 || meta === undefined || meta === null || meta.total === 0) {
+                return response;
+            }
+            this.page = Math.max(1, meta.pages);
+            return this.fetchRows(context, this.query(context, context.size, this.page));
+        }
+        /** After a control changed: the rows again, or a state in their place. The controls stay. */
+        async update(resetPage) {
+            const context = this.context;
+            if (context === null || !this.isConnected)
+                return;
+            if (resetPage)
+                this.page = 1;
+            // Per update, not per request: the retry for the last page is part of this one, and so is its failure.
+            const run = ++this.updates;
+            try {
+                const first = await this.fetchRows(context, this.query(context, context.size, this.page));
+                const response = first === null ? null : await this.lastPageIfPast(context, first);
+                if (response !== null)
+                    this.renderRows(context, response);
+            }
+            catch (error) {
+                if (run !== this.updates || error?.name === 'AbortError')
+                    return;
+                this.showRowsState(fetchState(error));
+            }
+        }
+        later(resetPage) {
+            this.stopDebounce();
+            this.debounce = scope.setTimeout(() => {
+                this.debounce = null;
+                void this.update(resetPage);
+            }, DEBOUNCE);
+        }
+        stopDebounce() {
+            if (this.debounce !== null)
+                scope.clearTimeout(this.debounce);
+            this.debounce = null;
+        }
+        build(context, schema, filterColumns) {
+            this.parts = new Map();
+            const tools = [];
+            const searchField = this.attr('search')?.trim() ?? '';
+            if (searchField !== '') {
+                const input = h(doc, 'input', { type: 'search' });
+                tools.push(this.control(input, SEARCH, NL.search, true));
+            }
+            for (const column of filterColumns)
+                tools.push(this.filterControl(column));
+            if (this.flag('export')) {
+                this.exportButton = h(doc, 'button', {
+                    type: 'button',
+                    class: 'secondary',
+                    onclick: () => this.toggleExport(),
+                }, NL.exportCsv);
+                this.exportStatus = h(doc, 'p', { class: 'export-status', role: 'status' });
+                tools.push(this.exportButton, this.exportStatus);
+            }
+            else {
+                this.exportButton = null;
+                this.exportStatus = null;
+            }
+            this.headers = new Map();
+            this.frame = h(doc, 'div', { class: 'scroll' });
+            this.pagerText = h(doc, 'p', { 'aria-live': 'polite' });
+            this.previous = h(doc, 'button', {
+                type: 'button',
+                class: 'secondary',
+                onclick: () => this.go(-1),
+            }, NL.previous);
+            this.next = h(doc, 'button', {
+                type: 'button',
+                class: 'secondary',
+                onclick: () => this.go(1),
+            }, NL.next);
+            this.pager = h(doc, 'div', { class: 'pager' }, this.pagerText, this.previous, this.next);
+            const thead = h(doc, 'thead', {}, h(doc, 'tr', {}, ...context.columns.map((column) => {
+                const sortable = schema?.sortable.includes(column.name) === true;
+                const th = h(doc, 'th', { scope: 'col', class: NUMERIC.includes(column.format) ? 'num' : null }, sortable
+                    ? h(doc, 'button', { type: 'button', onclick: () => this.sortOn(column.name) }, column.label)
+                    : column.label, ...(this.exampleField(context.session, context.resource, column.name)
+                    ? [' ', exampleBadge(doc)]
+                    : []));
+                if (sortable)
+                    this.headers.set(column.name, th);
+                return th;
+            })));
+            this.table = h(doc, 'table', {}, h(doc, 'caption', { class: 'sr-only' }, humanize(context.resource)), thead, h(doc, 'tbody'));
+            this.markSort();
+            clear(this.body);
+            this.body.appendChild(h(doc, 'div', { class: 'card' }, tools.length > 0 ? h(doc, 'div', { class: 'tools' }, ...tools) : null, this.frame, this.pager));
+        }
+        /**
+         * A labelled control whose text is kept in `values` under `key`, so a reload (an edit elsewhere, a changed
+         * attribute) rebuilds it as the person left it. `wait` debounces typing; otherwise a change asks at once.
+         */
+        control(control, key, label, wait, onInput) {
+            const id = `cube-table-${++controlIds}`;
+            control.id = id;
+            control.value = this.values.get(key) ?? '';
+            onInput?.(control);
+            control.addEventListener(wait ? 'input' : 'change', () => {
+                this.values.set(key, control.value);
+                onInput?.(control);
+                if (wait)
+                    this.later(true);
+                else
+                    void this.update(true);
+            });
+            return h(doc, 'div', { class: 'control' }, h(doc, 'label', { for: id }, label), control);
+        }
+        /** The control for one `filters` field, and its part of the query. */
+        filterControl(column) {
+            const name = column.name;
+            const value = (key) => this.values.get(key)?.trim() ?? '';
+            const choices = choicesFor(column);
+            const boolean = choices === null && column.format === 'boolean';
+            if (choices !== null || boolean) {
+                const options = choices ?? [{ value: 'true', label: NL.yes }, { value: 'false', label: NL.no }];
+                const select = h(doc, 'select', {}, h(doc, 'option', { value: '' }, NL.all), ...options.map((option) => h(doc, 'option', { value: option.value }, option.label)));
+                const numeric = NUMERIC.includes(column.format);
+                this.parts.set(name, () => {
+                    const chosen = value(name);
+                    if (chosen === '')
+                        return null;
+                    return boolean ? chosen === 'true' : numeric ? (toNumber(chosen) ?? chosen) : chosen;
+                });
+                return this.control(select, name, column.label, false);
+            }
+            const dates = column.format === 'date' || column.format === 'datetime';
+            if (!dates && !NUMERIC.includes(column.format)) {
+                this.parts.set(name, () => (value(name) === '' ? null : { ilike: `%${value(name)}%` }));
+                return this.control(h(doc, 'input', { type: 'text' }), name, column.label, true);
+            }
+            // Typed the Dutch way (1.234,5); what cannot be read as a number is marked and left out of the query.
+            const number = (key) => {
+                const parsed = parseInput(value(key), column.format);
+                return 'value' in parsed && typeof parsed.value === 'number' ? parsed.value : null;
+            };
+            const mark = (key) => (input) => {
+                if (value(key) !== '' && number(key) === null)
+                    input.setAttribute('aria-invalid', 'true');
+                else
+                    input.removeAttribute('aria-invalid');
+            };
+            const bound = (role) => {
+                const key = `${name}:${role}`;
+                const input = h(doc, 'input', {
+                    type: dates ? 'date' : 'text',
+                    inputmode: dates ? null : 'decimal',
+                    // Two filters both have a Vanaf: the name says which field it bounds.
+                    'aria-label': `${NL[role]} (${column.label})`,
+                });
+                return this.control(input, key, NL[role], !dates, dates ? undefined : mark(key));
+            };
+            this.parts.set(name, () => {
+                const ops = {};
+                const low = dates ? value(`${name}:min`) || null : number(`${name}:min`);
+                const high = dates ? dayAfter(value(`${name}:max`)) : number(`${name}:max`);
+                if (low !== null)
+                    ops.gte = low;
+                if (high !== null)
+                    ops[dates ? 'lt' : 'lte'] = high;
+                return Object.keys(ops).length > 0 ? ops : null;
+            });
+            const legend = h(doc, 'legend', {}, column.label);
+            return h(doc, 'fieldset', { class: 'control' }, legend, bound('min'), bound('max'));
+        }
+        sortOn(field) {
+            const current = this.sortBy ?? (this.attr('sort')?.trim() || null);
+            this.sortBy = current === field ? `-${field}` : field;
+            this.markSort();
+            void this.update(true);
+        }
+        markSort() {
+            const sort = this.sortBy ?? (this.attr('sort')?.trim() || '');
+            const field = sort.replace(/^-/, '');
+            for (const [name, th] of this.headers) {
+                if (name === field)
+                    th.setAttribute('aria-sort', sort.startsWith('-') ? 'descending' : 'ascending');
+                else
+                    th.removeAttribute('aria-sort');
+            }
+        }
+        go(step) {
+            this.page = Math.max(1, this.page + step);
+            void this.update(false);
+        }
+        renderRows(context, response) {
+            const frame = this.frame;
+            const table = this.table;
+            if (frame === null || table === null)
+                return;
+            const meta = response.meta.page;
+            const total = meta?.total ?? response.data.length;
+            const pages = Math.max(1, meta?.pages ?? 1);
+            this.page = meta?.number ?? this.page;
+            clear(frame);
+            const ids = JSON.stringify(response.data.map((row) => row.id ?? null));
+            if (ids !== this.shownIds)
+                this.chosen = null;
+            this.shownIds = ids;
+            if (response.data.length === 0) {
+                this.showRowsState({ kind: 'empty', detail: null });
+                return;
+            }
+            const tbody = h(doc, 'tbody', {}, ...response.data.map((row) => this.row(context, row)));
+            table.replaceChild(tbody, table.querySelector('tbody'));
+            frame.appendChild(table);
+            if (this.pager !== null)
+                this.pager.hidden = false;
+            if (this.pagerText !== null)
+                this.pagerText.textContent = NL.pageOf(this.page, pages, total);
+            if (this.previous !== null)
+                this.previous.disabled = this.page <= 1;
+            if (this.next !== null)
+                this.next.disabled = this.page >= pages;
+        }
+        showRowsState(state) {
+            if (this.frame === null)
+                return;
+            clear(this.frame);
+            this.frame.appendChild(h(doc, 'cube-state', {
+                kind: state.kind,
+                message: state.detail,
+                retry: state.retry === false ? 'false' : null,
+            }));
+            if (this.pager !== null)
+                this.pager.hidden = true;
+        }
+        row(context, row) {
+            const choose = () => this.select(context, row, tr);
+            const example = (column) => this.exampleField(context.session, context.resource, column.name);
+            const chosen = this.chosen !== null && String(row.id ?? '') === this.chosen;
+            const tr = h(doc, 'tr', {
+                tabindex: '0',
+                class: chosen ? 'chosen' : null,
+                'aria-current': chosen ? 'true' : null,
+                onclick: choose,
+                onkeydown: ((event) => {
+                    if (event.key !== 'Enter' && event.key !== ' ')
+                        return;
+                    // Space would scroll the page.
+                    event.preventDefault();
+                    choose();
+                }),
+            }, ...context.columns.map((column) => {
+                const classes = [NUMERIC.includes(column.format) && 'num', example(column) && 'example'];
+                return h(doc, 'td', { class: classes.filter(Boolean).join(' ') || null }, formatValue(row[column.name], column.format));
+            }));
+            return tr;
+        }
+        select(context, row, tr) {
+            const id = row.id ?? null;
+            this.chosen = id === null ? null : String(id);
+            for (const other of Array.from(tr.parentElement?.children ?? [])) {
+                other.classList.toggle('chosen', other === tr);
+                if (other === tr)
+                    other.setAttribute('aria-current', 'true');
+                else
+                    other.removeAttribute('aria-current');
+            }
+            this.emit('cube-select', { resource: context.resource, id, row });
+            if (id === null)
+                return;
+            let target = null;
+            try {
+                target = this.detailTarget();
+            }
+            catch (error) {
+                // Checked on load; an attribute changed since is reported the same way.
+                this.showState(stateFor(error));
+                return;
+            }
+            target?.setAttribute('record-id', String(id));
+        }
+        /** Starts the export, or cancels the running one. */
+        toggleExport() {
+            if (this.exporting !== null) {
+                this.exporting.abort();
+                this.exporting = null;
+                if (this.exportButton !== null)
+                    this.exportButton.textContent = NL.exportCsv;
+                if (this.exportStatus !== null)
+                    this.exportStatus.textContent = '';
+                return;
+            }
+            void this.runExport();
+        }
+        async runExport() {
+            const context = this.context;
+            const button = this.exportButton;
+            const status = this.exportStatus;
+            if (context === null || button === null || status === null)
+                return;
+            const controller = new AbortController();
+            this.exporting = controller;
+            const { signal } = controller;
+            button.textContent = NL.cancel;
+            status.textContent = NL.exporting(0);
+            const rows = [];
+            let message = '';
+            try {
+                let pages = 0;
+                const query = this.query(context, MAX_PAGE, 1);
+                for await (const page of context.session.resource(context.resource).pages(query, { signal })) {
+                    // The preview ignores the signal: stop here when the user cancelled meanwhile.
+                    if (signal.aborted)
+                        break;
+                    rows.push(...page.data);
+                    status.textContent = NL.exporting(rows.length);
+                    if (++pages >= EXPORT_PAGES)
+                        break;
+                }
+                if (!signal.aborted) {
+                    downloadCsv(doc, `${context.resource}-${isoDate(new Date())}.csv`, toCsv(context.columns, rows));
+                }
+            }
+            catch (error) {
+                if (!signal.aborted && error?.name !== 'AbortError') {
+                    message = NL.exportFailed;
+                }
+            }
+            finally {
+                // A cancelled run was reset when it was cancelled; a newer run owns the button by now.
+                if (this.exporting === controller) {
+                    this.exporting = null;
+                    button.textContent = NL.exportCsv;
+                    status.textContent = message;
+                }
+            }
+        }
+    }
+    return CubeTable;
+}
+let controlIds = 0;
+/** The state for a failed request: the browser's own (English) text of a network failure is never shown. */
+function fetchState(error) {
+    return error instanceof TypeError ? { kind: 'error', detail: null } : stateFor(error);
+}

package/dist/ui/blocks/top.d.ts

@@ -0,0 +1,4 @@
+import type { BlockClass } from '../block.js';
+import type { BlockScope } from '../define.js';
+/** `<cube-top>`: the groups of a resource ranked by one measure, with a bar each; sorted and cut in the browser. */
+export declare function topBlock(Base: BlockClass, scope: BlockScope): BlockClass;

package/dist/ui/blocks/top.js

@@ -0,0 +1,67 @@
+import { aggregateFields, aggregateQuery, CARD_CSS, groupedAggregate, LABEL_CSS, PeriodFollower, rankGroups, requiredAttr, valueFormatter, wholeAttr, } from '../aggregate-block.js';
+import { clear, h, svg } from '../dom.js';
+import { NL } from '../texts.js';
+const CSS = `${CARD_CSS}${LABEL_CSS}
+ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.25rem}
+button{display:grid;grid-template-columns:1fr auto;gap:.125rem .75rem;width:100%;padding:.5rem .75rem;
+border:0;border-radius:var(--cube-radius);background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
+button:hover{background:var(--cube-color-primary-subtle)}
+button:focus-visible{outline:2px solid var(--cube-color-focus);outline-offset:2px}
+.name{overflow-wrap:anywhere}
+.value{font-weight:600;font-variant-numeric:tabular-nums}
+svg{grid-column:1/-1;display:block;width:100%;height:.5rem}
+rect.bar{fill:var(--cube-color-series-1)}
+.note{margin:.5rem 0 0;font-size:.875rem;color:var(--cube-color-text-muted)}
+`;
+/** `<cube-top>`: the groups of a resource ranked by one measure, with a bar each; sorted and cut in the browser. */
+export function topBlock(Base, scope) {
+    class CubeTop extends Base {
+        static tag = 'cube-top';
+        static css = CSS;
+        shownFields() {
+            return aggregateFields(this);
+        }
+        period = new PeriodFollower(this);
+        async load(signal, session) {
+            if (session === null)
+                return;
+            const resource = requiredAttr(this, 'resource');
+            const by = requiredAttr(this, 'by');
+            const limit = wholeAttr(this, 'limit', 1, 5);
+            const query = await aggregateQuery(this, this.period, signal, by);
+            if (query === null)
+                return;
+            const { data, meta } = await groupedAggregate(session, resource, by, query, signal);
+            if (signal.aborted)
+                return;
+            const order = { descending: this.attr('order') !== 'asc', limit };
+            const ranked = await rankGroups(this, session, data, { by, fn: query.fn }, order, signal);
+            if (ranked === null)
+                return;
+            if (ranked.length === 0) {
+                this.showState('empty');
+                return;
+            }
+            const incomplete = (meta?.groups ?? 0) > data.length;
+            this.render(ranked, by, valueFormatter(this, query.count), incomplete);
+        }
+        render(items, by, format, incomplete) {
+            const doc = scope.document;
+            const largest = Math.max(...items.map((item) => item.value));
+            const label = this.attr('label');
+            const listAttrs = {};
+            if (label !== null && label !== '')
+                listAttrs['aria-label'] = label;
+            if (incomplete)
+                listAttrs['aria-describedby'] = 'incomplete';
+            clear(this.body);
+            this.body.appendChild(h(doc, 'div', { class: 'card' }, ...(label === null || label === '' ? [] : [h(doc, 'p', { class: 'label' }, label)]), h(doc, 'ol', listAttrs, ...items.map((item) => h(doc, 'li', {}, h(doc, 'button', { type: 'button', onclick: () => void this.emit('cube-select', { by, key: item.key }) }, h(doc, 'span', { class: 'name' }, item.label), ' ', h(doc, 'span', { class: 'value' }, format(item.value)), this.bar(item.value, largest))))), ...(incomplete ? [h(doc, 'p', { class: 'note', id: 'incomplete', role: 'note' }, NL.incomplete)] : [])));
+        }
+        /** A bar as long as the value is against the largest; a value of zero or less has none. */
+        bar(value, largest) {
+            const width = largest > 0 && value > 0 ? (value / largest) * 100 : 0;
+            return svg(scope.document, 'svg', { viewBox: '0 0 100 4', preserveAspectRatio: 'none', 'aria-hidden': 'true', focusable: 'false' }, svg(scope.document, 'rect', { class: 'bar', x: 0, y: 0, width, height: 4 }));
+        }
+    }
+    return CubeTop;
+}