@carbon/charts 0.59.0-beta.0 → 1.0.3

package/demo/utils.js.map

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

package/model/treemap.js

@@ -0,0 +1,44 @@
+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/model/treemap.js.map

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

package/package.json

@@ -1,147 +1,147 @@
 {
-	"name": "@carbon/charts",
-	"version": "0.59.0-beta.0",
-	"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"
-	},
-	"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"
-		}
-	],
-	"gitHead": "0149f808eb1b1c704804c137449cb4be3d47db75"
-}
+  "name": "@carbon/charts",
+  "version": "1.0.3",
+  "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": "^11.2.0",
+    "@carbon/styles": "^1.3.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.3.0",
+    "@carbon/grid": "11.2.0",
+    "@carbon/import-once": "10.7.0",
+    "@carbon/layout": "11.2.0",
+    "@carbon/motion": "11.1.0",
+    "@carbon/themes": "11.3.0",
+    "@carbon/type": "11.3.0",
+    "@rollup/plugin-json": "4.0.2",
+    "@rollup/plugin-replace": "3.0.0",
+    "@storybook/addon-knobs": "5.3.12",
+    "@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"
+    }
+  ]
+}