tsichart-core 1.0.0

package/dist/Grid.d.ts

@@ -0,0 +1,43 @@
+import { C as Component, a as ChartOptions } from './Component-Rp30sSAW.js';
+import { C as ChartComponentData } from './ChartComponentData-D5wuQmmZ.js';
+import './Enums-ChUuTtHV.js';
+import './Interfaces-BKRQ685G.js';
+
+declare class Grid extends Component {
+    private gridComponent;
+    private rowLabelKey;
+    private colorKey;
+    private aggIndexKey;
+    private chartComponentData;
+    private draw;
+    private closeButton;
+    private filteredTimestamps;
+    private table;
+    private tableHeaderRow;
+    private tableContentRows;
+    usesSeconds: boolean;
+    usesMillis: boolean;
+    constructor(renderTarget: Element);
+    static hideGrid(renderTarget: any): void;
+    static showGrid(renderTarget: any, chartOptions: ChartOptions, aggregateExpressionOptions: any, chartComponentData: ChartComponentData): void;
+    static createGridEllipsisOption(renderTarget: any, chartOptions: ChartOptions, aggregateExpressionOptions: any, chartComponentData: ChartComponentData, labelText?: string): {
+        iconClass: string;
+        label: string;
+        action: () => void;
+        description: string;
+    };
+    Grid(): void;
+    private cellClass;
+    focus: (rowIdx: any, colIdx: any) => void;
+    renderFromAggregates(data: any, options: any, aggregateExpressionOptions: any, chartComponentData: any): void;
+    private getRowData;
+    private convertSeriesToGridData;
+    private getFormattedDate;
+    private setFilteredTimestamps;
+    private addHeaderCells;
+    private addValueCells;
+    render(data: any, options: any, aggregateExpressionOptions: any, chartComponentData?: ChartComponentData): void;
+    private arrowNavigate;
+}
+
+export { Grid as default };

package/dist/Grid.js

@@ -0,0 +1,6 @@
+export { G as default } from './Grid-DfFAkeeV.js';
+import './_tslib-5_9pMg1F.js';
+import 'd3';
+import './Utils-C_j8IgZh.js';
+import 'moment-timezone';
+import './Component-CofgyEw0.js';

package/dist/GroupedBarChart-BspwM8r2.js

