@carbon/charts 0.50.9 → 0.50.10

package/demo/tsconfig.tsbuildinfo

@@ -126,7 +126,7 @@
         "signature": "68cae4858c0af344da1a1f10100e7fb06e6255cae5874bc2fe35699f8d7e65a9"
       },
       "../../demo/utils.ts": {
-        "version": "99f295800a68fdcf647d0c881089f87d0b037fac99e78b7e499441cc656a3e02",
+        "version": "e27f9077a015660cec5b656e787480359f4a879acdb8ea907c6ec50e38b2e706",
         "signature": "4fe7f477469cf1883226ae5bcbdbbb8d0b5508efdbf4ea909e2f7dc4393483b2"
       },
       "../../demo/data/CHART_TYPES.ts": {
@@ -174,8 +174,8 @@
         "signature": "e3c0096afbbbe8f52f7c04bc1247c816f0dac99224230da02922713863487848"
       },
       "../../demo/data/circle-pack.ts": {
-        "version": "a24011462b444886427626676785f6a09fd384fcbac8bbd5b360b5f7a544204e",
-        "signature": "b2bdfa0a230eabe364e7b78a21de3872166852dc8d8ae7755ccec3ef522a35c3"
+        "version": "ae1f5bda2ca84210da5e8107dde39268017f7448bdb3c6fe9ef30956e3e1e5ae",
+        "signature": "7b00ae7dcd05fee92b97b681b3aa5162ef15d785623d3dce0d73c7217eb931cc"
       },
       "../../demo/data/combo.ts": {
         "version": "b8d59a88e89f82c77a516f5f3db692065f2ca6cc6fc925a3beb08cedb4c00a3f",

package/demo/utils.js

@@ -8,7 +8,7 @@ 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<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=\"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>";
     container.querySelector('#charting-controls').appendChild(div);
 };
 var generateColorPalettePickerHTML = function (container, chart, configs) {
@@ -25,7 +25,7 @@ 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=\"select-id\" class=\"bx--label\">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=\"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)
         .map(function (colorGroup) {
         var optionsCount = colorPairingOptions[colorGroup];
         var optionsHTML = "<optgroup class=\"bx--select-optgroup\" label=\"" + colorGroup + " groups\">";

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<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=\"select-id\" class=\"bx--label\">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=\"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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/charts",
-  "version": "0.50.9",
+  "version": "0.50.10",
   "description": "Carbon charting components",
   "main": "./bundle.js",
   "module": "./index.js",

package/services/essentials/dom-utils.d.ts

@@ -7,6 +7,7 @@ interface getSVGElementSizeOptions {
     useBoundingRect?: boolean;
 }
 export declare class DOMUtils extends Service {
+    private chartID;
     constructor(model: any, services: any);
     static getHTMLElementSize(element: HTMLElement): {
         width: number;
@@ -18,6 +19,8 @@ export declare class DOMUtils extends Service {
     protected width: string;
     protected height: string;
     init(): void;
+    getChartID(): string;
+    generateElementIDString(originalID: any): string;
     addMainContainer(): void;
     update(): void;
     styleHolderElement(): void;

package/services/essentials/dom-utils.js

@@ -26,7 +26,9 @@ var CSS_VERIFIER_ELEMENT_CLASSNAME = 'DONT_STYLE_ME_css_styles_verifier';
 var DOMUtils = /** @class */ (function (_super) {
     __extends(DOMUtils, _super);
     function DOMUtils(model, services) {
-        return _super.call(this, model, services) || this;
+        var _this = _super.call(this, model, services) || this;
+        _this.chartID = Math.floor((1 + Math.random()) * 0x1000000000000).toString(16);
+        return _this;
     }
     DOMUtils.getHTMLElementSize = function (element) {
         return {
@@ -170,6 +172,12 @@ var DOMUtils = /** @class */ (function (_super) {
         this.addHolderListeners();
         this.handleFullscreenChange();
     };
+    DOMUtils.prototype.getChartID = function () {
+        return this.chartID;
+    };
+    DOMUtils.prototype.generateElementIDString = function (originalID) {
+        return "chart-" + this.chartID + "-" + originalID;
+    };
     DOMUtils.prototype.addMainContainer = function () {
         var options = this.model.getOptions();
         var chartsprefix = Tools.getProperty(options, 'style', 'prefix');

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\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\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 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"]}

package/styles/components/_skeleton-lines.scss

@@ -17,7 +17,6 @@ $areas-shimmer-color: rgba($carbon--white-0, 0.15);
 
 	.shimmer-effect-lines {
 		stroke-width: 1px;
-		stroke: url(#shimmer-lines);
 	}
 
 	.shimmer-effect-sparkline {
@@ -29,7 +28,7 @@ $areas-shimmer-color: rgba($carbon--white-0, 0.15);
 		stroke: $lines-bg-color;
 	}
 
-	#shimmer-lines {
+	.shimmer-lines {
 		.stop-bg-shimmer {
 			stop-color: $lines-bg-color;
 		}

package/styles/components/_skeleton.scss

@@ -17,7 +17,6 @@ $areas-shimmer-color: rgba($carbon--white-0, 0.15);
 
 	.shimmer-effect-lines {
 		stroke-width: 1px;
-		stroke: url(#shimmer-lines);
 	}
 
 	.shimmer-effect-sparkline {
@@ -29,7 +28,7 @@ $areas-shimmer-color: rgba($carbon--white-0, 0.15);
 		stroke: $lines-bg-color;
 	}
 
-	#shimmer-lines {
+	.shimmer-lines {
 		.stop-bg-shimmer {
 			stop-color: $lines-bg-color;
 		}
@@ -39,16 +38,12 @@ $areas-shimmer-color: rgba($carbon--white-0, 0.15);
 		}
 	}
 
-	// areas
-	.shimmer-effect-areas {
-		fill: url(#shimmer-areas);
-	}
 
 	.empty-state-areas {
 		fill: $areas-bg-color;
 	}
 
-	#shimmer-areas {
+	.shimmer-areas {
 		.stop-bg-shimmer {
 			stop-color: $areas-bg-color;
 		}

package/styles/components/_toolbar.scss

@@ -13,7 +13,7 @@ $css--reset: false;
 			&.disabled {
 				&,
 				button {
-					cursor: default;
+					cursor: not-allowed;
 				}
 
 				&:hover,

package/styles/components/_tooltip.scss

@@ -6,18 +6,20 @@
 .#{$prefix}--#{$charts-prefix}--tooltip {
 	background-color: $ui-02;
 	pointer-events: none;
-	transition: opacity 0.1s;
 	@include carbon--motion(standard, expressive);
 	display: inline;
+	visibility: visible;
 	box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
 	position: absolute;
 	word-wrap: break-word;
 	z-index: 1059;
 	font-family: carbon--font-family('sans-condensed');
+	transition: visibility 0s linear 0.1s, opacity 0.1s;
 
 	&.hidden {
 		opacity: 0;
-		transition: opacity 0.1s;
+		visibility: hidden;
+		transition: visibility 0s linear 0s, opacity 0.1s;
 		@include carbon--motion(standard, expressive);
 	}
 

package/styles/components/_zoom-bar.scss

@@ -2,18 +2,10 @@
 	rect.zoom-bg {
 		fill: $ui-background;
 		stroke: $ui-01;
-
-		&-skeleton {
-			stroke: url(#shimmer-lines);
-		}
 	}
 
 	rect.zoom-slider-bg {
 		fill: $ui-01;
-
-		&-skeleton {
-			stroke: url(#shimmer-lines);
-		}
 	}
 
 	rect.zoom-slider-selected-area {
@@ -23,10 +15,6 @@
 	path.zoom-bg-baseline {
 		stroke: $ui-04;
 		stroke-width: 2;
-
-		&-skeleton {
-			stroke: url(#shimmer-lines);
-		}
 	}
 
 	path.zoom-graph-area {

package/styles-g10.css

@@ -1392,7 +1392,6 @@
 }
 .bx--cc--skeleton .shimmer-effect-lines {
   stroke-width: 1px;
-  stroke: url(#shimmer-lines);
 }
 .bx--cc--skeleton .shimmer-effect-sparkline {
   stroke-width: 0px;
@@ -1401,22 +1400,19 @@
   stroke-width: 1px;
   stroke: #e0e0e0;
 }
-.bx--cc--skeleton #shimmer-lines .stop-bg-shimmer {
+.bx--cc--skeleton .shimmer-lines .stop-bg-shimmer {
   stop-color: #e0e0e0;
 }
-.bx--cc--skeleton #shimmer-lines .stop-shimmer {
+.bx--cc--skeleton .shimmer-lines .stop-shimmer {
   stop-color: #ffffff;
 }
-.bx--cc--skeleton .shimmer-effect-areas {
-  fill: url(#shimmer-areas);
-}
 .bx--cc--skeleton .empty-state-areas {
   fill: rgba(127, 127, 127, 0.1);
 }
-.bx--cc--skeleton #shimmer-areas .stop-bg-shimmer {
+.bx--cc--skeleton .shimmer-areas .stop-bg-shimmer {
   stop-color: rgba(127, 127, 127, 0.1);
 }
-.bx--cc--skeleton #shimmer-areas .stop-shimmer {
+.bx--cc--skeleton .shimmer-areas .stop-shimmer {
   stop-color: rgba(255, 255, 255, 0.15);
 }
 
@@ -1425,7 +1421,6 @@
 }
 .bx--cc--skeleton-lines .shimmer-effect-lines {
   stroke-width: 1px;
-  stroke: url(#shimmer-lines);
 }
 .bx--cc--skeleton-lines .shimmer-effect-sparkline {
   stroke-width: 0px;
@@ -1434,10 +1429,10 @@
   stroke-width: 1px;
   stroke: #e0e0e0;
 }
-.bx--cc--skeleton-lines #shimmer-lines .stop-bg-shimmer {
+.bx--cc--skeleton-lines .shimmer-lines .stop-bg-shimmer {
   stop-color: #e0e0e0;
 }
-.bx--cc--skeleton-lines #shimmer-lines .stop-shimmer {
+.bx--cc--skeleton-lines .shimmer-lines .stop-shimmer {
   stop-color: #ffffff;
 }
 
@@ -1630,7 +1625,7 @@ div.bx--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbox
 }
 .bx--chart-holder .bx--cc--toolbar div.toolbar-control.disabled,
 .bx--chart-holder .bx--cc--toolbar div.toolbar-control.disabled button {
-  cursor: default;
+  cursor: not-allowed;
 }
 .bx--chart-holder .bx--cc--toolbar div.toolbar-control.disabled:hover,
 .bx--chart-holder .bx--cc--toolbar div.toolbar-control.disabled button:hover {
@@ -1664,18 +1659,20 @@ div.bx--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbox
 .bx--cc--tooltip {
   background-color: #f4f4f4;
   pointer-events: none;
-  transition: opacity 0.1s;
   transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
   display: inline;
+  visibility: visible;
   box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
   position: absolute;
   word-wrap: break-word;
   z-index: 1059;
   font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;
+  transition: visibility 0s linear 0.1s, opacity 0.1s;
 }
 .bx--cc--tooltip.hidden {
   opacity: 0;
-  transition: opacity 0.1s;
+  visibility: hidden;
+  transition: visibility 0s linear 0s, opacity 0.1s;
   transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
 }
 .bx--cc--tooltip .content-box {
@@ -1809,15 +1806,9 @@ div.bx--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbox
   fill: #f4f4f4;
   stroke: #ffffff;
 }
-.bx--cc--zoom-bar rect.zoom-bg-skeleton {
-  stroke: url(#shimmer-lines);
-}
 .bx--cc--zoom-bar rect.zoom-slider-bg {
   fill: #ffffff;
 }
-.bx--cc--zoom-bar rect.zoom-slider-bg-skeleton {
-  stroke: url(#shimmer-lines);
-}
 .bx--cc--zoom-bar rect.zoom-slider-selected-area {
   fill: #525252;
 }
@@ -1825,9 +1816,6 @@ div.bx--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbox
   stroke: #8d8d8d;
   stroke-width: 2;
 }
-.bx--cc--zoom-bar path.zoom-bg-baseline-skeleton {
-  stroke: url(#shimmer-lines);
-}
 .bx--cc--zoom-bar path.zoom-graph-area {
   fill: #e0e0e0;
   stroke: #8d8d8d;