datavis-glide 4.0.2 → 4.1.0

package/src/renderers/grid/table.js

@@ -185,6 +185,7 @@ var GridTable = makeSubclass('GridTable', GridRenderer, function () {
 	self.super['GridRenderer'].ctor.apply(self, arguments);
 
 	self.selection = [];
+	self.cellSelection = null;
 	self.needsRedraw = false;
 	self.popupMenus = [];
 	self.csvLock = new Lock('GridTable/csv');
@@ -275,6 +276,7 @@ mixinEventHandling(GridTable, [
 	, 'renderBegin'
 	, 'renderEnd'
 	, 'selectionChange'
+	, 'cellSelectionChange'
 ]);
 
 // #_validateFeatures {{{2
@@ -818,9 +820,13 @@ GridTable.prototype._addSortingToHeader = function (data, orientation, spec, con
 	 *
 	 * @param {string} [dir]
 	 * What direction we're sorting by, ascending or descending.
+	 *
+	 * @param {number} [priority]
+	 * When this column is part of a multi-column sort, its 1-based position in the sort chain.  When
+	 * given, a numbered badge is shown next to the direction arrow.
 	 */
 
-	var replaceSortIndicator = function (span, dir) {
+	var replaceSortIndicator = function (span, dir, priority) {
 		if (!(span instanceof Element)) {
 			throw new Error('Call Error: `span` must be an Element');
 		}
@@ -832,6 +838,9 @@ GridTable.prototype._addSortingToHeader = function (data, orientation, spec, con
 				throw new Error('Call Error: `dir` must be either "ASC" or "DESC"');
 			}
 		}
+		if (priority != null && !_.isNumber(priority)) {
+			throw new Error('Call Error: `priority` must be null or a number');
+		}
 
 		var th = container.closest('th');
 
@@ -846,15 +855,72 @@ GridTable.prototype._addSortingToHeader = function (data, orientation, spec, con
 			iconName = dir.toUpperCase() === 'ASC' ? 'arrow-up' : 'arrow-down';
 		}
 
+		// Clear any prior content (icon and/or priority badge) before rebuilding.
+		while (span.firstChild) {
+			span.removeChild(span.firstChild);
+		}
+
 		var newIcon = createLucideSvg(iconName);
 		if (newIcon) {
 			newIcon.classList.add('wcdv_icon');
 			newIcon.setAttribute('data-icon', iconName);
-			while (span.firstChild) {
-				span.removeChild(span.firstChild);
-			}
 			span.appendChild(newIcon);
 		}
+
+		// Show a numbered badge when this column is one of several in a multi-column sort.
+		if (dir != null && priority != null) {
+			var badge = document.createElement('span');
+			badge.className = 'wcdv_sort_priority_badge';
+			badge.textContent = String(priority);
+			badge.setAttribute('aria-label', trans('GRID.TABLE.SORT_MENU.PRIORITY_BADGE', priority));
+			span.appendChild(badge);
+		}
+	};
+
+	/**
+	 * Compare two sort specs to see if they refer to the same column or aggregate, ignoring sort
+	 * direction.  Used to avoid adding duplicate entries to a sort chain.
+	 *
+	 * @param {object} a
+	 * @param {object} b
+	 * @returns {boolean}
+	 */
+
+	var sortEntriesMatch = function (a, b) {
+		return a.field === b.field
+			&& a.groupFieldIndex === b.groupFieldIndex
+			&& a.pivotFieldIndex === b.pivotFieldIndex
+			&& a.aggType === b.aggType
+			&& a.aggNum === b.aggNum
+		;
+	};
+
+	/**
+	 * Determine whether a sort entry applies to the current output mode (plain, grouped, or
+	 * pivotted).  The view keeps a single sort chain per orientation, but each output mode produces
+	 * its own kinds of sortable headers, so an entry created in one mode must not count towards the
+	 * sort in another.  This keeps each mode's sort independent.
+	 *
+	 * @param {object} entry
+	 * A sort chain entry.
+	 *
+	 * @returns {boolean}
+	 */
+
+	var sortEntryAppliesTo = function (entry) {
+		if (entry.pivotFieldIndex != null || entry.aggType === 'pivot' || entry.colVal != null || entry.rowVal != null) {
+			return !!data.isPivot;
+		}
+		if (entry.aggType === 'group') {
+			return !!data.isGroup;
+		}
+		if (entry.groupFieldIndex != null) {
+			return !!(data.isGroup || data.isPivot);
+		}
+		if (entry.field != null) {
+			return !!data.isPlain;
+		}
+		return true;
 	};
 
 	/**
@@ -866,9 +932,13 @@ GridTable.prototype._addSortingToHeader = function (data, orientation, spec, con
 	 * @param {number} [aggNum]
 	 * If missing, no aggregate number is added to the sort spec.  Used when sorting directly by the
 	 * field (e.g. in plain output) or by the group field index (e.g. in group detail output).
+	 *
+	 * @param {boolean} [additive]
+	 * When true, this column is appended to the existing sort chain (or its direction updated if it's
+	 * already in the chain) rather than replacing it.  Used by the per-row "add to sort" button.
 	 */
 
-	var setSort = function (dir, aggNum) {
+	var setSort = function (dir, aggNum, additive) {
 		if (!_.isString(dir)) {
 			throw new Error('Call Error: `dir` must be a string');
 		}
@@ -880,19 +950,64 @@ GridTable.prototype._addSortingToHeader = function (data, orientation, spec, con
 			throw new Error('Call Error: `aggNum` must be a number');
 		}
 
-		jQuery('button.wcdv_icon_button' + sortIcon_orientationClass + '.wcdv_sort_icon').each(function (i, elt) {
-			replaceSortIndicator(elt);
-		});
-
-		jQuery('button.wcdv_icon_button.' + sortIcon_class).each(function (i, elt) {
-			replaceSortIndicator(elt, dir);
-		});
-
 		spec.aggNum = aggNum;
 		spec.dir = dir;
 
-		var sortSpec = self.view.getSort() || {};
-		sortSpec[orientation] = deepCopy(spec);
+		// Deep-copy the view's current sort so we build a brand-new spec object.  `getSort()` returns
+		// the view's live internal object; mutating it in place would defeat the view's change
+		// detection (it compares the new spec to its current one), which would silently skip saving
+		// the updated sort to the perspective.
+		var sortSpec = deepCopy(self.view.getSort()) || {};
+
+		// The view stores each orientation's sort as a chain (array) of specs.  Older specs may be a
+		// bare object, so normalize to an array before working with it.
+		var chain = _.isArray(sortSpec[orientation])
+			? deepCopy(sortSpec[orientation])
+			: sortSpec[orientation] != null
+			? [deepCopy(sortSpec[orientation])]
+			: []
+		;
+
+		if (additive) {
+
+			// Add this column to the existing chain.  If it's already present, just update its
+			// direction so we never create duplicate entries for the same column.
+
+			var matchIndex = -1;
+			for (var ci = 0; ci < chain.length; ci++) {
+				if (sortEntriesMatch(chain[ci], spec)) {
+					matchIndex = ci;
+					break;
+				}
+			}
+			if (matchIndex < 0) {
+				chain.push(deepCopy(spec));
+			}
+			else {
+				chain[matchIndex].dir = dir;
+			}
+		}
+		else {
+
+			// Replace this output mode's sort with just this column, but keep any sort entries that
+			// belong to the other output modes so each mode keeps its own independent sort.
+
+			var preserved = _.filter(chain, function (entry) {
+				return !sortEntryAppliesTo(entry);
+			});
+			chain = preserved.concat([deepCopy(spec)]);
+
+			// Give immediate visual feedback before the view redraws.
+			jQuery('button.wcdv_icon_button' + sortIcon_orientationClass + '.wcdv_sort_icon').each(function (i, elt) {
+				replaceSortIndicator(elt);
+			});
+
+			jQuery('button.wcdv_icon_button.' + sortIcon_class).each(function (i, elt) {
+				replaceSortIndicator(elt, dir);
+			});
+		}
+
+		sortSpec[orientation] = chain;
 		self.view.setSort(sortSpec, self.makeProgress('Sort'));
 	};
 
@@ -936,9 +1051,17 @@ GridTable.prototype._addSortingToHeader = function (data, orientation, spec, con
 
 		sortIcon_menu.addItem(trans('GRID.TABLE.SORT_MENU.ASCENDING', name), 'arrow-up-narrow-wide', function () {
 			setSort('asc');
+		}, null, {
+			iconName: 'plus',
+			label: trans('GRID.TABLE.SORT_MENU.ADD_TO_SORT'),
+			callback: function () { setSort('asc', null, true); }
 		});
 		sortIcon_menu.addItem(trans('GRID.TABLE.SORT_MENU.DESCENDING', name), 'arrow-down-wide-narrow', function () {
 			setSort('desc');
+		}, null, {
+			iconName: 'plus',
+			label: trans('GRID.TABLE.SORT_MENU.ADD_TO_SORT'),
+			callback: function () { setSort('desc', null, true); }
 		});
 		sortIcon_menu.addSeparator();
 	}
@@ -954,9 +1077,21 @@ GridTable.prototype._addSortingToHeader = function (data, orientation, spec, con
 			//var aggType = aggInfo.instance.getType();
 			sortIcon_menu.addItem(trans('GRID.TABLE.SORT_MENU.ASCENDING', aggInfo.instance.getFullName()), 'arrow-up-narrow-wide', (function (n) {
 				return function () { setSort('asc', n); };
+			})(aggNum), null, (function (n) {
+				return {
+					iconName: 'plus',
+					label: trans('GRID.TABLE.SORT_MENU.ADD_TO_SORT'),
+					callback: function () { setSort('asc', n, true); }
+				};
 			})(aggNum));
 			sortIcon_menu.addItem(trans('GRID.TABLE.SORT_MENU.DESCENDING', aggInfo.instance.getFullName()), 'arrow-down-wide-narrow', (function (n) {
 				return function () { setSort('desc', n); };
+			})(aggNum), null, (function (n) {
+				return {
+					iconName: 'plus',
+					label: trans('GRID.TABLE.SORT_MENU.ADD_TO_SORT'),
+					callback: function () { setSort('desc', n, true); }
+				};
 			})(aggNum));
 			sortIcon_menu.addSeparator();
 		});
@@ -986,31 +1121,52 @@ GridTable.prototype._addSortingToHeader = function (data, orientation, spec, con
 	var sortSpec_copy = deepCopy(self.view.getSort());
 	var spec_copy = deepCopy(spec);
 
-	if (sortSpec_copy[orientation]) {
-		var currentDir = sortSpec_copy[orientation].dir;
+	if (sortSpec_copy && sortSpec_copy[orientation]) {
+
+		// The view stores each orientation's sort as a chain (array) of specs.  Normalize to an array
+		// so we can light up every column that participates in the sort, each with its 1-based
+		// priority.  Crucially, for grid tables that redraw when the view is updated, this is the only
+		// way you're ever going to see what the sort is.
+
+		var chain = _.isArray(sortSpec_copy[orientation])
+			? sortSpec_copy[orientation]
+			: [sortSpec_copy[orientation]]
+		;
 
-		// Delete things that would be in the view's spec that aren't in the spec we were provided by
-		// the caller (because they're independent of the user interface reflecting the sort).  This way
-		// we can just do an object-object comparison to see if what we just made corresponds to the
-		// sort that is already set in the view.  Crucially, for grid tables that redraw when the view
-		// is updated, this is the only way you're ever going to see what the sort is.
+		// Restrict the chain to the entries that apply to the current output mode (plain, grouped, or
+		// pivotted), so the priority numbers reflect only this mode's sort and aren't inflated by
+		// sorts configured in the other modes.
 
-		delete sortSpec_copy[orientation].dir;
+		var applicable = _.filter(chain, sortEntryAppliesTo);
 
-		// Note that `aggNum` is an important part of the spec when sorting group or pivot aggregates
-		// (i.e. total rows/columns) because they have their own row/column, and aren't thrown together
-		// like cell aggregates are.
+		// `aggNum` is an important part of the spec when sorting group or pivot aggregates (i.e. total
+		// rows/columns) because they have their own row/column, and aren't thrown together like cell
+		// aggregates are.  When it's not relevant, ignore it on both sides of the comparison.
 
 		if (spec.aggType == null) {
-			delete sortSpec_copy[orientation].aggNum;
 			delete spec_copy.aggNum;
 		}
 
-		self.logDebug(self.makeLogTag() + ' orientation = %s ; spec = %O ; current = %O ; dir = %s',
-			self.toString(), orientation, spec_copy, sortSpec_copy[orientation], currentDir);
+		for (var pi = 0; pi < applicable.length; pi++) {
+
+			// Compare each chain entry against the spec we were provided, ignoring direction (which is
+			// independent of the user interface reflecting the sort).
+
+			var entry = deepCopy(applicable[pi]);
+			var entryDir = entry.dir;
+			delete entry.dir;
+			if (spec.aggType == null) {
+				delete entry.aggNum;
+			}
+
+			if (_.isEqual(entry, spec_copy)) {
 
-		if (_.isEqual(sortSpec_copy[orientation], spec_copy)) {
-			replaceSortIndicator(sortIcon_btn, currentDir);
+				// Only show a numbered priority badge when the sort spans more than one column.
+
+				var priority = applicable.length > 1 ? pi + 1 : null;
+				replaceSortIndicator(sortIcon_btn, entryDir, priority);
+				break;
+			}
 		}
 	}
 };
@@ -1600,6 +1756,15 @@ GridTable.prototype.draw = function (root, opts, cont) {
 			}
 		}
 
+		if (self.features.cellSelect && data.isPlain) {
+			if (typeof self._addCellSelectHandler !== 'function') {
+				self.logWarning(self.makeLogTag() + ' Requested feature "cellSelect" is not available: `_addCellSelectHandler` method does not exist');
+			}
+			else {
+				self._addCellSelectHandler();
+			}
+		}
+
 		if (self.features.rowReorder) {
 			self._addRowReorderHandler();
 		}
@@ -2161,6 +2326,130 @@ GridTable.prototype.getCsv = function () {
 	return self.csv.toString();
 };
 
+// #_getPlainVisibleColumns {{{2
+
+GridTable.prototype._getPlainVisibleColumns = function () {
+	var self = this;
+
+	return _.filter(determineColumns(self.colConfig, self.data, self.typeInfo), function (field) {
+		var fcc = self.colConfig.get(field) || {};
+		return !fcc.isHidden;
+	});
+};
+
+// #_getPlainCellDisplayValue {{{2
+
+GridTable.prototype._getPlainCellDisplayValue = function (field, cell) {
+	var self = this;
+	var fcc = self.colConfig.get(field) || {};
+	var value = format(fcc, self.typeInfo.get(field), cell);
+
+	if (value instanceof Element) {
+		return jQuery(value).text();
+	}
+	if (value instanceof jQuery) {
+		return value.text();
+	}
+	if (value == null) {
+		return '';
+	}
+	if (fcc.allowHtml && self.typeInfo.get(field).type === 'string' && typeof value === 'string' && value.charAt(0) === '<') {
+		return jQuery(value).text();
+	}
+
+	return value;
+};
+
+// #_getPlainCellCopyValue {{{2
+
+GridTable.prototype._getPlainCellCopyValue = function (rowData, field) {
+	var self = this;
+	var fcc = self.colConfig.get(field) || {};
+	var cell = rowData[field] || {};
+	var value = cell.cachedRender;
+
+	if (value == null) {
+		value = cell.value;
+	}
+	if (value == null) {
+		value = cell.orig;
+	}
+
+	if (value instanceof Element) {
+		return jQuery(value).text();
+	}
+	if (value instanceof jQuery) {
+		return value.text();
+	}
+	if (value == null) {
+		return '';
+	}
+	if (fcc.allowHtml && self.typeInfo.get(field).type === 'string' && typeof value === 'string' && value.charAt(0) === '<') {
+		return jQuery(value).text();
+	}
+
+	return value;
+};
+
+// #getSelectedDataAsTsv {{{2
+
+GridTable.prototype.getSelectedDataAsTsv = function () {
+	var self = this;
+	var selectedRows = self.getSelection().rows;
+	var fields = self._getPlainVisibleColumns();
+	var tsv = new Csv({
+		separator: '\t'
+	});
+
+	if (selectedRows.length === 0 || fields.length === 0) {
+		return '';
+	}
+
+	tsv.addRow();
+	_.each(fields, function (field) {
+		var fcc = self.colConfig.get(field) || {};
+		tsv.addCol(fcc.displayText || field);
+	});
+
+	_.each(selectedRows, function (rowData) {
+		tsv.addRow();
+		_.each(fields, function (field) {
+			tsv.addCol(self._getPlainCellDisplayValue(field, rowData[field]));
+		});
+	});
+
+	return tsv.toString();
+};
+
+// #getSelectedCellsAsTsv {{{2
+
+GridTable.prototype.getSelectedCellsAsTsv = function () {
+	var self = this;
+	var selection = self.getCellSelection();
+	var tsv = new Csv({
+		separator: '\t'
+	});
+
+	if (selection.rowNums.length === 0 || selection.fields.length === 0) {
+		return '';
+	}
+
+	_.each(selection.rowNums, function (rowNum) {
+		var rowData = self.data.dataByRowId[rowNum];
+
+		if (rowData == null) {
+			return;
+		}
+
+		tsv.addRow();
+		_.each(selection.fields, function (field) {
+			tsv.addCol(self._getPlainCellCopyValue(rowData, field));
+		});
+	});
+
+	return tsv.toString();
+};
+
 // #getSelection {{{2
 
 /**
@@ -2191,6 +2480,63 @@ GridTable.prototype.getSelection = function () {
 	};
 };
 
+// #getCellSelection {{{2
+
+GridTable.prototype.getCellSelection = function () {
+	var self = this;
+	var selection = self.cellSelection;
+	var rowNums = [];
+	var fields = [];
+	var cells = [];
+
+	if (selection == null || !_.isArray(selection.rowNums) || !_.isArray(selection.fields)) {
+		return {
+			rowNums: rowNums,
+			fields: fields,
+			cells: cells
+		};
+	}
+
+	rowNums = selection.rowNums.slice();
+	fields = selection.fields.slice();
+
+	_.each(rowNums, function (rowNum) {
+		_.each(fields, function (field) {
+			cells.push({
+				rowNum: rowNum,
+				field: field
+			});
+		});
+	});
+
+	return {
+		rowNums: rowNums,
+		fields: fields,
+		cells: cells,
+		anchor: selection.anchor,
+		focus: selection.focus
+	};
+};
+
+// #clearCellSelection {{{2
+
+GridTable.prototype.clearCellSelection = function () {
+	var self = this;
+	var prevSelection = self.getCellSelection();
+
+	if (prevSelection.cells.length === 0) {
+		return;
+	}
+
+	self.cellSelection = null;
+
+	if (typeof self._clearCellSelectionGui === 'function') {
+		self._clearCellSelectionGui();
+	}
+
+	self.fire('cellSelectionChange', null, self.getCellSelection());
+};
+
 // #setSelection {{{2
 
 /**
@@ -2206,6 +2552,8 @@ GridTable.prototype.setSelection = function (what) {
 	var self = this;
 	var data = self.data.data;
 
+	self.clearCellSelection();
+
 	if (!self.features.rowSelect) {
 		return;
 	}
@@ -2261,6 +2609,8 @@ GridTable.prototype.select = function (what) {
 	var self = this;
 	var data = self.data.data;
 
+	self.clearCellSelection();
+
 	if (self.data.isGroup) {
 		data = _.flatten(data);
 	}
@@ -2321,6 +2671,8 @@ GridTable.prototype.unselect = function (what) {
 	var self = this;
 	var data = self.data.data;
 
+	self.clearCellSelection();
+
 	if (self.data.isGroup) {
 		data = _.flatten(data);
 	}

package/src/ui/popup_menu.js

@@ -42,9 +42,22 @@ var PopupMenu = makeSubclass('PopupMenu', Object, function () {
  *
  * @param {*} [userdata]
  * Arbitrary data passed to the callback when this item is clicked.
+ *
+ * @param {object} [action]
+ * An optional secondary action rendered as a trailing button on the right of the item.  Clicking it
+ * does not trigger the item's primary callback.
+ *
+ * @param {string} action.iconName
+ * A Lucide icon name for the action button.
+ *
+ * @param {string} action.label
+ * Accessible label and tooltip for the action button.
+ *
+ * @param {function} action.callback
+ * Called when the action button is clicked.  Receives `userdata` as its argument.
  */
 
-PopupMenu.prototype.addItem = function (label, iconName, callback, userdata) {
+PopupMenu.prototype.addItem = function (label, iconName, callback, userdata, action) {
 	var self = this;
 
 	self.items.push({
@@ -52,6 +65,7 @@ PopupMenu.prototype.addItem = function (label, iconName, callback, userdata) {
 		iconName: iconName,
 		callback: callback,
 		userdata: userdata,
+		action: action,
 		separator: false
 	});
 };
@@ -128,6 +142,34 @@ PopupMenu.prototype.open = function (anchorElement) {
 			});
 		})(entry);
 
+		// Optionally render a trailing action button that performs a secondary action without
+		// triggering the item's primary callback.
+		if (entry.action) {
+			var actionBtn = document.createElement('button');
+			actionBtn.className = 'wcdv-popup-menu-item-action wcdv_icon_button';
+			actionBtn.setAttribute('type', 'button');
+			if (entry.action.label) {
+				actionBtn.setAttribute('aria-label', entry.action.label);
+				actionBtn.setAttribute('title', entry.action.label);
+			}
+			if (entry.action.iconName) {
+				var actionIconElt = icon(entry.action.iconName).get(0);
+				if (actionIconElt) {
+					actionBtn.appendChild(actionIconElt);
+				}
+			}
+			(function (e) {
+				actionBtn.addEventListener('click', function (evt) {
+					evt.stopPropagation();
+					self.close();
+					if (typeof e.action.callback === 'function') {
+						e.action.callback(e.userdata);
+					}
+				});
+			})(entry);
+			item.appendChild(actionBtn);
+		}
+
 		root.appendChild(item);
 	}
 

package/src/ui/toast.js

@@ -0,0 +1,64 @@
+import jQuery from 'jquery';
+
+import {
+	makeSubclass,
+} from '../util/misc.js';
+
+var Toast = makeSubclass('Toast', Object, function () {
+	var self = this;
+
+	self._hideTimer = null;
+
+	self.ui = {
+		root: jQuery('<div>', {
+			'class': 'wcdv_toast',
+			'role': 'status',
+			'aria-live': 'polite',
+			'aria-atomic': 'true'
+		})
+	};
+
+	jQuery(document.body).append(self.ui.root);
+});
+
+Toast.prototype.show = function (text) {
+	var self = this;
+
+	if (self._hideTimer != null) {
+		clearTimeout(self._hideTimer);
+		self._hideTimer = null;
+	}
+
+	self.ui.root.text(text);
+	self.ui.root.addClass('wcdv_toast_visible');
+
+	self._hideTimer = setTimeout(function () {
+		self.hide();
+	}, 2000);
+};
+
+Toast.prototype.hide = function () {
+	var self = this;
+
+	if (self._hideTimer != null) {
+		clearTimeout(self._hideTimer);
+		self._hideTimer = null;
+	}
+
+	self.ui.root.removeClass('wcdv_toast_visible');
+};
+
+Toast.prototype.destroy = function () {
+	var self = this;
+
+	if (self._hideTimer != null) {
+		clearTimeout(self._hideTimer);
+		self._hideTimer = null;
+	}
+
+	if (self.ui != null && self.ui.root != null) {
+		self.ui.root.remove();
+	}
+};
+
+export default Toast;