@d3plus/core 3.0.0-alpha.0

package/es/src/charts/Priestley.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 _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 { min, max, range } from "d3-array";
+import { nest } from "d3-collection";
+import { scaleBand } from "d3-scale";
+import { Axis } from "../components/index.js";
+import { assign, date, elem } from "@d3plus/dom";
+import { Rect } from "../shapes/index.js";
+import { accessor, configPrep } from "../utils/index.js";
+import Viz from "./Viz.js";
+var Priestley = /*#__PURE__*/ function(Viz) {
+    "use strict";
+    _inherits(Priestley, Viz);
+    function Priestley() {
+        _class_call_check(this, Priestley);
+        var _this;
+        _this = _call_super(this, Priestley);
+        _this._axis = new Axis().align("end").orient("bottom");
+        _this._axisConfig = {
+            scale: "time"
+        };
+        _this._axisTest = new Axis().align("end").gridSize(0).orient("bottom");
+        _this.end("end");
+        _this._paddingInner = 0.05;
+        _this._paddingOuter = 0.05;
+        _this._shapeConfig = assign({}, _this._shapeConfig, {
+            ariaLabel: function(d, i) {
+                return "".concat(_this._drawLabel(d, i), ", ").concat(_this._start(d, i), " - ").concat(_this._end(d, i), ".");
+            }
+        });
+        _this.start("start");
+        return _this;
+    }
+    _create_class(Priestley, [
+        {
+            /**
+      @memberof Priestley
+      @desc Extends the render behavior of the abstract Viz class.
+      @private
+  */ key: "_draw",
+            value: function _draw(callback) {
+                var _this = this;
+                _get(_get_prototype_of(Priestley.prototype), "_draw", this).call(this, callback);
+                if (!this._filteredData) return this;
+                var data = this._filteredData.map(function(data, i) {
+                    return {
+                        __d3plus__: true,
+                        data: data,
+                        end: _this._axisConfig.scale === "time" ? date(_this._end(data, i)) : _this._end(data, i),
+                        i: i,
+                        id: _this._id(data, i),
+                        start: _this._axisConfig.scale === "time" ? date(_this._start(data, i)) : _this._start(data, i)
+                    };
+                }).filter(function(d) {
+                    return d.end - d.start > 0;
+                }).sort(function(a, b) {
+                    return a.start - b.start;
+                });
+                var nestedData;
+                if (this._groupBy.length > 1 && this._drawDepth > 0) {
+                    var _loop = function(i) {
+                        dataNest.key(function(d) {
+                            return _this._groupBy[i](d.data, d.i);
+                        });
+                    };
+                    var dataNest = nest();
+                    for(var i = 0; i < this._drawDepth; i++)_loop(i);
+                    nestedData = dataNest.entries(data);
+                } else nestedData = [
+                    {
+                        values: data
+                    }
+                ];
+                var maxLane = 0;
+                nestedData.forEach(function(g) {
+                    var track = [];
+                    g.values.forEach(function(d) {
+                        track = track.map(function(t) {
+                            return t <= d.start ? false : t;
+                        });
+                        var i = track.indexOf(false);
+                        if (i < 0) {
+                            d.lane = maxLane + track.length;
+                            track.push(d.end);
+                        } else {
+                            track[i] = d.end;
+                            d.lane = maxLane + i;
+                        }
+                    });
+                    maxLane += track.length;
+                });
+                var axisConfig = {
+                    domain: [
+                        min(data, function(d) {
+                            return d.start;
+                        }) || 0,
+                        max(data, function(d) {
+                            return d.end;
+                        }) || 0
+                    ],
+                    height: this._height - this._margin.top - this._margin.bottom,
+                    width: this._width - this._margin.left - this._margin.right
+                };
+                var transform = "translate(".concat(this._margin.left, ", ").concat(this._margin.top, ")");
+                this._axisTest.config(axisConfig).config(this._axisConfig).select(elem("g.d3plus-priestley-axis-test", {
+                    parent: this._select,
+                    enter: {
+                        opacity: 0
+                    }
+                }).node()).render();
+                this._axis.config(axisConfig).config(this._axisConfig).select(elem("g.d3plus-priestley-axis", {
+                    parent: this._select,
+                    enter: {
+                        transform: transform
+                    },
+                    update: {
+                        transform: transform
+                    }
+                }).node()).render();
+                var axisPad = this._axisTest._padding;
+                var xScale = this._axis._d3Scale;
+                var yScale = scaleBand().domain(range(0, maxLane, 1)).paddingInner(this._paddingInner).paddingOuter(this._paddingOuter).rangeRound([
+                    this._height - this._margin.bottom - this._axisTest.outerBounds().height - axisPad,
+                    this._margin.top + axisPad
+                ]);
+                var bandWidth = yScale.bandwidth();
+                this._shapes.push(new Rect().data(data).duration(this._duration).height(bandWidth).label(function(d, i) {
+                    return _this._drawLabel(d.data, i);
+                }).select(elem("g.d3plus-priestley-shapes", {
+                    parent: this._select
+                }).node()).width(function(d) {
+                    var w = Math.abs(xScale(d.end) - xScale(d.start));
+                    return w > 2 ? w - 2 : w;
+                }).x(function(d) {
+                    return xScale(d.start) + (xScale(d.end) - xScale(d.start)) / 2;
+                }).y(function(d) {
+                    return yScale(d.lane) + bandWidth / 2;
+                }).config(configPrep.bind(this)(this._shapeConfig, "shape", "Rect")).render());
+                return this;
+            }
+        },
+        {
+            /**
+      @memberof Priestley
+      @desc If *value* is specified, sets the config method for the axis and returns the current class instance. If *value* is not specified, returns the current axis configuration.
+      @param {Object} [*value*]
+      @chainable
+  */ key: "axisConfig",
+            value: function axisConfig(_) {
+                return arguments.length ? (this._axisConfig = assign(this._axisConfig, _), this) : this._axisConfig;
+            }
+        },
+        {
+            /**
+      @memberof Priestley
+      @desc If *value* is specified, sets the end accessor to the specified function or key and returns the current class instance. If *value* is not specified, returns the current end accessor.
+      @param {Function|String} [*value*]
+      @chainable
+  */ key: "end",
+            value: function end(_) {
+                if (arguments.length) {
+                    if (typeof _ === "function") this._end = _;
+                    else {
+                        this._end = accessor(_);
+                        if (!this._aggs[_]) this._aggs[_] = max;
+                    }
+                    return this;
+                } else return this._end;
+            }
+        },
+        {
+            /**
+      @memberof Priestley
+      @desc Sets the [paddingInner](https://github.com/d3/d3-scale#band_paddingInner) value of the underlining [Band Scale](https://github.com/d3/d3-scale#band-scales) used to determine the height of each bar. Values should be a ratio between 0 and 1 representing the space in between each rectangle.
+      @param {Number} [*value* = 0.05]
+      @chainable
+  */ key: "paddingInner",
+            value: function paddingInner(_) {
+                return arguments.length ? (this._paddingInner = _, this) : this._paddingInner;
+            }
+        },
+        {
+            /**
+      @memberof Priestley
+      @desc Sets the [paddingOuter](https://github.com/d3/d3-scale#band_paddingOuter) value of the underlining [Band Scale](https://github.com/d3/d3-scale#band-scales) used to determine the height of each bar. Values should be a ratio between 0 and 1 representing the space around the outer rectangles.
+      @param {Number} [*value* = 0.05]
+      @chainable
+  */ key: "paddingOuter",
+            value: function paddingOuter(_) {
+                return arguments.length ? (this._paddingOuter = _, this) : this._paddingOuter;
+            }
+        },
+        {
+            /**
+      @memberof Priestley
+      @desc If *value* is specified, sets the start accessor to the specified function or key and returns the current class instance. If *value* is not specified, returns the current start accessor.
+      @param {Function|String} [*value*]
+      @chainable
+  */ key: "start",
+            value: function start(_) {
+                if (arguments.length) {
+                    if (typeof _ === "function") this._start = _;
+                    else {
+                        this._start = accessor(_);
+                        if (!this._aggs[_]) this._aggs[_] = min;
+                    }
+                    return this;
+                } else return this._start;
+            }
+        }
+    ]);
+    return Priestley;
+}(Viz);
+/**
+    @class Priestley
+    @extends Viz
+    @desc Creates a priestley timeline based on an array of data.
+*/ export { Priestley as default };

