@carbon/charts 0.50.5 → 0.50.6

package/demo/tsconfig.tsbuildinfo

@@ -125,6 +125,10 @@
         "version": "c6d8c634da90f527d94edc96d9168b73935b51f63798e2d48376b913b2b53bf2",
         "signature": "3d9e5316680ca3163403bb963136ed04c4b8f779c480c1e12174c0d12811562b"
       },
+      "../../demo/utils.ts": {
+        "version": "99f295800a68fdcf647d0c881089f87d0b037fac99e78b7e499441cc656a3e02",
+        "signature": "4fe7f477469cf1883226ae5bcbdbbb8d0b5508efdbf4ea909e2f7dc4393483b2"
+      },
       "../../demo/data/CHART_TYPES.ts": {
         "version": "9b243e9797ed4e37ead92b4bbc9e6e7d2828e338b022aeab0d8fee872ef05e2e",
         "signature": "c865ba65263da1c28e11255b4fd548a1dffda7e2ccfa75cbd0f62955a2a4ec5b"
@@ -698,6 +702,13 @@
         "../../node_modules/@types/node/util.d.ts",
         "../../node_modules/@types/node/ts3.2/util.d.ts"
       ],
+      "../../demo/utils.ts": [
+        "../../../../node_modules/date-fns/typings.d.ts",
+        "../../node_modules/@types/node/fs.d.ts",
+        "../../node_modules/@types/node/ts3.2/fs.d.ts",
+        "../../node_modules/@types/node/util.d.ts",
+        "../../node_modules/@types/node/ts3.2/util.d.ts"
+      ],
       "../../demo/data/CHART_TYPES.ts": [
         "../../../../node_modules/date-fns/typings.d.ts",
         "../../node_modules/@types/node/fs.d.ts",
@@ -2073,6 +2084,7 @@
       "../../../../node_modules/codesandbox-import-utils/lib/api/define.d.ts",
       "../../../../node_modules/codesandbox/lib/api/define.d.ts",
       "../../demo/create-codesandbox.ts",
+      "../../demo/utils.ts",
       "../../demo/data/CHART_TYPES.ts",
       "../../demo/data/alluvial.ts",
       "../../demo/data/area.ts",

package/demo/utils.d.ts

@@ -0,0 +1,24 @@
+export declare const addControls: (container: any, demoGroup: any, chart: any, configs?: {
+    colorPairingOptions: any;
+}) => void;
+export declare const addRadioButtonEventListeners: (container: any, chart: any, configs: any) => void;
+export declare const addOtherVersions: (container: any, demoGroup: any, demo: any, configs?: {
+    currentVersion: string;
+}) => void;
+/**
+ * Generates random data going backwards from now once a minute
+ * @param {number} quantity number of data points to create
+ * @param {number} min min range of integer value
+ * @param {number} max max range of integer value
+ * @returns {array} randomly generated array of objects with a date and value field
+ */
+export declare const generateRandomData: (quantity: any, min: any, max: any) => {
+    group: string;
+    value: number;
+    date: Date;
+}[];
+/**
+ * Adds a generate demo data form to the story
+ */
+export declare const generateHighScaleDemoDataForm: () => string;
+export declare const addDemoDataFormListeners: (container: any, demo: any, chart: any) => void;

package/demo/utils.js

@@ -0,0 +1,169 @@
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+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>";
+    container.querySelector('#charting-controls').appendChild(div);
+};
+var generateColorPalettePickerHTML = function (container, chart, configs) {
+    if (configs === void 0) { configs = { colorPairingOptions: null }; }
+    var colorPairingOptions = configs.colorPairingOptions;
+    var chartOptions = chart.model.getOptions();
+    var _a = chartOptions.color.pairing, variants = _a.numberOfVariants, option = _a.option;
+    var numberOfChartDataGroups = chart.model.getAllDataGroupsNames().length;
+    var numberOfVariants = variants || numberOfChartDataGroups;
+    var onlyCategoricalPaletteIsApplicable = false;
+    if (numberOfChartDataGroups > 5) {
+        onlyCategoricalPaletteIsApplicable = true;
+    }
+    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)
+        .map(function (colorGroup) {
+        var optionsCount = colorPairingOptions[colorGroup];
+        var optionsHTML = "<optgroup class=\"bx--select-optgroup\" label=\"" + colorGroup + " groups\">";
+        var numberOfVariants = parseInt(colorGroup);
+        if (numberOfVariants !== 14) {
+            for (var i = 1; i <= optionsCount; i++) {
+                optionsHTML += "\n\t\t\t\t\t\t<option class=\"bx--select-option\" " + (onlyCategoricalPaletteIsApplicable ||
+                    numberOfVariants < numberOfChartDataGroups
+                    ? 'disabled'
+                    : '') + " value=\"" + colorGroup + "-option-" + i + "\" " + (selectedColorPalette ===
+                    numberOfVariants + "-" + i
+                    ? 'selected'
+                    : '') + ">\n\t\t\t\t\t\t\t" + numberOfVariants + "-color groups, option " + i + "\n\t\t\t\t\t\t</option>";
+            }
+        }
+        else {
+            optionsHTML += "<option class=\"bx--select-option\" value=\"14-color-option-1\" " + (selectedColorPalette === "14-1" ||
+                onlyCategoricalPaletteIsApplicable
+                ? 'selected'
+                : '') + ">\n\t\t\t\t\t\tCategorical palette\n\t\t\t\t\t</option>";
+        }
+        return optionsHTML;
+    })
+        .join('') + "\n\t\t</select>\n\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform;\" xmlns=\"http://www.w3.org/2000/svg\" class=\"bx--select__arrow\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path></svg>\n\t\t</div>\n\t</div>\n\t</div>\n</div>";
+    div.querySelector('#color-palette-select').addEventListener('change', function (e) {
+        var value = e.target.value;
+        var _a = value.split('-color-option-'), numberOfVariants = _a[0], pairingOption = _a[1];
+        chartOptions.color.pairing.numberOfVariants = numberOfVariants;
+        chartOptions.color.pairing.option = pairingOption;
+        chart.model.setOptions(chartOptions);
+    });
+    container.querySelector('#charting-controls').appendChild(div);
+};
+export var addControls = function (container, demoGroup, chart, configs) {
+    if (configs === void 0) { configs = { colorPairingOptions: null }; }
+    var _a, _b;
+    generateThemePickerHTML(container, configs);
+    if (((_b = (_a = demoGroup) === null || _a === void 0 ? void 0 : _a.configs) === null || _b === void 0 ? void 0 : _b.excludeColorPaletteControl) !== true) {
+        generateColorPalettePickerHTML(container, chart, configs);
+    }
+    addRadioButtonEventListeners(container, chart, configs);
+};
+export var addRadioButtonEventListeners = function (container, chart, configs) {
+    // Add event listeners for radio buttons
+    var radioButtons = container.querySelectorAll('div#theme-picker input.bx--radio-button');
+    radioButtons.forEach(function (radioButton) {
+        radioButton.addEventListener('click', function (e) {
+            var theme = e.target.value;
+            container.setAttribute('class', "container theme--" + theme);
+            chart.update();
+        });
+    });
+};
+export var addOtherVersions = function (container, demoGroup, demo, configs) {
+    if (configs === void 0) { configs = { currentVersion: 'vanilla' }; }
+    var currentVersion = configs.currentVersion;
+    var demoGroupClassification = (demoGroup.type || '').replace('-chart', '');
+    var div = document.createElement('div');
+    div.setAttribute('class', 'bx--row resource-card-group');
+    var htmlContent = '';
+    var otherVersions = __spreadArrays((currentVersion !== 'vanilla'
+        ? [
+            {
+                name: 'vanilla',
+                link: "https://carbon-design-system.github.io/carbon-charts/?path=/story/" + demoGroupClassification + "-charts-" + demo.id,
+            },
+        ]
+        : []), (currentVersion !== 'react'
+        ? [
+            {
+                name: 'React',
+                link: "https://carbon-design-system.github.io/carbon-charts/react/?path=/story/" + demoGroupClassification + "-charts-" + demo.id,
+            },
+        ]
+        : []), (currentVersion !== 'angular'
+        ? [
+            {
+                name: 'Angular',
+                link: "https://carbon-design-system.github.io/carbon-charts/angular/?path=/story/" + demoGroupClassification + "-charts-" + demo.id,
+            },
+        ]
+        : []), (currentVersion !== 'vue'
+        ? [
+            {
+                name: 'Vue',
+                link: "https://carbon-design-system.github.io/carbon-charts/vue/?path=/story/" + demoGroupClassification + "-charts-" + demo.id,
+            },
+        ]
+        : []), (currentVersion !== 'svelte'
+        ? [
+            {
+                name: 'Svelte',
+                link: "https://carbon-design-system.github.io/carbon-charts/svelte/?path=/story/" + demoGroupClassification + "-charts-" + demo.id,
+            },
+        ]
+        : []));
+    otherVersions.forEach(function (otherVersion) {
+        htmlContent += "<div class=\"bx--no-gutter-sm bx--col-md-6 bx--col-lg-6\">\n\t\t<div class=\"bx--resource-card\">\n\t\t  <div class=\"bx--aspect-ratio bx--aspect-ratio--2x1\">\n\t\t\t<div class=\"bx--aspect-ratio--object\">\n\t\t\t  <a href=\"" + otherVersion.link + "\" class=\"bx--tile bx--tile--clickable\">\n\t\t\t\t<h5 class=\"bx--resource-card__subtitle\">" + otherVersion.name + "</h5>\n\t\t\t\t<div class=\"bx--resource-card__icon--img\"></div>\n\t\t\t\t<div class=\"bx--resource-card__icon--action\">\n\t\t\t\t  <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" aria-label=\"Open resource\" width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" role=\"img\">\n\t\t\t\t\t<path d=\"M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z\"></path>\n\t\t\t\t\t<path d=\"M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z\"></path>\n\t\t\t\t  </svg>\n\t\t\t\t</div>\n\t\t\t  </a>\n\t\t\t</div>\n\t\t  </div>\n\t\t</div>\n\t  </div>";
+    });
+    div.innerHTML = htmlContent;
+    container.querySelector('#other-versions').appendChild(div);
+};
+/**
+ * Generates random data going backwards from now once a minute
+ * @param {number} quantity number of data points to create
+ * @param {number} min min range of integer value
+ * @param {number} max max range of integer value
+ * @returns {array} randomly generated array of objects with a date and value field
+ */
+export var generateRandomData = function (quantity, min, max) {
+    var now = Date.now();
+    return Array(quantity)
+        .fill(0)
+        .map(function (value, index) {
+        return {
+            group: 'group',
+            value: Math.floor(Math.random() * (max - min + 1) + min),
+            date: new Date(now.valueOf() + (index - quantity) * 60000),
+        };
+    });
+};
+/**
+ * Adds a generate demo data form to the story
+ */
+export var generateHighScaleDemoDataForm = function () {
+    return "<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>";
+};
+export var addDemoDataFormListeners = function (container, demo, chart) {
+    // Add event listeners for form
+    var form = container.querySelector('form#demo-data');
+    if (form) {
+        form.addEventListener('submit', function (e) {
+            e.stopPropagation();
+            e.preventDefault();
+            var recordsToGenerate = parseInt(e.currentTarget[0].value) || 2000;
+            chart.model.setData(generateRandomData(recordsToGenerate, 100, 500));
+            chart.update();
+        });
+    }
+};
+//# sourceMappingURL=../../demo/utils.js.map

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

package/package.json

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