mascot-vis 1.10.1 → 1.11.1

package/dist/mascot.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// version: 1.10.1
+// version: 1.11.1
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3'), require('pixi.js')) :
 	typeof define === 'function' && define.amd ? define(['exports', 'd3', 'pixi.js'], factory) :
@@ -256,9 +256,22 @@
 		INCORRECT_CONSTRAINT_INFO: "Constrain information is incorreclty passed",
 		FEATURE_NOT_IMPLEMENTED: "This feature has not been implemented yet",
 		LAYOUT_WITHOUT_TREE: "The layout can only be applied to a tree",
-		UNSUPPORTED_FIELDTYPE: "Unsupported field type for encoding "
+		UNSUPPORTED_FIELDTYPE: "Unsupported field type for encoding ",
+		CANNOT_CLASSIFY: "Cannot classify items in "
 	};
 
+	const categoricalColorSchemes = [
+		"schemeCategory10", "schemeAccent", "schemeDark2", "schemePaired", "schemePastel1", "schemePastel2", "schemeSet1", "schemeSet2", "schemeSet3", "schemeTableau10"
+	];
+
+	const divergingColorSchemes = [
+		"schemeBrBG", "schemePRGn", "schemePiYG", "schemePuOr", "schemeRdBu", "schemeRdGy", "schemeRdYlBu", "schemeRdYlGn", "schemeSpectral"
+	];
+
+	const sequentialColorSchemes = [
+		"schemeBlues", "schemeGreens", "schemeGreys", "schemeOranges", "schemePurples", "schemeReds", "schemeBuGn", "schemeBuPu", "schemeGnBu", "schemeOrRd", "schemePuBuGn", "schemePuBu", "schemePuRd", "schemeRdPu", "schemeYlGnBu", "schemeYlGn", "schemeYlOrBr", "schemeYlOrRd"
+	];
+
 	class Layout {
 
 	    constructor(args){
@@ -284,6 +297,8 @@
 			this._colGap = "colGap" in args && args["colGap"] !== undefined ? args["colGap"] : 5;
 			this._cellHorzAlignment = "horzCellAlignment" in args && this._validateCellAlignment("h", args["horzCellAlignment"]) ? args["horzCellAlignment"] : Alignment.Left;
 			this._cellVertAlignment = "vertCellAlignment" in args && this._validateCellAlignment("v", args["vertCellAlignment"]) ? args["vertCellAlignment"] : Alignment.Bottom;
+			if (!this._numCols && !this._numRows)
+				this._numRows = 1;
 		}
 
 		_validateCellAlignment(orientation, v) {
@@ -651,6 +666,20 @@
 		get horzCellAlignment() {
 			return this._cellHorzAlignment;
 		}
+
+		//accepts two formats: a two-element array, or a string
+		set direction(d) {
+			if (Array.isArray(d) && d.length === 2) {
+				this._dir = d;
+			} else {
+				this._dir = d.split("_");
+			}
+			this.run();
+		}
+
+		get direction() {
+			return this._dir.join("_");
+		}
 	}
 
 	GridLayout.direction = {
@@ -4144,7 +4173,16 @@
 					if (this.scale) {
 						this.scale.domain = Array.from(new Set(this.scale.domain.concat(this.data)));
 					} else {
-						this.scale = createScale("ordinalColor", this._scheme ? this._scheme: "schemeCategory10");
+						let args = {scheme: "schemeCategory10"};
+						if (this._scheme) {
+							if (categoricalColorSchemes.indexOf(this._scheme) >= 0) {
+								args.scheme = this._scheme;
+							} else if (divergingColorSchemes.indexOf(this._scheme) >= 0 || sequentialColorSchemes.indexOf(this._scheme) >= 0) {
+								args.scheme = this._scheme;
+								args.size = this.data.length;
+							}
+						}
+						this.scale = createScale("ordinalColor", args);
 						this.scale.domain = this.data;
 						if (this._mapping) {
 							let range = this.scale.domain.map(d => d in this._mapping ? this._mapping[d] : "black");
@@ -5311,6 +5349,7 @@
 					r.push(f);
 				}
 			}
+			r.sort((a,b) => this.getUniqueFieldValues(a).length - this.getUniqueFieldValues(b).length);
 			return r;
 		}
 
@@ -7055,6 +7094,12 @@
 	        return false;
 	    }
 
