@carbon/charts 0.58.2 → 1.0.2

package/demo/tsconfig.tsbuildinfo

@@ -122,11 +122,11 @@
         "signature": "7daed976a3f0970f36023ac5f65197a16102f1b948a6d350ac3d6010af983c8b"
       },
       "../../demo/create-codesandbox.ts": {
-        "version": "7680610ff770e792d58e7fd22027842c72af08f300d48230c7ded42b49a45f35",
-        "signature": "68cae4858c0af344da1a1f10100e7fb06e6255cae5874bc2fe35699f8d7e65a9"
+        "version": "995319859ed794d349385f492bfb39820b28907a20c368bb14784fb0b717f81d",
+        "signature": "c7d163b67c30db3ee9f1c8e3f5bb5914f3a3acfa117a1429b800464093c38bfe"
       },
       "../../demo/utils.ts": {
-        "version": "e27f9077a015660cec5b656e787480359f4a879acdb8ea907c6ec50e38b2e706",
+        "version": "2db838a66f95d64bb7cb6cba643a261751b643a47e80fbc7166bdf5cc64b1bec",
         "signature": "4fe7f477469cf1883226ae5bcbdbbb8d0b5508efdbf4ea909e2f7dc4393483b2"
       },
       "../../demo/data/CHART_TYPES.ts": {
@@ -194,8 +194,8 @@
         "signature": "1356f9fd82a936b9e50f2cf0f191486b56799341f8f2ad001cbed37662e2a681"
       },
       "../../demo/data/heatmap.ts": {
-        "version": "8fbf5966877ea05f7bdb78505dfd2badd07fc62287efdff8a59d4bbcb57a9e8e",
-        "signature": "1f76314fe493818c1a405613f68b18a27a6529f018d9fa4c2d45240571a63c9e"
+        "version": "5b45f7f53f1e0c072735426662bb0a4caf765943a071176a10fc4f75c3783743",
+        "signature": "e70e83dd0552d5b572b7a5177c9e39676a8de9e83579ccf265f43d3199cd84dd"
       },
       "../../demo/data/scatter.ts": {
         "version": "1bfec2bc427066081c7d68fd733dcde8b2d7aa24d3dcb2e5047add54445ab522",

package/demo/utils.js

@@ -8,7 +8,14 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
 var generateThemePickerHTML = function (container, configs) {
     var div = document.createElement('div');
     div.id = 'theme-picker';
-    div.innerHTML = "\n<fieldset class=\"bx--fieldset marginTop-45\">\n\t<legend class=\"bx--label\">Active theme</legend>\n\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--radio-button-group \">\n\t\t\t<div class=\"bx--radio-button-wrapper\">\n\t\t\t\t<input id=\"radio-button-abfeuherm2f-1\" class=\"bx--radio-button\" type=\"radio\" value=\"white\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"radio-button-abfeuherm2f-1\" class=\"bx--radio-button__label\">\n\t\t\t\t<span class=\"bx--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"bx--radio-button__label-text\">White</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t\t<div class=\"bx--radio-button-wrapper\">\n\t\t\t\t<input id=\"radio-button-abfeuherm2f-2\" class=\"bx--radio-button\" type=\"radio\" value=\"g10\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"radio-button-abfeuherm2f-2\" class=\"bx--radio-button__label\">\n\t\t\t\t<span class=\"bx--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"bx--radio-button__label-text\">G10</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t\t<div class=\"bx--radio-button-wrapper\">\n\t\t\t\t<input id=\"radio-button-abfeuherm2f-3\" class=\"bx--radio-button\" type=\"radio\" value=\"g90\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"radio-button-abfeuherm2f-3\" class=\"bx--radio-button__label\">\n\t\t\t\t<span class=\"bx--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"bx--radio-button__label-text\">G90</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t\t<div class=\"bx--radio-button-wrapper\">\n\t\t\t\t<input id=\"radio-button-abfeuherm2f-4\" class=\"bx--radio-button\" type=\"radio\" value=\"g100\" name=\"radio-button\" tabindex=\"0\" checked>\n\t\t\t\t<label for=\"radio-button-abfeuherm2f-4\" class=\"bx--radio-button__label\">\n\t\t\t\t<span class=\"bx--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"bx--radio-button__label-text\">G100</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</fieldset>";
+    div.innerHTML = "\n<fieldset class=\"cds--fieldset marginTop-45\">\n\t<legend class=\"cds--label\">Active theme</legend>\n\n\t<div class=\"cds--form-item\">\n\t\t<div class=\"cds--radio-button-group\">\n\t\t\t<div class=\"cds--radio-button-wrapper\">\n\t\t\t\t<input id=\"theme__white\" class=\"cds--radio-button\" type=\"radio\" value=\"white\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"theme__white\" class=\"cds--radio-button__label\">\n\t\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"cds--radio-button__label-text\">White</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\n\t\t\t<div class=\"cds--radio-button-wrapper\">\n\t\t\t\t<input id=\"theme__g10\" class=\"cds--radio-button\" type=\"radio\" value=\"g10\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"theme__g10\" class=\"cds--radio-button__label\">\n\t\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"cds--radio-button__label-text\">G10</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\n\t\t\t<div class=\"cds--radio-button-wrapper\">\n\t\t\t\t<input id=\"theme__g90\" class=\"cds--radio-button\" type=\"radio\" value=\"g90\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"theme__g90\" class=\"cds--radio-button__label\">\n\t\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"cds--radio-button__label-text\">G90</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\n\t\t\t<div class=\"cds--radio-button-wrapper\">\n\t\t\t\t<input id=\"theme__g100\" class=\"cds--radio-button\" type=\"radio\" value=\"g100\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"theme__g100\" class=\"cds--radio-button__label\">\n\t\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"cds--radio-button__label-text\">G100</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</fieldset>";
+    var currentTheme = document.documentElement.getAttribute('data-carbon-theme');
+    if (currentTheme) {
+        div.querySelector("input#theme__" + currentTheme).setAttribute('checked', 'true');
+    }
+    else {
+        div.querySelector("input#theme__white").setAttribute('checked', 'true');
+    }
     container.querySelector('#charting-controls').appendChild(div);
 };
 var generateColorPalettePickerHTML = function (container, chart, configs) {
@@ -25,14 +32,14 @@ var generateColorPalettePickerHTML = function (container, chart, configs) {
     var selectedColorPalette = numberOfVariants + "-" + option;
     var div = document.createElement('div');
     div.id = 'color-palette-picker';
-    div.innerHTML = "\n<div class=\"bx--form-item\">\n\t<div\n\tclass=\"bx--select\">\n\t<label for=\"color-palette-select\" class=\"bx--label\">Active color palette</label>\n\t\t<div class=\"bx--select-input__wrapper\">\n\t\t<select id=\"color-palette-select\" class=\"bx--select-input\">\n\t\t\t<option class=\"bx--select-option\" value=\"\" disabled selected hidden>\n\t\t\tChoose an option\n\t\t\t</option>\n\t\t\t" + Object.keys(colorPairingOptions)
+    div.innerHTML = "\n<div class=\"cds--form-item\">\n\t<div\n\tclass=\"cds--select\">\n\t<label for=\"color-palette-select\" class=\"cds--label\">Active color palette</label>\n\t\t<div class=\"cds--select-input__wrapper\">\n\t\t<select id=\"color-palette-select\" class=\"cds--select-input\">\n\t\t\t<option class=\"cds--select-option\" value=\"\" disabled selected hidden>\n\t\t\tChoose an option\n\t\t\t</option>\n\t\t\t" + Object.keys(colorPairingOptions)
         .map(function (colorGroup) {
         var optionsCount = colorPairingOptions[colorGroup];
-        var optionsHTML = "<optgroup class=\"bx--select-optgroup\" label=\"" + colorGroup + " groups\">";
+        var optionsHTML = "<optgroup class=\"cds--select-optgroup\" label=\"" + colorGroup + " groups\">";
         var numberOfVariants = parseInt(colorGroup);
         if (numberOfVariants !== 14) {
             for (var i = 1; i <= optionsCount; i++) {
-                optionsHTML += "\n\t\t\t\t\t\t<option class=\"bx--select-option\" " + (onlyCategoricalPaletteIsApplicable ||
+                optionsHTML += "\n\t\t\t\t\t\t<option class=\"cds--select-option\" " + (onlyCategoricalPaletteIsApplicable ||
                     numberOfVariants < numberOfChartDataGroups
                     ? 'disabled'
                     : '') + " value=\"" + colorGroup + "-option-" + i + "\" " + (selectedColorPalette ===
@@ -42,14 +49,14 @@ var generateColorPalettePickerHTML = function (container, chart, configs) {
             }
         }
         else {
-            optionsHTML += "<option class=\"bx--select-option\" value=\"14-color-option-1\" " + (selectedColorPalette === "14-1" ||
+            optionsHTML += "<option class=\"cds--select-option\" value=\"14-color-option-1\" " + (selectedColorPalette === "14-1" ||
                 onlyCategoricalPaletteIsApplicable
                 ? 'selected'
                 : '') + ">\n\t\t\t\t\t\tCategorical palette\n\t\t\t\t\t</option>";
         }
         return optionsHTML;
     })
-        .join('') + "\n\t\t</select>\n\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform;\" xmlns=\"http://www.w3.org/2000/svg\" class=\"bx--select__arrow\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path></svg>\n\t\t</div>\n\t</div>\n\t</div>\n</div>";
+        .join('') + "\n\t\t</select>\n\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform;\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cds--select__arrow\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path></svg>\n\t\t</div>\n\t</div>\n\t</div>\n</div>";
     div.querySelector('#color-palette-select').addEventListener('change', function (e) {
         var value = e.target.value;
         var _a = value.split('-color-option-'), numberOfVariants = _a[0], pairingOption = _a[1];
@@ -70,11 +77,20 @@ export var addControls = function (container, demoGroup, chart, configs) {
 };
 export var addRadioButtonEventListeners = function (container, chart, configs) {
     // Add event listeners for radio buttons
-    var radioButtons = container.querySelectorAll('div#theme-picker input.bx--radio-button');
+    var radioButtons = container.querySelectorAll('div#theme-picker input.cds--radio-button');
+    var currentTheme = document.documentElement.getAttribute('data-carbon-theme');
+    if (currentTheme) {
+        chart.services.domUtils
+            .getHolder()
+            .setAttribute('data-carbon-theme', currentTheme);
+    }
     radioButtons.forEach(function (radioButton) {
         radioButton.addEventListener('click', function (e) {
             var theme = e.target.value;
-            container.setAttribute('class', "container theme--" + theme);
+            document.documentElement.setAttribute('data-carbon-theme', theme);
+            chart.services.domUtils
+                .getHolder()
+                .setAttribute('data-carbon-theme', theme);
             chart.update();
         });
     });
@@ -84,7 +100,7 @@ export var addOtherVersions = function (container, demoGroup, demo, configs) {
     var currentVersion = configs.currentVersion;
     var demoGroupClassification = (demoGroup.type || '').replace('-chart', '');
     var div = document.createElement('div');
-    div.setAttribute('class', 'bx--row resource-card-group');
+    div.setAttribute('class', 'cds--row resource-card-group');
     var htmlContent = '';
     var otherVersions = __spreadArrays((currentVersion !== 'vanilla'
         ? [
@@ -123,7 +139,7 @@ export var addOtherVersions = function (container, demoGroup, demo, configs) {
         ]
         : []));
     otherVersions.forEach(function (otherVersion) {
-        htmlContent += "<div class=\"bx--no-gutter-sm bx--col-md-6 bx--col-lg-6\">\n\t\t<div class=\"bx--resource-card\">\n\t\t  <div class=\"bx--aspect-ratio bx--aspect-ratio--2x1\">\n\t\t\t<div class=\"bx--aspect-ratio--object\">\n\t\t\t  <a href=\"" + otherVersion.link + "\" class=\"bx--tile bx--tile--clickable\">\n\t\t\t\t<h5 class=\"bx--resource-card__subtitle\">" + otherVersion.name + "</h5>\n\t\t\t\t<div class=\"bx--resource-card__icon--img\"></div>\n\t\t\t\t<div class=\"bx--resource-card__icon--action\">\n\t\t\t\t  <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" aria-label=\"Open resource\" width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" role=\"img\">\n\t\t\t\t\t<path d=\"M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z\"></path>\n\t\t\t\t\t<path d=\"M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z\"></path>\n\t\t\t\t  </svg>\n\t\t\t\t</div>\n\t\t\t  </a>\n\t\t\t</div>\n\t\t  </div>\n\t\t</div>\n\t  </div>";
+        htmlContent += "<div class=\"cds--no-gutter-sm cds--col-md-6 cds--col-lg-6\">\n\t\t<div class=\"cds--resource-card\">\n\t\t  <div class=\"cds--aspect-ratio cds--aspect-ratio--2x1\">\n\t\t\t<div class=\"cds--aspect-ratio--object\">\n\t\t\t  <a href=\"" + otherVersion.link + "\" class=\"cds--tile cds--tile--clickable\">\n\t\t\t\t<h5 class=\"cds--resource-card__subtitle\">" + otherVersion.name + "</h5>\n\t\t\t\t<div class=\"cds--resource-card__icon--img\"></div>\n\t\t\t\t<div class=\"cds--resource-card__icon--action\">\n\t\t\t\t  <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" aria-label=\"Open resource\" width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" role=\"img\">\n\t\t\t\t\t<path d=\"M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z\"></path>\n\t\t\t\t\t<path d=\"M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z\"></path>\n\t\t\t\t  </svg>\n\t\t\t\t</div>\n\t\t\t  </a>\n\t\t\t</div>\n\t\t  </div>\n\t\t</div>\n\t  </div>";
     });
     div.innerHTML = htmlContent;
     container.querySelector('#other-versions').appendChild(div);

package/demo/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["utils.ts"],"names":[],"mappings":"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","sourcesContent":["const generateThemePickerHTML = (container, configs) => {\n\tconst div = document.createElement('div');\n\tdiv.id = 'theme-picker';\n\tdiv.innerHTML = `\n<fieldset class=\"bx--fieldset marginTop-45\">\n\t<legend class=\"bx--label\">Active theme</legend>\n\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--radio-button-group \">\n\t\t\t<div class=\"bx--radio-button-wrapper\">\n\t\t\t\t<input id=\"radio-button-abfeuherm2f-1\" class=\"bx--radio-button\" type=\"radio\" value=\"white\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"radio-button-abfeuherm2f-1\" class=\"bx--radio-button__label\">\n\t\t\t\t<span class=\"bx--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"bx--radio-button__label-text\">White</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t\t<div class=\"bx--radio-button-wrapper\">\n\t\t\t\t<input id=\"radio-button-abfeuherm2f-2\" class=\"bx--radio-button\" type=\"radio\" value=\"g10\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"radio-button-abfeuherm2f-2\" class=\"bx--radio-button__label\">\n\t\t\t\t<span class=\"bx--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"bx--radio-button__label-text\">G10</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t\t<div class=\"bx--radio-button-wrapper\">\n\t\t\t\t<input id=\"radio-button-abfeuherm2f-3\" class=\"bx--radio-button\" type=\"radio\" value=\"g90\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"radio-button-abfeuherm2f-3\" class=\"bx--radio-button__label\">\n\t\t\t\t<span class=\"bx--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"bx--radio-button__label-text\">G90</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t\t<div class=\"bx--radio-button-wrapper\">\n\t\t\t\t<input id=\"radio-button-abfeuherm2f-4\" class=\"bx--radio-button\" type=\"radio\" value=\"g100\" name=\"radio-button\" tabindex=\"0\" checked>\n\t\t\t\t<label for=\"radio-button-abfeuherm2f-4\" class=\"bx--radio-button__label\">\n\t\t\t\t<span class=\"bx--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"bx--radio-button__label-text\">G100</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</fieldset>`;\n\n\tcontainer.querySelector('#charting-controls').appendChild(div);\n};\n\nconst generateColorPalettePickerHTML = (\n\tcontainer,\n\tchart,\n\tconfigs = { colorPairingOptions: null }\n) => {\n\tconst { colorPairingOptions } = configs;\n\n\tconst chartOptions = chart.model.getOptions();\n\tconst { numberOfVariants: variants, option } = chartOptions.color.pairing;\n\n\tconst numberOfChartDataGroups = chart.model.getAllDataGroupsNames().length;\n\tconst numberOfVariants = variants || numberOfChartDataGroups;\n\n\tlet onlyCategoricalPaletteIsApplicable = false;\n\tif (numberOfChartDataGroups > 5) {\n\t\tonlyCategoricalPaletteIsApplicable = true;\n\t}\n\n\tconst selectedColorPalette = `${numberOfVariants}-${option}`;\n\n\tconst div = document.createElement('div');\n\tdiv.id = 'color-palette-picker';\n\tdiv.innerHTML = `\n<div class=\"bx--form-item\">\n\t<div\n\tclass=\"bx--select\">\n\t<label for=\"color-palette-select\" class=\"bx--label\">Active color palette</label>\n\t\t<div class=\"bx--select-input__wrapper\">\n\t\t<select id=\"color-palette-select\" class=\"bx--select-input\">\n\t\t\t<option class=\"bx--select-option\" value=\"\" disabled selected hidden>\n\t\t\tChoose an option\n\t\t\t</option>\n\t\t\t${Object.keys(colorPairingOptions)\n\t\t\t\t.map((colorGroup) => {\n\t\t\t\t\tconst optionsCount = colorPairingOptions[colorGroup];\n\t\t\t\t\tlet optionsHTML = `<optgroup class=\"bx--select-optgroup\" label=\"${colorGroup} groups\">`;\n\n\t\t\t\t\tconst numberOfVariants = parseInt(colorGroup);\n\n\t\t\t\t\tif (numberOfVariants !== 14) {\n\t\t\t\t\t\tfor (let i = 1; i <= optionsCount; i++) {\n\t\t\t\t\t\t\toptionsHTML += `\n\t\t\t\t\t\t<option class=\"bx--select-option\" ${\n\t\t\t\t\t\t\tonlyCategoricalPaletteIsApplicable ||\n\t\t\t\t\t\t\tnumberOfVariants < numberOfChartDataGroups\n\t\t\t\t\t\t\t\t? 'disabled'\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t} value=\"${colorGroup}-option-${i}\" ${\n\t\t\t\t\t\t\t\tselectedColorPalette ===\n\t\t\t\t\t\t\t\t`${numberOfVariants}-${i}`\n\t\t\t\t\t\t\t\t\t? 'selected'\n\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t\t${numberOfVariants}-color groups, option ${i}\n\t\t\t\t\t\t</option>`;\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\toptionsHTML += `<option class=\"bx--select-option\" value=\"14-color-option-1\" ${\n\t\t\t\t\t\t\tselectedColorPalette === `14-1` ||\n\t\t\t\t\t\t\tonlyCategoricalPaletteIsApplicable\n\t\t\t\t\t\t\t\t? 'selected'\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t}>\n\t\t\t\t\t\tCategorical palette\n\t\t\t\t\t</option>`;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn optionsHTML;\n\t\t\t\t})\n\t\t\t\t.join('')}\n\t\t</select>\n\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform;\" xmlns=\"http://www.w3.org/2000/svg\" class=\"bx--select__arrow\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path></svg>\n\t\t</div>\n\t</div>\n\t</div>\n</div>`;\n\n\tdiv.querySelector('#color-palette-select').addEventListener(\n\t\t'change',\n\t\t(e: any) => {\n\t\t\tconst { value } = e.target;\n\t\t\tconst [numberOfVariants, pairingOption] = value.split(\n\t\t\t\t'-color-option-'\n\t\t\t);\n\n\t\t\tchartOptions.color.pairing.numberOfVariants = numberOfVariants;\n\t\t\tchartOptions.color.pairing.option = pairingOption;\n\t\t\tchart.model.setOptions(chartOptions);\n\t\t}\n\t);\n\n\tcontainer.querySelector('#charting-controls').appendChild(div);\n};\n\nexport const addControls = (\n\tcontainer,\n\tdemoGroup,\n\tchart,\n\tconfigs = { colorPairingOptions: null }\n) => {\n\tgenerateThemePickerHTML(container, configs);\n\n\tif (demoGroup?.configs?.excludeColorPaletteControl !== true) {\n\t\tgenerateColorPalettePickerHTML(container, chart, configs);\n\t}\n\n\taddRadioButtonEventListeners(container, chart, configs);\n};\n\nexport const addRadioButtonEventListeners = (container, chart, configs) => {\n\t// Add event listeners for radio buttons\n\tconst radioButtons = container.querySelectorAll(\n\t\t'div#theme-picker input.bx--radio-button'\n\t);\n\tradioButtons.forEach((radioButton) => {\n\t\tradioButton.addEventListener('click', (e: any) => {\n\t\t\tconst theme = e.target.value;\n\t\t\tcontainer.setAttribute('class', `container theme--${theme}`);\n\n\t\t\tchart.update();\n\t\t});\n\t});\n};\n\nexport const addOtherVersions = (\n\tcontainer,\n\tdemoGroup,\n\tdemo,\n\tconfigs = { currentVersion: 'vanilla' }\n) => {\n\tconst { currentVersion } = configs;\n\n\tconst demoGroupClassification = (demoGroup.type || '').replace(\n\t\t'-chart',\n\t\t''\n\t);\n\n\tconst div = document.createElement('div');\n\tdiv.setAttribute('class', 'bx--row resource-card-group');\n\n\tlet htmlContent = '';\n\tconst otherVersions = [\n\t\t...(currentVersion !== 'vanilla'\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'vanilla',\n\t\t\t\t\t\tlink: `https://carbon-design-system.github.io/carbon-charts/?path=/story/${demoGroupClassification}-charts-${demo.id}`,\n\t\t\t\t\t},\n\t\t\t  ]\n\t\t\t: []),\n\t\t...(currentVersion !== 'react'\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'React',\n\t\t\t\t\t\tlink: `https://carbon-design-system.github.io/carbon-charts/react/?path=/story/${demoGroupClassification}-charts-${demo.id}`,\n\t\t\t\t\t},\n\t\t\t  ]\n\t\t\t: []),\n\t\t...(currentVersion !== 'angular'\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'Angular',\n\t\t\t\t\t\tlink: `https://carbon-design-system.github.io/carbon-charts/angular/?path=/story/${demoGroupClassification}-charts-${demo.id}`,\n\t\t\t\t\t},\n\t\t\t  ]\n\t\t\t: []),\n\t\t...(currentVersion !== 'vue'\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'Vue',\n\t\t\t\t\t\tlink: `https://carbon-design-system.github.io/carbon-charts/vue/?path=/story/${demoGroupClassification}-charts-${demo.id}`,\n\t\t\t\t\t},\n\t\t\t  ]\n\t\t\t: []),\n\t\t...(currentVersion !== 'svelte'\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'Svelte',\n\t\t\t\t\t\tlink: `https://carbon-design-system.github.io/carbon-charts/svelte/?path=/story/${demoGroupClassification}-charts-${demo.id}`,\n\t\t\t\t\t},\n\t\t\t  ]\n\t\t\t: []),\n\t];\n\n\totherVersions.forEach((otherVersion) => {\n\t\thtmlContent += `<div class=\"bx--no-gutter-sm bx--col-md-6 bx--col-lg-6\">\n\t\t<div class=\"bx--resource-card\">\n\t\t  <div class=\"bx--aspect-ratio bx--aspect-ratio--2x1\">\n\t\t\t<div class=\"bx--aspect-ratio--object\">\n\t\t\t  <a href=\"${otherVersion.link}\" class=\"bx--tile bx--tile--clickable\">\n\t\t\t\t<h5 class=\"bx--resource-card__subtitle\">${otherVersion.name}</h5>\n\t\t\t\t<div class=\"bx--resource-card__icon--img\"></div>\n\t\t\t\t<div class=\"bx--resource-card__icon--action\">\n\t\t\t\t  <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" aria-label=\"Open resource\" width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" role=\"img\">\n\t\t\t\t\t<path d=\"M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z\"></path>\n\t\t\t\t\t<path d=\"M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z\"></path>\n\t\t\t\t  </svg>\n\t\t\t\t</div>\n\t\t\t  </a>\n\t\t\t</div>\n\t\t  </div>\n\t\t</div>\n\t  </div>`;\n\t});\n\n\tdiv.innerHTML = htmlContent;\n\tcontainer.querySelector('#other-versions').appendChild(div);\n};\n\n/**\n * Generates random data going backwards from now once a minute\n * @param {number} quantity number of data points to create\n * @param {number} min min range of integer value\n * @param {number} max max range of integer value\n * @returns {array} randomly generated array of objects with a date and value field\n */\nexport const generateRandomData = (quantity, min, max) => {\n\tconst now = Date.now();\n\treturn Array(quantity)\n\t\t.fill(0)\n\t\t.map((value, index) => {\n\t\t\treturn {\n\t\t\t\tgroup: 'group',\n\t\t\t\tvalue: Math.floor(Math.random() * (max - min + 1) + min),\n\t\t\t\tdate: new Date(now.valueOf() + (index - quantity) * 60000), // go forward a minute for every value\n\t\t\t};\n\t\t});\n};\n/**\n * Adds a generate demo data form to the story\n */\nexport const generateHighScaleDemoDataForm = () =>\n\t`<form id=\"demo-data\"><label for=\"demo-data-name\">Records to generate: </label><input type=\"number\" id=\"demo-data-number\" name=\"number\" required\n\t size=\"5\" value=\"100\"><input type=\"submit\"></label></form>`;\nexport const addDemoDataFormListeners = (container, demo, chart) => {\n\t// Add event listeners for form\n\tconst form = container.querySelector('form#demo-data');\n\tif (form) {\n\t\tform.addEventListener('submit', (e: any) => {\n\t\t\te.stopPropagation();\n\t\t\te.preventDefault();\n\t\t\tconst recordsToGenerate =\n\t\t\t\tparseInt(e.currentTarget[0].value) || 2000;\n\t\t\tchart.model.setData(\n\t\t\t\tgenerateRandomData(recordsToGenerate, 100, 500)\n\t\t\t);\n\t\t\tchart.update();\n\t\t});\n\t}\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["utils.ts"],"names":[],"mappings":"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","sourcesContent":["const generateThemePickerHTML = (container, configs) => {\n\tconst div = document.createElement('div');\n\tdiv.id = 'theme-picker';\n\tdiv.innerHTML = `\n<fieldset class=\"cds--fieldset marginTop-45\">\n\t<legend class=\"cds--label\">Active theme</legend>\n\n\t<div class=\"cds--form-item\">\n\t\t<div class=\"cds--radio-button-group\">\n\t\t\t<div class=\"cds--radio-button-wrapper\">\n\t\t\t\t<input id=\"theme__white\" class=\"cds--radio-button\" type=\"radio\" value=\"white\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"theme__white\" class=\"cds--radio-button__label\">\n\t\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"cds--radio-button__label-text\">White</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\n\t\t\t<div class=\"cds--radio-button-wrapper\">\n\t\t\t\t<input id=\"theme__g10\" class=\"cds--radio-button\" type=\"radio\" value=\"g10\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"theme__g10\" class=\"cds--radio-button__label\">\n\t\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"cds--radio-button__label-text\">G10</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\n\t\t\t<div class=\"cds--radio-button-wrapper\">\n\t\t\t\t<input id=\"theme__g90\" class=\"cds--radio-button\" type=\"radio\" value=\"g90\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"theme__g90\" class=\"cds--radio-button__label\">\n\t\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"cds--radio-button__label-text\">G90</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\n\t\t\t<div class=\"cds--radio-button-wrapper\">\n\t\t\t\t<input id=\"theme__g100\" class=\"cds--radio-button\" type=\"radio\" value=\"g100\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"theme__g100\" class=\"cds--radio-button__label\">\n\t\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"cds--radio-button__label-text\">G100</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</fieldset>`;\n\n\tconst currentTheme = document.documentElement.getAttribute(\n\t\t'data-carbon-theme'\n\t);\n\tif (currentTheme) {\n\t\tdiv.querySelector(`input#theme__${currentTheme}`).setAttribute(\n\t\t\t'checked',\n\t\t\t'true'\n\t\t);\n\t} else {\n\t\tdiv.querySelector(`input#theme__white`).setAttribute('checked', 'true');\n\t}\n\n\tcontainer.querySelector('#charting-controls').appendChild(div);\n};\n\nconst generateColorPalettePickerHTML = (\n\tcontainer,\n\tchart,\n\tconfigs = { colorPairingOptions: null }\n) => {\n\tconst { colorPairingOptions } = configs;\n\n\tconst chartOptions = chart.model.getOptions();\n\tconst { numberOfVariants: variants, option } = chartOptions.color.pairing;\n\n\tconst numberOfChartDataGroups = chart.model.getAllDataGroupsNames().length;\n\tconst numberOfVariants = variants || numberOfChartDataGroups;\n\n\tlet onlyCategoricalPaletteIsApplicable = false;\n\tif (numberOfChartDataGroups > 5) {\n\t\tonlyCategoricalPaletteIsApplicable = true;\n\t}\n\n\tconst selectedColorPalette = `${numberOfVariants}-${option}`;\n\n\tconst div = document.createElement('div');\n\tdiv.id = 'color-palette-picker';\n\tdiv.innerHTML = `\n<div class=\"cds--form-item\">\n\t<div\n\tclass=\"cds--select\">\n\t<label for=\"color-palette-select\" class=\"cds--label\">Active color palette</label>\n\t\t<div class=\"cds--select-input__wrapper\">\n\t\t<select id=\"color-palette-select\" class=\"cds--select-input\">\n\t\t\t<option class=\"cds--select-option\" value=\"\" disabled selected hidden>\n\t\t\tChoose an option\n\t\t\t</option>\n\t\t\t${Object.keys(colorPairingOptions)\n\t\t\t\t.map((colorGroup) => {\n\t\t\t\t\tconst optionsCount = colorPairingOptions[colorGroup];\n\t\t\t\t\tlet optionsHTML = `<optgroup class=\"cds--select-optgroup\" label=\"${colorGroup} groups\">`;\n\n\t\t\t\t\tconst numberOfVariants = parseInt(colorGroup);\n\n\t\t\t\t\tif (numberOfVariants !== 14) {\n\t\t\t\t\t\tfor (let i = 1; i <= optionsCount; i++) {\n\t\t\t\t\t\t\toptionsHTML += `\n\t\t\t\t\t\t<option class=\"cds--select-option\" ${\n\t\t\t\t\t\t\tonlyCategoricalPaletteIsApplicable ||\n\t\t\t\t\t\t\tnumberOfVariants < numberOfChartDataGroups\n\t\t\t\t\t\t\t\t? 'disabled'\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t} value=\"${colorGroup}-option-${i}\" ${\n\t\t\t\t\t\t\t\tselectedColorPalette ===\n\t\t\t\t\t\t\t\t`${numberOfVariants}-${i}`\n\t\t\t\t\t\t\t\t\t? 'selected'\n\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t\t${numberOfVariants}-color groups, option ${i}\n\t\t\t\t\t\t</option>`;\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\toptionsHTML += `<option class=\"cds--select-option\" value=\"14-color-option-1\" ${\n\t\t\t\t\t\t\tselectedColorPalette === `14-1` ||\n\t\t\t\t\t\t\tonlyCategoricalPaletteIsApplicable\n\t\t\t\t\t\t\t\t? 'selected'\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t}>\n\t\t\t\t\t\tCategorical palette\n\t\t\t\t\t</option>`;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn optionsHTML;\n\t\t\t\t})\n\t\t\t\t.join('')}\n\t\t</select>\n\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform;\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cds--select__arrow\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path></svg>\n\t\t</div>\n\t</div>\n\t</div>\n</div>`;\n\n\tdiv.querySelector('#color-palette-select').addEventListener(\n\t\t'change',\n\t\t(e: any) => {\n\t\t\tconst { value } = e.target;\n\t\t\tconst [numberOfVariants, pairingOption] = value.split(\n\t\t\t\t'-color-option-'\n\t\t\t);\n\n\t\t\tchartOptions.color.pairing.numberOfVariants = numberOfVariants;\n\t\t\tchartOptions.color.pairing.option = pairingOption;\n\t\t\tchart.model.setOptions(chartOptions);\n\t\t}\n\t);\n\n\tcontainer.querySelector('#charting-controls').appendChild(div);\n};\n\nexport const addControls = (\n\tcontainer,\n\tdemoGroup,\n\tchart,\n\tconfigs = { colorPairingOptions: null }\n) => {\n\tgenerateThemePickerHTML(container, configs);\n\n\tif (demoGroup?.configs?.excludeColorPaletteControl !== true) {\n\t\tgenerateColorPalettePickerHTML(container, chart, configs);\n\t}\n\n\taddRadioButtonEventListeners(container, chart, configs);\n};\n\nexport const addRadioButtonEventListeners = (container, chart, configs) => {\n\t// Add event listeners for radio buttons\n\tconst radioButtons = container.querySelectorAll(\n\t\t'div#theme-picker input.cds--radio-button'\n\t);\n\n\tconst currentTheme = document.documentElement.getAttribute(\n\t\t'data-carbon-theme'\n\t);\n\tif (currentTheme) {\n\t\tchart.services.domUtils\n\t\t\t.getHolder()\n\t\t\t.setAttribute('data-carbon-theme', currentTheme);\n\t}\n\n\tradioButtons.forEach((radioButton) => {\n\t\tradioButton.addEventListener('click', (e: any) => {\n\t\t\tconst theme = e.target.value;\n\n\t\t\tdocument.documentElement.setAttribute('data-carbon-theme', theme);\n\t\t\tchart.services.domUtils\n\t\t\t\t.getHolder()\n\t\t\t\t.setAttribute('data-carbon-theme', theme);\n\n\t\t\tchart.update();\n\t\t});\n\t});\n};\n\nexport const addOtherVersions = (\n\tcontainer,\n\tdemoGroup,\n\tdemo,\n\tconfigs = { currentVersion: 'vanilla' }\n) => {\n\tconst { currentVersion } = configs;\n\n\tconst demoGroupClassification = (demoGroup.type || '').replace(\n\t\t'-chart',\n\t\t''\n\t);\n\n\tconst div = document.createElement('div');\n\tdiv.setAttribute('class', 'cds--row resource-card-group');\n\n\tlet htmlContent = '';\n\tconst otherVersions = [\n\t\t...(currentVersion !== 'vanilla'\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'vanilla',\n\t\t\t\t\t\tlink: `https://carbon-design-system.github.io/carbon-charts/?path=/story/${demoGroupClassification}-charts-${demo.id}`,\n\t\t\t\t\t},\n\t\t\t  ]\n\t\t\t: []),\n\t\t...(currentVersion !== 'react'\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'React',\n\t\t\t\t\t\tlink: `https://carbon-design-system.github.io/carbon-charts/react/?path=/story/${demoGroupClassification}-charts-${demo.id}`,\n\t\t\t\t\t},\n\t\t\t  ]\n\t\t\t: []),\n\t\t...(currentVersion !== 'angular'\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'Angular',\n\t\t\t\t\t\tlink: `https://carbon-design-system.github.io/carbon-charts/angular/?path=/story/${demoGroupClassification}-charts-${demo.id}`,\n\t\t\t\t\t},\n\t\t\t  ]\n\t\t\t: []),\n\t\t...(currentVersion !== 'vue'\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'Vue',\n\t\t\t\t\t\tlink: `https://carbon-design-system.github.io/carbon-charts/vue/?path=/story/${demoGroupClassification}-charts-${demo.id}`,\n\t\t\t\t\t},\n\t\t\t  ]\n\t\t\t: []),\n\t\t...(currentVersion !== 'svelte'\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'Svelte',\n\t\t\t\t\t\tlink: `https://carbon-design-system.github.io/carbon-charts/svelte/?path=/story/${demoGroupClassification}-charts-${demo.id}`,\n\t\t\t\t\t},\n\t\t\t  ]\n\t\t\t: []),\n\t];\n\n\totherVersions.forEach((otherVersion) => {\n\t\thtmlContent += `<div class=\"cds--no-gutter-sm cds--col-md-6 cds--col-lg-6\">\n\t\t<div class=\"cds--resource-card\">\n\t\t  <div class=\"cds--aspect-ratio cds--aspect-ratio--2x1\">\n\t\t\t<div class=\"cds--aspect-ratio--object\">\n\t\t\t  <a href=\"${otherVersion.link}\" class=\"cds--tile cds--tile--clickable\">\n\t\t\t\t<h5 class=\"cds--resource-card__subtitle\">${otherVersion.name}</h5>\n\t\t\t\t<div class=\"cds--resource-card__icon--img\"></div>\n\t\t\t\t<div class=\"cds--resource-card__icon--action\">\n\t\t\t\t  <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" aria-label=\"Open resource\" width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" role=\"img\">\n\t\t\t\t\t<path d=\"M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z\"></path>\n\t\t\t\t\t<path d=\"M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z\"></path>\n\t\t\t\t  </svg>\n\t\t\t\t</div>\n\t\t\t  </a>\n\t\t\t</div>\n\t\t  </div>\n\t\t</div>\n\t  </div>`;\n\t});\n\n\tdiv.innerHTML = htmlContent;\n\tcontainer.querySelector('#other-versions').appendChild(div);\n};\n\n/**\n * Generates random data going backwards from now once a minute\n * @param {number} quantity number of data points to create\n * @param {number} min min range of integer value\n * @param {number} max max range of integer value\n * @returns {array} randomly generated array of objects with a date and value field\n */\nexport const generateRandomData = (quantity, min, max) => {\n\tconst now = Date.now();\n\treturn Array(quantity)\n\t\t.fill(0)\n\t\t.map((value, index) => {\n\t\t\treturn {\n\t\t\t\tgroup: 'group',\n\t\t\t\tvalue: Math.floor(Math.random() * (max - min + 1) + min),\n\t\t\t\tdate: new Date(now.valueOf() + (index - quantity) * 60000), // go forward a minute for every value\n\t\t\t};\n\t\t});\n};\n/**\n * Adds a generate demo data form to the story\n */\nexport const generateHighScaleDemoDataForm = () =>\n\t`<form id=\"demo-data\"><label for=\"demo-data-name\">Records to generate: </label><input type=\"number\" id=\"demo-data-number\" name=\"number\" required\n\t size=\"5\" value=\"100\"><input type=\"submit\"></label></form>`;\nexport const addDemoDataFormListeners = (container, demo, chart) => {\n\t// Add event listeners for form\n\tconst form = container.querySelector('form#demo-data');\n\tif (form) {\n\t\tform.addEventListener('submit', (e: any) => {\n\t\t\te.stopPropagation();\n\t\t\te.preventDefault();\n\t\t\tconst recordsToGenerate =\n\t\t\t\tparseInt(e.currentTarget[0].value) || 2000;\n\t\t\tchart.model.setData(\n\t\t\t\tgenerateRandomData(recordsToGenerate, 100, 500)\n\t\t\t);\n\t\t\tchart.update();\n\t\t});\n\t}\n};\n"]}

package/model/treemap.js

@@ -33,7 +33,7 @@ var TreemapChartModel = /** @class */ (function (_super) {
             }
             else if (Tools.getProperty(datum.name) !== null &&
                 Tools.getProperty(datum.value)) {
-                result.push(["–", datum.name, datum.value]);
+                result.push(['–', datum.name, datum.value]);
             }
         });
         return result;

package/model/treemap.js.map

@@ -1 +1 @@
-{"version":3,"file":"treemap.js","sourceRoot":"","sources":["treemap.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC;;GAEG;AACH;IAAuC,qCAAU;IAC/C,2BAAY,QAAa;eACvB,kBAAM,QAAQ,CAAC;IACjB,CAAC;IAED,+CAAmB,GAAnB;QACE,IAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,IAAM,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;QAE7C,WAAW,CAAC,OAAO,CAAC,UAAC,KAAK;YACxB,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;gBACjC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAC,KAAK;oBAC3B,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;gBACrD,CAAC,CAAC,CAAC;aACJ;iBAAM,IACL,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI;gBACtC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,EAC9B;gBACA,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;aAC7C;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC;IAChB,CAAC;IACH,wBAAC;AAAD,CAAC,AAzBD,CAAuC,UAAU,GAyBhD","sourcesContent":["// Internal Imports\nimport { ChartModel } from './model';\nimport { Tools } from '../tools';\n\n/**\n * The treemap chart model layer\n */\nexport class TreemapChartModel extends ChartModel {\n  constructor(services: any) {\n    super(services);\n  }\n\n  getTabularDataArray() {\n    const displayData = this.getDisplayData();\n\n    const result = [['Child', 'Group', 'Value']];\n\n    displayData.forEach((datum) => {\n      if (Array.isArray(datum.children)) {\n        datum.children.forEach((child) => {\n          result.push([child.name, datum.name, child.value]);\n        });\n      } else if (\n        Tools.getProperty(datum.name) !== null &&\n        Tools.getProperty(datum.value)\n      ) {\n        result.push([\"–\", datum.name, datum.value]);\n      }\n    });\n\n    return result;\n  }\n}\n"]}
+{"version":3,"file":"treemap.js","sourceRoot":"","sources":["treemap.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC;;GAEG;AACH;IAAuC,qCAAU;IAChD,2BAAY,QAAa;eACxB,kBAAM,QAAQ,CAAC;IAChB,CAAC;IAED,+CAAmB,GAAnB;QACC,IAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,IAAM,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;QAE7C,WAAW,CAAC,OAAO,CAAC,UAAC,KAAK;YACzB,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;gBAClC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAC,KAAK;oBAC5B,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;gBACpD,CAAC,CAAC,CAAC;aACH;iBAAM,IACN,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI;gBACtC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,EAC7B;gBACD,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;aAC5C;QACF,CAAC,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC;IACf,CAAC;IACF,wBAAC;AAAD,CAAC,AAzBD,CAAuC,UAAU,GAyBhD","sourcesContent":["// Internal Imports\nimport { ChartModel } from './model';\nimport { Tools } from '../tools';\n\n/**\n * The treemap chart model layer\n */\nexport class TreemapChartModel extends ChartModel {\n\tconstructor(services: any) {\n\t\tsuper(services);\n\t}\n\n\tgetTabularDataArray() {\n\t\tconst displayData = this.getDisplayData();\n\n\t\tconst result = [['Child', 'Group', 'Value']];\n\n\t\tdisplayData.forEach((datum) => {\n\t\t\tif (Array.isArray(datum.children)) {\n\t\t\t\tdatum.children.forEach((child) => {\n\t\t\t\t\tresult.push([child.name, datum.name, child.value]);\n\t\t\t\t});\n\t\t\t} else if (\n\t\t\t\tTools.getProperty(datum.name) !== null &&\n\t\t\t\tTools.getProperty(datum.value)\n\t\t\t) {\n\t\t\t\tresult.push(['–', datum.name, datum.value]);\n\t\t\t}\n\t\t});\n\n\t\treturn result;\n\t}\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/charts",
-  "version": "0.58.2",
+  "version": "1.0.2",
   "description": "Carbon charting components",
   "main": "./bundle.js",
   "module": "./index.js",
@@ -48,7 +48,8 @@
   "author": "IBM",
   "license": "Apache-2.0",
   "dependencies": {
-    "@carbon/colors": "10.29.0",
+    "@carbon/colors": "^11.2.0",
+    "@carbon/styles": "^1.3.0",
     "@carbon/telemetry": "0.1.0",
     "@carbon/utils-position": "1.1.1",
     "carbon-components": "10.56.0",
@@ -63,12 +64,13 @@
     "d3": "7.x"
   },
   "devDependencies": {
-    "@carbon/elements": "10.39.0",
-    "@carbon/import-once": "10.5.0",
-    "@carbon/layout": "10.28.0",
-    "@carbon/motion": "10.21.0",
-    "@carbon/themes": "10.39.0",
-    "@carbon/type": "10.32.0",
+    "@carbon/elements": "11.3.0",
+    "@carbon/grid": "11.2.0",
+    "@carbon/import-once": "10.7.0",
+    "@carbon/layout": "11.2.0",
+    "@carbon/motion": "11.1.0",
+    "@carbon/themes": "11.3.0",
+    "@carbon/type": "11.3.0",
     "@rollup/plugin-json": "4.0.2",
     "@rollup/plugin-replace": "3.0.0",
     "@storybook/addon-knobs": "5.3.12",
@@ -111,8 +113,8 @@
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-terser": "5.1.2",
     "rollup-plugin-typescript2": "0.26.0",
-    "sass": "1.17.1",
-    "sass-loader": "8.0.0",
+    "sass": "1.49.9",
+    "sass-loader": "10.1.1",
     "style-loader": "0.19.0",
     "ts-loader": "^6.2.1",
     "tslint": "5.20.1",

package/services/essentials/dom-utils.js

@@ -18,7 +18,7 @@ import { Events } from './../../interfaces';
 import { select } from 'd3-selection';
 import { Tools } from '../../tools';
 // import the settings for the css prefix
-import settings from 'carbon-components/es/globals/js/settings';
+import { carbonPrefix } from '../../configuration-non-customizable';
 // MISC
 import ResizeObserver from 'resize-observer-polyfill';
 import domToImage from 'dom-to-image';
@@ -183,7 +183,7 @@ var DOMUtils = /** @class */ (function (_super) {
         var chartsprefix = Tools.getProperty(options, 'style', 'prefix');
         var mainContainer = select(this.getHolder())
             .append('div')
-            .classed(settings.prefix + "--" + chartsprefix + "--chart-wrapper", true)
+            .classed(carbonPrefix + "--" + chartsprefix + "--chart-wrapper", true)
             .style('height', '100%')
             .style('width', '100%');
         mainContainer.append('g').attr('class', CSS_VERIFIER_ELEMENT_CLASSNAME);
@@ -195,7 +195,7 @@ var DOMUtils = /** @class */ (function (_super) {
     DOMUtils.prototype.styleHolderElement = function () {
         var holderElement = this.getHolder();
         // Add class to chart holder
-        select(this.getHolder()).classed(settings.prefix + "--chart-holder", true);
+        select(this.getHolder()).classed(carbonPrefix + "--chart-holder", true);
         // In order for resize events to not clash with these updates
         // We'll check if the width & height values passed in options
         // Have changed, before setting them to the holder
@@ -230,7 +230,7 @@ var DOMUtils = /** @class */ (function (_super) {
             // Remove the toolbar
             filter: function (node) {
                 if (node.classList &&
-                    node.classList.contains('bx--cc--toolbar')) {
+                    node.classList.contains('cds--cc--toolbar')) {
                     return false;
                 }
                 return true;
@@ -257,7 +257,7 @@ var DOMUtils = /** @class */ (function (_super) {
             // Remove the toolbar
             filter: function (node) {
                 if (node.classList &&
-                    node.classList.contains('bx--cc--toolbar')) {
+                    node.classList.contains('cds--cc--toolbar')) {
                     return false;
                 }
                 return true;

package/services/essentials/dom-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom-utils.js","sourceRoot":"","sources":["dom-utils.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Service } from '../service';\nimport { Events } from './../../interfaces';\n\n// D3 Imports\nimport { select, Selection } from 'd3-selection';\nimport { Tools } from '../../tools';\n\n// import the settings for the css prefix\nimport settings from 'carbon-components/es/globals/js/settings';\n\n// MISC\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport domToImage from 'dom-to-image';\n\nconst CSS_VERIFIER_ELEMENT_CLASSNAME = 'DONT_STYLE_ME_css_styles_verifier';\n\ninterface getSVGElementSizeOptions {\n\tuseAttrs?: boolean;\n\tuseClientDimensions?: boolean;\n\tuseBBox?: boolean;\n\tuseBoundingRect?: boolean;\n}\n\nexport class DOMUtils extends Service {\n\tprivate chartID = Math.floor(\n\t\t(1 + Math.random()) * 0x1000000000000\n\t).toString(16);\n\n\tconstructor(model: any, services: any) {\n\t\tsuper(model, services);\n\t}\n\n\tstatic getHTMLElementSize(element: HTMLElement) {\n\t\treturn {\n\t\t\twidth: element.clientWidth,\n\t\t\theight: element.clientHeight,\n\t\t};\n\t}\n\n\tstatic getSVGElementSize(\n\t\tsvgSelector: Selection<any, any, any, any>,\n\t\toptions: getSVGElementSizeOptions = {\n\t\t\tuseAttrs: false,\n\t\t\tuseClientDimensions: false,\n\t\t\tuseBBox: false,\n\t\t\tuseBoundingRect: false,\n\t\t}\n\t) {\n\t\tif (!svgSelector.attr) {\n\t\t\tsvgSelector = select(svgSelector as any);\n\t\t}\n\n\t\tconst finalDimensions = {\n\t\t\twidth: 0,\n\t\t\theight: 0,\n\t\t};\n\n\t\tconst validateAndSetDimensions = (dimensions) => {\n\t\t\tif (dimensions) {\n\t\t\t\tObject.keys(finalDimensions).forEach((dimensionKey) => {\n\t\t\t\t\tif (dimensions[dimensionKey]) {\n\t\t\t\t\t\tconst dimension = dimensions[dimensionKey];\n\t\t\t\t\t\tconst dimensionNumber = parseFloat(dimension);\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tdimension &&\n\t\t\t\t\t\t\tdimensionNumber > finalDimensions[dimensionKey] &&\n\t\t\t\t\t\t\t('' + dimension).indexOf('%') === -1\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tfinalDimensions[dimensionKey] = dimensionNumber;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tconst attrDimensions = {\n\t\t\twidth: svgSelector.attr('width'),\n\t\t\theight: svgSelector.attr('height'),\n\t\t};\n\n\t\tlet bbox, bboxDimensions, boundingRect, boundingRectDimensions;\n\t\t// In many versions of Firefox\n\t\t// getBBox will cause an \"NSFailure\" error\n\t\ttry {\n\t\t\tbbox = svgSelector.node().getBBox();\n\t\t\tbboxDimensions = {\n\t\t\t\twidth: bbox.width,\n\t\t\t\theight: bbox.height,\n\t\t\t};\n\t\t} catch (e) {}\n\n\t\ttry {\n\t\t\tboundingRect = svgSelector.node().getBoundingClientRect();\n\t\t\tboundingRectDimensions = {\n\t\t\t\twidth: boundingRect.width,\n\t\t\t\theight: boundingRect.height,\n\t\t\t};\n\t\t} catch (e) {}\n\n\t\tconst clientDimensions = {\n\t\t\twidth: svgSelector.node().clientWidth,\n\t\t\theight: svgSelector.node().clientHeight,\n\t\t};\n\n\t\t// If both attribute values are numbers\n\t\t// And not percentages or NaN\n\t\tif (options) {\n\t\t\tif (options.useAttrs) {\n\t\t\t\tvalidateAndSetDimensions(attrDimensions);\n\n\t\t\t\tif (finalDimensions.width > 0 && finalDimensions.height > 0) {\n\t\t\t\t\treturn finalDimensions;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (options.useClientDimensions) {\n\t\t\t\tvalidateAndSetDimensions(clientDimensions);\n\n\t\t\t\tif (finalDimensions.width > 0 && finalDimensions.height > 0) {\n\t\t\t\t\treturn clientDimensions;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (options.useBBox) {\n\t\t\t\tvalidateAndSetDimensions(bboxDimensions);\n\n\t\t\t\tif (finalDimensions.width > 0 && finalDimensions.height > 0) {\n\t\t\t\t\treturn bboxDimensions;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (options.useBoundingRect) {\n\t\t\t\tvalidateAndSetDimensions(boundingRectDimensions);\n\n\t\t\t\tif (finalDimensions.width > 0 && finalDimensions.height > 0) {\n\t\t\t\t\treturn boundingRectDimensions;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttry {\n\t\t\tconst nativeDimensions = {\n\t\t\t\twidth: Tools.getProperty(\n\t\t\t\t\tsvgSelector.node(),\n\t\t\t\t\t'width',\n\t\t\t\t\t'baseVal',\n\t\t\t\t\t'value'\n\t\t\t\t),\n\t\t\t\theight: Tools.getProperty(\n\t\t\t\t\tsvgSelector.node(),\n\t\t\t\t\t'height',\n\t\t\t\t\t'baseVal',\n\t\t\t\t\t'value'\n\t\t\t\t),\n\t\t\t};\n\n\t\t\tvalidateAndSetDimensions(nativeDimensions);\n\t\t} catch (e) {\n\t\t\tvalidateAndSetDimensions(clientDimensions);\n\t\t\tvalidateAndSetDimensions(bboxDimensions);\n\t\t\tvalidateAndSetDimensions(attrDimensions);\n\t\t}\n\n\t\treturn finalDimensions;\n\t}\n\n\tstatic appendOrSelect(parent, query) {\n\t\tconst selection = parent.select(`${query}`);\n\n\t\tif (selection.empty()) {\n\t\t\t// see if there is an id\n\t\t\tlet querySections = query.split('#');\n\t\t\tlet elementToAppend;\n\t\t\tlet id;\n\t\t\t// if there is an id\n\t\t\tif (querySections.length === 2) {\n\t\t\t\t// take out the element to append\n\t\t\t\telementToAppend = querySections[0];\n\t\t\t\t// split it by classes\n\t\t\t\tquerySections = querySections[1].split('.');\n\t\t\t\t// the first string is the id\n\t\t\t\tid = querySections[0];\n\t\t\t} else {\n\t\t\t\tquerySections = query.split('.');\n\t\t\t\telementToAppend = querySections[0];\n\t\t\t}\n\n\t\t\treturn parent\n\t\t\t\t.append(elementToAppend)\n\t\t\t\t.attr('id', id)\n\t\t\t\t.attr('class', querySections.slice(1).join(' '));\n\t\t}\n\n\t\treturn selection;\n\t}\n\n\tprotected mainContainer: HTMLElement;\n\tprotected width: string;\n\tprotected height: string;\n\n\tinit() {\n\t\t// Add width & height to the chart holder if necessary, and add a classname\n\t\tthis.styleHolderElement();\n\n\t\tthis.addMainContainer();\n\t\tthis.verifyCSSStylesBeingApplied();\n\n\t\tif (this.model.getOptions().resizable) {\n\t\t\tthis.addResizeListener();\n\t\t}\n\n\t\tthis.addHolderListeners();\n\n\t\tthis.handleFullscreenChange();\n\t}\n\n\tgetChartID() {\n\t\treturn this.chartID;\n\t}\n\n\tgenerateElementIDString(originalID) {\n\t\treturn `chart-${this.chartID}-${originalID}`;\n\t}\n\n\taddMainContainer() {\n\t\tconst options = this.model.getOptions();\n\t\tconst chartsprefix = Tools.getProperty(options, 'style', 'prefix');\n\n\t\tconst mainContainer = select(this.getHolder())\n\t\t\t.append('div')\n\t\t\t.classed(`${settings.prefix}--${chartsprefix}--chart-wrapper`, true)\n\t\t\t.style('height', '100%')\n\t\t\t.style('width', '100%');\n\n\t\tmainContainer.append('g').attr('class', CSS_VERIFIER_ELEMENT_CLASSNAME);\n\n\t\tthis.mainContainer = mainContainer.node();\n\t}\n\n\tupdate() {\n\t\tthis.styleHolderElement();\n\t}\n\n\tstyleHolderElement() {\n\t\tconst holderElement = this.getHolder() as HTMLElement;\n\n\t\t// Add class to chart holder\n\t\tselect(this.getHolder()).classed(\n\t\t\t`${settings.prefix}--chart-holder`,\n\t\t\ttrue\n\t\t);\n\n\t\t// In order for resize events to not clash with these updates\n\t\t// We'll check if the width & height values passed in options\n\t\t// Have changed, before setting them to the holder\n\t\tconst { width, height } = this.model.getOptions();\n\t\tif (width !== this.width) {\n\t\t\t// Apply formatted width attribute to chart\n\t\t\tholderElement.style.width = width;\n\n\t\t\tthis.width = width;\n\t\t}\n\n\t\tif (height !== this.height) {\n\t\t\t// Apply formatted width attribute to chart\n\t\t\tholderElement.style.height = height;\n\n\t\t\tthis.height = height;\n\t\t}\n\t}\n\n\tgetHolder() {\n\t\treturn this.model.get('holder');\n\t}\n\n\texportToJPG() {\n\t\tconst self = this;\n\n\t\tconst holder = this.getHolder();\n\t\tconst holderSelection = select(holder);\n\t\tholderSelection.classed('filled', true);\n\n\t\tdomToImage\n\t\t\t.toJpeg(this.getMainContainer(), {\n\t\t\t\tbgcolor:\n\t\t\t\t\ttypeof window !== 'undefined'\n\t\t\t\t\t\t? window\n\t\t\t\t\t\t\t\t.getComputedStyle(holder)\n\t\t\t\t\t\t\t\t.getPropertyValue('background-color')\n\t\t\t\t\t\t: undefined,\n\t\t\t\tquality: 1,\n\t\t\t\t// Remove the toolbar\n\t\t\t\tfilter: (node) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tnode.classList &&\n\t\t\t\t\t\tnode.classList.contains('bx--cc--toolbar')\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn false;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn true;\n\t\t\t\t},\n\t\t\t})\n\t\t\t.then(function (dataUrl) {\n\t\t\t\tself.services.files.downloadImage(dataUrl, 'myChart.jpg');\n\t\t\t\tholderSelection.classed('filled', false);\n\t\t\t});\n\t}\n\n\texportToPNG() {\n\t\tconst self = this;\n\n\t\tconst holder = this.getHolder();\n\t\tconst holderSelection = select(holder);\n\t\tholderSelection.classed('filled', true);\n\n\t\tdomToImage\n\t\t\t.toPng(this.getMainContainer(), {\n\t\t\t\tbgcolor:\n\t\t\t\t\ttypeof window !== 'undefined'\n\t\t\t\t\t\t? window\n\t\t\t\t\t\t\t\t.getComputedStyle(holder)\n\t\t\t\t\t\t\t\t.getPropertyValue('background-color')\n\t\t\t\t\t\t: undefined,\n\t\t\t\tquality: 1,\n\t\t\t\t// Remove the toolbar\n\t\t\t\tfilter: (node) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tnode.classList &&\n\t\t\t\t\t\tnode.classList.contains('bx--cc--toolbar')\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn false;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn true;\n\t\t\t\t},\n\t\t\t})\n\t\t\t.then(function (dataUrl) {\n\t\t\t\tself.services.files.downloadImage(dataUrl, 'myChart.png');\n\t\t\t\tholderSelection.classed('filled', false);\n\t\t\t})\n\t\t\t.catch(function (error) {\n\t\t\t\tconsole.error('oops, something went wrong!', error);\n\t\t\t});\n\t}\n\n\ttoggleFullscreen() {\n\t\tconst holder = this.getHolder();\n\t\tconst holderSelection = select(holder);\n\n\t\tconst isFullScreen = holderSelection.classed('fullscreen');\n\n\t\tif (\n\t\t\tisFullScreen &&\n\t\t\t(document.fullscreenElement ||\n\t\t\t\tdocument['webkitFullscreenElement'] ||\n\t\t\t\tdocument['mozFullScreenElement'] ||\n\t\t\t\tdocument['msFullscreenElement'])\n\t\t) {\n\t\t\t// Call the correct function depending on the browser\n\t\t\tif (document.exitFullscreen) {\n\t\t\t\tdocument.exitFullscreen();\n\t\t\t} else if (document['webkitExitFullscreen']) {\n\t\t\t\tdocument['webkitExitFullscreen']();\n\t\t\t} else if (document['mozCancelFullScreen']) {\n\t\t\t\tdocument['mozCancelFullScreen']();\n\t\t\t} else if (document['msExitFullscreen']) {\n\t\t\t\tdocument['msExitFullscreen']();\n\t\t\t}\n\t\t} else {\n\t\t\t// Call the correct function depending on the browser\n\t\t\tif (holder.requestFullscreen) {\n\t\t\t\tholder.requestFullscreen();\n\t\t\t} else if (holder.webkitRequestFullscreen) {\n\t\t\t\tholder.webkitRequestFullscreen();\n\t\t\t} else if (holder.mozRequestFullScreen) {\n\t\t\t\tholder.mozRequestFullScreen();\n\t\t\t} else if (holder.msRequestFullscreen) {\n\t\t\t\tholder.msRequestFullscreen();\n\t\t\t}\n\t\t}\n\t}\n\n\thandleFullscreenChange() {\n\t\tdocument.addEventListener('fullscreenchange', () => {\n\t\t\tconst holderSelection = select(this.getHolder());\n\t\t\tconst isFullScreen = holderSelection.classed('fullscreen');\n\n\t\t\t// Toggle the `fullscreen` classname\n\t\t\tholderSelection.classed('fullscreen', !isFullScreen);\n\t\t});\n\t}\n\n\tverifyCSSStylesBeingApplied() {\n\t\t// setTimeout is needed here since in `addSVGElement()` we're appending the\n\t\t// CSS verifier element, and need to allow some time for it to become available\n\t\t// in the DOM\n\t\tsetTimeout(() => {\n\t\t\tconst cssVerifierElement = select(this.mainContainer)\n\t\t\t\t.select(`g.${CSS_VERIFIER_ELEMENT_CLASSNAME}`)\n\t\t\t\t.node();\n\t\t\tconst computedStyles = getComputedStyle(cssVerifierElement as any);\n\t\t\tif (\n\t\t\t\tcomputedStyles.getPropertyValue('overflow') !== 'hidden' ||\n\t\t\t\tcomputedStyles.getPropertyValue('opacity') !== '0'\n\t\t\t) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t'Missing CSS styles for Carbon Charts. Please read the Carbon Charts getting started guide.'\n\t\t\t\t);\n\t\t\t}\n\t\t});\n\t}\n\n\tsetSVGMaxHeight() {\n\t\t// if there is a set height on the holder, leave the chart svg height at 100%\n\t\tif (!this.model.getOptions().height) {\n\t\t\tconst { height: chartHeight } = DOMUtils.getSVGElementSize(\n\t\t\t\tselect(this.mainContainer),\n\t\t\t\t{ useBBox: true }\n\t\t\t);\n\t\t\tconst chartSVGSelector = select(this.mainContainer).attr('class');\n\t\t\tconst children = select(this.mainContainer).selectAll(\n\t\t\t\t`.${chartSVGSelector} > svg`\n\t\t\t);\n\n\t\t\t// get the height of the children SVGs (spacers, titles, etc)\n\t\t\tlet childrenHeight = 0;\n\t\t\tchildren.nodes().forEach(function (childSVG) {\n\t\t\t\tchildrenHeight += Number(\n\t\t\t\t\tDOMUtils.getSVGElementSize(select(childSVG), {\n\t\t\t\t\t\tuseBBox: true,\n\t\t\t\t\t}).height\n\t\t\t\t);\n\t\t\t});\n\n\t\t\t// set the chart svg height to the children height\n\t\t\t// forcing the chart not to take up any more space than it requires\n\t\t\tchildrenHeight <= chartHeight\n\t\t\t\t? select(this.mainContainer).attr('height', childrenHeight)\n\t\t\t\t: select(this.mainContainer).attr('height', '100%');\n\t\t}\n\t}\n\n\tgetMainContainer() {\n\t\treturn this.mainContainer;\n\t}\n\n\taddHolderListeners() {\n\t\tconst holder = this.getHolder();\n\n\t\tif (!holder) {\n\t\t\treturn;\n\t\t}\n\n\t\tselect(holder)\n\t\t\t.on('mouseover', () => {\n\t\t\t\t// Dispatch event\n\t\t\t\tthis.services.events.dispatchEvent(Events.Chart.MOUSEOVER);\n\t\t\t})\n\t\t\t.on('mouseout', () => {\n\t\t\t\t// Dispatch event\n\t\t\t\tthis.services.events.dispatchEvent(Events.Chart.MOUSEOUT);\n\t\t\t});\n\t}\n\n\taddResizeListener() {\n\t\tconst holder = this.getHolder();\n\n\t\tif (!holder) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Grab current dimensions of the chart holder\n\t\tlet containerWidth = holder.clientWidth;\n\t\tlet containerHeight = holder.clientHeight;\n\n\t\t// The resize callback function\n\t\tconst resizeCallback = Tools.debounce((entries, observer) => {\n\t\t\tif (!holder) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\tMath.abs(containerWidth - holder.clientWidth) > 1 ||\n\t\t\t\tMath.abs(containerHeight - holder.clientHeight) > 1\n\t\t\t) {\n\t\t\t\tcontainerWidth = holder.clientWidth;\n\t\t\t\tcontainerHeight = holder.clientHeight;\n\n\t\t\t\tthis.services.events.dispatchEvent(Events.Chart.RESIZE);\n\t\t\t}\n\t\t}, 12.5);\n\n\t\t// Observe the behaviour of resizing on the holder\n\t\tconst resizeObserver = new ResizeObserver(resizeCallback);\n\t\tresizeObserver.observe(holder);\n\t}\n}\n"]}
+{"version":3,"file":"dom-utils.js","sourceRoot":"","sources":["dom-utils.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Service } from '../service';\nimport { Events } from './../../interfaces';\n\n// D3 Imports\nimport { select, Selection } from 'd3-selection';\nimport { Tools } from '../../tools';\n\n// import the settings for the css prefix\nimport { carbonPrefix } from '../../configuration-non-customizable';\n\n// MISC\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport domToImage from 'dom-to-image';\n\nconst CSS_VERIFIER_ELEMENT_CLASSNAME = 'DONT_STYLE_ME_css_styles_verifier';\n\ninterface getSVGElementSizeOptions {\n\tuseAttrs?: boolean;\n\tuseClientDimensions?: boolean;\n\tuseBBox?: boolean;\n\tuseBoundingRect?: boolean;\n}\n\nexport class DOMUtils extends Service {\n\tprivate chartID = Math.floor(\n\t\t(1 + Math.random()) * 0x1000000000000\n\t).toString(16);\n\n\tconstructor(model: any, services: any) {\n\t\tsuper(model, services);\n\t}\n\n\tstatic getHTMLElementSize(element: HTMLElement) {\n\t\treturn {\n\t\t\twidth: element.clientWidth,\n\t\t\theight: element.clientHeight,\n\t\t};\n\t}\n\n\tstatic getSVGElementSize(\n\t\tsvgSelector: Selection<any, any, any, any>,\n\t\toptions: getSVGElementSizeOptions = {\n\t\t\tuseAttrs: false,\n\t\t\tuseClientDimensions: false,\n\t\t\tuseBBox: false,\n\t\t\tuseBoundingRect: false,\n\t\t}\n\t) {\n\t\tif (!svgSelector.attr) {\n\t\t\tsvgSelector = select(svgSelector as any);\n\t\t}\n\n\t\tconst finalDimensions = {\n\t\t\twidth: 0,\n\t\t\theight: 0,\n\t\t};\n\n\t\tconst validateAndSetDimensions = (dimensions) => {\n\t\t\tif (dimensions) {\n\t\t\t\tObject.keys(finalDimensions).forEach((dimensionKey) => {\n\t\t\t\t\tif (dimensions[dimensionKey]) {\n\t\t\t\t\t\tconst dimension = dimensions[dimensionKey];\n\t\t\t\t\t\tconst dimensionNumber = parseFloat(dimension);\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tdimension &&\n\t\t\t\t\t\t\tdimensionNumber > finalDimensions[dimensionKey] &&\n\t\t\t\t\t\t\t('' + dimension).indexOf('%') === -1\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tfinalDimensions[dimensionKey] = dimensionNumber;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tconst attrDimensions = {\n\t\t\twidth: svgSelector.attr('width'),\n\t\t\theight: svgSelector.attr('height'),\n\t\t};\n\n\t\tlet bbox, bboxDimensions, boundingRect, boundingRectDimensions;\n\t\t// In many versions of Firefox\n\t\t// getBBox will cause an \"NSFailure\" error\n\t\ttry {\n\t\t\tbbox = svgSelector.node().getBBox();\n\t\t\tbboxDimensions = {\n\t\t\t\twidth: bbox.width,\n\t\t\t\theight: bbox.height,\n\t\t\t};\n\t\t} catch (e) {}\n\n\t\ttry {\n\t\t\tboundingRect = svgSelector.node().getBoundingClientRect();\n\t\t\tboundingRectDimensions = {\n\t\t\t\twidth: boundingRect.width,\n\t\t\t\theight: boundingRect.height,\n\t\t\t};\n\t\t} catch (e) {}\n\n\t\tconst clientDimensions = {\n\t\t\twidth: svgSelector.node().clientWidth,\n\t\t\theight: svgSelector.node().clientHeight,\n\t\t};\n\n\t\t// If both attribute values are numbers\n\t\t// And not percentages or NaN\n\t\tif (options) {\n\t\t\tif (options.useAttrs) {\n\t\t\t\tvalidateAndSetDimensions(attrDimensions);\n\n\t\t\t\tif (finalDimensions.width > 0 && finalDimensions.height > 0) {\n\t\t\t\t\treturn finalDimensions;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (options.useClientDimensions) {\n\t\t\t\tvalidateAndSetDimensions(clientDimensions);\n\n\t\t\t\tif (finalDimensions.width > 0 && finalDimensions.height > 0) {\n\t\t\t\t\treturn clientDimensions;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (options.useBBox) {\n\t\t\t\tvalidateAndSetDimensions(bboxDimensions);\n\n\t\t\t\tif (finalDimensions.width > 0 && finalDimensions.height > 0) {\n\t\t\t\t\treturn bboxDimensions;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (options.useBoundingRect) {\n\t\t\t\tvalidateAndSetDimensions(boundingRectDimensions);\n\n\t\t\t\tif (finalDimensions.width > 0 && finalDimensions.height > 0) {\n\t\t\t\t\treturn boundingRectDimensions;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttry {\n\t\t\tconst nativeDimensions = {\n\t\t\t\twidth: Tools.getProperty(\n\t\t\t\t\tsvgSelector.node(),\n\t\t\t\t\t'width',\n\t\t\t\t\t'baseVal',\n\t\t\t\t\t'value'\n\t\t\t\t),\n\t\t\t\theight: Tools.getProperty(\n\t\t\t\t\tsvgSelector.node(),\n\t\t\t\t\t'height',\n\t\t\t\t\t'baseVal',\n\t\t\t\t\t'value'\n\t\t\t\t),\n\t\t\t};\n\n\t\t\tvalidateAndSetDimensions(nativeDimensions);\n\t\t} catch (e) {\n\t\t\tvalidateAndSetDimensions(clientDimensions);\n\t\t\tvalidateAndSetDimensions(bboxDimensions);\n\t\t\tvalidateAndSetDimensions(attrDimensions);\n\t\t}\n\n\t\treturn finalDimensions;\n\t}\n\n\tstatic appendOrSelect(parent, query) {\n\t\tconst selection = parent.select(`${query}`);\n\n\t\tif (selection.empty()) {\n\t\t\t// see if there is an id\n\t\t\tlet querySections = query.split('#');\n\t\t\tlet elementToAppend;\n\t\t\tlet id;\n\t\t\t// if there is an id\n\t\t\tif (querySections.length === 2) {\n\t\t\t\t// take out the element to append\n\t\t\t\telementToAppend = querySections[0];\n\t\t\t\t// split it by classes\n\t\t\t\tquerySections = querySections[1].split('.');\n\t\t\t\t// the first string is the id\n\t\t\t\tid = querySections[0];\n\t\t\t} else {\n\t\t\t\tquerySections = query.split('.');\n\t\t\t\telementToAppend = querySections[0];\n\t\t\t}\n\n\t\t\treturn parent\n\t\t\t\t.append(elementToAppend)\n\t\t\t\t.attr('id', id)\n\t\t\t\t.attr('class', querySections.slice(1).join(' '));\n\t\t}\n\n\t\treturn selection;\n\t}\n\n\tprotected mainContainer: HTMLElement;\n\tprotected width: string;\n\tprotected height: string;\n\n\tinit() {\n\t\t// Add width & height to the chart holder if necessary, and add a classname\n\t\tthis.styleHolderElement();\n\n\t\tthis.addMainContainer();\n\t\tthis.verifyCSSStylesBeingApplied();\n\n\t\tif (this.model.getOptions().resizable) {\n\t\t\tthis.addResizeListener();\n\t\t}\n\n\t\tthis.addHolderListeners();\n\n\t\tthis.handleFullscreenChange();\n\t}\n\n\tgetChartID() {\n\t\treturn this.chartID;\n\t}\n\n\tgenerateElementIDString(originalID) {\n\t\treturn `chart-${this.chartID}-${originalID}`;\n\t}\n\n\taddMainContainer() {\n\t\tconst options = this.model.getOptions();\n\t\tconst chartsprefix = Tools.getProperty(options, 'style', 'prefix');\n\n\t\tconst mainContainer = select(this.getHolder())\n\t\t\t.append('div')\n\t\t\t.classed(`${carbonPrefix}--${chartsprefix}--chart-wrapper`, true)\n\t\t\t.style('height', '100%')\n\t\t\t.style('width', '100%');\n\n\t\tmainContainer.append('g').attr('class', CSS_VERIFIER_ELEMENT_CLASSNAME);\n\n\t\tthis.mainContainer = mainContainer.node();\n\t}\n\n\tupdate() {\n\t\tthis.styleHolderElement();\n\t}\n\n\tstyleHolderElement() {\n\t\tconst holderElement = this.getHolder() as HTMLElement;\n\n\t\t// Add class to chart holder\n\t\tselect(this.getHolder()).classed(`${carbonPrefix}--chart-holder`, true);\n\n\t\t// In order for resize events to not clash with these updates\n\t\t// We'll check if the width & height values passed in options\n\t\t// Have changed, before setting them to the holder\n\t\tconst { width, height } = this.model.getOptions();\n\t\tif (width !== this.width) {\n\t\t\t// Apply formatted width attribute to chart\n\t\t\tholderElement.style.width = width;\n\n\t\t\tthis.width = width;\n\t\t}\n\n\t\tif (height !== this.height) {\n\t\t\t// Apply formatted width attribute to chart\n\t\t\tholderElement.style.height = height;\n\n\t\t\tthis.height = height;\n\t\t}\n\t}\n\n\tgetHolder() {\n\t\treturn this.model.get('holder');\n\t}\n\n\texportToJPG() {\n\t\tconst self = this;\n\n\t\tconst holder = this.getHolder();\n\t\tconst holderSelection = select(holder);\n\t\tholderSelection.classed('filled', true);\n\n\t\tdomToImage\n\t\t\t.toJpeg(this.getMainContainer(), {\n\t\t\t\tbgcolor:\n\t\t\t\t\ttypeof window !== 'undefined'\n\t\t\t\t\t\t? window\n\t\t\t\t\t\t\t\t.getComputedStyle(holder)\n\t\t\t\t\t\t\t\t.getPropertyValue('background-color')\n\t\t\t\t\t\t: undefined,\n\t\t\t\tquality: 1,\n\t\t\t\t// Remove the toolbar\n\t\t\t\tfilter: (node) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tnode.classList &&\n\t\t\t\t\t\tnode.classList.contains('cds--cc--toolbar')\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn false;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn true;\n\t\t\t\t},\n\t\t\t})\n\t\t\t.then(function (dataUrl) {\n\t\t\t\tself.services.files.downloadImage(dataUrl, 'myChart.jpg');\n\t\t\t\tholderSelection.classed('filled', false);\n\t\t\t});\n\t}\n\n\texportToPNG() {\n\t\tconst self = this;\n\n\t\tconst holder = this.getHolder();\n\t\tconst holderSelection = select(holder);\n\t\tholderSelection.classed('filled', true);\n\n\t\tdomToImage\n\t\t\t.toPng(this.getMainContainer(), {\n\t\t\t\tbgcolor:\n\t\t\t\t\ttypeof window !== 'undefined'\n\t\t\t\t\t\t? window\n\t\t\t\t\t\t\t\t.getComputedStyle(holder)\n\t\t\t\t\t\t\t\t.getPropertyValue('background-color')\n\t\t\t\t\t\t: undefined,\n\t\t\t\tquality: 1,\n\t\t\t\t// Remove the toolbar\n\t\t\t\tfilter: (node) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tnode.classList &&\n\t\t\t\t\t\tnode.classList.contains('cds--cc--toolbar')\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn false;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn true;\n\t\t\t\t},\n\t\t\t})\n\t\t\t.then(function (dataUrl) {\n\t\t\t\tself.services.files.downloadImage(dataUrl, 'myChart.png');\n\t\t\t\tholderSelection.classed('filled', false);\n\t\t\t})\n\t\t\t.catch(function (error) {\n\t\t\t\tconsole.error('oops, something went wrong!', error);\n\t\t\t});\n\t}\n\n\ttoggleFullscreen() {\n\t\tconst holder = this.getHolder();\n\t\tconst holderSelection = select(holder);\n\n\t\tconst isFullScreen = holderSelection.classed('fullscreen');\n\n\t\tif (\n\t\t\tisFullScreen &&\n\t\t\t(document.fullscreenElement ||\n\t\t\t\tdocument['webkitFullscreenElement'] ||\n\t\t\t\tdocument['mozFullScreenElement'] ||\n\t\t\t\tdocument['msFullscreenElement'])\n\t\t) {\n\t\t\t// Call the correct function depending on the browser\n\t\t\tif (document.exitFullscreen) {\n\t\t\t\tdocument.exitFullscreen();\n\t\t\t} else if (document['webkitExitFullscreen']) {\n\t\t\t\tdocument['webkitExitFullscreen']();\n\t\t\t} else if (document['mozCancelFullScreen']) {\n\t\t\t\tdocument['mozCancelFullScreen']();\n\t\t\t} else if (document['msExitFullscreen']) {\n\t\t\t\tdocument['msExitFullscreen']();\n\t\t\t}\n\t\t} else {\n\t\t\t// Call the correct function depending on the browser\n\t\t\tif (holder.requestFullscreen) {\n\t\t\t\tholder.requestFullscreen();\n\t\t\t} else if (holder.webkitRequestFullscreen) {\n\t\t\t\tholder.webkitRequestFullscreen();\n\t\t\t} else if (holder.mozRequestFullScreen) {\n\t\t\t\tholder.mozRequestFullScreen();\n\t\t\t} else if (holder.msRequestFullscreen) {\n\t\t\t\tholder.msRequestFullscreen();\n\t\t\t}\n\t\t}\n\t}\n\n\thandleFullscreenChange() {\n\t\tdocument.addEventListener('fullscreenchange', () => {\n\t\t\tconst holderSelection = select(this.getHolder());\n\t\t\tconst isFullScreen = holderSelection.classed('fullscreen');\n\n\t\t\t// Toggle the `fullscreen` classname\n\t\t\tholderSelection.classed('fullscreen', !isFullScreen);\n\t\t});\n\t}\n\n\tverifyCSSStylesBeingApplied() {\n\t\t// setTimeout is needed here since in `addSVGElement()` we're appending the\n\t\t// CSS verifier element, and need to allow some time for it to become available\n\t\t// in the DOM\n\t\tsetTimeout(() => {\n\t\t\tconst cssVerifierElement = select(this.mainContainer)\n\t\t\t\t.select(`g.${CSS_VERIFIER_ELEMENT_CLASSNAME}`)\n\t\t\t\t.node();\n\t\t\tconst computedStyles = getComputedStyle(cssVerifierElement as any);\n\t\t\tif (\n\t\t\t\tcomputedStyles.getPropertyValue('overflow') !== 'hidden' ||\n\t\t\t\tcomputedStyles.getPropertyValue('opacity') !== '0'\n\t\t\t) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t'Missing CSS styles for Carbon Charts. Please read the Carbon Charts getting started guide.'\n\t\t\t\t);\n\t\t\t}\n\t\t});\n\t}\n\n\tsetSVGMaxHeight() {\n\t\t// if there is a set height on the holder, leave the chart svg height at 100%\n\t\tif (!this.model.getOptions().height) {\n\t\t\tconst { height: chartHeight } = DOMUtils.getSVGElementSize(\n\t\t\t\tselect(this.mainContainer),\n\t\t\t\t{ useBBox: true }\n\t\t\t);\n\t\t\tconst chartSVGSelector = select(this.mainContainer).attr('class');\n\t\t\tconst children = select(this.mainContainer).selectAll(\n\t\t\t\t`.${chartSVGSelector} > svg`\n\t\t\t);\n\n\t\t\t// get the height of the children SVGs (spacers, titles, etc)\n\t\t\tlet childrenHeight = 0;\n\t\t\tchildren.nodes().forEach(function (childSVG) {\n\t\t\t\tchildrenHeight += Number(\n\t\t\t\t\tDOMUtils.getSVGElementSize(select(childSVG), {\n\t\t\t\t\t\tuseBBox: true,\n\t\t\t\t\t}).height\n\t\t\t\t);\n\t\t\t});\n\n\t\t\t// set the chart svg height to the children height\n\t\t\t// forcing the chart not to take up any more space than it requires\n\t\t\tchildrenHeight <= chartHeight\n\t\t\t\t? select(this.mainContainer).attr('height', childrenHeight)\n\t\t\t\t: select(this.mainContainer).attr('height', '100%');\n\t\t}\n\t}\n\n\tgetMainContainer() {\n\t\treturn this.mainContainer;\n\t}\n\n\taddHolderListeners() {\n\t\tconst holder = this.getHolder();\n\n\t\tif (!holder) {\n\t\t\treturn;\n\t\t}\n\n\t\tselect(holder)\n\t\t\t.on('mouseover', () => {\n\t\t\t\t// Dispatch event\n\t\t\t\tthis.services.events.dispatchEvent(Events.Chart.MOUSEOVER);\n\t\t\t})\n\t\t\t.on('mouseout', () => {\n\t\t\t\t// Dispatch event\n\t\t\t\tthis.services.events.dispatchEvent(Events.Chart.MOUSEOUT);\n\t\t\t});\n\t}\n\n\taddResizeListener() {\n\t\tconst holder = this.getHolder();\n\n\t\tif (!holder) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Grab current dimensions of the chart holder\n\t\tlet containerWidth = holder.clientWidth;\n\t\tlet containerHeight = holder.clientHeight;\n\n\t\t// The resize callback function\n\t\tconst resizeCallback = Tools.debounce((entries, observer) => {\n\t\t\tif (!holder) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\tMath.abs(containerWidth - holder.clientWidth) > 1 ||\n\t\t\t\tMath.abs(containerHeight - holder.clientHeight) > 1\n\t\t\t) {\n\t\t\t\tcontainerWidth = holder.clientWidth;\n\t\t\t\tcontainerHeight = holder.clientHeight;\n\n\t\t\t\tthis.services.events.dispatchEvent(Events.Chart.RESIZE);\n\t\t\t}\n\t\t}, 12.5);\n\n\t\t// Observe the behaviour of resizing on the holder\n\t\tconst resizeObserver = new ResizeObserver(resizeCallback);\n\t\tresizeObserver.observe(holder);\n\t}\n}\n"]}

package/styles/_chart-holder.scss

@@ -1,3 +1,6 @@
+@use "@carbon/styles/scss/theme" as *;
+@use "@carbon/styles/scss/themes";
+
 .#{$prefix}--chart-holder {
 	position: relative;
 	display: block;
@@ -6,10 +9,10 @@
 
 	&.filled,
 	&.fullscreen {
-		background-color: $ui-background;
+		background-color: $background;
 
 		.#{$prefix}--#{$charts-prefix}--chart-wrapper {
-			background-color: $ui-background;
+			background-color: $background;
 		}
 	}
 
@@ -19,6 +22,22 @@
 	}
 }
 
+.#{$prefix}--chart-holder {
+	@include theme(themes.$white);
+}
+
+.#{$prefix}--chart-holder[data-carbon-theme='g10'] {
+	@include theme(themes.$g10);
+}
+
+.#{$prefix}--chart-holder[data-carbon-theme='g90'] {
+	@include theme(themes.$g90);
+}
+
+.#{$prefix}--chart-holder[data-carbon-theme='g100'] {
+	@include theme(themes.$g100);
+}
+
 .#{$prefix}--chart-holder.fullscreen,
 .#{$prefix}--chart-holder:-webkit-full-screen {
 	/* !important is used here to get closer to

package/styles/_type.scss

@@ -1,43 +1,44 @@
-@import './vendor/@carbon/type/scss/type';
-@import './vendor/@carbon/type/scss/font-face/sans';
-@import './vendor/@carbon/type/scss/font-face/sans-condensed';
-
-@import './chart-feature-flags';
-
-@if map-get($chart-feature-flags, 'enable-font-imports') == true {
-	@include carbon--font-face-sans();
-	@include carbon--font-face-sans-condensed();
-}
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/layout' as *;
 
 .#{$prefix}--#{$charts-prefix}--chart-wrapper {
-	font-family: carbon--font-family('sans-condensed');
+	font-family: font-family('sans-condensed');
 
 	p {
 		padding: 0;
 		margin: 0;
 		font-size: 12px;
-		font-weight: carbon--font-weight('regular');
-		color: $text-02;
+		// TODO-V11
+		// font-weight: font-weight('regular');
+		font-weight: 400;
+		color: $text-secondary;
 	}
 
 	text {
 		font-size: 12px;
-		font-weight: carbon--font-weight('regular');
-		fill: $text-02;
+		// TODO-V11
+		// font-weight: font-weight('regular');
+		font-weight: 400;
+		fill: $text-secondary;
 	}
 
 	g.gauge-numbers text.gauge-value-number {
-		font-family: carbon--font-family('sans');
-		font-weight: carbon--font-weight('light');
+		font-family: font-family('sans');
+		// TODO-V11
+		// font-weight: font-weight('light');
+		font-weight: 300;
 	}
 
 	text.meter-title,
 	text.percent-value {
-		font-size: $carbon--base-font-size;
-		font-family: carbon--font-family('sans');
+		font-size: $base-font-size;
+		font-family: font-family('sans');
 	}
 
 	text.meter-title {
-		font-weight: carbon--font-weight('semibold');
+		// TODO-V11
+		// font-weight: font-weight('semibold');
+		font-weight: 600;
 	}
 }