@d3plus/core 3.0.16 → 3.1.0

package/es/src/components/Legend.js

@@ -27,6 +27,19 @@ function _create_class(Constructor, protoProps, staticProps) {
     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_prototype_of(o) {
     _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
         return o.__proto__ || Object.getPrototypeOf(o);
@@ -73,8 +86,8 @@ function _is_native_reflect_construct() {
 }
 import { max, sum } from "d3-array";
 import { select } from "d3-selection";
-import { colorDefaults } from "@d3plus/color";
-import { assign, elem, rtl as detectRTL, textWidth } from "@d3plus/dom";
+import { colorContrast } from "@d3plus/color";
+import { assign, backgroundColor, elem, rtl as detectRTL, textWidth } from "@d3plus/dom";
 import { textWrap } from "@d3plus/text";
 import { TextBox } from "../components/index.js";
 import * as shapes from "../shapes/index.js";
@@ -86,7 +99,7 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
     function Legend() {
         _class_call_check(this, Legend);
         var _this;
-        _this = _call_super(this, Legend);
+        _this = _call_super(this, Legend), _define_property(_this, "_titleClass", void 0), _define_property(_this, "_align", void 0), _define_property(_this, "_data", void 0), _define_property(_this, "_direction", void 0), _define_property(_this, "_duration", void 0), _define_property(_this, "_height", void 0), _define_property(_this, "_id", void 0), _define_property(_this, "_label", void 0), _define_property(_this, "_lineData", void 0), _define_property(_this, "_outerBounds", void 0), _define_property(_this, "_padding", void 0), _define_property(_this, "_shape", void 0), _define_property(_this, "_select", void 0), _define_property(_this, "_shapes", void 0), _define_property(_this, "_shapeConfig", void 0), _define_property(_this, "_titleConfig", void 0), _define_property(_this, "_verticalAlign", void 0), _define_property(_this, "_width", void 0), _define_property(_this, "_rtl", void 0), _define_property(_this, "_group", void 0), _define_property(_this, "_titleGroup", void 0), _define_property(_this, "_shapeGroup", void 0), _define_property(_this, "_titleHeight", void 0), _define_property(_this, "_titleWidth", void 0), _define_property(_this, "_title", void 0), _define_property(_this, "_wrapLines", void 0), _define_property(_this, "_wrapRows", void 0);
         _this._titleClass = new TextBox();
         _this._align = "center";
         _this._data = [];
@@ -108,7 +121,7 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
         _this._shapeConfig = {
             fill: accessor("color"),
             height: constant(12),
-            hitArea: function(dd, i) {
+            hitArea: function hitArea(dd, i) {
                 var d = _this._lineData[i], h = max([
                     d.height,
                     d.shapeHeight
@@ -120,7 +133,7 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
                     y: -h / 2
                 };
             },
-            labelBounds: function(dd, i) {
+            labelBounds: function labelBounds(dd, i) {
                 var d = _this._lineData[i];
                 var x = d.shapeWidth / 2;
                 if (d.shape === "Circle") x -= d.shapeR / 2;
@@ -137,7 +150,10 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
                 };
             },
             labelConfig: {
-                fontColor: constant(colorDefaults.dark),
+                fontColor: function fontColor() {
+                    var bg = _this._select ? backgroundColor(_this._select.node()) : "rgb(255, 255, 255)";
+                    return colorContrast(bg);
+                },
                 fontFamily: _this._titleClass.fontFamily(),
                 fontResize: false,
                 fontSize: constant(10),
@@ -146,7 +162,7 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
             opacity: 1,
             r: constant(6),
             width: constant(12),
-            x: function(d, i) {
+            x: function x(d, i) {
                 var datum = _this._lineData[i];
                 var y = datum.y;
                 var pad = _this._align === "left" || _this._align === "right" && _this._direction === "column" ? 0 : _this._align === "center" ? (_this._outerBounds.width - _this._rowWidth(_this._lineData.filter(function(l) {
@@ -160,7 +176,7 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
                 var rtlMod = _this._rtl ? datum.width + _this._padding : 0;
                 return _this._rowWidth(prevWords) + _this._padding * (prevWords.length ? datum.sentence ? 2 : 1 : 0) + _this._outerBounds.x + datum.shapeWidth / 2 + pad + rtlMod;
             },
-            y: function(d, i) {
+            y: function y(d, i) {
                 var ld = _this._lineData[i];
                 return ld.y + _this._titleHeight + _this._outerBounds.y + max(_this._lineData.filter(function(l) {
                     return ld.y === l.y;
@@ -176,19 +192,31 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
         };
         _this._verticalAlign = "middle";
         _this._width = 400;
+        _this._rtl = false;
+        _this._titleHeight = 0;
+        _this._titleWidth = 0;
         return _this;
     }
     _create_class(Legend, [
         {
-            key: "_fetchConfig",
+            /**
+    @param key The configuration key.
+    @param d The data point.
+    @param i The data index.
+    @private
+  */ key: "_fetchConfig",
             value: function _fetchConfig(key, d, i) {
-                var val = this._shapeConfig[key] !== undefined ? this._shapeConfig[key] : this._shapeConfig.labelConfig[key];
+                var labelConfig = this._shapeConfig.labelConfig;
+                var val = this._shapeConfig[key] !== undefined ? this._shapeConfig[key] : labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig[key];
                 if (!val && key === "lineHeight") return this._fetchConfig("fontSize", d, i) * 1.4;
                 return typeof val === "function" ? val(d, i) : val;
             }
         },
         {
-            key: "_rowHeight",
+            /**
+    @param row The legend row data.
+    @private
+  */ key: "_rowHeight",
             value: function _rowHeight(row) {
                 return max(row.map(function(d) {
                     return d.height;
@@ -198,7 +226,10 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
             }
         },
         {
-            key: "_rowWidth",
+            /**
+    @param row The legend row data.
+    @private
+  */ key: "_rowWidth",
             value: function _rowWidth(row) {
                 var _this = this;
                 return sum(row.map(function(d, i) {
@@ -209,11 +240,9 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
         },
         {
             /**
-      @memberof Legend
-      @desc Renders the current Legend to the page. If a *callback* is specified, it will be called once the legend is done drawing.
-      @param {Function} [*callback* = undefined]
-      @chainable
-  */ key: "render",
+      Renders the current Legend to the page.
+    @param callback Optional callback invoked after rendering completes.
+*/ key: "render",
             value: function render(callback) {
                 var _this = this;
                 if (this._select === void 0) this.select(select("body").append("svg").attr("width", "".concat(this._width, "px")).attr("height", "".concat(this._height, "px")).node());
@@ -231,9 +260,11 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
                 this._titleHeight = 0;
                 this._titleWidth = 0;
                 if (this._title) {
-                    var f = this._titleConfig.fontFamily || this._titleClass.fontFamily()(), s = this._titleConfig.fontSize || this._titleClass.fontSize()();
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var f = this._titleConfig.fontFamily || this._titleClass.fontFamily()(), // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    s = this._titleConfig.fontSize || this._titleClass.fontSize()();
                     var lH = this._titleConfig.lineHeight || this._titleClass.lineHeight();
-                    lH = lH ? lH() : s * 1.4;
+                    lH = typeof lH === "function" ? lH() : lH !== null && lH !== void 0 ? lH : s * 1.4;
                     var res = textWrap().fontFamily(f).fontSize(s).lineHeight(lH).width(this._width).height(this._height)(this._title);
                     this._titleHeight = lH + res.lines.length + this._padding;
                     this._titleWidth = max(res.widths);
@@ -301,7 +332,8 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
                         if (wrappable.length && availableHeight > wrappable[0].height * lines) {
                             var _loop = function(x) {
                                 var label = wrappable[x];
-                                var h = label.og.height * lines, w = label.og.width * (1.5 * (1 / lines));
+                                var og = label.og;
+                                var h = og.height * lines, w = og.width * (1.5 * (1 / lines));
                                 var res = textWrap().fontFamily(label.f).fontSize(label.s).lineHeight(label.lh).width(w).height(h)(label.sentence);
                                 if (!res.truncated) {
                                     label.width = Math.ceil(max(res.lines.map(function(t) {
@@ -411,14 +443,15 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
                     right: "end"
                 }[this._align]).width(this._width - this._padding * 2).x(this._padding).y(this._outerBounds.y).config(this._titleConfig).render();
                 this._shapes = [];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var baseConfig = configPrep.bind(this)(this._shapeConfig, "legend"), config = {
-                    id: function(d) {
+                    id: function id(d) {
                         return d.id;
                     },
-                    label: function(d) {
+                    label: function label(d) {
                         return d.label;
                     },
-                    lineHeight: function(d) {
+                    lineHeight: function lineHeight(d) {
                         return d.lH;
                     }
                 };
@@ -440,7 +473,8 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
                     "Circle",
                     "Rect"
                 ].forEach(function(Shape) {
-                    _this._shapes.push(new shapes[Shape]().parent(_this).data(data.filter(function(d) {
+                    _this._shapes.push(// eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    new shapes[Shape]().parent(_this).data(data.filter(function(d) {
                         return d.shape === Shape;
                     })).duration(_this._duration).labelConfig({
                         padding: 0
@@ -452,11 +486,8 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
         },
         {
             /**
-      @memberof Legend
-      @desc If *value* is specified, sets the active method for all shapes to the specified function and returns the current class instance. If *value* is not specified, returns the current active method.
-      @param {Function} [*value*]
-      @chainable
-  */ key: "active",
+      The active method for all shapes.
+*/ key: "active",
             value: function active(_) {
                 this._shapes.forEach(function(s) {
                     return s.active(_);
@@ -465,67 +496,39 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
             }
         },
         {
-            /**
-      @memberof Legend
-      @desc If *value* is specified, sets the horizontal alignment to the specified value and returns the current class instance. If *value* is not specified, returns the current horizontal alignment.
-      @param {String} [*value* = "center"] Supports `"left"` and `"center"` and `"right"`.
-      @chainable
-  */ key: "align",
+            key: "align",
             value: function align(_) {
                 return arguments.length ? (this._align = _, this) : this._align;
             }
         },
         {
-            /**
-      @memberof Legend
-      @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. A shape key will be drawn for each object in the array.
-      @param {Array} [*data* = []]
-      @chainable
-  */ key: "data",
+            key: "data",
             value: function data(_) {
                 return arguments.length ? (this._data = _, this) : this._data;
             }
         },
         {
-            /**
-      @memberof Legend
-      @desc Sets the flow of the items inside the legend. If no value is passed, the current flow will be returned.
-      @param {String} [*value* = "row"]
-      @chainable
-  */ key: "direction",
+            key: "direction",
             value: function direction(_) {
                 return arguments.length ? (this._direction = _, this) : this._direction;
             }
         },
         {
-            /**
-      @memberof Legend
-      @desc If *value* is specified, sets the transition duration of the legend and returns the current class instance. If *value* is not specified, returns the current duration.
-      @param {Number} [*value* = 600]
-      @chainable
-  */ key: "duration",
+            key: "duration",
             value: function duration(_) {
                 return arguments.length ? (this._duration = _, this) : this._duration;
             }
         },
         {
-            /**
-      @memberof Legend
-      @desc If *value* is specified, sets the overall height of the legend and returns the current class instance. If *value* is not specified, returns the current height value.
-      @param {Number} [*value* = 100]
-      @chainable
-  */ key: "height",
+            key: "height",
             value: function height(_) {
                 return arguments.length ? (this._height = _, this) : this._height;
             }
         },
         {
             /**
-      @memberof Legend
-      @desc If *value* is specified, sets the hover method for all shapes to the specified function and returns the current class instance. If *value* is not specified, returns the current hover method.
-      @param {Function} [*value*]
-      @chainable
-  */ key: "hover",
+      The hover method for all shapes.
+*/ key: "hover",
             value: function hover(_) {
                 this._shapes.forEach(function(s) {
                     return s.hover(_);
@@ -534,131 +537,77 @@ var Legend = /*#__PURE__*/ function(BaseClass) {
             }
         },
         {
-            /**
-      @memberof Legend
-      @desc If *value* is specified, sets the id accessor to the specified function and returns the current class instance. If *value* is not specified, returns the current id accessor.
-      @param {Function} [*value*]
-      @chainable
-      @example
-function value(d) {
-  return d.id;
-}
-  */ key: "id",
+            key: "id",
             value: function id(_) {
                 return arguments.length ? (this._id = _, this) : this._id;
             }
         },
         {
-            /**
-      @memberof Legend
-      @desc If *value* is specified, sets the label accessor to the specified function or string and returns the current class instance. If *value* is not specified, returns the current label accessor, which is the [id](#shape.id) accessor by default.
-      @param {Function|String} [*value*]
-      @chainable
-  */ key: "label",
+            key: "label",
             value: function label(_) {
                 return arguments.length ? (this._label = typeof _ === "function" ? _ : constant(_), this) : this._label;
             }
         },
         {
             /**
-      @memberof Legend
-      @desc If called after the elements have been drawn to DOM, will returns the outer bounds of the legend content.
+      Returns the outer bounds of the legend content. Must be called after rendering.
       @example
 {"width": 180, "height": 24, "x": 10, "y": 20}
-  */ key: "outerBounds",
+*/ key: "outerBounds",
             value: function outerBounds() {
                 return this._outerBounds;
             }
         },
         {
-            /**
-      @memberof Legend
-      @desc If *value* is specified, sets the padding between each key to the specified number and returns the current class instance. If *value* is not specified, returns the current padding value.
-      @param {Number} [*value* = 10]
-      @chainable
-  */ key: "padding",
+            key: "padding",
             value: function padding(_) {
                 return arguments.length ? (this._padding = _, this) : this._padding;
             }
         },
         {
-            /**
-      @memberof Legend
-      @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",
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            key: "select",
             value: function select1(_) {
                 if (arguments.length) {
                     this._select = select(_);
-                    this._rtl = detectRTL(this._select.node());
+                    this._rtl = detectRTL();
                     return this;
                 }
                 return this._select;
             }
         },
         {
-            /**
-      @memberof Legend
-      @desc If *value* is specified, sets the shape accessor to the specified function or string and returns the current class instance. If *value* is not specified, returns the current shape accessor.
-      @param {Function|String} [*value* = "Rect"]
-      @chainable
-  */ key: "shape",
+            key: "shape",
             value: function shape(_) {
                 return arguments.length ? (this._shape = typeof _ === "function" ? _ : constant(_), this) : this._shape;
             }
         },
         {
-            /**
-      @memberof Legend
-      @desc If *config* is specified, sets the methods that correspond to the key/value pairs for each shape and returns the current class instance. If *config* is not specified, returns the current shape configuration.
-      @param {Object} [*config* = {}]
-      @chainable
-  */ key: "shapeConfig",
+            key: "shapeConfig",
             value: function shapeConfig(_) {
                 return arguments.length ? (this._shapeConfig = assign(this._shapeConfig, _), this) : this._shapeConfig;
             }
         },
         {
-            /**
-      @memberof Legend
-      @desc If *value* is specified, sets the title of the legend and returns the current class instance. If *value* is not specified, returns the current title.
-      @param {String} [*value*]
-      @chainable
-  */ key: "title",
+            key: "title",
             value: function title(_) {
                 return arguments.length ? (this._title = _, this) : this._title;
             }
         },
         {
-            /**
-      @memberof Legend
-      @desc If *value* is specified, sets the title configuration of the legend and returns the current class instance. If *value* is not specified, returns the current title configuration.
-      @param {Object} [*value*]
-      @chainable
-  */ key: "titleConfig",
+            key: "titleConfig",
             value: function titleConfig(_) {
                 return arguments.length ? (this._titleConfig = assign(this._titleConfig, _), this) : this._titleConfig;
             }
         },
         {
-            /**
-      @memberof Legend
-      @desc If *value* is specified, sets the vertical alignment to the specified value and returns the current class instance. If *value* is not specified, returns the current vertical alignment.
-      @param {String} [*value* = "middle"] Supports `"top"` and `"middle"` and `"bottom"`.
-      @chainable
-  */ key: "verticalAlign",
+            key: "verticalAlign",
             value: function verticalAlign(_) {
                 return arguments.length ? (this._verticalAlign = _, this) : this._verticalAlign;
             }
         },
         {
-            /**
-      @memberof Legend
-      @desc If *value* is specified, sets the overall width of the legend and returns the current class instance. If *value* is not specified, returns the current width value.
-      @param {Number} [*value* = 400]
-      @chainable
-  */ key: "width",
+            key: "width",
             value: function width(_) {
                 return arguments.length ? (this._width = _, this) : this._width;
             }
@@ -667,7 +616,5 @@ function value(d) {
     return Legend;
 }(BaseClass);
 /**
-    @class Legend
-    @extends BaseClass
-    @desc Creates an SVG scale based on an array of data. If *data* is specified, immediately draws based on the specified array and returns the current class instance. If *data* is not specified on instantiation, it can be passed/updated after instantiation using the [data](#shape.data) method.
+    Creates an SVG legend based on an array of data.
 */ export { Legend as default };

package/es/src/components/Message.js

@@ -17,20 +17,34 @@ function _create_class(Constructor, protoProps, staticProps) {
     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;
+}
 import { select } from "d3-selection";
 import { stylize } from "@d3plus/dom";
 var Message = /*#__PURE__*/ function() {
     "use strict";
     function Message() {
         _class_call_check(this, Message);
+        _define_property(this, "_isVisible", void 0);
+        _define_property(this, "mask", void 0);
+        _define_property(this, "elem", void 0);
         this._isVisible = false;
     }
     _create_class(Message, [
         {
             /**
-      @memberof Message
-      @desc Removes the message from the page.
-      @chainable
+      Removes the message from the page.
   */ key: "exit",
             value: function exit(elem, duration) {
                 elem.transition().duration(duration).style("opacity", 0).transition().remove();
@@ -39,9 +53,7 @@ var Message = /*#__PURE__*/ function() {
         },
         {
             /**
-      @memberof Message
-      @desc Removes the message from the page.
-      @chainable
+      Removes the message from the page.
   */ key: "hide",
             value: function hide() {
                 var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _ref_duration = _ref.duration, duration = _ref_duration === void 0 ? 600 : _ref_duration, callback = _ref.callback;
@@ -54,11 +66,8 @@ var Message = /*#__PURE__*/ function() {
         },
         {
             /**
-      @memberof Message
-      @desc Draws the message given the specified configuration.
-      @param {Object} [*config*]
-      @chainable
-  */ key: "render",
+      Draws the message given the specified configuration.
+*/ key: "render",
             value: function render() {
                 var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, callback = _ref.callback, _ref_container = _ref.container, container = _ref_container === void 0 ? "body" : _ref_container, _ref_duration = _ref.duration, duration = _ref_duration === void 0 ? 600 : _ref_duration, _ref_html = _ref.html, html = _ref_html === void 0 ? "Please Wait" : _ref_html, _ref_mask = _ref.mask, mask = _ref_mask === void 0 ? "rgba(0, 0, 0, 0.05)" : _ref_mask, _ref_style = _ref.style, style = _ref_style === void 0 ? {} : _ref_style;
                 var parent = select(container);
@@ -68,12 +77,12 @@ var Message = /*#__PURE__*/ function() {
                 this.mask = this.mask.enter().append("div").attr("class", "d3plus-Mask").style("opacity", 1).merge(this.mask);
                 this.mask.exit().call(this.exit.bind(this), duration);
                 stylize(this.mask, {
-                    "background-color": String,
-                    "bottom": "0px",
-                    "left": "0px",
-                    "position": "absolute",
-                    "right": "0px",
-                    "top": "0px"
+                    "background-color": "transparent",
+                    bottom: "0px",
+                    left: "0px",
+                    position: "absolute",
+                    right: "0px",
+                    top: "0px"
                 });
                 this.elem = parent.selectAll("div.d3plus-Message").data([
                     html
@@ -89,7 +98,6 @@ var Message = /*#__PURE__*/ function() {
     return Message;
 }();
 /**
-    @class Message
-    @desc Displays a message using plain HTML.
+    Displays a message using plain HTML.
     @private
 */ export { Message as default };