@d3plus/core 3.0.6 → 3.0.8

package/README.md

@@ -4112,7 +4112,7 @@ This is a global class, and extends all of the methods and functionality of [<co
     * [.snapping([*value*])](#Timeline.snapping) ↩︎
 
 
-<a name="Timeline.render" href="#Timeline.render">#</a> Timeline.**render**([*callback*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L377)
+<a name="Timeline.render" href="#Timeline.render">#</a> Timeline.**render**([*callback*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L457)
 
 Draws the timeline.
 
@@ -4120,7 +4120,7 @@ Draws the timeline.
 This is a static method of [<code>Timeline</code>](#Timeline), and is chainable with other methods of this Class.
 
 
-<a name="Timeline.buttonPadding" href="#Timeline.buttonPadding">#</a> Timeline.**buttonPadding**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L529)
+<a name="Timeline.buttonPadding" href="#Timeline.buttonPadding">#</a> Timeline.**buttonPadding**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L667)
 
 If *value* is specified, sets the button padding and returns the current class instance. If *value* is not specified, returns the current button padding.
 
@@ -4128,7 +4128,7 @@ If *value* is specified, sets the button padding and returns the current class i
 This is a static method of [<code>Timeline</code>](#Timeline), and is chainable with other methods of this Class.
 
 
-<a name="Timeline.brushing" href="#Timeline.brushing">#</a> Timeline.**brushing**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L539)
+<a name="Timeline.brushing" href="#Timeline.brushing">#</a> Timeline.**brushing**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L679)
 
 If *value* is specified, toggles the brushing value and returns the current class instance. If *value* is not specified, returns the current brushing value.
 
@@ -4136,7 +4136,7 @@ If *value* is specified, toggles the brushing value and returns the current clas
 This is a static method of [<code>Timeline</code>](#Timeline), and is chainable with other methods of this Class.
 
 
-<a name="Timeline.brushFilter" href="#Timeline.brushFilter">#</a> Timeline.**brushFilter**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L553)
+<a name="Timeline.brushFilter" href="#Timeline.brushFilter">#</a> Timeline.**brushFilter**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L693)
 
 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.
 
@@ -4151,7 +4151,7 @@ function() {
 ```
 
 
-<a name="Timeline.brushMin" href="#Timeline.brushMin">#</a> Timeline.**brushMin**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L563)
+<a name="Timeline.brushMin" href="#Timeline.brushMin">#</a> Timeline.**brushMin**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L705)
 
 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.
 
@@ -4159,7 +4159,7 @@ Sets the minimum number of "ticks" to allow to be highlighted when using "ticks"
 This is a static method of [<code>Timeline</code>](#Timeline), and is chainable with other methods of this Class.
 
 
-<a name="Timeline.buttonAlign" href="#Timeline.buttonAlign">#</a> Timeline.**buttonAlign**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L573)
+<a name="Timeline.buttonAlign" href="#Timeline.buttonAlign">#</a> Timeline.**buttonAlign**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L717)
 
 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.
 
@@ -4167,7 +4167,7 @@ If *value* is specified, toggles the horizontal alignment of the button timeline
 This is a static method of [<code>Timeline</code>](#Timeline), and is chainable with other methods of this Class.
 
 
-<a name="Timeline.buttonBehavior" href="#Timeline.buttonBehavior">#</a> Timeline.**buttonBehavior**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L583)
+<a name="Timeline.buttonBehavior" href="#Timeline.buttonBehavior">#</a> Timeline.**buttonBehavior**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L729)
 
 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.
 
@@ -4175,7 +4175,7 @@ If *value* is specified, toggles the style of the timeline. Accepted values are
 This is a static method of [<code>Timeline</code>](#Timeline), and is chainable with other methods of this Class.
 
 
-<a name="Timeline.buttonHeight" href="#Timeline.buttonHeight">#</a> Timeline.**buttonHeight**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L593)
+<a name="Timeline.buttonHeight" href="#Timeline.buttonHeight">#</a> Timeline.**buttonHeight**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L741)
 
 If *value* is specified, sets the button height and returns the current class instance. If *value* is not specified, returns the current button height.
 
@@ -4183,7 +4183,7 @@ If *value* is specified, sets the button height and returns the current class in
 This is a static method of [<code>Timeline</code>](#Timeline), and is chainable with other methods of this Class.
 
 
-<a name="Timeline.handleConfig" href="#Timeline.handleConfig">#</a> Timeline.**handleConfig**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L603)
+<a name="Timeline.handleConfig" href="#Timeline.handleConfig">#</a> Timeline.**handleConfig**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L753)
 
 If *value* is specified, sets the handle style and returns the current class instance. If *value* is not specified, returns the current handle style.
 
@@ -4191,7 +4191,7 @@ If *value* is specified, sets the handle style and returns the current class ins
 This is a static method of [<code>Timeline</code>](#Timeline), and is chainable with other methods of this Class.
 
 
-<a name="Timeline.handleSize" href="#Timeline.handleSize">#</a> Timeline.**handleSize**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L613)
+<a name="Timeline.handleSize" href="#Timeline.handleSize">#</a> Timeline.**handleSize**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L765)
 
 If *value* is specified, sets the handle size and returns the current class instance. If *value* is not specified, returns the current handle size.
 
@@ -4199,7 +4199,7 @@ If *value* is specified, sets the handle size and returns the current class inst
 This is a static method of [<code>Timeline</code>](#Timeline), and is chainable with other methods of this Class.
 
 
-<a name="Timeline.on" href="#Timeline.on">#</a> Timeline.**on**([*typename*], [*listener*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L624)
+<a name="Timeline.on" href="#Timeline.on">#</a> Timeline.**on**([*typename*], [*listener*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L776)
 
 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.
 
@@ -4207,7 +4207,7 @@ Adds or removes a *listener* for the specified brush event *typename*. If a *lis
 This is a static method of [<code>Timeline</code>](#Timeline), and is chainable with other methods of this Class.
 
 
-<a name="Timeline.playButton" href="#Timeline.playButton">#</a> Timeline.**playButton**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L634)
+<a name="Timeline.playButton" href="#Timeline.playButton">#</a> Timeline.**playButton**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L792)
 
 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.
 
@@ -4215,7 +4215,7 @@ Determines the visibility of the play button to the left the of timeline, which
 This is a static method of [<code>Timeline</code>](#Timeline), and is chainable with other methods of this Class.
 
 
-<a name="Timeline.playButtonConfig" href="#Timeline.playButtonConfig">#</a> Timeline.**playButtonConfig**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L644)
+<a name="Timeline.playButtonConfig" href="#Timeline.playButtonConfig">#</a> Timeline.**playButtonConfig**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L802)
 
 The config Object for the Rect class used to create the playButton.
 
@@ -4223,7 +4223,7 @@ The config Object for the Rect class used to create the playButton.
 This is a static method of [<code>Timeline</code>](#Timeline), and is chainable with other methods of this Class.
 
 
-<a name="Timeline.playButtonInterval" href="#Timeline.playButtonInterval">#</a> Timeline.**playButtonInterval**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L654)
+<a name="Timeline.playButtonInterval" href="#Timeline.playButtonInterval">#</a> Timeline.**playButtonInterval**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L814)
 
 The value, in milliseconds, to use when cycling through the available time periods when the user clicks the playButton.
 
@@ -4231,7 +4231,7 @@ The value, in milliseconds, to use when cycling through the available time perio
 This is a static method of [<code>Timeline</code>](#Timeline), and is chainable with other methods of this Class.
 
 
-<a name="Timeline.selectionConfig" href="#Timeline.selectionConfig">#</a> Timeline.**selectionConfig**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L664)
+<a name="Timeline.selectionConfig" href="#Timeline.selectionConfig">#</a> Timeline.**selectionConfig**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L826)
 
 If *value* is specified, sets the selection style and returns the current class instance. If *value* is not specified, returns the current selection style.
 
@@ -4239,7 +4239,7 @@ If *value* is specified, sets the selection style and returns the current class
 This is a static method of [<code>Timeline</code>](#Timeline), and is chainable with other methods of this Class.
 
 
-<a name="Timeline.selection" href="#Timeline.selection">#</a> Timeline.**selection**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L674)
+<a name="Timeline.selection" href="#Timeline.selection">#</a> Timeline.**selection**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L838)
 
 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.
 
@@ -4247,7 +4247,7 @@ If *value* is specified, sets the selection and returns the current class instan
 This is a static method of [<code>Timeline</code>](#Timeline), and is chainable with other methods of this Class.
 
 
-<a name="Timeline.snapping" href="#Timeline.snapping">#</a> Timeline.**snapping**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L684)
+<a name="Timeline.snapping" href="#Timeline.snapping">#</a> Timeline.**snapping**([*value*]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/core/src/components/Timeline.js#L848)
 
 If *value* is specified, toggles the snapping value and returns the current class instance. If *value* is not specified, returns the current snapping value.
 

package/es/src/components/Timeline.js

@@ -112,7 +112,7 @@ import { locale } from "@d3plus/locales";
 import { closest } from "@d3plus/math";
 import { textWrap } from "@d3plus/text";
 import { Axis, TextBox } from "../components/index.js";
-import { constant } from "../utils/index.js";
+import { configPrep, constant } from "../utils/index.js";
 var colorMid = "#bbb";
 var Timeline = /*#__PURE__*/ function(Axis) {
     "use strict";
@@ -209,14 +209,14 @@ var Timeline = /*#__PURE__*/ function(Axis) {
             fontColor: colorDefaults.dark,
             fontSize: 15,
             text: function() {
-                return _this._playTimer ? "⏸︎" : "⏵";
+                return _this._playTimer ? "⏸" : "⏵";
             },
             textAnchor: "middle",
             verticalAlign: "middle"
         };
         _this._playButtonInterval = 1000;
         _this._selectionConfig = {
-            "fill": "#228be6",
+            fill: "#228be6",
             "fill-opacity": function() {
                 return _this._buttonBehaviorCurrent === "buttons" ? 0.3 : 1;
             },
@@ -494,7 +494,7 @@ var Timeline = /*#__PURE__*/ function(Axis) {
                     });
                     this._ticksWidth = maxLabel * ticks.length;
                 }
-                var playButtonWidth = this._playButton ? this._buttonHeight : 0;
+                var playButtonWidth = this._playButton ? this._playButtonConfig.width || this._buttonHeight : 0;
                 var space = this._width - playButtonWidth;
                 this._buttonBehaviorCurrent = this._buttonBehavior === "auto" ? this._ticksWidth < space ? "buttons" : "ticks" : this._buttonBehavior;
                 var hiddenHandles = this._hiddenHandles = this._buttonBehaviorCurrent === "buttons" && !this._brushing;
@@ -564,9 +564,9 @@ var Timeline = /*#__PURE__*/ function(Axis) {
                         x: this._paddingLeft - playButtonWidth,
                         y: this._buttonBehaviorCurrent === "buttons" ? this._align === "middle" ? this._height / 2 - this._buttonHeight / 2 : this._align === "start" ? this._margin.top : this._height - this._buttonHeight - this._margin.bottom : this._outerBounds.y,
                         width: playButtonWidth,
-                        height: playButtonWidth
+                        height: this._buttonHeight
                     }
-                ] : []).select(playButtonGroup.node()).config(this._playButtonConfig).render();
+                ] : []).select(playButtonGroup.node()).config(configPrep.bind(this)(this._playButtonConfig)).render();
                 return this;
             }
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d3plus/core",
-  "version": "3.0.6",
+  "version": "3.0.8",
   "description": "Data visualization made easy. A javascript library that extends the popular D3.js to enable fast and beautiful visualizations.",
   "license": "MIT",
   "type": "module",
@@ -34,13 +34,13 @@
     "test": "eslint index.js src/**/*.js && eslint --global=it test && mocha 'test/**/*-test.js'"
   },
   "dependencies": {
-    "@d3plus/color": "3.0.6",
-    "@d3plus/data": "3.0.6",
-    "@d3plus/dom": "3.0.6",
-    "@d3plus/format": "3.0.6",
-    "@d3plus/locales": "3.0.6",
-    "@d3plus/math": "3.0.6",
-    "@d3plus/text": "3.0.6",
+    "@d3plus/color": "3.0.8",
+    "@d3plus/data": "3.0.8",
+    "@d3plus/dom": "3.0.8",
+    "@d3plus/format": "3.0.8",
+    "@d3plus/locales": "3.0.8",
+    "@d3plus/math": "3.0.8",
+    "@d3plus/text": "3.0.8",
     "@popperjs/core": "^2.11.8",
     "d3-array": "^3.2.4",
     "d3-brush": "^3.0.0",

package/umd/d3plus-core.full.js

@@ -1,5 +1,5 @@
 /*
-  @d3plus/core v3.0.6
+  @d3plus/core v3.0.8
   Data visualization made easy. A javascript library that extends the popular D3.js to enable fast and beautiful visualizations.
   Copyright (c) 2025 D3plus - https://d3plus.org
   @license MIT
@@ -30240,7 +30240,7 @@
               });
               this._ticksWidth = maxLabel * ticks.length;
           }
-          const playButtonWidth = this._playButton ? this._buttonHeight : 0;
+          const playButtonWidth = this._playButton ? this._playButtonConfig.width || this._buttonHeight : 0;
           const space = this._width - playButtonWidth;
           this._buttonBehaviorCurrent = this._buttonBehavior === "auto" ? this._ticksWidth < space ? "buttons" : "ticks" : this._buttonBehavior;
           const hiddenHandles = this._hiddenHandles = this._buttonBehaviorCurrent === "buttons" && !this._brushing;
@@ -30306,9 +30306,9 @@
                   x: this._paddingLeft - playButtonWidth,
                   y: this._buttonBehaviorCurrent === "buttons" ? this._align === "middle" ? this._height / 2 - this._buttonHeight / 2 : this._align === "start" ? this._margin.top : this._height - this._buttonHeight - this._margin.bottom : this._outerBounds.y,
                   width: playButtonWidth,
-                  height: playButtonWidth
+                  height: this._buttonHeight
               }
-          ] : []).select(playButtonGroup.node()).config(this._playButtonConfig).render();
+          ] : []).select(playButtonGroup.node()).config(configPrep.bind(this)(this._playButtonConfig)).render();
           return this;
       }
       /**
@@ -30529,13 +30529,13 @@
           this._playButtonConfig = {
               fontColor: defaults.dark,
               fontSize: 15,
-              text: ()=>this._playTimer ? "&#x23f8;&#xFE0E;" : "⏵",
+              text: ()=>this._playTimer ? "⏸" : "⏵",
               textAnchor: "middle",
               verticalAlign: "middle"
           };
           this._playButtonInterval = 1000;
           this._selectionConfig = {
-              "fill": "#228be6",
+              fill: "#228be6",
               "fill-opacity": ()=>this._buttonBehaviorCurrent === "buttons" ? 0.3 : 1,
               "stroke-width": 0
           };