mascot-vis 3.0.0 → 3.0.1

package/src-old/bind/bindToAreaMark.js

@@ -1,360 +0,0 @@
-import {getParents, getPeers, getClosestLayout, getCellBoundsInLayout, CheckAreaOrien} from "../util/ItemUtil";
-import {DataType, Alignment, LayoutType} from "../util/Constants";
-import {Orientation} from "../util/Constants";
-import Scale from "../core/Scale";
-import LinearGradient from "../basic/Gradient";
-
-export function bindToAreaMark(encoding){
-
-	encoding._query = function() {
-		this.data = [];
-        // store area peers
-        this.areas = getPeers(this.items[0], this.scene);
-        let areaNum = this.areas.length;
-		this.areaNum = areaNum;
-        // this.items are all the areas, we need to keep them for saving to json
-		// here we populate the vertices to be used for binding
-		this._vertices = [];
-		this.indicator = [];
-		for (let area of this.areas) {
-			for (let i=0; i < area.vertices.length; i++) {
-				this._vertices.push(area.vertices[i]);
-				if (i < area.vertices.length / 2) {
-					this.indicator.push(1);
-				} else {
-					this.indicator.push(0);
-				}
-			}
-		}
-		let field = this.field, items = this._vertices;
-		let dataScopes = items.map(d => d.dataScope);
-		// ((this.anyItem.type == "vertex" || this.anyItem.type == "segment") && !this.anyItem.dataScope) ? 
-		// 					items.map(d => d.parent.dataScope) : items.map(d => d.dataScope);
-		switch (this.datatable.getFieldType(field)) {
-			case DataType.Boolean:
-				break;
-
-			case DataType.Date:
-				this.data = dataScopes.map(d => d.getFieldValue(field));
-				break;
-
-			case DataType.String:
-				this.data = dataScopes.map((d, i) => this.indicator[i] == 0 ? 0 :  d.aggregateNumericalField(field, this.aggregator));
-				break;
-
-			default: //integer or number
-				if (this.channel == "x" || this.channel == "y") {
-					this.data = dataScopes.map(d => d._field2value[field]);
-				} else {
-					this.data = dataScopes.map((d, i) => this.indicator[i] == 0 ? 0 :  d.aggregateNumericalField(field, this.aggregator));
-				}
-				break;
-		}
-	}
-
-	encoding._map = function() {
-		if (this.channel === "fillGradient")
-			this._mapToGradient();
-		else if (this.channel == "width" || this.channel == "height")
-			this._mapToSize();
-	}
-
-	encoding._mapToGradient = function() {
-		if (this.scale) {
-			if (!this._mapping) {
-				let values = this.scale.domain.concat(this.data);
-				this.scale.domain = [Math.min(...values), Math.max(...values)];
-			}
-		} else {
-			if (this._mapping) {
-				this.scale = new Scale("linear", this._mapping);
-			} else {
-				let min = Math.min(...this.data), max = Math.max(...this.data), 
-					abs = Math.max(Math.abs(min), Math.abs(max)), scheme;
-				if (min < 0 && max > 0) {
-					scheme = "interpolatePuOr";
-					min = -abs;
-					max = abs;
-					this.scale = new Scale("divergingColor", this._scheme ? this._scheme: scheme);
-				} else {
-					scheme = "interpolateTurbo";
-					this.scale = new Scale("sequentialColor", this._scheme ? this._scheme: scheme);
-				}
-				this.scale.domain = [min, max];
-			}
-		}
-		this.scale._addEncoding(this);
-	}
-
-	encoding._mapToSize = function() {
-		let fieldType = this.datatable.getFieldType(this.field);
-
-		let scale, min, max;
-		switch (fieldType) {
-			case DataType.Boolean:
-				break;
-
-			case DataType.Date:
-				scale = new Scale("time");
-				min = Math.min(...this.data); 
-				max = Math.max(...this.data);
-				scale.domain = [min, max];
-				break;
-
-			case DataType.String:
-				scale = new Scale("linear");
-				min = Math.min(...this.data); 
-				max = Math.max(...this.data);
-				scale.domain = (this._includeZero || min < 0)? [0, max] : [min, max];	
-				break;
-
-			default: //integer or number
-				scale = new Scale("linear");
-				min = Math.min(...this.data); 
-				max = Math.max(...this.data);
-				//scale.domain = (this._includeZero || min < 0)? [0, max] : [min, max];
-				scale.domain = (min < 0)? [0, max] : [min, max];
-				break;
-		}
-
-		//to be used for determining the range of scale 
-		//TODO: need to update cellBounds dynamically for _map() and _apply()
-		let orientation = CheckAreaOrien(this.areas[0]);
-		let extent;
-		let layout = getClosestLayout(this.anyItem);
-		if (layout) {
-			let cellBounds = layout.cellBounds;
-			if (this.channel == "width" || this.channel == "height") {
-				extent = orientation == Orientation.Vertical ? cellBounds[0].width : cellBounds[0].height;
-			} else {
-				extent = orientation == Orientation.Vertical ? cellBounds[0].height : cellBounds[0].width;
-			}
-			// if (layout.type === LayoutType.Stack) {
-			// 	if (orientation === Orientation.Horizontal && this.channel === "height")
-			// 		extent /= this.areas.length;
-			// 	else if (orientation === Orientation.Vertical && this.channel === "width")
-			// 		extent /= this.areas.length;
-			// }
-		} else {
-			//if (this.channel == "width" || this.channel == "x") {
-			if (this.channel == "width") {
-				// let pos = this._vertices.map(d => d.x);
-				// extent = Math.max(...pos) - Math.min(...pos);
-				extent = Math.max(...this.areas.map(d => d.bounds.width));
-			} else {
-				// let pos = this._vertices.map(d => d.y);
-				// extent = Math.max(...pos) - Math.min(...pos);
-				extent = Math.max(...this.areas.map(d => d.bounds.height));
-			}
-		}
-		
-		if (this.rangeExtent)
-			extent = this.rangeExtent;
-
-		if (min < 0) {
-			scale._scale.domain([min, max]);
-			//TODO: need to adjust according to scale type
-			scale._setRange([0, extent]);
-		} else {
-			scale._setRange([0, extent]);
-		}
-
-		if (this.scale) {
-			this.scale._merge(scale);
-		} else {
-			this.scale = scale;
-		}
-		
-		this.scale._addEncoding(this);
-	}
-
-	encoding._apply = function() {
-		if (this.channel === "fillGradient")
-			this._applyToGradient();
-		else if (this.channel == "width" || this.channel == "height")
-			this._applyToSize();
-	}
-
-	encoding._applyToGradient = function() {
-		let dIdx = 0;
-		for (let area of this.areas) {
-			let data = this.data.slice(dIdx, dIdx + area.vertices.length),
-				min = Math.min(...data),
-				max = Math.max(...data);
-			let fill = area.orientation === "horizontal" ? new LinearGradient({x1: 0, y1: 100, x2: 0, y2: 0}) : new LinearGradient({x1: 0, y1: 0, x2: 100, y2: 0});
-			fill.addStop(0, this.scale.map(min), 1.0);
-			if (this._mapping) {
-				let vals = Object.keys(this._mapping).map(d => parseFloat(d)).sort();
-				for (let v of vals) {
-					if (v > min && v < max) {
-						fill.addStop(100*(v-min)/(max-min), this.scale.map(v), 1.0);
-					}
-				}
-			} else if (this.scale.type === "divergingColor") {
-				fill.addStop(100*(-min)/(max-min), this.scale.map(0), 1.0);
-			}
-			fill.addStop(100, this.scale.map(max), 1.0);
-			area.fillColor = fill;
-			dIdx += area.vertices.length;
-		}
-	}
-
-	encoding._applyToSize = function() {
-		let items = [], channel = this.channel;
-		for (let enc of this.scale.encodings)
-			items = items.concat(enc.items);
-		let ao = this.areas[0].orientation;
-		if (channel === "width" || channel === "height") {
-			if (this.data.find(d => d < 0) != undefined)
-				this.areas.forEach(d => d._areaNegativeValues = true);
-			else
-				this.areas.forEach(d => d._areaNegativeValues = false);
-			let closestLayout = getClosestLayout(this.areas[0]);
-			if (closestLayout) {
-				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;
-						if (ao === Orientation.Horizontal) {
-							dx = 0;
-							if (layout.type === LayoutType.Stack) {
-								dy = cb.bottom - this.scale.map(this.data[i + vidx]) - v.y;
-							} else if (layout.type === LayoutType.Grid) {
-								let baseline = area.baseline;
-								switch (baseline) {
-									case "top":
-										dy = cb.top + this.scale.map(this.data[i + vidx]) - v.y;
-										break;
-									case "bottom":
-										dy = cb.bottom - this.scale.map(this.data[i + vidx]) - v.y;
-										break;
-									case "middle": {
-										let j = area.vertices.length - 1 - i,
-											dist = Math.abs(this.scale.map(this.data[i + vidx]) - this.scale.map(this.data[j + vidx]));
-										dy = this.indicator[i + vidx] ? cb.middle - dist/2 - v.y : cb.middle + dist/2 - v.y;
-										break;
-									}
-								}
-							} else {
-								dy = 0;
-							}
-						} else {
-							dy = 0;
-							if (layout.type === LayoutType.Stack) {
-								dx = cb.left + this.scale.map(this.data[i + vidx]) - v.x;
-							} else if (layout.type === LayoutType.Grid) {
-								let baseline = area.baseline;
-								switch (baseline) {
-									case "left":
-										dx = cb.left + this.scale.map(this.data[i + vidx]) - v.x;
-										break;
-									case "right":
-										dx = cb.right - this.scale.map(this.data[i + vidx]) - v.x;
-										break;
-									case "center": {
-										let j = area.vertices.length - 1 - i,
-											dist = Math.abs(this.scale.map(this.data[i + vidx]) - this.scale.map(this.data[j + vidx]));
-										dx = this.indicator[i + vidx] ? cb.center - dist/2 - v.x : cb.center + dist/2 - v.x;
-										break;
-									}
-								}
-							} else {
-								dx = 0;
-							}
-						}
-						v._doTranslate(dx, dy);		
-					}
-					vidx += area.vertices.length;
-				}
-			} else {
-				let baseline_check = this.areas[0].baseline == "center" || this.areas[0].baseline == "middle";
-				//let marks = getParents(this._vertices);
-				//let offset = ao == Orientation.Vertical ? this.areas[0].baseline !== Alignment.Right ? Math.min(...marks.map(d => d.bounds.left)) : Math.max(...marks.map(d => d.bounds.right)) : this.areas[0].baseline != Alignment.Top ? Math.max(...marks.map(d => d.bounds.bottom)) : Math.min(...marks.map(d => d.bounds.top));
-				
-				let dIdx = 0, minSide = ao == Orientation.Vertical ? "left" : "bottom", maxSide = ao == ao == Orientation.Vertical ? "right" : "top";
-				for (let area of this.areas) {
-					for (let i = dIdx; i < dIdx + area.vertices.length; i++) {
-						let peer = this._vertices[i];
-						let offset = ao == Orientation.Vertical ? area.baseline !== Alignment.Right ? area.bounds.left - area.boundsOffsets.left : area.bounds.right + area.boundsOffsets.right: 
-																	area.baseline != Alignment.Top ? area.bounds.bottom + area.boundsOffsets.bottom: area.bounds.top - area.boundsOffsets.top;
-						let dx = ao == Orientation.Vertical ? area.baseline !== Alignment.Right ? offset + this.scale.map(this.data[i]) - peer.x 
-															: offset - this.scale.map(this.data[i]) - peer.x : 0,
-							dy = ao == Orientation.Vertical ? 0 : area.baseline != Alignment.Top ? offset - this.scale.map(this.data[i]) - peer.y 
-															: offset + this.scale.map(this.data[i]) - peer.y;
-						peer._doTranslate(dx, dy);
-					}
-					let data = this.data.slice(dIdx, dIdx + area.vertices.length),
-						min = Math.min(...data),
-						max = Math.max(...data);
-					//record coordinate corresponding to zero value if the area has both +ve and -ve values
-					//TODO: need to handle the case where the areas are inside a layout
-					if (area._areaNegativeValues)
-						area._areaZeroCoord = ao == Orientation.Vertical ? area.bounds.left - area.boundsOffsets.left + this.scale.map(0) : 
-													area.bounds.bottom + area.boundsOffsets.bottom - this.scale.map(0);
-					area.boundsOffsets[maxSide] = this.scale.map(Math.max(...this.data)) - this.scale.map(max);
-					area.boundsOffsets[minSide] = this.scale.map(min) - this.scale.map(Math.min(...this.data));
-					dIdx += area.vertices.length;
-				}
-				
-				if (baseline_check == true) {
-					//TODO: handle cases where each area have different number of vertices
-					let VNum = this._vertices.length / this.areaNum;
-					let marks = getParents(this._vertices);
-					let offset = ao == Orientation.Vertical ? Math.min(...marks.map(d => d.bounds.x)) : Math.max(...marks.map(d => d.bounds.y));
-					for (let j = 0; j < this.areaNum; j++) {
-						for (let i = 0; i < VNum / 2; i++) {
-							let Vid1 = j * VNum + i, Vid2 = (j + 1) * VNum - i - 1;
-							let peer1 = this._vertices[Vid1], peer2 = this._vertices[Vid2];
-							let height = ao == Orientation.Vertical ? peer1.x-peer2.x : peer2.y-peer1.y;
-							let dx1 =  ao == Orientation.Vertical ? offset + height / 2 - peer1.x : 0,
-								dy1 =  ao == Orientation.Vertical ? 0 : offset + height / 2 - peer1.y;
-							let dx2 =  ao == Orientation.Vertical ? offset - height / 2 - peer2.x : 0,
-								dy2 =  ao == Orientation.Vertical ? 0 : offset - height / 2 - peer2.y;
-							peer1._doTranslate(dx1, dy1);
-							peer2._doTranslate(dx2, dy2);
-						}
-					}
-				}
-			}
-		} 
-		
-		// else { //x or y
-		// 	let layout = getClosestLayout(this.anyItem);
-		// 	if (layout) {
-		// 		let marks = getParents(this._vertices);
-		// 		if (this.scale.offset === undefined)
-		// 			this.scale.offset = ao == Orientation.Horizontal ? Math.min(...marks.map(d => d.bounds.left)) : Math.max(...marks.map(d => d.bounds.top));
-		// 		for (let i = 0; i < this._vertices.length; i++) {
-		// 			let peer = this._vertices[i], perrCb = getCellBoundsInLayout(peer);
-		// 			let dx =  ao == Orientation.Vertical ? 0 : perrCb.left + this.scale.map(this.data[i]) - peer.x,
-		// 				dy =  ao == Orientation.Vertical ? perrCb.bottom - this.scale.map(this.data[i]) - peer.y : 0;
-		// 			peer._doTranslate(dx, dy);
-		// 		}
-		// 	} else {
-		// 		let marks = getParents(this._vertices);
-		// 		if (this.scale.offset === undefined)
-		// 			this.scale.offset = ao == Orientation.Horizontal ? Math.min(...marks.map(d => d.bounds.left)) : Math.max(...marks.map(d => d.bounds.top));
-		// 		for (let i = 0; i < this._vertices.length; i++) {
-		// 			let peer = this._vertices[i];
-		// 			let dx = ao == Orientation.Horizontal ? this.scale.offset + this.scale.map(this.data[i]) - peer.x : 0,
-		// 				dy = ao == Orientation.Horizontal ? 0 : this.scale.offset + this.scale.rangeExtent - this.scale.map(this.data[i]) - peer.y;
-		// 			peer._doTranslate(dx, dy);
-		// 		}	
-		// 	}
-		// }
-
-		for (let area of this.areas) {
-            area._updateBounds()
-        }
-		if (channel == "width" || channel == "height") {
-			this.scene._relayoutAncestors(this.areas[0], this.areas);
-		}
-	}
-
-	encoding.run();
-	return encoding;
-}

