@d3plus/core 3.0.15 → 3.1.0

package/es/src/components/Timeline.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(target, property, receiver) {
     if (typeof Reflect !== "undefined" && Reflect.get) {
         _get = Reflect.get;
@@ -63,6 +76,7 @@ function _inherits(subClass, superClass) {
     if (superClass) _set_prototype_of(subClass, superClass);
 }
 function _instanceof(left, right) {
+    "@swc/helpers - instanceof";
     if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
         return !!right[Symbol.hasInstance](left);
     } else {
@@ -105,8 +119,8 @@ import { extent, max, min } from "d3-array";
 import { brushX } from "d3-brush";
 import { scaleTime } from "d3-scale";
 import { pointers } from "d3-selection";
-import { colorDefaults } from "@d3plus/color";
-import { assign, attrize, date, elem, textWidth } from "@d3plus/dom";
+import { colorContrast, colorDefaults } from "@d3plus/color";
+import { assign, attrize, backgroundColor, date, elem, textWidth } from "@d3plus/dom";
 import { formatDate } from "@d3plus/format";
 import { locale } from "@d3plus/locales";
 import { closest } from "@d3plus/math";
@@ -120,9 +134,11 @@ var Timeline = /*#__PURE__*/ function(Axis) {
     function Timeline() {
         _class_call_check(this, Timeline);
         var _this;
-        _this = _call_super(this, Timeline);
+        _this = _call_super(this, Timeline), _define_property(_this, "_brushing", void 0), _define_property(_this, "_brushFilter", void 0), _define_property(_this, "_brushMin", void 0), _define_property(_this, "_buttonAlign", void 0), _define_property(_this, "_buttonBehavior", void 0), _define_property(_this, "_buttonBehaviorCurrent", void 0), _define_property(_this, "_buttonPadding", void 0), _define_property(_this, "_buttonHeight", void 0), _define_property(_this, "_handleConfig", void 0), _define_property(_this, "_handleSize", void 0), _define_property(_this, "_hiddenHandles", void 0), _define_property(_this, "_playButton", void 0), _define_property(_this, "_playButtonClass", void 0), _define_property(_this, "_playButtonConfig", void 0), _define_property(_this, "_playButtonInterval", void 0), _define_property(_this, "_playTimer", void 0), _define_property(_this, "_selection", void 0), _define_property(_this, "_selectionConfig", void 0), _define_property(_this, "_snapping", void 0), // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _define_property(_this, "_brush", void 0), // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _define_property(_this, "_brushGroup", void 0), _define_property(_this, "_paddingLeft", void 0), _define_property(_this, "_ticksWidth", void 0);
         _this._barConfig = assign({}, _this._barConfig, {
-            stroke: function() {
+            stroke: function stroke() {
                 return _this._buttonBehaviorCurrent === "buttons" ? "transparent" : colorMid;
             },
             "stroke-width": function() {
@@ -131,7 +147,8 @@ var Timeline = /*#__PURE__*/ function(Axis) {
         });
         _this._brushing = true;
         _this._brushFilter = function(event) {
-            return !event.button && event.detail < 2;
+            var e = event;
+            return !e.button && e.detail < 2;
         };
         _this._brushMin = constant(1);
         _this._buttonAlign = "middle";
@@ -159,12 +176,12 @@ var Timeline = /*#__PURE__*/ function(Axis) {
         _this._playButtonClass = new TextBox().on("click", function() {
             // if playing, pause
             if (_this._playTimer) {
-                clearInterval(_this._playTimer);
+                if (_this._playTimer) clearInterval(_this._playTimer);
                 _this._playTimer = false;
                 _this._playButtonClass.render();
             } else {
                 var firstTime = true;
-                var nextYear = function() {
+                var nextYear = function nextYear() {
                     var selection = _this._selection || [
                         _this._domain[_this._domain.length - 1]
                     ];
@@ -178,7 +195,7 @@ var Timeline = /*#__PURE__*/ function(Axis) {
                     var lastIndex = ticks.indexOf(selection[selection.length - 1]);
                     if (lastIndex === ticks.length - 1) {
                         if (!firstTime) {
-                            clearInterval(_this._playTimer);
+                            if (_this._playTimer) clearInterval(_this._playTimer);
                             _this._playTimer = false;
                             _this._playButtonClass.render();
                         } else {
@@ -189,7 +206,7 @@ var Timeline = /*#__PURE__*/ function(Axis) {
                         }
                     } else {
                         if (lastIndex + 1 === ticks.length - 1) {
-                            clearInterval(_this._playTimer);
+                            if (_this._playTimer) clearInterval(_this._playTimer);
                             _this._playTimer = false;
                         }
                         _this.selection([
@@ -208,8 +225,8 @@ var Timeline = /*#__PURE__*/ function(Axis) {
         _this._playButtonConfig = {
             fontColor: colorDefaults.dark,
             fontSize: 15,
-            text: function() {
-                return _this._playTimer ? "⏸" : "⏵";
+            text: function text() {
+                return _this._playTimer ? "\u23F8" : "\u23F5";
             },
             textAnchor: "middle",
             verticalAlign: "middle"
@@ -224,7 +241,7 @@ var Timeline = /*#__PURE__*/ function(Axis) {
         };
         _this._shape = "Rect";
         _this._shapeConfig = assign({}, _this._shapeConfig, {
-            labelBounds: function(d) {
+            labelBounds: function labelBounds(d) {
                 return _this._buttonBehaviorCurrent === "buttons" ? {
                     x: d.labelBounds.x,
                     y: -_this._buttonHeight / 2 + 1,
@@ -233,49 +250,55 @@ var Timeline = /*#__PURE__*/ function(Axis) {
                 } : d.labelBounds;
             },
             labelConfig: {
-                fontColor: colorDefaults.dark,
-                fontSize: function() {
+                fontColor: function fontColor() {
+                    var bg = _this._select ? backgroundColor(_this._select.node()) : "rgb(255, 255, 255)";
+                    return colorContrast(bg);
+                },
+                fontSize: function fontSize() {
                     return 12;
                 },
-                verticalAlign: function() {
+                verticalAlign: function verticalAlign() {
                     return _this._buttonBehaviorCurrent === "buttons" ? "middle" : "top";
                 }
             },
-            fill: function() {
+            fill: function fill() {
                 return _this._buttonBehaviorCurrent === "buttons" ? "#fff" : colorMid;
             },
-            stroke: function() {
+            stroke: function stroke() {
                 return _this._buttonBehaviorCurrent === "buttons" ? colorMid : "transparent";
             },
-            height: function(d) {
+            height: function height(d) {
                 return _this._buttonBehaviorCurrent === "buttons" ? _this._buttonHeight : d.tick ? _this._handleSize : 0;
             },
-            width: function(d) {
+            width: function width(d) {
                 return _this._buttonBehaviorCurrent === "buttons" ? _this._ticksWidth / _this._availableTicks.length : d.tick ? _this._domain.map(Number).includes(d.id) ? 2 : 1 : 0;
             },
-            y: function(d) {
+            y: function y(d) {
                 return _this._buttonBehaviorCurrent === "buttons" ? _this._align === "middle" ? _this._height / 2 : _this._align === "start" ? _this._margin.top + _this._buttonHeight / 2 : _this._height - _this._buttonHeight / 2 - _this._margin.bottom : d.y;
             },
-            rx: function(d) {
+            rx: function rx(d) {
                 return _this._buttonBehaviorCurrent === "buttons" ? 0 : _this._domain.map(Number).includes(d.id) ? 1 : 0;
             },
-            ry: function(d) {
+            ry: function ry(d) {
                 return _this._buttonBehaviorCurrent === "buttons" ? 0 : _this._domain.map(Number).includes(d.id) ? 1 : 0;
             }
         });
         _this._snapping = true;
+        _this._buttonBehaviorCurrent = "auto";
+        _this._hiddenHandles = false;
+        _this._paddingLeft = 0;
+        _this._ticksWidth = 0;
         return _this;
     }
     _create_class(Timeline, [
         {
             /**
-      @memberof Timeline
-      @desc Triggered on brush "brush".
+      Triggered on brush "brush".
       @private
-  */ key: "_brushBrush",
+*/ key: "_brushBrush",
             value: function _brushBrush(event) {
                 if (event.sourceEvent && event.sourceEvent.offsetX && event.selection !== null && (!this._brushing || this._snapping)) {
-                    clearInterval(this._playTimer);
+                    if (this._playTimer) clearInterval(this._playTimer);
                     this._playTimer = false;
                     this._playButtonClass.render();
                     var domain = this._updateDomain(event);
@@ -287,10 +310,9 @@ var Timeline = /*#__PURE__*/ function(Axis) {
         },
         {
             /**
-      @memberof Timeline
-      @desc Triggered on brush "end".
+      Triggered on brush "end".
       @private
-  */ key: "_brushEnd",
+*/ key: "_brushEnd",
             value: function _brushEnd(event) {
                 if (!event.sourceEvent) return; // Only transition after input.
                 var domain = this._updateDomain(event);
@@ -301,13 +323,12 @@ var Timeline = /*#__PURE__*/ function(Axis) {
         },
         {
             /**
-      @memberof Timeline
-      @desc Triggered on brush "start".
+      Triggered on brush "start".
       @private
-  */ key: "_brushStart",
+*/ key: "_brushStart",
             value: function _brushStart(event) {
                 if (event.sourceEvent !== null && (!this._brushing || this._snapping)) {
-                    clearInterval(this._playTimer);
+                    if (this._playTimer) clearInterval(this._playTimer);
                     this._playTimer = false;
                     this._playButtonClass.render();
                     var domain = this._updateDomain(event);
@@ -319,10 +340,9 @@ var Timeline = /*#__PURE__*/ function(Axis) {
         },
         {
             /**
-      @memberof Timeline
-      @desc Overrides the default brush styles.
+      Overrides the default brush styles.
       @private
-  */ key: "_brushStyle",
+*/ key: "_brushStyle",
             value: function _brushStyle() {
                 var _this = this;
                 var height = this._position.height;
@@ -345,10 +365,9 @@ var Timeline = /*#__PURE__*/ function(Axis) {
         },
         {
             /**
-      @memberof Timeline
-      @desc Updates domain of the timeline used in brush functions.
+      Updates domain of the timeline used in brush functions.
       @private
-  */ key: "_updateDomain",
+*/ key: "_updateDomain",
             value: function _updateDomain(event) {
                 var x = pointers(event, this._select.node());
                 var domain = event.selection && this._brushing || !x.length ? event.selection : [
@@ -361,14 +380,16 @@ var Timeline = /*#__PURE__*/ function(Axis) {
                     var diffs = event.selection.map(function(d) {
                         return Math.abs(d - event.sourceEvent.offsetX);
                     });
+                    var sel = event.selection;
+                    var offsetX = event.sourceEvent.offsetX;
                     domain = diffs[1] <= diffs[0] ? [
-                        event.selection[0],
-                        event.sourceEvent.offsetX
+                        sel[0],
+                        offsetX
                     ].sort(function(a, b) {
                         return a - b;
                     }) : [
-                        event.sourceEvent.offsetX,
-                        event.selection[1]
+                        offsetX,
+                        sel[1]
                     ].sort(function(a, b) {
                         return a - b;
                     });
@@ -427,10 +448,9 @@ var Timeline = /*#__PURE__*/ function(Axis) {
         },
         {
             /**
-      @memberof Timeline
-      @desc Updates limits of the brush.
+      Updates limits of the brush.
       @private
-  */ key: "_updateBrushLimit",
+*/ key: "_updateBrushLimit",
             value: function _updateBrushLimit(domain) {
                 var selection = this._buttonBehaviorCurrent === "ticks" ? domain.map(date).map(this._d3Scale) : domain;
                 if (selection[0] === selection[1]) {
@@ -448,11 +468,9 @@ var Timeline = /*#__PURE__*/ function(Axis) {
         },
         {
             /**
-      @memberof Timeline
-      @desc Draws the timeline.
-      @param {Function} [*callback* = undefined]
-      @chainable
-  */ key: "render",
+      Draws the timeline.
+    @param callback Optional callback invoked after rendering completes.
+*/ key: "render",
             value: function render(callback) {
                 var _this = this;
                 var _this__position = this._position, height = _this__position.height, y = _this__position.y;
@@ -566,187 +584,103 @@ var Timeline = /*#__PURE__*/ function(Axis) {
                         width: playButtonWidth,
                         height: this._buttonHeight
                     }
-                ] : []).select(playButtonGroup.node()).config(configPrep.bind(this)(this._playButtonConfig)).render();
+                ] : []).select(playButtonGroup.node())// eslint-disable-next-line @typescript-eslint/no-explicit-any
+                .config(configPrep.bind(this)(this._playButtonConfig)).render();
                 return this;
             }
         },
         {
-            /**
-        @memberof Timeline
-        @desc If *value* is specified, sets the button padding and returns the current class instance. If *value* is not specified, returns the current button padding.
-        @param {Number} [*value* = 10]
-        @chainable
-    */ key: "buttonPadding",
+            key: "buttonPadding",
             value: function buttonPadding(_) {
                 return arguments.length ? (this._buttonPadding = _, this) : this._buttonPadding;
             }
         },
         {
-            /**
-      @memberof Timeline
-      @desc If *value* is specified, toggles the brushing value and returns the current class instance. If *value* is not specified, returns the current brushing value.
-      @param {Boolean} [*value* = true]
-      @chainable
-  */ key: "brushing",
+            key: "brushing",
             value: function brushing(_) {
                 return arguments.length ? (this._brushing = _, this) : this._brushing;
             }
         },
         {
-            /**
-      @memberof Timeline
-      @desc If *value* is specified, sets the brush event filter and returns the current class instance. If *value* is not specified, returns the current brush event filter.
-      @param {Function} [*value*]
-      @chainable
-      @example
-function() {
-  return !event.button && event.detail < 2;
-}
-  */ key: "brushFilter",
+            key: "brushFilter",
             value: function brushFilter(_) {
                 return arguments.length ? (this._brushFilter = _, this) : this._brushFilter;
             }
         },
         {
-            /**
-      @memberof Timeline
-      @desc Sets the minimum number of "ticks" to allow to be highlighted when using "ticks" buttonBehavior. Helpful when using x/y plots where you don't want the user to select less than 2 time periods. Value passed can either be a static Number, or a function that is expected to return a Number.
-      @param {Number|Function} [*value* = 1]
-      @chainable
-  */ key: "brushMin",
+            key: "brushMin",
             value: function brushMin(_) {
                 return arguments.length ? (this._brushMin = typeof _ === "function" ? _ : constant(_), this) : this._brushMin;
             }
         },
         {
-            /**
-      @memberof Timeline
-      @desc If *value* is specified, toggles the horizontal alignment of the button timeline. Accepted values are `"start"`, `"middle"` and `"end"`. If *value* is not specified, returns the current button value.
-      @param {String} [*value* = "middle"]
-      @chainable
-  */ key: "buttonAlign",
+            key: "buttonAlign",
             value: function buttonAlign(_) {
                 return arguments.length ? (this._buttonAlign = _, this) : this._buttonAlign;
             }
         },
         {
-            /**
-      @memberof Timeline
-      @desc If *value* is specified, toggles the style of the timeline. Accepted values are `"auto"`, `"buttons"` and `"ticks"`. If *value* is not specified, returns the current button value.
-      @param {String} [*value* = "auto"]
-      @chainable
-  */ key: "buttonBehavior",
+            key: "buttonBehavior",
             value: function buttonBehavior(_) {
                 return arguments.length ? (this._buttonBehavior = _, this) : this._buttonBehavior;
             }
         },
         {
-            /**
-        @memberof Timeline
-        @desc If *value* is specified, sets the button height and returns the current class instance. If *value* is not specified, returns the current button height.
-        @param {Number} [*value* = 30]
-        @chainable
-    */ key: "buttonHeight",
+            key: "buttonHeight",
             value: function buttonHeight(_) {
                 return arguments.length ? (this._buttonHeight = _, this) : this._buttonHeight;
             }
         },
         {
-            /**
-      @memberof Timeline
-      @desc If *value* is specified, sets the handle style and returns the current class instance. If *value* is not specified, returns the current handle style.
-      @param {Object} [*value*]
-      @chainable
-  */ key: "handleConfig",
+            key: "handleConfig",
             value: function handleConfig(_) {
                 return arguments.length ? (this._handleConfig = assign(this._handleConfig, _), this) : this._handleConfig;
             }
         },
         {
-            /**
-      @memberof Timeline
-      @desc If *value* is specified, sets the handle size and returns the current class instance. If *value* is not specified, returns the current handle size.
-      @param {Number} [*value* = 6]
-      @chainable
-  */ key: "handleSize",
+            key: "handleSize",
             value: function handleSize(_) {
                 return arguments.length ? (this._handleSize = _, this) : this._handleSize;
             }
         },
         {
-            /**
-      @memberof Timeline
-      @desc Adds or removes a *listener* for the specified brush event *typename*. If a *listener* is not specified, returns the currently-assigned listener for the specified event *typename*. Mirrors the core [d3-brush](https://github.com/d3/d3-brush#brush_on) behavior.
-      @param {String|Object} [*typename*]
-      @param {Function} [*listener*]
-      @chainable
-  */ key: "on",
+            key: "on",
             value: function on(_, f) {
                 return arguments.length === 2 ? (this._on[_] = f, this) : arguments.length ? typeof _ === "string" ? this._on[_] : (this._on = assign({}, this._on, _), this) : this._on;
             }
         },
         {
-            /**
-      @memberof Timeline
-      @desc Determines the visibility of the play button to the left the of timeline, which will cycle through the available periods at a rate defined by the playButtonInterval method.
-      @param {Boolean} [*value* = true]
-      @chainable
-  */ key: "playButton",
+            key: "playButton",
             value: function playButton(_) {
                 return arguments.length ? (this._playButton = _, this) : this._playButton;
             }
         },
         {
-            /**
-      @memberof Timeline
-      @desc The config Object for the Rect class used to create the playButton.
-      @param {Object} [*value*]
-      @chainable
-  */ key: "playButtonConfig",
+            key: "playButtonConfig",
             value: function playButtonConfig(_) {
                 return arguments.length ? (this._playButtonConfig = assign(this._playButtonConfig, _), this) : this._playButtonConfig;
             }
         },
         {
-            /**
-      @memberof Timeline
-      @desc The value, in milliseconds, to use when cycling through the available time periods when the user clicks the playButton.
-      @param {Number} [*value* = 1000]
-      @chainable
-  */ key: "playButtonInterval",
+            key: "playButtonInterval",
             value: function playButtonInterval(_) {
                 return arguments.length ? (this._playButtonInterval = _, this) : this._playButtonInterval;
             }
         },
         {
-            /**
-      @memberof Timeline
-      @desc If *value* is specified, sets the selection style and returns the current class instance. If *value* is not specified, returns the current selection style.
-      @param {Object} [*value*]
-      @chainable
-  */ key: "selectionConfig",
+            key: "selectionConfig",
             value: function selectionConfig(_) {
                 return arguments.length ? (this._selectionConfig = assign(this._selectionConfig, _), this) : this._selectionConfig;
             }
         },
         {
-            /**
-      @memberof Timeline
-      @desc If *value* is specified, sets the selection and returns the current class instance. If *value* is not specified, returns the current selection. Defaults to the most recent year in the timeline.
-      @param {Array|Date|Number|String} [*value*]
-      @chainable
-  */ key: "selection",
+            key: "selection",
             value: function selection(_) {
                 return arguments.length ? (this._selection = _, this) : this._selection;
             }
         },
         {
-            /**
-      @memberof Timeline
-      @desc If *value* is specified, toggles the snapping value and returns the current class instance. If *value* is not specified, returns the current snapping value.
-      @param {Boolean} [*value* = true]
-      @chainable
-  */ key: "snapping",
+            key: "snapping",
             value: function snapping(_) {
                 return arguments.length ? (this._snapping = _, this) : this._snapping;
             }
@@ -755,6 +689,5 @@ function() {
     return Timeline;
 }(Axis);
 /**
-    @class Timeline
-    @extends Axis
+    Creates an interactive timeline brush component for selecting time periods within a visualization.
 */ export { Timeline as default };