@carbon/charts-vue 0.41.0 → 0.41.1

package/charts-vue.common.js

@@ -298,6 +298,7 @@ __webpack_require__.d(events_namespaceObject, "Bar", function() { return events_
 __webpack_require__.d(events_namespaceObject, "Scatter", function() { return events_Scatter; });
 __webpack_require__.d(events_namespaceObject, "Line", function() { return events_Line; });
 __webpack_require__.d(events_namespaceObject, "Radar", function() { return events_Radar; });
+__webpack_require__.d(events_namespaceObject, "Treemap", function() { return events_Treemap; });
 __webpack_require__.d(events_namespaceObject, "Tooltip", function() { return events_Tooltip; });
 __webpack_require__.d(events_namespaceObject, "Threshold", function() { return events_Threshold; });
 __webpack_require__.d(events_namespaceObject, "Legend", function() { return events_Legend; });
@@ -496,6 +497,16 @@ var events_Radar;
     Radar["X_AXIS_CLICK"] = "radar-x-axis-click";
     Radar["X_AXIS_MOUSEOUT"] = "radar-x-axis-mouseout";
 })(events_Radar || (events_Radar = {}));
+/**
+ * enum of all treemap graph events
+ */
+var events_Treemap;
+(function (Treemap) {
+    Treemap["LEAF_MOUSEOVER"] = "leaf-mouseover";
+    Treemap["LEAF_MOUSEMOVE"] = "leaf-mousemove";
+    Treemap["LEAF_CLICK"] = "leaf-click";
+    Treemap["LEAF_MOUSEOUT"] = "leaf-mouseout";
+})(events_Treemap || (events_Treemap = {}));
 /**
  * enum of all tooltip events
  */
@@ -7831,6 +7842,14 @@ var radarChart = tools_Tools.merge({}, chart, {
         }
     }
 });