package/src-old/bind/bindToColor.js

@@ -1,114 +0,0 @@
-import Scale from "../core/Scale";
-import {categoricalColorSchemes, DataType, divergingColorSchemes, sequentialColorSchemes} from "../util/Constants";
-
-export function bindToColor(encoding){
-
-	encoding._query = function() {
-		this.data = [];
-		
-		let field = this.field, items = this.items;
-		let dataScopes = ((this.anyItem.type == "vertex" || this.anyItem.type == "segment") && !this.anyItem.dataScope) ? 
-							items.map(d => d.parent.dataScope) : items.map(d => d.dataScope);
-
-		switch (this.datatable.getFieldType(field)) {
-			case DataType.Boolean:
-				this.data = [true, false];
-				break;
-
-			case DataType.Date:
-				this.data = dataScopes.map(d => d.getFieldValue(field));
-				break;
-
-			case DataType.String:
-				try {
-					this.data = dataScopes.map(d => d.getFieldValue(field));
-				} catch (error) {
-					throw new Error("Cannot bind " + this.channel + " to " + field + " : " + error);
-				}
-				break;
-
-			default: //integer or number
-				this.data = dataScopes.map(d => d.aggregateNumericalField(field, this.aggregator));
-				break;
-		}
-	}
-
-	encoding._map = function() {
-		switch (this.datatable.getFieldType(this.field)) {
-			case DataType.Boolean:
-				if (!this.scale) {
-					this.scale = new Scale("ordinalColor");
-					this.scale.domain = this.data;
-					if (this._mapping) {
-						let range = this.scale.domain.map(d => d in this._mapping ? this._mapping[d] : "black");
-						this.scale._scale.range(range);
-					}
-				} 
-				break;
-			case DataType.String:
-				if (this.scale) {
-					this.scale.domain = Array.from(new Set(this.scale.domain.concat(this.data)));
-				} else {
-					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 = new Scale("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");
-						this.scale._scale.range(range);
-					}
-				}
-				break;
-
-			default: //number or date
-				if (this.scale) {
-					if (!this._mapping) {
-						let values = this.scale.domain.concat(this.data);
-						this.scale.domain = [Math.min(...values), Math.max(...values)];
-					}
-				} else {
-					if (this._mapping) {
-						this.scale = new Scale("linear", this._mapping);
-					} else {
-						let min = Math.min(...this.data), max = Math.max(...this.data), 
-							abs = Math.max(Math.abs(min), Math.abs(max)), scheme;
-						if (min < 0 && max > 0) {
-							scheme = "interpolatePuOr";
-							min = -abs;
-							max = abs;
-							this.scale = new Scale("divergingColor", this._scheme ? this._scheme: scheme);
-						} else {
-							scheme = "interpolateTurbo";
-							this.scale = new Scale("sequentialColor", this._scheme ? this._scheme: scheme);
-						}
-						this.scale.domain = [min, max];
-					}
-				}
-				break;
-		}
-		this.scale._addEncoding(this);
-	}
-
-	encoding._apply = function() {
-		for (let i = 0; i < this.items.length; i++) {
-			let peer = this.items[i], value = this.scale.map(this.data[i]);
-			if (peer.type == "vertex" || peer.type == "segment")
-				peer[this.channel] = value;
-			else
-				peer.styles[this.channel] = value;
-			if (peer.vertices && this.channel == "strokeColor") {
-				peer.vertices.forEach(d => d.fillColor = value);
-			}
-		}
-	}
-
-	encoding.run();
-	return encoding;
-}

