@d3plus/core 3.0.0-alpha.0

package/es/src/charts/Tree.js

@@ -0,0 +1,312 @@
+function _assert_this_initialized(self) {
+    if (self === void 0) {
+        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+    return self;
+}
+function _call_super(_this, derived, args) {
+    derived = _get_prototype_of(derived);
+    return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
+}
+function _class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _get(target, property, receiver) {
+    if (typeof Reflect !== "undefined" && Reflect.get) {
+        _get = Reflect.get;
+    } else {
+        _get = function get(target, property, receiver) {
+            var base = _super_prop_base(target, property);
+            if (!base) return;
+            var desc = Object.getOwnPropertyDescriptor(base, property);
+            if (desc.get) {
+                return desc.get.call(receiver || target);
+            }
+            return desc.value;
+        };
+    }
+    return _get(target, property, receiver || target);
+}
+function _get_prototype_of(o) {
+    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _get_prototype_of(o);
+}
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of(subClass, superClass);
+}
+function _possible_constructor_return(self, call) {
+    if (call && (_type_of(call) === "object" || typeof call === "function")) {
+        return call;
+    }
+    return _assert_this_initialized(self);
+}
+function _set_prototype_of(o, p) {
+    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of(o, p);
+}
+function _super_prop_base(object, property) {
+    while(!Object.prototype.hasOwnProperty.call(object, property)){
+        object = _get_prototype_of(object);
+        if (object === null) break;
+    }
+    return object;
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _is_native_reflect_construct() {
+    try {
+        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+    } catch (_) {}
+    return (_is_native_reflect_construct = function() {
+        return !!result;
+    })();
+}
+import { extent, min, max } from "d3-array";
+import { hierarchy, tree } from "d3-hierarchy";
+import { scaleLinear } from "d3-scale";
+import { assign, elem } from "@d3plus/dom";
+import { merge, nest } from "@d3plus/data";
+import { configPrep, constant } from "../utils/index.js";
+import { Circle, Path } from "../shapes/index.js";
+import Viz from "./Viz.js";
+var Tree = /*#__PURE__*/ function(Viz) {
+    "use strict";
+    _inherits(Tree, Viz);
+    function Tree() {
+        _class_call_check(this, Tree);
+        var _this;
+        _this = _call_super(this, Tree);
+        _this._orient = "vertical";
+        _this._separation = function(a, b) {
+            return a.parent === b.parent ? 1 : 2;
+        };
+        _this._shape = constant("Circle");
+        _this._shapeConfig = assign(_this._shapeConfig, {
+            ariaLabel: function(d, i) {
+                return _this._treeData ? "".concat(_this._treeData[i].depth, ". ").concat(_this._drawLabel(d, i), ".") : "";
+            },
+            labelConfig: {
+                fontColor: "#444"
+            },
+            Path: {
+                fill: "none",
+                stroke: "#ccc",
+                strokeWidth: 1
+            },
+            r: constant(5),
+            width: constant(10),
+            height: constant(10)
+        });
+        _this._tree = tree();
+        return _this;
+    }
+    _create_class(Tree, [
+        {
+            /**
+      Extends the draw behavior of the abstract Viz class.
+      @private
+  */ key: "_draw",
+            value: function _draw(callback) {
+                var _this = this;
+                _get(_get_prototype_of(Tree.prototype), "_draw", this).call(this, callback);
+                var height = this._orient === "vertical" ? this._height - this._margin.top - this._margin.bottom : this._width - this._margin.left - this._margin.right, left = this._orient === "vertical" ? "left" : "top", that = this, transform = "translate(".concat(this._margin.left, ", ").concat(this._margin.top, ")"), width = this._orient === "horizontal" ? this._height - this._margin.top - this._margin.bottom : this._width - this._margin.left - this._margin.right;
+                var treeData = this._treeData = this._tree.separation(this._separation).size([
+                    width,
+                    height
+                ])(hierarchy({
+                    key: "root",
+                    values: nest(this._filteredData, this._groupBy.slice(0, this._drawDepth + 1))
+                }, function(d) {
+                    return d.key && d.values ? d.values : null;
+                }).sort(this._sort)).descendants().filter(function(d) {
+                    return d.depth <= _this._groupBy.length && d.parent;
+                });
+                /**
+        Merges the values of a given nest branch.
+        @private
+    */ function flattenBranchData(branch) {
+                    return merge(branch.values.map(function(l) {
+                        return l.key && l.values ? flattenBranchData(l) : l;
+                    }), that._aggs);
+                }
+                treeData.forEach(function(d, i) {
+                    if (d.data.key && d.data.values) d.data = flattenBranchData(d.data);
+                    d.__d3plus__ = true;
+                    d.i = i;
+                });
+                var r = this._shapeConfig.r;
+                if (typeof r !== "function") r = constant(r);
+                var rBufferRoot = max(treeData, function(d) {
+                    return d.depth === 1 ? r(d.data, d.i) : 0;
+                });
+                var rBufferEnd = max(treeData, function(d) {
+                    return d.children ? 0 : r(d.data, d.i);
+                });
+                var yExtent = extent(treeData, function(d) {
+                    return d.y;
+                });
+                this._labelHeight = min([
+                    this._orient === "vertical" ? 50 : 100,
+                    (yExtent[1] - rBufferRoot - rBufferEnd) / (this._groupBy.length + 1)
+                ]);
+                this._labelWidths = nest(treeData, function(d) {
+                    return d.depth;
+                }).map(function(d) {
+                    return d.values.reduce(function(num, v, i) {
+                        var next = i < d.values.length - 1 ? d.values[i + 1].x : width + _this._margin[left], prev = i ? d.values[i - 1].x : _this._margin[left];
+                        return min([
+                            num,
+                            next - v.x,
+                            v.x - prev
+                        ]);
+                    }, width);
+                });
+                var yScale = scaleLinear().domain(yExtent).range([
+                    rBufferRoot + this._labelHeight,
+                    height - rBufferEnd - this._labelHeight
+                ]);
+                treeData.forEach(function(d) {
+                    var val = yScale(d.y);
+                    if (_this._orient === "horizontal") {
+                        d.y = d.x;
+                        d.x = val;
+                    } else d.y = val;
+                });
+                var elemObject = {
+                    parent: this._select,
+                    enter: {
+                        transform: transform
+                    },
+                    update: {
+                        transform: transform
+                    }
+                };
+                this._shapes.push(new Path().data(treeData.filter(function(d) {
+                    return d.depth > 1;
+                })).select(elem("g.d3plus-Tree-Links", elemObject).node()).config(configPrep.bind(this)(this._shapeConfig, "shape", "Path")).config({
+                    d: function(d) {
+                        var r = _this._shapeConfig.r;
+                        if (typeof r === "function") r = r(d.data, d.i);
+                        var px = d.parent.x - d.x + (_this._orient === "vertical" ? 0 : r), py = d.parent.y - d.y + (_this._orient === "vertical" ? r : 0), x = _this._orient === "vertical" ? 0 : -r, y = _this._orient === "vertical" ? -r : 0;
+                        return _this._orient === "vertical" ? "M".concat(x, ",").concat(y, "C").concat(x, ",").concat((y + py) / 2, " ").concat(px, ",").concat((y + py) / 2, " ").concat(px, ",").concat(py) : "M".concat(x, ",").concat(y, "C").concat((x + px) / 2, ",").concat(y, " ").concat((x + px) / 2, ",").concat(py, " ").concat(px, ",").concat(py);
+                    },
+                    id: function(d, i) {
+                        return _this._ids(d, i).join("-");
+                    }
+                }).render());
+                this._shapes.push(new Circle().data(treeData).select(elem("g.d3plus-Tree-Shapes", elemObject).node()).config(configPrep.bind(this)(this._shapeConfig, "shape", "Circle")).config({
+                    id: function(d, i) {
+                        return _this._ids(d, i).join("-");
+                    },
+                    label: function(d, i) {
+                        if (_this._label) return _this._label(d.data, i);
+                        var ids = _this._ids(d, i).slice(0, d.depth);
+                        return ids[ids.length - 1];
+                    },
+                    labelConfig: {
+                        textAnchor: function(d) {
+                            return _this._orient === "vertical" ? "middle" : d.data.children && d.data.depth !== _this._groupBy.length ? "end" : "start";
+                        },
+                        verticalAlign: function(d) {
+                            return _this._orient === "vertical" ? d.data.depth === 1 ? "bottom" : "top" : "middle";
+                        }
+                    },
+                    hitArea: function(d, i, s) {
+                        var h = _this._labelHeight, w = _this._labelWidths[d.depth - 1];
+                        return {
+                            width: _this._orient === "vertical" ? w : s.r * 2 + w,
+                            height: _this._orient === "horizontal" ? h : s.r * 2 + h,
+                            x: _this._orient === "vertical" ? -w / 2 : d.children && d.depth !== _this._groupBy.length ? -(s.r + w) : -s.r,
+                            y: _this._orient === "horizontal" ? -h / 2 : d.children && d.depth !== _this._groupBy.length ? -(s.r + _this._labelHeight) : -s.r
+                        };
+                    },
+                    labelBounds: function(d, i, s) {
+                        var h = _this._labelHeight, height = _this._orient === "vertical" ? "height" : "width", w = _this._labelWidths[d.depth - 1], width = _this._orient === "vertical" ? "width" : "height", x = _this._orient === "vertical" ? "x" : "y", y = _this._orient === "vertical" ? "y" : "x";
+                        var _obj;
+                        return _obj = {}, _define_property(_obj, width, w), _define_property(_obj, height, h), _define_property(_obj, x, -w / 2), _define_property(_obj, y, d.children && d.depth !== _this._groupBy.length ? -(s.r + h) : s.r), _obj;
+                    }
+                }).render());
+                return this;
+            }
+        },
+        {
+            /**
+      @memberof Tree
+      @desc If *value* is specified, sets the orientation to the specified value. If *value* is not specified, returns the current orientation.
+      @param {String} [*value* = "vertical"] Accepts either "vertical" or "horizontal".
+  */ key: "orient",
+            value: function orient(_) {
+                return arguments.length ? (this._orient = _, this) : this._orient;
+            }
+        },
+        {
+            /**
+      @memberof Tree
+      @desc If *value* is specified, sets the separation accessor to the specified function. If *value* is not specified, returns the current separation accessor.
+
+From the [d3-hierarchy documentation](https://github.com/d3/d3-hierarchy#tree_separation):
+> The separation accessor is used to separate neighboring nodes. The separation function is passed two nodes a and b, and must return the desired separation. The nodes are typically siblings, though the nodes may be more distantly related if the layout decides to place such nodes adjacent.
+      @param {Function} [*value*]
+      @example
+function separation(a, b) {
+  return a.parent === b.parent ? 1 : 2;
+}
+  */ key: "separation",
+            value: function separation(_) {
+                return arguments.length ? (this._separation = _, this) : this._separation;
+            }
+        }
+    ]);
+    return Tree;
+}(Viz);
+/**
+    @class Tree
+    @extends Viz
+    @desc Uses d3's [tree layout](https://github.com/d3/d3-hierarchy#tree) to create a tidy tree chart based on an array of data.
+*/ export { Tree as default };