@carbon/charts 0.59.0-beta.0 → 1.0.3

package/dist/demo/utils.js.map

@@ -1 +0,0 @@
-{"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(\n\t\t\t'checked',\n\t\t\t'true'\n\t\t);\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/dist/model/treemap.js

@@ -1,44 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-// Internal Imports
-import { ChartModel } from './model';
-import { Tools } from '../tools';
-/**
- * The treemap chart model layer
- */
-var TreemapChartModel = /** @class */ (function (_super) {
-    __extends(TreemapChartModel, _super);
-    function TreemapChartModel(services) {
-        return _super.call(this, services) || this;
-    }
-    TreemapChartModel.prototype.getTabularDataArray = function () {
-        var displayData = this.getDisplayData();
-        var result = [['Child', 'Group', 'Value']];
-        displayData.forEach(function (datum) {
-            if (Array.isArray(datum.children)) {
-                datum.children.forEach(function (child) {
-                    result.push([child.name, datum.name, child.value]);
-                });
-            }
-            else if (Tools.getProperty(datum.name) !== null &&
-                Tools.getProperty(datum.value)) {
-                result.push(["–", datum.name, datum.value]);
-            }
-        });
-        return result;
-    };
-    return TreemapChartModel;
-}(ChartModel));
-export { TreemapChartModel };
-//# sourceMappingURL=../../src/model/treemap.js.map

package/dist/model/treemap.js.map

@@ -1 +0,0 @@
-{"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"]}

package/dist/package.json

