@carbon/charts-vue 0.53.3 → 0.54.1

package/charts-vue.common.js

@@ -310,6 +310,7 @@ __webpack_require__.d(events_namespaceObject, "Legend", function() { return even
 __webpack_require__.d(events_namespaceObject, "CirclePack", function() { return events_CirclePack; });
 __webpack_require__.d(events_namespaceObject, "Alluvial", function() { return events_Alluvial; });
 __webpack_require__.d(events_namespaceObject, "Meter", function() { return events_Meter; });
+__webpack_require__.d(events_namespaceObject, "Heatmap", function() { return events_Heatmap; });
 var configuration_namespaceObject = {};
 __webpack_require__.r(configuration_namespaceObject);
 __webpack_require__.d(configuration_namespaceObject, "grid", function() { return grid; });
@@ -324,12 +325,13 @@ __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 legend; });
+__webpack_require__.d(configuration_namespaceObject, "legend", function() { return configuration_non_customizable_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; });
 __webpack_require__.d(configuration_namespaceObject, "radar", function() { return radar; });
 __webpack_require__.d(configuration_namespaceObject, "alluvial", function() { return alluvial; });
+__webpack_require__.d(configuration_namespaceObject, "heatmap", function() { return heatmap; });
 __webpack_require__.d(configuration_namespaceObject, "spacers", function() { return spacers; });
 __webpack_require__.d(configuration_namespaceObject, "tooltips", function() { return tooltips; });
 __webpack_require__.d(configuration_namespaceObject, "transitions", function() { return configuration_non_customizable_transitions; });
@@ -441,6 +443,7 @@ var events_Toolbar;
 (function (Toolbar) {
     Toolbar["SHOW_OVERFLOW_MENU"] = "show-toolbar-overflow-menu";
     Toolbar["HIDE_OVERFLOW_MENU"] = "hide-toolbar-overflow-menu";
+    Toolbar["BUTTON_CLICK"] = "toolbar-button-click";
 })(events_Toolbar || (events_Toolbar = {}));
 /**
  * enum of all events related to the zoom-bar
@@ -476,6 +479,9 @@ var events_Axis;
     Axis["LABEL_MOUSEMOVE"] = "axis-label-mousemove";
     Axis["LABEL_CLICK"] = "axis-label-click";
     Axis["LABEL_MOUSEOUT"] = "axis-label-mouseout";
+    Axis["LABEL_FOCUS"] = "axis-label-focus";
+    Axis["LABEL_BLUR"] = "axis-label-blur";
+    Axis["RENDER_COMPLETE"] = "axis-render-complete";
 })(events_Axis || (events_Axis = {}));
 /**
  * enum of all area graph events
@@ -651,6 +657,16 @@ var events_Meter;
     Meter["METER_MOUSEOUT"] = "meter-mouseout";
     Meter["METER_MOUSEMOVE"] = "meter-mousemove";
 })(events_Meter || (events_Meter = {}));
+/**
+ * enum of all heatmap related events
+ */
+var events_Heatmap;
+(function (Heatmap) {
+    Heatmap["HEATMAP_MOUSEOVER"] = "heatmap-mouseover";
+    Heatmap["HEATMAP_CLICK"] = "heatmap-click";
+    Heatmap["HEATMAP_MOUSEOUT"] = "heatmap-mouseout";
+    Heatmap["HEATMAP_MOUSEMOVE"] = "hetmap-mousemove";
+})(events_Heatmap || (events_Heatmap = {}));
 //# sourceMappingURL=../../src/interfaces/events.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/interfaces/enums.js
 
@@ -884,6 +900,7 @@ var ToolbarControlTypes;
     ToolbarControlTypes["RESET_ZOOM"] = "Reset zoom";
     ToolbarControlTypes["MAKE_FULLSCREEN"] = "Make fullscreen";
     ToolbarControlTypes["SHOW_AS_DATATABLE"] = "Show as data-table";
+    ToolbarControlTypes["CUSTOM"] = "Custom";
 })(ToolbarControlTypes || (ToolbarControlTypes = {}));
 /**
  * enum of title orientations for _vertical axes_
@@ -906,6 +923,31 @@ var LegendItemType;
     LegendItemType["QUARTILE"] = "quartile";
     LegendItemType["ZOOM"] = "zoom";
 })(LegendItemType || (LegendItemType = {}));
+/**
+ * enum of color legend types
+ */
+var ColorLegendType;
+(function (ColorLegendType) {
+    ColorLegendType["LINEAR"] = "linear";
+    ColorLegendType["QUANTIZE"] = "quantize";
+})(ColorLegendType || (ColorLegendType = {}));
+/**
+ * enum of divider status for heatmap
+ */
+var DividerStatus;
+(function (DividerStatus) {
+    DividerStatus["ON"] = "on";
+    DividerStatus["AUTO"] = "auto";
+    DividerStatus["OFF"] = "off";
+})(DividerStatus || (DividerStatus = {}));
+/**
+ * enum of axis flavor
+ */
+var AxisFlavor;
+(function (AxisFlavor) {
+    AxisFlavor["DEFAULT"] = "default";
+    AxisFlavor["HOVERABLE"] = "hoverable";
+})(AxisFlavor || (AxisFlavor = {}));
 //# sourceMappingURL=../../src/interfaces/enums.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/interfaces/index.js
 
@@ -946,6 +988,9 @@ var configuration_non_customizable_axis = {
         compareTo: 'marker',
     },
     paddingRatio: 0.1,