+/**
+ * options specific to treemap charts
+ */
+var treemapChart = tools_Tools.merge({}, chart, {
+    data: tools_Tools.merge(chart.data, {
+        groupMapsTo: "name"
+    })
+});
 var configuration_options = {
     chart: chart,
     axisChart: axisChart,
@@ -7846,7 +7865,8 @@ var configuration_options = {
     donutChart: donutChart,
     meterChart: meterChart,
     radarChart: radarChart,
-    gaugeChart: gaugeChart
+    gaugeChart: gaugeChart,
+    treemapChart: treemapChart
 };
 
 //# sourceMappingURL=../src/configuration.js.map
@@ -9175,7 +9195,7 @@ define(Rgb, color_rgb, extend(Color, {
 }));
 
 function rgb_formatHex() {
-  return "#" + hex(this.r) + hex(this.g) + hex(this.b);
+  return "#" + color_hex(this.r) + color_hex(this.g) + color_hex(this.b);
 }
 
 function rgb_formatRgb() {
@@ -9187,7 +9207,7 @@ function rgb_formatRgb() {
       + (a === 1 ? ")" : ", " + a + ")");
 }
 
-function hex(value) {
+function color_hex(value) {
   value = Math.max(0, Math.min(255, Math.round(value) || 0));
   return (value < 16 ? "0" : "") + value.toString(16);
 }
@@ -13899,7 +13919,8 @@ var dom_utils_DOMUtils = /** @class */ (function (_super) {
                 .select("g." + CSS_VERIFIER_ELEMENT_CLASSNAME)
                 .node();
             var computedStyles = getComputedStyle(cssVerifierElement);
-            if (computedStyles.getPropertyValue("overflow") !== "hidden" || computedStyles.getPropertyValue("opacity") !== "0") {
+            if (computedStyles.getPropertyValue("overflow") !== "hidden" ||
+                computedStyles.getPropertyValue("opacity") !== "0") {
                 console.error("Missing CSS styles for Carbon Charts. Please read the Carbon Charts getting started guide.");
             }
         });
@@ -18573,9 +18594,7 @@ var legend_Legend = /** @class */ (function (_super) {
             // Configs
             var checkboxRadius = legend.checkbox.radius;
             var hoveredItem = src_select(this);
-            hoveredItem
-                .select("rect.checkbox")
-                .classed("hovered", true);
+            hoveredItem.select("rect.checkbox").classed("hovered", true);
             hoveredItem
                 .append("rect")
                 .classed("hover-stroke", true)
@@ -18608,9 +18627,7 @@ var legend_Legend = /** @class */ (function (_super) {
             .on("mouseout", function () {
             var hoveredItem = src_select(this);
             hoveredItem.select("rect.hover-stroke").remove();
-            hoveredItem
-                .select("rect.checkbox")
-                .classed("hovered", false);
+            hoveredItem.select("rect.checkbox").classed("hovered", false);
             self.services.events.dispatchEvent(Events.Tooltip.HIDE);
             self.services.events.dispatchEvent(Events.Legend.ITEM_MOUSEOUT, {
                 hoveredElement: hoveredItem
@@ -21853,7 +21870,9 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
         // only applies to discrete type
         if (truncationType !== TruncationTypes.NONE) {
             return items.map(function (item) {
-                item.value = _this.valueFormatter(item.value);
+                item.value = item.value
+                    ? _this.valueFormatter(item.value)
+                    : item.value;
                 if (item.label && item.label.length > truncationThreshold) {
                     item.label = tools_Tools.truncateLabel(item.label, truncationType, truncationNumCharacter);
                 }
@@ -21873,16 +21892,17 @@ var tooltip_Tooltip = /** @class */ (function (_super) {
         else {
             var items = this.getItems(e);
             var formattedItems = this.formatItems(items);
-            var useColor_1 = this.model.isUserProvidedColorScaleValid();
+            var isUserProvidedColorScaleValid_1 = this.model.isUserProvidedColorScaleValid();
             defaultHTML =
                 "<ul class='multi-tooltip'>" +
                     formattedItems
                         .map(function (item) {
-                        return "<li>\n\t\t\t\t\t\t\t<div class=\"datapoint-tooltip " + (item.bold ? "bold" : "") + "\">\n\t\t\t\t\t\t\t\t" + (item.class && !useColor_1 ? "<a class=\"tooltip-color " + item.class + "\"></a>" : "") + "\n\t\t\t\t\t\t\t\t" + (item.color && useColor_1
+                        var useColor = item.color || isUserProvidedColorScaleValid_1;
+                        return "<li>\n\t\t\t\t\t\t\t<div class=\"datapoint-tooltip " + (item.bold ? "bold" : "") + "\">\n\t\t\t\t\t\t\t\t" + (item.class && !useColor ? "<a class=\"tooltip-color " + item.class + "\"></a>" : "") + "\n\t\t\t\t\t\t\t\t" + (item.color && useColor
                             ? '<a style="background-color: ' +
                                 item.color +
                                 '" class="tooltip-color"></a>'
-                            : "") + "\n\t\t\t\t\t\t\t\t<p class=\"label\">" + item.label + "</p>\n\t\t\t\t\t\t\t\t<p class=\"value\">" + item.value + "</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</li>";
+                            : "") + "\n\t\t\t\t\t\t\t\t<p class=\"label\">" + (item.label || "") + "</p>\n\t\t\t\t\t\t\t\t<p class=\"value\">" + (item.value || "") + "</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</li>";
                     })
                         .join("") +
                     "</ul>";
@@ -25592,43 +25612,6 @@ var skeleton_lines_SkeletonLines = /** @class */ (function (_super) {
 }(skeleton_Skeleton));
 
 //# sourceMappingURL=../../../src/components/graphs/skeleton-lines.js.map
-// CONCATENATED MODULE: ./node_modules/@carbon/charts/components/layout/spacer.js
-var spacer_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
-
-
-
-var spacer_Spacer = /** @class */ (function (_super) {
-    spacer_extends(Spacer, _super);
-    function Spacer() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.type = "spacer";
-        return _this;
-    }
-    Spacer.prototype.render = function () {
-        dom_utils_DOMUtils.appendOrSelect(this.getContainerSVG(), "rect")
-            .attr("x", 0)
-            .attr("y", 0)
-            .attr("width", this.configs.size || spacers.default.size)
-            .attr("height", this.configs.size || spacers.default.size)
-            .attr("opacity", 0);
-    };
-    return Spacer;
-}(component_Component));
-
-//# sourceMappingURL=../../../src/components/layout/spacer.js.map
 // CONCATENATED MODULE: /home/travis/build/carbon-design-system/carbon-charts/node_modules/d3-hierarchy/src/hierarchy/count.js
 function count_count(node) {
   var sum = 0,
@@ -25790,7 +25773,7 @@ function leastCommonAncestor(a, b) {
 
 
 
-function hierarchy(data, children) {
+function hierarchy_hierarchy(data, children) {
   var root = new Node(data),
       valued = +data.value && (root.value = data.value),
       node,
@@ -25818,7 +25801,7 @@ function hierarchy(data, children) {
 }
 
 function node_copy() {
-  return hierarchy(this).eachBefore(copyData);
+  return hierarchy_hierarchy(this).eachBefore(copyData);
 }
 
 function defaultChildren(d) {
@@ -25842,7 +25825,7 @@ function Node(data) {
   this.parent = null;
 }
 
-Node.prototype = hierarchy.prototype = {
+Node.prototype = hierarchy_hierarchy.prototype = {
   constructor: Node,
   count: hierarchy_count,
   each: hierarchy_each,
@@ -25858,6 +25841,14 @@ Node.prototype = hierarchy.prototype = {
   copy: node_copy
 };
 
+// CONCATENATED MODULE: /home/travis/build/carbon-design-system/carbon-charts/node_modules/d3-hierarchy/src/treemap/round.js
+/* harmony default export */ var treemap_round = (function(node) {
+  node.x0 = Math.round(node.x0);
+  node.y0 = Math.round(node.y0);
+  node.x1 = Math.round(node.x1);
+  node.y1 = Math.round(node.y1);
+});
+
 // CONCATENATED MODULE: /home/travis/build/carbon-design-system/carbon-charts/node_modules/d3-hierarchy/src/treemap/dice.js
 /* harmony default export */ var dice = (function(parent, x0, y0, x1, y1) {
   var nodes = parent.children,
@@ -25886,14 +25877,6 @@ Node.prototype = hierarchy.prototype = {
   }
 });
 
-// CONCATENATED MODULE: /home/travis/build/carbon-design-system/carbon-charts/node_modules/d3-hierarchy/src/treemap/round.js
-/* harmony default export */ var treemap_round = (function(node) {
-  node.x0 = Math.round(node.x0);
-  node.y0 = Math.round(node.y0);
-  node.x1 = Math.round(node.x1);
-  node.y1 = Math.round(node.y1);
-});
-
 // CONCATENATED MODULE: /home/travis/build/carbon-design-system/carbon-charts/node_modules/d3-hierarchy/src/treemap/squarify.js
 
 
@@ -26079,6 +26062,627 @@ function constantZero() {
   return treemap;
 });
 
+// CONCATENATED MODULE: /home/travis/build/carbon-design-system/carbon-charts/node_modules/@carbon/colors/es/index.js
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var black = '#000000';
+var black100 = black;
+var white = '#ffffff';
+var white0 = white;
+var yellow = '#f1c21b';
+var yellow30 = yellow;
+var orange = '#ff832b';
+var orange40 = orange;
+var red10 = '#fff1f1';
+var red20 = '#ffd7d9';
+var red30 = '#ffb3b8';
+var red40 = '#ff8389';
+var red50 = '#fa4d56';
+var red60 = '#da1e28';
+var red70 = '#a2191f';
+var red80 = '#750e13';
+var red90 = '#520408';
+var red100 = '#2d0709';
+var red = {
+  10: red10,
+  20: red20,
+  30: red30,
+  40: red40,
+  50: red50,
+  60: red60,
+  70: red70,
+  80: red80,
+  90: red90,
+  100: red100
+};
+var magenta10 = '#fff0f7';
+var magenta20 = '#ffd6e8';
+var magenta30 = '#ffafd2';
+var magenta40 = '#ff7eb6';
+var magenta50 = '#ee5396';
+var magenta60 = '#d12771';
+var magenta70 = '#9f1853';
+var magenta80 = '#740937';
+var magenta90 = '#510224';
+var magenta100 = '#2a0a18';
+var magenta = {
+  10: magenta10,
+  20: magenta20,
+  30: magenta30,
+  40: magenta40,
+  50: magenta50,
+  60: magenta60,
+  70: magenta70,
+  80: magenta80,
+  90: magenta90,
+  100: magenta100
+};
+var purple10 = '#f6f2ff';
+var purple20 = '#e8daff';
+var purple30 = '#d4bbff';
+var purple40 = '#be95ff';
+var purple50 = '#a56eff';
+var purple60 = '#8a3ffc';
+var purple70 = '#6929c4';
+var purple80 = '#491d8b';
+var purple90 = '#31135e';
+var purple100 = '#1c0f30';
+var purple = {
+  10: purple10,
+  20: purple20,
+  30: purple30,
+  40: purple40,
+  50: purple50,
+  60: purple60,
+  70: purple70,
+  80: purple80,
+  90: purple90,
+  100: purple100
+};
+var blue10 = '#edf5ff';
+var blue20 = '#d0e2ff';
+var blue30 = '#a6c8ff';
+var blue40 = '#78a9ff';
+var blue50 = '#4589ff';
+var blue60 = '#0f62fe';
+var blue70 = '#0043ce';
+var blue80 = '#002d9c';
+var blue90 = '#001d6c';
+var blue100 = '#001141';
+var blue = {
+  10: blue10,
+  20: blue20,
+  30: blue30,
+  40: blue40,
+  50: blue50,
+  60: blue60,
+  70: blue70,
+  80: blue80,
+  90: blue90,
+  100: blue100
+};
+var cyan10 = '#e5f6ff';
+var cyan20 = '#bae6ff';
+var cyan30 = '#82cfff';
+var cyan40 = '#33b1ff';
+var cyan50 = '#1192e8';
+var cyan60 = '#0072c3';
+var cyan70 = '#00539a';
+var cyan80 = '#003a6d';
+var cyan90 = '#012749';
+var cyan100 = '#061727';
+var cyan = {
+  10: cyan10,
+  20: cyan20,
+  30: cyan30,
+  40: cyan40,
+  50: cyan50,
+  60: cyan60,
+  70: cyan70,
+  80: cyan80,
+  90: cyan90,
+  100: cyan100
+};
+var teal10 = '#d9fbfb';
+var teal20 = '#9ef0f0';
+var teal30 = '#3ddbd9';
+var teal40 = '#08bdba';
+var teal50 = '#009d9a';
+var teal60 = '#007d79';
+var teal70 = '#005d5d';
+var teal80 = '#004144';
+var teal90 = '#022b30';
+var teal100 = '#081a1c';
+var teal = {
+  10: teal10,
+  20: teal20,
+  30: teal30,
+  40: teal40,
+  50: teal50,
+  60: teal60,
+  70: teal70,
+  80: teal80,
+  90: teal90,
+  100: teal100
+};
+var green10 = '#defbe6';
+var green20 = '#a7f0ba';
+var green30 = '#6fdc8c';
+var green40 = '#42be65';
+var green50 = '#24a148';
+var green60 = '#198038';
+var green70 = '#0e6027';
+var green80 = '#044317';
+var green90 = '#022d0d';
+var green100 = '#071908';
+var green = {
+  10: green10,
+  20: green20,
+  30: green30,
+  40: green40,
+  50: green50,
+  60: green60,
+  70: green70,
+  80: green80,
+  90: green90,
+  100: green100
+};
+var coolGray10 = '#f2f4f8';
+var coolGray20 = '#dde1e6';
+var coolGray30 = '#c1c7cd';
+var coolGray40 = '#a2a9b0';
+var coolGray50 = '#878d96';
+var coolGray60 = '#697077';
+var coolGray70 = '#4d5358';
+var coolGray80 = '#343a3f';
+var coolGray90 = '#21272a';
+var coolGray100 = '#121619';
+var coolGray = {
+  10: coolGray10,
+  20: coolGray20,
+  30: coolGray30,
+  40: coolGray40,
+  50: coolGray50,
+  60: coolGray60,
+  70: coolGray70,
+  80: coolGray80,
+  90: coolGray90,
+  100: coolGray100
+};
+var gray10 = '#f4f4f4';
+var gray20 = '#e0e0e0';
+var gray30 = '#c6c6c6';
+var gray40 = '#a8a8a8';
+var gray50 = '#8d8d8d';
+var gray60 = '#6f6f6f';
+var gray70 = '#525252';
+var gray80 = '#393939';
+var gray90 = '#262626';
+var gray100 = '#161616';
+var gray = {
+  10: gray10,
+  20: gray20,
+  30: gray30,
+  40: gray40,
+  50: gray50,
+  60: gray60,
+  70: gray70,
+  80: gray80,
+  90: gray90,
+  100: gray100
+};
+var warmGray10 = '#f7f3f2';
+var warmGray20 = '#e5e0df';
+var warmGray30 = '#cac5c4';
+var warmGray40 = '#ada8a8';
+var warmGray50 = '#8f8b8b';
+var warmGray60 = '#736f6f';
+var warmGray70 = '#565151';
+var warmGray80 = '#3c3838';
+var warmGray90 = '#272525';
+var warmGray100 = '#171414';
+var warmGray = {
+  10: warmGray10,
+  20: warmGray20,
+  30: warmGray30,
+  40: warmGray40,
+  50: warmGray50,
+  60: warmGray60,
+  70: warmGray70,
+  80: warmGray80,
+  90: warmGray90,
+  100: warmGray100
+}; // Deprecated ☠️
+
+var yellow20 = '#fdd13a';
+var es_colors = {
+  black: {
+    100: black
+  },
+  blue: blue,
+  coolGray: coolGray,
+  cyan: cyan,
+  gray: gray,
+  green: green,
+  magenta: magenta,
+  orange: {
+    40: orange40
+  },
+  purple: purple,
+  red: red,
+  teal: teal,
+  warmGray: warmGray,
+  white: {
+    0: white
+  },
+  yellow: {
+    20: yellow20,
+    30: yellow30
+  }
+};
+
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Parse a given hexcode string into an rgba statement with the given opacity
+ * @param {string} hexcode
+ * @param {number} opacity
+ * @returns {string}
+ */
+function es_rgba(hexcode, opacity) {
+  var values = [hexcode.substring(1, 3), hexcode.substring(3, 5), hexcode.substring(5, 7)].map(function (string) {
+    return parseInt(string, 16);
+  });
+  return "rgba(".concat(values[0], ", ").concat(values[1], ", ").concat(values[2], ", ").concat(opacity, ")");
+}
+
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+
+// CONCATENATED MODULE: ./node_modules/@carbon/charts/components/graphs/treemap.js
+var treemap_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
+
+
+
+
+// Carbon colors
+
+var findColorShade = function (hex) {
+    if (!hex) {
+        return null;
+    }
+    for (var _i = 0, _a = Object.keys(es_colors); _i < _a.length; _i++) {
+        var colorName = _a[_i];
+        var colorShades = es_colors[colorName];
+        for (var _b = 0, _c = Object.keys(colorShades); _b < _c.length; _b++) {
+            var colorShadeLevel = _c[_b];
+            var colorShade = colorShades[colorShadeLevel];
+            if (colorShade === hex) {
+                return colorShadeLevel;
+            }
+        }
+    }
+    return null;
+};
+var textFillColor = function () {
+    var correspondingLeaf = src_select(this.parentNode).select("rect.leaf");
+    var correspondingLeafFill = getComputedStyle(correspondingLeaf.node(), null).getPropertyValue("fill");
+    var cl = color_color(correspondingLeafFill);
+    var colorShade;
+    if (cl) {
+        colorShade = findColorShade(cl ? cl.hex() : null);
+    }
+    if (colorShade === null || colorShade === undefined) {
+        var lightness = hsl(cl).l;
+        colorShade = Math.abs(lightness * 100 - 100);
+    }
+    return colorShade > 50 ? "white" : "black";
+};
+var uidCounter = 0;
+var treemap_Treemap = /** @class */ (function (_super) {
+    treemap_extends(Treemap, _super);
+    function Treemap() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = "treemap";
+        _this.handleLegendOnHover = function (event) {
+            var hoveredElement = event.detail.hoveredElement;
+            _this.parent
+                .selectAll("g[data-name='leaf']")
+                .transition(_this.services.transitions.getTransition("legend-hover-treemap"))
+                .attr("opacity", function (d) {
+                return d.parent.data.name === hoveredElement.datum()["name"] ? 1 : 0.3;
+            });
+        };
+        _this.handleLegendMouseOut = function (event) {
+            _this.parent
+                .selectAll("g[data-name='leaf']")
+                .transition(_this.services.transitions.getTransition("legend-mouseout-treemap"))
+                .attr("opacity", 1);
+        };
+        return _this;
+    }
+    Treemap.prototype.init = function () {
+        var events = this.services.events;
+        // Highlight correct circle on legend item hovers
+        events.addEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);
+        // Un-highlight circles on legend item mouseouts
+        events.addEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
+    };
+    Treemap.prototype.render = function (animate) {
+        var _this = this;
+        if (animate === void 0) { animate = true; }
+        var svg = this.getContainerSVG();
+        var allData = this.model.getData();
+        var displayData = this.model.getDisplayData();
+        var options = this.model.getOptions();
+        var windowLocation = tools_Tools.getProperty(window, "location");
+        var _a = dom_utils_DOMUtils.getSVGElementSize(this.parent, {
+            useAttrs: true
+        }), width = _a.width, height = _a.height;
+        var hierarchy = hierarchy_hierarchy({
+            name: options.title || "Treemap",
+            children: displayData
+        })
+            .sum(function (d) { return d.value; })
+            .sort(function (a, b) { return b.value - a.value; });
+        var total = src_sum(allData, function (d) {
+            return src_sum(d.children, function (child) { return child.value; });
+        });
+        var root = src_treemap()
+            .size([width, height])
+            .paddingInner(1)
+            .paddingOuter(0)
+            .round(true)(hierarchy);
+        var transitions = this.services.transitions;
+        var leafGroups = svg
+            .selectAll("g[data-name='leaf']")
+            .data(root.leaves(), function (leaf) { return leaf.data.name; });
+        // Remove leaf groups that need to be removed
+        leafGroups.exit().attr("opacity", 0).remove();
+        // Add the leaf groups that need to be introduced
+        var enteringLeafGroups = leafGroups
+            .enter()
+            .append("g")
+            .attr("data-name", "leaf")
+            .attr("data-uid", function () { return uidCounter++; });
+        var allLeafGroups = enteringLeafGroups.merge(leafGroups);
+        allLeafGroups
+            .attr("data-name", "leaf")
+            .transition(transitions.getTransition("treemap-group-update", animate))
+            .attr("transform", function (d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });
+        var rects = allLeafGroups.selectAll("rect.leaf").data(function (d) { return [d]; });
+        rects.exit().attr("width", 0).attr("height", 0).remove();
+        var enteringRects = rects
+            .enter()
+            .append("rect")
+            .classed("leaf", true);
+        enteringRects
+            .merge(rects)
+            .attr("width", 0)
+            .attr("height", 0)
+            .attr("id", function () {
+            var uid = src_select(this.parentNode).attr("data-uid");
+            return options.style.prefix + "-leaf-" + uid;
+        })
+            .attr("class", function (d) {
+            while (d.depth > 1)
+                d = d.parent;
+            return _this.model.getColorClassName({
+                classNameTypes: [ColorClassNameTypes.FILL],
+                dataGroupName: d.data.name,
+                originalClassName: "leaf"
+            });
+        })
+            .transition(this.services.transitions.getTransition("treemap-leaf-update-enter", animate))
+            .attr("width", function (d) { return d.x1 - d.x0; })
+            .attr("height", function (d) { return d.y1 - d.y0; });
+        // Update all clip paths
+        allLeafGroups
+            .selectAll("clipPath")
+            .data(function (d) {
+            if (d.data.showLabel !== true) {
+                return [];
+            }
+            return [1];
+        }, function (d) { return d; })
+            .join(function (enter) {
+            enter
+                .append("clipPath")
+                .attr("id", function () {
+                var uid = src_select(this.parentNode).attr("data-uid");
+                return options.style.prefix + "-clip-" + uid;
+            })
+                .append("use")
+                .attr("xlink:href", function () {
+                var uid = src_select(this.parentNode.parentNode).attr("data-uid");
+                var leafID = options.style.prefix + "-leaf-" + uid;
+                return new URL("#" + leafID, windowLocation) + "";
+            });
+        }, function (update) { return null; }, function (exit) { return exit.remove(); });
+        // Update all titles
+        allLeafGroups
+            .selectAll("text")
+            .data(function (d) {
+            if (d.data.showLabel !== true) {
+                return [];
+            }
+            var parent = d;
+            while (parent.depth > 1)
+                parent = parent.parent;
+            var color = hsl(_this.model.getFillColor(parent.data.name));
+            return [
+                {
+                    text: d.data.name,
+                    color: color.l < 0.5 ? "white" : "black"
+                }
+            ];
+        }, function (d) { return d; })
+            .join(function (enter) {
+            var addedText = enter
+                .append("text")
+                .text(function (d) { return d.text; })
+                .style("fill", textFillColor)
+                .attr("x", 7)
+                .attr("y", 18);
+            if (windowLocation) {
+                addedText.attr("clip-path", function () {
+                    var uid = src_select(this.parentNode).attr("data-uid");
+                    var clipPathID = options.style.prefix + "-clip-" + uid;
+                    return "url(" + (new URL("#" + clipPathID, windowLocation) + "") + ")";
+                });
+            }
+        }, function (update) {
+            return update.text(function (d) { return d.text; }).style("fill", textFillColor);
+        }, function (exit) { return exit.remove(); });
+        // Add event listeners to elements drawn
+        this.addEventListeners();
+    };
+    Treemap.prototype.addEventListeners = function () {
+        var self = this;
+        this.parent
+            .selectAll("rect.leaf")
+            .on("mouseover", function (datum) {
+            var hoveredElement = src_select(this);
+            var fillColor = getComputedStyle(this, null).getPropertyValue("fill");
+            var parent = datum;
+            while (parent.depth > 1)
+                parent = parent.parent;
+            hoveredElement
+                .transition(self.services.transitions.getTransition("graph_element_mouseover_fill_update"))
+                .style("fill", function (d) {
+                return color_color(fillColor).darker(0.7).toString();
+            });
+            // Show tooltip
+            self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
+                hoveredElement: hoveredElement,
+                items: [
+                    {
+                        color: fillColor,
+                        label: parent.data.name,
+                        bold: true
+                    },
+                    {
+                        label: datum.data.name,
+                        value: datum.data.value
+                    }
+                ]
+            });
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Treemap.LEAF_MOUSEOVER, {
+                element: hoveredElement,
+                datum: datum
+            });
+        })
+            .on("mousemove", function (datum) {
+            var hoveredElement = src_select(this);
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Treemap.LEAF_MOUSEMOVE, {
+                element: hoveredElement,
+                datum: datum
+            });
+            self.services.events.dispatchEvent(Events.Tooltip.MOVE);
+        })
+            .on("click", function (datum) {
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Treemap.LEAF_CLICK, {
+                element: src_select(this),
+                datum: datum
+            });
+        })
+            .on("mouseout", function (datum) {
+            var hoveredElement = src_select(this);
+            hoveredElement.classed("hovered", false);
+            var parent = datum;
+            while (parent.depth > 1)
+                parent = parent.parent;
+            hoveredElement
+                .transition(self.services.transitions.getTransition("graph_element_mouseout_fill_update"))
+                .style("fill", null);
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Treemap.LEAF_MOUSEOUT, {
+                element: hoveredElement,
+                datum: datum
+            });
+            // Hide tooltip
+            self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
+                hoveredElement: hoveredElement
+            });
+        });
+    };
+    return Treemap;
+}(component_Component));
+
+//# sourceMappingURL=../../../src/components/graphs/treemap.js.map
+// CONCATENATED MODULE: ./node_modules/@carbon/charts/components/layout/spacer.js
+var spacer_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
+
+
+
+var spacer_Spacer = /** @class */ (function (_super) {
+    spacer_extends(Spacer, _super);
+    function Spacer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = "spacer";
+        return _this;
+    }
+    Spacer.prototype.render = function () {
+        dom_utils_DOMUtils.appendOrSelect(this.getContainerSVG(), "rect")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", this.configs.size || spacers.default.size)
+            .attr("height", this.configs.size || spacers.default.size)
+            .attr("opacity", 0);
+    };
+    return Spacer;
+}(component_Component));
+
+//# sourceMappingURL=../../../src/components/layout/spacer.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/components/layout/layout.js
 var layout_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -26159,7 +26763,7 @@ var layout_LayoutComponent = /** @class */ (function (_super) {
         var _a = dom_utils_DOMUtils.getSVGElementSize(svg, {
             useAttrs: true
         }), width = _a.width, height = _a.height;
-        var root = hierarchy({
+        var root = hierarchy_hierarchy({
             children: this.children
         }).sum(function (d) { return d.size; });
         // Grab the correct treemap tile function based on direction
@@ -26236,7 +26840,7 @@ var layout_LayoutComponent = /** @class */ (function (_super) {
         });
         // Pass children data to the hierarchy layout
         // And calculate sum of sizes
-        root = hierarchy({
+        root = hierarchy_hierarchy({
             children: this.children
         }).sum(function (d) { return d.size; });
         // Compute the position of all elements within the layout
@@ -27097,6 +27701,10 @@ var two_dimensional_axes_TwoDimensionalAxes = /** @class */ (function (_super) {
                 offset = dom_utils_DOMUtils.getSVGElementSize(child.getTitleRef(), {
                     useBBox: true
                 }).height;
+                if (axisPosition === AxisPositions.LEFT ||
+                    axisPosition === AxisPositions.RIGHT) {
+                    offset += 5;
+                }
             }
             switch (axisPosition) {
                 case AxisPositions.TOP:
@@ -29379,6 +29987,7 @@ var zoom_bar_ZoomBar = /** @class */ (function (_super) {
 
 
 
+
 // Layout
 
 
@@ -31541,6 +32150,48 @@ var gauge_GaugeChart = /** @class */ (function (_super) {
 }(chart_Chart));
 
 //# sourceMappingURL=../../src/charts/gauge.js.map
+// CONCATENATED MODULE: ./node_modules/@carbon/charts/charts/treemap.js
+var charts_treemap_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
+
+
+
+// Components
+
+var treemap_TreemapChart = /** @class */ (function (_super) {
+    charts_treemap_extends(TreemapChart, _super);
+    function TreemapChart(holder, chartConfigs) {
+        var _this = _super.call(this, holder, chartConfigs) || this;
+        // Merge the default options for this chart
+        // With the user provided options
+        _this.model.setOptions(tools_Tools.mergeDefaultChartOptions(configuration_options.treemapChart, chartConfigs.options));
+        // Initialize data, services, components etc.
+        _this.init(holder, chartConfigs);
+        return _this;
+    }
+    TreemapChart.prototype.getComponents = function () {
+        // Specify what to render inside the graph-frame
+        var graphFrameComponents = [new treemap_Treemap(this.model, this.services)];
+        // get the base chart components and export with tooltip
+        var components = this.getChartComponents(graphFrameComponents);
+        return components;
+    };
+    return TreemapChart;
+}(chart_Chart));
+
+//# sourceMappingURL=../../src/charts/treemap.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/charts/index.js
 
 
@@ -31555,6 +32206,7 @@ var gauge_GaugeChart = /** @class */ (function (_super) {
 
 
 
+
 //# sourceMappingURL=../../src/charts/index.js.map
 // CONCATENATED MODULE: ./node_modules/@carbon/charts/index.js
 
@@ -32304,6 +32956,52 @@ var ccv_radar_chart_component = normalizeComponent(
 )
 
 /* harmony default export */ var ccv_radar_chart = (ccv_radar_chart_component.exports);
+// CONCATENATED MODULE: /home/travis/build/carbon-design-system/carbon-charts/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"624081f5-vue-loader-template"}!/home/travis/build/carbon-design-system/carbon-charts/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/home/travis/build/carbon-design-system/carbon-charts/node_modules/cache-loader/dist/cjs.js??ref--0-0!/home/travis/build/carbon-design-system/carbon-charts/node_modules/vue-loader/lib??vue-loader-options!./src/ccv-treemap-chart.vue?vue&type=template&id=1bc226ef&
+var ccv_treemap_chartvue_type_template_id_1bc226ef_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"ccv-treemap-chart"})}
+var ccv_treemap_chartvue_type_template_id_1bc226ef_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/ccv-treemap-chart.vue?vue&type=template&id=1bc226ef&
+
+// CONCATENATED MODULE: /home/travis/build/carbon-design-system/carbon-charts/node_modules/cache-loader/dist/cjs.js??ref--12-0!/home/travis/build/carbon-design-system/carbon-charts/node_modules/thread-loader/dist/cjs.js!/home/travis/build/carbon-design-system/carbon-charts/node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!/home/travis/build/carbon-design-system/carbon-charts/node_modules/cache-loader/dist/cjs.js??ref--0-0!/home/travis/build/carbon-design-system/carbon-charts/node_modules/vue-loader/lib??vue-loader-options!./src/ccv-treemap-chart.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+
+
+/* harmony default export */ var ccv_treemap_chartvue_type_script_lang_js_ = ({
+  name: 'CcvTreemapChart',
+  extends: ccv_base_chart,
+  mounted: function mounted() {
+    this.coreChart = new treemap_TreemapChart(this.$el, {
+      data: this.data,
+      options: this.options
+    });
+  }
+});
+// CONCATENATED MODULE: ./src/ccv-treemap-chart.vue?vue&type=script&lang=js&
+ /* harmony default export */ var src_ccv_treemap_chartvue_type_script_lang_js_ = (ccv_treemap_chartvue_type_script_lang_js_); 
+// CONCATENATED MODULE: ./src/ccv-treemap-chart.vue
+
+
+
+
+
+/* normalize component */
+
+var ccv_treemap_chart_component = normalizeComponent(
+  src_ccv_treemap_chartvue_type_script_lang_js_,
+  ccv_treemap_chartvue_type_template_id_1bc226ef_render,
+  ccv_treemap_chartvue_type_template_id_1bc226ef_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var ccv_treemap_chart = (ccv_treemap_chart_component.exports);
 // CONCATENATED MODULE: ./src/index.js
 
 
@@ -32328,7 +33026,8 @@ var ccv_radar_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_bubble_chart, ccv_donut_chart, ccv_gauge_chart, ccv_line_chart, ccv_pie_chart, ccv_scatter_chart, ccv_meter_chart, ccv_radar_chart];
+
+var src_components = [ccv_area_chart, ccv_stacked_area_chart, ccv_simple_bar_chart, ccv_grouped_bar_chart, ccv_stacked_bar_chart, ccv_bubble_chart, ccv_donut_chart, ccv_gauge_chart, ccv_line_chart, ccv_pie_chart, ccv_scatter_chart, ccv_meter_chart, ccv_radar_chart, ccv_treemap_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
@@ -32418,6 +33117,7 @@ var src_components = [ccv_area_chart, ccv_stacked_area_chart, ccv_simple_bar_cha
 /* concated harmony reexport CcvScatterChart */__webpack_require__.d(__webpack_exports__, "CcvScatterChart", function() { return ccv_scatter_chart; });
 /* concated harmony reexport CcvMeterChart */__webpack_require__.d(__webpack_exports__, "CcvMeterChart", function() { return ccv_meter_chart; });
 /* concated harmony reexport CcvRadarChart */__webpack_require__.d(__webpack_exports__, "CcvRadarChart", function() { return ccv_radar_chart; });
+/* concated harmony reexport CcvTreemapChart */__webpack_require__.d(__webpack_exports__, "CcvTreemapChart", function() { return ccv_treemap_chart; });
 
 
 /* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src);