@d3plus/core 3.0.0-alpha.0

package/es/src/components/Timeline.js

@@ -0,0 +1,760 @@
+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 _instanceof(left, right) {
+    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+        return !!right[Symbol.hasInstance](left);
+    } else {
+        return left instanceof right;
+    }
+}
+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, 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 { formatDate } from "@d3plus/format";
+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";
+var colorMid = "#bbb";
+var Timeline = /*#__PURE__*/ function(Axis) {
+    "use strict";
+    _inherits(Timeline, Axis);
+    function Timeline() {
+        _class_call_check(this, Timeline);
+        var _this;
+        _this = _call_super(this, Timeline);
+        _this._barConfig = assign({}, _this._barConfig, {
+            stroke: function() {
+                return _this._buttonBehaviorCurrent === "buttons" ? "transparent" : colorMid;
+            },
+            "stroke-width": function() {
+                return _this._buttonBehaviorCurrent === "buttons" ? 0 : 1;
+            }
+        });
+        _this._brushing = true;
+        _this._brushFilter = function(event) {
+            return !event.button && event.detail < 2;
+        };
+        _this._brushMin = constant(1);
+        _this._buttonAlign = "middle";
+        _this._buttonBehavior = "auto";
+        _this._buttonPadding = 10;
+        _this._buttonHeight = 24;
+        _this._domain = [
+            2001,
+            2010
+        ];
+        _this._gridSize = 0;
+        _this._handleConfig = {
+            fill: colorDefaults.light,
+            stroke: "#228be6",
+            "stroke-width": 2,
+            rx: 2,
+            ry: 2
+        };
+        _this._handleSize = 6;
+        _this._height = 100;
+        _this._labelOffset = false;
+        _this._on = {};
+        _this.orient("bottom");
+        _this._playButton = true;
+        _this._playButtonClass = new TextBox().on("click", function() {
+            // if playing, pause
+            if (_this._playTimer) {
+                clearInterval(_this._playTimer);
+                _this._playTimer = false;
+                _this._playButtonClass.render();
+            } else {
+                var firstTime = true;
+                var nextYear = function() {
+                    var selection = _this._selection || [
+                        _this._domain[_this._domain.length - 1]
+                    ];
+                    if (!_instanceof(selection, Array)) selection = [
+                        selection
+                    ];
+                    selection = selection.map(date).map(Number);
+                    if (selection.length === 1) selection.push(selection[0]);
+                    var ticks = _this._ticks.map(Number);
+                    var firstIndex = ticks.indexOf(selection[0]);
+                    var lastIndex = ticks.indexOf(selection[selection.length - 1]);
+                    if (lastIndex === ticks.length - 1) {
+                        if (!firstTime) {
+                            clearInterval(_this._playTimer);
+                            _this._playTimer = false;
+                            _this._playButtonClass.render();
+                        } else {
+                            _this.selection([
+                                _this._ticks[0],
+                                _this._ticks[lastIndex - firstIndex]
+                            ]).render();
+                        }
+                    } else {
+                        if (lastIndex + 1 === ticks.length - 1) {
+                            clearInterval(_this._playTimer);
+                            _this._playTimer = false;
+                        }
+                        _this.selection([
+                            _this._ticks[firstIndex + 1],
+                            _this._ticks[lastIndex + 1]
+                        ]).render();
+                    }
+                    firstTime = false;
+                };
+                _this._playTimer = setInterval(nextYear, _this._playButtonInterval);
+                nextYear();
+            }
+        }).on("mousemove", function() {
+            return _this._playButtonClass.select().style("cursor", "pointer");
+        });
+        _this._playButtonConfig = {
+            fontColor: colorDefaults.dark,
+            fontSize: 15,
+            text: function() {
+                return _this._playTimer ? "&#x23f8;&#xFE0E;" : "⏵";
+            },
+            textAnchor: "middle",
+            verticalAlign: "middle"
+        };
+        _this._playButtonInterval = 1000;
+        _this._selectionConfig = {
+            "fill": "#228be6",
+            "fill-opacity": function() {
+                return _this._buttonBehaviorCurrent === "buttons" ? 0.3 : 1;
+            },
+            "stroke-width": 0
+        };
+        _this._shape = "Rect";
+        _this._shapeConfig = assign({}, _this._shapeConfig, {
+            labelBounds: function(d) {
+                return _this._buttonBehaviorCurrent === "buttons" ? {
+                    x: d.labelBounds.x,
+                    y: -_this._buttonHeight / 2 + 1,
+                    width: d.labelBounds.width,
+                    height: _this._buttonHeight
+                } : d.labelBounds;
+            },
+            labelConfig: {
+                fontColor: colorDefaults.dark,
+                fontSize: function() {
+                    return 12;
+                },
+                verticalAlign: function() {
+                    return _this._buttonBehaviorCurrent === "buttons" ? "middle" : "top";
+                }
+            },
+            fill: function() {
+                return _this._buttonBehaviorCurrent === "buttons" ? "#fff" : colorMid;
+            },
+            stroke: function() {
+                return _this._buttonBehaviorCurrent === "buttons" ? colorMid : "transparent";
+            },
+            height: function(d) {
+                return _this._buttonBehaviorCurrent === "buttons" ? _this._buttonHeight : d.tick ? _this._handleSize : 0;
+            },
+            width: function(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) {
+                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) {
+                return _this._buttonBehaviorCurrent === "buttons" ? 0 : _this._domain.map(Number).includes(d.id) ? 1 : 0;
+            },
+            ry: function(d) {
+                return _this._buttonBehaviorCurrent === "buttons" ? 0 : _this._domain.map(Number).includes(d.id) ? 1 : 0;
+            }
+        });
+        _this._snapping = true;
+        return _this;
+    }
+    _create_class(Timeline, [
+        {
+            /**
+      @memberof Timeline
+      @desc Triggered on brush "brush".
+      @private
+  */ key: "_brushBrush",
+            value: function _brushBrush(event) {
+                if (event.sourceEvent && event.sourceEvent.offsetX && event.selection !== null && (!this._brushing || this._snapping)) {
+                    clearInterval(this._playTimer);
+                    this._playTimer = false;
+                    this._playButtonClass.render();
+                    var domain = this._updateDomain(event);
+                    this._brushGroup.call(this._brush.move, this._updateBrushLimit(domain));
+                }
+                this._brushStyle();
+                if (this._on.brush) this._on.brush(this._selection);
+            }
+        },
+        {
+            /**
+      @memberof Timeline
+      @desc Triggered on brush "end".
+      @private
+  */ key: "_brushEnd",
+            value: function _brushEnd(event) {
+                if (!event.sourceEvent) return; // Only transition after input.
+                var domain = this._updateDomain(event);
+                this._brushStyle();
+                if (this._brushing || !this._snapping) this._brushGroup.transition(this._transition).call(this._brush.move, this._updateBrushLimit(domain));
+                if (this._on.end) this._on.end(this._selection);
+            }
+        },
+        {
+            /**
+      @memberof Timeline
+      @desc Triggered on brush "start".
+      @private
+  */ key: "_brushStart",
+            value: function _brushStart(event) {
+                if (event.sourceEvent !== null && (!this._brushing || this._snapping)) {
+                    clearInterval(this._playTimer);
+                    this._playTimer = false;
+                    this._playButtonClass.render();
+                    var domain = this._updateDomain(event);
+                    this._brushGroup.call(this._brush.move, this._updateBrushLimit(domain));
+                }
+                this._brushStyle();
+                if (this._on.start) this._on.start(event);
+            }
+        },
+        {
+            /**
+      @memberof Timeline
+      @desc Overrides the default brush styles.
+      @private
+  */ key: "_brushStyle",
+            value: function _brushStyle() {
+                var _this = this;
+                var height = this._position.height;
+                var timelineHeight = this._shape === "Circle" ? typeof this._shapeConfig.r === "function" ? this._shapeConfig.r({
+                    tick: true
+                }) * 2 : this._shapeConfig.r : this._shape === "Rect" ? typeof this._shapeConfig[height] === "function" ? this._shapeConfig[height]({
+                    tick: true
+                }) : this._shapeConfig[height] : this._tickSize;
+                var brushSelection = this._brushGroup.selectAll(".selection").call(attrize, this._selectionConfig).attr("transform", "translate(0,-1)").attr("height", timelineHeight + 2);
+                var brushHandle = this._brushGroup.selectAll(".handle").call(attrize, this._handleConfig).attr("display", this._hiddenHandles ? "none" : "block").attr("transform", function(d) {
+                    return _this._buttonBehaviorCurrent === "buttons" ? "translate(".concat(d.type === "w" ? -_this._handleSize / 2 : 0, ",-1)") : "";
+                }).attr("height", this._buttonBehaviorCurrent === "buttons" ? this._buttonHeight + 2 : timelineHeight + this._handleSize);
+                this._brushGroup.selectAll(".overlay").attr("x", this._paddingLeft).attr("cursor", "pointer").attr("transform", "translate(0,".concat(this._buttonBehaviorCurrent === "buttons" ? this._buttonHeight / 2 : -this._handleSize, ")")).attr("width", this._buttonBehaviorCurrent === "buttons" ? this._ticksWidth : this._width).attr("height", this._buttonBehaviorCurrent === "buttons" ? this._buttonHeight : this._handleSize * 2);
+                if (this._buttonBehaviorCurrent === "buttons") {
+                    var yTransform = this._align === "middle" ? this._height / 2 - this._buttonHeight / 2 : this._align === "start" ? this._margin.top : this._height - this._buttonHeight - this._margin.bottom;
+                    brushHandle.attr("y", yTransform);
+                    brushSelection.attr("y", yTransform);
+                }
+            }
+        },
+        {
+            /**
+      @memberof Timeline
+      @desc Updates domain of the timeline used in brush functions.
+      @private
+  */ key: "_updateDomain",
+            value: function _updateDomain(event) {
+                var x = pointers(event, this._select.node());
+                var domain = event.selection && this._brushing || !x.length ? event.selection : [
+                    x[0][0],
+                    x[0][0]
+                ];
+                if (this._buttonBehaviorCurrent === "ticks") domain = domain.map(this._d3Scale.invert);
+                domain = domain.map(Number);
+                if (event.type === "brush" && this._brushing && this._buttonBehaviorCurrent === "buttons") {
+                    var diffs = event.selection.map(function(d) {
+                        return Math.abs(d - event.sourceEvent.offsetX);
+                    });
+                    domain = diffs[1] <= diffs[0] ? [
+                        event.selection[0],
+                        event.sourceEvent.offsetX
+                    ].sort(function(a, b) {
+                        return a - b;
+                    }) : [
+                        event.sourceEvent.offsetX,
+                        event.selection[1]
+                    ].sort(function(a, b) {
+                        return a - b;
+                    });
+                }
+                var ticks = this._buttonBehaviorCurrent === "ticks" ? this._availableTicks.map(Number) : this._d3Scale.range();
+                if (this._buttonBehaviorCurrent === "ticks") {
+                    // find closest min and max ticks from data
+                    // and their indices in the ticks Array
+                    var minDomain = date(closest(domain[0], ticks));
+                    var minIndex = ticks.indexOf(+minDomain);
+                    var maxDomain = date(closest(domain[1], ticks));
+                    var maxIndex = ticks.indexOf(+maxDomain);
+                    // using the indices, determine if the 2 ends of the brush
+                    // are too close to each other. "ticksApart" always needs to
+                    // be less than the current current brushMin minus 1. For
+                    // example, a brushMin of "2" means that the min and max domain
+                    // values need to be "1" space apart from eachother.
+                    var ticksApart = Math.abs(maxIndex - minIndex);
+                    var minTicksAllowed = this._brushMin() - 1;
+                    // if the min and max are not far enough apart to satisfy
+                    // brushMin, then forcibly extend the domain.
+                    if (ticksApart < minTicksAllowed) {
+                        // push the maxDomain out as far as possible to account for brushMin
+                        maxIndex = min([
+                            ticks.length - 1,
+                            maxIndex + (minTicksAllowed - ticksApart)
+                        ]);
+                        maxDomain = ticks[maxIndex];
+                        ticksApart = Math.abs(maxIndex - minIndex);
+                        // if the domain is still not far enough apart, extent the minDomain
+                        // as far as possible to allow for brushMin
+                        if (ticksApart < minTicksAllowed) {
+                            minIndex = max([
+                                0,
+                                minIndex - (minTicksAllowed - ticksApart)
+                            ]);
+                            minDomain = ticks[minIndex];
+                        }
+                    }
+                    domain[0] = minDomain;
+                    domain[1] = maxDomain;
+                } else {
+                    domain[0] = closest(domain[0], ticks);
+                    domain[1] = closest(domain[1], ticks);
+                }
+                // if the brush event has finished, update the current "selection" value
+                var single = +domain[0] === +domain[1];
+                if (event.type === "brush" || event.type === "end") {
+                    this._selection = this._buttonBehaviorCurrent === "ticks" ? single ? domain[0] : domain : single ? date(this._availableTicks[ticks.indexOf(domain[0])]) : [
+                        date(this._availableTicks[ticks.indexOf(domain[0])]),
+                        date(this._availableTicks[ticks.indexOf(domain[1])])
+                    ];
+                }
+                return domain;
+            }
+        },
+        {
+            /**
+      @memberof Timeline
+      @desc Updates limits of the brush.
+      @private
+  */ key: "_updateBrushLimit",
+            value: function _updateBrushLimit(domain) {
+                var selection = this._buttonBehaviorCurrent === "ticks" ? domain.map(date).map(this._d3Scale) : domain;
+                if (selection[0] === selection[1]) {
+                    selection[0] -= 0.1;
+                    selection[1] += 0.1;
+                }
+                if (this._buttonBehaviorCurrent === "buttons") {
+                    var handleSize = this._hiddenHandles ? 0 : this._handleSize;
+                    var buttonWidth = 0.5 * (this._ticksWidth / this._availableTicks.length - handleSize);
+                    selection[0] -= buttonWidth;
+                    selection[1] += buttonWidth;
+                }
+                return selection;
+            }
+        },
+        {
+            /**
+      @memberof Timeline
+      @desc Draws the timeline.
+      @param {Function} [*callback* = undefined]
+      @chainable
+  */ key: "render",
+            value: function render(callback) {
+                var _this = this;
+                var _this__position = this._position, height = _this__position.height, y = _this__position.y;
+                if (this._ticks) this._ticks = this._ticks.map(date);
+                if (this._data) this._data = this._data.map(date);
+                var ticks = this._ticks ? this._ticks : this._domain.map(date);
+                if (!this._ticks) {
+                    var d3Scale = scaleTime().domain(ticks).range([
+                        0,
+                        this._width
+                    ]);
+                    ticks = d3Scale.ticks();
+                }
+                var timeLocale = this._timeLocale || locale[this._locale] || locale["en-US"];
+                if (this._userFormat === undefined) this._userFormat = this._tickFormat || false;
+                var tickFormat = this._tickFormat = this._userFormat ? this._userFormat : function(d) {
+                    return formatDate(d, ticks).replace(/^Q/g, timeLocale.quarter);
+                };
+                // Measures size of ticks
+                this._ticksWidth = this._width;
+                if ([
+                    "auto",
+                    "buttons"
+                ].includes(this._buttonBehavior)) {
+                    var maxLabel = 0;
+                    ticks.forEach(function(d, i) {
+                        var _this__shapeConfig_labelConfig = _this._shapeConfig.labelConfig, fontFamily = _this__shapeConfig_labelConfig.fontFamily, fontSize = _this__shapeConfig_labelConfig.fontSize;
+                        var f = typeof fontFamily === "function" ? fontFamily(d, i) : fontFamily, s = typeof fontSize === "function" ? fontSize(d, i) : fontSize;
+                        var wrap = textWrap().fontFamily(f).fontSize(s).lineHeight(_this._shapeConfig.lineHeight ? _this._shapeConfig.lineHeight(d, i) : undefined);
+                        var res = wrap(tickFormat(d));
+                        var width = res.lines.length ? Math.ceil(max(res.lines.map(function(line) {
+                            return textWidth(line, {
+                                "font-family": f,
+                                "font-size": s
+                            });
+                        }))) + s / 4 : 0;
+                        if (width % 2) width++;
+                        if (maxLabel < width) maxLabel = width + 2 * _this._buttonPadding;
+                    });
+                    this._ticksWidth = maxLabel * ticks.length;
+                }
+                var playButtonWidth = this._playButton ? 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;
+                if (this._buttonBehaviorCurrent === "buttons") {
+                    this._scale = "ordinal";
+                    var domain = scaleTime().domain(this._domain.map(date)).ticks().map(Number);
+                    this._domain = this._ticks ? this._ticks : Array.from(Array(domain[domain.length - 1] - domain[0] + 1), function(_, x) {
+                        return domain[0] + x;
+                    }).map(date);
+                    this._ticks = this._domain;
+                    var buttonMargin = 0.5 * this._ticksWidth / this._ticks.length;
+                    var emptySpace = this._width - this._ticksWidth - playButtonWidth;
+                    this._paddingLeft = this._buttonAlign === "middle" ? emptySpace / 2 + playButtonWidth : this._buttonAlign === "end" ? emptySpace + playButtonWidth : playButtonWidth;
+                    this._range = [
+                        this._paddingLeft + buttonMargin,
+                        this._paddingLeft + this._ticksWidth - buttonMargin
+                    ];
+                } else {
+                    this._scale = "time";
+                    this._domain = extent(ticks);
+                    this._range = [
+                        playButtonWidth ? playButtonWidth * 1.5 : undefined,
+                        undefined
+                    ];
+                    this._paddingLeft = playButtonWidth;
+                }
+                _get(_get_prototype_of(Timeline.prototype), "render", this).call(this, callback);
+                var offset = this._outerBounds[y], range = this._d3Scale.range();
+                var brush = this._brush = brushX().extent([
+                    [
+                        range[0],
+                        offset
+                    ],
+                    [
+                        range[range.length - 1],
+                        offset + this._outerBounds[height]
+                    ]
+                ]).filter(this._brushFilter).handleSize(hiddenHandles ? 0 : this._handleSize).on("start", this._brushStart.bind(this)).on("brush", this._brushBrush.bind(this)).on("end", this._brushEnd.bind(this));
+                // data Array to be used when detecting the default value
+                var defaultData = this._buttonBehaviorCurrent === "ticks" ? this._availableTicks : range;
+                // the default selection, if needed
+                var defaultSelection = [
+                    this._brushMin() > defaultData.length ? defaultData[0] : defaultData[defaultData.length - this._brushMin()],
+                    defaultData[defaultData.length - 1]
+                ];
+                // the current selection, considering user input, defaults, and data
+                var selection = this._selection === void 0 ? defaultSelection : _instanceof(this._selection, Array) ? this._buttonBehaviorCurrent === "buttons" ? this._selection.map(date).map(function(d) {
+                    return range[_this._ticks.map(Number).indexOf(+d)];
+                }) : this._selection.map(date) : this._buttonBehaviorCurrent === "buttons" ? [
+                    range[this._ticks.map(Number).indexOf(+this._selection)]
+                ] : [
+                    this._selection
+                ];
+                if (selection.length === 1) selection.push(selection[0]);
+                this._updateBrushLimit(selection);
+                this._brushGroup = elem("g.brushGroup", {
+                    parent: this._group
+                });
+                this._brushGroup.call(brush).transition(this._transition).call(brush.move, this._buttonBehaviorCurrent === "ticks" ? this._updateBrushLimit(selection) : selection);
+                this._outerBounds.y -= this._handleSize / 2;
+                this._outerBounds.height += this._handleSize / 2;
+                var playButtonGroup = elem("g.d3plus-Timeline-play", {
+                    parent: this._group
+                });
+                this._playButtonClass.data(this._playButton ? [
+                    {
+                        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
+                    }
+                ] : []).select(playButtonGroup.node()).config(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",
+            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",
+            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",
+            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",
+            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",
+            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",
+            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",
+            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",
+            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",
+            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",
+            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",
+            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",
+            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",
+            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",
+            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",
+            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",
+            value: function snapping(_) {
+                return arguments.length ? (this._snapping = _, this) : this._snapping;
+            }
+        }
+    ]);
+    return Timeline;
+}(Axis);
+/**
+    @class Timeline
+    @extends Axis
+*/ export { Timeline as default };