@carbon/charts-vue 0.32.12 → 0.33.0

package/charts-vue.common.js

@@ -6834,7 +6834,7 @@ var tools_Tools;
     function getDimensions(el) {
         return {
             width: parseFloat(el.style.width.replace("px", "") || el.offsetWidth),
-            height: parseFloat(el.style.height.replace("px", "") || el.offsetHeight),
+            height: parseFloat(el.style.height.replace("px", "") || el.offsetHeight)
         };
     }
     Tools.getDimensions = getDimensions;
@@ -6864,7 +6864,7 @@ var tools_Tools;
                 .split(",");
             return {
                 tx: transforms[0],
-                ty: transforms[1],
+                ty: transforms[1]
             };
         }
         return null;
@@ -6886,7 +6886,7 @@ var tools_Tools;
         var xyString = match.split(",");
         return {
             x: parseFloat(xyString[0]),
-            y: parseFloat(xyString[1]),
+            y: parseFloat(xyString[1])
         };
     }
     Tools.getTranformOffsets = getTranformOffsets;
@@ -6933,19 +6933,21 @@ var tools_Tools;
     }
     Tools.convertValueToPercentage = convertValueToPercentage;
     /**
- * Truncate the labels
- * @export
- * @param {any} fullText
- * @param {any} truncationType
- * @param {any} numCharacter
- * @returns Truncated text
- */
+     * Truncate the labels
+     * @export
+     * @param {any} fullText
+     * @param {any} truncationType
+     * @param {any} numCharacter
+     * @returns Truncated text
+     */
     function truncateLabel(fullText, truncationType, numCharacter) {
         if (numCharacter > fullText.length) {
             return fullText;
         }
         if (truncationType === TruncationTypes.MID_LINE) {
-            return fullText.substr(0, numCharacter / 2) + "..." + fullText.substr(-numCharacter / 2);
+            return (fullText.substr(0, numCharacter / 2) +
+                "..." +
+                fullText.substr(-numCharacter / 2));
         }
         else if (truncationType === TruncationTypes.FRONT_LINE) {
             return "..." + fullText.substr(-numCharacter);
@@ -6970,7 +6972,7 @@ var tools_Tools;
     function arrayDifferences(oldArray, newArray) {
         var difference = {
             missing: [],
-            added: [],
+            added: []
         };
         oldArray.forEach(function (element) {
             if (newArray.indexOf(element) === -1) {
@@ -7057,7 +7059,7 @@ var tools_Tools;
                 y0: verticalCoordinates.x0,
                 y1: verticalCoordinates.x1,
                 x0: verticalCoordinates.y0,
-                x1: verticalCoordinates.y1,
+                x1: verticalCoordinates.y1
             };
         }
         return verticalCoordinates;
@@ -7096,7 +7098,7 @@ var en_US_default = /*#__PURE__*/__webpack_require__.n(en_US);
 var standardTruncationOptions = {
     type: TruncationTypes.END_LINE,
     threshold: 16,
-    numCharacter: 14,
+    numCharacter: 14
 };
 /**
  * Legend options
@@ -7116,9 +7118,9 @@ var legend = {
     },
     checkbox: {
         radius: 6.5,
-        spaceAfter: 4,
+        spaceAfter: 4
     },
-    truncation: standardTruncationOptions,
+    truncation: standardTruncationOptions
 };
 /**
  * Grid options
@@ -7164,19 +7166,19 @@ var barChartTooltip = tools_Tools.merge({}, axisChartTooltip, {
 var configuration_axes = {
     top: {
         includeZero: true,
-        truncation: standardTruncationOptions,
+        truncation: standardTruncationOptions
     },
     bottom: {
         includeZero: true,
-        truncation: standardTruncationOptions,
+        truncation: standardTruncationOptions
     },
     left: {
         includeZero: true,
-        truncation: standardTruncationOptions,
+        truncation: standardTruncationOptions
     },
     right: {
         includeZero: true,
-        truncation: standardTruncationOptions,
+        truncation: standardTruncationOptions
     }
 };
 var timeScale = {
@@ -7209,7 +7211,8 @@ var configuration_chart = {
     },
     data: {
         groupMapsTo: "group",
-        loading: false
+        loading: false,
+        selectedGroups: []
     },
     color: {
         scale: null
@@ -7345,7 +7348,11 @@ var gaugeChart = tools_Tools.merge({}, configuration_chart, {
         numberSpacing: 10,
         deltaFontSize: function (radius) { return radius / 8; },
         valueFontSize: function (radius) { return radius / 2.5; },
-        numberFormatter: function (number) { return (number.toFixed(2) % 1 !== 0) ? number.toFixed(2).toLocaleString() : number.toFixed().toLocaleString(); }
+        numberFormatter: function (number) {
+            return number.toFixed(2) % 1 !== 0
+                ? number.toFixed(2).toLocaleString()
+                : number.toFixed().toLocaleString();
+        }
     }
 });
 /**
@@ -7772,7 +7779,7 @@ var getColor = function (obj, shade) { return obj[shade]; };
     magenta: function (shade) { return getColor(magenta, shade); },
     purple: function (shade) { return getColor(purple, shade); },
     red: function (shade) { return getColor(red, shade); },
-    teal: function (shade) { return getColor(teal, shade); },
+    teal: function (shade) { return getColor(teal, shade); }
 });
 //# sourceMappingURL=../../src/services/colors.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/services/colorPalettes.js
@@ -7794,7 +7801,7 @@ var WHITE = [
     services_colors.teal(50),
     services_colors.cyan(90),
     "#8a3800",
-    services_colors.purple(50),
+    services_colors.purple(50)
 ];
 var DARK = [
     services_colors.purple(60),
@@ -7810,7 +7817,7 @@ var DARK = [
     services_colors.teal(40),
     services_colors.cyan(20),
     "#ba4e00",
-    services_colors.purple(30),
+    services_colors.purple(30)
 ];
 var G10 = WHITE;
 var G90 = DARK;
@@ -12182,11 +12189,10 @@ var model_ChartModel = /** @class */ (function () {
         this.colorScale = {};
         this.services = services;
     }
-    ChartModel.prototype.getDisplayData = function () {
+    ChartModel.prototype.getAllDataFromDomain = function () {
         if (!this.get("data")) {
             return null;
         }
-        var ACTIVE = legend.items.status.ACTIVE;
         var dataGroups = this.getDataGroups();
         // Remove datasets that have been disabled
         var displayData = tools_Tools.clone(this.get("data"));
@@ -12205,12 +12211,26 @@ var model_ChartModel = /** @class */ (function () {
                     else {
                         var _a = axesOptions[axis].domain, start_1 = _a[0], end_1 = _a[1];
                         // Filter out data outside domain
-                        displayData = displayData.filter(function (datum) { return datum[mapsTo_1] >= start_1 && datum[mapsTo_1] <= end_1; });
+                        displayData = displayData.filter(function (datum) {
+                            return datum[mapsTo_1] >= start_1 && datum[mapsTo_1] <= end_1;
+                        });
                     }
                 }
             });
         }
         return displayData.filter(function (datum) {
+            return dataGroups.find(function (group) { return group.name === datum[groupMapsTo]; });
+        });
+    };
+    ChartModel.prototype.getDisplayData = function () {
+        if (!this.get("data")) {
+            return null;
+        }
+        var ACTIVE = legend.items.status.ACTIVE;
+        var dataGroups = this.getDataGroups();
+        var groupMapsTo = this.getOptions().data.groupMapsTo;
+        var allDataFromDomain = this.getAllDataFromDomain();
+        return allDataFromDomain.filter(function (datum) {
             var group = dataGroups.find(function (group) { return group.name === datum[groupMapsTo]; });
             return group.status === ACTIVE;
         });
@@ -12287,7 +12307,6 @@ var model_ChartModel = /** @class */ (function () {
             scaleType === ScaleTypes.LINEAR) {
             stackKeys.sort(function (a, b) { return a - b; });
         }
-        ;
         var dataGroupNames = this.getDataGroupNames();
         return stackKeys.map(function (key) {
             var correspondingValues = { sharedStackKey: key };
@@ -12416,6 +12435,19 @@ var model_ChartModel = /** @class */ (function () {
                     group.name === changedLabel ? ACTIVE : DISABLED;
             });
         }
+        // Updates selected groups
+        var updatedActiveItems = dataGroups.filter(function (group) { return group.status === ACTIVE; });
+        var options = this.getOptions();
+        var hasUpdatedDeactivatedItems = dataGroups.some(function (group) { return group.status === DISABLED; });
+        // If there are deactivated items, map the item name into selected groups
+        if (hasUpdatedDeactivatedItems) {
+            options.data.selectedGroups = updatedActiveItems.map(function (activeItem) { return activeItem.name; });
+        }
+        else {
+            // If every item is active, clear array
+            options.data.selectedGroups = [];
+        }
+        ;
         // dispatch legend filtering event with the status of all the dataLabels
         this.services.events.dispatchEvent(Events.Legend.ITEMS_UPDATE, {
             dataGroups: dataGroups
@@ -12543,11 +12575,27 @@ var model_ChartModel = /** @class */ (function () {
     };
     ChartModel.prototype.generateDataGroups = function (data) {
         var groupMapsTo = this.getOptions().data.groupMapsTo;
-        var ACTIVE = legend.items.status.ACTIVE;
+        var _a = legend.items.status, ACTIVE = _a.ACTIVE, DISABLED = _a.DISABLED;
+        var options = this.getOptions();
         var uniqueDataGroups = src_map(data, function (datum) { return datum[groupMapsTo]; }).keys();
+        // check if selectedGroups can be applied to chart with current data groups
+        if (options.data.selectedGroups.length) {
+            var hasAllSelectedGroups = options.data.selectedGroups
+                .every(function (groupName) { return uniqueDataGroups.includes(groupName); });
+            if (!hasAllSelectedGroups) {
+                options.data.selectedGroups = [];
+            }
+            ;
+        }
+        // Get group status based on items in selected groups
+        var getStatus = function (groupName) {
+            return !options.data.selectedGroups.length || options.data.selectedGroups.includes(groupName)
+                ? ACTIVE
+                : DISABLED;
+        };
         return uniqueDataGroups.map(function (groupName) { return ({
             name: groupName,
-            status: ACTIVE
+            status: getStatus(groupName)
         }); });
     };
     /*
@@ -13678,7 +13726,7 @@ var dom_utils_DOMUtils = /** @class */ (function (_super) {
         }
         var finalDimensions = {
             width: 0,
-            height: 0,
+            height: 0
         };
         var validateAndSetDimensions = function (dimensions) {
             if (dimensions) {
@@ -13697,7 +13745,7 @@ var dom_utils_DOMUtils = /** @class */ (function (_super) {
         };
         var attrDimensions = {
             width: svgSelector.attr("width"),
-            height: svgSelector.attr("height"),
+            height: svgSelector.attr("height")
         };
         var bbox, bboxDimensions, boundingRect, boundingRectDimensions;
         // In many versions of Firefox
@@ -13706,7 +13754,7 @@ var dom_utils_DOMUtils = /** @class */ (function (_super) {
             bbox = svgSelector.node().getBBox();
             bboxDimensions = {
                 width: bbox.width,
-                height: bbox.height,
+                height: bbox.height
             };
         }
         catch (e) { }
@@ -13714,13 +13762,13 @@ var dom_utils_DOMUtils = /** @class */ (function (_super) {
             boundingRect = svgSelector.node().getBoundingClientRect();
             boundingRectDimensions = {
                 width: boundingRect.width,
-                height: boundingRect.height,
+                height: boundingRect.height
             };
         }
         catch (e) { }
         var clientDimensions = {
             width: svgSelector.node().clientWidth,
-            height: svgSelector.node().clientHeight,
+            height: svgSelector.node().clientHeight
         };
         // If both attribute values are numbers
         // And not percentages or NaN
@@ -13753,7 +13801,7 @@ var dom_utils_DOMUtils = /** @class */ (function (_super) {
         try {
             var nativeDimensions = {
                 width: tools_Tools.getProperty(svgSelector.node(), "width", "baseVal", "value"),
-                height: tools_Tools.getProperty(svgSelector.node(), "height", "baseVal", "value"),
+                height: tools_Tools.getProperty(svgSelector.node(), "height", "baseVal", "value")
             };
             validateAndSetDimensions(nativeDimensions);
         }
@@ -13908,7 +13956,7 @@ var events_Events = /** @class */ (function (_super) {
         var newEvent;
         if (eventDetail) {
             newEvent = new CustomEvent(eventType, {
-                detail: eventDetail,
+                detail: eventDetail
             });
         }
         else {
@@ -16451,13 +16499,13 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
             top: null,
             right: null,
             bottom: null,
-            left: null,
+            left: null
         };
         _this.scales = {
             top: null,
             right: null,
             bottom: null,
-            left: null,
+            left: null
         };
         return _this;
     }
@@ -16517,7 +16565,7 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
     CartesianScales.prototype.getMainXAxisPosition = function () {
         var possibleXAxisPositions = [
             AxisPositions.BOTTOM,
-            AxisPositions.TOP,
+            AxisPositions.TOP
         ];
         return [this.domainAxisPosition, this.rangeAxisPosition].find(function (position) { return possibleXAxisPositions.indexOf(position) > -1; });
     };
@@ -16525,7 +16573,7 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
     CartesianScales.prototype.getMainYAxisPosition = function () {
         var possibleYAxisPositions = [
             AxisPositions.LEFT,
-            AxisPositions.RIGHT,
+            AxisPositions.RIGHT
         ];
         return [this.domainAxisPosition, this.rangeAxisPosition].find(function (position) { return possibleYAxisPositions.indexOf(position) > -1; });
     };
@@ -16625,7 +16673,7 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
         var mainHorizontalScaleType = mainHorizontalAxisOptions.scaleType || ScaleTypes.LINEAR;
         var result = {
             domainAxisPosition: null,
-            rangeAxisPosition: null,
+            rangeAxisPosition: null
         };
         if (mainHorizontalScaleType === ScaleTypes.LABELS ||
             mainHorizontalScaleType === ScaleTypes.TIME) {
@@ -16731,7 +16779,7 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
         }
         return {
             threshold: highestThreshold,
-            scaleValue: domainScale(highestThreshold.value),
+            scaleValue: domainScale(highestThreshold.value)
         };
     };
     CartesianScales.prototype.getHighestRangeThreshold = function () {
@@ -16746,7 +16794,7 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
         var highestThreshold = thresholds.sort(function (a, b) { return b.value - a.value; })[0];
         return {
             threshold: highestThreshold,
-            scaleValue: rangeScale(highestThreshold.value),
+            scaleValue: rangeScale(highestThreshold.value)
         };
     };
     return CartesianScales;
@@ -16758,49 +16806,49 @@ function addSpacingToTimeDomain(domain, spaceToAddToEdges) {
     if (differenceInYears(endDate, startDate) > 1) {
         return [
             subYears(startDate, spaceToAddToEdges),
-            addYears(endDate, spaceToAddToEdges),
+            addYears(endDate, spaceToAddToEdges)
         ];
     }
     if (differenceInMonths(endDate, startDate) > 1) {
         return [
             subMonths(startDate, spaceToAddToEdges),
-            addMonths(endDate, spaceToAddToEdges),
+            addMonths(endDate, spaceToAddToEdges)
         ];
     }
     if (differenceInDays(endDate, startDate) > 1) {
         return [
             subDays(startDate, spaceToAddToEdges),
-            addDays(endDate, spaceToAddToEdges),
+            addDays(endDate, spaceToAddToEdges)
         ];
     }
     if (differenceInHours(endDate, startDate) > 1) {
         return [
             subHours(startDate, spaceToAddToEdges),
-            addHours(endDate, spaceToAddToEdges),
+            addHours(endDate, spaceToAddToEdges)
         ];
     }
     if (differenceInMinutes(endDate, startDate) > 30) {
         return [
             subMinutes(startDate, spaceToAddToEdges * 30),
-            addMinutes(endDate, spaceToAddToEdges * 30),
+            addMinutes(endDate, spaceToAddToEdges * 30)
         ];
     }
     if (differenceInMinutes(endDate, startDate) > 1) {
         return [
             subMinutes(startDate, spaceToAddToEdges),
-            addMinutes(endDate, spaceToAddToEdges),
+            addMinutes(endDate, spaceToAddToEdges)
         ];
     }
     if (differenceInSeconds(endDate, startDate) > 15) {
         return [
             subSeconds(startDate, spaceToAddToEdges * 15),
-            addSeconds(endDate, spaceToAddToEdges * 15),
+            addSeconds(endDate, spaceToAddToEdges * 15)
         ];
     }
     if (differenceInSeconds(endDate, startDate) > 1) {
         return [
             subSeconds(startDate, spaceToAddToEdges),
-            addSeconds(endDate, spaceToAddToEdges),
+            addSeconds(endDate, spaceToAddToEdges)
         ];
     }
     return [startDate, endDate];
@@ -17781,7 +17829,7 @@ var curves_Curves = /** @class */ (function (_super) {
             curveNatural: natural,
             curveStep: curve_step,
             curveStepAfter: stepAfter,
-            curveStepBefore: stepBefore,
+            curveStepBefore: stepBefore
         };
         return _this;
     }
@@ -17930,7 +17978,10 @@ var legend_Legend = /** @class */ (function (_super) {
         var addedLegendItems = legendItems
             .enter()
             .append("g")
-            .classed("legend-item", true);
+            .classed("legend-item", true)
+            .classed("active", function (d, i) {
+            return d.status === options.legend.items.status.ACTIVE;
+        });
         // Configs
         var checkboxRadius = options.legend.checkbox.radius;
         // Truncation
@@ -17959,8 +18010,7 @@ var legend_Legend = /** @class */ (function (_super) {
             .merge(legendItems.select("text"));
         // truncate the legend label if it's too long
         if (truncationType !== TruncationTypes.NONE) {
-            addedLegendItemsText
-                .html(function (d) {
+            addedLegendItemsText.html(function (d) {
                 if (d.name.length > truncationThreshold) {
                     return tools_Tools.truncateLabel(d.name, truncationType, truncationNumCharacter);
                 }
@@ -17970,8 +18020,7 @@ var legend_Legend = /** @class */ (function (_super) {
             });
         }
         else {
-            addedLegendItemsText
-                .html(function (d) { return d.name; });
+            addedLegendItemsText.html(function (d) { return d.name; });
         }
         this.breakItemsIntoLines(addedLegendItems);
         // Remove old elements as needed.
@@ -18051,11 +18100,19 @@ var legend_Legend = /** @class */ (function (_super) {
             legendItem
                 .select("text")
                 .attr("x", startingPoint + spaceNeededForCheckbox)
-                .attr("y", yOffset + yPosition + 2);
+                .attr("y", yOffset + yPosition + 3);
             lastYPosition = yPosition;
+            // Test if legendItems are placed in the correct direction
+            var testHorizontal = (!legendOrientation ||
+                legendOrientation === LegendOrientations.HORIZONTAL) &&
+                legendItem.select("rect.checkbox").attr("y") === '0';
+            var testVertical = legendOrientation === LegendOrientations.VERTICAL &&
+                legendItem.select("rect.checkbox").attr("x") === '0';
+            var hasCorrectLegendDirection = testHorizontal || testVertical;
             // Render checkbox check icon
             if (hasDeactivatedItems &&
-                legendItem.select("g.check").empty()) {
+                legendItem.select("g.check").empty() &&
+                hasCorrectLegendDirection) {
                 legendItem.append("g").classed("check", true).html("\n\t\t\t\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 32 32\" aria-hidden=\"true\"\n\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\">\n\t\t\t\t\t\t\t\t<path d=\"M13 21.2l-7.1-7.1-1.4 1.4 7.1 7.1L13 24 27.1 9.9l-1.4-1.5z\"></path>\n\t\t\t\t\t\t\t\t<title>Checkmark</title>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t");
                 legendItem
                     .select("g.check svg")
@@ -18080,7 +18137,7 @@ var legend_Legend = /** @class */ (function (_super) {
         svg.selectAll("g.legend-item")
             .on("mouseover", function () {
             self.services.events.dispatchEvent(Events.Legend.ITEM_HOVER, {
-                hoveredElement: src_select(this),
+                hoveredElement: src_select(this)
             });
             // Configs
             var checkboxRadius = options.legend.checkbox.radius;
@@ -18098,7 +18155,7 @@ var legend_Legend = /** @class */ (function (_super) {
         })
             .on("click", function () {
             self.services.events.dispatchEvent(Events.Legend.ITEM_CLICK, {
-                clickedElement: src_select(this),
+                clickedElement: src_select(this)
             });
             var clickedItem = src_select(this);
             var clickedItemData = clickedItem.datum();
@@ -18110,7 +18167,7 @@ var legend_Legend = /** @class */ (function (_super) {
             if (hoveredItemData.name.length > truncationThreshold) {
                 self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                     hoveredElement: hoveredItem,
-                    type: TooltipTypes.LEGEND,
+                    type: TooltipTypes.LEGEND
                 });
             }
         })
@@ -18119,7 +18176,7 @@ var legend_Legend = /** @class */ (function (_super) {
             hoveredItem.select("rect.hover-stroke").remove();
             self.services.events.dispatchEvent(Events.Tooltip.HIDE);
             self.services.events.dispatchEvent(Events.Legend.ITEM_MOUSEOUT, {
-                hoveredElement: hoveredItem,
+                hoveredElement: hoveredItem
             });
         });
     };
@@ -20693,7 +20750,7 @@ var TIME_INTERVALS = [
     ["daily", 24 * 60 * 60 * 1000],
     ["monthly", 30 * 24 * 60 * 60 * 1000],
     ["quarterly", 3 * 30 * 24 * 60 * 60 * 1000],
-    ["yearly", 12 * 30 * 24 * 60 * 60 * 1000],
+    ["yearly", 12 * 30 * 24 * 60 * 60 * 1000]
 ];
 // Return true if the tick is a primary tick, false otherwise
 function isTickPrimary(tick, i, interval, showDayName) {
@@ -20763,7 +20820,7 @@ function getTimeformats(timestamp) {
         d: date.getDate(),
         H: date.getHours(),
         m: date.getMinutes(),
-        s: date.getSeconds(),
+        s: date.getSeconds() // seconds: 0-59
     };
 }
 // Find the differences between consecutive numbers in an array
@@ -20919,7 +20976,7 @@ var threshold_Threshold = /** @class */ (function (_super) {
         if (scaleType === ScaleTypes.TIME) {
             var isVertical = [
                 AxisPositions.LEFT,
-                AxisPositions.RIGHT,
+                AxisPositions.RIGHT
             ].includes(axisPosition);
             var mainXScale = this.services.cartesianScales.getMainXScale();
             var mainYScale = this.services.cartesianScales.getMainYScale();
@@ -20950,20 +21007,20 @@ var threshold_Threshold = /** @class */ (function (_super) {
         // Find out whether threshold label should be shown on the left or right side
         var bestPlacementOption = this.positionService.findBestPlacementAt({
             left: mouseRelativePos[0],
-            top: mouseRelativePos[1],
+            top: mouseRelativePos[1]
         }, target, [
             PLACEMENTS.RIGHT,
             PLACEMENTS.LEFT,
             PLACEMENTS.TOP,
-            PLACEMENTS.BOTTOM,
+            PLACEMENTS.BOTTOM
         ], function () { return ({
             width: holder.offsetWidth,
-            height: holder.offsetHeight,
+            height: holder.offsetHeight
         }); });
         // Get coordinates to where label should be positioned
         var pos = this.positionService.findPositionAt({
             left: mouseRelativePos[0],
-            top: mouseRelativePos[1],
+            top: mouseRelativePos[1]
         }, target, bestPlacementOption);
         this.positionService.setElement(target, pos);
     };
@@ -20974,13 +21031,13 @@ var threshold_Threshold = /** @class */ (function (_super) {
             .on("mouseover mousemove", function () {
             self.threshold.classed("active", true);
             self.services.events.dispatchEvent(Events.Threshold.SHOW, {
-                hoveredElement: src_select(self.threshold),
+                hoveredElement: src_select(self.threshold)
             });
         })
             .on("mouseout", function () {
             self.threshold.classed("active", false);
             self.services.events.dispatchEvent(Events.Threshold.HIDE, {
-                hoveredElement: src_select(self.threshold),
+                hoveredElement: src_select(self.threshold)
             });
         });
     };
@@ -21048,12 +21105,12 @@ var title_Title = /** @class */ (function (_super) {
                 .on("mouseenter", function () {
                 self_1.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                     hoveredElement: title,
-                    type: TooltipTypes.TITLE,
+                    type: TooltipTypes.TITLE
                 });
             })
                 .on("mouseout", function () {
                 self_1.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-                    hoveredElement: title,
+                    hoveredElement: title
                 });
             });
         }
@@ -21140,8 +21197,8 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
                 tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "datapoint", "enabled")) ||
                 (e.detail.type === TooltipTypes.GRIDLINE &&
                     tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "gridline", "enabled")) ||
-                (e.detail.type === TooltipTypes.LEGEND) ||
-                (e.detail.type === TooltipTypes.AXISLABEL)) {
+                e.detail.type === TooltipTypes.LEGEND ||
+                e.detail.type === TooltipTypes.AXISLABEL) {
                 var data = src_select(on_event.target).datum();
                 // Generate default tooltip
                 var defaultHTML = void 0;
@@ -21245,7 +21302,7 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
             left: elementPosition.left -
                 holderPosition.left +
                 elementPosition.width / 2,
-            top: elementPosition.top - holderPosition.top - verticalOffset,
+            top: elementPosition.top - holderPosition.top - verticalOffset
         };
         return { placement: TooltipPosition.BOTTOM, position: tooltipPos };
     };
@@ -21266,15 +21323,15 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
             // Find out whether tooltip should be shown on the left or right side
             var bestPlacementOption = this.positionService.findBestPlacementAt({
                 left: mouseRelativePos[0],
-                top: mouseRelativePos[1],
+                top: mouseRelativePos[1]
             }, target, [
                 PLACEMENTS.RIGHT,
                 PLACEMENTS.LEFT,
                 PLACEMENTS.TOP,
-                PLACEMENTS.BOTTOM,
+                PLACEMENTS.BOTTOM
             ], function () { return ({
                 width: holder.offsetWidth,
-                height: holder.offsetHeight,
+                height: holder.offsetHeight
             }); });
             var horizontalOffset = this.model.getOptions().tooltip.datapoint.horizontalOffset;
             if (bestPlacementOption === PLACEMENTS.LEFT) {
@@ -21283,7 +21340,7 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
             // Get coordinates to where tooltip should be positioned
             pos = this.positionService.findPositionAt({
                 left: mouseRelativePos[0] + horizontalOffset,
-                top: mouseRelativePos[1],
+                top: mouseRelativePos[1]
             }, target, bestPlacementOption);
         }
         this.positionService.setElement(target, pos);
@@ -21335,8 +21392,8 @@ var tooltip_bar_TooltipBar = /** @class */ (function (_super) {
                 tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "datapoint", "enabled")) ||
                 (e.detail.type === TooltipTypes.GRIDLINE &&
                     tools_Tools.getProperty(_this.model.getOptions(), "tooltip", "gridline", "enabled")) ||
-                (e.detail.type === TooltipTypes.LEGEND) ||
-                (e.detail.type === TooltipTypes.AXISLABEL)) {
+                e.detail.type === TooltipTypes.LEGEND ||
+                e.detail.type === TooltipTypes.AXISLABEL) {
                 var data = e.detail.hoveredElement.datum();
                 var hoveredElement = e.detail.hoveredElement.node();
                 var defaultHTML = void 0;
@@ -21364,7 +21421,8 @@ var tooltip_bar_TooltipBar = /** @class */ (function (_super) {
                     // default tooltip
                     tooltipTextContainer.html(defaultHTML);
                 }
-                if ((e.detail.type === TooltipTypes.LEGEND) || (e.detail.type === TooltipTypes.AXISLABEL)) {
+                if (e.detail.type === TooltipTypes.LEGEND ||
+                    e.detail.type === TooltipTypes.AXISLABEL) {
                     _this.positionTooltip();
                 }
                 else {
@@ -21415,7 +21473,7 @@ var tooltip_bar_TooltipBar = /** @class */ (function (_super) {
                 left: barPosition.left -
                     holderPosition.left +
                     barPosition.width / 2,
-                top: barPosition.bottom - holderPosition.top + verticalOffset,
+                top: barPosition.bottom - holderPosition.top + verticalOffset
             };
             return { placement: TooltipPosition.BOTTOM, position: tooltipPos };
         }
@@ -21425,7 +21483,7 @@ var tooltip_bar_TooltipBar = /** @class */ (function (_super) {
                 left: barPosition.left -
                     holderPosition.left +
                     barPosition.width / 2,
-                top: barPosition.top - holderPosition.top - verticalOffset,
+                top: barPosition.top - holderPosition.top - verticalOffset
             };
             return { placement: TooltipPosition.TOP, position: tooltipPos };
         }
@@ -22113,9 +22171,7 @@ var area_stacked_StackedArea = /** @class */ (function (_super) {
         if (!isTimeSeries) {
             return;
         }
-        var percentage = Object.keys(options.axes).some(function (axis) {
-            return options.axes[axis].percentage;
-        });
+        var percentage = Object.keys(options.axes).some(function (axis) { return options.axes[axis].percentage; });
         var stackedData = this.model.getStackedData({ percentage: percentage });
         var areas = svg
             .selectAll("path.area")
@@ -22299,25 +22355,25 @@ var bar_simple_SimpleBar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOVER, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 hoveredElement: hoveredElement,
-                type: TooltipTypes.DATAPOINT,
+                type: TooltipTypes.DATAPOINT
             });
         })
             .on("mousemove", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEMOVE, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("click", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_CLICK, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mouseout", function (datum) {
@@ -22331,11 +22387,11 @@ var bar_simple_SimpleBar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOUT, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Hide tooltip
             self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-                hoveredElement: hoveredElement,
+                hoveredElement: hoveredElement
             });
         });
     };
@@ -22505,26 +22561,26 @@ var bar_grouped_GroupedBar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOVER, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Show tooltip
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 hoveredElement: hoveredElement,
-                type: TooltipTypes.DATAPOINT,
+                type: TooltipTypes.DATAPOINT
             });
         })
             .on("mousemove", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEMOVE, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("click", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_CLICK, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mouseout", function (datum) {
@@ -22539,11 +22595,11 @@ var bar_grouped_GroupedBar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOUT, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Hide tooltip
             self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-                hoveredElement: hoveredElement,
+                hoveredElement: hoveredElement
             });
         });
     };
@@ -22754,7 +22810,7 @@ var bar_stacked_StackedBar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOVER, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
         })
             .on("mousemove", function (datum) {
@@ -22781,14 +22837,14 @@ var bar_stacked_StackedBar = /** @class */ (function (_super) {
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 hoveredElement: hoveredElement,
                 data: matchingDataPoint,
-                type: TooltipTypes.DATAPOINT,
+                type: TooltipTypes.DATAPOINT
             });
         })
             .on("click", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_CLICK, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mouseout", function (datum) {
@@ -22802,11 +22858,11 @@ var bar_stacked_StackedBar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOUT, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Hide tooltip
             self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-                hoveredElement: hoveredElement,
+                hoveredElement: hoveredElement
             });
         });
     };
@@ -22905,9 +22961,7 @@ var scatter_Scatter = /** @class */ (function (_super) {
         var stacked = this.configs.stacked;
         var scatterData;
         if (stacked) {
-            var percentage = Object.keys(options.axes).some(function (axis) {
-                return options.axes[axis].percentage;
-            });
+            var percentage = Object.keys(options.axes).some(function (axis) { return options.axes[axis].percentage; });
             scatterData = this.model.getStackedData({ percentage: percentage });
         }
         else {
@@ -23037,7 +23091,7 @@ var scatter_Scatter = /** @class */ (function (_super) {
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 hoveredElement: hoveredElement,
                 multidata: overlappingData.length > 1 ? overlappingData : null,
-                type: TooltipTypes.DATAPOINT,
+                type: TooltipTypes.DATAPOINT
             });
             var eventNameToDispatch = on_event.type === "mouseover"
                 ? Events.Scatter.SCATTER_MOUSEOVER
@@ -23045,14 +23099,14 @@ var scatter_Scatter = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(eventNameToDispatch, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
         })
             .on("click", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Scatter.SCATTER_CLICK, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mouseout", function (datum) {
@@ -23064,11 +23118,11 @@ var scatter_Scatter = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Scatter.SCATTER_MOUSEOUT, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Hide tooltip
             self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-                hoveredElement: hoveredElement,
+                hoveredElement: hoveredElement
             });
         });
     };
@@ -23246,9 +23300,7 @@ var line_Line = /** @class */ (function (_super) {
         });
         var data = [];
         if (this.configs.stacked) {
-            var percentage = Object.keys(options.axes).some(function (axis) {
-                return options.axes[axis].percentage;
-            });
+            var percentage = Object.keys(options.axes).some(function (axis) { return options.axes[axis].percentage; });
             var groupMapsTo_1 = options.data.groupMapsTo;
             var stackedData = this.model.getStackedData({ percentage: percentage });
             var domainIdentifier_1 = this.services.cartesianScales.getDomainIdentifier();
@@ -23355,9 +23407,7 @@ var scatter_stacked_StackedScatter = /** @class */ (function (_super) {
         var groupMapsTo = options.data.groupMapsTo;
         var domainIdentifier = this.services.cartesianScales.getDomainIdentifier();
         var rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();
-        var percentage = Object.keys(options.axes).some(function (axis) {
-            return options.axes[axis].percentage;
-        });
+        var percentage = Object.keys(options.axes).some(function (axis) { return options.axes[axis].percentage; });
         var stackedData = this.model.getStackedData({ percentage: percentage });
         // Update data on dot groups
         var circleGroups = svg
@@ -23982,12 +24032,12 @@ var pie_Pie = /** @class */ (function (_super) {
             if (direction === CalloutDirections.RIGHT) {
                 d.startPos = {
                     x: xPosition,
-                    y: yPosition + d.textOffsetY,
+                    y: yPosition + d.textOffsetY
                 };
                 // end position for the callout line
                 d.endPos = {
                     x: xPosition + options.pie.callout.offsetX,
-                    y: yPosition - options.pie.callout.offsetY + d.textOffsetY,
+                    y: yPosition - options.pie.callout.offsetY + d.textOffsetY
                 };
                 // the intersection point of the vertical and horizontal line
                 d.intersectPointX =
@@ -23997,12 +24047,12 @@ var pie_Pie = /** @class */ (function (_super) {
                 // start position for the callout line
                 d.startPos = {
                     x: xPosition,
-                    y: yPosition + d.textOffsetY,
+                    y: yPosition + d.textOffsetY
                 };
                 // end position for the callout line should be bottom aligned to the title
                 d.endPos = {
                     x: xPosition - options.pie.callout.offsetX,
-                    y: yPosition - options.pie.callout.offsetY + d.textOffsetY,
+                    y: yPosition - options.pie.callout.offsetY + d.textOffsetY
                 };
                 // the intersection point of the vertical and horizontal line
                 d.intersectPointX =
@@ -24048,7 +24098,7 @@ var pie_Pie = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Pie.SLICE_MOUSEOVER, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mousemove", function (datum) {
@@ -24060,19 +24110,19 @@ var pie_Pie = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Pie.SLICE_MOUSEMOVE, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Show tooltip
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 hoveredElement: hoveredElement,
-                type: TooltipTypes.DATAPOINT,
+                type: TooltipTypes.DATAPOINT
             });
         })
             .on("click", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Pie.SLICE_CLICK, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mouseout", function (datum) {
@@ -24084,11 +24134,11 @@ var pie_Pie = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Pie.SLICE_MOUSEOUT, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Hide tooltip
             self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-                hoveredElement: hoveredElement,
+                hoveredElement: hoveredElement
             });
         });
     };
@@ -24096,7 +24146,7 @@ var pie_Pie = /** @class */ (function (_super) {
     Pie.prototype.computeRadius = function () {
         var options = this.model.getOptions();
         var _a = dom_utils_DOMUtils.getSVGElementSize(this.parent, {
-            useAttrs: true,
+            useAttrs: true
         }), width = _a.width, height = _a.height;
         var radius = Math.min(width, height) / 2;
         return radius + options.pie.radiusOffset;
@@ -24302,15 +24352,16 @@ var gauge_Gauge = /** @class */ (function (_super) {
             ? tools_Tools.getProperty(options, "gauge", "deltaFontSize")
             : function () { return 0; };
         // use numberFormatter here only if there is a delta supplied
-        var numberFormatter = delta ? tools_Tools.getProperty(options, "gauge", "numberFormatter") : function () { return null; };
+        var numberFormatter = delta
+            ? tools_Tools.getProperty(options, "gauge", "numberFormatter")
+            : function () { return null; };
         var arrowSize = tools_Tools.getProperty(options, "gauge", "deltaArrow", "size");
         var numberSpacing = tools_Tools.getProperty(options, "gauge", "numberSpacing");
         var numbersGroup = dom_utils_DOMUtils.appendOrSelect(svg, "g.gauge-numbers");
         // Add the smaller number of the delta
         var deltaGroup = dom_utils_DOMUtils.appendOrSelect(numbersGroup, "g.gauge-delta").attr("transform", "translate(0, " + (deltaFontSize(radius) + numberSpacing) + ")");
         var deltaNumber = dom_utils_DOMUtils.appendOrSelect(deltaGroup, "text.gauge-delta-number");
-        deltaNumber
-            .data(delta === null ? [] : [delta]);
+        deltaNumber.data(delta === null ? [] : [delta]);
         deltaNumber
             .enter()
             .append("text")
@@ -24542,7 +24593,7 @@ var skeleton_Skeleton = /** @class */ (function (_super) {
         var svg = this.parent;
         var parent = svg.node().parentNode;
         var _a = dom_utils_DOMUtils.getSVGElementSize(parent, {
-            useAttrs: true,
+            useAttrs: true
         }), width = _a.width, height = _a.height;
         svg.attr("width", width).attr("height", height);
         var isDataEmpty = this.model.isDataEmpty();
@@ -24621,7 +24672,7 @@ var skeleton_Skeleton = /** @class */ (function (_super) {
         var svg = this.parent;
         var parent = svg.node().parentNode;
         var _a = dom_utils_DOMUtils.getSVGElementSize(parent, {
-            useAttrs: true,
+            useAttrs: true
         }), width = _a.width, height = _a.height;
         this.backdrop = dom_utils_DOMUtils.appendOrSelect(svg, "svg.chart-skeleton.DAII")
             .attr("width", width)
@@ -24728,7 +24779,7 @@ var skeleton_Skeleton = /** @class */ (function (_super) {
         var stopShimmerClass = "stop-shimmer";
         var container = this.parent.select(".chart-skeleton");
         var width = dom_utils_DOMUtils.getSVGElementSize(this.parent, {
-            useAttrs: true,
+            useAttrs: true
         }).width;
         var startPoint = 0;
         var endPoint = width;
@@ -25329,10 +25380,10 @@ var layout_LayoutComponent = /** @class */ (function (_super) {
         // Get parent SVG to render inside of
         var svg = this.parent;
         var _a = dom_utils_DOMUtils.getSVGElementSize(svg, {
-            useAttrs: true,
+            useAttrs: true
         }), width = _a.width, height = _a.height;
         var root = hierarchy({
-            children: this.children,
+            children: this.children
         }).sum(function (d) { return d.size; });
         // Grab the correct treemap tile function based on direction
         var tileType = this.configs.direction === LayoutDirection.ROW ||
@@ -25378,6 +25429,12 @@ var layout_LayoutComponent = /** @class */ (function (_super) {
             // Calculate preffered children sizes after internal rendering
             var growth = tools_Tools.getProperty(d, "data", "growth", "x");
             var matchingSVGDimensions = dom_utils_DOMUtils.getSVGElementSize(src_select(this), { useBBox: true });
+            if (d.data.id === "legend") {
+                var svgSize = dom_utils_DOMUtils.getSVGElementSize(src_select(this), { useAttrs: true });
+                if (svgSize.height < 40) {
+                    matchingSVGDimensions.height = svgSize.height;
+                }
+            }
             if (growth === LayoutGrowth.PREFERRED) {
                 var matchingSVGWidth = horizontal
                     ? matchingSVGDimensions.width
@@ -25401,7 +25458,7 @@ var layout_LayoutComponent = /** @class */ (function (_super) {
         // Pass children data to the hierarchy layout
         // And calculate sum of sizes
         root = hierarchy({
-            children: this.children,
+            children: this.children
         }).sum(function (d) { return d.size; });
         // Compute the position of all elements within the layout
         src_treemap().tile(tileType).size([width, height]).padding(0)(root);
@@ -25688,7 +25745,7 @@ var axis_Axis = /** @class */ (function (_super) {
         var timeScaleOptions = tools_Tools.getProperty(options, "timeScale");
         var svg = this.getContainerSVG();
         var _a = dom_utils_DOMUtils.getSVGElementSize(this.parent, {
-            useAttrs: true,
+            useAttrs: true
         }), width = _a.width, height = _a.height;
         var startPosition, endPosition;
         if (axisPosition === AxisPositions.BOTTOM ||
@@ -25746,7 +25803,7 @@ var axis_Axis = /** @class */ (function (_super) {
         var fakeTick = dom_utils_DOMUtils.appendOrSelect(invisibleAxisRef, "g.tick");
         var fakeTickText = dom_utils_DOMUtils.appendOrSelect(fakeTick, "text").text("0");
         var tickHeight = dom_utils_DOMUtils.getSVGElementSize(fakeTickText.node(), {
-            useBBox: true,
+            useBBox: true
         }).height;
         fakeTick.remove();
         var isTimeScaleType = this.scaleType === ScaleTypes.TIME ||
@@ -25777,13 +25834,15 @@ var axis_Axis = /** @class */ (function (_super) {
                     axis.tickValues([]);
                 }
                 else {
-                    var tickValues = scale
-                        .nice(numberOfTicks)
-                        .ticks(numberOfTicks);
+                    var addSpaceOnEdges = tools_Tools.getProperty(options, "timeScale", "addSpaceOnEdges");
+                    var tickValues = void 0;
+                    if (addSpaceOnEdges) {
+                        tickValues = scale.nice(numberOfTicks);
+                    }
+                    tickValues = scale.ticks(numberOfTicks);
                     // Remove labels on the edges
                     // If there are more than 2 labels to show
-                    if (tools_Tools.getProperty(options, "timeScale", "addSpaceOnEdges") &&
-                        tickValues.length > 2) {
+                    if (addSpaceOnEdges && tickValues.length > 2) {
                         tickValues.splice(tickValues.length - 1, 1);
                         tickValues.splice(0, 1);
                     }
@@ -25863,7 +25922,7 @@ var axis_Axis = /** @class */ (function (_super) {
                     break;
                 case AxisPositions.TOP:
                     var titleHeight = dom_utils_DOMUtils.getSVGElementSize(axisTitleRef, {
-                        useBBox: true,
+                        useBBox: true
                     }).height;
                     axisTitleRef
                         .attr("transform", "translate(" + (this.margins.left / 2 + scale.range()[1] / 2) + ", " + titleHeight / 2 + ")")
@@ -25953,14 +26012,15 @@ var axis_Axis = /** @class */ (function (_super) {
         }
         // truncate the label if it's too long
         // only applies to discrete type
-        if (truncationType !== TruncationTypes.NONE && axisScaleType === ScaleTypes.LABELS) {
+        if (truncationType !== TruncationTypes.NONE &&
+            axisScaleType === ScaleTypes.LABELS) {
             var dataGroups = this.model.getDataValuesGroupedByKeys();
             if (dataGroups.length > 0) {
                 var activeDataGroups = dataGroups.map(function (d) { return d.sharedStackKey; });
-                var tick_html = svg.select("g.axis." + axisPosition + " g.ticks g.tick").html();
-                container
-                    .selectAll("g.ticks g.tick")
-                    .html(tick_html);
+                var tick_html = svg
+                    .select("g.axis." + axisPosition + " g.ticks g.tick")
+                    .html();
+                container.selectAll("g.ticks g.tick").html(tick_html);
                 container
                     .selectAll("g.tick text")
                     .data(activeDataGroups)
@@ -25986,9 +26046,7 @@ var axis_Axis = /** @class */ (function (_super) {
                 container
                     .selectAll("g.ticks")
                     .html(this.getInvisibleAxisRef().html());
-                container
-                    .selectAll("g.tick text")
-                    .data(activeDataGroups);
+                container.selectAll("g.tick text").data(activeDataGroups);
             }
         }
         // Add event listeners to elements drawn
@@ -26011,19 +26069,20 @@ var axis_Axis = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEOVER, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mousemove", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEMOVE, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
-            if (axisScaleType === ScaleTypes.LABELS && datum.length > truncationThreshold) {
+            if (axisScaleType === ScaleTypes.LABELS &&
+                datum.length > truncationThreshold) {
                 self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                     hoveredElement: src_select(this),
-                    type: TooltipTypes.AXISLABEL,
+                    type: TooltipTypes.AXISLABEL
                 });
             }
         })
@@ -26031,14 +26090,14 @@ var axis_Axis = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Axis.LABEL_CLICK, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mouseout", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEOUT, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
             if (axisScaleType === ScaleTypes.LABELS) {
                 self.services.events.dispatchEvent(Events.Tooltip.HIDE);
@@ -26115,7 +26174,7 @@ var two_dimensional_axes_TwoDimensionalAxes = /** @class */ (function (_super) {
             top: 0,
             right: 0,
             bottom: 0,
-            left: 0,
+            left: 0
         };
         return _this;
     }
@@ -26140,7 +26199,7 @@ var two_dimensional_axes_TwoDimensionalAxes = /** @class */ (function (_super) {
                 var axisComponent = new axis_Axis(_this.model, _this.services, {
                     position: axisPosition,
                     axes: _this.configs.axes,
-                    margins: _this.margins,
+                    margins: _this.margins
                 });
                 // Set model, services & parent for the new axis component
                 axisComponent.setModel(_this.model);
@@ -26170,7 +26229,7 @@ var two_dimensional_axes_TwoDimensionalAxes = /** @class */ (function (_super) {
             }
             else {
                 offset = dom_utils_DOMUtils.getSVGElementSize(child.getTitleRef(), {
-                    useBBox: true,
+                    useBBox: true
                 }).height;
             }
             switch (axisPosition) {
@@ -26370,7 +26429,7 @@ var grid_Grid = /** @class */ (function (_super) {
             // threshold for when to display a gridline tooltip
             var bounds = {
                 min: Number(translations.tx) - threshold,
-                max: Number(translations.tx) + threshold,
+                max: Number(translations.tx) + threshold
             };
             return bounds.min <= position[0] && position[0] <= bounds.max;
         });
@@ -26456,7 +26515,7 @@ var ruler_Ruler = /** @class */ (function (_super) {
         var _b = rangeScale.range(), yScaleEnd = _b[0], yScaleStart = _b[1];
         var scaledData = displayData.map(function (d) { return ({
             domainValue: _this.services.cartesianScales.getDomainValue(d),
-            originalData: d,
+            originalData: d
         }); });
         /**
          * Find matches, reduce is used instead of filter
@@ -26519,7 +26578,7 @@ var ruler_Ruler = /** @class */ (function (_super) {
             this.services.events.dispatchEvent("show-tooltip", {
                 hoveredElement: rulerLine,
                 multidata: tooltipData,
-                type: TooltipTypes.GRIDLINE,
+                type: TooltipTypes.GRIDLINE
             });
             ruler.attr("opacity", 1);
             // line snaps to matching point
@@ -26637,7 +26696,7 @@ var zero_line_ZeroLine = /** @class */ (function (_super) {
             x0: x0,
             x1: x1,
             y0: yPosition,
-            y1: yPosition,
+            y1: yPosition
         }, this.services.cartesianScales.getOrientation());
         var line = dom_utils_DOMUtils.appendOrSelect(svg, "line.domain");
         line.transition(this.services.transitions.getTransition("zero-line-update", animate))
@@ -26898,7 +26957,7 @@ var axis_chart_AxisChart = /** @class */ (function (_super) {
         var _this = _super.call(this, holder, chartConfigs) || this;
         _this.services = Object.assign(_this.services, {
             cartesianScales: scales_cartesian_CartesianScales,
-            curves: curves_Curves,
+            curves: curves_Curves
         });
         return _this;
     }
@@ -26908,24 +26967,24 @@ var axis_chart_AxisChart = /** @class */ (function (_super) {
             components: [new title_Title(this.model, this.services)],
             growth: {
                 x: LayoutGrowth.PREFERRED,
-                y: LayoutGrowth.FIXED,
-            },
+                y: LayoutGrowth.FIXED
+            }
         };
         var legendComponent = {
             id: "legend",
             components: [new legend_Legend(this.model, this.services)],
             growth: {
                 x: LayoutGrowth.PREFERRED,
-                y: LayoutGrowth.FIXED,
-            },
+                y: LayoutGrowth.FIXED
+            }
         };
         var graphFrameComponent = {
             id: "graph-frame",
             components: graphFrameComponents,
             growth: {
                 x: LayoutGrowth.STRETCH,
-                y: LayoutGrowth.FIXED,
-            },
+                y: LayoutGrowth.FIXED
+            }
         };
         var isLegendEnabled = this.model.getOptions().legend.enabled !== false;
         // Decide the position of the legend in reference to the chart
@@ -26955,23 +27014,23 @@ var axis_chart_AxisChart = /** @class */ (function (_super) {
             components: [new spacer_Spacer(this.model, this.services)],
             growth: {
                 x: LayoutGrowth.PREFERRED,
-                y: LayoutGrowth.FIXED,
-            },
+                y: LayoutGrowth.FIXED
+            }
         };
         var fullFrameComponent = {
             id: "full-frame",
             components: [
                 new layout_LayoutComponent(this.model, this.services, axis_chart_spreadArrays((isLegendEnabled ? [legendComponent] : []), [
                     legendSpacerComponent,
-                    graphFrameComponent,
+                    graphFrameComponent
                 ]), {
-                    direction: fullFrameComponentDirection,
-                }),
+                    direction: fullFrameComponentDirection
+                })
             ],
             growth: {
                 x: LayoutGrowth.STRETCH,
-                y: LayoutGrowth.FIXED,
-            },
+                y: LayoutGrowth.FIXED
+            }
         };
         // Add chart title if it exists
         var topLevelLayoutComponents = [];
@@ -26982,16 +27041,16 @@ var axis_chart_AxisChart = /** @class */ (function (_super) {
                 components: [new spacer_Spacer(this.model, this.services)],
                 growth: {
                     x: LayoutGrowth.PREFERRED,
-                    y: LayoutGrowth.FIXED,
-                },
+                    y: LayoutGrowth.FIXED
+                }
             };
             topLevelLayoutComponents.push(titleSpacerComponent);
         }
         topLevelLayoutComponents.push(fullFrameComponent);
         return [
             new layout_LayoutComponent(this.model, this.services, topLevelLayoutComponents, {
-                direction: LayoutDirection.COLUMN,
-            }),
+                direction: LayoutDirection.COLUMN
+            })
         ];
     };
     return AxisChart;
@@ -27039,8 +27098,8 @@ var area_AreaChart = /** @class */ (function (_super) {
             new area_Area(this.model, this.services),
             new scatter_Scatter(this.model, this.services, {
                 fadeInOnChartHolderMouseover: true,
-                handleThresholds: true,
-            }),
+                handleThresholds: true
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         components.push(new tooltip_scatter_TooltipScatter(this.model, this.services));
@@ -27092,8 +27151,8 @@ var area_stacked_StackedAreaChart = /** @class */ (function (_super) {
             new scatter_stacked_StackedScatter(this.model, this.services, {
                 fadeInOnChartHolderMouseover: true,
                 handleThresholds: true,
-                stacked: true,
-            }),
+                stacked: true
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         // TODO add tooltip
@@ -27144,8 +27203,8 @@ var bar_simple_SimpleBarChart = /** @class */ (function (_super) {
             new bar_simple_SimpleBar(this.model, this.services),
             new zero_line_ZeroLine(this.model, this.services),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.VERT_OR_HORIZ,
-            }),
+                skeleton: Skeletons.VERT_OR_HORIZ
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         components.push(new tooltip_bar_TooltipBar(this.model, this.services));
@@ -27195,8 +27254,8 @@ var bar_grouped_GroupedBarChart = /** @class */ (function (_super) {
             new bar_grouped_GroupedBar(this.model, this.services),
             new zero_line_ZeroLine(this.model, this.services),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.VERT_OR_HORIZ,
-            }),
+                skeleton: Skeletons.VERT_OR_HORIZ
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         components.push(new tooltip_bar_TooltipBar(this.model, this.services));
@@ -27245,8 +27304,8 @@ var bar_stacked_StackedBarChart = /** @class */ (function (_super) {
             new grid_Grid(this.model, this.services),
             new bar_stacked_StackedBar(this.model, this.services),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.VERT_OR_HORIZ,
-            }),
+                skeleton: Skeletons.VERT_OR_HORIZ
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         components.push(new tooltip_bar_TooltipBar(this.model, this.services));
@@ -27296,8 +27355,8 @@ var bubble_BubbleChart = /** @class */ (function (_super) {
             new ruler_Ruler(this.model, this.services),
             new bubble_Bubble(this.model, this.services),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.GRID,
-            }),
+                skeleton: Skeletons.GRID
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         components.push(new tooltip_scatter_TooltipScatter(this.model, this.services));
@@ -27348,8 +27407,8 @@ var line_LineChart = /** @class */ (function (_super) {
             new line_Line(this.model, this.services),
             new scatter_Scatter(this.model, this.services, { handleThresholds: true }),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.GRID,
-            }),
+                skeleton: Skeletons.GRID
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         components.push(new tooltip_scatter_TooltipScatter(this.model, this.services));
@@ -27399,8 +27458,8 @@ var scatter_ScatterChart = /** @class */ (function (_super) {
             new ruler_Ruler(this.model, this.services),
             new scatter_Scatter(this.model, this.services),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.GRID,
-            }),
+                skeleton: Skeletons.GRID
+            })
         ];
         var components = this.getAxisChartComponents(graphFrameComponents);
         components.push(new tooltip_scatter_TooltipScatter(this.model, this.services));
@@ -27501,8 +27560,8 @@ var pie_PieChart = /** @class */ (function (_super) {
         var graphFrameComponents = [
             new pie_Pie(this.model, this.services),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.PIE,
-            }),
+                skeleton: Skeletons.PIE
+            })
         ];
         // get the base chart components and export with tooltip
         var components = this.getChartComponents(graphFrameComponents);
@@ -27550,8 +27609,8 @@ var donut_DonutChart = /** @class */ (function (_super) {
         var graphFrameComponents = [
             new donut_Donut(this.model, this.services),
             new skeleton_Skeleton(this.model, this.services, {
-                skeleton: Skeletons.DONUT,
-            }),
+                skeleton: Skeletons.DONUT
+            })
         ];
         var components = this.getChartComponents(graphFrameComponents);
         components.push(new tooltip_pie_TooltipPie(this.model, this.services));
@@ -27568,50 +27627,50 @@ function radialLabelPlacement(angleRadians) {
     if (isInRange(angle, [0, 10]) || isInRange(angle, [350, 0])) {
         return {
             textAnchor: TextAnchor.START,
-            dominantBaseline: DominantBaseline.MIDDLE,
+            dominantBaseline: DominantBaseline.MIDDLE
         };
     }
     else if (isInRange(angle, [10, 80])) {
         return {
             textAnchor: TextAnchor.START,
-            dominantBaseline: DominantBaseline.HANGING,
+            dominantBaseline: DominantBaseline.HANGING
         };
     }
     else if (isInRange(angle, [80, 100])) {
         return {
             textAnchor: TextAnchor.MIDDLE,
-            dominantBaseline: DominantBaseline.HANGING,
+            dominantBaseline: DominantBaseline.HANGING
         };
     }
     else if (isInRange(angle, [100, 170])) {
         return {
             textAnchor: TextAnchor.END,
-            dominantBaseline: DominantBaseline.HANGING,
+            dominantBaseline: DominantBaseline.HANGING
         };
     }
     else if (isInRange(angle, [170, 190])) {
         return {
             textAnchor: TextAnchor.END,
-            dominantBaseline: DominantBaseline.MIDDLE,
+            dominantBaseline: DominantBaseline.MIDDLE
         };
     }
     else if (isInRange(angle, [190, 260])) {
         return {
             textAnchor: TextAnchor.END,
-            dominantBaseline: DominantBaseline.BASELINE,
+            dominantBaseline: DominantBaseline.BASELINE
         };
     }
     else if (isInRange(angle, [260, 280])) {
         return {
             textAnchor: TextAnchor.MIDDLE,
-            dominantBaseline: DominantBaseline.BASELINE,
+            dominantBaseline: DominantBaseline.BASELINE
         };
     }
     else {
         // 280 - 350
         return {
             textAnchor: TextAnchor.START,
-            dominantBaseline: DominantBaseline.BASELINE,
+            dominantBaseline: DominantBaseline.BASELINE
         };
     }
 }
@@ -27812,7 +27871,7 @@ var radar_Radar = /** @class */ (function (_super) {
         if (animate === void 0) { animate = true; }
         this.svg = this.getContainerSVG();
         var _a = dom_utils_DOMUtils.getSVGElementSize(this.parent, {
-            useAttrs: true,
+            useAttrs: true
         }), width = _a.width, height = _a.height;
         var data = this.model.getData();
         var displayData = this.model.getDisplayData();
@@ -27841,7 +27900,7 @@ var radar_Radar = /** @class */ (function (_super) {
         var yScale = linear_linear()
             .domain([
             0,
-            src_max(this.displayDataNormalized.map(function (d) { return d[value]; })),
+            src_max(this.displayDataNormalized.map(function (d) { return d[value]; }))
         ])
             .range([minRange, radius])
             .nice(yTicksNumber);
@@ -27874,7 +27933,7 @@ var radar_Radar = /** @class */ (function (_super) {
         // center coordinates
         var c = {
             x: leftPadding + xLabelPadding,
-            y: height / 2,
+            y: height / 2
         };
         /////////////////////////////
         // Drawing the radar
@@ -28176,7 +28235,7 @@ var radar_Radar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Radar.X_AXIS_MOUSEOVER, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mousemove", function (datum) {
@@ -28193,7 +28252,7 @@ var radar_Radar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Radar.X_AXIS_MOUSEMOVE, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // get the items that should be highlighted
             var itemsToHighlight = self.displayDataNormalized.filter(function (d) { return d[angle] === datum; });
@@ -28201,14 +28260,14 @@ var radar_Radar = /** @class */ (function (_super) {
             self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
                 hoveredElement: hoveredElement,
                 multidata: itemsToHighlight,
-                type: TooltipTypes.GRIDLINE,
+                type: TooltipTypes.GRIDLINE
             });
         })
             .on("click", function (datum) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Radar.X_AXIS_CLICK, {
                 element: src_select(this),
-                datum: datum,
+                datum: datum
             });
         })
             .on("mouseout", function (datum) {
@@ -28223,14 +28282,14 @@ var radar_Radar = /** @class */ (function (_super) {
             // Dispatch mouse event
             self.services.events.dispatchEvent(Events.Radar.X_AXIS_MOUSEOUT, {
                 element: hoveredElement,
-                datum: datum,
+                datum: datum
             });
             // Hide tooltip
             self.services.events.dispatchEvent("hide-tooltip", {
-                hoveredElement: hoveredElement,
+                hoveredElement: hoveredElement
             });
             self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-                hoveredElement: hoveredElement,
+                hoveredElement: hoveredElement
             });
         });
     };