@@ -0,0 +1,579 @@
+import { _ as __extends } 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 { G as GroupedBarChartData } from './GroupedBarChartData-BRCyDxbA.js';
+import { C as ContextMenu } from './ContextMenu-DABSkTA2.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 GroupedBarChart = /** @class */ (function (_super) {
+    __extends(GroupedBarChart, _super);
+    function GroupedBarChart(renderTarget) {
+        var _this = _super.call(this, renderTarget) || this;
+        _this.isStacked = null;
+        _this.stackedButton = null;
+        _this.chartComponentData = new GroupedBarChartData();
+        _this.chartMargins = {
+            top: 52,
+            bottom: 48,
+            left: 70,
+            right: 60
+        };
+        return _this;
+    }
+    GroupedBarChart.prototype.GroupedBarChart = function () { };
+    GroupedBarChart.prototype.render = function (data, options, aggregateExpressionOptions) {
+        var _this = this;
+        _super.prototype.render.call(this, data, options, aggregateExpressionOptions);
+        if (options && options.stacked || this.isStacked == null) {
+            this.isStacked = this.chartOptions.stacked;
+        }
+        this.chartMargins.top = (this.chartOptions.legend === 'compact') ? 84 : 52;
+        this.width = Math.max(d3.select(this.renderTarget).node().clientWidth, this.MINWIDTH);
+        var height = Math.max(d3.select(this.renderTarget).node().clientHeight, this.MINHEIGHT);
+        this.chartComponentData.mergeDataToDisplayStateAndTimeArrays(this.data, this.timestamp, this.aggregateExpressionOptions);
+        this.timestamp = (options && options.timestamp != undefined) ? options.timestamp : this.chartComponentData.allTimestampsArray[0];
+        var chartHeight = height - this.chartMargins.bottom - this.chartMargins.top;
+        this.chartWidth = this.getChartWidth();
+        if (this.svgSelection == null) {
+            var targetElement = d3.select(this.renderTarget)
+                .classed("tsi-barChart", true);
+            var svgSelection = targetElement.append("svg")
+                .attr("class", "tsi-barChartSVG tsi-chartSVG")
+                .attr('title', this.getString('Bar chart'))
+                .style("height", height)
+                .style("width", this.getSVGWidth() + 'px');
+            this.svgSelection = svgSelection;
+            var g = svgSelection.append("g")
+                .attr("transform", "translate(" + this.chartMargins.left + "," + this.chartMargins.top + ")");
+            var baseLine = g.append("line")
+                .classed("tsi-baseLine", true)
+                .attr("stroke-width", 1);
+            var focus = g.append("g")
+                .attr("transform", "translate(-100,-100)")
+                .attr("class", "tsi-focus");
+            focus.append("line")
+                .attr("class", "tsi-focusLine")
+                .attr("x1", 0)
+                .attr("x2", this.chartWidth)
+                .attr("y1", 0)
+                .attr("y2", 0);
+            var vHoverG = focus.append("g")
+                .attr("class", 'vHoverG');
+            vHoverG.append("rect")
+                .attr("class", 'vHoverBox')
+                .attr("x", -5)
+                .attr("y", 0)
+                .attr("width", 0)
+                .attr("height", 0);
+            vHoverG.append("text")
+                .attr("class", "vHoverText hoverText")
+                .attr("dy", ".32em")
+                .attr("x", -10)
+                .text(function (d) { return d; });
+            d3.select(this.renderTarget).append('div').classed('tsi-sliderWrapper', true);
+            var tooltip = new Tooltip(d3.select(this.renderTarget));
+            this.chartComponentData.data.map(function (aggregate, aggI) {
+                Object.keys(aggregate)[0];
+                Utils.createEntityKey(Object.keys(aggregate)[0], aggI);
+            });
+            var labelMouseover = function (aggKey, splitBy) {
+                if (splitBy === void 0) { splitBy = null; }
+                var self = _this;
+                svgSelection.selectAll(".tsi-valueElement")
+                    .attr("stroke-opacity", 1)
+                    .attr("fill-opacity", 1);
+                //filter out the selected timeseries/splitby
+                var selectedFilter = function (d, j) {
+                    var currAggKey;
+                    var currSplitBy;
+                    if (d.aggKey) {
+                        currAggKey = d.aggKey;
+                        currSplitBy = d.splitBy;
+                    }
+                    else if (d && d.length) {
+                        currAggKey = d[0].aggKey;
+                        currSplitBy = d[0].splitBy;
+                    }
+                    else
+                        return true;
+                    return !(aggKey == currAggKey && (splitBy == null || splitBy == currSplitBy));
+                };
+                svgSelection.selectAll(".tsi-valueElement")
+                    .filter(selectedFilter)
+                    .attr("stroke-opacity", .3)
+                    .attr("fill-opacity", .3);
+                var text = svgSelection.selectAll(".barGroup")
+                    .filter(function (d) {
+                    return d == aggKey;
+                })
+                    .select(".labelGroup").select("text").text(null);
+                var dy = parseFloat(text.attr("dy"));
+                var aggLabelGroup = text.append("tspan").attr('class', "tsi-labelGroupLine");
+                Utils.appendFormattedElementsFromString(aggLabelGroup, self.chartComponentData.displayState[aggKey].name, { inSvg: true, additionalClassName: "tsi-aggregateLabelGroupText" });
+                var splitByLabelGroup = text.append("tspan").attr('class', "tsi-labelGroupLine");
+                Utils.appendFormattedElementsFromString(splitByLabelGroup, splitBy, { inSvg: true, additionalClassName: "tsi-splitByLabelGroupText" });
+                splitByLabelGroup.selectAll('.tsi-splitByLabelGroupText').each(function (d, i) {
+                    if (i == 0) {
+                        d3.select(this).attr("y", text.attr("y"))
+                            .attr("x", text.attr("x"))
+                            .attr("dy", (dy + dy * 2) + "em")
+                            .attr("text-anchor", "middle");
+                    }
+                });
+                rePositionLabelGroupBoxes(svgSelection, aggKey);
+            };
+            var labelMouseout = function (svgSelection, aggKey) {
+                var self = _this;
+                var allText = svgSelection.selectAll(".barGroup")
+                    .selectAll(".labelGroup")
+                    .selectAll("text")
+                    .text(null);
+                allText.each(function (aggKey) {
+                    var text = d3.select(this);
+                    if (self.chartComponentData.displayState[aggKey] != undefined) {
+                        Utils.appendFormattedElementsFromString(text, self.chartComponentData.displayState[aggKey].name, { inSvg: true, additionalClassName: "tsi-aggregateLabelGroupText" });
+                    }
+                });
+                rePositionLabelGroupBoxes(svgSelection);
+            };
+            var calcSpacePerAgg = function () {
+                var aggregateCount = Math.max(Object.keys(_this.chartComponentData.filteredAggregates).length, 1);
+                return Math.max((_this.chartWidth / 2) / aggregateCount, 0);
+            };
+            var rePositionLabelGroupBoxes = function (svgSelection, aggKey) {
+                if (aggKey === void 0) { aggKey = null; }
+                svgSelection.selectAll(".barGroup").filter(function (d, i) {
+                    if (aggKey == null)
+                        return true;
+                    return d == aggKey;
+                })
+                    .each(function () {
+                    if (d3.select(this).select('.labelGroup').select('text').node() == null)
+                        return;
+                    var textElemDimensions = d3.select(this).select('.labelGroup').select('text').node()
+                        .getBoundingClientRect();
+                    var spacePerAgg = calcSpacePerAgg();
+                    d3.select(this).attr("width");
+                    // //truncate text to fit in spacePerAggregate of width
+                    var textSelection = d3.select(this).select('.labelGroup').select("text");
+                    var truncateText = function (textSelection, childrenSize) {
+                        if (childrenSize === void 0) { childrenSize = 1; }
+                        if (textSelection.node().getComputedTextLength) {
+                            var textLength = textSelection.node().getComputedTextLength();
+                            var text = textSelection.text();
+                            while (textLength > ((spacePerAgg - 6) / childrenSize) && text.length > 0) {
+                                text = text.slice(0, -1);
+                                textSelection.text(text + '...');
+                                textLength = textSelection.node().getComputedTextLength();
+                            }
+                        }
+                    };
+                    //text is either in tspans or just in text. Either truncate text directly or through tspan
+                    if (textSelection.selectAll("tspan").filter(function () { return !d3.select(this).classed("tsi-labelGroupLine"); }).size() === 0)
+                        truncateText(textSelection);
+                    else {
+                        textSelection.selectAll("tspan").filter(function () { return !d3.select(this).classed("tsi-labelGroupLine"); }).each(function () {
+                            var tspanTextSelection = d3.select(this);
+                            var childrenSize = tspanTextSelection.classed("tsi-splitByLabelGroupText") ? textSelection.selectAll(".tsi-splitByLabelGroupText").size() : textSelection.selectAll(".tsi-aggregateLabelGroupText").size();
+                            truncateText(tspanTextSelection, childrenSize);
+                        });
+                    }
+                    d3.select(this).select('.labelGroup').select("rect")
+                        .attr("height", textElemDimensions.height + 4)
+                        .attr("y", chartHeight + 6)
+                        .attr("x", 0)
+                        .attr("width", spacePerAgg);
+                });
+            };
+            var draw = function (isFromResize) {
+                if (isFromResize === void 0) { isFromResize = false; }
+                var self = _this;
+                _this.width = _this.getWidth();
+                height = Math.max(d3.select(_this.renderTarget).node().clientHeight, _this.MINHEIGHT);
+                _this.chartComponentData.timestamp = (_this.chartOptions.timestamp != undefined) ? _this.chartOptions.timestamp : _this.chartComponentData.allTimestampsArray[0];
+                _this.chartComponentData.setFilteredAggregates();
+                if (!isFromResize) {
+                    _this.chartWidth = _this.getChartWidth();
+                }
+                _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);
+                    _this.stackedButton = _this.chartControlsPanel.append("button")
+                        .style("left", "60px")
+                        .attr("class", "tsi-stackedButton").on("click", function () {
+                        self.chartOptions.stacked = !self.chartOptions.stacked;
+                        self.draw();
+                    })
+                        .attr("type", "button")
+                        .attr('title', _this.getString('Stack/Unstack Bars'));
+                }
+                else if (_this.chartOptions.hideChartControlPanel && _this.chartControlsPanel !== null) {
+                    _this.removeControlPanel();
+                }
+                if (_this.chartControlsPanel) {
+                    _this.stackedButton.attr('aria-label', _this.chartOptions.stacked ? _this.getString("Unstack bars") : _this.getString("Stack bars"));
+                }
+                if (_this.chartControlsPanel !== null && _this.ellipsisItemsExist()) {
+                    _this.drawEllipsisMenu();
+                    _this.chartControlsPanel.style("top", Math.max((_this.chartMargins.top - 24), 0) + 'px');
+                }
+                else {
+                    _this.removeEllipsisMenu();
+                }
+                /********* Determine the number of timestamps present, add margin for slider *********/
+                if (_this.chartComponentData.allTimestampsArray.length > 1)
+                    _this.chartMargins.bottom = 88;
+                /*******************/
+                chartHeight = height - _this.chartMargins.bottom - _this.chartMargins.top;
+                focus.select("line").attr("x2", _this.chartWidth);
+                svgSelection.style("width", "".concat(_this.getSVGWidth(), "px"));
+                if (_this.timestamp.substring(_this.timestamp.length - 5, _this.timestamp.length) == ".000Z")
+                    _this.timestamp = _this.timestamp.substring(0, _this.timestamp.length - 5) + "Z";
+                var aggregateCount = Math.max(Object.keys(_this.chartComponentData.filteredAggregates).length, 1);
+                svgSelection.select('g').attr("transform", "translate(" + _this.chartMargins.left + "," + _this.chartMargins.top + ")")
+                    .selectAll('.barGroup')
+                    .attr("visibility", "hidden");
+                var barGroups = g.selectAll('.barGroup').data(Object.keys(_this.chartComponentData.displayState));
+                var spacePerAggregate = calcSpacePerAgg();
+                //map to x position
+                var xPosMap = _this.chartComponentData.filteredAggregates.reduce(function (map, aggKey, aggKeyI) {
+                    map[aggKey] = ((1 / (aggregateCount + 1)) * (aggKeyI + 1) * _this.chartWidth - (spacePerAggregate / 2));
+                    return map;
+                }, {});
+                _this.legendObject.draw(_this.chartOptions.legend, _this.chartComponentData, labelMouseover, svgSelection, _this.chartOptions, labelMouseout);
+                barGroups = barGroups.enter()
+                    .append("g")
+                    .attr("class", "barGroup")
+                    .merge(barGroups)
+                    .attr("display", function (d, i) { return (_this.chartComponentData.displayState[d].visible ? "inherit" : "none"); })
+                    .attr("visibility", "visible")
+                    .attr("transform", function (d, i) {
+                    if (xPosMap[d])
+                        return "translate(" + xPosMap[d] + ",0)";
+                    return "";
+                });
+                _this.chartComponentData.setEntireRangeData(_this.chartOptions.scaledToCurrentTime);
+                var allValues = _this.chartComponentData.valuesOfVisibleType;
+                var aggsSeries = _this.chartComponentData.aggsSeries;
+                var yScale = d3.scaleLinear()
+                    .range([chartHeight, 0]);
+                var extent = d3.extent(allValues);
+                if (!_this.chartOptions.stacked) {
+                    if (allValues.length > 0) { //check to make sure there are values present
+                        if (_this.chartOptions.zeroYAxis) {
+                            if (extent[0] > 0)
+                                yScale.domain([0, d3.extent(allValues)[1]]);
+                            else
+                                yScale.domain([d3.extent(allValues)[0], Math.max(d3.extent(allValues)[1], 0)]);
+                        }
+                        else {
+                            var offset = (Math.abs(d3.extent(allValues)[1]) * .05);
+                            yScale.domain([d3.extent(allValues)[0] - offset, (d3.extent(allValues)[1] + offset)]);
+                        }
+                    }
+                    else {
+                        yScale.domain([0, 0]);
+                    }
+                }
+                else {
+                    yScale.domain([Math.min(_this.chartComponentData.globalMin, _this.chartComponentData.globalMax),
+                        Math.max(_this.chartComponentData.globalMin, _this.chartComponentData.globalMax)]);
+                }
+                var barBase = (yScale.domain()[0] > 0) ? yScale(yScale.domain()[0]) : yScale(0);
+                var legendObject = _this.legendObject;
+                barGroups.each(function (aggKey, i) {
+                    var splitBys = Object.keys(self.chartComponentData.displayState[aggKey].splitBys);
+                    var filteredSplitBys = splitBys.filter(function (splitBy) {
+                        return self.chartComponentData.displayState[aggKey].splitBys[splitBy].visible;
+                    });
+                    var splitByCount = filteredSplitBys.length;
+                    var barWidth = spacePerAggregate / splitByCount;
+                    var valueElements = d3.select(this).selectAll('.tsi-valueElement').data(self.chartComponentData.getValueContainerData(aggKey));
+                    var labelGroup = d3.select(this).selectAll(".labelGroup").data([aggKey]);
+                    var labelGroupEntered = labelGroup.enter()
+                        .append("g")
+                        .attr("class", "labelGroup");
+                    labelGroupEntered.append("rect");
+                    var labelGroupText = labelGroupEntered.append("text")
+                        .attr("dy", ".71em");
+                    Utils.appendFormattedElementsFromString(labelGroupText, self.chartComponentData.displayState[aggKey].name, { inSvg: true, additionalClassName: "tsi-aggregateLabelGroupText" });
+                    labelGroupEntered.merge(labelGroup)
+                        .select("rect")
+                        .attr("class", 'aggregateLabelBox')
+                        .attr("x", 0)
+                        .attr("y", 1)
+                        .attr("width", 0)
+                        .attr("height", 0);
+                    d3.select(this).select(".labelGroup").select("text")
+                        .transition()
+                        .duration(self.TRANSDURATION)
+                        .ease(d3.easeExp)
+                        .attr("x", function (d) { return (spacePerAggregate / 2); })
+                        .attr("y", chartHeight + 12)
+                        .style("fill", function (d) { return self.chartComponentData.displayState[aggKey].color; })
+                        .attr("text-anchor", "middle");
+                    labelGroup.exit().remove();
+                    rePositionLabelGroupBoxes(svgSelection, aggKey);
+                    var xScale = d3.scaleLinear()
+                        .domain([0, splitByCount])
+                        .range([0, spacePerAggregate]);
+                    //yOffset to position 0 at the appropriate place
+                    chartHeight - filteredSplitBys.reduce(function (offset, splitBy) {
+                        var measureType = self.chartComponentData.displayState[aggKey].splitBys[splitBy].visibleType;
+                        var yScaledVal; // either 0 or the value 
+                        if (self.chartComponentData.valuesAtTimestamp[aggKey].splitBys[splitBy].measurements)
+                            yScaledVal = yScale(self.chartComponentData.valuesAtTimestamp[aggKey].splitBys[splitBy].measurements[measureType]);
+                        else
+                            yScaledVal = 0;
+                        return offset + yScaledVal;
+                    }, 0);
+                    //calculate the yPosition of an element, either by its data or explicitly through its value
+                    var calcYPos = function (d, i) {
+                        if (!self.chartOptions.stacked) {
+                            if (d.val > 0)
+                                return yScale(d.val);
+                            return yScale(0);
+                        }
+                        if (aggsSeries[d.aggKey] != undefined && aggsSeries[d.aggKey].length != 0) {
+                            return yScale(aggsSeries[d.aggKey][i][0][1]);
+                        }
+                        return 0;
+                    };
+                    //calculate the height of an element given its data
+                    var calcHeight = function (d, i, dValue) {
+                        if (dValue === void 0) { dValue = null; }
+                        if (!self.chartOptions.stacked) {
+                            if (yScale.domain()[0] >= 0)
+                                return chartHeight - calcYPos(d, i);
+                            dValue = (dValue != null) ? dValue : d.val;
+                            if (dValue > 0)
+                                return Math.abs(calcYPos(d, i) - yScale(0));
+                            return yScale(dValue) - yScale(0);
+                        }
+                        return Math.max(Math.abs(yScale(d.val) - yScale(0)), 0);
+                    };
+                    //map to x position for grouped, map to y position for stacked
+                    var splitByXPosMap = filteredSplitBys.reduce(function (map, splitBy, splitByI) {
+                        map[splitBy] = xScale(splitByI);
+                        return map;
+                    }, {});
+                    var valueElementsEntered = valueElements.enter()
+                        .append("g")
+                        .attr("class", "tsi-valueElement");
+                    valueElementsEntered.append("rect");
+                    valueElementsEntered.append("line");
+                    var valueElementMouseout = function (event, d) {
+                        if (self.contextMenu && self.contextMenu.contextMenuVisible)
+                            return;
+                        focus.style("display", "none");
+                        legendObject.legendElement.selectAll('.tsi-splitByLabel').filter(function (filteredSplitBy) {
+                            return (d3.select(this.parentNode).datum() == d.aggKey) && (filteredSplitBy == d.splitBy);
+                        }).classed("inFocus", false);
+                        event.stopPropagation();
+                        svgSelection.selectAll(".tsi-valueElement")
+                            .attr("stroke-opacity", 1)
+                            .attr("fill-opacity", 1);
+                        labelMouseout(svgSelection, d.aggKey);
+                        tooltip.hide();
+                    };
+                    var mouseOutValueElementOnContextMenuClick = function () {
+                        valueElementsEntered.selectAll("path").each(valueElementMouseout);
+                    };
+                    var splitByColors = Utils.createSplitByColors(self.chartComponentData.displayState, aggKey, self.chartOptions.keepSplitByColor);
+                    valueElementsEntered.merge(valueElements)
+                        .select("rect")
+                        .attr("fill", function (d, j) {
+                        return splitByColors[j];
+                    })
+                        .on("mouseover", function (event, d) {
+                        if (self.contextMenu && self.contextMenu.contextMenuVisible)
+                            return;
+                        (legendObject.legendElement.selectAll('.tsi-splitByLabel').filter(function (filteredSplitBy) {
+                            return (d3.select(this.parentNode).datum() == d.aggKey) && (filteredSplitBy == d.splitBy);
+                        })).classed("inFocus", true);
+                        labelMouseover(d.aggKey, d.splitBy);
+                        var e = valueElementsEntered.nodes();
+                        var j = e.indexOf(event.currentTarget);
+                        var yPos = calcYPos(d, j);
+                        if (d.val < 0) {
+                            yPos = yPos + calcHeight(d, j);
+                        }
+                        focus.style("display", "block")
+                            .attr("transform", "translate(0," + yPos + ")");
+                        focus.select('.vHoverG')
+                            .select("text")
+                            .text(function () {
+                            if (!self.chartOptions.stacked)
+                                return Utils.formatYAxisNumber(d.val);
+                            var yVal = yScale.invert(calcYPos(d, j));
+                            if (d.val < 0)
+                                yVal += d.val;
+                            return Utils.formatYAxisNumber(yVal);
+                        });
+                        var textElemDimensions = focus.select('.vHoverG').select("text")
+                            .node().getBoundingClientRect();
+                        focus.select(".vHoverG").select("rect")
+                            .attr("x", -(textElemDimensions.width) - 13)
+                            .attr("y", -(textElemDimensions.height / 2) - 3)
+                            .attr("width", textElemDimensions.width + 6)
+                            .attr("height", textElemDimensions.height + 4);
+                        focus.node().parentNode.appendChild(focus.node());
+                    })
+                        .on("mousemove", function (event, d) {
+                        if (self.chartOptions.tooltip) {
+                            var e = valueElementsEntered.nodes();
+                            var i_1 = e.indexOf(event.currentTarget);
+                            var mousePos = d3.pointer(event, g.node());
+                            tooltip.render(self.chartOptions.theme);
+                            tooltip.draw(d, self.chartComponentData, mousePos[0], mousePos[1], self.chartMargins, function (text) {
+                                self.tooltipFormat(self.convertToTimeValueFormat(d), text, TooltipMeasureFormat.SingleValue);
+                            }, null, 20, 20, splitByColors[i_1]);
+                        }
+                        else {
+                            tooltip.hide();
+                        }
+                    })
+                        .on("mouseout", valueElementMouseout)
+                        .on("contextmenu", function (event, d) {
+                        if (self.chartComponentData.displayState[d.aggKey].contextMenuActions &&
+                            self.chartComponentData.displayState[d.aggKey].contextMenuActions.length) {
+                            var mousePosition = d3.pointer(event, targetElement.node());
+                            event.preventDefault();
+                            self.contextMenu.draw(self.chartComponentData, self.renderTarget, self.chartOptions, mousePosition, d.aggKey, d.splitBy, mouseOutValueElementOnContextMenuClick, new Date(self.chartComponentData.timestamp));
+                        }
+                    })
+                        .transition()
+                        .duration(self.TRANSDURATION)
+                        .ease(d3.easeExp)
+                        .attr("y", function (d, i) { return calcYPos(d, i); })
+                        .attr("height", function (d, i) {
+                        if (self.chartOptions.stacked && (splitByXPosMap[d.splitBy] == undefined))
+                            return 0;
+                        return Math.max(calcHeight(d, i), 0);
+                    })
+                        .attr("x", function (d, i) {
+                        if (self.chartOptions.stacked)
+                            return 0;
+                        if (splitByXPosMap[d.splitBy] != undefined)
+                            return splitByXPosMap[d.splitBy];
+                        //if invisible, put it in the empty space where it would be
+                        var splitBys = Object.keys(self.chartComponentData.displayState[aggKey].splitBys);
+                        var prevSplitBy = splitBys[0];
+                        for (var splitByI = 0; splitBys[splitByI] != d.splitBy; splitByI++) {
+                            if (splitByXPosMap[splitBys[splitByI]] != undefined)
+                                prevSplitBy = splitBys[splitByI];
+                        }
+                        if (splitByXPosMap[prevSplitBy] != undefined)
+                            return splitByXPosMap[prevSplitBy] + barWidth;
+                        return 0;
+                    })
+                        .attr("width", function (d, i) {
+                        if (self.chartOptions.stacked)
+                            return spacePerAggregate;
+                        if (splitByXPosMap[d.splitBy] != undefined)
+                            return barWidth;
+                        return 0;
+                    });
+                    valueElementsEntered.merge(valueElements)
+                        .select("line")
+                        .classed("tsi-baseLine", true)
+                        .attr("stroke-width", 2)
+                        .transition()
+                        .duration(self.TRANSDURATION)
+                        .ease(d3.easeExp)
+                        .attr("x1", function (d, i) {
+                        if (self.chartOptions.stacked)
+                            return 0;
+                        if (splitByXPosMap[d.splitBy] != undefined)
+                            return splitByXPosMap[d.splitBy];
+                        return 0;
+                    })
+                        .attr("x2", function (d, i) {
+                        if (self.chartOptions.stacked)
+                            return spacePerAggregate;
+                        if (splitByXPosMap[d.splitBy] != undefined)
+                            return splitByXPosMap[d.splitBy] + barWidth;
+                        return 0;
+                    })
+                        .attr("y1", function (d, i) {
+                        if (!self.chartOptions.stacked) {
+                            return barBase;
+                        }
+                        d.val;
+                        if (self.chartOptions.stacked && (splitByXPosMap[d.splitBy] == undefined))
+                            return calcYPos(d, i);
+                        return calcYPos(d, i) + calcHeight(d, i);
+                    })
+                        .attr("y2", function (d, i) {
+                        if (!self.chartOptions.stacked) {
+                            return barBase;
+                        }
+                        d.val;
+                        if (self.chartOptions.stacked && (splitByXPosMap[d.splitBy] == undefined))
+                            return calcYPos(d, i);
+                        return calcYPos(d, i) + calcHeight(d, i);
+                    });
+                    valueElements.exit().remove();
+                });
+                barGroups.exit().remove();
+                var yAxis = g.selectAll(".yAxis")
+                    .data([yScale]);
+                yAxis.enter()
+                    .append("g")
+                    .attr("class", "yAxis")
+                    .merge(yAxis)
+                    .call(d3.axisLeft(yScale).tickFormat(Utils.formatYAxisNumber).ticks(4));
+                yAxis.exit().remove();
+                baseLine
+                    .attr("x1", 0)
+                    .attr("x2", _this.chartWidth)
+                    .attr("y1", barBase + 1)
+                    .attr("y2", barBase + 1);
+                /******************** Stack/Unstack button ************************/
+                _this.stackedButton.style("opacity", _this.chartOptions.stacked ? 1 : .5)
+                    .classed('tsi-lightTheme', _this.chartOptions.theme == 'light')
+                    .classed('tsi-darkTheme', _this.chartOptions.theme == 'dark');
+                /******************** 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.getSVGWidth(), 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.setControlsPanelWidth();
+            };
+            this.legendObject = new Legend(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());
+            this.draw = draw;
+            window.addEventListener("resize", function () {
+                if (!_this.chartOptions.suppressResizeListener)
+                    _this.draw();
+            });
+        }
+        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.chartComponentData.mergeDataToDisplayStateAndTimeArrays(this.data, this.timestamp, this.aggregateExpressionOptions);
+        this.draw();
+        this.gatedShowGrid();
+        this.legendPostRenderProcess(this.chartOptions.legend, this.svgSelection, true);
+    };
+    return GroupedBarChart;
+}(ChartVisualizationComponent));
+
+export { GroupedBarChart as G };

package/dist/GroupedBarChart.d.ts

@@ -0,0 +1,22 @@
+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 GroupedBarChart extends ChartVisualizationComponent {
+    private contextMenu;
+    private setStateFromData;
+    private timestamp;
+    private isStacked;
+    private stackedButton;
+    chartComponentData: GroupedBarChartData;
+    constructor(renderTarget: Element);
+    GroupedBarChart(): void;
+    render(data: any, options: any, aggregateExpressionOptions: any): void;
+}
+
+export { GroupedBarChart as default };