mascot-vis 2.0.0 → 3.0.0

package/src-old/item/refs/EncodingAxis.js

@@ -0,0 +1,515 @@
+import { DataType, ItemType, LayoutType, Alignment } from "../../util/Constants";
+import { getClosestLayout, getCellBoundsInGridLayout, getEncodingKey, getTopLevelCollection, getTopLevelGroup, getPeers } from "../../util/ItemUtil";
+import Path from "../mark/Path";
+import PointText from "../mark/PointText";
+import Group from "../composite/Group";
+import * as d3 from 'd3'; 
+import Axis from "./Axis";
+import { uniqueNumbers } from "../../util/DataUtil";
+
+export default class EncodingAxis extends Axis {
+    
+    //glyph is optional
+	constructor(encoding, item, args) {
+        super(args);
+        
+        this.encoding = encoding;
+        this._field = this.encoding.field;
+        this._channel = this.encoding.channel;
+        this._orientation = "orientation" in args ? args["orientation"] : 
+                                this._channel === "x" || this._channel == "width" ? "bottom" : "left";
+
+        this._posArg = this._channel == "x" || this._channel == "width"? args["pathY"] : args["pathX"];
+        this._position = this._posArg; 
+        this._titleText = "title" in args ? args["title"] : this.encoding.field;
+
+        this._item = item;
+
+        this._ticks = new Group();
+        this._ticks.id = this.id + "ticks";
+        this.addChild(this._ticks);
+        
+        this._labels = new Group();
+        this._labels.id = this.id + "labels";
+        this.addChild(this._labels);
+
+        if (this._channel === "radialDistance"){
+            //this._position = this._item.parent.y;
+            if("rotation" in args){
+                this._rotate = [-args["rotation"], this._item.parent.x, this._item.parent.y];
+            }
+        }
+
+        this._showTitle = "showTitle" in args ? args.showTitle : true;
+
+        this._determineAxisFlip();
+        this._generatePath();
+        this._positionPath();
+        if (this._showTitle) {
+            this._generateTitle();
+        }
+
+        //ticks and labels are created and positioned when the values are set in scene.axis()
+
+        if (this._showTitle) {
+            this._positionTitle();
+        }
+    }
+
+    autoUpdateTicks() {
+        let vals = this.encoding._inferTickValues();
+        this.tickValues = vals;
+		this.labelValues = vals;
+    }
+
+    _updateBounds() {
+        this._bounds = this._path.bounds;
+        if (this._ticks.children.length > 0)
+            this._bounds = this._bounds.union(this._ticks.bounds);
+        if (this._labels.children.length > 0)
+            this._bounds = this._bounds.union(this._labels.bounds);
+        if (this._title)
+            this._bounds = this._bounds.union(this._title.bounds);
+    }
+
+    toJSON() {
+        let json = super.toJSON();
+        json.args.item = this._item.id;
+        if (this.encoding.scale.type === "time") {
+            json.args.isDate = true;
+        }
+        if (this._rotate) {
+            json.args.rotation = this._rotate[0];
+        }
+        if (this._channel == "x" || this._channel == "width")
+            json.args.pathY = this._posArg;
+        else
+            json.args.pathX = this._posArg;
+        return json;
+    }
+    
+    get ticks() {
+        return this._ticks;
+    }
+
+    get labels() {
+        return this._labels;
+    }
+
+    get path() {
+        return this._path;
+    }
+
+    set strokeColor(c) {
+        this._strokeColor = c;
+        for (let t of this._ticks.children)
+            t.strokeColor = c;
+        this._path.strokeColor = c;
+    }
+
+    get strokeColor() {
+        return this._strokeColor;
+    }
+
+    set textColor(c) {
+        this._textColor = c;
+        for (let l of this._labels.children)
+            l.fillColor = c;
+        if (this._title)
+            this._title.fillColor = c;
+    }
+
+    get textColor() {
+        return this._textColor;
+    }
+
+    _generatePath(){
+        this._path = new Path({"strokeColor": this._strokeColor});
+        if (!this._pathVisible)
+            this._path.visibility = "hidden";
+        this._path.type = ItemType.Line;
+        this._path.id = this.id + "path";
+        this.addChild(this._path);
+    }
+
+    _generateTicks(){
+        this._ticks.removeAll();
+        for (let i = 0; i < this._tickValues.length; i++) {
+            let t = new Path({"strokeColor": this._strokeColor});
+            if (!this._tickVisible)
+                t.visibility = "hidden";
+            t.type = ItemType.Line;
+            t.id = this.id + "tick" + i;
+            this._ticks.addChild(t);
+        }
+    }
+
+    _generateLabels(){
+        this._labels.removeAll();
+        let formatter, fieldType = this.encoding.datatable.getFieldType(this.encoding.field);
+
+        switch (fieldType) {
+            case DataType.Date:
+                formatter = d3.timeFormat(this._labelFormat);
+                break;
+            case DataType.String:
+                formatter = function(d) {return d;};
+                break;
+            default:
+                formatter = d3.format(this._labelFormat);
+                break;
+        }
+
+        for (let [i, v] of this._labelValues.entries()) {
+            let t = new PointText({"text": formatter(v), fontSize: this._fontSize, fillColor: this._textColor});
+            t.id = this.id + "label" + i;
+            this._labels.addChild(t);
+        }
+    }
+
+    _positionPath(){
+        this._range = this.encoding.getScaleRange(this._item);
+        if (this._posArg === undefined)
+            this._position = this._computePosition();
+        else
+            this._position = this._posArg;
+
+        let vertices = [];
+        if (this._channel == "x" || this._channel == "radialDistance" || this._channel == "width") {
+            let tickX = this._ticks.children.map(d => d.vertices[0].x);
+            vertices.push([
+                Math.min(...tickX.concat(this._range)),
+                this._position
+            ]);
+            vertices.push([
+                Math.max(...tickX.concat(this._range)),
+                this._position
+            ]);
+        } else if (this._channel == "y" || this._channel == "height") {
+            let tickY = this._ticks.children.map(d => d.vertices[0].y);
+            vertices.push([
+                this._position,
+                Math.min(...tickY.concat(this._range))
+            ]);
+            vertices.push([
+                this._position,
+                Math.max(...tickY.concat(this._range))
+            ]);
+        }
+        this._path._setVertices(vertices);
+        this._path._updateBounds();
+
+        if (this._showTitle && this._title) {
+            this._positionTitle();
+        }
+
+        this._updateBounds();
+    }
+
+    _isAlignedLeft(layout) {
+        switch (layout.type) {
+            case LayoutType.Stack:
+            case LayoutType.Grid:
+                return layout.horzCellAlignment === Alignment.Left;
+            default:
+                return true;
+        }
+    }
+
+    _isAlignedBottom(layout) {
+        switch (layout.type) {
+            case LayoutType.Stack:
+            case LayoutType.Grid:
+                return layout.vertCellAlignment === Alignment.Bottom;
+            default:
+                return true;
+        }
+    }
+
+    _determineAxisFlip() {
+        if (this._channel == "x" || this._channel == "radialDistance" || this._channel == "width") {
+            if (this._channel == "width") {
+                let layout = getTopLevelCollection(this._item) ? getTopLevelCollection(this._item).layout : getClosestLayout(this._item);
+                if (layout) {
+                    //let alignment = layout.type == LayoutType.Stack ? layout._horzCellAlignment == Alignment.Left : layout._cellHorzAlignment == Alignment.Left;
+                    //this._flip = alignment? false : true;
+                    this._flip = !this._isAlignedLeft(layout);
+                }
+                else if (this._item.type == "area"){
+                    let alignment = this._item.baseline == Alignment.Left || this._item.baseline == Alignment.Center || this._item.baseline == Alignment.Middle || this._item.baseline == undefined;
+                    this._flip = alignment? false : true;
+                }
+            }
+        } else if (this._channel == "y" || this._channel == "height") {
+            if (this._channel == "height") {
+                let layout = getTopLevelCollection(this._item) ? getTopLevelCollection(this._item).layout : getClosestLayout(this._item);
+                //TODO: bug here, example: Mystique D3-12. http://bl.ocks.org/peterbsmyth/raw/005ed081c4b654ad04ce/?raw=true
+                if (layout) {
+                    this._flip = !this._isAlignedBottom(layout);
+                    //this._flip = layout.vertCellAlignment !== Alignment.Bottom;
+                } else if (this._item.type == "area") {
+                    let alignment = this._item.baseline == Alignment.Bottom || this._item.baseline == Alignment.Center || this._item.baseline == Alignment.Middle || this._item.baseline == undefined;
+                    this._flip = alignment? false : true;
+                }
+            }
+        }
+    }
+
+
+    _positionLabels(){
+        if (this._posArg === undefined)
+            this._position = this._computePosition();
+        else
+            this._position = this._posArg;
+        if (this._channel == "x" || this._channel == "radialDistance" || this._channel == "width") {
+            let offset = this._orientation == "bottom" ? this._tickSize : - this._tickSize ;
+            let anchor = this._orientation == "bottom" ? ["center", "top"] : ["center", "bottom"];
+            // if (this._item.type == "area" && this._channel == "width") {
+            //     let layout = getClosestLayout(this._item);
+            //     if (layout) {
+            //         //let alignment = layout.type == LayoutType.Stack ? layout._horzCellAlignment == Alignment.Left : layout._cellHorzAlignment == Alignment.Left;
+            //         this._flip = !this._isAlignedLeft(layout);
+            //     }
+            //     else {
+            //         let alignment = this._item.baseline == Alignment.Left || this._item.baseline == Alignment.Center || this._item.baseline == Alignment.Middle || this._item.baseline == undefined;
+            //         this._flip = alignment? false : true;
+            //     }
+            // }
+            if (this._flip) {
+                for (let [i, l] of this._labels.children.entries()) {
+                    l.x = this._range[1] - this.encoding.scale.map(this._labelValues[i]);
+                    l.y = this._position + offset;
+                    l.anchor = anchor;
+                    if (this._labelRotation){
+                        l._rotate = [this._labelRotation, l.x, l.y];
+                        l.anchor = ["right", anchor[1]];
+                    }
+                }
+            } else if (this.encoding.scale.isFlipped) {
+                for (let [i, l] of this._labels.children.entries()) {
+                    l.x = this._range[0] + this.encoding.scale.map(this._labelValues[i]);
+                    l.y = this._position + offset;
+                    l.anchor = anchor;
+                    if (this._labelRotation){
+                        l._rotate = [this._labelRotation, l.x, l.y];
+                        l.anchor = ["right", anchor[1]];
+                    }
+                }
+            }  else {
+                for (let [i, l] of this._labels.children.entries()) {
+                    l.x = this._range[0] + this.encoding.scale.map(this._labelValues[i]) - this.encoding.scale.range[0];
+                    l.y = this._position + offset;
+                    l.anchor = anchor;
+                    if (this._labelRotation){
+                        l._rotate = [this._labelRotation, l.x, l.y];
+                        l.anchor = ["right", anchor[1]];
+                    }
+                }
+            }
+        } else if (this._channel == "y" || this._channel == "height") {
+            let offset = this._orientation == "left" ? -this._tickSize : this._tickSize;
+            let anchor = this._orientation == "left" ? ["right", "middle"] : ["left", "middle"];
+            // if (this._item.type == "area" && this._channel == "height") {
+            //     let layout = getClosestLayout(this._item);
+            //     if (this._channel == "height" && layout) {
+            //         // let alignment = layout.type == LayoutType.Stack ? layout._vertCellAlignment == Alignment.Bottom : layout._cellVertAlignment == Alignment.Bottom;
+            //         // this._flip = alignment? false : true;
+            //         this._flip = !this._isAlignedBottom(layout);
+            //     }
+            //     else {
+            //         let alignment = this._item.baseline == Alignment.Bottom || this._item.baseline == Alignment.Center || this._item.baseline == Alignment.Middle || this._item.baseline == undefined;
+            //         this._flip = alignment? false : true;
+            //     }
+            // }
+            if (this._flip) {
+                for (let [i, l] of this._labels.children.entries()) {
+                    l.x = this._position + offset;
+                    l.y = this._range[1] + this.encoding.scale.map(this._labelValues[i]);
+                    l.anchor = anchor;
+                }
+            } else if (this.encoding.scale.isFlipped) {
+                for (let [i, l] of this._labels.children.entries()) {
+                    l.x = this._position + offset;
+                    l.y = this._range[1] - this.encoding.scale.map(this._labelValues[i]) + this.encoding.scale.range[1];
+                    l.anchor = anchor;
+                }
+            } else {
+                for (let [i, l] of this._labels.children.entries()) {
+                    l.x = this._position + offset;
+                    l.y = this._range[0] - this.encoding.scale.map(this._labelValues[i]) + this.encoding.scale.range[0];
+                    l.anchor = anchor;
+                }
+            }
+        } 
+        this._labels._updateBounds();
+        this._updateBounds();
+    }
+
+    _computePosition() {
+        let c;
+        if (this._item.type === "vertex" && !this._item.parent.closed) {
+            //only for vertices that share the same x or y positions
+            let peers = getPeers(this._item, this._item.parent.getScene());
+            if (this._channel === "x" && uniqueNumbers(peers.map(d => d.bounds.middle)).length == 1) {
+                return this._item.bounds.middle;
+            } else if (this._channel === "y" && uniqueNumbers(peers.map(d => d.bounds.center)).length == 1) {
+                return this._item.bounds.center;
+            } else if (this._channel === "radialDistance"){
+                return this._item.parent.y;
+            }
+        } 
+        
+        if (this._item.type === ItemType.Area || this._item.parent.type === ItemType.Area)
+            c = getCellBoundsInGridLayout(this._item);
+
+        if (c === undefined) {
+            let container = getTopLevelCollection(this._item);
+            if (container === undefined)
+                container = getTopLevelGroup(this._item);
+            c = container.bounds;
+        }
+        if (this._channel === "x" || this._channel === "width") {
+            return this._orientation == "top"  ? c.top - this._tickSize : c.bottom + this._tickSize;
+        } else if (this._channel === "y" || this._channel === "height") {
+            return this._orientation == "left"  ? c.left - this._tickSize : c.right + this._tickSize;
+        } else if (this._channel === "radialDistance"){
+            return this._item.parent.y;
+        }
+    }
+
+    _positionTicks() {
+        if (this._posArg === undefined)
+            this._position = this._computePosition();
+        else
+            this._position = this._posArg;
+        this._range = this.encoding.getScaleRange(this._item);
+        if (this._channel == "x" || this._channel == "radialDistance" || this._channel == "width") {
+            let offset = this._orientation == "bottom" ? this._tickSize : -this._tickSize;
+            // if (this._channel == "width") {
+            //     let layout = getClosestLayout(this._item);
+            //     if (layout) {
+            //         //let alignment = layout.type == LayoutType.Stack ? layout._horzCellAlignment == Alignment.Left : layout._cellHorzAlignment == Alignment.Left;
+            //         //this._flip = alignment? false : true;
+            //         this._flip = !this._isAlignedLeft;
+            //     }
+            //     else if (this._item.type == "area"){
+            //         let alignment = this._item.baseline == Alignment.Left || this._item.baseline == Alignment.Center || this._item.baseline == Alignment.Middle || this._item.baseline == undefined;
+            //         this._flip = alignment? false : true;
+            //     }
+            // }
+            if (this._flip) {
+                for (let [i, t] of this._ticks.children.entries()) {
+                    t._setVertices([
+                        [this._range[1] - this.encoding.scale.map(this._tickValues[i]), this._position],
+                        [this._range[1] - this.encoding.scale.map(this._tickValues[i]), this._position + offset]
+                    ]);
+                    t._updateBounds();
+                }
+            } else if (this.encoding.scale.isFlipped) {
+                for (let [i, t] of this._ticks.children.entries()) {
+                    t._setVertices([
+                        [this._range[0] + this.encoding.scale.map(this._tickValues[i]), this._position],
+                        [this._range[0] + this.encoding.scale.map(this._tickValues[i]), this._position + offset]
+                    ]);
+                    t._updateBounds();
+                }
+            } else {
+                for (let [i, t] of this._ticks.children.entries()) {
+                    t._setVertices([
+                        [this._range[0] + this.encoding.scale.map(this._tickValues[i]) - this.encoding.scale.range[0], this._position],
+                        [this._range[0] + this.encoding.scale.map(this._tickValues[i]) - this.encoding.scale.range[0], this._position + offset]
+                    ]);
+                    t._updateBounds();
+                }
+            }
+        } else if (this._channel == "y" || this._channel == "height") {
+            let offset = this._orientation == "left" ? -this._tickSize : this._tickSize;
+            // if (this._channel == "height") {
+            //     let layout = getClosestLayout(this._item);
+            //     //TODO: bug here, example: Mystique D3-12. http://bl.ocks.org/peterbsmyth/raw/005ed081c4b654ad04ce/?raw=true
+            //     if (layout) {
+            //         this._flip = !this._isAlignedBottom(layout);
+            //         //this._flip = layout.vertCellAlignment !== Alignment.Bottom;
+            //     } else if (this._item.type == "area") {
+            //         let alignment = this._item.baseline == Alignment.Bottom || this._item.baseline == Alignment.Center || this._item.baseline == Alignment.Middle || this._item.baseline == undefined;
+            //         this._flip = alignment? false : true;
+            //     }
+            // }
+            if (this._flip) {
+                for (let [i, t] of this._ticks.children.entries()) {
+                    t._setVertices([
+                        [this._position + offset, this._range[1] + this.encoding.scale.map(this._tickValues[i])],
+                        [this._position, this._range[1] + this.encoding.scale.map(this._tickValues[i])]
+                    ]);
+                    t._updateBounds();
+                }
+            } else if (this.encoding.scale.isFlipped) {
+                for (let [i, t] of this._ticks.children.entries()) {
+                    let y = this._range[1] - this.encoding.scale.map(this._tickValues[i]) + this.encoding.scale.range[1];
+                    //this._range[1] + this.encoding.scale.map(this._tickValues[i])
+                    t._setVertices([
+                        [this._position + offset, y],
+                        [this._position, y]
+                    ]);
+                    t._updateBounds();
+                }
+            } else {
+                for (let [i, t] of this._ticks.children.entries()) {
+                    t._setVertices([
+                        [this._position + offset, this._range[0] - this.encoding.scale.map(this._tickValues[i]) + this.encoding.scale.range[0]],
+                        [this._position, this._range[0] - this.encoding.scale.map(this._tickValues[i]) + this.encoding.scale.range[0]]
+                    ]);
+                    t._updateBounds();
+                }
+            }
+        }
+        this._positionPath();
+        this._ticks._updateBounds();
+        this._updateBounds();
+    }
+
+    _positionTitle(){
+        let pb = this._path.bounds;
+        this._title.achor = this._titleAnchor;
+        if (!this._titlePosition) {
+            if (this._channel == "x" || this._channel == "width") {
+                this._title.x = pb.x;
+                this._title.y = this._orientation == "top" ? pb.top - this._titleOffset : pb.bottom + this._titleOffset;
+            } else {
+                this._title.x = this._orientation == "left" ? pb.left - this._titleOffset : pb.right + this._titleOffset;
+                this._title.y = pb.y;
+                if (this._rotateYTitle)
+                    this._title._rotate = this._orientation == "left" ?  [-90, this._title.bounds.x, this._title.bounds.y] : [90, this._title.bounds.x, this._title.bounds.y];
+            }
+        } else {
+            this._title.x = this._titlePosition[0];
+            this._title.y = this._titlePosition[1];
+            if (this._channel == "y" || this._channel == "height") {
+                if (this._rotateYTitle)
+                    this._title._rotate = this._orientation == "left" ?  [-90, this._title.bounds.x, this._title.bounds.y] : [90, this._title.bounds.x, this._title.bounds.y];
+            }
+        }
+        this._title._updateBounds();
+        this._updateBounds();      
+    }
+
+    //item is a group or a mark or a vertex or segment
+    matches(item) {
+        let k = getEncodingKey(item).split("_")[0],
+            encodings = this.encoding.scale.encodings;
+        for (let enc of encodings) {
+            let classId = getEncodingKey(enc.anyItem).split("_")[0];
+            if (classId === k)
+                return true;
+        }
+        return false;
+    }
+
+    get isFlipped() {
+        if (this._flip)
+            return true;
+        if (this.encoding.scale.isFlipped)
+            return true;
+        return false;
+    }
+}

