@d3plus/core 3.0.0-alpha.0

package/es/src/shapes/Image.js

@@ -0,0 +1,255 @@
+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;
+}
+import { select } from "d3-selection";
+import { transition } from "d3-transition";
+import { accessor, constant } from "../utils/index.js";
+var Image = /*#__PURE__*/ function() {
+    "use strict";
+    function Image() {
+        _class_call_check(this, Image);
+        this._duration = 600;
+        this._height = accessor("height");
+        this._id = accessor("id");
+        this._opacity = constant(1);
+        this._pointerEvents = constant("auto");
+        this._select;
+        this._url = accessor("url");
+        this._width = accessor("width");
+        this._x = accessor("x", 0);
+        this._y = accessor("y", 0);
+    }
+    _create_class(Image, [
+        {
+            /**
+      @memberof Image
+      @desc Renders the current Image to the page. If a *callback* is specified, it will be called once the images are done drawing.
+      @param {Function} [*callback*]
+      @chainable
+  */ key: "render",
+            value: function render(callback) {
+                var _this = this;
+                if (this._select === void 0) this.select(select("body").append("svg").style("width", "".concat(window.innerWidth, "px")).style("height", "".concat(window.innerHeight, "px")).style("display", "block").node());
+                var images = this._select.selectAll(".d3plus-Image").data(this._data, this._id);
+                var enter = images.enter().append("image").attr("class", "d3plus-Image").attr("opacity", 0).attr("width", 0).attr("height", 0).attr("x", function(d, i) {
+                    return _this._x(d, i) + _this._width(d, i) / 2;
+                }).attr("y", function(d, i) {
+                    return _this._y(d, i) + _this._height(d, i) / 2;
+                });
+                var t = transition().duration(this._duration), that = this, update = enter.merge(images);
+                update.attr("xlink:href", this._url).style("pointer-events", this._pointerEvents).transition(t).attr("opacity", this._opacity).attr("width", function(d, i) {
+                    return _this._width(d, i);
+                }).attr("height", function(d, i) {
+                    return _this._height(d, i);
+                }).attr("x", function(d, i) {
+                    return _this._x(d, i);
+                }).attr("y", function(d, i) {
+                    return _this._y(d, i);
+                }).each(function(d, i) {
+                    var image = select(this), link = that._url(d, i);
+                    var fullAddress = link.indexOf("http://") === 0 || link.indexOf("https://") === 0;
+                    if (!fullAddress || link.indexOf(window.location.hostname) === 0) {
+                        var img = new Image();
+                        img.src = link;
+                        img.crossOrigin = "Anonymous";
+                        img.onload = function() {
+                            var canvas = document.createElement("canvas");
+                            canvas.width = this.width;
+                            canvas.height = this.height;
+                            var context = canvas.getContext("2d");
+                            context.drawImage(this, 0, 0);
+                            image.attr("xlink:href", canvas.toDataURL("image/png"));
+                        };
+                    }
+                });
+                images.exit().transition(t).attr("width", function(d, i) {
+                    return _this._width(d, i);
+                }).attr("height", function(d, i) {
+                    return _this._height(d, i);
+                }).attr("x", function(d, i) {
+                    return _this._x(d, i);
+                }).attr("y", function(d, i) {
+                    return _this._y(d, i);
+                }).attr("opacity", 0).remove();
+                if (callback) setTimeout(callback, this._duration + 100);
+                return this;
+            }
+        },
+        {
+            /**
+      @memberof Image
+      @desc If *data* is specified, sets the data array to the specified array and returns the current class instance. If *data* is not specified, returns the current data array. An <image> tag will be drawn for each object in the array.
+      @param {Array} [*data* = []]
+      @chainable
+  */ key: "data",
+            value: function data(_) {
+                return arguments.length ? (this._data = _, this) : this._data;
+            }
+        },
+        {
+            /**
+      @memberof Image
+      @desc If *ms* is specified, sets the animation duration to the specified number and returns the current class instance. If *ms* is not specified, returns the current animation duration.
+      @param {Number} [*ms* = 600]
+      @chainable
+  */ key: "duration",
+            value: function duration(_) {
+                return arguments.length ? (this._duration = _, this) : this._duration;
+            }
+        },
+        {
+            /**
+      @memberof Image
+      @desc If *value* is specified, sets the height accessor to the specified function or number and returns the current class instance.
+      @param {Function|Number} [*value*]
+      @chainable
+      @example
+function(d) {
+  return d.height;
+}
+  */ key: "height",
+            value: function height(_) {
+                return arguments.length ? (this._height = typeof _ === "function" ? _ : constant(_), this) : this._height;
+            }
+        },
+        {
+            /**
+      @memberof Image
+      @desc If *value* is specified, sets the id accessor to the specified function and returns the current class instance.
+      @param {Function} [*value*]
+      @chainable
+      @example
+function(d) {
+  return d.id;
+}
+  */ key: "id",
+            value: function id(_) {
+                return arguments.length ? (this._id = _, this) : this._id;
+            }
+        },
+        {
+            /**
+      @memberof Image
+      @desc Sets the opacity of the image.
+      @param {Number} [*value* = 1]
+      @chainable
+  */ key: "opacity",
+            value: function opacity(_) {
+                return arguments.length ? (this._opacity = typeof _ === "function" ? _ : constant(_), this) : this._opacity;
+            }
+        },
+        {
+            /**
+      @memberof Image
+      @desc If *value* is specified, sets the pointer-events accessor to the specified function or string and returns the current class instance.
+      @param {Function|String} [*value* = "auto"]
+      @chainable
+  */ key: "pointerEvents",
+            value: function pointerEvents(_) {
+                return arguments.length ? (this._pointerEvents = typeof _ === "function" ? _ : constant(_), this) : this._pointerEvents;
+            }
+        },
+        {
+            /**
+      @memberof Image
+      @desc If *selector* is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If *selector* is not specified, returns the current SVG container element.
+      @param {String|HTMLElement} [*selector* = d3.select("body").append("svg")]
+      @chainable
+  */ key: "select",
+            value: function select1(_) {
+                return arguments.length ? (this._select = select(_), this) : this._select;
+            }
+        },
+        {
+            /**
+      @memberof Image
+      @desc If *value* is specified, sets the URL accessor to the specified function and returns the current class instance.
+      @param {Function} [*value*]
+      @chainable
+      @example
+function(d) {
+  return d.url;
+}
+  */ key: "url",
+            value: function url(_) {
+                return arguments.length ? (this._url = _, this) : this._url;
+            }
+        },
+        {
+            /**
+      @memberof Image
+      @desc If *value* is specified, sets the width accessor to the specified function or number and returns the current class instance.
+      @param {Function|Number} [*value*]
+      @chainable
+      @example
+function(d) {
+  return d.width;
+}
+  */ key: "width",
+            value: function width(_) {
+                return arguments.length ? (this._width = typeof _ === "function" ? _ : constant(_), this) : this._width;
+            }
+        },
+        {
+            /**
+      @memberof Image
+      @desc If *value* is specified, sets the x accessor to the specified function or number and returns the current class instance.
+      @param {Function|Number} [*value*]
+      @chainable
+      @example
+function(d) {
+  return d.x || 0;
+}
+  */ key: "x",
+            value: function x(_) {
+                return arguments.length ? (this._x = typeof _ === "function" ? _ : constant(_), this) : this._x;
+            }
+        },
+        {
+            /**
+      @memberof Image
+      @desc If *value* is specified, sets the y accessor to the specified function or number and returns the current class instance.
+      @param {Function|Number} [*value*]
+      @chainable
+      @example
+function(d) {
+  return d.y || 0;
+}
+  */ key: "y",
+            value: function y(_) {
+                return arguments.length ? (this._y = typeof _ === "function" ? _ : constant(_), this) : this._y;
+            }
+        }
+    ]);
+    return Image;
+}();
+/**
+    @class Image
+    @desc Creates SVG images based on an array of data.
+    @example <caption>a sample row of data</caption>
+var data = {"url": "file.png", "width": "100", "height": "50"};
+@example <caption>passed to the generator</caption>
+new Image().data([data]).render();
+@example <caption>creates the following</caption>
+<image class="d3plus-Image" opacity="1" href="file.png" width="100" height="50" x="0" y="0"></image>
+@example <caption>this is shorthand for the following</caption>
+image().data([data])();
+@example <caption>which also allows a post-draw callback function</caption>
+image().data([data])(function() { alert("draw complete!"); })
+*/ export { Image as default };