package/src-old/bind/bindToLink.js

@@ -1,81 +0,0 @@
-import Scale from "../core/Scale";
-import DataScope from "../data/DataScope";
-import { ItemType, nodeId } from "../util/Constants";
-
-export function bindToLink(encoding){
-
-    encoding._query = function() {
-        let field = this.field, channel = this.channel, items = this.items;
-		let dataScopes = items.map(d => d.dataScope);
-
-        // if (channel == "source" || channel == "target") {
-        //     //data are marks in the scene representing the nodes
-        //     let nodeIds = dataScopes.map(d => d.getFieldValue(field));
-        //     let scene = this.scene;
-        //     this.data = [];
-        //     for (let id of nodeIds) {
-        //         let r = scene.find([{field: nodeId, value: id}]);
-        //         //since we assign data scopes to collections when repeating, need to filter out collections
-        //         r = r.filter(d => d.type !== ItemType.Collection);
-        //         this.data.push(r[0]);
-        //     }
-        // } else 
-        if (channel == "strokeWidth") {
-            if (this.datatable.hasField(field)) {
-                this.data = dataScopes.map(d => d.getFieldValue(field));
-            } else if (field.startsWith("parent.") || field.startsWith("child.")) {
-                let dt = this.datatable.tree.nodeTable;
-                let s = field.split(".")[0], f = field.split(".")[1];
-                let nodeIds = dataScopes.map(d => d.getFieldValue(s));
-                this.data = nodeIds.map(d => (new DataScope(dt)).cross(nodeId, d).getFieldValue(f));
-            }
-        }
-    }
-
-    encoding._map = function() {
-        let channel = this.channel, items = this.items;
-        let scale;
-        if (channel == "strokeWidth") {
-            scale = new Scale(this.scaleType);
-            scale.domain = [0, Math.max(...this.data)];
-            let min, max;
-            min = 1;
-			max = Math.max(...(items.map(d => parseFloat(d.styles.strokeWidth))));
-			if (max == min)
-				max = min + 5;
-                if (this.rangeExtent)
-				max = min + this.rangeExtent;
-			if (this.range) {
-				min = this.range[0];
-				max = this.range[1];
-			}
-			scale._setRange([min, max]);
-
-            if (this.scale){	
-                //TODO
-            } else {
-                this.scale = scale;
-            }
-            this.scale._addEncoding(this);
-        }
-        
-    }
-
-    encoding._apply = function() {  
-        let channel = this.channel;
-        // if (channel == "source" || channel == "target") {
-        //     for (let i = 0; i < this.data.length; i++) {
-        //         this.items[i][this.channel] = this.data[i];
-        //         this.items[i]._updateBounds();
-        //     }
-        // } else 
-        if (channel == "strokeWidth") {
-            for (let i = 0; i < this.data.length; i++) {
-                this.items[i].styles.strokeWidth = this.scale.map(this.data[i]);
-            }
-        }
-    }
-
-    encoding.run();
-	return encoding;
-}