package/es/src/charts/Radar.js

@@ -0,0 +1,365 @@
+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 _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 { min, max, sum } from "d3-array";
+import { nest } from "d3-collection";
+import { pointer } from "d3-selection";
+import { merge } from "@d3plus/data";
+import { assign, elem } from "@d3plus/dom";
+import { accessor, configPrep, constant } from "../utils/index.js";
+import { Circle, Path, Rect } from "../shapes/index.js";
+import Viz from "./Viz.js";
+var tau = Math.PI * 2;
+var Radar = /*#__PURE__*/ function(Viz) {
+    "use strict";
+    _inherits(Radar, Viz);
+    function Radar() {
+        _class_call_check(this, Radar);
+        var _this;
+        _this = _call_super(this, Radar);
+        _this._axisConfig = {
+            shapeConfig: {
+                fill: constant("none"),
+                labelConfig: {
+                    fontColor: "#999",
+                    padding: 0,
+                    textAnchor: function(d, i, x) {
+                        return x.textAnchor;
+                    },
+                    verticalAlign: "middle"
+                },
+                stroke: "#eee",
+                strokeWidth: constant(1)
+            }
+        };
+        _this._discrete = "metric";
+        _this._levels = 6;
+        _this._metric = accessor("metric");
+        _this._outerPadding = 100;
+        _this._shape = constant("Path");
+        _this._value = accessor("value");
+        return _this;
+    }
+    _create_class(Radar, [
+        {
+            /**
+      Extends the draw behavior of the abstract Viz class.
+      @private
+  */ key: "_draw",
+            value: function _draw(callback) {
+                var _loop = function(e) {
+                    var event = events[e];
+                    pathConfig.on[event] = function(d, i, s, e) {
+                        var x = d.points.map(function(p) {
+                            return p.x + width / 2;
+                        });
+                        var y = d.points.map(function(p) {
+                            return p.y + height / 2;
+                        });
+                        var cursor = pointer(e, _this._select.node());
+                        var xDist = x.map(function(p) {
+                            return Math.abs(p - cursor[0]);
+                        });
+                        var yDist = y.map(function(p) {
+                            return Math.abs(p - cursor[1]);
+                        });
+                        var dists = xDist.map(function(d, i) {
+                            return d + yDist[i];
+                        });
+                        _this._on[event].bind(_this)(d.arr[dists.indexOf(min(dists))], i, s, e);
+                    };
+                };
+                var _this = this;
+                _get(_get_prototype_of(Radar.prototype), "_draw", this).call(this, callback);
+                var height = this._height - this._margin.top - this._margin.bottom, width = this._width - this._margin.left - this._margin.right;
+                var radius = min([
+                    height,
+                    width
+                ]) / 2 - this._outerPadding, transform = "translate(".concat(width / 2, ", ").concat(height / 2, ")");
+                var nestedAxisData = nest().key(this._metric).entries(this._filteredData), nestedGroupData = nest().key(this._id).key(this._metric).entries(this._filteredData);
+                var maxValue = max(nestedGroupData.map(function(h) {
+                    return h.values.map(function(d) {
+                        return sum(d.values, function(x, i) {
+                            return _this._value(x, i);
+                        });
+                    });
+                }).flat());
+                var circularAxis = Array.from(Array(this._levels).keys()).map(function(d) {
+                    return {
+                        id: d,
+                        r: radius * ((d + 1) / _this._levels)
+                    };
+                });
+                var circleConfig = configPrep.bind(this)(this._axisConfig.shapeConfig, "shape", "Circle");
+                delete circleConfig.label;
+                new Circle().data(circularAxis).select(elem("g.d3plus-Radar-radial-circles", {
+                    parent: this._select,
+                    enter: {
+                        transform: transform
+                    },
+                    update: {
+                        transform: transform
+                    }
+                }).node()).config(circleConfig).render();
+                var totalAxis = nestedAxisData.length;
+                var polarAxis = nestedAxisData.map(function(d, i) {
+                    var width = _this._outerPadding;
+                    var fontSize = _this._shapeConfig.labelConfig.fontSize && _this._shapeConfig.labelConfig.fontSize(d, i) || 11;
+                    var lineHeight = fontSize * 1.4;
+                    var height = lineHeight * 2;
+                    var padding = 10, quadrant = parseInt(360 - 360 / totalAxis * i / 90, 10) % 4 + 1, radians = tau / totalAxis * i;
+                    var angle = 360 / totalAxis * i;
+                    var textAnchor = "start";
+                    var x = padding;
+                    if (quadrant === 2 || quadrant === 3) {
+                        x = -width - padding;
+                        textAnchor = "end";
+                        angle += 180;
+                    }
+                    var labelBounds = {
+                        x: x,
+                        y: -height / 2,
+                        width: width,
+                        height: height
+                    };
+                    return {
+                        __d3plus__: true,
+                        data: merge(d.values, _this._aggs),
+                        i: i,
+                        id: d.key,
+                        angle: angle,
+                        textAnchor: textAnchor,
+                        labelBounds: labelBounds,
+                        rotateAnchor: [
+                            -x,
+                            height / 2
+                        ],
+                        x: radius * Math.cos(radians),
+                        y: radius * Math.sin(radians)
+                    };
+                }).sort(function(a, b) {
+                    return a.key - b.key;
+                });
+                new Rect().data(polarAxis).rotate(function(d) {
+                    return d.angle || 0;
+                }).width(0).height(0).x(function(d) {
+                    return d.x;
+                }).y(function(d) {
+                    return d.y;
+                }).label(function(d) {
+                    return d.id;
+                }).labelBounds(function(d) {
+                    return d.labelBounds;
+                }).labelConfig(this._axisConfig.shapeConfig.labelConfig).select(elem("g.d3plus-Radar-text", {
+                    parent: this._select,
+                    enter: {
+                        transform: transform
+                    },
+                    update: {
+                        transform: transform
+                    }
+                }).node()).render();
+                new Path().data(polarAxis).d(function(d) {
+                    return "M".concat(0, ",", 0, " ").concat(-d.x, ",").concat(-d.y);
+                }).select(elem("g.d3plus-Radar-axis", {
+                    parent: this._select,
+                    enter: {
+                        transform: transform
+                    },
+                    update: {
+                        transform: transform
+                    }
+                }).node()).config(configPrep.bind(this)(this._axisConfig.shapeConfig, "shape", "Path")).render();
+                var groupData = nestedGroupData.map(function(h) {
+                    var q = h.values.map(function(d, i) {
+                        var value = sum(d.values, function(x, i) {
+                            return _this._value(x, i);
+                        });
+                        var r = value / maxValue * radius, radians = tau / totalAxis * i;
+                        return {
+                            x: r * Math.cos(radians),
+                            y: r * Math.sin(radians)
+                        };
+                    });
+                    var d = "M ".concat(q[0].x, " ").concat(q[0].y, " ").concat(q.map(function(l) {
+                        return "L ".concat(l.x, " ").concat(l.y);
+                    }).join(" "), " L ").concat(q[0].x, " ").concat(q[0].y);
+                    return {
+                        arr: h.values.map(function(d) {
+                            return merge(d.values, _this._aggs);
+                        }),
+                        id: h.key,
+                        points: q,
+                        d: d,
+                        __d3plus__: true,
+                        data: merge(h.values.map(function(d) {
+                            return merge(d.values, _this._aggs);
+                        }), _this._aggs)
+                    };
+                });
+                var pathConfig = configPrep.bind(this)(this._shapeConfig, "shape", "Path");
+                var events = Object.keys(pathConfig.on);
+                pathConfig.on = {};
+                for(var e = 0; e < events.length; e++)_loop(e);
+                this._shapes.push(new Path().data(groupData).d(function(d) {
+                    return d.d;
+                }).select(elem("g.d3plus-Radar-items", {
+                    parent: this._select,
+                    enter: {
+                        transform: transform
+                    },
+                    update: {
+                        transform: transform
+                    }
+                }).node()).config(pathConfig).render());
+                return this;
+            }
+        },
+        {
+            /**
+      @memberof Radar
+      @desc Sets the config method used for the radial spokes, circles, and labels.
+      @param {Object} *value*
+      @chainable
+  */ key: "axisConfig",
+            value: function axisConfig(_) {
+                return arguments.length ? (this._axisConfig = assign(this._axisConfig, _), this) : this._axisConfig;
+            }
+        },
+        {
+            /**
+      @memberof Radar
+      @desc Defines the value used as axis. If *value* is specified, sets the accessor to the specified metric function. If *value* is not specified, returns the current metric accessor.
+      @param {Function|String} *value*
+      @chainable
+  */ key: "metric",
+            value: function metric(_) {
+                return arguments.length ? (this._metric = typeof _ === "function" ? _ : accessor(_), this) : this._metric;
+            }
+        },
+        {
+            /**
+      @memberof Radar
+      @desc Determines how much pixel spaces to give the outer labels.
+      @param {Number} [*value* = 100]
+      @chainable
+  */ key: "outerPadding",
+            value: function outerPadding(_) {
+                return arguments.length ? (this._outerPadding = _, this) : this._outerPadding;
+            }
+        },
+        {
+            /**
+      @memberof Radar
+      @desc If *value* is specified, sets the value accessor to the specified function or number and returns the current class instance. If *value* is not specified, returns the current value accessor.
+      @param {Function|String} *value*
+      @example
+function value(d) {
+  return d.value;
+}
+  */ key: "value",
+            value: function value(_) {
+                return arguments.length ? (this._value = typeof _ === "function" ? _ : accessor(_), this) : this._value;
+            }
+        }
+    ]);
+    return Radar;
+}(Viz);
+/**
+    @class Radar
+    @extends Viz
+    @desc Creates a radar visualization based on an array of data.
+*/ export { Radar as default };