@@ -1,147 +0,0 @@
-{
-  "name": "@carbon/charts",
-  "version": "0.58.1",
-  "description": "Carbon charting components",
-  "main": "./bundle.js",
-  "module": "./index.js",
-  "scripts": {
-    "demo:build": "build-storybook -o demo/bundle -s ./.storybook/assets --quiet && yarn run docs:build",
-    "demo:server": "yarn run storybook",
-    "docs:build": "typedoc --tsconfig ./src/tsconfig.json --ignoreCompilerErrors --out ./demo/bundle/documentation ./src/index.ts",
-    "build": "bash build.sh",
-    "lint": "tslint -p tsconfig.json -c tslint.json",
-    "test": "karma start --single-run",
-    "test:watch": "karma start --no-single-run",
-    "clean": "rm -rf dist demo/bundle",
-    "format": "prettier . --write \"**/*.{scss,css,js,ts,md}\"",
-    "start": "yarn run storybook",
-    "storybook": "start-storybook -p 9006 -c .storybook -s ./.storybook/assets",
-    "postinstall": "carbon-telemetry collect --install"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:carbon-design-system/carbon-charts.git",
-    "homepage": "https://carbon-design-system.github.io/carbon-charts/"
-  },
-  "keywords": [
-    "carbon",
-    "charts",
-    "dataviz",
-    "data-visualization",
-    "visualizations",
-    "d3",
-    "svg",
-    "component",
-    "components",
-    "css",
-    "html",
-    "ibm",
-    "typescript",
-    "javascript",
-    "js",
-    "library",
-    "pattern",
-    "patterns",
-    "sass",
-    "scss"
-  ],
-  "author": "IBM",
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@carbon/colors": "10.29.0",
-    "@carbon/telemetry": "0.1.0",
-    "@carbon/utils-position": "1.1.1",
-    "carbon-components": "10.56.0",
-    "d3-cloud": "1.2.5",
-    "d3-sankey": "0.12.3",
-    "date-fns": "2.8.1",
-    "dom-to-image": "2.6.0",
-    "lodash-es": "4.17.21",
-    "resize-observer-polyfill": "1.5.0"
-  },
-  "peerDependencies": {
-    "d3": "7.x"
-  },
-  "devDependencies": {
-    "@carbon/elements": "11.0.1",
-    "@carbon/grid": "11.0.0",
-    "@carbon/import-once": "10.7.0",
-    "@carbon/layout": "11.0.0",
-    "@carbon/motion": "11.0.0",
-    "@carbon/styles": "1.0.0",
-    "@carbon/themes": "11.0.0",
-    "@carbon/type": "11.0.0",
-    "@rollup/plugin-json": "4.0.2",
-    "@rollup/plugin-replace": "3.0.0",
-    "@storybook/addon-knobs": "5.3.12",
-    "@storybook/addon-options": "5.3.12",
-    "@storybook/html": "5.3.12",
-    "@storybook/preset-typescript": "1.1.0",
-    "@types/d3": "7.0.0",
-    "@types/jasmine": "2.8.7",
-    "@types/karma": "3.0.2",
-    "@types/node": "12.11.7",
-    "babel-core": "6.26.0",
-    "babel-loader": "7.1.2",
-    "babel-polyfill": "6.26.0",
-    "codesandbox": "2.1.11",
-    "concurrently": "5.1.0",
-    "copy-webpack-plugin": "4.5.2",
-    "css-loader": "0.28.7",
-    "d3": "7.0.0",
-    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "1.1.5",
-    "fork-ts-checker-webpack-plugin": "^4.0.5",
-    "highlight.js": "10.5.0",
-    "html-loader": "0.5.1",
-    "html-webpack-exclude-assets-plugin": "0.0.7",
-    "html-webpack-plugin": "3.2.0",
-    "jasmine-core": "3.4.0",
-    "karma": "4.0.1",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-firefox-launcher": "1.1.0",
-    "karma-jasmine": "2.0.1",
-    "karma-safari-launcher": "1.0.0",
-    "karma-webpack": "4.0.2",
-    "lerna": "3.13.4",
-    "marked": "0.8.2",
-    "mini-css-extract-plugin": "0.9.0",
-    "raw-loader": "0.5.1",
-    "react-docgen-typescript-loader": "^3.6.0",
-    "rollup": "1.27.10",
-    "rollup-plugin-commonjs": "10.1.0",
-    "rollup-plugin-node-resolve": "5.2.0",
-    "rollup-plugin-terser": "5.1.2",
-    "rollup-plugin-typescript2": "0.26.0",
-    "sass": "1.49.9",
-    "sass-loader": "10.1.1",
-    "style-loader": "0.19.0",
-    "ts-loader": "^6.2.1",
-    "tslint": "5.20.1",
-    "tslint-loader": "3.5.3",
-    "typedoc": "0.11.1",
-    "typescript": "3.7.5",
-    "url-loader": "0.6.2",
-    "webpack": "4.41.0",
-    "webpack-cli": "3.3.11",
-    "webpack-dev-server": "3.7.0"
-  },
-  "publishConfig": {
-    "directory": "dist",
-    "access": "public"
-  },
-  "maintainers": [
-    {
-      "name": "Eliad Moosavi",
-      "email": "iliadm@ca.ibm.com",
-      "url": "https://github.com/theiliad"
-    }
-  ],
-  "contributors": [
-    {
-      "name": "Eliad Moosavi",
-      "email": "iliadm@ca.ibm.com",
-      "url": "https://github.com/theiliad"
-    }
-  ]
-}

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

