@carbon/charts-vue 0.54.12 → 0.55.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.55.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.54.14...v0.55.0) (2022-03-14)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+## [0.54.14](https://github.com/carbon-design-system/carbon-charts/compare/v0.54.13...v0.54.14) (2022-03-14)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
+## [0.54.13](https://github.com/carbon-design-system/carbon-charts/compare/v0.54.12...v0.54.13) (2022-03-09)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
 ## [0.54.12](https://github.com/carbon-design-system/carbon-charts/compare/v0.54.11...v0.54.12) (2022-02-04)
 
 **Note:** Version bump only for package @carbon/charts-vue

package/charts-vue.common.js

@@ -325,7 +325,7 @@ __webpack_require__.d(configuration_namespaceObject, "circlePack", function() {
 __webpack_require__.d(configuration_namespaceObject, "color", function() { return configuration_non_customizable_color; });
 __webpack_require__.d(configuration_namespaceObject, "boxplot", function() { return boxplot; });
 __webpack_require__.d(configuration_namespaceObject, "histogram", function() { return configuration_non_customizable_histogram; });
-__webpack_require__.d(configuration_namespaceObject, "legend", function() { return configuration_non_customizable_legend; });
+__webpack_require__.d(configuration_namespaceObject, "legend", function() { return legend; });
 __webpack_require__.d(configuration_namespaceObject, "lines", function() { return configuration_non_customizable_lines; });
 __webpack_require__.d(configuration_namespaceObject, "meter", function() { return meter; });
 __webpack_require__.d(configuration_namespaceObject, "pie", function() { return configuration_non_customizable_pie; });
@@ -1042,7 +1042,7 @@ var boxplot = {
 var configuration_non_customizable_histogram = {
     defaultBins: 10,
 };
-var configuration_non_customizable_legend = {
+var legend = {
     items: {
         status: {
             ACTIVE: 1,
@@ -9563,7 +9563,7 @@ var model_ChartModel = /** @class */ (function () {
         if (!this.get('data')) {
             return null;
         }
-        var ACTIVE = configuration_non_customizable_legend.items.status.ACTIVE;
+        var ACTIVE = legend.items.status.ACTIVE;
         var dataGroups = this.getDataGroups(groups);
         var groupMapsTo = this.getOptions().data.groupMapsTo;
         var allDataFromDomain = this.getAllDataFromDomain(groups);
@@ -9608,7 +9608,7 @@ var model_ChartModel = /** @class */ (function () {
         return this.get('dataGroups');
     };
     ChartModel.prototype.getActiveDataGroups = function (groups) {
-        var ACTIVE = configuration_non_customizable_legend.items.status.ACTIVE;
+        var ACTIVE = legend.items.status.ACTIVE;
         return this.getDataGroups(groups).filter(function (dataGroup) { return dataGroup.status === ACTIVE; });
     };
     ChartModel.prototype.getDataGroupNames = function (groups) {
@@ -9880,7 +9880,7 @@ var model_ChartModel = /** @class */ (function () {
      * Data labels
      */
     ChartModel.prototype.toggleDataLabel = function (changedLabel) {
-        var _a = configuration_non_customizable_legend.items.status, ACTIVE = _a.ACTIVE, DISABLED = _a.DISABLED;
+        var _a = legend.items.status, ACTIVE = _a.ACTIVE, DISABLED = _a.DISABLED;
         var dataGroups = this.getDataGroups();
         var hasDeactivatedItems = dataGroups.some(function (group) { return group.status === DISABLED; });
         var activeItems = dataGroups.filter(function (group) { return group.status === ACTIVE; });
@@ -10091,7 +10091,7 @@ var model_ChartModel = /** @class */ (function () {
     };
     ChartModel.prototype.generateDataGroups = function (data) {
         var groupMapsTo = this.getOptions().data.groupMapsTo;
-        var _a = configuration_non_customizable_legend.items.status, ACTIVE = _a.ACTIVE, DISABLED = _a.DISABLED;
+        var _a = legend.items.status, ACTIVE = _a.ACTIVE, DISABLED = _a.DISABLED;
         var options = this.getOptions();
         var uniqueDataGroups = tools_Tools.removeArrayDuplicates(data.map(function (datum) { return datum[groupMapsTo]; }));
         // check if selectedGroups can be applied to chart with current data groups
@@ -18001,7 +18001,7 @@ var legend_Legend = /** @class */ (function (_super) {
         var legendOrientation = tools_Tools.getProperty(options, 'legend', 'orientation');
         var dataGroups = this.model.getDataGroups();
         // Check if there are disabled legend items
-        var DISABLED = configuration_non_customizable_legend.items.status.DISABLED;
+        var DISABLED = legend.items.status.DISABLED;
         var hasDeactivatedItems = dataGroups.some(function (dataGroup) { return dataGroup.status === DISABLED; });
         var userProvidedOrder = tools_Tools.getProperty(legendOptions, 'order');
         var svg = this.getComponentContainer()
@@ -18025,11 +18025,11 @@ var legend_Legend = /** @class */ (function (_super) {
         addedLegendItems
             .merge(svg.selectAll('div.legend-item'))
             .classed('active', function (d, i) {
-            return d.status === configuration_non_customizable_legend.items.status.ACTIVE;
+            return d.status === legend.items.status.ACTIVE;
         });
         var legendClickable = tools_Tools.getProperty(this.getOptions(), 'legend', 'clickable');
         svg.classed('clickable', legendClickable && dataGroups.length > 1);
-        var checkboxRadius = configuration_non_customizable_legend.checkbox.radius;
+        var checkboxRadius = legend.checkbox.radius;
         var addedCheckboxes = addedLegendItems
             .append('div')
             .classed('checkbox', true);
@@ -18042,7 +18042,7 @@ var legend_Legend = /** @class */ (function (_super) {
         })
             .attr('aria-checked', function (_a) {
             var status = _a.status;
-            return status === configuration_non_customizable_legend.items.status.ACTIVE;
+            return status === legend.items.status.ACTIVE;
         })
             .attr('width', checkboxRadius * 2)
             .attr('height', checkboxRadius * 2)
@@ -18054,13 +18054,13 @@ var legend_Legend = /** @class */ (function (_super) {
             });
         })
             .style('background', function (d) {
-            return d.status === configuration_non_customizable_legend.items.status.ACTIVE
+            return d.status === legend.items.status.ACTIVE
                 ? _this.model.getFillColor(d.name) ||
                     _this.model.getStrokeColor(d.name)
                 : null;
         })
             .classed('active', function (d, i) {
-            return d.status === configuration_non_customizable_legend.items.status.ACTIVE;
+            return d.status === legend.items.status.ACTIVE;
         });
         var addedCheckIcons = addedCheckboxes
             .append('svg')
@@ -18145,7 +18145,7 @@ var legend_Legend = /** @class */ (function (_super) {
         return dataGroups;
     };
     Legend.prototype.addAdditionalItem = function (additionalItem, itemConfig, indexOfItem) {
-        var _a = configuration_non_customizable_legend.area, width = _a.width, height = _a.height;
+        var _a = legend.area, width = _a.width, height = _a.height;
         if (itemConfig.type === LegendItemType.RADIUS) {
             // Circular icon
             additionalItem
@@ -18158,7 +18158,7 @@ var legend_Legend = /** @class */ (function (_super) {
                 .style('height', height + "px");
         }
         if (itemConfig.type === LegendItemType.RADIUS) {
-            var _b = configuration_non_customizable_legend.radius, iconData = _b.iconData, fill = _b.fill, stroke = _b.stroke;
+            var _b = legend.radius, iconData = _b.iconData, fill = _b.fill, stroke = _b.stroke;
             var circleEnter = additionalItem
                 .attr('fill', 'none')
                 .selectAll('circle')
@@ -18176,7 +18176,7 @@ var legend_Legend = /** @class */ (function (_super) {
                 .style('stroke', itemConfig.stroke ? itemConfig.stroke : stroke);
         }
         else if (itemConfig.type === LegendItemType.LINE) {
-            var lineConfig = configuration_non_customizable_legend.line;
+            var lineConfig = legend.line;
             if (additionalItem.select('line.line').empty()) {
                 additionalItem
                     .append('line')
@@ -18203,13 +18203,13 @@ var legend_Legend = /** @class */ (function (_super) {
                     .attr('width', width)
                     .attr('height', height)
                     .style('fill', indexOfItem > 3 && !itemConfig.fill
-                    ? configuration_non_customizable_legend.area.fill
+                    ? legend.area.fill
                     : itemConfig.fill)
                     .style('stroke', itemConfig.stroke);
             }
         }
         else if (itemConfig.type === LegendItemType.SIZE) {
-            var _c = configuration_non_customizable_legend.size, iconData = _c.iconData, fill = _c.fill, stroke = _c.stroke;
+            var _c = legend.size, iconData = _c.iconData, fill = _c.fill, stroke = _c.stroke;
             var sizeEnter = additionalItem
                 .attr('fill', 'none')
                 .attr('role', Roles.IMG)
@@ -18228,7 +18228,7 @@ var legend_Legend = /** @class */ (function (_super) {
                 .style('stroke-width', 1);
         }
         else if (itemConfig.type === LegendItemType.QUARTILE) {
-            var iconData = configuration_non_customizable_legend.quartile.iconData;
+            var iconData = legend.quartile.iconData;
             var quartileEnter = additionalItem
                 .selectAll('rect')
                 .attr('role', Roles.IMG)
@@ -18601,16 +18601,17 @@ var color_scale_legend_ColorScaleLegend = /** @class */ (function (_super) {
         _this.type = 'color-legend';
         _this.renderType = RenderTypes.SVG;
         _this.gradient_id = 'gradient-id-' + Math.floor(Math.random() * 99999999999);
-        _this.handleAxisComplete = function (event) {
+        // Position legend after axis have rendered
+        _this.handleAxisCompleteEvent = function (event) {
             var svg = _this.getComponentContainer();
             var width = dom_utils_DOMUtils.getSVGElementSize(svg, {
                 useAttrs: true,
             }).width;
             var isDataLoading = tools_Tools.getProperty(_this.getOptions(), 'data', 'loading');
-            if (width > configuration_non_customizable_legend.color.barWidth && !isDataLoading) {
+            if (width > legend.color.barWidth && !isDataLoading) {
                 var title = tools_Tools.getProperty(_this.getOptions(), 'heatmap', 'colorLegend', 'title');
                 var cartesianScales = _this.services.cartesianScales;
-                // Get available chart area
+                // Get axis width & start/end positions
                 var mainXScale = cartesianScales.getMainXScale();
                 var xDimensions = mainXScale.range();
                 // Align legend with the axis
@@ -18618,9 +18619,9 @@ var color_scale_legend_ColorScaleLegend = /** @class */ (function (_super) {
                     svg.select('g.legend').attr('transform', "translate(" + xDimensions[0] + ", 0)");
                     if (title) {
                         var textWidth = dom_utils_DOMUtils.getSVGElementSize(svg.select('g.legend-title').select('text'), { useBBox: true }).width;
-                        // -9 since LEFT y-axis labels are moved towards the left by 9 by d3
+                        // D3 moves the LEFT y-axis labels by 9
                         var availableSpace = xDimensions[0] - textWidth - 9;
-                        // If space is available align the the label with the axis labels
+                        // If space is available, align the label with the axis labels
                         if (availableSpace > 1) {
                             svg.select('g.legend-title').attr('transform', "translate(" + availableSpace + ", 0)");
                         }
@@ -18633,45 +18634,50 @@ var color_scale_legend_ColorScaleLegend = /** @class */ (function (_super) {
                     }
                 }
             }
+            else {
+                // Default state
+                svg.select('g.legend-title').attr('transform', "translate(0, 0)");
+            }
         };
         return _this;
     }
     ColorScaleLegend.prototype.init = function () {
         var eventsFragment = this.services.events;
         // Highlight correct circle on legend item hovers
-        eventsFragment.addEventListener(Events.Axis.RENDER_COMPLETE, this.handleAxisComplete);
+        eventsFragment.addEventListener(Events.Axis.RENDER_COMPLETE, this.handleAxisCompleteEvent);
     };
     ColorScaleLegend.prototype.render = function (animate) {
         if (animate === void 0) { animate = false; }
         var options = this.getOptions();
+        var svg = this.getComponentContainer();
+        var width = dom_utils_DOMUtils.getSVGElementSize(svg, {
+            useAttrs: true,
+        }).width;
         var customColors = tools_Tools.getProperty(options, 'color', 'gradient', 'colors');
         var colorScaleType = tools_Tools.getProperty(options, 'heatmap', 'colorLegend', 'type');
         var colorPairingOption = tools_Tools.getProperty(options, 'color', 'pairing', 'option');
         var title = tools_Tools.getProperty(options, 'heatmap', 'colorLegend', 'title');
-        var customColorsEnabled = !tools_Tools.isEmpty(customColors);
-        var domain = this.model.getValueDomain();
-        var svg = this.getComponentContainer();
         // Clear DOM if loading
         var isDataLoading = tools_Tools.getProperty(this.getOptions(), 'data', 'loading');
         if (isDataLoading) {
             svg.html('');
             return;
         }
-        var legend = dom_utils_DOMUtils.appendOrSelect(svg, 'g.legend');
-        var axis = dom_utils_DOMUtils.appendOrSelect(legend, 'g.legend-axis');
-        var width = dom_utils_DOMUtils.getSVGElementSize(svg, {
-            useAttrs: true,
-        }).width;
-        var barWidth = configuration_non_customizable_legend.color.barWidth;
-        if (width <= configuration_non_customizable_legend.color.barWidth) {
-            barWidth = width;
-        }
+        var customColorsEnabled = !tools_Tools.isEmpty(customColors);
+        var domain = this.model.getValueDomain();
+        var useDefaultBarWidth = !(width <= legend.color.barWidth);
+        var barWidth = useDefaultBarWidth
+            ? legend.color.barWidth
+            : width;
+        var legendGroupElement = dom_utils_DOMUtils.appendOrSelect(svg, 'g.legend');
+        var axisElement = dom_utils_DOMUtils.appendOrSelect(legendGroupElement, 'g.legend-axis');
+        // Render title if it exists
         if (title) {
             var legendTitleGroup = dom_utils_DOMUtils.appendOrSelect(svg, 'g.legend-title');
             var legendTitle = dom_utils_DOMUtils.appendOrSelect(legendTitleGroup, 'text');
             legendTitle.text(title).attr('dy', '0.7em');
             // Move the legend down by 16 pixels to display legend text on top
-            legend.attr('transform', "translate(0, 16)");
+            legendGroupElement.attr('transform', "translate(0, 16)");
         }
         // If domain consists of negative and positive values, use diverging palettes
         var colorScheme = domain[0] < 0 && domain[1] > 0 ? 'diverge' : 'mono';
@@ -18701,107 +18707,95 @@ var color_scale_legend_ColorScaleLegend = /** @class */ (function (_super) {
             // Use custom colors
             colorPairing = customColors;
         }
-        if (colorScaleType === ColorLegendType.LINEAR) {
-            var stopLengthPercentage_1 = 100 / (colorPairing.length - 1);
-            // Generate the gradient
-            var linearGradient = dom_utils_DOMUtils.appendOrSelect(legend, 'linearGradient');
-            linearGradient
-                .attr('id', this.gradient_id + "-legend")
-                .selectAll('stop')
-                .data(colorPairing)
-                .enter()
-                .append('stop')
-                .attr('offset', function (_, i) { return i * stopLengthPercentage_1 + "%"; })
-                .attr('class', function (_, i) { return colorPairing[i]; })
-                .attr('stop-color', function (d) { return d; });
-            // Create the legend container
-            var rectangle = dom_utils_DOMUtils.appendOrSelect(legend, 'rect');
-            rectangle
-                .attr('width', barWidth)
-                .attr('height', configuration_non_customizable_legend.color.barHeight)
-                .style('fill', "url(#" + this.gradient_id + "-legend)");
-            // Create scale & ticks
-            var linearScale = linear_linear()
-                .domain(domain)
-                .range([0, barWidth]);
-            domain.splice(1, 0, (domain[0] + domain[1]) / 2);
-            var xAxis = axisBottom(linearScale)
-                .tickSize(0)
-                .tickValues(domain);
-            // Align axes at the bottom of the rectangle and delete the domain line
-            axis.attr('transform', "translate(0," + configuration_non_customizable_legend.color.axisYTranslation + ")").call(xAxis);
-            // Remove domain
-            axis.select('.domain').remove();
-            // Align text to fit in container
-            axis.style('text-anchor', 'start');
-        }
-        else if (colorScaleType === ColorLegendType.QUANTIZE) {
-            // Generate equal chunks between range to act as ticks
-            var interpolator = src_round(domain[0], domain[1]);
-            var quant_1 = quantize(interpolator, colorPairing.length);
-            // If divergent && non-custom color, remove 0/white from being displayed
-            if (!customColorsEnabled && colorScheme === 'diverge') {
-                colorPairing.splice(colorPairing.length / 2, 1);
-            }
-            var colorScaleBand_1 = band()
-                .domain(colorPairing)
-                .range([0, barWidth]);
-            // Render the quantized rectangles
-            var rectangle = dom_utils_DOMUtils.appendOrSelect(legend, 'g.quantized-rect');
-            rectangle
-                .selectAll('rect')
-                .data(colorScaleBand_1.domain())
-                .join('rect')
-                .attr('x', function (d) { return colorScaleBand_1(d); })
-                .attr('y', 0)
-                .attr('width', Math.max(0, colorScaleBand_1.bandwidth()) - 1)
-                .attr('height', configuration_non_customizable_legend.color.barHeight)
-                .attr('class', function (d) { return d; })
-                .attr('fill', function (d) { return d; });
-            var xAxis = axisBottom(colorScaleBand_1)
-                .tickSize(0)
-                .tickValues(colorPairing)
-                .tickFormat(function (_, i) {
-                // Display every other tick to create space
-                if (!customColorsEnabled &&
-                    ((i + 1) % 2 === 0 || i === colorPairing.length - 1)) {
-                    return null;
-                }
-                // Use the quant interpolators as ticks
-                return quant_1[i].toString();
-            });
-            // Align axis to match bandwidth start after initial (white)
-            var axisTranslation = colorScaleBand_1.bandwidth() / 2;
-            axis.attr('transform', "translate(" + (!customColorsEnabled && colorScheme === 'diverge' ? '-' : '') + axisTranslation + ", " + configuration_non_customizable_legend.color.axisYTranslation + ")").call(xAxis);
-            // Append the last tick
-            var firstTick = axis.select('g.tick').clone(true);
-            firstTick
-                .attr('transform', "translate(" + (barWidth +
-                (!customColorsEnabled && colorScheme === 'diverge'
-                    ? axisTranslation
-                    : -axisTranslation)) + ", 0)")
-                .classed('final-tick', true)
-                .select('text')
-                .text(quant_1[quant_1.length - 1]);
-            axis.enter().append(firstTick.node());
-            axis.select('.domain').remove();
-        }
-        else {
-            throw Error('Entered color legend type is not supported.');
-        }
-        // Translate last axis tick if barWidth equals chart width
-        if (width <= configuration_non_customizable_legend.color.barWidth) {
-            var lastTick = axis.select('g.tick:last-of-type text');
-            var width_1 = dom_utils_DOMUtils.getSVGElementSize(lastTick, {
-                useBBox: true,
-            }).width;
-            lastTick.attr('x', "-" + width_1);
-        }
+        // Generate equal chunks between range to act as ticks
+        var interpolator = d3_interpolate_src_number(domain[0], domain[1]);
+        var quant = quantize(interpolator, 3);
+        // Create scale & ticks
+        var linearScale = linear_linear().domain(domain).range([0, barWidth]);
+        var legendAxis = axisBottom(linearScale)
+            .tickSize(0)
+            .tickValues(quant);
+        switch (colorScaleType) {
+            case ColorLegendType.LINEAR:
+                this.drawLinear(colorPairing, legendGroupElement, barWidth);
+                break;
+            case ColorLegendType.QUANTIZE:
+                var rangeStart = this.drawQuantize(colorPairing, colorScheme, customColorsEnabled, legendGroupElement, barWidth);
+                // Using range provided by drawQuantize for alignment purposes
+                linearScale.range([rangeStart, barWidth]);
+                break;
+            default:
+                throw Error('Entered color legend type is not supported.');
+        }
+        // Align axes at the bottom of the rectangle and delete the domain line
+        axisElement
+            .attr('transform', "translate(0," + legend.color.axisYTranslation + ")")
+            .call(legendAxis);
+        // Remove auto generated axis bottom line
+        axisElement.select('.domain').remove();
+        // Translate first/last axis tick if barWidth equals chart width
+        // Ensures text is not clipped when default bar width (300px) is not used
+        axisElement
+            .select('g.tick:last-of-type text')
+            .style('text-anchor', useDefaultBarWidth ? 'middle' : 'end');
+        axisElement
+            .select('g.tick:first-of-type text')
+            .style('text-anchor', useDefaultBarWidth ? 'middle' : 'start');
+    };
+    // Renders gradient legend
+    ColorScaleLegend.prototype.drawLinear = function (colorPairing, legendGroupElement, barWidth) {
+        var stopLengthPercentage = 100 / (colorPairing.length - 1);
+        // Generate the gradient
+        var linearGradient = dom_utils_DOMUtils.appendOrSelect(legendGroupElement, 'linearGradient');
+        // Rendering gradient
+        linearGradient
+            .attr('id', this.gradient_id + "-legend")
+            .selectAll('stop')
+            .data(colorPairing)
+            .enter()
+            .append('stop')
+            .attr('offset', function (_, i) { return i * stopLengthPercentage + "%"; })
+            .attr('class', function (_, i) { return colorPairing[i]; })
+            .attr('stop-color', function (d) { return d; });
+        // Create the legend container
+        var rectangle = dom_utils_DOMUtils.appendOrSelect(legendGroupElement, 'rect');
+        rectangle
+            .attr('width', barWidth)
+            .attr('height', legend.color.barHeight)
+            .style('fill', "url(#" + this.gradient_id + "-legend)");
+    };
+    /**
+     * Renders quantized legend
+     * @returns number (range start)
+     */
+    ColorScaleLegend.prototype.drawQuantize = function (colorPairing, colorScheme, customColorsEnabled, legendGroupElement, barWidth) {
+        // If divergent && non-custom color, remove 0/white from being displayed
+        if (!customColorsEnabled && colorScheme === 'diverge') {
+            colorPairing.splice(colorPairing.length / 2, 1);
+        }
+        var colorScaleBand = band()
+            .domain(colorPairing)
+            .range([0, barWidth]);
+        // Render the quantized rectangles
+        var rectangle = dom_utils_DOMUtils.appendOrSelect(legendGroupElement, 'g.quantized-rect');
+        rectangle
+            .selectAll('rect')
+            .data(colorScaleBand.domain())
+            .join('rect')
+            .attr('x', function (d) { return colorScaleBand(d); })
+            .attr('y', 0)
+            .attr('width', Math.max(0, colorScaleBand.bandwidth() - 1))
+            .attr('height', legend.color.barHeight)
+            .attr('class', function (d) { return d; })
+            .attr('fill', function (d) { return d; });
+        return (!customColorsEnabled && colorScheme) === 'mono'
+            ? colorScaleBand.bandwidth() - 1
+            : 0;
     };
     ColorScaleLegend.prototype.destroy = function () {
         // Remove legend listeners
         var eventsFragment = this.services.events;
-        eventsFragment.removeEventListener(Events.Axis.RENDER_COMPLETE, this.handleAxisComplete);
+        eventsFragment.removeEventListener(Events.Axis.RENDER_COMPLETE, this.handleAxisCompleteEvent);
     };
     return ColorScaleLegend;
 }(legend_Legend));
@@ -20586,12 +20580,12 @@ var essentials_modal_Modal = /** @class */ (function (_super) {
         var options = this.model.getOptions();
         var chartprefix = tools_Tools.getProperty(options, 'style', 'prefix');
         var tableArray = this.model.getTabularDataArray();
-        return "\n\t\t<div class=\"bx--modal-container\">\n\t\t\t<div class=\"bx--modal-header\">\n\t\t\t\t<p class=\"bx--modal-header__label bx--type-delta\" id=\"modal-title\">Tabular representation</p>\n\t\t\t\t<p class=\"bx--modal-header__heading bx--type-beta\" id=\"modal-description\">" + options.title + "</p>\n\t\t\t\t<button class=\"bx--modal-close\" type=\"button\" data-modal-close aria-label=\"close modal\"  data-modal-primary-focus>\n\t\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" aria-label=\"Close\" width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" role=\"img\" class=\"bx--modal-close__icon\">\n\t\t\t\t\t\t<path d=\"M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div class=\"bx--modal-content\"><table class=\"bx--data-table bx--data-table--no-border\">\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t" + lodash_es_get(tableArray, 0)
-            .map(function (heading) { return "<th scope=\"col\">\n\t\t\t\t\t\t\t\t<div class=\"bx--table-header-label\">" + heading + "</div>\n\t\t\t\t\t\t\t</th>"; })
-            .join('') + "\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t</thead>\n\t\t\t\t\t<tbody>" + tableArray
+        return "\n\t\t<div class=\"bx--modal-container cds--modal-container\">\n\t\t\t<div class=\"bx--modal-header cds--modal-header\">\n\t\t\t\t<p class=\"bx--modal-header__label bx--type-delta cds--modal-header__label cds--type-delta\" id=\"modal-title\">Tabular representation</p>\n\n\t\t\t\t<p class=\"bx--modal-header__heading bx--type-beta cds--modal-header__heading cds--type-beta\" id=\"modal-description\">" + options.title + "</p>\n\n\t\t\t\t<button class=\"bx--modal-close cds--modal-close\" type=\"button\" data-modal-close aria-label=\"close modal\"  data-modal-primary-focus>\n\t\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" aria-label=\"Close\" width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" role=\"img\" class=\"bx--modal-close__icon cds--modal-close__icon\">\n\t\t\t\t\t\t<path d=\"M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<div class=\"bx--modal-content cds--modal-content\">\n\t\t\t\t<table class=\"bx--data-table bx--data-table--no-border cds--data-table cds--data-table--no-border\">\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t" + lodash_es_get(tableArray, 0)
+            .map(function (heading) { return "<th scope=\"col\">\n\t\t\t\t\t\t\t\t<div class=\"bx--table-header-label cds--table-header-label\">" + heading + "</div>\n\t\t\t\t\t\t\t</th>"; })
+            .join('') + "\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t</thead>\n\n\t\t\t\t\t<tbody>" + tableArray
             .slice(1)
             .map(function (row) { return "\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t" + row.map(function (column) { return "<td>" + column + "</td>"; }).join('') + "\n\t\t\t\t\t\t\t</tr>"; })
-            .join('') + "\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t\t<div class=\"bx--modal-footer\">\n\t\t\t  <div class=\"" + js_settings.prefix + "--" + chartprefix + "-modal-footer-spacer\"></div>\n\t\t\t  <button class=\"bx--btn bx--btn--primary\" type=\"button\" data-modal-primary-focus>Download as CSV</button>\n\t\t\t</div>\n\t\t</div>";
+            .join('') + "\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t</div>\n\n\t\t\t<div class=\"bx--modal-footer cds--modal-footer\">\n\t\t\t  <div class=\"" + js_settings.prefix + "--" + chartprefix + "-modal-footer-spacer\"></div>\n\t\t\t  <button class=\"bx--btn bx--btn--primary cds--btn cds--btn--primary\" type=\"button\" data-modal-primary-focus>Download as CSV</button>\n\t\t\t</div>\n\t\t</div>";
     };
     Modal.prototype.render = function () {
         var options = this.model.getOptions();
@@ -20604,7 +20598,7 @@ var essentials_modal_Modal = /** @class */ (function (_super) {
             this.isEventListenerAdded = true;
             this.modal
                 .attr('data-modal', true)
-                .attr('class', 'bx--modal')
+                .attr('class', 'bx--modal cds--modal')
                 .attr('role', 'dialog')
                 .attr('aria-modal', true)
                 .attr('aria-labelledby', 'modal-title')
@@ -39592,7 +39586,7 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             if (!this.overflowMenu) {
                 this.overflowMenu = container
                     .append('div')
-                    .attr('class', 'bx--overflow-menu-options bx--overflow-menu--flip')
+                    .attr('class', 'bx--overflow-menu-options bx--overflow-menu--flip cds--overflow-menu-options cds--overflow-menu--flip')
                     .attr('tabindex', -1)
                     .attr('role', 'menu')
                     .html("<ul></ul>");
@@ -39610,7 +39604,7 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             var enteringToolbarControls = toolbarControls
                 .enter()
                 .append('div')
-                .attr('class', 'toolbar-control bx--overflow-menu')
+                .attr('class', 'toolbar-control bx--overflow-menu cds--overflow-menu')
                 .attr('role', 'button');
             var self_1 = this;
             var allToolbarControls = enteringToolbarControls
@@ -39618,9 +39612,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                 .classed('disabled', function (d) { return d.shouldBeDisabled(); })
                 .attr('aria-disabled', function (d) { return d.shouldBeDisabled(); })
                 .attr('aria-label', function (d) { return d.title; })
-                .html(function (d) { return "\n\t\t\t<button\n\t\t\t\tclass=\"bx--overflow-menu__trigger\"\n\t\t\t\taria-haspopup=\"true\" aria-expanded=\"false\" id=\"" + _this.services.domUtils.generateElementIDString("control-" + d.id) + "\" aria-label=\"" + d.title + "\">\n\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform; width: " + (d.iconSVG.width !== undefined ? d.iconSVG.width : '20px') + "; height: " + (d.iconSVG.height !== undefined
+                .html(function (d) { return "\n\t\t\t<button\n\t\t\t\tclass=\"bx--overflow-menu__trigger cds--overflow-menu__trigger\"\n\t\t\t\taria-haspopup=\"true\" aria-expanded=\"false\" id=\"" + _this.services.domUtils.generateElementIDString("control-" + d.id) + "\" aria-label=\"" + d.title + "\">\n\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform; width: " + (d.iconSVG.width !== undefined ? d.iconSVG.width : '20px') + "; height: " + (d.iconSVG.height !== undefined
                 ? d.iconSVG.height
-                : '20px') + "\" xmlns=\"http://www.w3.org/2000/svg\" class=\"bx--overflow-menu__icon\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t" + d.iconSVG.content + "\n\t\t\t\t</svg>\n\t\t\t</button>"; })
+                : '20px') + "\" xmlns=\"http://www.w3.org/2000/svg\" class=\"bx--overflow-menu__icon cds--overflow-menu__icon\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t" + d.iconSVG.content + "\n\t\t\t\t</svg>\n\t\t\t</button>"; })
                 .each(function (d, index) {
                 var _this = this;
                 src_select(this)
@@ -39664,15 +39658,18 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             .attr('id', function (d) {
             return _this.services.domUtils.generateElementIDString("control-" + d.id);
         })
-            .attr('class', 'bx--overflow-menu-options__option')
+            .attr('class', 'bx--overflow-menu-options__option cds--overflow-menu-options__option')
             .attr('role', 'menuitem');
         enteringOverflowMenuControls
             .append('button')
-            .attr('class', 'bx--overflow-menu-options__btn');
+            .attr('class', 'bx--overflow-menu-options__btn cds--overflow-menu-options__btn');
         enteringOverflowMenuControls
             .merge(overflowMenuControls)
             .classed('bx--overflow-menu-options__option--disabled', function (d) {
             return d.shouldBeDisabled();
+        })
+            .classed('cds--overflow-menu-options__option--disabled', function (d) {
+            return d.shouldBeDisabled();
         })
             .attr('aria-disabled', function (d) { return d.shouldBeDisabled(); })
             .selectAll('button')
@@ -39690,7 +39687,8 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
         // update overflow button background
         if (this.overflowButton) {
             this.overflowButton.attr('aria-expanded', show);
-            src_select(this.overflowButton.node().parentNode).classed('bx--overflow-menu--open', show);
+            src_select(this.overflowButton.node().parentNode)
+                .classed('bx--overflow-menu--open', show).classed('cds--overflow-menu--open', show);
         }
         if (show) {
             this.services.events.dispatchEvent(Events.Toolbar.SHOW_OVERFLOW_MENU);
@@ -44120,28 +44118,16 @@ var heatmap_HeatmapModel = /** @class */ (function (_super) {
      * @returns Array consisting of smallest and largest values in  data
      */
     HeatmapModel.prototype.getValueDomain = function () {
-        var data = this.getDisplayData().map(function (element) { return element.value; });
-        var limits = src_extent(data);
-        var domain = [];
-        // Round extent values to the nearest multiple of 10
-        // Axis rounds values to multiples of 2, 5, and 10s.
-        limits.forEach(function (number, index) {
-            var value = Number(number);
-            if (index === 0 && value >= 0) {
-                value = 0;
-            }
-            else if (value % 10 === 0 || value === 0) {
-                value;
-            }
-            else if (value < 0) {
-                value = Math.floor(value / 10) * 10;
-            }
-            else {
-                value = Math.ceil(value / 10) * 10;
-            }
-            domain.push(value);
-        });
-        // Ensure the median of the range is 0
+        var limits = src_extent(this.getDisplayData(), function (d) { return d.value; });
+        var domain = linear_linear()
+            .domain(limits)
+            .nice()
+            .domain();
+        // Ensuring limits start at 0 to make scale look more `nicer`
+        if (domain[0] > 0) {
+            domain[0] = 0;
+        }
+        // Ensure the median of the range is 0 if domain extends into both negative & positive
         if (domain[0] < 0 && domain[1] > 0) {
             if (Math.abs(domain[0]) > domain[1]) {
                 domain[1] = Math.abs(domain[0]);
@@ -44155,7 +44141,7 @@ var heatmap_HeatmapModel = /** @class */ (function (_super) {
     /**
      * @override
      * @param value
-     * @returns
+     * @returns string
      */
     HeatmapModel.prototype.getFillColor = function (value) {
         return this._colorScale(value);