@peter.prib/renderengine 0.10.0 → 0.12.0

package/src/charting/table/TableView.js

@@ -63,7 +63,8 @@ export class TableView {
         this.copy = copy ?? TableView.clipboard;
         this.chooser = chooser ?? new ChartChooser();
         this.highlight = highlight;
-        this.sort = null;            // { column, direction: 'asc' | 'desc' }
+        /** The sort keys, most significant first: `{ column, direction: 'asc' | 'desc' }`. */
+        this.sorts = [];
         this.filters = [];           // { column, op, value }
         this.hidden = new Set();
         this.page = 0;
@@ -85,14 +86,36 @@ export class TableView {
             : this.rows.filter(r => this.filters.every(f => FILTER_OPS[f.op](r[f.column], f.value)));
     }
 
-    /** The filtered rows in sort order (a copy; equal values keep their order). */
+    /** The first sort key, or null — the one a single-column sort has. */
+    get sort() { return this.sorts[0] ?? null; }
+
+    /** Where `column` is among the sort keys: `{ direction, rank }` (rank from 1), or null. */
+    sortOf(column) {
+        const at = this.sorts.findIndex(s => s.column === column);
+        return at < 0 ? null : { direction: this.sorts[at].direction, rank: at + 1 };
+    }
+
+    /**
+     * The filtered rows in sort order (a copy): by the first key, then the next among equals, and so
+     * on; rows equal on every key keep their order.
+     */
     ordered() {
         const rows = this.filtered();
-        if (this.sort === null) return rows;
-        const { column, direction } = this.sort;
-        const sign = direction === 'desc' ? -1 : 1;
-        // Nulls stay last whichever way: a reader looks for values, not for blanks.
-        return [...rows].sort((a, b) => (a[column] == null || b[column] == null ? compareValues(a[column], b[column]) : sign * compareValues(a[column], b[column])));
+        if (this.sorts.length === 0) return rows;
+        const keys = this.sorts.map(({ column, direction }) => ({ column, sign: direction === 'desc' ? -1 : 1 }));
+        return [...rows].sort((a, b) => {
+            for (const { column, sign } of keys) {
+                // Nulls stay last whichever way: a reader looks for values, not for blanks.
+                const c = a[column] == null || b[column] == null ? compareValues(a[column], b[column]) : sign * compareValues(a[column], b[column]);
+                if (c !== 0) return c;
+            }
+            return 0;
+        });
+    }
+
+    /** "Region ▲, then Revenue ▼", or '' when unsorted. */
+    describeSort() {
+        return this.sorts.map(s => `${s.column} ${s.direction === 'asc' ? '▲' : '▼'}`).join(', then ');
     }
 
     pageCount() {
@@ -119,14 +142,41 @@ export class TableView {
         this.onChange?.(this);
     }
 
-    /** A header click: unsorted → ascending → descending → unsorted. */
-    toggleSort(column) {
-        const current = this.sort?.column === column ? this.sort.direction : null;
-        this.sortBy(column, current === null ? 'asc' : current === 'asc' ? 'desc' : null);
+    /**
+     * A header click: unsorted → ascending → descending → unsorted, by this column alone. With
+     * `{ then: true }` (a shift-click) the column is a further key instead: added after the others,
+     * or, if it is one already, cycled in its place — the other keys stay.
+     */
+    toggleSort(column, { then = false } = {}) {
+        const next = (d) => (d === null ? 'asc' : d === 'asc' ? 'desc' : null);
+        if (then) {
+            this.thenSortBy(column, next(this.sortOf(column)?.direction ?? null));
+            return;
+        }
+        const alone = this.sorts.length === 1 && this.sorts[0].column === column ? this.sorts[0].direction : null;
+        this.sortBy(column, next(alone));
     }
 
+    /** Sorts by `column` alone (null: unsorted). */
     sortBy(column, direction) {
-        this.sort = direction === null ? null : { column, direction };
+        this.sorts = direction === null ? [] : [{ column, direction }];
+        this.page = 0;
+        this.changed();
+    }
+
+    /** `column` as a further sort key: its direction changed in place, appended if new, removed with null. */
+    thenSortBy(column, direction) {
+        const at = this.sorts.findIndex(s => s.column === column);
+        if (direction === null) this.sorts = this.sorts.filter(s => s.column !== column);
+        else if (at >= 0) this.sorts = this.sorts.map(s => (s.column === column ? { column, direction } : s));
+        else this.sorts = [...this.sorts, { column, direction }];
+        this.page = 0;
+        this.changed();
+    }
+
+    /** Unsorted: rows in the order given. */
+    clearSort() {
+        this.sorts = [];
         this.page = 0;
         this.changed();
     }
@@ -206,13 +256,23 @@ export class TableView {
     }
 
     columnMenu(column) {
-        const sorted = this.sort?.column === column ? this.sort.direction : null;
+        const key = this.sortOf(column);
+        const alone = this.sorts.length === 1 && key !== null;
+        const sorted = alone ? key.direction : null;
+        // A further key: offered once something else is sorted (so this column is never the only key
+        // here); ticked where this column already is one.
+        const further = this.sorts.some(s => s.column !== column) ? [
+            { label: 'Then sort ascending', checked: key?.direction === 'asc', action: () => this.thenSortBy(column, 'asc') },
+            { label: 'Then sort descending', checked: key?.direction === 'desc', action: () => this.thenSortBy(column, 'desc') },
+            ...(key !== null ? [{ label: 'Stop sorting by this column', action: () => this.thenSortBy(column, null) }] : []),
+        ] : [];
         const values = [...new Set(this.filtered().map(r => r[column]))].sort(compareValues);
         const listed = values.slice(0, TableView.MAX_FILTER_VALUES);
         return [
             { label: 'Sort ascending', checked: sorted === 'asc', action: () => this.sortBy(column, 'asc') },
             { label: 'Sort descending', checked: sorted === 'desc', action: () => this.sortBy(column, 'desc') },
-            ...(sorted ? [{ label: 'Clear sort', action: () => this.sortBy(column, null) }] : []),
+            ...further,
+            ...(this.sorts.length > 0 ? [{ label: 'Clear sort', action: () => this.clearSort() }] : []),
             { separator: true },
             {
                 label: 'Filter to',

package/src/charting/table/TableViewChart.js

@@ -58,13 +58,15 @@ export class TableViewChart extends TableChart {
 
         columns.forEach((c, i) => {
             const left = x0 + i * colW;
-            const sorted = view.sort?.column === c.key ? (view.sort.direction === 'asc' ? ' ▲' : ' ▼') : '';
+            // ▲ / ▼, and with several keys their order: "Region ▲1", "Revenue ▼2".
+            const key = view.sortOf(c.key);
+            const sorted = key === null ? '' : ` ${key.direction === 'asc' ? '▲' : '▼'}${view.sorts.length > 1 ? key.rank : ''}`;
             // In words: an arrow-like mark here read as a second sort arrow.
             const filtered = view.filters.some(f => f.column === c.key) ? ' (filtered)' : '';
             const head = this.renderer.rect(left, top, colW, ROW_H, TableChart.HEADER_FILL, null);
             // The label leaves room at the right for the ▾.
             const label = this._cell(`${c.label}${sorted}${filtered}`, c, left, top, colW - 16, { fontWeight: 'bold', fill: '#333' });
-            this._on(interactive, [head, label], () => view.toggleSort(c.key), 'Sort');
+            this._on(interactive, [head, label], (e) => view.toggleSort(c.key, { then: e?.shiftKey === true }), 'Sort (shift-click: then sort by)');
             const glyph = this._text(TableViewChart.MENU_GLYPH, left + colW - 8, top, { textAnchor: 'middle', fill: '#777' });
             this._on(interactive, [glyph], (e) => this.showMenu(e.clientX, e.clientY, view.columnMenu(c.key)), `${c.label} menu`);
         });