package/es/src/shapes/Line.js

@@ -0,0 +1,289 @@
+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 { extent, sum } from "d3-array";
+import { nest } from "d3-collection";
+import { interpolatePath } from "d3-interpolate-path";
+import { select } from "d3-selection";
+import * as paths from "d3-shape";
+import { merge } from "@d3plus/data";
+import { constant } from "../utils/index.js";
+import Shape from "./Shape.js";
+var Line = /*#__PURE__*/ function(Shape) {
+    "use strict";
+    _inherits(Line, Shape);
+    function Line() {
+        _class_call_check(this, Line);
+        var _this;
+        _this = _call_super(this, Line);
+        _this._curve = constant("linear");
+        _this._defined = function(d) {
+            return d;
+        };
+        _this._fill = constant("none");
+        _this._hitArea = constant({
+            "d": function(d) {
+                return _this._path(d.values);
+            },
+            "fill": "none",
+            "stroke-width": 10,
+            "transform": null
+        });
+        _this._name = "Line";
+        _this._path = paths.line();
+        _this._stroke = constant("black");
+        _this._strokeWidth = constant(1);
+        return _this;
+    }
+    _create_class(Line, [
+        {
+            /**
+      @memberof Line
+      @desc Filters/manipulates the data array before binding each point to an SVG group.
+      @param {Array} [*data* = the data array to be filtered]
+      @private
+  */ key: "_dataFilter",
+            value: function _dataFilter(data) {
+                var _this = this;
+                var lines = nest().key(this._id).entries(data).map(function(d) {
+                    d.data = merge(d.values);
+                    d.i = data.indexOf(d.values[0]);
+                    var x = extent(d.values, _this._x);
+                    d.xR = x;
+                    d.width = x[1] - x[0];
+                    d.x = x[0] + d.width / 2;
+                    var y = extent(d.values, _this._y);
+                    d.yR = y;
+                    d.height = y[1] - y[0];
+                    d.y = y[0] + d.height / 2;
+                    d.nested = true;
+                    d.translate = [
+                        d.x,
+                        d.y
+                    ];
+                    d.__d3plusShape__ = true;
+                    return d;
+                });
+                lines.key = function(d) {
+                    return d.key;
+                };
+                return lines;
+            }
+        },
+        {
+            /**
+      @memberof Line
+      @desc Draws the lines.
+      @param {Function} [*callback*]
+      @chainable
+  */ key: "render",
+            value: function render(callback) {
+                var _this = this;
+                _get(_get_prototype_of(Line.prototype), "render", this).call(this, callback);
+                var that = this;
+                /**
+        @desc Calculates the stroke-dasharray used for animations
+        @param {Object} *d* data point
+        @private
+    */ function calculateStrokeDashArray(d) {
+                    d.initialLength = this.getTotalLength();
+                    var strokeArray = that._strokeDasharray(d.values[0], that._data.indexOf(d.values[0])).split(" ").map(Number);
+                    if (strokeArray.length === 1 && strokeArray[0] === 0) strokeArray = [
+                        d.initialLength
+                    ];
+                    else if (strokeArray.length === 1) strokeArray.push(strokeArray[0]);
+                    else if (strokeArray.length % 2) strokeArray = strokeArray.concat(strokeArray);
+                    var newStrokeArray = [];
+                    var strokeLength = 0;
+                    while(strokeLength < d.initialLength){
+                        for(var i = 0; i < strokeArray.length; i++){
+                            var num = strokeArray[i];
+                            strokeLength += num;
+                            newStrokeArray.push(num);
+                            if (strokeLength >= d.initialLength) break;
+                        }
+                    }
+                    if (newStrokeArray.length > 1 && newStrokeArray.length % 2) newStrokeArray.pop();
+                    newStrokeArray[newStrokeArray.length - 1] += d.initialLength - sum(newStrokeArray);
+                    if (newStrokeArray.length % 2 === 0) newStrokeArray.push(0);
+                    d.initialStrokeArray = newStrokeArray.join(" ");
+                }
+                var userCurve = this._curve.bind(this)(this.config());
+                var curve = paths["curve".concat(userCurve.charAt(0).toUpperCase()).concat(userCurve.slice(1))];
+                this._path.curve(curve).defined(this._defined).x(this._x).y(this._y);
+                var enter = this._enter.append("path").attr("transform", function(d) {
+                    return "translate(".concat(-d.xR[0] - d.width / 2, ", ").concat(-d.yR[0] - d.height / 2, ")");
+                }).attr("d", function(d) {
+                    return _this._path(d.values);
+                }).call(this._applyStyle.bind(this));
+                var update = this._update.select("path").attr("stroke-dasharray", function(d) {
+                    return that._strokeDasharray(d.values[0], that._data.indexOf(d.values[0]));
+                });
+                if (this._duration) {
+                    enter.each(calculateStrokeDashArray).attr("stroke-dasharray", function(d) {
+                        return "".concat(d.initialStrokeArray, " ").concat(d.initialLength);
+                    }).attr("stroke-dashoffset", function(d) {
+                        return d.initialLength;
+                    }).transition(this._transition).attr("stroke-dashoffset", 0);
+                    update = update.transition(this._transition).attrTween("d", function(d) {
+                        return interpolatePath(select(this).attr("d"), that._path(d.values));
+                    });
+                    this._exit.selectAll("path").each(calculateStrokeDashArray).attr("stroke-dasharray", function(d) {
+                        return "".concat(d.initialStrokeArray, " ").concat(d.initialLength);
+                    }).transition(this._transition).attr("stroke-dashoffset", function(d) {
+                        return -d.initialLength;
+                    });
+                } else {
+                    update = update.attr("d", function(d) {
+                        return that._path(d.values);
+                    });
+                }
+                update.attr("transform", function(d) {
+                    return "translate(".concat(-d.xR[0] - d.width / 2, ", ").concat(-d.yR[0] - d.height / 2, ")");
+                }).call(this._applyStyle.bind(this));
+                return this;
+            }
+        },
+        {
+            /**
+      @memberof Line
+      @desc Given a specific data point and index, returns the aesthetic properties of the shape.
+      @param {Object} *data point*
+      @param {Number} *index*
+      @private
+  */ key: "_aes",
+            value: function _aes(d, i) {
+                var _this = this;
+                return {
+                    points: d.values.map(function(p) {
+                        return [
+                            _this._x(p, i),
+                            _this._y(p, i)
+                        ];
+                    })
+                };
+            }
+        },
+        {
+            /**
+      @memberof Line
+      @desc If *value* is specified, sets the area curve to the specified string and returns the current class instance. If *value* is not specified, returns the current area curve.
+      @param {Function|String} [*value* = "linear"]
+      @chainable
+  */ key: "curve",
+            value: function curve(_) {
+                return arguments.length ? (this._curve = typeof _ === "function" ? _ : constant(_), this) : this._curve;
+            }
+        },
+        {
+            /**
+      @memberof Line
+      @desc If *value* is specified, sets the defined accessor to the specified function and returns the current class instance. If *value* is not specified, returns the current defined accessor.
+      @param {Function} [*value*]
+      @chainable
+  */ key: "defined",
+            value: function defined(_) {
+                return arguments.length ? (this._defined = _, this) : this._defined;
+            }
+        }
+    ]);
+    return Line;
+}(Shape);
+/**
+    @class Line
+    @extends Shape
+    @desc Creates SVG lines based on an array of data.
+*/ export { Line as default };