+	    _doTranslate(dx, dy) {
+	        super._doTranslate(dx, dy);
+	        this._x += dx;
+	        this._y += dy;
+	    }
+
 	}
 
 	class Glyph extends Group {
@@ -7317,7 +7362,13 @@
 	        this.direction = d;
 	        this.items = items;
 	        this.type = ConstraintType.Align;
-	        this.id = this.type + "_" + [...new Set(this.items.map(d => d.classId))].join("_");
+	        this._orientation = [Alignment.Top, Alignment.Middle, Alignment.Bottom].indexOf(d) >= 0 ? Orientation.Vertical : Orientation.Horizontal;
+	        this._itemIds = this.items.map(d => d.classId).sort().join("_");
+	        this.id = this.type + "_" + this._itemIds + "_" + this._orientation;
+	    }
+
+	    get orientation() {
+	        return this._orientation;
 	    }
 
 	    apply() {
@@ -7330,7 +7381,7 @@
 	            baseline = d3__namespace.mean(this.items.map(d => d.bounds[dir]));
 	        
 	        let delta = this.items.map(d => baseline - d.bounds[dir]),
-	            axis = dir == Alignment.TOP || dir == Alignment.Middle || dir == Alignment.Bottom ? "y" : "x";
+	            axis = dir == Alignment.Top || dir == Alignment.Middle || dir == Alignment.Bottom ? "y" : "x";
 	        this.items.forEach((d,i) => {
 	            if (d.parent && d.parent.layout && d.parent.layout.type == LayoutType.Stack){
 	                let dx = axis == "x" ? delta[i] : 0,
@@ -8191,7 +8242,7 @@
 			gl.forEach(l => l.updateLinePositions());
 	    },
 
-	    layoutChanged: function(item, peers, reGenerateAxes) {
+	    layoutChanged: function(item, peers, props) {
 	        let scene = item.getScene();
 	        scene._relayoutAncestors(item, peers);
 
@@ -8203,6 +8254,36 @@
 	        for (let i of items)
 				i.getScene()._reapplyConstraints(i);
 
+	        let reGenerateAxes = false;
+	        for (let p of props) {
+	            if (["numRows", "numCols", "layout", "childrenOrder"].indexOf(p) >= 0) {
+	                reGenerateAxes = true;
+	                break;
+	            }
+	        }
+
+	        //if grid layout changes to a single column or row, or stack layout's orientation changes, update axis channel
+	        let updateChannel = false, channel;
+	        if (item.layout) {
+	            if (item.layout.type === LayoutType.Grid && (item.layout.numRows === 1 || item.layout.numCols === 1)) {
+	                updateChannel = true;
+	                channel = item.layout.numRows === 1 ? "x" : "y";
+	            } else if (item.layout.type === LayoutType.Stack && props.indexOf("orientation") >= 0) {
+	                updateChannel = true;
+	                channel = item.layout.orientation === Orientation.Horizontal ? "x" : "y";
+	            }
+	        }
+	        if (updateChannel) {
+	            let axes = scene.getRelatedAxes(item).filter(d => d instanceof LayoutAxis && d._item.parent.classId === item.classId);
+	            for (let a of axes) {
+	                scene.removeItem(a);
+	                let args = a.toJSON().args;
+	                delete args["orientation"];
+	                args.item = item.firstChild;
+	                scene.axis(channel, a.field, args);
+	            }
+	        }
+	        
 	        if (reGenerateAxes) {
 	            scene.reCreateRelatedAxes(item);
 	        } else {
@@ -8993,6 +9074,42 @@
 	    }
 	}
 
+	function classifyCollectionChildren(scene, c, field, layout) {
+	    let peers = getPeers(c, scene);
+	    for (let p of peers) {
+	        let collections = {}, cid, items = p.children;
+	        for (let item of items) {
+	            let v = item.dataScope.getFieldValue(field);
+	            if (!(v in collections)) {
+	                collections[v] = [];
+	            }
+	            collections[v].push(item);
+	        }
+	        let tbl = items[0].dataScope._dt; //results = []; //,
+	        for (let v in collections) {
+	            let coll = scene.collection();
+	            p.addChild(coll);
+	            if (cid === undefined)
+	                cid = coll.id;
+	            coll.classId = cid;
+	            coll.dataScope = p.dataScope ? p.dataScope.cross(field, v) : new DataScope(tbl).cross(field, v);
+	            for (let c of collections[v]) {
+	                coll.addChild(c);
+	            }
+	            // if (layout)
+	            //     coll.layout = layout;
+	            //results.push(coll);
+	        }
+	        // if (oldParent.children.length === 0) {
+	        //     oldParent.parent.removeChild(oldParent);
+	        // }
+	    }
+
+	    if (layout)
+	            scene.setProperties(c.firstChild, {layout: layout});
+	    //return results;
+	}
+
 	class Scene extends Group{
 
 		constructor(args){
@@ -9241,6 +9358,23 @@
 			return collection;
 		}
 
+		classify(item, param){
+			if (!canClassify(item)){
+				throw Errors.CANNOT_CLASSIFY + item.type;
+			}
+
+			let args = param ? param : {},
+				field = args["field"] ? args["field"] : DataTable.RowID,
+				dt = item.firstChild.dataScope.dataTable,
+				layout = args.layout;
+			validateField(field, dt);
+					
+			classifyCollectionChildren(this, item, field, layout);
+
+			//SceneValidator.markDivided(item, collection);
+			return item;
+		}
+
 		_validateEncodeArgs(item, args) {
 			if (!item || !("channel" in args) || !("field" in args)) {
 				throw Errors.INCOMPLETE_BINDING_INFO;
@@ -9423,6 +9557,24 @@
 			this.constraints = {};
 		}
 
+		removeConstraint(c) {
+			delete this.constraints[c.id];
+		}
+
+		getRelatedConstraints(items) {
+			let cstrs = [];
+			for (let cid in this.constraints) {
+				let c = this.constraints[cid];
+				switch (c.type) {
+					case ConstraintType.Align:
+						if (c._itemIds === items.map(d => d.classId).sort().join("_"))
+							cstrs.push(c);
+						break;
+				}
+			}
+			return cstrs;
+		}
+
 		// alignInCell(item, direction) {
 		// 	//TODO replace grid.vertCellAlignment and grid.horzCellAlignment
 		// }
@@ -9785,36 +9937,6 @@
 				p[method](...args);
 		}
 
-		classify(items, field, parent){
-			let collections = {}, cid, oldParent = items[0].parent;
-			for (let item of items) {
-				let v = item.dataScope.getFieldValue(field);
-				if (!(v in collections)) {
-					collections[v] = [];
-				}
-				collections[v].push(item);
-			}
-			let results = [], tbl = items[0].dataScope._dt;
-			for (let v in collections) {
-				let coll = this.collection();
-				parent.addChild(coll);
-				if (cid === undefined)
-					cid = coll.id;
-				coll.classId = cid;
-				coll.dataScope = new DataScope(tbl).cross(field, v);
-				for (let c of collections[v]) {
-					coll.addChild(c);
-				}
-				results.push(coll);
-			}
-
-			if (oldParent.children.length === 0) {
-				oldParent.parent.removeChild(oldParent);
-			}
-
-			return results;
-		}
-
 		getEncodingByItem(item, channel) {
 			let enc = this.encodings[getEncodingKey(item)];
 			if (enc && enc[channel]) {
@@ -9931,6 +10053,7 @@
 				}
 			}
 
+			//invoke SceneValidator accordingly
 			let props = Object.keys(result).filter(d => result[d]);
 			let sizeProps = ["width", "height", "fontSize", "area", "radius"];
 			for (let s of sizeProps) {
@@ -9939,17 +10062,15 @@
 					break;
 				}
 			}
+
 			if (props.indexOf("baseline") >=0 && item.type === ItemType.Area)
 				SceneValidator.areaRebased(item, peers);
 
-			let layoutProps = ["layout", "rowGap", "colGap", "numRows", "numCols", "vertCellAlignment", "horzCellAlignment"];
-			for (let l of layoutProps) {
-				if (props.indexOf(l) >= 0) {
-					let reGenerateAxes = (props.indexOf("numRows") >= 0 || props.indexOf("numCols") >= 0 || props.indexOf("layout") >= 0);
-					SceneValidator.layoutChanged(peers[0], peers, reGenerateAxes);
-					break;
-				}
-			}
+			let layoutProps = ["layout", "rowGap", "colGap", "numRows", "numCols", "orientation", "vertCellAlignment", "horzCellAlignment", "direction", "childrenOrder"];
+			let changed = props.filter(d => layoutProps.indexOf(d) >= 0);
+			if (changed.length > 0)
+				SceneValidator.layoutChanged(peers[0], peers, changed);
+
 			return result;
 			//TODO: relayout if needed (typically Layout or setProperty should happen before encoding)
 		}
@@ -10569,7 +10690,7 @@
 					this._scale = d3__namespace.scaleOrdinal();
 					break;
 				case "ordinalColor":
-					this._scale = d3__namespace.scaleOrdinal(args && typeof(args) == "string"? d3__namespace[args] : d3__namespace.schemeCategory10);
+					this._scale = d3__namespace.scaleOrdinal(args? args.size ? d3__namespace[args.scheme][args.size] : d3__namespace[args.scheme] : d3__namespace.schemeCategory10);
 					break;
 				case "power":
 					this._scale = d3__namespace.scalePow().exponent(2);
@@ -23970,8 +24091,13 @@
 		if (!item.children || item.children.length == 0) {
 			return item.contains(x, y) && item.type !== ItemType.Scene ? item : null
 		}
-		for (let i = item.children.length - 1; i >= 0; i--) {
-			let c = item.children[i];
+		let children = item.children;
+		if (item.type === ItemType.Scene) {
+			children = children.slice();
+			children.sort((a,b) => isGuide(a) ? 1 : isGuide(b) ? -1 : 0 );
+		}
+		for (let i = children.length - 1; i >= 0; i--) {
+			let c = children[i];
 			if (c.contains(x, y))
 				return c;
 		}
@@ -24031,6 +24157,20 @@
 		}
 	}
 
+	function canClassify(item) {
+		if (item.type !== ItemType.Collection) return false;
+		if (item.children.length < 2) return false;
+		// if (!Array.isArray(items)) return false;
+		// if (items.length < 1) return false;
+		// for (let i of items) {
+		// 	if (!i.dataScope)
+		// 		return false;
+		// }
+		// let tbls = uniqueStrings(items.map(d => d.dataScope.dataTable.name));
+		// if (tbls.length > 1) return false;
+		return true;
+	}
+
 	function getPeersInScene(item) {
 		if (item.type == "vertex" || item.type == "segment") {
 			return getPeers(item, item.parent.getScene());
@@ -24039,6 +24179,7 @@
 		}
 	}
 
+	exports.canClassify = canClassify;
 	exports.canDensify = canDensify;
 	exports.canDivide = canDivide;
 	exports.canRepeat = canRepeat;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mascot-vis",
-	"version": "1.10.1",
+	"version": "1.11.1",
 	"description": "Manipulable Semantic Components in Data Visualization",
 	"scripts": {
 		"build": "rollup --config",