+    hover: {
+        rectanglePadding: 4,
+    },
 };
 var canvasZoomSettings = {
     duration: 1000,
@@ -997,7 +1042,7 @@ var boxplot = {
 var configuration_non_customizable_histogram = {
     defaultBins: 10,
 };
-var legend = {
+var configuration_non_customizable_legend = {
     items: {
         status: {
             ACTIVE: 1,
@@ -1050,6 +1095,11 @@ var legend = {
         iconData: [{ x: 0, y: 0, width: 12, height: 12 }],
         color: '#8D8D8D',
     },
+    color: {
+        barWidth: 300,
+        barHeight: 8,
+        axisYTranslation: 10,
+    },
 };
 var configuration_non_customizable_lines = {
     opacity: {
@@ -1119,6 +1169,11 @@ var alluvial = {
         selected: 1,
     },
 };
+var heatmap = {
+    minCellDividerDimension: 16,
+    // Ensures axes lines are displayed with or without stroke disabled
+    chartPadding: 0.5,
+};
 var spacers = {
     default: {
         size: 24,
@@ -8776,6 +8831,17 @@ var alluvialChart = tools_Tools.merge({}, chart, {
         nodes: [],
     },
 });
+var heatmapChart = tools_Tools.merge({}, chart, {
+    axes: configuration_axes,
+    heatmap: {
+        divider: {
+            state: DividerStatus.AUTO,
+        },
+        colorLegend: {
+            type: 'linear',
+        },
+    },
+});
 var configuration_options = {
     chart: chart,
     axisChart: axisChart,
@@ -8803,6 +8869,7 @@ var configuration_options = {
     circlePackChart: circlePackChart,
     wordCloudChart: wordCloudChart,
     alluvialChart: alluvialChart,
+    heatmapChart: heatmapChart,
 };
 
 //# sourceMappingURL=../src/configuration.js.map
@@ -9494,7 +9561,7 @@ var model_ChartModel = /** @class */ (function () {
         if (!this.get('data')) {
             return null;
         }
-        var ACTIVE = legend.items.status.ACTIVE;
+        var ACTIVE = configuration_non_customizable_legend.items.status.ACTIVE;
         var dataGroups = this.getDataGroups(groups);
         var groupMapsTo = this.getOptions().data.groupMapsTo;
         var allDataFromDomain = this.getAllDataFromDomain(groups);
@@ -9539,7 +9606,7 @@ var model_ChartModel = /** @class */ (function () {
         return this.get('dataGroups');
     };
     ChartModel.prototype.getActiveDataGroups = function (groups) {
-        var ACTIVE = legend.items.status.ACTIVE;
+        var ACTIVE = configuration_non_customizable_legend.items.status.ACTIVE;
         return this.getDataGroups(groups).filter(function (dataGroup) { return dataGroup.status === ACTIVE; });
     };
     ChartModel.prototype.getDataGroupNames = function (groups) {
@@ -9811,7 +9878,7 @@ var model_ChartModel = /** @class */ (function () {
      * Data labels
      */
     ChartModel.prototype.toggleDataLabel = function (changedLabel) {
-        var _a = legend.items.status, ACTIVE = _a.ACTIVE, DISABLED = _a.DISABLED;
+        var _a = configuration_non_customizable_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; });
@@ -10022,7 +10089,7 @@ var model_ChartModel = /** @class */ (function () {
     };
     ChartModel.prototype.generateDataGroups = function (data) {
         var groupMapsTo = this.getOptions().data.groupMapsTo;
-        var _a = legend.items.status, ACTIVE = _a.ACTIVE, DISABLED = _a.DISABLED;
+        var _a = configuration_non_customizable_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
@@ -16011,6 +16078,22 @@ var scales_cartesian_CartesianScales = /** @class */ (function (_super) {
             this.dualAxes = true;
         }
     };
+    CartesianScales.prototype.getCustomDomainValuesByposition = function (axisPosition) {
+        var domain = tools_Tools.getProperty(this.model.getOptions(), 'axes', axisPosition, 'domain');
+        // Check if domain is an array
+        if (domain && !Array.isArray(domain)) {
+            throw new Error("Domain in " + axisPosition + " axis is not a valid array");
+        }
+        // Determine number of elements passed in domain depending on scale types
+        if (Array.isArray(domain)) {
+            if ((this.scaleTypes[axisPosition] === ScaleTypes.LINEAR ||
+                this.scaleTypes[axisPosition] === ScaleTypes.TIME) &&
+                domain.length !== 2) {
+                throw new Error("There can only be 2 elements in domain for scale type: " + this.scaleTypes[axisPosition]);
+            }
+        }
+        return domain;
+    };
     CartesianScales.prototype.getOrientation = function () {
         return this.orientation;
     };
@@ -17528,6 +17611,11 @@ var zoom_Zoom = /** @class */ (function (_super) {
         var cartesianScales = this.services.cartesianScales;
         var mainXAxisPosition = cartesianScales.getMainXAxisPosition();
         var domainIdentifier = cartesianScales.getDomainIdentifier();
+        var customDomain = tools_Tools.getProperty(this.model.getOptions(), 'axes', mainXAxisPosition, 'domain');
+        // return custom domain if exists && valid
+        if (Array.isArray(customDomain) && customDomain.length === 2) {
+            return customDomain;
+        }
         // default to full range with extended domain
         return cartesianScales.extendsDomain(mainXAxisPosition, src_extent(allZoomBarData, function (d) { return d[domainIdentifier]; }));
     };
@@ -17906,7 +17994,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 = legend.items.status.DISABLED;
+        var DISABLED = configuration_non_customizable_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()
@@ -17930,11 +18018,11 @@ var legend_Legend = /** @class */ (function (_super) {
         addedLegendItems
             .merge(svg.selectAll('div.legend-item'))
             .classed('active', function (d, i) {
-            return d.status === legend.items.status.ACTIVE;
+            return d.status === configuration_non_customizable_legend.items.status.ACTIVE;
         });
         var legendClickable = tools_Tools.getProperty(this.getOptions(), 'legend', 'clickable');
         svg.classed('clickable', legendClickable && dataGroups.length > 1);
-        var checkboxRadius = legend.checkbox.radius;
+        var checkboxRadius = configuration_non_customizable_legend.checkbox.radius;
         var addedCheckboxes = addedLegendItems
             .append('div')
             .classed('checkbox', true);
@@ -17947,7 +18035,7 @@ var legend_Legend = /** @class */ (function (_super) {
         })
             .attr('aria-checked', function (_a) {
             var status = _a.status;
-            return status === legend.items.status.ACTIVE;
+            return status === configuration_non_customizable_legend.items.status.ACTIVE;
         })
             .attr('width', checkboxRadius * 2)
             .attr('height', checkboxRadius * 2)
@@ -17959,13 +18047,13 @@ var legend_Legend = /** @class */ (function (_super) {
             });
         })
             .style('background', function (d) {
-            return d.status === legend.items.status.ACTIVE
+            return d.status === configuration_non_customizable_legend.items.status.ACTIVE
                 ? _this.model.getFillColor(d.name) ||
                     _this.model.getStrokeColor(d.name)
                 : null;
         })
             .classed('active', function (d, i) {
-            return d.status === legend.items.status.ACTIVE;
+            return d.status === configuration_non_customizable_legend.items.status.ACTIVE;
         });
         var addedCheckIcons = addedCheckboxes
             .append('svg')
@@ -18050,7 +18138,7 @@ var legend_Legend = /** @class */ (function (_super) {
         return dataGroups;
     };
     Legend.prototype.addAdditionalItem = function (additionalItem, itemConfig, indexOfItem) {
-        var _a = legend.area, width = _a.width, height = _a.height;
+        var _a = configuration_non_customizable_legend.area, width = _a.width, height = _a.height;
         if (itemConfig.type === LegendItemType.RADIUS) {
             // Circular icon
             additionalItem
@@ -18063,7 +18151,7 @@ var legend_Legend = /** @class */ (function (_super) {
                 .style('height', height + "px");
         }
         if (itemConfig.type === LegendItemType.RADIUS) {
-            var _b = legend.radius, iconData = _b.iconData, fill = _b.fill, stroke = _b.stroke;
+            var _b = configuration_non_customizable_legend.radius, iconData = _b.iconData, fill = _b.fill, stroke = _b.stroke;
             var circleEnter = additionalItem
                 .attr('fill', 'none')
                 .selectAll('circle')
@@ -18081,7 +18169,7 @@ var legend_Legend = /** @class */ (function (_super) {
                 .style('stroke', itemConfig.stroke ? itemConfig.stroke : stroke);
         }
         else if (itemConfig.type === LegendItemType.LINE) {
-            var lineConfig = legend.line;
+            var lineConfig = configuration_non_customizable_legend.line;
             if (additionalItem.select('line.line').empty()) {
                 additionalItem
                     .append('line')
@@ -18108,13 +18196,13 @@ var legend_Legend = /** @class */ (function (_super) {
                     .attr('width', width)
                     .attr('height', height)
                     .style('fill', indexOfItem > 3 && !itemConfig.fill
-                    ? legend.area.fill
+                    ? configuration_non_customizable_legend.area.fill
                     : itemConfig.fill)
                     .style('stroke', itemConfig.stroke);
             }
         }
         else if (itemConfig.type === LegendItemType.SIZE) {
-            var _c = legend.size, iconData = _c.iconData, fill = _c.fill, stroke = _c.stroke;
+            var _c = configuration_non_customizable_legend.size, iconData = _c.iconData, fill = _c.fill, stroke = _c.stroke;
             var sizeEnter = additionalItem
                 .attr('fill', 'none')
                 .attr('role', Roles.IMG)
@@ -18133,7 +18221,7 @@ var legend_Legend = /** @class */ (function (_super) {
                 .style('stroke-width', 1);
         }
         else if (itemConfig.type === LegendItemType.QUARTILE) {
-            var iconData = legend.quartile.iconData;
+            var iconData = configuration_non_customizable_legend.quartile.iconData;
             var quartileEnter = additionalItem
                 .selectAll('rect')
                 .attr('role', Roles.IMG)
@@ -18287,6 +18375,431 @@ var legend_Legend = /** @class */ (function (_super) {
 }(component_Component));
 
 //# sourceMappingURL=../../../src/components/essentials/legend.js.map
+// CONCATENATED MODULE: /home/runner/work/carbon-charts/carbon-charts/node_modules/d3-axis/src/identity.js
+/* harmony default export */ var d3_axis_src_identity = (function(x) {
+  return x;
+});
+
+// CONCATENATED MODULE: /home/runner/work/carbon-charts/carbon-charts/node_modules/d3-axis/src/axis.js
+
+
+var axis_top = 1,
+    axis_right = 2,
+    bottom = 3,
+    axis_left = 4,
+    axis_epsilon = 1e-6;
+
+function axis_translateX(x) {
+  return "translate(" + x + ",0)";
+}
+
+function axis_translateY(y) {
+  return "translate(0," + y + ")";
+}
+
+function axis_number(scale) {
+  return d => +scale(d);
+}
+
+function center(scale, offset) {
+  offset = Math.max(0, scale.bandwidth() - offset * 2) / 2;
+  if (scale.round()) offset = Math.round(offset);
+  return d => +scale(d) + offset;
+}
+
+function entering() {
+  return !this.__axis;
+}
+
+function axis_axis(orient, scale) {
+  var tickArguments = [],
+      tickValues = null,
+      tickFormat = null,
+      tickSizeInner = 6,
+      tickSizeOuter = 6,
+      tickPadding = 3,
+      offset = typeof window !== "undefined" && window.devicePixelRatio > 1 ? 0 : 0.5,
+      k = orient === axis_top || orient === axis_left ? -1 : 1,
+      x = orient === axis_left || orient === axis_right ? "x" : "y",
+      transform = orient === axis_top || orient === bottom ? axis_translateX : axis_translateY;
+
+  function axis(context) {
+    var values = tickValues == null ? (scale.ticks ? scale.ticks.apply(scale, tickArguments) : scale.domain()) : tickValues,
+        format = tickFormat == null ? (scale.tickFormat ? scale.tickFormat.apply(scale, tickArguments) : d3_axis_src_identity) : tickFormat,
+        spacing = Math.max(tickSizeInner, 0) + tickPadding,
+        range = scale.range(),
+        range0 = +range[0] + offset,
+        range1 = +range[range.length - 1] + offset,
+        position = (scale.bandwidth ? center : axis_number)(scale.copy(), offset),
+        selection = context.selection ? context.selection() : context,
+        path = selection.selectAll(".domain").data([null]),
+        tick = selection.selectAll(".tick").data(values, scale).order(),
+        tickExit = tick.exit(),
+        tickEnter = tick.enter().append("g").attr("class", "tick"),
+        line = tick.select("line"),
+        text = tick.select("text");
+
+    path = path.merge(path.enter().insert("path", ".tick")
+        .attr("class", "domain")
+        .attr("stroke", "currentColor"));
+
+    tick = tick.merge(tickEnter);
+
+    line = line.merge(tickEnter.append("line")
+        .attr("stroke", "currentColor")
+        .attr(x + "2", k * tickSizeInner));
+
+    text = text.merge(tickEnter.append("text")
+        .attr("fill", "currentColor")
+        .attr(x, k * spacing)
+        .attr("dy", orient === axis_top ? "0em" : orient === bottom ? "0.71em" : "0.32em"));
+
+    if (context !== selection) {
+      path = path.transition(context);
+      tick = tick.transition(context);
+      line = line.transition(context);
+      text = text.transition(context);
+
+      tickExit = tickExit.transition(context)
+          .attr("opacity", axis_epsilon)
+          .attr("transform", function(d) { return isFinite(d = position(d)) ? transform(d + offset) : this.getAttribute("transform"); });
+
+      tickEnter
+          .attr("opacity", axis_epsilon)
+          .attr("transform", function(d) { var p = this.parentNode.__axis; return transform((p && isFinite(p = p(d)) ? p : position(d)) + offset); });
+    }
+
+    tickExit.remove();
+
+    path
+        .attr("d", orient === axis_left || orient === axis_right
+            ? (tickSizeOuter ? "M" + k * tickSizeOuter + "," + range0 + "H" + offset + "V" + range1 + "H" + k * tickSizeOuter : "M" + offset + "," + range0 + "V" + range1)
+            : (tickSizeOuter ? "M" + range0 + "," + k * tickSizeOuter + "V" + offset + "H" + range1 + "V" + k * tickSizeOuter : "M" + range0 + "," + offset + "H" + range1));
+
+    tick
+        .attr("opacity", 1)
+        .attr("transform", function(d) { return transform(position(d) + offset); });
+
+    line
+        .attr(x + "2", k * tickSizeInner);
+
+    text
+        .attr(x, k * spacing)
+        .text(format);
+
+    selection.filter(entering)
+        .attr("fill", "none")
+        .attr("font-size", 10)
+        .attr("font-family", "sans-serif")
+        .attr("text-anchor", orient === axis_right ? "start" : orient === axis_left ? "end" : "middle");
+
+    selection
+        .each(function() { this.__axis = position; });
+  }
+
+  axis.scale = function(_) {
+    return arguments.length ? (scale = _, axis) : scale;
+  };
+
+  axis.ticks = function() {
+    return tickArguments = Array.from(arguments), axis;
+  };
+
+  axis.tickArguments = function(_) {
+    return arguments.length ? (tickArguments = _ == null ? [] : Array.from(_), axis) : tickArguments.slice();
+  };
+
+  axis.tickValues = function(_) {
+    return arguments.length ? (tickValues = _ == null ? null : Array.from(_), axis) : tickValues && tickValues.slice();
+  };
+
+  axis.tickFormat = function(_) {
+    return arguments.length ? (tickFormat = _, axis) : tickFormat;
+  };
+
+  axis.tickSize = function(_) {
+    return arguments.length ? (tickSizeInner = tickSizeOuter = +_, axis) : tickSizeInner;
+  };
+
+  axis.tickSizeInner = function(_) {
+    return arguments.length ? (tickSizeInner = +_, axis) : tickSizeInner;
+  };
+
+  axis.tickSizeOuter = function(_) {
+    return arguments.length ? (tickSizeOuter = +_, axis) : tickSizeOuter;
+  };
+
+  axis.tickPadding = function(_) {
+    return arguments.length ? (tickPadding = +_, axis) : tickPadding;
+  };
+
+  axis.offset = function(_) {
+    return arguments.length ? (offset = +_, axis) : offset;
+  };
+
+  return axis;
+}
+
+function axisTop(scale) {
+  return axis_axis(axis_top, scale);
+}
+
+function axisRight(scale) {
+  return axis_axis(axis_right, scale);
+}
+
+function axisBottom(scale) {
+  return axis_axis(bottom, scale);
+}
+
+function axisLeft(scale) {
+  return axis_axis(axis_left, scale);
+}
+
+// CONCATENATED MODULE: /home/runner/work/carbon-charts/carbon-charts/node_modules/d3-interpolate/src/quantize.js
+/* harmony default export */ var quantize = (function(interpolator, n) {
+  var samples = new Array(n);
+  for (var i = 0; i < n; ++i) samples[i] = interpolator(i / (n - 1));
+  return samples;
+});
+
+// CONCATENATED MODULE: ./node_modules/@carbon/charts/components/essentials/color-scale-legend.js
+var color_scale_legend_extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+// Internal Imports
+
+
+
+
+
+// D3 imports
+
+
+
+var color_scale_legend_ColorScaleLegend = /** @class */ (function (_super) {
+    color_scale_legend_extends(ColorScaleLegend, _super);
+    function ColorScaleLegend() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = 'color-legend';
+        _this.renderType = RenderTypes.SVG;
+        _this.gradient_id = 'gradient-id-' + Math.floor(Math.random() * 99999999999);
+        _this.handleAxisComplete = 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) {
+                var title = tools_Tools.getProperty(_this.getOptions(), 'heatmap', 'colorLegend', 'title');
+                var cartesianScales = _this.services.cartesianScales;
+                // Get available chart area
+                var mainXScale = cartesianScales.getMainXScale();
+                var xDimensions = mainXScale.range();
+                // Align legend with the axis
+                if (xDimensions[0] > 1) {
+                    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
+                        var availableSpace = xDimensions[0] - textWidth - 9;
+                        // If space is available align the the label with the axis labels
+                        if (availableSpace > 1) {
+                            svg.select('g.legend-title').attr('transform', "translate(" + availableSpace + ", 0)");
+                        }
+                        else {
+                            // Move the legend down by 16 pixels to display legend text on top
+                            svg.select('g.legend').attr('transform', "translate(" + xDimensions[0] + ", 16)");
+                            // Align legend title with start of axis
+                            svg.select('g.legend-title').attr('transform', "translate(" + xDimensions[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);
+    };
+    ColorScaleLegend.prototype.render = function (animate) {
+        if (animate === void 0) { animate = false; }
+        var options = this.getOptions();
+        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;
+        }
+        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)");
+        }
+        // If domain consists of negative and positive values, use diverging palettes
+        var colorScheme = domain[0] < 0 && domain[1] > 0 ? 'diverge' : 'mono';
+        // Use default color pairing options if not in defined range
+        if (colorPairingOption < 1 &&
+            colorPairingOption > 4 &&
+            colorScheme === 'mono') {
+            colorPairingOption = 1;
+        }
+        else if (colorPairingOption < 1 &&
+            colorPairingOption > 2 &&
+            colorScheme === 'diverge') {
+            colorPairingOption = 1;
+        }
+        var colorPairing = [];
+        // Carbon charts has 11 colors for a single monochromatic palette & 17 for a divergent palette
+        var colorGroupingLength = colorScheme === 'diverge' ? 17 : 11;
+        if (!customColorsEnabled) {
+            // Add class names to list and the amount based on the color scheme
+            for (var i = 1; i < colorGroupingLength + 1; i++) {
+                colorPairing.push(colorScaleType === ColorLegendType.LINEAR
+                    ? "stop-color-" + colorScheme + "-" + colorPairingOption + "-" + i
+                    : "fill-" + colorScheme + "-" + colorPairingOption + "-" + i);
+            }
+        }
+        else {
+            // 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);
+        }
+    };
+    ColorScaleLegend.prototype.destroy = function () {
+        // Remove legend listeners
+        var eventsFragment = this.services.events;
+        eventsFragment.removeEventListener(Events.Axis.RENDER_COMPLETE, this.handleAxisComplete);
+    };
+    return ColorScaleLegend;
+}(legend_Legend));
+
+//# sourceMappingURL=../../../src/components/essentials/color-scale-legend.js.map
 // EXTERNAL MODULE: /home/runner/work/carbon-charts/carbon-charts/node_modules/carbon-components/node_modules/warning/browser.js
 var browser = __webpack_require__("9b04");
 
@@ -33472,7 +33985,7 @@ function justify(node, n) {
   return node.sourceLinks.length ? node.depth : n - 1;
 }
 
-function center(node) {
+function align_center(node) {
   return node.targetLinks.length ? node.depth
       : node.sourceLinks.length ? src_min_min(node.sourceLinks, targetDepth) - 1
       : 0;
@@ -34646,6 +35159,376 @@ var alluvial_Alluvial = /** @class */ (function (_super) {
 }(component_Component));
 
 //# sourceMappingURL=../../../src/components/graphs/alluvial.js.map
+// CONCATENATED MODULE: ./node_modules/@carbon/charts/components/graphs/heatmap.js
+var heatmap_extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+// Internal Imports
+
+
+
+
+
+
+// D3 Imports
+
+
+var heatmap_Heatmap = /** @class */ (function (_super) {
+    heatmap_extends(Heatmap, _super);
+    function Heatmap() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = 'heatmap';
+        _this.renderType = RenderTypes.SVG;
+        _this.matrix = {};
+        _this.xBandwidth = 0;
+        _this.yBandwidth = 0;
+        _this.translationUnits = {
+            x: 0,
+            y: 0,
+        };
+        // Highlight elements that match the hovered axis item
+        _this.handleAxisOnHover = function (event) {
+            var detail = event.detail;
+            var datum = detail.datum;
+            // Unique ranges and domains
+            var ranges = _this.model.getUniqueRanges();
+            var domains = _this.model.getUniqueDomain();
+            // Labels
+            var domainLabel = _this.services.cartesianScales.getDomainLabel();
+            var rangeLabel = _this.services.cartesianScales.getRangeLabel();
+            // Scales
+            var mainXScale = _this.services.cartesianScales.getMainXScale();
+            var mainYScale = _this.services.cartesianScales.getMainYScale();
+            var label = '', sum = 0, minimum = 0, maximum = 0;
+            // Check to see where datum belongs
+            if (_this.matrix[datum] !== undefined) {
+                label = domainLabel;
+                // Iterate through Object and get sum, min, and max
+                ranges.forEach(function (element) {
+                    var value = _this.matrix[datum][element].value || 0;
+                    sum += value;
+                    minimum = value < minimum ? value : minimum;
+                    maximum = value > maximum ? value : maximum;
+                });
+            }
+            else {
+                label = rangeLabel;
+                domains.forEach(function (element) {
+                    var value = _this.matrix[element][datum].value || 0;
+                    sum += value;
+                    minimum = value < minimum ? value : minimum;
+                    maximum = value > maximum ? value : maximum;
+                });
+            }
+            if (mainXScale(datum) !== undefined) {
+                _this.parent
+                    .select('g.multi-cell.column-highlight')
+                    .classed('highlighter-hidden', false)
+                    .attr('transform', "translate(" + mainXScale(datum) + ", " + min_min(mainYScale.range()) + ")");
+            }
+            else if (mainYScale(datum) !== undefined) {
+                _this.parent
+                    .select('g.multi-cell.row-highlight')
+                    .classed('highlighter-hidden', false)
+                    .attr('transform', "translate(" + min_min(mainXScale.range()) + "," + mainYScale(datum) + ")");
+            }
+            // Dispatch tooltip show event
+            _this.services.events.dispatchEvent(Events.Tooltip.SHOW, {
+                event: detail.event,
+                hoveredElement: src_select(event.detail.element),
+                items: [
+                    {
+                        label: label,
+                        value: datum,
+                        bold: true,
+                    },
+                    {
+                        label: 'Min',
+                        value: minimum,
+                    },
+                    {
+                        label: 'Max',
+                        value: maximum,
+                    },
+                    {
+                        label: 'Average',
+                        value: sum / domains.length,
+                    },
+                ],
+            });
+        };
+        // Un-highlight all elements
+        _this.handleAxisMouseOut = function (event) {
+            // Hide column/row
+            _this.parent
+                .selectAll('g.multi-cell')
+                .classed('highlighter-hidden', true);
+            // Dispatch hide tooltip event
+            _this.services.events.dispatchEvent(Events.Tooltip.HIDE, {
+                event: event,
+            });
+        };
+        return _this;
+    }
+    Heatmap.prototype.init = function () {
+        var eventsFragment = this.services.events;
+        // Highlight correct cells on Axis item hovers
+        eventsFragment.addEventListener(Events.Axis.LABEL_MOUSEOVER, this.handleAxisOnHover);
+        // Highlight correct cells on Axis item mouseouts
+        eventsFragment.addEventListener(Events.Axis.LABEL_MOUSEOUT, this.handleAxisMouseOut);
+        // Highlight correct cells on Axis item focus
+        eventsFragment.addEventListener(Events.Axis.LABEL_FOCUS, this.handleAxisOnHover);
+        // Highlight correct cells on Axis item  blur
+        eventsFragment.addEventListener(Events.Axis.LABEL_BLUR, this.handleAxisMouseOut);
+    };
+    Heatmap.prototype.render = function (animate) {
+        var _this = this;
+        if (animate === void 0) { animate = true; }
+        var svg = this.getComponentContainer({ withinChartClip: true });
+        // Lower the chart so the axes are always visible
+        svg.lower();
+        var cartesianScales = this.services.cartesianScales;
+        this.matrix = this.model.getMatrix();
+        svg.html('');
+        if (tools_Tools.getProperty(this.getOptions(), 'data', 'loading')) {
+            return;
+        }
+        // determine x and y axis scale
+        var mainXScale = cartesianScales.getMainXScale();
+        var mainYScale = cartesianScales.getMainYScale();
+        var domainIdentifier = cartesianScales.getDomainIdentifier();
+        var rangeIdentifier = cartesianScales.getRangeIdentifier();
+        // Get unique axis values & create a matrix
+        var uniqueDomain = this.model.getUniqueDomain();
+        var uniqueRange = this.model.getUniqueRanges();
+        // Get matrix in the form of an array to create a single heatmap group
+        var matrixArray = this.model.getMatrixAsArray();
+        // Get available chart area
+        var xRange = mainXScale.range();
+        var yRange = mainYScale.range();
+        // Determine rectangle dimensions based on the number of unique domain and range
+        this.xBandwidth = Math.abs((xRange[1] - xRange[0]) / uniqueDomain.length);
+        this.yBandwidth = Math.abs((yRange[1] - yRange[0]) / uniqueRange.length);
+        var patternID = this.services.domUtils.generateElementIDString("heatmap-pattern-stripes");
+        // Create a striped pattern for missing data
+        svg.append('defs')
+            .append('pattern')
+            .attr('id', patternID)
+            .attr('width', 3)
+            .attr('height', 3)
+            .attr('patternUnits', 'userSpaceOnUse')
+            .attr('patternTransform', 'rotate(45)')
+            .append('rect')
+            .classed('pattern-fill', true)
+            .attr('width', 0.5)
+            .attr('height', 8);
+        var rectangles = svg
+            .selectAll()
+            .data(matrixArray)
+            .enter()
+            .append('g')
+            .attr('class', function (d) { return "heat-" + d.index; })
+            .classed('cell', true)
+            .attr('transform', function (d) {
+            return "translate(" + mainXScale(d[domainIdentifier]) + ", " + mainYScale(d[rangeIdentifier]) + ")";
+        })
+            .append('rect')
+            .attr('class', function (d) {
+            return _this.model.getColorClassName({
+                value: d.value,
+                originalClassName: "heat-" + d.index,
+            });
+        })
+            .classed('heat', true)
+            .classed('null-state', function (d) {
+            return d.index === -1 || d.value === null ? true : false;
+        })
+            .attr('width', this.xBandwidth)
+            .attr('height', this.yBandwidth)
+            .style('fill', function (d) {
+            // Check if a valid value exists
+            if (d.index === -1 || d.value === null) {
+                return "url(#" + patternID + ")";
+            }
+            return _this.model.getFillColor(Number(d.value));
+        })
+            .attr('aria-label', function (d) { return d.value; });
+        // Cell highlight box
+        this.createOuterBox('g.cell-highlight', this.xBandwidth, this.yBandwidth);
+        // Column highlight box
+        this.createOuterBox('g.multi-cell.column-highlight', this.xBandwidth, Math.abs(yRange[1] - yRange[0]));
+        // Row highlight box
+        this.createOuterBox('g.multi-cell.row-highlight', Math.abs(xRange[1] - xRange[0]), this.yBandwidth);
+        if (this.determineDividerStatus()) {
+            rectangles.style('stroke-width', '1px');
+            this.parent.select('g.cell-highlight').classed('cell-2', true);
+        }
+        this.addEventListener();
+    };
+    /**
+     * Generates a box using lines to create a hover effect
+     * The lines have drop shadow in their respective direction
+     * @param parentTag - tag name
+     * @param xBandwidth - X length
+     * @param yBandwidth - y length
+     */
+    Heatmap.prototype.createOuterBox = function (parentTag, xBandwidth, yBandwidth) {
+        // Create a highlighter in the parent component so the shadow and the lines do not get clipped
+        var highlight = dom_utils_DOMUtils.appendOrSelect(this.parent, parentTag)
+            .classed('shadows', true)
+            .classed('highlighter-hidden', true);
+        dom_utils_DOMUtils.appendOrSelect(highlight, 'line.top')
+            .attr('x1', -1)
+            .attr('x2', xBandwidth + 1);
+        dom_utils_DOMUtils.appendOrSelect(highlight, 'line.left')
+            .attr('x1', 0)
+            .attr('y1', -1)
+            .attr('x2', 0)
+            .attr('y2', yBandwidth + 1);
+        dom_utils_DOMUtils.appendOrSelect(highlight, 'line.down')
+            .attr('x1', -1)
+            .attr('x2', xBandwidth + 1)
+            .attr('y1', yBandwidth)
+            .attr('y2', yBandwidth);
+        dom_utils_DOMUtils.appendOrSelect(highlight, 'line.right')
+            .attr('x1', xBandwidth)
+            .attr('x2', xBandwidth)
+            .attr('y1', -1)
+            .attr('y2', yBandwidth + 1);
+    };
+    Heatmap.prototype.determineDividerStatus = function () {
+        // Add dividers if status is not off, will assume auto or on by default.
+        var dividerStatus = tools_Tools.getProperty(this.getOptions(), 'heatmap', 'divider', 'state');
+        // Determine if cell divider should be displayed
+        if (dividerStatus !== DividerStatus.OFF) {
+            if ((dividerStatus === DividerStatus.AUTO &&
+                heatmap.minCellDividerDimension <=
+                    this.xBandwidth &&
+                heatmap.minCellDividerDimension <=
+                    this.yBandwidth) ||
+                dividerStatus === DividerStatus.ON) {
+                return true;
+            }
+        }
+        return false;
+    };
+    Heatmap.prototype.addEventListener = function () {
+        var self = this;
+        var cartesianScales = this.services.cartesianScales;
+        var options = this.getOptions();
+        var totalLabel = lodash_es_get(options, 'tooltip.totalLabel');
+        var domainIdentifier = cartesianScales.getDomainIdentifier();
+        var rangeIdentifier = cartesianScales.getRangeIdentifier();
+        var domainLabel = cartesianScales.getDomainLabel();
+        var rangeLabel = cartesianScales.getRangeLabel();
+        this.parent
+            .selectAll('g.cell')
+            .on('mouseover', function (event, datum) {
+            var cell = src_select(this);
+            var hoveredElement = cell.select('rect.heat');
+            var nullState = hoveredElement.classed('null-state');
+            // Dispatch event and tooltip only if value exists
+            if (!nullState) {
+                // Get transformation value of node
+                var transform = tools_Tools.getTranformOffsets(cell.attr('transform'));
+                src_select('g.cell-highlight')
+                    .attr('transform', "translate(" + (transform.x + self.translationUnits.x) + ", " + (transform.y + self.translationUnits.y) + ")")
+                    .classed('highlighter-hidden', false);
+                // Dispatch mouse over event
+                self.services.events.dispatchEvent(Events.Heatmap.HEATMAP_MOUSEOVER, {
+                    event: event,
+                    element: hoveredElement,
+                    datum: datum,
+                });
+                // Dispatch tooltip show event
+                self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
+                    event: event,
+                    items: [
+                        {
+                            label: domainLabel,
+                            value: datum[domainIdentifier],
+                        },
+                        {
+                            label: rangeLabel,
+                            value: datum[rangeIdentifier],
+                        },
+                        {
+                            label: totalLabel || 'Total',
+                            value: datum['value'],
+                            color: hoveredElement.style('fill'),
+                        },
+                    ],
+                });
+            }
+        })
+            .on('mousemove', function (event, datum) {
+            // Dispatch mouse move event
+            self.services.events.dispatchEvent(Events.Heatmap.HEATMAP_MOUSEMOVE, {
+                event: event,
+                element: src_select(this),
+                datum: datum,
+            });
+            // Dispatch tooltip move event
+            self.services.events.dispatchEvent(Events.Tooltip.MOVE, {
+                event: event,
+            });
+        })
+            .on('click', function (event, datum) {
+            // Dispatch mouse click event
+            self.services.events.dispatchEvent(Events.Heatmap.HEATMAP_CLICK, {
+                event: event,
+                element: src_select(this),
+                datum: datum,
+            });
+        })
+            .on('mouseout', function (event, datum) {
+            var cell = src_select(this);
+            var hoveredElement = cell.select('rect.heat');
+            var nullState = hoveredElement.classed('null-state');
+            src_select('g.cell-highlight').classed('highlighter-hidden', true);
+            // Dispatch event and tooltip only if value exists
+            if (!nullState) {
+                // Dispatch mouse out event
+                self.services.events.dispatchEvent(Events.Heatmap.HEATMAP_MOUSEOUT, {
+                    event: event,
+                    element: hoveredElement,
+                    datum: datum,
+                });
+                // Dispatch hide tooltip event
+                self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
+                    event: event,
+                    hoveredElement: hoveredElement,
+                });
+            }
+        });
+    };
+    // Remove event listeners
+    Heatmap.prototype.destroy = function () {
+        this.parent
+            .selectAll('rect.heat')
+            .on('mouseover', null)
+            .on('mousemove', null)
+            .on('click', null)
+            .on('mouseout', null);
+        // Remove legend listeners
+        var eventsFragment = this.services.events;
+        eventsFragment.removeEventListener(Events.Legend.ITEM_HOVER, this.handleAxisOnHover);
+        eventsFragment.removeEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleAxisMouseOut);
+    };
+    return Heatmap;
+}(component_Component));
+
+//# sourceMappingURL=../../../src/components/graphs/heatmap.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/components/layout/spacer.js
 var spacer_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -34872,187 +35755,6 @@ var layout_LayoutComponent = /** @class */ (function (_super) {
 }(component_Component));
 
 //# sourceMappingURL=../../../src/components/layout/layout.js.map
-// CONCATENATED MODULE: /home/runner/work/carbon-charts/carbon-charts/node_modules/d3-axis/src/identity.js
-/* harmony default export */ var d3_axis_src_identity = (function(x) {
-  return x;
-});
-
-// CONCATENATED MODULE: /home/runner/work/carbon-charts/carbon-charts/node_modules/d3-axis/src/axis.js
-
-
-var axis_top = 1,
-    axis_right = 2,
-    bottom = 3,
-    axis_left = 4,
-    axis_epsilon = 1e-6;
-
-function axis_translateX(x) {
-  return "translate(" + x + ",0)";
-}
-
-function axis_translateY(y) {
-  return "translate(0," + y + ")";
-}
-
-function axis_number(scale) {
-  return d => +scale(d);
-}
-
-function axis_center(scale, offset) {
-  offset = Math.max(0, scale.bandwidth() - offset * 2) / 2;
-  if (scale.round()) offset = Math.round(offset);
-  return d => +scale(d) + offset;
-}
-
-function entering() {
-  return !this.__axis;
-}
-
-function axis_axis(orient, scale) {
-  var tickArguments = [],
-      tickValues = null,
-      tickFormat = null,
-      tickSizeInner = 6,
-      tickSizeOuter = 6,
-      tickPadding = 3,
-      offset = typeof window !== "undefined" && window.devicePixelRatio > 1 ? 0 : 0.5,
-      k = orient === axis_top || orient === axis_left ? -1 : 1,
-      x = orient === axis_left || orient === axis_right ? "x" : "y",
-      transform = orient === axis_top || orient === bottom ? axis_translateX : axis_translateY;
-
-  function axis(context) {
-    var values = tickValues == null ? (scale.ticks ? scale.ticks.apply(scale, tickArguments) : scale.domain()) : tickValues,
-        format = tickFormat == null ? (scale.tickFormat ? scale.tickFormat.apply(scale, tickArguments) : d3_axis_src_identity) : tickFormat,
-        spacing = Math.max(tickSizeInner, 0) + tickPadding,
-        range = scale.range(),
-        range0 = +range[0] + offset,
-        range1 = +range[range.length - 1] + offset,
-        position = (scale.bandwidth ? axis_center : axis_number)(scale.copy(), offset),
-        selection = context.selection ? context.selection() : context,
-        path = selection.selectAll(".domain").data([null]),
-        tick = selection.selectAll(".tick").data(values, scale).order(),
-        tickExit = tick.exit(),
-        tickEnter = tick.enter().append("g").attr("class", "tick"),
-        line = tick.select("line"),
-        text = tick.select("text");
-
-    path = path.merge(path.enter().insert("path", ".tick")
-        .attr("class", "domain")
-        .attr("stroke", "currentColor"));
-
-    tick = tick.merge(tickEnter);
-
-    line = line.merge(tickEnter.append("line")
-        .attr("stroke", "currentColor")
-        .attr(x + "2", k * tickSizeInner));
-
-    text = text.merge(tickEnter.append("text")
-        .attr("fill", "currentColor")
-        .attr(x, k * spacing)
-        .attr("dy", orient === axis_top ? "0em" : orient === bottom ? "0.71em" : "0.32em"));
-
-    if (context !== selection) {
-      path = path.transition(context);
-      tick = tick.transition(context);
-      line = line.transition(context);
-      text = text.transition(context);
-
-      tickExit = tickExit.transition(context)
-          .attr("opacity", axis_epsilon)
-          .attr("transform", function(d) { return isFinite(d = position(d)) ? transform(d + offset) : this.getAttribute("transform"); });
-
-      tickEnter
-          .attr("opacity", axis_epsilon)
-          .attr("transform", function(d) { var p = this.parentNode.__axis; return transform((p && isFinite(p = p(d)) ? p : position(d)) + offset); });
-    }
-
-    tickExit.remove();
-
-    path
-        .attr("d", orient === axis_left || orient === axis_right
-            ? (tickSizeOuter ? "M" + k * tickSizeOuter + "," + range0 + "H" + offset + "V" + range1 + "H" + k * tickSizeOuter : "M" + offset + "," + range0 + "V" + range1)
-            : (tickSizeOuter ? "M" + range0 + "," + k * tickSizeOuter + "V" + offset + "H" + range1 + "V" + k * tickSizeOuter : "M" + range0 + "," + offset + "H" + range1));
-
-    tick
-        .attr("opacity", 1)
-        .attr("transform", function(d) { return transform(position(d) + offset); });
-
-    line
-        .attr(x + "2", k * tickSizeInner);
-
-    text
-        .attr(x, k * spacing)
-        .text(format);
-
-    selection.filter(entering)
-        .attr("fill", "none")
-        .attr("font-size", 10)
-        .attr("font-family", "sans-serif")
-        .attr("text-anchor", orient === axis_right ? "start" : orient === axis_left ? "end" : "middle");
-
-    selection
-        .each(function() { this.__axis = position; });
-  }
-
-  axis.scale = function(_) {
-    return arguments.length ? (scale = _, axis) : scale;
-  };
-
-  axis.ticks = function() {
-    return tickArguments = Array.from(arguments), axis;
-  };
-
-  axis.tickArguments = function(_) {
-    return arguments.length ? (tickArguments = _ == null ? [] : Array.from(_), axis) : tickArguments.slice();
-  };
-
-  axis.tickValues = function(_) {
-    return arguments.length ? (tickValues = _ == null ? null : Array.from(_), axis) : tickValues && tickValues.slice();
-  };
-
-  axis.tickFormat = function(_) {
-    return arguments.length ? (tickFormat = _, axis) : tickFormat;
-  };
-
-  axis.tickSize = function(_) {
-    return arguments.length ? (tickSizeInner = tickSizeOuter = +_, axis) : tickSizeInner;
-  };
-
-  axis.tickSizeInner = function(_) {
-    return arguments.length ? (tickSizeInner = +_, axis) : tickSizeInner;
-  };
-
-  axis.tickSizeOuter = function(_) {
-    return arguments.length ? (tickSizeOuter = +_, axis) : tickSizeOuter;
-  };
-
-  axis.tickPadding = function(_) {
-    return arguments.length ? (tickPadding = +_, axis) : tickPadding;
-  };
-
-  axis.offset = function(_) {
-    return arguments.length ? (offset = +_, axis) : offset;
-  };
-
-  return axis;
-}
-
-function axisTop(scale) {
-  return axis_axis(axis_top, scale);
-}
-
-function axisRight(scale) {
-  return axis_axis(axis_right, scale);
-}
-
-function axisBottom(scale) {
-  return axis_axis(bottom, scale);
-}
-
-function axisLeft(scale) {
-  return axis_axis(axis_left, scale);
-}
-
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/components/axes/axis.js
 var axis_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -35081,9 +35783,16 @@ var axis_extends = (undefined && undefined.__extends) || (function () {
 var axis_Axis = /** @class */ (function (_super) {
     axis_extends(Axis, _super);
     function Axis(model, services, configs) {
+        var _a;
         var _this = _super.call(this, model, services, configs) || this;
         _this.type = 'axes';
         _this.renderType = RenderTypes.SVG;
+        _this.truncation = (_a = {},
+            _a[AxisPositions.LEFT] = false,
+            _a[AxisPositions.RIGHT] = false,
+            _a[AxisPositions.TOP] = false,
+            _a[AxisPositions.BOTTOM] = false,
+            _a);
         if (configs) {
             _this.configs = configs;
         }
@@ -35511,11 +36220,13 @@ var axis_Axis = /** @class */ (function (_super) {
                     .select("g.axis." + axisPosition + " g.ticks g.tick")
                     .html();
                 container.selectAll('g.ticks g.tick').html(tick_html);
+                var self_1 = this;
                 container
                     .selectAll('g.tick text')
                     .data(axisTickLabels)
                     .text(function (d) {
                     if (d.length > truncationThreshold) {
+                        self_1.truncation[axisPosition] = true;
                         return tools_Tools.truncateLabel(d, truncationType, truncationNumCharacter);
                     }
                     else {
@@ -35550,8 +36261,6 @@ var axis_Axis = /** @class */ (function (_super) {
         var axisOptions = tools_Tools.getProperty(options, 'axes', axisPosition);
         var axisScaleType = tools_Tools.getProperty(axisOptions, 'scaleType');
         var truncationThreshold = tools_Tools.getProperty(axisOptions, 'truncation', 'threshold');
-        var isTimeScaleType = this.scaleType === ScaleTypes.TIME ||
-            axisOptions.scaleType === ScaleTypes.TIME;
         var self = this;
         container
             .selectAll('g.tick text')
@@ -35632,6 +36341,242 @@ var axis_Axis = /** @class */ (function (_super) {
 }(component_Component));
 
 //# sourceMappingURL=../../../src/components/axes/axis.js.map
+// CONCATENATED MODULE: ./node_modules/@carbon/charts/components/axes/hover-axis.js
+var hover_axis_extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var hover_axis_assign = (undefined && undefined.__assign) || function () {
+    hover_axis_assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return hover_axis_assign.apply(this, arguments);
+};
+// Internal Imports
+
+
+
+
+
+// D3 Imports
+
+var hover_axis_HoverAxis = /** @class */ (function (_super) {
+    hover_axis_extends(HoverAxis, _super);
+    function HoverAxis(model, services, configs) {
+        return _super.call(this, model, services, configs) || this;
+    }
+    HoverAxis.prototype.render = function (animate) {
+        if (animate === void 0) { animate = true; }
+        _super.prototype.render.call(this, animate);
+        // Remove existing event listeners to avoid flashing behavior
+        _super.prototype.destroy.call(this);
+        var axisPosition = this.configs.position;
+        var svg = this.getComponentContainer();
+        var container = dom_utils_DOMUtils.appendOrSelect(svg, "g.axis." + axisPosition);
+        var self = this;
+        container.selectAll('g.tick').each(function (_, index) {
+            var g = src_select(this);
+            g.classed('tick-hover', true).attr('tabindex', index === 0 ? 0 : -1);
+            var textNode = g.select('text');
+            var _a = dom_utils_DOMUtils.getSVGElementSize(textNode, {
+                useBBox: true,
+            }), width = _a.width, height = _a.height;
+            var rectangle = dom_utils_DOMUtils.appendOrSelect(g, 'rect.axis-holder');
+            var x = 0, y = 0;
+            // Depending on axis position, apply correct translation & rotation to align the rect
+            // with the text
+            switch (axisPosition) {
+                case AxisPositions.LEFT:
+                    x = -width + Number(textNode.attr('x'));
+                    y = -(height / 2);
+                    break;
+                case AxisPositions.RIGHT:
+                    x = Math.abs(Number(textNode.attr('x')));
+                    y = -(height / 2);
+                    break;
+                case AxisPositions.TOP:
+                    x = -(width / 2);
+                    y = -height + Number(textNode.attr('y')) / 2;
+                    if (self.truncation[axisPosition]) {
+                        x = 0;
+                        rectangle.attr('transform', "rotate(-45)");
+                    }
+                    break;
+                case AxisPositions.BOTTOM:
+                    x = -(width / 2);
+                    y = height / 2 - 2;
+                    if (self.truncation[axisPosition]) {
+                        x = -width;
+                        rectangle.attr('transform', "rotate(-45)");
+                    }
+                    break;
+            }
+            // Translates x position -4 left to keep center after padding
+            // Adds padding on left & right
+            rectangle
+                .attr('x', x - configuration_non_customizable_axis.hover.rectanglePadding)
+                .attr('y', y)
+                .attr('width', width + configuration_non_customizable_axis.hover.rectanglePadding * 2)
+                .attr('height', height)
+                .lower();
+            // Add keyboard event listeners to each group element
+            g.on('keydown', function (event) {
+                // Choose specific arrow key depending on the axis
+                if (axisPosition === AxisPositions.LEFT ||
+                    axisPosition === AxisPositions.RIGHT) {
+                    if (event.key && event.key === 'ArrowUp') {
+                        self.goNext(this, event);
+                    }
+                    else if (event.key && event.key === 'ArrowDown') {
+                        self.goPrevious(this, event);
+                    }
+                }
+                else {
+                    if (event.key && event.key === 'ArrowLeft') {
+                        self.goPrevious(this, event);
+                    }
+                    else if (event.key && event.key === 'ArrowRight') {
+                        self.goNext(this, event);
+                    }
+                }
+            });
+        });
+        // Add event listeners to element group
+        this.addEventListeners();
+    };
+    HoverAxis.prototype.addEventListeners = function () {
+        var svg = this.getComponentContainer();
+        var axisPosition = this.configs.position;
+        var container = dom_utils_DOMUtils.appendOrSelect(svg, "g.axis." + axisPosition);
+        var options = this.getOptions();
+        var axisOptions = tools_Tools.getProperty(options, 'axes', axisPosition);
+        var axisScaleType = tools_Tools.getProperty(axisOptions, 'scaleType');
+        var truncationThreshold = tools_Tools.getProperty(axisOptions, 'truncation', 'threshold');
+        var self = this;
+        container
+            .selectAll('g.tick.tick-hover')
+            .on('mouseover', function (event) {
+            var hoveredElement = src_select(this).select('text');
+            var datum = hoveredElement.datum();
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEOVER, {
+                event: event,
+                element: hoveredElement,
+                datum: datum,
+            });
+            if (axisScaleType === ScaleTypes.LABELS &&
+                datum.length > truncationThreshold) {
+                self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
+                    event: event,
+                    element: hoveredElement,
+                    datum: datum,
+                });
+            }
+        })
+            .on('mousemove', function (event) {
+            var hoveredElement = src_select(this).select('text');
+            var datum = hoveredElement.datum();
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEMOVE, {
+                event: event,
+                element: hoveredElement,
+                datum: datum,
+            });
+            self.services.events.dispatchEvent(Events.Tooltip.MOVE, {
+                event: event,
+            });
+        })
+            .on('click', function (event) {
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_CLICK, {
+                event: event,
+                element: src_select(this).select('text'),
+                datum: src_select(this).select('text').datum(),
+            });
+        })
+            .on('mouseout', function (event) {
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEOUT, {
+                event: event,
+                element: src_select(this).select('text'),
+                datum: src_select(this).select('text').datum(),
+            });
+            if (axisScaleType === ScaleTypes.LABELS) {
+                self.services.events.dispatchEvent(Events.Tooltip.HIDE);
+            }
+        })
+            .on('focus', function (event) {
+            var coordinates = { clientX: 0, clientY: 0 };
+            if (event.target) {
+                // Focus element since we are using arrow keys
+                event.target.focus();
+                var boundingRect = event.target.getBoundingClientRect();
+                coordinates.clientX = boundingRect.x;
+                coordinates.clientY = boundingRect.y;
+            }
+            // Dispatch focus event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_FOCUS, {
+                event: hover_axis_assign(hover_axis_assign({}, event), coordinates),
+                element: src_select(this),
+                datum: src_select(this).select('text').datum(),
+            });
+        })
+            .on('blur', function (event) {
+            // Dispatch blur event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_BLUR, {
+                event: event,
+                element: src_select(this),
+                datum: src_select(this).select('text').datum(),
+            });
+        });
+    };
+    // Focus on the next HTML element sibling
+    HoverAxis.prototype.goNext = function (element, event) {
+        if (element.nextElementSibling &&
+            element.nextElementSibling.tagName !== 'path') {
+            element.nextElementSibling.dispatchEvent(new Event('focus'));
+        }
+        event.preventDefault();
+    };
+    // Focus on the previous HTML element sibling
+    HoverAxis.prototype.goPrevious = function (element, event) {
+        if (element.previousElementSibling &&
+            element.previousElementSibling.tagName !== 'path') {
+            element.previousElementSibling.dispatchEvent(new Event('focus'));
+        }
+        event.preventDefault();
+    };
+    HoverAxis.prototype.destroy = function () {
+        var svg = this.getComponentContainer();
+        var axisPosition = this.configs.position;
+        var container = dom_utils_DOMUtils.appendOrSelect(svg, "g.axis." + axisPosition);
+        // Remove event listeners
+        container
+            .selectAll('g.tick.tick-hover')
+            .on('mouseover', null)
+            .on('mousemove', null)
+            .on('mouseout', null)
+            .on('focus', null)
+            .on('blur', null);
+    };
+    return HoverAxis;
+}(axis_Axis));
+
+//# sourceMappingURL=../../../src/components/axes/hover-axis.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/components/axes/two-dimensional-axes.js
 var two_dimensional_axes_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -35653,6 +36598,7 @@ var two_dimensional_axes_extends = (undefined && undefined.__extends) || (functi
 
 
 
+
 var two_dimensional_axes_TwoDimensionalAxes = /** @class */ (function (_super) {
     two_dimensional_axes_extends(TwoDimensionalAxes, _super);
     function TwoDimensionalAxes() {
@@ -35687,11 +36633,14 @@ var two_dimensional_axes_TwoDimensionalAxes = /** @class */ (function (_super) {
             var axisPosition = AxisPositions[axisPositionKey];
             if (_this.configs.axes[axisPosition] &&
                 !_this.children[axisPosition]) {
-                var axisComponent = new axis_Axis(_this.model, _this.services, {
+                var configs = {
                     position: axisPosition,
                     axes: _this.configs.axes,
                     margins: _this.margins,
-                });
+                };
+                var axisComponent = _this.model.axisFlavor === AxisFlavor.DEFAULT
+                    ? new axis_Axis(_this.model, _this.services, configs)
+                    : new hover_axis_HoverAxis(_this.model, _this.services, configs);
                 // Set model, services & parent for the new axis component
                 axisComponent.setModel(_this.model);
                 axisComponent.setServices(_this.services);
@@ -35742,6 +36691,7 @@ var two_dimensional_axes_TwoDimensionalAxes = /** @class */ (function (_super) {
                     break;
             }
         });
+        this.services.events.dispatchEvent(Events.Axis.RENDER_COMPLETE);
         // If the new margins are different than the existing ones
         var isNotEqual = Object.keys(margins).some(function (marginKey) {
             return _this.margins[marginKey] !== margins[marginKey];
@@ -38635,23 +39585,26 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             var self_1 = this;
             var allToolbarControls = enteringToolbarControls
                 .merge(toolbarControls)
-                .classed('disabled', function (d) {
-                return d.shouldBeDisabled ? d.shouldBeDisabled() : false;
-            })
-                .attr('aria-disabled', function (d) {
-                return d.shouldBeDisabled ? d.shouldBeDisabled() : false;
-            })
+                .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.iconWidth !== undefined ? d.iconWidth : '20px') + "; height: " + (d.iconWidth !== undefined ? d.iconHeight : '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.iconSVGContent + "\n\t\t\t\t</svg>\n\t\t\t</button>"; })
+                .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
+                ? 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>"; })
                 .each(function (d, index) {
+                var _this = this;
                 src_select(this)
                     .select('button')
-                    .on('click', !d.shouldBeDisabled() ? d.clickFunction : null)
+                    .on('click', function (event) {
+                    if (!d.shouldBeDisabled()) {
+                        self_1.triggerFunctionAndEvent(d, event, _this);
+                    }
+                })
                     .on('keydown', function (event) {
                     if ((event.key && event.key === 'Enter') ||
                         event.key === ' ') {
                         event.preventDefault();
-                        d.clickFunction();
+                        self_1.triggerFunctionAndEvent(d, event, _this);
                     }
                     else if (event.key && event.key === 'ArrowLeft') {
                         self_1.focusOnPreviousEnabledToolbarItem(index);
@@ -38805,15 +39758,13 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                 var element = src_select("#" + _this.services.domUtils.generateElementIDString("control-" + menuItem.id));
                 if (element !== null) {
                     element.on('click', function () {
-                        // call the specified function
-                        menuItem.clickFunction();
+                        self_2.triggerFunctionAndEvent(menuItem, event, element.node());
                         // hide overflow menu
                         self_2.updateOverflowMenu(false);
                     });
                     element.on('keydown', function (keyEvent) {
                         if (keyEvent && keyEvent.key === 'Enter') {
-                            // call the specified function
-                            menuItem.clickFunction();
+                            self_2.triggerFunctionAndEvent(menuItem, event, element.node());
                         }
                         else if (keyEvent && keyEvent.key === 'ArrowUp') {
                             // focus on previous menu item
@@ -38840,35 +39791,75 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             event.stopImmediatePropagation();
         }
     };
+    // Calls passed function && dispatches event
+    Toolbar.prototype.triggerFunctionAndEvent = function (control, event, element) {
+        // Call custom function only if it exists
+        if (typeof control.clickFunction === 'function') {
+            control.clickFunction(event);
+        }
+        // Dispatch selection event
+        this.services.events.dispatchEvent(Events.Toolbar.BUTTON_CLICK, {
+            control: control,
+            event: event,
+            element: element,
+        });
+    };
     Toolbar.prototype.getControlConfigs = function () {
         var _this = this;
-        var numberOfIcons = tools_Tools.getProperty(this.getOptions(), 'toolbar', 'numberOfIcons');
+        var numberOfIcons = tools_Tools.getProperty(this.getOptions(), 'toolbar', 'numberOfIcons') -
+            1;
         var controls = tools_Tools.getProperty(this.getOptions(), 'toolbar', 'controls');
-        var controlList = [];
         var overflowSpecificControls = [];
+        var buttonList = [];
+        var overflowList = [];
         controls.forEach(function (control) {
-            var controlConfig = _this.getControlConfigByType(control.type);
+            var controlConfig = null;
+            // check if button is custom or default control
+            if (control.type === ToolbarControlTypes.CUSTOM) {
+                // add generic id if missing
+                if (tools_Tools.getProperty(control, 'id') === null) {
+                    // add id directly to the data passed so that id isn't reassigned on rerender
+                    control.id = "toolbar-button-" + Toolbar.buttonID++;
+                }
+                // define function if missing
+                if (tools_Tools.getProperty(control, 'shouldBeDisabled') === null) {
+                    control.shouldBeDisabled = function () { return false; };
+                }
+                controlConfig = control;
+            }
+            else {
+                controlConfig = _this.getControlConfigByType(control.type);
+            }
             // add to list if config is valid
             if (controlConfig) {
                 controlConfig.text = control.text ? control.text : control.type;
                 if (controlConfig.id.indexOf('toolbar-export') !== -1) {
                     overflowSpecificControls.push(controlConfig);
                 }
+                else if (buttonList.length < numberOfIcons) {
+                    // check if icon exists else assign to the overflow list
+                    if (tools_Tools.getProperty(controlConfig, 'iconSVG', 'content') === null) {
+                        overflowList.push(controlConfig);
+                    }
+                    else {
+                        buttonList.push(controlConfig);
+                    }
+                }
                 else {
-                    controlList.push(controlConfig);
+                    overflowList.push(controlConfig);
                 }
             }
         });
-        if (controlList.length <= numberOfIcons &&
-            overflowSpecificControls.length === 0) {
+        // Ensures the `export` controls are always at the bottom
+        overflowList.push.apply(overflowList, overflowSpecificControls);
+        if (!overflowList.length) {
             return {
-                buttonList: controlList,
+                buttonList: buttonList,
             };
         }
         return {
-            // leave one button for overflow button
-            buttonList: controlList.splice(0, numberOfIcons - 1),
-            overflowMenuItemList: controlList.concat(overflowSpecificControls),
+            buttonList: buttonList,
+            overflowMenuItemList: overflowList,
         };
     };
     Toolbar.prototype.getToolbarButtonItems = function () {
@@ -38897,7 +39888,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             id: 'toolbar-overflow-menu',
             title: 'More options',
             shouldBeDisabled: function () { return false; },
-            iconSVGContent: "<circle cx=\"16\" cy=\"8\" r=\"2\"></circle>\n\t\t\t\t\t\t\t <circle cx=\"16\" cy=\"16\" r=\"2\"></circle>\n\t\t\t\t\t\t\t <circle cx=\"16\" cy=\"24\" r=\"2\"></circle>",
+            iconSVG: {
+                content: "<circle cx=\"16\" cy=\"8\" r=\"2\"></circle>\n\t\t\t\t<circle cx=\"16\" cy=\"16\" r=\"2\"></circle>\n\t\t\t\t<circle cx=\"16\" cy=\"24\" r=\"2\"></circle>",
+            },
             clickFunction: function (event) { return _this.toggleOverflowMenu(event); },
         };
     };
@@ -38917,7 +39910,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                         shouldBeDisabled: function () {
                             return _this.services.zoom.isMinZoomDomain();
                         },
-                        iconSVGContent: this.getControlIconByType(controlType),
+                        iconSVG: {
+                            content: this.getControlIconByType(controlType),
+                        },
                         clickFunction: function () { return _this.services.zoom.zoomIn(); },
                     };
                 }
@@ -38930,7 +39925,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                         shouldBeDisabled: function () {
                             return _this.services.zoom.isMaxZoomDomain();
                         },
-                        iconSVGContent: this.getControlIconByType(controlType),
+                        iconSVG: {
+                            content: this.getControlIconByType(controlType),
+                        },
                         clickFunction: function () { return _this.services.zoom.zoomOut(); },
                     };
                 }
@@ -38943,7 +39940,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                         shouldBeDisabled: function () {
                             return _this.services.zoom.isMaxZoomDomain();
                         },
-                        iconSVGContent: this.getControlIconByType(controlType),
+                        iconSVG: {
+                            content: this.getControlIconByType(controlType),
+                        },
                         clickFunction: function () {
                             return _this.services.zoom.resetZoomDomain();
                         },
@@ -38953,10 +39952,12 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             case ToolbarControlTypes.MAKE_FULLSCREEN:
                 controlConfig = {
                     id: 'toolbar-makefullscreen',
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                        width: '15px',
+                        height: '15px',
+                    },
                     title: 'Make fullscreen',
-                    iconSVGContent: this.getControlIconByType(controlType),
-                    iconWidth: '15px',
-                    iconHight: '15px',
                     shouldBeDisabled: function () { return false; },
                     clickFunction: function () {
                         _this.services.domUtils.toggleFullscreen();
@@ -38966,8 +39967,10 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             case ToolbarControlTypes.SHOW_AS_DATATABLE:
                 controlConfig = {
                     id: 'toolbar-showasdatatable',
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
                     title: 'Show as table',
-                    iconSVGContent: this.getControlIconByType(controlType),
                     shouldBeDisabled: function () { return displayData.length === 0; },
                     clickFunction: function () {
                         return _this.services.events.dispatchEvent(Events.Modal.SHOW);
@@ -38979,7 +39982,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                     id: 'toolbar-export-CSV',
                     title: 'Export as CSV',
                     shouldBeDisabled: function () { return false; },
-                    iconSVGContent: this.getControlIconByType(controlType),
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
                     clickFunction: function () { return _this.model.exportToCSV(); },
                 };
                 break;
@@ -38988,7 +39993,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                     id: 'toolbar-export-PNG',
                     title: 'Export as PNG',
                     shouldBeDisabled: function () { return false; },
-                    iconSVGContent: this.getControlIconByType(controlType),
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
                     clickFunction: function () { return _this.services.domUtils.exportToPNG(); },
                 };
                 break;
@@ -38997,7 +40004,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                     id: 'toolbar-export-JPG',
                     title: 'Export as JPG',
                     shouldBeDisabled: function () { return false; },
-                    iconSVGContent: this.getControlIconByType(controlType),
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
                     clickFunction: function () { return _this.services.domUtils.exportToJPG(); },
                 };
                 break;
@@ -39030,6 +40039,7 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                 throw Error('Not supported toolbar control type: ' + controlType);
         }
     };
+    Toolbar.buttonID = 0;
     return Toolbar;
 }(component_Component));
 
@@ -39725,6 +40735,7 @@ var tee = {
 
 
 
+
 // GRAPHS
 
 
@@ -39748,6 +40759,7 @@ var tee = {
 
 
 
+
 
 
 // Layout
@@ -40001,7 +41013,9 @@ var cartesian_charts_spreadArrays = (undefined && undefined.__spreadArrays) || f
 var cartesian_charts_ChartModelCartesian = /** @class */ (function (_super) {
     cartesian_charts_extends(ChartModelCartesian, _super);
     function ChartModelCartesian(services) {
-        return _super.call(this, services) || this;
+        var _this = _super.call(this, services) || this;
+        _this.axisFlavor = AxisFlavor.DEFAULT;
+        return _this;
     }
     // get the scales information
     // needed for getTabularArray()
@@ -42929,6 +43943,493 @@ var alluvial_AlluvialChart = /** @class */ (function (_super) {
 }(chart_Chart));
 
 //# sourceMappingURL=../../src/charts/alluvial.js.map
+// CONCATENATED MODULE: /home/runner/work/carbon-charts/carbon-charts/node_modules/d3-scale/src/quantize.js
+
+
+
+
+function quantize_quantize() {
+  var x0 = 0,
+      x1 = 1,
+      n = 1,
+      domain = [0.5],
+      range = [0, 1],
+      unknown;
+
+  function scale(x) {
+    return x != null && x <= x ? range[bisect(domain, x, 0, n)] : unknown;
+  }
+
+  function rescale() {
+    var i = -1;
+    domain = new Array(n);
+    while (++i < n) domain[i] = ((i + 1) * x1 - (i - n) * x0) / (n + 1);
+    return scale;
+  }
+
+  scale.domain = function(_) {
+    return arguments.length ? ([x0, x1] = _, x0 = +x0, x1 = +x1, rescale()) : [x0, x1];
+  };
+
+  scale.range = function(_) {
+    return arguments.length ? (n = (range = Array.from(_)).length - 1, rescale()) : range.slice();
+  };
+
+  scale.invertExtent = function(y) {
+    var i = range.indexOf(y);
+    return i < 0 ? [NaN, NaN]
+        : i < 1 ? [x0, domain[0]]
+        : i >= n ? [domain[n - 1], x1]
+        : [domain[i - 1], domain[i]];
+  };
+
+  scale.unknown = function(_) {
+    return arguments.length ? (unknown = _, scale) : scale;
+  };
+
+  scale.thresholds = function() {
+    return domain.slice();
+  };
+
+  scale.copy = function() {
+    return quantize_quantize()
+        .domain([x0, x1])
+        .range(range)
+        .unknown(unknown);
+  };
+
+  return initRange.apply(linearish(scale), arguments);
+}
+
+// CONCATENATED MODULE: ./node_modules/@carbon/charts/model/heatmap.js
+var model_heatmap_extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var heatmap_spreadArrays = (undefined && undefined.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+// Internal Imports
+
+
+
+// d3 imports
+
+
+/** The gauge chart model layer */
+var heatmap_HeatmapModel = /** @class */ (function (_super) {
+    model_heatmap_extends(HeatmapModel, _super);
+    function HeatmapModel(services) {
+        var _this = _super.call(this, services) || this;
+        _this.axisFlavor = AxisFlavor.HOVERABLE;
+        _this._colorScale = undefined;
+        // List of unique ranges and domains
+        _this._domains = [];
+        _this._ranges = [];
+        _this._matrix = {};
+        // Check which scale types are being used
+        var axis = tools_Tools.getProperty(_this.getOptions(), 'axes');
+        // Need to check options since scale service hasn't been instantiated
+        if ((!!tools_Tools.getProperty(axis, 'left', 'scaleType') &&
+            tools_Tools.getProperty(axis, 'left', 'scaleType') !==
+                ScaleTypes.LABELS) ||
+            (!!tools_Tools.getProperty(axis, 'right', 'scaleType') &&
+                tools_Tools.getProperty(axis, 'right', 'scaleType') !==
+                    ScaleTypes.LABELS) ||
+            (!!tools_Tools.getProperty(axis, 'top', 'scaleType') &&
+                tools_Tools.getProperty(axis, 'top', 'scaleType') !==
+                    ScaleTypes.LABELS) ||
+            (!!tools_Tools.getProperty(axis, 'bottom', 'scaleType') &&
+                tools_Tools.getProperty(axis, 'bottom', 'scaleType') !==
+                    ScaleTypes.LABELS)) {
+            throw Error('Heatmap only supports label scaletypes.');
+        }
+        return _this;
+    }
+    /**
+     * Get min and maximum value of the display data
+     * @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
+        if (domain[0] < 0 && domain[1] > 0) {
+            if (Math.abs(domain[0]) > domain[1]) {
+                domain[1] = Math.abs(domain[0]);
+            }
+            else {
+                domain[0] = -domain[1];
+            }
+        }
+        return domain;
+    };
+    /**
+     * @override
+     * @param value
+     * @returns
+     */
+    HeatmapModel.prototype.getFillColor = function (value) {
+        return this._colorScale(value);
+    };
+    /**
+     * Generate a list of all unique domains
+     * @returns String[]
+     */
+    HeatmapModel.prototype.getUniqueDomain = function () {
+        if (tools_Tools.isEmpty(this._domains)) {
+            var displayData = this.getDisplayData();
+            var cartesianScales = this.services.cartesianScales;
+            var domainIdentifier_1 = cartesianScales.getDomainIdentifier();
+            var mainXAxisPosition = cartesianScales.getMainXAxisPosition();
+            var customDomain = cartesianScales.getCustomDomainValuesByposition(mainXAxisPosition);
+            // Use user defined domain if specified
+            if (!!customDomain) {
+                return customDomain;
+            }
+            // Get unique axis values & create a matrix
+            this._domains = Array.from(new Set(displayData.map(function (d) {
+                return d[domainIdentifier_1];
+            })));
+        }
+        return this._domains;
+    };
+    /**
+     * Generates a list of all unique ranges
+     * @returns String[]
+     */
+    HeatmapModel.prototype.getUniqueRanges = function () {
+        if (tools_Tools.isEmpty(this._ranges)) {
+            var displayData = this.getDisplayData();
+            var cartesianScales = this.services.cartesianScales;
+            var rangeIdentifier_1 = cartesianScales.getRangeIdentifier();
+            var mainYAxisPosition = cartesianScales.getMainYAxisPosition();
+            var customDomain = cartesianScales.getCustomDomainValuesByposition(mainYAxisPosition);
+            // Use user defined domain if specified
+            if (!!customDomain) {
+                return customDomain;
+            }
+            // Get unique axis values & create a matrix
+            this._ranges = Array.from(new Set(displayData.map(function (d) {
+                return d[rangeIdentifier_1];
+            })));
+        }
+        return this._ranges;
+    };
+    /**
+     * Generates a matrix (If doesn't exist) and returns it
+     * @returns Object
+     */
+    HeatmapModel.prototype.getMatrix = function () {
+        var _this = this;
+        if (tools_Tools.isEmpty(this._matrix)) {
+            var uniqueDomain = this.getUniqueDomain();
+            var uniqueRange = this.getUniqueRanges();
+            var domainIdentifier_2 = this.services.cartesianScales.getDomainIdentifier();
+            var rangeIdentifier_2 = this.services.cartesianScales.getRangeIdentifier();
+            // Create a column
+            var range_1 = {};
+            uniqueRange.forEach(function (ran) {
+                // Initialize matrix to empty state
+                range_1[ran] = {
+                    value: null,
+                    index: -1,
+                };
+            });
+            // Complete the matrix by cloning the column to all domains
+            uniqueDomain.forEach(function (dom) {
+                _this._matrix[dom] = tools_Tools.clone(range_1);
+            });
+            // Fill in user passed data
+            this.getDisplayData().forEach(function (d, i) {
+                _this._matrix[d[domainIdentifier_2]][d[rangeIdentifier_2]] = {
+                    value: d['value'],
+                    index: i,
+                };
+            });
+        }
+        return this._matrix;
+    };
+    /**
+     *
+     * @param newData The new raw data to be set
+     */
+    HeatmapModel.prototype.setData = function (newData) {
+        var sanitizedData = this.sanitize(tools_Tools.clone(newData));
+        var dataGroups = this.generateDataGroups(sanitizedData);
+        this.set({
+            data: sanitizedData,
+            dataGroups: dataGroups,
+        });
+        // Set attributes to empty
+        this._domains = [];
+        this._ranges = [];
+        this._matrix = {};
+        return sanitizedData;
+    };
+    /**
+     * Converts Object matrix into a single array
+     * @returns Object[]
+     */
+    HeatmapModel.prototype.getMatrixAsArray = function () {
+        var _this = this;
+        if (tools_Tools.isEmpty(this._matrix)) {
+            this.getMatrix();
+        }
+        var uniqueDomain = this.getUniqueDomain();
+        var uniqueRange = this.getUniqueRanges();
+        var domainIdentifier = this.services.cartesianScales.getDomainIdentifier();
+        var rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();
+        var arr = [];
+        uniqueDomain.forEach(function (domain) {
+            uniqueRange.forEach(function (range) {
+                var element = {
+                    value: _this._matrix[domain][range].value,
+                    index: _this._matrix[domain][range].index,
+                };
+                element[domainIdentifier] = domain;
+                element[rangeIdentifier] = range;
+                arr.push(element);
+            });
+        });
+        return arr;
+    };
+    /**
+     * Generate tabular data from display data
+     * @returns Array<Object>
+     */
+    HeatmapModel.prototype.getTabularDataArray = function () {
+        var displayData = this.getDisplayData();
+        var _a = this.assignRangeAndDomains(), primaryDomain = _a.primaryDomain, primaryRange = _a.primaryRange, secondaryDomain = _a.secondaryDomain, secondaryRange = _a.secondaryRange;
+        var domainValueFormatter;
+        var result = heatmap_spreadArrays([
+            [primaryDomain.label, primaryRange.label, 'Value']
+        ], displayData.map(function (datum) { return [
+            datum[primaryDomain.identifier] === null
+                ? '&ndash;'
+                : domainValueFormatter
+                    ? domainValueFormatter(datum[primaryDomain.identifier])
+                    : datum[primaryDomain.identifier],
+            datum[primaryRange.identifier] === null
+                ? '&ndash;'
+                : datum[primaryRange.identifier].toLocaleString(),
+            datum['value'],
+        ]; }));
+        return result;
+    };
+    // Uses quantize scale to return class names
+    HeatmapModel.prototype.getColorClassName = function (configs) {
+        return configs.originalClassName + " " + this._colorScale(configs.value);
+    };
+    HeatmapModel.prototype.setColorClassNames = function () {
+        var options = this.getOptions();
+        var customColors = tools_Tools.getProperty(options, 'color', 'gradient', 'colors');
+        var customColorsEnabled = !tools_Tools.isEmpty(customColors);
+        var colorPairingOption = tools_Tools.getProperty(options, 'color', 'pairing', 'option');
+        // If domain consists of negative and positive values, use diverging palettes
+        var domain = this.getValueDomain();
+        var colorScheme = domain[0] < 0 && domain[1] > 0 ? 'diverge' : 'mono';
+        // Use default color pairing options if not in defined range
+        if (colorPairingOption < 1 &&
+            colorPairingOption > 4 &&
+            colorScheme === 'mono') {
+            colorPairingOption = 1;
+        }
+        else if (colorPairingOption < 1 &&
+            colorPairingOption > 2 &&
+            colorScheme === 'diverge') {
+            colorPairingOption = 1;
+        }
+        // Uses css classes for fill
+        var colorPairing = customColorsEnabled ? customColors : [];
+        if (!customColorsEnabled) {
+            // Add class names to list and the amount based on the color scheme
+            // Carbon charts has 11 colors for a single monochromatic palette & 17 for a divergent palette
+            var colorGroupingLength = colorScheme === 'diverge' ? 17 : 11;
+            for (var i = 1; i < colorGroupingLength + 1; i++) {
+                colorPairing.push("fill-" + colorScheme + "-" + colorPairingOption + "-" + i);
+            }
+        }
+        // Save scale type
+        this._colorScale = quantize_quantize()
+            .domain(this.getValueDomain())
+            .range(colorPairing);
+    };
+    return HeatmapModel;
+}(cartesian_charts_ChartModelCartesian));
+
+//# sourceMappingURL=../../src/model/heatmap.js.map
+// CONCATENATED MODULE: ./node_modules/@carbon/charts/charts/heatmap.js
+var charts_heatmap_extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var charts_heatmap_spreadArrays = (undefined && undefined.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+// Internal Imports
+
+
+
+
+
+
+var heatmap_HeatmapChart = /** @class */ (function (_super) {
+    charts_heatmap_extends(HeatmapChart, _super);
+    function HeatmapChart(holder, chartConfigs) {
+        var _this = _super.call(this, holder, chartConfigs) || this;
+        _this.model = new heatmap_HeatmapModel(_this.services);
+        // Merge the default options for this chart
+        // With the user provided options
+        _this.model.setOptions(tools_Tools.mergeDefaultChartOptions(configuration_options.heatmapChart, chartConfigs.options));
+        // Initialize data, services, components etc.
+        _this.init(holder, chartConfigs);
+        return _this;
+    }
+    // Custom getChartComponents - Implements getChartComponents
+    // Removes zoombar support and additional `features` that are not supported in heatmap
+    HeatmapChart.prototype.getAxisChartComponents = function (graphFrameComponents, configs) {
+        var options = this.model.getOptions();
+        var toolbarEnabled = tools_Tools.getProperty(options, 'toolbar', 'enabled');
+        this.services.cartesianScales.determineAxisDuality();
+        this.services.cartesianScales.findDomainAndRangeAxes(); // need to do this before getMainXAxisPosition()
+        this.services.cartesianScales.determineOrientation();
+        var titleAvailable = !!this.model.getOptions().title;
+        var titleComponent = {
+            id: 'title',
+            components: [new title_Title(this.model, this.services)],
+            growth: LayoutGrowth.STRETCH,
+        };
+        var toolbarComponent = {
+            id: 'toolbar',
+            components: [new toolbar_Toolbar(this.model, this.services)],
+            growth: LayoutGrowth.PREFERRED,
+        };
+        var headerComponent = {
+            id: 'header',
+            components: [
+                new layout_LayoutComponent(this.model, this.services, charts_heatmap_spreadArrays([
+                    // always add title to keep layout correct
+                    titleComponent
+                ], (toolbarEnabled ? [toolbarComponent] : [])), {
+                    direction: LayoutDirection.ROW,
+                    alignItems: LayoutAlignItems.CENTER,
+                }),
+            ],
+            growth: LayoutGrowth.PREFERRED,
+        };
+        var legendComponent = {
+            id: 'legend',
+            components: [new color_scale_legend_ColorScaleLegend(this.model, this.services)],
+            growth: LayoutGrowth.PREFERRED,
+            renderType: RenderTypes.SVG,
+        };
+        var graphFrameComponent = {
+            id: 'graph-frame',
+            components: graphFrameComponents,
+            growth: LayoutGrowth.STRETCH,
+            renderType: RenderTypes.SVG,
+        };
+        var isLegendEnabled = tools_Tools.getProperty(configs, 'legend', 'enabled') !== false &&
+            this.model.getOptions().legend.enabled !== false;
+        // Decide the position of the legend in reference to the chart
+        var fullFrameComponentDirection = LayoutDirection.COLUMN_REVERSE;
+        var legendSpacerComponent = {
+            id: 'spacer',
+            components: [new spacer_Spacer(this.model, this.services, { size: 15 })],
+            growth: LayoutGrowth.PREFERRED,
+        };
+        var fullFrameComponent = {
+            id: 'full-frame',
+            components: [
+                new layout_LayoutComponent(this.model, this.services, charts_heatmap_spreadArrays((isLegendEnabled ? [legendComponent] : []), (isLegendEnabled ? [legendSpacerComponent] : []), [
+                    graphFrameComponent,
+                ]), {
+                    direction: fullFrameComponentDirection,
+                }),
+            ],
+            growth: LayoutGrowth.STRETCH,
+        };
+        var topLevelLayoutComponents = [];
+        // header component is required for either title or toolbar
+        if (titleAvailable || toolbarEnabled) {
+            topLevelLayoutComponents.push(headerComponent);
+            var titleSpacerComponent = {
+                id: 'spacer',
+                components: [
+                    new spacer_Spacer(this.model, this.services, toolbarEnabled ? { size: 15 } : undefined),
+                ],
+                growth: LayoutGrowth.PREFERRED,
+            };
+            topLevelLayoutComponents.push(titleSpacerComponent);
+        }
+        topLevelLayoutComponents.push(fullFrameComponent);
+        return [
+            new tooltip_axis_AxisChartsTooltip(this.model, this.services),
+            new essentials_modal_Modal(this.model, this.services),
+            new layout_LayoutComponent(this.model, this.services, topLevelLayoutComponents, {
+                direction: LayoutDirection.COLUMN,
+            }),
+        ];
+    };
+    HeatmapChart.prototype.getComponents = function () {
+        // Specify what to render inside the graph-frame
+        var graphFrameComponents = [
+            new two_dimensional_axes_TwoDimensionalAxes(this.model, this.services),
+            new heatmap_Heatmap(this.model, this.services),
+        ];
+        var components = this.getAxisChartComponents(graphFrameComponents);
+        return components;
+    };
+    return HeatmapChart;
+}(axis_chart_AxisChart));
+
+//# sourceMappingURL=../../src/charts/heatmap.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/charts/index.js
 
 
@@ -42951,6 +44452,7 @@ var alluvial_AlluvialChart = /** @class */ (function (_super) {
 
 
 
+
 
 
 //# sourceMappingURL=../../src/charts/index.js.map
@@ -44162,6 +45664,52 @@ var ccv_alluvial_chart_component = normalizeComponent(
 )
 
 /* harmony default export */ var ccv_alluvial_chart = (ccv_alluvial_chart_component.exports);
+// CONCATENATED MODULE: /home/runner/work/carbon-charts/carbon-charts/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"624081f5-vue-loader-template"}!/home/runner/work/carbon-charts/carbon-charts/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/home/runner/work/carbon-charts/carbon-charts/node_modules/cache-loader/dist/cjs.js??ref--0-0!/home/runner/work/carbon-charts/carbon-charts/node_modules/vue-loader/lib??vue-loader-options!./src/ccv-heatmap-chart.vue?vue&type=template&id=b6ba687e&
+var ccv_heatmap_chartvue_type_template_id_b6ba687e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"ccv-heatmap-chart"})}
+var ccv_heatmap_chartvue_type_template_id_b6ba687e_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/ccv-heatmap-chart.vue?vue&type=template&id=b6ba687e&
+
+// CONCATENATED MODULE: /home/runner/work/carbon-charts/carbon-charts/node_modules/cache-loader/dist/cjs.js??ref--12-0!/home/runner/work/carbon-charts/carbon-charts/node_modules/thread-loader/dist/cjs.js!/home/runner/work/carbon-charts/carbon-charts/node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!/home/runner/work/carbon-charts/carbon-charts/node_modules/cache-loader/dist/cjs.js??ref--0-0!/home/runner/work/carbon-charts/carbon-charts/node_modules/vue-loader/lib??vue-loader-options!./src/ccv-heatmap-chart.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+
+
+/* harmony default export */ var ccv_heatmap_chartvue_type_script_lang_js_ = ({
+  name: 'CcvHeatmapChart',
+  extends: ccv_base_chart,
+  mounted: function mounted() {
+    this.coreChart = new heatmap_HeatmapChart(this.$el, {
+      data: this.data,
+      options: this.options
+    });
+  }
+});
+// CONCATENATED MODULE: ./src/ccv-heatmap-chart.vue?vue&type=script&lang=js&
+ /* harmony default export */ var src_ccv_heatmap_chartvue_type_script_lang_js_ = (ccv_heatmap_chartvue_type_script_lang_js_); 
+// CONCATENATED MODULE: ./src/ccv-heatmap-chart.vue
+
+
+
+
+
+/* normalize component */
+
+var ccv_heatmap_chart_component = normalizeComponent(
+  src_ccv_heatmap_chartvue_type_script_lang_js_,
+  ccv_heatmap_chartvue_type_template_id_b6ba687e_render,
+  ccv_heatmap_chartvue_type_template_id_b6ba687e_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var ccv_heatmap_chart = (ccv_heatmap_chart_component.exports);
 // CONCATENATED MODULE: ./src/index.js
 
 
@@ -44196,7 +45744,8 @@ var ccv_alluvial_chart_component = normalizeComponent(
 
 
 
-var src_components = [ccv_area_chart, ccv_stacked_area_chart, ccv_simple_bar_chart, ccv_grouped_bar_chart, ccv_stacked_bar_chart, ccv_boxplot_chart, ccv_bubble_chart, ccv_bullet_chart, ccv_donut_chart, ccv_gauge_chart, ccv_histogram_chart, ccv_line_chart, ccv_lollipop_chart, ccv_pie_chart, ccv_scatter_chart, ccv_meter_chart, ccv_radar_chart, ccv_combo_chart, ccv_tree_chart, ccv_treemap_chart, ccv_circle_pack_chart, ccv_wordcloud_chart, ccv_alluvial_chart];
+
+var src_components = [ccv_area_chart, ccv_stacked_area_chart, ccv_simple_bar_chart, ccv_grouped_bar_chart, ccv_stacked_bar_chart, ccv_boxplot_chart, ccv_bubble_chart, ccv_bullet_chart, ccv_donut_chart, ccv_gauge_chart, ccv_histogram_chart, ccv_line_chart, ccv_lollipop_chart, ccv_pie_chart, ccv_scatter_chart, ccv_meter_chart, ccv_radar_chart, ccv_combo_chart, ccv_tree_chart, ccv_treemap_chart, ccv_circle_pack_chart, ccv_wordcloud_chart, ccv_alluvial_chart, ccv_heatmap_chart];
 /*
   Allows the module to be used as a Vue plug-in, and has an install()
   method (which is called when the plug-in loads) that registers all the
@@ -44296,6 +45845,7 @@ var src_components = [ccv_area_chart, ccv_stacked_area_chart, ccv_simple_bar_cha
 /* concated harmony reexport CcvCirclePackChart */__webpack_require__.d(__webpack_exports__, "CcvCirclePackChart", function() { return ccv_circle_pack_chart; });
 /* concated harmony reexport CcvWordCloudChart */__webpack_require__.d(__webpack_exports__, "CcvWordCloudChart", function() { return ccv_wordcloud_chart; });
 /* concated harmony reexport CcvAlluvialChart */__webpack_require__.d(__webpack_exports__, "CcvAlluvialChart", function() { return ccv_alluvial_chart; });
+/* concated harmony reexport CcvHeatmapChart */__webpack_require__.d(__webpack_exports__, "CcvHeatmapChart", function() { return ccv_heatmap_chart; });
 
 
 /* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src);