mascot-vis 1.7.4 → 1.8.0

package/dist/mascot.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// version: 1.7.4
+// version: 1.8.0
 (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) :
@@ -1980,12 +1980,36 @@
 		}
 
 		contains(x, y) {
+			let svgData = this.getSVGPathData();
+			if (svgData !== "") {
+				let ctx = CanvasProvider.getContext(),
+						p = new Path2D(svgData);
+				ctx.lineWidth = Math.max(this.strokeWidth, 2.5);
+				ctx.stroke(p);
+				return ctx.isPointInPath(p, x, y);
+			} 
 			if (!this._bounds) {
 				this._updateBounds();
 			}
 			return this._bounds.contains(x, y);
 		}
 
+		getSVGPathData() {
+			let d = "";
+			for (let i of this.children) {
+				if (i.getSVGPathData)
+					d += i.getSVGPathData();
+				else if (i.bounds) {
+					let b = i.bounds;
+					d += ["M", b.left, b.top].join(" ");
+					d += ["L", b.right, b.top].join(" ");
+					d += ["L", b.right, b.bottom].join(" ");
+					d += ["L", b.left, b.bottom, "Z"].join(" ");
+				}
+			}
+			return d;
+		}
+
 		toJSON() {
 			let json = {};
 			json.type = this.type;
@@ -2738,7 +2762,8 @@
 			case ItemType.Ring:
 				return _doRingDivide(scene, compnt, orientation, f, datatable);
 			case ItemType.Pie:
-				return _doPieDivide(scene, compnt, orientation, f, datatable);
+			case ItemType.Arc:
+				return _doArcDivide(scene, compnt, orientation, f, datatable);
 		}
 		
 	}
@@ -2936,7 +2961,7 @@
 		return toReturn;
 	}
 
