tsichart-core 1.0.0

package/dist/PieChart-B1ZXk13Q.js

@@ -0,0 +1,258 @@
+import { _ as __extends, a as __assign } from './_tslib-5_9pMg1F.js';
+import * as d3 from 'd3';
+import { U as Utils, T as TooltipMeasureFormat } from './Utils-C_j8IgZh.js';
+import { L as Legend } from './Legend-DlSXQXHF.js';
+import { C as ContextMenu } from './ContextMenu-DABSkTA2.js';
+import { C as ChartComponentData } from './Grid-DfFAkeeV.js';
+import { G as GroupedBarChartData } from './GroupedBarChartData-BRCyDxbA.js';
+import { T as Tooltip } from './Tooltip-Fa-0Xekn.js';
+import { C as ChartVisualizationComponent } from './ChartVisualizationComponent-CG7e5xlc.js';
+import { S as Slider } from './Slider-BtSdC4fj.js';
+
+var PieChartData = /** @class */ (function (_super) {
+    __extends(PieChartData, _super);
+    function PieChartData() {
+        var _this = _super.call(this) || this;
+        _this.visibleValuesSum = 0;
+        return _this;
+    }
+    PieChartData.prototype.mergeDataToDisplayStateAndTimeArrays = function (data, timestamp, aggregateExpressionOptions) {
+        if (aggregateExpressionOptions === void 0) { aggregateExpressionOptions = null; }
+        ChartComponentData.prototype.mergeDataToDisplayStateAndTimeArrays.call(this, data, aggregateExpressionOptions);
+        this.timestamp = Utils.getValueOrDefault({ '': timestamp }, '', this.allTimestampsArray[0]);
+        _super.prototype.setValuesAtTimestamp.call(this);
+        this.setAllTimestampsArray();
+    };
+    PieChartData.prototype.updateFlatValueArray = function (timestamp) {
+        var _this = this;
+        this.visibleValuesSum = 0;
+        var values = [];
+        Object.keys(this.valuesAtTimestamp).forEach(function (aggKey) {
+            Object.keys(_this.valuesAtTimestamp[aggKey].splitBys).forEach(function (splitBy, splitByI) {
+                var value = 0;
+                if (_this.getSplitByVisible(aggKey, splitBy) && _this.valuesAtTimestamp[aggKey].splitBys[splitBy].measurements != undefined)
+                    value = _this.valuesAtTimestamp[aggKey].splitBys[splitBy].measurements[_this.getVisibleMeasure(aggKey, splitBy)];
+                values.push({
+                    aggKey: aggKey,
+                    splitBy: splitBy,
+                    val: value,
+                    splitByI: splitByI
+                });
+                _this.visibleValuesSum += Math.abs(value);
+            });
+        });
+        this.flatValueArray = values;
+    };
+    return PieChartData;
+}(GroupedBarChartData));
+
+var PieChart = /** @class */ (function (_super) {
+    __extends(PieChart, _super);
+    function PieChart(renderTarget) {
+        var _this = _super.call(this, renderTarget) || this;
+        _this.chartComponentData = new PieChartData();
+        _this.chartMargins = {
+            top: 20,
+            bottom: 28,
+            left: 0,
+            right: 0
+        };
+        return _this;
+    }
+    PieChart.prototype.PieChart = function () { };
+    PieChart.prototype.render = function (data, options, aggregateExpressionOptions) {
+        var _this = this;
+        _super.prototype.render.call(this, data, options, aggregateExpressionOptions);
+        this.chartComponentData.mergeDataToDisplayStateAndTimeArrays(this.data, this.chartOptions.timestamp, this.aggregateExpressionOptions);
+        (options && options.timestamp != undefined) ? options.timestamp : this.chartComponentData.allTimestampsArray[0];
+        var targetElement = d3.select(this.renderTarget)
+            .classed("tsi-pieChart", true);
+        if (this.svgSelection == null) {
+            this.svgSelection = targetElement.append("svg")
+                .attr("class", "tsi-pieChartSVG tsi-chartSVG")
+                .attr('title', this.getString('Pie chart'));
+            var g = this.svgSelection.append("g");
+            var tooltip = new Tooltip(d3.select(this.renderTarget));
+            d3.select(this.renderTarget).append('div').classed('tsi-sliderWrapper', true);
+            this.draw = function (isFromResize, event) {
+                if (isFromResize === void 0) { isFromResize = false; }
+                // Determine the number of timestamps present, add margin for slider
+                if (_this.chartComponentData.allTimestampsArray.length > 1)
+                    _this.chartMargins.bottom = 68;
+                if (_this.chartOptions.legend == "compact") {
+                    _this.chartMargins.top = 68;
+                }
+                else {
+                    _this.chartMargins.top = 20;
+                }
+                _this.width = _this.getWidth();
+                var height = +targetElement.node().getBoundingClientRect().height;
+                if (!isFromResize) {
+                    _this.chartWidth = _this.getChartWidth();
+                }
+                var chartHeight = height;
+                var usableHeight = height - _this.chartMargins.bottom - _this.chartMargins.top;
+                var outerRadius = (Math.min(usableHeight, _this.chartWidth) - 10) / 2;
+                var innerRadius = _this.chartOptions.arcWidthRatio &&
+                    (_this.chartOptions.arcWidthRatio < 1 && _this.chartOptions.arcWidthRatio > 0) ?
+                    outerRadius - (outerRadius * _this.chartOptions.arcWidthRatio) :
+                    0;
+                _this.svgSelection
+                    .attr("width", _this.chartWidth)
+                    .attr("height", chartHeight);
+                _this.svgSelection.select("g").attr("transform", "translate(" + (_this.chartWidth / 2) + "," + (chartHeight / 2) + ")");
+                var timestamp = (_this.chartOptions.timestamp != undefined) ? _this.chartOptions.timestamp : _this.chartComponentData.allTimestampsArray[0];
+                _this.chartComponentData.updateFlatValueArray(timestamp);
+                _super.prototype.themify.call(_this, targetElement, _this.chartOptions.theme);
+                if (!_this.chartOptions.hideChartControlPanel && _this.chartControlsPanel === null) {
+                    _this.chartControlsPanel = Utils.createControlPanel(_this.renderTarget, _this.CONTROLSWIDTH, _this.chartMargins.top, _this.chartOptions);
+                }
+                else if (_this.chartOptions.hideChartControlPanel && _this.chartControlsPanel !== null) {
+                    _this.removeControlPanel();
+                }
+                if (_this.ellipsisItemsExist() && !_this.chartOptions.hideChartControlPanel) {
+                    _this.drawEllipsisMenu();
+                    _this.chartControlsPanel.style("top", Math.max((_this.chartMargins.top - 24), 0) + 'px');
+                }
+                else {
+                    _this.removeControlPanel();
+                }
+                var labelMouseover = function (aggKey, splitBy) {
+                    if (splitBy === void 0) { splitBy = null; }
+                    //filter out the selected timeseries/splitby
+                    var selectedFilter = function (d, j) {
+                        return !(d.data.aggKey == aggKey && (splitBy == null || d.data.splitBy == splitBy));
+                    };
+                    _this.svgSelection.selectAll(".tsi-pie-path")
+                        .filter(selectedFilter)
+                        .attr("stroke-opacity", .3)
+                        .attr("fill-opacity", .3);
+                };
+                var labelMouseout = function (aggregateKey, splitBy) {
+                    _this.svgSelection.selectAll(".tsi-pie-path")
+                        .attr("stroke-opacity", 1)
+                        .attr("fill-opacity", 1);
+                };
+                function drawTooltip(d, mousePosition) {
+                    var xPos = mousePosition[0];
+                    var yPos = mousePosition[1];
+                    tooltip.render(self.chartOptions.theme);
+                    var color = Utils.colorSplitBy(self.chartComponentData.displayState, d.data.splitByI, d.data.aggKey, self.chartOptions.keepSplitByColor);
+                    tooltip.draw(d, self.chartComponentData, xPos, yPos, __assign(__assign({}, self.chartMargins), { top: 0, bottom: 0 }), function (text) {
+                        self.tooltipFormat(self.convertToTimeValueFormat(d.data), text, TooltipMeasureFormat.SingleValue);
+                    }, null, 20, 20, color);
+                }
+                _this.legendObject.draw(_this.chartOptions.legend, _this.chartComponentData, labelMouseover, _this.svgSelection, _this.chartOptions, labelMouseout, null, event);
+                var pie = d3.pie()
+                    .sort(null)
+                    .value(function (d) {
+                    return Math.abs(d.val);
+                });
+                d3.arc()
+                    .outerRadius(outerRadius)
+                    .innerRadius(innerRadius);
+                var arc = g.selectAll(".tsi-pie-arc")
+                    .data(pie(_this.chartComponentData.flatValueArray));
+                var arcEntered = arc
+                    .enter().append("g")
+                    .merge(arc)
+                    .attr("class", "tsi-pie-arc");
+                var self = _this;
+                var drawArc = d3.arc()
+                    .innerRadius(innerRadius)
+                    .outerRadius(outerRadius);
+                function arcTween(a) {
+                    var i = d3.interpolate(this._current, a);
+                    this._current = i(0);
+                    return function (t) {
+                        return drawArc(i(t));
+                    };
+                }
+                var self = _this;
+                function pathMouseout(event, d) {
+                    if (self.contextMenu && self.contextMenu.contextMenuVisible)
+                        return;
+                    tooltip.hide();
+                    labelMouseout(d.data.aggKey, d.data.splitBy);
+                    self.legendObject.legendElement.selectAll('.tsi-splitByLabel').classed("inFocus", false);
+                }
+                function pathMouseInteraction(event, d) {
+                    if (this.contextMenu && this.contextMenu.contextMenuVisible)
+                        return;
+                    pathMouseout(event, d);
+                    labelMouseover(d.data.aggKey, d.data.splitBy);
+                    self.legendObject.legendElement.selectAll('.tsi-splitByLabel').filter(function (filteredSplitBy) {
+                        return (d3.select(this.parentNode).datum() == d.data.aggKey) && (filteredSplitBy == d.data.splitBy);
+                    }).classed("inFocus", true);
+                    drawTooltip(d, d3.pointer(event, self.svgSelection.node()));
+                }
+                var mouseOutArcOnContextMenuClick = function () {
+                    arcEntered.selectAll("path").each(pathMouseout);
+                };
+                arcEntered.each(function () {
+                    var pathElem = d3.select(this).selectAll(".tsi-pie-path").data(function (d) { return [d]; });
+                    pathElem.enter()
+                        .append("path")
+                        .attr("class", "tsi-pie-path")
+                        .attr("d", drawArc)
+                        .on("mouseover", pathMouseInteraction)
+                        .on("mousemove", pathMouseInteraction)
+                        .on("mouseout", pathMouseout)
+                        .on("contextmenu", function (event, d) {
+                        if (self.chartComponentData.displayState[d.data.aggKey].contextMenuActions &&
+                            self.chartComponentData.displayState[d.data.aggKey].contextMenuActions.length) {
+                            var mousePosition = d3.pointer(event, targetElement.node());
+                            event.preventDefault();
+                            self.contextMenu.draw(self.chartComponentData, self.renderTarget, self.chartOptions, mousePosition, d.data.aggKey, d.data.splitBy, mouseOutArcOnContextMenuClick, new Date(self.chartComponentData.timestamp));
+                        }
+                    })
+                        .each(function (d) { this._current = d; })
+                        .merge(pathElem)
+                        .transition()
+                        .duration(self.TRANSDURATION)
+                        .ease(d3.easeExp)
+                        .attrTween("d", arcTween)
+                        .attr("fill", function (d) {
+                        return Utils.colorSplitBy(self.chartComponentData.displayState, d.data.splitByI, d.data.aggKey, self.chartOptions.keepSplitByColor);
+                    })
+                        .attr("class", "tsi-pie-path");
+                });
+                arc.exit().remove();
+                /******************** Temporal Slider ************************/
+                if (_this.chartComponentData.allTimestampsArray.length > 1) {
+                    d3.select(_this.renderTarget).select('.tsi-sliderWrapper').classed('tsi-hidden', false);
+                    slider.render(_this.chartComponentData.allTimestampsArray.map(function (ts) {
+                        var action = function () {
+                            _this.chartOptions.timestamp = ts;
+                            _this.render(_this.chartComponentData.data, _this.chartOptions, _this.aggregateExpressionOptions);
+                        };
+                        return { label: Utils.timeFormat(_this.chartComponentData.usesSeconds, _this.chartComponentData.usesMillis, _this.chartOptions.offset, _this.chartOptions.is24HourTime, null, null, _this.chartOptions.dateLocale)(new Date(ts)), action: action };
+                    }), _this.chartOptions, _this.chartWidth, Utils.timeFormat(_this.chartComponentData.usesSeconds, _this.chartComponentData.usesMillis, _this.chartOptions.offset, _this.chartOptions.is24HourTime, null, null, _this.chartOptions.dateLocale)(new Date(_this.chartComponentData.timestamp)));
+                }
+                else {
+                    slider.remove();
+                    d3.select(_this.renderTarget).select('.tsi-sliderWrapper').classed('tsi-hidden', true);
+                }
+            };
+            this.legendObject = new Legend(this.draw, this.renderTarget, this.CONTROLSWIDTH);
+            this.contextMenu = new ContextMenu(this.draw, this.renderTarget);
+            // temporal slider
+            var slider = new Slider(d3.select(this.renderTarget).select('.tsi-sliderWrapper').node());
+            window.addEventListener("resize", function () {
+                if (!_this.chartOptions.suppressResizeListener)
+                    _this.draw();
+            });
+        }
+        this.draw();
+        this.gatedShowGrid();
+        d3.select("html").on("click." + Utils.guid(), function (event) {
+            if (_this.ellipsisContainer && event.target != _this.ellipsisContainer.select(".tsi-ellipsisButton").node()) {
+                _this.ellipsisMenu.setMenuVisibility(false);
+            }
+        });
+        this.legendPostRenderProcess(this.chartOptions.legend, this.svgSelection, true);
+    };
+    return PieChart;
+}(ChartVisualizationComponent));
+
+export { PieChart as P };