package/src-old/item/refs/Gridlines.js

@@ -0,0 +1,144 @@
+import { ItemType } from "../../util/Constants";
+import { getEncodingKey, getTopLevelCollection, getTopLevelGroup, ItemCounter } from "../../util/ItemUtil";
+import Path from "../mark/Path";
+import Group from "../composite/Group";
+import CirclePath from "../mark/CirclePath";
+
+export default class Gridlines extends Group {
+
+    constructor(encoding, item, args) {
+        super();
+        this.type = ItemType.Gridlines;
+        this.id = this.type + ItemCounter[this.type]++;
+
+        this.encoding = encoding;
+        this.channel = this.encoding.channel;
+        this._item = item;
+
+        this._strokeColor = ("strokeColor" in args) ? args["strokeColor"] : "#ddd";
+        this._strokeWidth = ("strokeWidth" in args) ? args["strokeWidth"] : 1;
+        
+        if (this.channel == "radialDistance"){
+            if("angle" in args){
+                this._rotate = [-args["angle"], this.encoding.x, this.encoding.y];
+            }
+        }
+    }
+
+    toJSON(){
+        // let json = {args: {}};
+        let json = super.toJSON();
+		json.type = this.type;
+		json.id = this.id;
+        if (!("args" in json))
+            json.args = {};
+        json.args.item = this._item.id;
+        json.args.strokeColor = this._strokeColor;
+        json.args.strokeWidth = this._strokeWidth;
+        json.args.values = this._values;
+        if (this.encoding.scale.type === "time") {
+            json.args.isDate = true;
+        }
+        json.channel = this.encoding.channel;
+        json.field = this.encoding.field;
+        if (this._rotate)
+            json.args.angle = this._rotate[0];
+        return json;
+    }
+
+    get values() {
+        return this._values;
+    }
+
+    set values(values) {
+        this._values = values;
+        this.updateLines();
+        this.updateLinePositions();
+    }
+
+    get strokeColor() {
+        return this._strokeColor;
+    }
+
+    set strokeColor(c) {
+        this._strokeColor = c;
+        for (let p of this.children)
+            p.strokeColor = c;
+    }
+
+    get strokeWidth() {
+        return this._strokeWidth;
+    }
+
+    set strokeWidth(w) {
+        this._strokeWidth = w;
+        for (let p of this.children)
+            p.strokeWidth = w;
+    }
+
+    matches(item) {
+        let k = getEncodingKey(item).split("_")[0],
+            encodings = this.encoding.scale.encodings;
+        for (let enc of encodings) {
+            let classId = getEncodingKey(enc.anyItem).split("_")[0];
+            if (classId === k)
+                return true;
+        }
+        return false;
+    }
+
+    updateLinePositions() {
+        let container = getTopLevelCollection(this._item) ? getTopLevelCollection(this._item) : getTopLevelGroup(this._item);
+        if (this.channel == "x" || this.channel == "width") {
+            let bounds = container.bounds,
+                range = this.encoding.getScaleRange(this._item);
+            for (let [i, l] of this.children.entries()) {
+                let x = range[0] + this.encoding.scale.map(this._values[i]) - this.encoding.scale.range[0];
+                l._setVertices([[x, bounds.top], [x, bounds.bottom]]);
+            }
+        } else if (this.channel == "y" || this.channel == "height") {
+            let bounds = container.bounds,
+            range = this.encoding.getScaleRange(this._item);
+            if (this.encoding.flip) {
+                for (let [i, l] of this.children.entries()) {
+                    let y = range[1] - this.encoding.scale.map(this._values[i]) + this.encoding.scale.range[0];
+                    l._setVertices([[bounds.left, y], [bounds.right, y]]);
+                }
+            } else {
+                for (let [i, l] of this.children.entries()) {
+                    let y = range[0] - this.encoding.scale.map(this._values[i]) + this.encoding.scale.range[0];
+                    l._setVertices([[bounds.left, y], [bounds.right, y]]);
+                }
+            }
+        } else if (this.channel == "radialDistance") {
+            for (let [i, c] of this.children.entries()) {
+                c.x = this._item.parent.x;
+                c.y = this._item.parent.y;
+                c.radius = this.encoding.scale.map(this._values[i]);
+            }
+        }
+        for (let c of this.children)
+            c._updateBounds();
+        this._updateBounds();
+    }
+
+    updateLines() {
+        this.children = [];
+        if (this.channel == "x" || this.channel == "y" || this.channel == "width" || this.channel == "height") {
+            for (let i = 0; i < this._values.length; i++) {
+                let t = new Path ({"strokeColor": this._strokeColor, "fillColor": "none", "strokeWidth": this._strokeWidth});
+                t.type = ItemType.Line;
+                t.id = this.id + "line" + i;
+                this.addChild(t);
+            }
+        } else if (this.channel == "radialDistance") {
+            for (let i = 0; i < this._values.length; i++) {
+                let t = new CirclePath({"strokeColor": this._strokeColor, "fillColor": "none", "strokeWidth": this._strokeWidth});
+                t.type = ItemType.Circle;
+                t.id = this.id + "line" + i;
+                this.addChild(t);
+            }
+        }
+    }
+
+}