-	function _doPieDivide(scene, compnt, o, field, datatable) {
+	function _doArcDivide(scene, compnt, o, field, datatable) {
 		let toReturn, orientation = o ? o : Orientation.Radial;
 		let peers = getPeers(compnt, scene);
 		let collClassId;
@@ -3819,7 +3844,8 @@
 			for (let enc of this.scale.encodings)
 				items = items.concat(enc.items);
 			if (channel == "x") {
-				let layout = getClosestLayout(this.anyItem);
+				//let layout = getClosestLayout(this.anyItem);
+				let layout = getTopLevelCollection(this.anyItem) ? getTopLevelCollection(this.anyItem).layout : getClosestLayout(this.anyItem);
 				if (layout && layout.type == LayoutType.Grid){
 					//do not use scale.offset, use cell bounds
 					for (let i = 0; i < this.items.length; i++) {
@@ -3855,7 +3881,8 @@
 				}
 				
 			} else {//channel y
-				let layout = getClosestLayout(this.anyItem);
+				//let layout = getClosestLayout(this.anyItem);
+				let layout = getTopLevelCollection(this.anyItem) ? getTopLevelCollection(this.anyItem).layout : getClosestLayout(this.anyItem);
 				if (layout && layout.type == LayoutType.Grid){
 					let cellBounds = this.items.map(d => getCellBoundsInLayout(d));
 					for (let i = 0; i < this.items.length; i++) {
@@ -3986,9 +4013,6 @@
 
 		encoding._map = function() {
 			switch (this.datatable.getFieldType(this.field)) {
-				case DataType.Date:
-					break;
-
 				case DataType.Boolean:
 					if (!this.scale) {
 						this.scale = createScale("ordinalColor");
@@ -4012,7 +4036,7 @@
 					}
 					break;
 
-				default: //integer or number
+				default: //number or date
 					if (this.scale) {
 						if (!this._mapping) {
 							let values = this.scale.domain.concat(this.data);
@@ -4110,7 +4134,7 @@
 		return encoding;
 	}
 
-	function bindToArea(encoding){
+	function bindToAreaMark(encoding){
 
 		encoding._query = function() {
 			this.data = [];
@@ -4241,10 +4265,11 @@
 			if (channel === "width" || channel === "height") {
 				let closestLayout = getClosestLayout(this.areas[0]);
 				if (closestLayout) {
-					let vidx = 0;
-					for (let area of this.areas) {
-						let cb = getCellBoundsInLayout(area),
-							layout = getClosestLayout(area);
+					let vidx = 0, cellBounds = this.areas.map(d => getCellBoundsInLayout(d)), layouts = this.areas.map(d => getClosestLayout(d));
+					for (let [aidx, area] of this.areas.entries()) {
+						let cb = cellBounds[aidx], layout = layouts[aidx];
+						// let cb = getCellBoundsInLayout(area),
+						// 	layout = getClosestLayout(area);
 						for (let i = 0; i < area.vertices.length; i++) {
 							let v = this._vertices[i + vidx],
 								dx, dy;
@@ -4585,9 +4610,10 @@
 		//optional itm specifies which scale range to get in the case of small multiples
 		getScaleRange(itm) {
 			let item = itm ? itm : this.anyItem;
-			if (item.type == ItemType.Area) {
-				let AreaOrientation = CheckAreaOrien(item);
-				let layout = getClosestLayout(item);
+			if (item.type == ItemType.Area || (item.type == "vertex" && item.parent.type == ItemType.Area)) {
+				let area = item.type == ItemType.Area ? item : item.parent;
+				let AreaOrientation = CheckAreaOrien(area);
+				let layout = getClosestLayout(area);
 				let alignment;
 				if (layout) {
 					if (AreaOrientation == Orientation.Vertical) {
@@ -4601,10 +4627,10 @@
 					// 				: (layout.type == LayoutType.Stack ? layout._vertCellAlignment == Alignment.Bottom : layout._cellVertAlignment == Alignment.Bottom)
 				}
 				else {
-					alignment = AreaOrientation == Orientation.Vertical ? item.baseline == Alignment.Left : item.baseline == Alignment.Bottom;
+					alignment = AreaOrientation == Orientation.Vertical ? area.baseline == Alignment.Left : area.baseline == Alignment.Bottom;
 				}
 				// let DomainToBaseline = this.scale.domain[1] > this.scale.domain[0] ? "default" : "opposite"; // controlling the alignment for the axis and the chart
-				let cb = getCellBoundsInGridLayout(item);
+				let cb = getCellBoundsInGridLayout(area);
 				if (cb) {
 					switch (this.channel) {
 						case "x":
@@ -4633,13 +4659,13 @@
 					switch (this.channel) {
 						case "width":
 						case "height": {
-							let vertices = getPeers(item.firstVertex, this.scene);
+							let vertices = this._vertices; // getPeers(item.firstVertex, this.scene);
 							let offset = alignment ? Math.max(...vertices.map(d => d["y"])) : Math.min(...vertices.map(d => d["y"]));
 							return alignment ? [offset, offset - this.scale.rangeExtent] : [offset + this.scale.rangeExtent, offset];
 						}
 						case "x":
 						case "y": {
-							let vertices = getPeers(item.firstVertex, this.scene);
+							let vertices = getPeers(area.firstVertex, this.scene);
 							let offset = Math.min(...vertices.map(d => d["x"]));
 							return [offset, offset + this.scale.rangeExtent];
 						}
@@ -4648,13 +4674,13 @@
 					switch (this.channel) {	
 						case "x":
 						case "y": {
-							let vertices = getPeers(item.firstVertex, this.scene);
+							let vertices = getPeers(area.firstVertex, this.scene);
 							let offset = Math.max(...vertices.map(d => d["y"]));
 							return [offset, offset - this.scale.rangeExtent];
 						}
 						case "height":
 						case "width": {
-							let vertices = getPeers(item.firstVertex, this.scene);
+							let vertices = getPeers(area.firstVertex, this.scene);
 							let offset = alignment ? Math.min(...vertices.map(d => d["x"])) : Math.max(...vertices.map(d => d["x"]));
 							return alignment ? [offset, offset + this.scale.rangeExtent] : [offset - this.scale.rangeExtent, offset];
 						}
@@ -6608,6 +6634,7 @@
 	            case DataType.String:
 	                this._createCategoricalColorLegend(scene, f);
 	                break;
+	            case DataType.Date:
 	            case DataType.Number:
 	            case DataType.Integer:
 	                this._createNumericalColorLegend(scene, f);
@@ -6662,21 +6689,27 @@
 	                });
 	            }
 	        } else {
-	            let domain = this.encoding.scale.domain;
-	            let stops = [], uniqueVals = uniqueNumbers(this.encoding.data);
+	            let domain = this.encoding.scale.domain, dt = this.encoding.datatable, ft = dt.getFieldType(f);
+	            let stops = [], uniqueVals = ft === DataType.Date? dt.getUniqueFieldValues(f) : uniqueNumbers(this.encoding.data);
 	            if (uniqueVals.length <= 10){
 	                stops = uniqueVals;
 	                stops.sort((a, b) => a - b);
 	            } else {
-	                let interval = (domain[1] - domain[0])/9;
-	                for (let i = 0; i < 10; i++)
-	                    stops.push(domain[0] + i * interval);
-	                let decimalPlaces = 0;
-	                while (interval < 1) {
-	                    interval *= 10;
-	                    decimalPlaces++;
+	                if (ft === DataType.Date) {
+	                    uniqueVals.sort((a, b) => a - b);
+	                    for (let i = 0; i < uniqueVals.length; i+= Math.ceil(uniqueVals.length/10))
+	                        stops.push(uniqueVals[i]);
+	                } else {
+	                    let interval = (domain[1] - domain[0])/9;
+	                    for (let i = 0; i < 10; i++)
+	                        stops.push(domain[0] + i * interval);
+	                    let decimalPlaces = 0;
+	                    while (interval < 1) {
+	                        interval *= 10;
+	                        decimalPlaces++;
+	                    }
+	                    stops = stops.map(d => d.toFixed(decimalPlaces));
 	                }
-	                stops = stops.map(d => d.toFixed(decimalPlaces));
 	            }
 	            if (this._orientation == Orientation.Vertical) {
 	                gradient = new LinearGradient({x1: 0, y1: 100, x2: 0, y2: 0});
@@ -6685,7 +6718,7 @@
 	                    gradient.addStop(p*100, this.encoding.scale.map(d), 1.0);
 	                    let tk = scene.mark("line", {"x1": this._x + wd, "x2": this._x + wd + tickSize, "y1": this._y + ht - p * ht + titleSize, "y2": this._y + ht - p * ht + titleSize, "strokeColor": this._strokeColor});
 	                    ticks.push(tk);
-	                    let t = scene.mark("text", {fillColor: this._textColor, "text": d, x: this._x + wd + offset + tickSize, y: this._y + ht - p * ht + titleSize, "anchor": ["left", "middle"]});
+	                    let t = scene.mark("text", {fillColor: this._textColor, "text": ft === DataType.Date? dt.getRawValue(f, d) : d, x: this._x + wd + offset + tickSize, y: this._y + ht - p * ht + titleSize, "anchor": ["left", "middle"]});
 	                    texts.push(t);
 	                });
 	            } else {
@@ -6695,7 +6728,7 @@
 	                    gradient.addStop(p*100, this.encoding.scale.map(d), 1.0);
 	                    let tk = scene.mark("line", {"x1": this._x + p * wd, "x2": this._x + p * wd, "y1": this._y + ht + titleSize, "y2": this._y + ht + tickSize + titleSize, "strokeColor": this._strokeColor});
 	                    ticks.push(tk);
-	                    let t = scene.mark("text", {fillColor: this._textColor, "text": d, x: this._x + p * wd, y: this._y + ht + offset + titleSize, "anchor": ["center", "top"]});
+	                    let t = scene.mark("text", {fillColor: this._textColor, "text": ft === DataType.Date? dt.getRawValue(f, d) : d, x: this._x + p * wd, y: this._y + ht + offset + titleSize, "anchor": ["center", "top"]});
 	                    texts.push(t);
 	                });
 	            }
@@ -8912,20 +8945,33 @@
 			//todo: validate channel
 		}
 
-		encode(item, args) {
-			this._validateEncodeArgs(item, args);
-			let items;
-			if (item.type == "vertex" && item.parent.type == ItemType.Area){
-				let areas = getPeers(item.parent, this);
-				items = [];
-				let firstHalf = item.parent.vertices.indexOf(item) < item.parent.vertices.length/2;
-				for (let area of areas){
-					items = firstHalf ? items.concat(area.vertices.slice(0, area.vertices.length/2)) : items.concat(area.vertices.slice(area.vertices.length/2));
+		//supports encoding one single item or an array of items (which will use the same scale)
+		encode(itm, args) {
+			let arr = Array.isArray(itm) ? itm : [itm];		
+			let encs = [], scale;
+			for (let item of arr) {
+				this._validateEncodeArgs(item, args);
+				let items;
+				if (item.type == "vertex" && item.parent.type == ItemType.Area){
+					let areas = getPeers(item.parent, this);
+					items = [];
+					let firstHalf = item.parent.vertices.indexOf(item) < item.parent.vertices.length/2;
+					for (let area of areas){
+						items = firstHalf ? items.concat(area.vertices.slice(0, area.vertices.length/2)) : items.concat(area.vertices.slice(area.vertices.length/2));
+					}
+				} else {
+					items = getPeers(item, this);
 				}
-			} else {
-				items = getPeers(item, this);
-			}
-			return this._doEncode(items, args);
+				if (!args.scale && scale) {
+					args.scale = scale;
+				}
+				let enc = this._doEncode(items, args);
+				if (!scale)
+					scale = enc.scale;
+				encs.push(enc);
+			} 
+			
+			return encs.length > 1 ? encs : encs[0];
 		}
 
 		_doEncode(items, args) {
@@ -8954,7 +9000,7 @@
 				case "area":
 				case "fontSize":
 					if (item.type == ItemType.Area)
-						bindToArea(encoding);
+						bindToAreaMark(encoding);
 					else
 						bindToSize(encoding);
 					break;
@@ -8966,10 +9012,11 @@
 					break;
 				case "x":
 				case "y":
-					if (item.type == ItemType.Area)
-						bindToArea(encoding);
-					else
-						bindToPosition(encoding);
+					bindToPosition(encoding);
+					// if (item.type == ItemType.Area)
+					// 	bindToAreaMark(encoding);
+					// else
+					// 	bindToPosition(encoding);
 					break;
 				case "fillColor":
 				case "strokeColor":
@@ -9084,6 +9131,7 @@
 			}
 
 			let layout = getClosestLayout(item);
+			if (!layout || (layout.type !== LayoutType.Grid && layout.type !== LayoutType.Stack)) return;
 
 			if (layout && (channel == "x" || channel == "y")) {
 				let group = layout.group,

package/package.json

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