package/dist/PieChart.d.ts

@@ -0,0 +1,26 @@
+import { G as GroupedBarChartData } from './GroupedBarChartData-C0YQydrP.js';
+import { C as ChartVisualizationComponent } from './ChartVisualizationComponent-DBjiqR1n.js';
+import './ChartComponentData-D5wuQmmZ.js';
+import './ChartComponent-DTcc6aED.js';
+import './Enums-ChUuTtHV.js';
+import './Component-Rp30sSAW.js';
+import './Interfaces-BKRQ685G.js';
+import './EllipsisMenu.js';
+
+declare class PieChartData extends GroupedBarChartData {
+    flatValueArray: any;
+    visibleValuesSum: number;
+    constructor();
+    mergeDataToDisplayStateAndTimeArrays(data: any, timestamp: any, aggregateExpressionOptions?: any): void;
+    updateFlatValueArray(timestamp: any): void;
+}
+
+declare class PieChart extends ChartVisualizationComponent {
+    private contextMenu;
+    chartComponentData: PieChartData;
+    constructor(renderTarget: Element);
+    PieChart(): void;
+    render(data: any, options: any, aggregateExpressionOptions: any): void;
+}
+
+export { PieChart as default };

package/dist/PieChart.js

@@ -0,0 +1,17 @@
+export { P as default } from './PieChart-B1ZXk13Q.js';
+import './_tslib-5_9pMg1F.js';
+import 'd3';
+import './Utils-C_j8IgZh.js';
+import 'moment-timezone';
+import './Legend-DlSXQXHF.js';
+import './Component-CofgyEw0.js';
+import './ContextMenu-DABSkTA2.js';
+import './Grid-DfFAkeeV.js';
+import './GroupedBarChartData-BRCyDxbA.js';
+import './Tooltip-Fa-0Xekn.js';
+import './ChartVisualizationComponent-CG7e5xlc.js';
+import './ChartComponent-DnKLTxWe.js';
+import 'split.js';
+import './EllipsisMenu-30FNqoIv.js';
+import './ChartDataOptions-DRd8NHra.js';
+import './Slider-BtSdC4fj.js';