@@ -1,405 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-// Internal Imports
-import { Service } from '../service';
-import { Events } from './../../interfaces';
-// D3 Imports
-import { select } from 'd3-selection';
-import { Tools } from '../../tools';
-// import the settings for the css prefix
-import { carbonPrefix } from "../../configuration-non-customizable";
-// MISC
-import ResizeObserver from 'resize-observer-polyfill';
-import domToImage from 'dom-to-image';
-var CSS_VERIFIER_ELEMENT_CLASSNAME = 'DONT_STYLE_ME_css_styles_verifier';
-var DOMUtils = /** @class */ (function (_super) {
-    __extends(DOMUtils, _super);
-    function DOMUtils(model, services) {
-        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 {
-            width: element.clientWidth,
-            height: element.clientHeight,
-        };
-    };
-    DOMUtils.getSVGElementSize = function (svgSelector, options) {
-        if (options === void 0) { options = {
-            useAttrs: false,
-            useClientDimensions: false,
-            useBBox: false,
-            useBoundingRect: false,
-        }; }
-        if (!svgSelector.attr) {
-            svgSelector = select(svgSelector);
-        }
-        var finalDimensions = {
-            width: 0,
-            height: 0,
-        };
-        var validateAndSetDimensions = function (dimensions) {
-            if (dimensions) {
-                Object.keys(finalDimensions).forEach(function (dimensionKey) {
-                    if (dimensions[dimensionKey]) {
-                        var dimension = dimensions[dimensionKey];
-                        var dimensionNumber = parseFloat(dimension);
-                        if (dimension &&
-                            dimensionNumber > finalDimensions[dimensionKey] &&
-                            ('' + dimension).indexOf('%') === -1) {
-                            finalDimensions[dimensionKey] = dimensionNumber;
-                        }
-                    }
-                });
-            }
-        };
-        var attrDimensions = {
-            width: svgSelector.attr('width'),
-            height: svgSelector.attr('height'),
-        };
-        var bbox, bboxDimensions, boundingRect, boundingRectDimensions;
-        // In many versions of Firefox
-        // getBBox will cause an "NSFailure" error
-        try {
-            bbox = svgSelector.node().getBBox();
-            bboxDimensions = {
-                width: bbox.width,
-                height: bbox.height,
-            };
-        }
-        catch (e) { }
-        try {
-            boundingRect = svgSelector.node().getBoundingClientRect();
-            boundingRectDimensions = {
-                width: boundingRect.width,
-                height: boundingRect.height,
-            };
-        }
-        catch (e) { }
-        var clientDimensions = {
-            width: svgSelector.node().clientWidth,
-            height: svgSelector.node().clientHeight,
-        };
-        // If both attribute values are numbers
-        // And not percentages or NaN
-        if (options) {
-            if (options.useAttrs) {
-                validateAndSetDimensions(attrDimensions);
-                if (finalDimensions.width > 0 && finalDimensions.height > 0) {
-                    return finalDimensions;
-                }
-            }
-            if (options.useClientDimensions) {
-                validateAndSetDimensions(clientDimensions);
-                if (finalDimensions.width > 0 && finalDimensions.height > 0) {
-                    return clientDimensions;
-                }
-            }
-            if (options.useBBox) {
-                validateAndSetDimensions(bboxDimensions);
-                if (finalDimensions.width > 0 && finalDimensions.height > 0) {
-                    return bboxDimensions;
-                }
-            }
-            if (options.useBoundingRect) {
-                validateAndSetDimensions(boundingRectDimensions);
-                if (finalDimensions.width > 0 && finalDimensions.height > 0) {
-                    return boundingRectDimensions;
-                }
-            }
-        }
-        try {
-            var nativeDimensions = {
-                width: Tools.getProperty(svgSelector.node(), 'width', 'baseVal', 'value'),
-                height: Tools.getProperty(svgSelector.node(), 'height', 'baseVal', 'value'),
-            };
-            validateAndSetDimensions(nativeDimensions);
-        }
-        catch (e) {
-            validateAndSetDimensions(clientDimensions);
-            validateAndSetDimensions(bboxDimensions);
-            validateAndSetDimensions(attrDimensions);
-        }
-        return finalDimensions;
-    };
-    DOMUtils.appendOrSelect = function (parent, query) {
-        var selection = parent.select("" + query);
-        if (selection.empty()) {
-            // see if there is an id
-            var querySections = query.split('#');
-            var elementToAppend = void 0;
-            var id = void 0;
-            // if there is an id
-            if (querySections.length === 2) {
-                // take out the element to append
-                elementToAppend = querySections[0];
-                // split it by classes
-                querySections = querySections[1].split('.');
-                // the first string is the id
-                id = querySections[0];
-            }
-            else {
-                querySections = query.split('.');
-                elementToAppend = querySections[0];
-            }
-            return parent
-                .append(elementToAppend)
-                .attr('id', id)
-                .attr('class', querySections.slice(1).join(' '));
-        }
-        return selection;
-    };
-    DOMUtils.prototype.init = function () {
-        // Add width & height to the chart holder if necessary, and add a classname
-        this.styleHolderElement();
-        this.addMainContainer();
-        this.verifyCSSStylesBeingApplied();
-        if (this.model.getOptions().resizable) {
-            this.addResizeListener();
-        }
-        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');
-        var mainContainer = select(this.getHolder())
-            .append('div')
-            .classed(carbonPrefix + "--" + chartsprefix + "--chart-wrapper", true)
-            .style('height', '100%')
-            .style('width', '100%');
-        mainContainer.append('g').attr('class', CSS_VERIFIER_ELEMENT_CLASSNAME);
-        this.mainContainer = mainContainer.node();
-    };
-    DOMUtils.prototype.update = function () {
-        this.styleHolderElement();
-    };
-    DOMUtils.prototype.styleHolderElement = function () {
-        var holderElement = this.getHolder();
-        // Add class to chart holder
-        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
-        var _a = this.model.getOptions(), width = _a.width, height = _a.height;
-        if (width !== this.width) {
-            // Apply formatted width attribute to chart
-            holderElement.style.width = width;
-            this.width = width;
-        }
-        if (height !== this.height) {
-            // Apply formatted width attribute to chart
-            holderElement.style.height = height;
-            this.height = height;
-        }
-    };
-    DOMUtils.prototype.getHolder = function () {
-        return this.model.get('holder');
-    };
-    DOMUtils.prototype.exportToJPG = function () {
-        var self = this;
-        var holder = this.getHolder();
-        var holderSelection = select(holder);
-        holderSelection.classed('filled', true);
-        domToImage
-            .toJpeg(this.getMainContainer(), {
-            bgcolor: typeof window !== 'undefined'
-                ? window
-                    .getComputedStyle(holder)
-                    .getPropertyValue('background-color')
-                : undefined,
-            quality: 1,
-            // Remove the toolbar
-            filter: function (node) {
-                if (node.classList &&
-                    node.classList.contains('cds--cc--toolbar')) {
-                    return false;
-                }
-                return true;
-            },
-        })
-            .then(function (dataUrl) {
-            self.services.files.downloadImage(dataUrl, 'myChart.jpg');
-            holderSelection.classed('filled', false);
-        });
-    };
-    DOMUtils.prototype.exportToPNG = function () {
-        var self = this;
-        var holder = this.getHolder();
-        var holderSelection = select(holder);
-        holderSelection.classed('filled', true);
-        domToImage
-            .toPng(this.getMainContainer(), {
-            bgcolor: typeof window !== 'undefined'
-                ? window
-                    .getComputedStyle(holder)
-                    .getPropertyValue('background-color')
-                : undefined,
-            quality: 1,
-            // Remove the toolbar
-            filter: function (node) {
-                if (node.classList &&
-                    node.classList.contains('cds--cc--toolbar')) {
-                    return false;
-                }
-                return true;
-            },
-        })
-            .then(function (dataUrl) {
-            self.services.files.downloadImage(dataUrl, 'myChart.png');
-            holderSelection.classed('filled', false);
-        })
-            .catch(function (error) {
-            console.error('oops, something went wrong!', error);
-        });
-    };
-    DOMUtils.prototype.toggleFullscreen = function () {
-        var holder = this.getHolder();
-        var holderSelection = select(holder);
-        var isFullScreen = holderSelection.classed('fullscreen');
-        if (isFullScreen &&
-            (document.fullscreenElement ||
-                document['webkitFullscreenElement'] ||
-                document['mozFullScreenElement'] ||
-                document['msFullscreenElement'])) {
-            // Call the correct function depending on the browser
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            }
-            else if (document['webkitExitFullscreen']) {
-                document['webkitExitFullscreen']();
-            }
-            else if (document['mozCancelFullScreen']) {
-                document['mozCancelFullScreen']();
-            }
-            else if (document['msExitFullscreen']) {
-                document['msExitFullscreen']();
-            }
-        }
-        else {
-            // Call the correct function depending on the browser
-            if (holder.requestFullscreen) {
-                holder.requestFullscreen();
-            }
-            else if (holder.webkitRequestFullscreen) {
-                holder.webkitRequestFullscreen();
-            }
-            else if (holder.mozRequestFullScreen) {
-                holder.mozRequestFullScreen();
-            }
-            else if (holder.msRequestFullscreen) {
-                holder.msRequestFullscreen();
-            }
-        }
-    };
-    DOMUtils.prototype.handleFullscreenChange = function () {
-        var _this = this;
-        document.addEventListener('fullscreenchange', function () {
-            var holderSelection = select(_this.getHolder());
-            var isFullScreen = holderSelection.classed('fullscreen');
-            // Toggle the `fullscreen` classname
-            holderSelection.classed('fullscreen', !isFullScreen);
-        });
-    };
-    DOMUtils.prototype.verifyCSSStylesBeingApplied = function () {
-        var _this = this;
-        // setTimeout is needed here since in `addSVGElement()` we're appending the
-        // CSS verifier element, and need to allow some time for it to become available
-        // in the DOM
-        setTimeout(function () {
-            var cssVerifierElement = select(_this.mainContainer)
-                .select("g." + CSS_VERIFIER_ELEMENT_CLASSNAME)
-                .node();
-            var computedStyles = getComputedStyle(cssVerifierElement);
-            if (computedStyles.getPropertyValue('overflow') !== 'hidden' ||
-                computedStyles.getPropertyValue('opacity') !== '0') {
-                console.error('Missing CSS styles for Carbon Charts. Please read the Carbon Charts getting started guide.');
-            }
-        });
-    };
-    DOMUtils.prototype.setSVGMaxHeight = function () {
-        // if there is a set height on the holder, leave the chart svg height at 100%
-        if (!this.model.getOptions().height) {
-            var chartHeight = DOMUtils.getSVGElementSize(select(this.mainContainer), { useBBox: true }).height;
-            var chartSVGSelector = select(this.mainContainer).attr('class');
-            var children = select(this.mainContainer).selectAll("." + chartSVGSelector + " > svg");
-            // get the height of the children SVGs (spacers, titles, etc)
-            var childrenHeight_1 = 0;
-            children.nodes().forEach(function (childSVG) {
-                childrenHeight_1 += Number(DOMUtils.getSVGElementSize(select(childSVG), {
-                    useBBox: true,
-                }).height);
-            });
-            // set the chart svg height to the children height
-            // forcing the chart not to take up any more space than it requires
-            childrenHeight_1 <= chartHeight
-                ? select(this.mainContainer).attr('height', childrenHeight_1)
-                : select(this.mainContainer).attr('height', '100%');
-        }
-    };
-    DOMUtils.prototype.getMainContainer = function () {
-        return this.mainContainer;
-    };
-    DOMUtils.prototype.addHolderListeners = function () {
-        var _this = this;
-        var holder = this.getHolder();
-        if (!holder) {
-            return;
-        }
-        select(holder)
-            .on('mouseover', function () {
-            // Dispatch event
-            _this.services.events.dispatchEvent(Events.Chart.MOUSEOVER);
-        })
-            .on('mouseout', function () {
-            // Dispatch event
-            _this.services.events.dispatchEvent(Events.Chart.MOUSEOUT);
-        });
-    };
-    DOMUtils.prototype.addResizeListener = function () {
-        var _this = this;
-        var holder = this.getHolder();
-        if (!holder) {
-            return;
-        }
-        // Grab current dimensions of the chart holder
-        var containerWidth = holder.clientWidth;
-        var containerHeight = holder.clientHeight;
-        // The resize callback function
-        var resizeCallback = Tools.debounce(function (entries, observer) {
-            if (!holder) {
-                return;
-            }
-            if (Math.abs(containerWidth - holder.clientWidth) > 1 ||
-                Math.abs(containerHeight - holder.clientHeight) > 1) {
-                containerWidth = holder.clientWidth;
-                containerHeight = holder.clientHeight;
-                _this.services.events.dispatchEvent(Events.Chart.RESIZE);
-            }
-        }, 12.5);
-        // Observe the behaviour of resizing on the holder
-        var resizeObserver = new ResizeObserver(resizeCallback);
-        resizeObserver.observe(holder);
-    };
-    return DOMUtils;
-}(Service));
-export { DOMUtils };
-//# sourceMappingURL=../../../src/services/essentials/dom-utils.js.map