package/dist/PlaybackControls-Dwt6dif9.js

@@ -0,0 +1,195 @@
+import { _ as __extends } from './_tslib-5_9pMg1F.js';
+import * as d3 from 'd3';
+import { C as Component } from './Component-CofgyEw0.js';
+import { U as Utils } from './Utils-C_j8IgZh.js';
+import { T as TemporalXAxisComponent } from './TemporalXAxisComponent-DkyVvASs.js';
+
+var PlaybackControls = /** @class */ (function (_super) {
+    __extends(PlaybackControls, _super);
+    function PlaybackControls(renderTarget, initialTimeStamp) {
+        if (initialTimeStamp === void 0) { initialTimeStamp = null; }
+        var _this = _super.call(this, renderTarget) || this;
+        _this.handleRadius = 7;
+        _this.minimumPlaybackInterval = 1000; // 1 second
+        _this.playbackInterval = null;
+        _this.selectedTimeStamp = initialTimeStamp;
+        return _this;
+    }
+    Object.defineProperty(PlaybackControls.prototype, "currentTimeStamp", {
+        get: function () {
+            return this.selectedTimeStamp;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PlaybackControls.prototype.render = function (start, end, onSelectTimeStamp, options, playbackSettings) {
+        var _this = this;
+        this.end = end;
+        this.selectTimeStampCallback = onSelectTimeStamp;
+        this.chartOptions.setOptions(options);
+        this.playbackSettings = playbackSettings;
+        this.timeFormatter = Utils.timeFormat(true, false, this.chartOptions.offset, this.chartOptions.is24HourTime, null, null, this.chartOptions.dateLocale);
+        var targetElement = d3.select(this.renderTarget);
+        _super.prototype.themify.call(this, targetElement, this.chartOptions.theme);
+        targetElement.html('');
+        var sliderContainer = targetElement.append('div')
+            .classed('tsi-playback-timeline', true);
+        var sliderContainerWidth = sliderContainer.node().clientWidth;
+        var sliderContainerHeight = sliderContainer.node().clientHeight;
+        this.trackXOffset = this.handleRadius + 8;
+        this.trackYOffset = Math.floor(sliderContainerHeight / 2);
+        this.trackWidth = sliderContainerWidth - (2 * this.trackXOffset);
+        this.timeStampToPosition = d3.scaleTime()
+            .domain([start, end])
+            .range([0, this.trackWidth]);
+        var timeAxisContainer = sliderContainer.append('div')
+            .classed('tsi-playback-axis', true)
+            .style('top', "".concat(this.trackYOffset + 6, "px"))
+            .style('left', "".concat(this.trackXOffset, "px"))
+            .style('width', "".concat(this.trackWidth, "px"));
+        var timeAxis = new TimeAxis(timeAxisContainer.node());
+        timeAxis.render(this.chartOptions, this.timeStampToPosition);
+        var gWrapper = sliderContainer
+            .append('svg')
+            .append('g');
+        sliderContainer.append('div')
+            .classed('tsi-playback-input', true)
+            .style('left', "".concat(this.trackXOffset, "px"))
+            .style('width', "".concat(this.trackWidth, "px"));
+        this.track = gWrapper
+            .append('g')
+            .classed('tsi-playback-track', true);
+        gWrapper.call(d3.drag()
+            .container(sliderContainer.select('.tsi-playback-input').node())
+            .on('start.interrupt', function () { gWrapper.interrupt(); })
+            .on('start drag', function (event) {
+            _this.onDrag(event.x);
+        })
+            .on('end', function () {
+            _this.onDragEnd();
+        }));
+        this.track.append('line')
+            .classed('tsi-left-of-handle', true)
+            .attr('y1', this.trackYOffset)
+            .attr('y2', this.trackYOffset);
+        this.track.append('line')
+            .classed('tsi-right-of-handle', true)
+            .attr('y1', this.trackYOffset)
+            .attr('y2', this.trackYOffset);
+        this.handleElement = gWrapper.append('circle')
+            .classed('tsi-playback-handle', true)
+            .attr('r', this.handleRadius)
+            .attr('cy', this.trackYOffset);
+        this.controlsContainer = targetElement.append('div')
+            .classed('tsi-playback-buttons', true);
+        this.playButton = this.controlsContainer.append('button')
+            .classed('tsi-play-button', this.playbackInterval === null)
+            .classed('tsi-pause-button', this.playbackInterval !== null)
+            .on('click', function () {
+            if (_this.playbackInterval === null) {
+                _this.play();
+            }
+            else {
+                _this.pause();
+            }
+        });
+        this.controlsContainer.append('span')
+            .classed('tsi-playback-timestamp', true)
+            .style('margin', "0 ".concat(this.trackXOffset, "px"));
+        this.selectedTimeStamp = this.selectedTimeStamp || start;
+        var handlePosition = this.timeStampToPosition(this.selectedTimeStamp);
+        this.updateSelection(handlePosition, this.selectedTimeStamp);
+    };
+    PlaybackControls.prototype.play = function () {
+        if (this.playbackInterval === null) {
+            // Default to an interval if one is not provided. Also, the interval should
+            // not be lower than the minimum playback interval.
+            var playbackIntervalMs = Math.max(this.playbackSettings.intervalMillis || this.minimumPlaybackInterval, this.minimumPlaybackInterval);
+            this.next();
+            this.playbackInterval = window.setInterval(this.next.bind(this), playbackIntervalMs);
+            this.playButton
+                .classed('tsi-play-button', false)
+                .classed('tsi-pause-button', true);
+        }
+    };
+    PlaybackControls.prototype.pause = function () {
+        // Pause only if component is in 'play' mode (i.e. an interval has ben set)
+        // otherwise, do nothing.
+        if (this.playbackInterval !== null) {
+            window.clearInterval(this.playbackInterval);
+            this.playbackInterval = null;
+            this.playButton
+                .classed('tsi-play-button', true)
+                .classed('tsi-pause-button', false);
+        }
+    };
+    PlaybackControls.prototype.next = function () {
+        // If we've reached the end of the available time stamps, do nothing until 
+        // the end moves forward.
+        if (this.selectedTimeStamp.valueOf() === this.end.valueOf()) {
+            return;
+        }
+        var newValue = this.selectedTimeStamp.valueOf() + this.playbackSettings.stepSizeMillis;
+        newValue = Math.min(newValue, this.end.valueOf());
+        this.selectedTimeStamp = new Date(newValue);
+        var handlePosition = this.timeStampToPosition(this.selectedTimeStamp);
+        this.updateSelection(handlePosition, this.selectedTimeStamp);
+        this.selectTimeStampCallback(this.selectedTimeStamp);
+    };
+    PlaybackControls.prototype.clamp = function (number, min, max) {
+        var clamped = Math.max(number, min);
+        return Math.min(clamped, max);
+    };
+    PlaybackControls.prototype.onDrag = function (positionX) {
+        this.wasPlayingWhenDragStarted = this.wasPlayingWhenDragStarted ||
+            (this.playbackInterval !== null);
+        this.pause();
+        var handlePosition = this.clamp(positionX, 0, this.trackWidth);
+        this.selectedTimeStamp = this.timeStampToPosition.invert(handlePosition);
+        this.updateSelection(handlePosition, this.selectedTimeStamp);
+    };
+    PlaybackControls.prototype.onDragEnd = function () {
+        this.selectTimeStampCallback(this.selectedTimeStamp);
+        if (this.wasPlayingWhenDragStarted) {
+            this.play();
+            this.wasPlayingWhenDragStarted = false;
+        }
+    };
+    PlaybackControls.prototype.updateSelection = function (handlePositionX, timeStamp) {
+        this.track.select('.tsi-left-of-handle')
+            .attr('x1', this.trackXOffset)
+            .attr('x2', this.trackXOffset + handlePositionX);
+        this.track.select('.tsi-right-of-handle')
+            .attr('x1', this.trackXOffset + handlePositionX)
+            .attr('x2', this.trackXOffset + this.trackWidth);
+        this.handleElement
+            .attr('cx', this.trackXOffset + handlePositionX);
+        this.controlsContainer
+            .select('.tsi-playback-timestamp')
+            .text(this.timeFormatter(timeStamp));
+    };
+    return PlaybackControls;
+}(Component));
+var TimeAxis = /** @class */ (function (_super) {
+    __extends(TimeAxis, _super);
+    function TimeAxis(renderTarget) {
+        return _super.call(this, renderTarget) || this;
+    }
+    TimeAxis.prototype.render = function (options, timeScale) {
+        this.chartOptions.setOptions(options);
+        this.x = timeScale;
+        if (this.chartOptions.xAxisHidden) {
+            return;
+        }
+        var targetElement = d3.select(this.renderTarget);
+        targetElement.html('');
+        this.chartWidth = targetElement.node().clientWidth;
+        this.xAxis = targetElement.append('svg')
+            .classed('xAxis', true)
+            .data([this.x]);
+        this.drawXAxis(0, true, true);
+    };
+    return TimeAxis;
+}(TemporalXAxisComponent));
+
+export { PlaybackControls as P };

package/dist/PlaybackControls.d.ts

@@ -0,0 +1,39 @@
+import { C as Component } from './Component-Rp30sSAW.js';
+import './Enums-ChUuTtHV.js';
+import './Interfaces-BKRQ685G.js';
+
+interface IPlaybackSettings {
+    intervalMillis: number;
+    stepSizeMillis: number;
+}
+declare class PlaybackControls extends Component {
+    private playbackInterval;
+    private playButton;
+    private handleElement;
+    private controlsContainer;
+    private track;
+    private trackXOffset;
+    private trackYOffset;
+    private trackWidth;
+    private timeFormatter;
+    private selectedTimeStamp;
+    private selectTimeStampCallback;
+    private timeStampToPosition;
+    private playbackSettings;
+    private end;
+    private wasPlayingWhenDragStarted;
+    readonly handleRadius: number;
+    readonly minimumPlaybackInterval: number;
+    constructor(renderTarget: Element, initialTimeStamp?: Date);
+    get currentTimeStamp(): Date;
+    render(start: Date, end: Date, onSelectTimeStamp: (d: Date) => {}, options: any, playbackSettings: IPlaybackSettings): void;
+    play(): void;
+    pause(): void;
+    next(): void;
+    private clamp;
+    private onDrag;
+    private onDragEnd;
+    private updateSelection;
+}
+
+export { PlaybackControls as default };

package/dist/PlaybackControls.js

@@ -0,0 +1,13 @@
+export { P as default } from './PlaybackControls-Dwt6dif9.js';
+import './_tslib-5_9pMg1F.js';
+import 'd3';
+import './Component-CofgyEw0.js';
+import './Utils-C_j8IgZh.js';
+import 'moment-timezone';
+import './TemporalXAxisComponent-DkyVvASs.js';
+import './ChartVisualizationComponent-CG7e5xlc.js';
+import './ChartComponent-DnKLTxWe.js';
+import './Grid-DfFAkeeV.js';
+import 'split.js';
+import './EllipsisMenu-30FNqoIv.js';
+import './ChartDataOptions-DRd8NHra.js';