@carbon/charts 1.8.0 → 1.9.0-rc.0

package/demo/utils.d.ts

@@ -1,24 +0,0 @@
-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

@@ -1,222 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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=\"cds--fieldset marginTop-45\">\n\t<legend class=\"cds--label\">Active theme</legend>\n\n\t<div class=\"cds--form-item\">\n\t\t<div class=\"cds--radio-button-group\">\n\t\t\t<div class=\"cds--radio-button-wrapper\">\n\t\t\t\t<input id=\"theme__white\" class=\"cds--radio-button\" type=\"radio\" value=\"white\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"theme__white\" class=\"cds--radio-button__label\">\n\t\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"cds--radio-button__label-text\">White</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\n\t\t\t<div class=\"cds--radio-button-wrapper\">\n\t\t\t\t<input id=\"theme__g10\" class=\"cds--radio-button\" type=\"radio\" value=\"g10\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"theme__g10\" class=\"cds--radio-button__label\">\n\t\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"cds--radio-button__label-text\">G10</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\n\t\t\t<div class=\"cds--radio-button-wrapper\">\n\t\t\t\t<input id=\"theme__g90\" class=\"cds--radio-button\" type=\"radio\" value=\"g90\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"theme__g90\" class=\"cds--radio-button__label\">\n\t\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"cds--radio-button__label-text\">G90</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\n\t\t\t<div class=\"cds--radio-button-wrapper\">\n\t\t\t\t<input id=\"theme__g100\" class=\"cds--radio-button\" type=\"radio\" value=\"g100\" name=\"radio-button\" tabindex=\"0\">\n\t\t\t\t<label for=\"theme__g100\" class=\"cds--radio-button__label\">\n\t\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t\t<span class=\"cds--radio-button__label-text\">G100</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</fieldset>";
-    var currentTheme = document.documentElement.getAttribute('data-carbon-theme');
-    if (currentTheme) {
-        div.querySelector("input#theme__" + currentTheme).setAttribute('checked', 'true');
-    }
-    else {
-        div.querySelector("input#theme__white").setAttribute('checked', 'true');
-    }
-    container.querySelector('#charting-controls').appendChild(div);
-};
-var generateProjectionPickerHTML = function (container, chart) {
-    var projections = [
-        'geoEqualEarth',
-        'geoAlbers',
-        'geoConicEqualArea',
-        'geoConicEquidistant',
-        'geoEquirectangular',
-        'geoMercator',
-        'geoNaturalEarth1',
-    ];
-    var chartOptions = chart.model.getOptions();
-    var div = document.createElement('div');
-    div.id = 'projection-picker';
-    div.innerHTML = "\n<div class=\"cds--form-item\">\n\t<div class=\"cds--select\">\n\t\t<label for=\"projection-select\" class=\"cds--label\">Projections</label>\n\t\t<div class=\"cds--select-input__wrapper\">\n\t\t\t<select id=\"projection-select\" class=\"cds--select-input\">\n\t\t\t\t<option class=\"cds--select-option\" value=\"\" disabled selected hidden>\n\t\t\t\t\tChoose an option\n\t\t\t\t</option>\n\t\t\t\t" + projections
-        .map(function (projection) {
-        return "<option class=\"cds--select-option\" value=\"" + projection + "\">" + projection + "</option>";
-    })
-        .join('') + "\n\n\t\t\t</select>\n\t\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</div>";
-    div.querySelector('#projection-select').addEventListener('change', function (e) {
-        var value = e.target.value;
-        chartOptions.thematic.projection = value;
-        chart.model.setOptions(chartOptions);
-    });
-    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=\"cds--form-item\">\n\t<div\n\tclass=\"cds--select\">\n\t<label for=\"color-palette-select\" class=\"cds--label\">Active color palette</label>\n\t\t<div class=\"cds--select-input__wrapper\">\n\t\t<select id=\"color-palette-select\" class=\"cds--select-input\">\n\t\t\t<option class=\"cds--select-option\" value=\"\" disabled selected hidden>\n\t\t\tChoose an option\n\t\t\t</option>\n\t\t\t" + Object.keys(colorPairingOptions)
-        .map(function (colorGroup) {
-        var optionsCount = colorPairingOptions[colorGroup];
-        var optionsHTML = "<optgroup class=\"cds--select-optgroup\" label=\"" + colorGroup + " groups\">";
-        var numberOfVariants = parseInt(colorGroup);
-        if (numberOfVariants !== 14) {
-            for (var i = 1; i <= optionsCount; i++) {
-                optionsHTML += "\n\t\t\t\t\t\t<option class=\"cds--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=\"cds--select-option\" value=\"14-color-option-1\" " + (selectedColorPalette === "14-1" ||
-                onlyCategoricalPaletteIsApplicable
-                ? 'selected'
-                : '') + ">\n\t\t\t\t\t\tCategorical palette\n\t\t\t\t\t</option>";
-        }
-        return optionsHTML;
-    })
-        .join('') + "\n\t\t</select>\n\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform;\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cds--select__arrow\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path></svg>\n\t\t</div>\n\t</div>\n\t</div>\n</div>";
-    div.querySelector('#color-palette-select').addEventListener('change', function (e) {
-        var value = e.target.value;
-        var _a = value.split('-color-option-'), numberOfVariants = _a[0], pairingOption = _a[1];
-        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, _c, _d;
-    generateThemePickerHTML(container, chart);
-    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);
-    }
-    if ((_d = (_c = demoGroup) === null || _c === void 0 ? void 0 : _c.configs) === null || _d === void 0 ? void 0 : _d.includeProjectionControl) {
-        generateProjectionPickerHTML(container, chart);
-    }
-    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.cds--radio-button');
-    var currentTheme = document.documentElement.getAttribute('data-carbon-theme');
-    if (currentTheme) {
-        chart.services.domUtils
-            .getHolder()
-            .setAttribute('data-carbon-theme', currentTheme);
-    }
-    radioButtons.forEach(function (radioButton) {
-        radioButton.addEventListener('click', function (e) {
-            var theme = e.target.value;
-            document.documentElement.setAttribute('data-carbon-theme', theme);
-            // Set selected theme to options
-            chart.model.setOptions(__assign(__assign({}, chart.model.getOptions()), { theme: theme }));
-        });
-    });
-};
-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', 'cds--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=\"cds--no-gutter-sm cds--col-md-6 cds--col-lg-6\">\n\t\t<div class=\"cds--resource-card\">\n\t\t  <div class=\"cds--aspect-ratio cds--aspect-ratio--2x1\">\n\t\t\t<div class=\"cds--aspect-ratio--object\">\n\t\t\t  <a href=\"" + otherVersion.link + "\" class=\"cds--tile cds--tile--clickable\">\n\t\t\t\t<h5 class=\"cds--resource-card__subtitle\">" + otherVersion.name + "</h5>\n\t\t\t\t<div class=\"cds--resource-card__icon--img\"></div>\n\t\t\t\t<div class=\"cds--resource-card__icon--action\">\n\t\t\t\t  <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" aria-label=\"Open resource\" width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" role=\"img\">\n\t\t\t\t\t<path d=\"M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z\"></path>\n\t\t\t\t\t<path d=\"M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z\"></path>\n\t\t\t\t  </svg>\n\t\t\t\t</div>\n\t\t\t  </a>\n\t\t\t</div>\n\t\t  </div>\n\t\t</div>\n\t  </div>";
-    });
-    div.innerHTML = htmlContent;
-    container.querySelector('#other-versions').appendChild(div);
-};
-/**
- * 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

@@ -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('checked', 'true');\n\t}\n\n\tcontainer.querySelector('#charting-controls').appendChild(div);\n};\n\nconst generateProjectionPickerHTML = (container, chart) => {\n\tconst projections = [\n\t\t'geoEqualEarth',\n\t\t'geoAlbers',\n\t\t'geoConicEqualArea',\n\t\t'geoConicEquidistant',\n\t\t'geoEquirectangular',\n\t\t'geoMercator',\n\t\t'geoNaturalEarth1',\n\t];\n\n\tconst chartOptions = chart.model.getOptions();\n\n\tconst div = document.createElement('div');\n\tdiv.id = 'projection-picker';\n\tdiv.innerHTML = `\n<div class=\"cds--form-item\">\n\t<div class=\"cds--select\">\n\t\t<label for=\"projection-select\" class=\"cds--label\">Projections</label>\n\t\t<div class=\"cds--select-input__wrapper\">\n\t\t\t<select id=\"projection-select\" class=\"cds--select-input\">\n\t\t\t\t<option class=\"cds--select-option\" value=\"\" disabled selected hidden>\n\t\t\t\t\tChoose an option\n\t\t\t\t</option>\n\t\t\t\t${projections\n\t\t\t\t\t.map((projection) => {\n\t\t\t\t\t\treturn `<option class=\"cds--select-option\" value=\"${projection}\">${projection}</option>`;\n\t\t\t\t\t})\n\t\t\t\t\t.join('')}\n\n\t\t\t</select>\n\t\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</div>`;\n\n\tdiv.querySelector('#projection-select').addEventListener(\n\t\t'change',\n\t\t(e: any) => {\n\t\t\tconst { value } = e.target;\n\t\t\tchartOptions.thematic.projection = value;\n\t\t\tchart.model.setOptions(chartOptions);\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, chart);\n\n\tif (demoGroup?.configs?.excludeColorPaletteControl !== true) {\n\t\tgenerateColorPalettePickerHTML(container, chart, configs);\n\t}\n\n\tif (demoGroup?.configs?.includeProjectionControl) {\n\t\tgenerateProjectionPickerHTML(container, chart);\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\t// Set selected theme to options\n\t\t\tchart.model.setOptions({ ...chart.model.getOptions(), theme });\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/index.d.ts

@@ -1,4 +0,0 @@
-export * from './charts';
-import * as configurations from './configuration';
-import * as interfaces from './interfaces';
-export { interfaces, configurations };

package/index.js

@@ -1,6 +0,0 @@
-export * from './charts';
-// Configs & interfaces
-import * as configurations from './configuration';
-import * as interfaces from './interfaces';
-export { interfaces, configurations };
-//# sourceMappingURL=../src/index.js.map

package/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAEzB,uBAAuB;AACvB,OAAO,KAAK,cAAc,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC","sourcesContent":["export * from './charts';\n\n// Configs & interfaces\nimport * as configurations from './configuration';\nimport * as interfaces from './interfaces';\n\nexport { interfaces, configurations };\n"]}

package/interfaces/a11y.d.ts

@@ -1,12 +0,0 @@
-export declare enum Roles {
-    GRAPHICS_DOCUMENT = "graphics-document",
-    GRAPHICS_OBJECT = "graphics-object",
-    GRAPHICS_SYMBOL = "graphics-symbol",
-    GROUP = "group",
-    DOCUMENT = "document",
-    CHECKBOX = "checkbox",
-    BUTTON = "button",
-    MENU = "menu",
-    MENU_ITEM = "menuitem",
-    IMG = "img"
-}

package/interfaces/a11y.js

@@ -1,14 +0,0 @@
-export var Roles;
-(function (Roles) {
-    Roles["GRAPHICS_DOCUMENT"] = "graphics-document";
-    Roles["GRAPHICS_OBJECT"] = "graphics-object";
-    Roles["GRAPHICS_SYMBOL"] = "graphics-symbol";
-    Roles["GROUP"] = "group";
-    Roles["DOCUMENT"] = "document";
-    Roles["CHECKBOX"] = "checkbox";
-    Roles["BUTTON"] = "button";
-    Roles["MENU"] = "menu";
-    Roles["MENU_ITEM"] = "menuitem";
-    Roles["IMG"] = "img";
-})(Roles || (Roles = {}));
-//# sourceMappingURL=../../src/interfaces/a11y.js.map

package/interfaces/a11y.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"a11y.js","sourceRoot":"","sources":["a11y.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,KAWX;AAXD,WAAY,KAAK;IAChB,gDAAuC,CAAA;IACvC,4CAAmC,CAAA;IACnC,4CAAmC,CAAA;IACnC,wBAAe,CAAA;IACf,8BAAqB,CAAA;IACrB,8BAAqB,CAAA;IACrB,0BAAiB,CAAA;IACjB,sBAAa,CAAA;IACb,+BAAsB,CAAA;IACtB,oBAAW,CAAA;AACZ,CAAC,EAXW,KAAK,KAAL,KAAK,QAWhB","sourcesContent":["export enum Roles {\n\tGRAPHICS_DOCUMENT = 'graphics-document',\n\tGRAPHICS_OBJECT = 'graphics-object',\n\tGRAPHICS_SYMBOL = 'graphics-symbol',\n\tGROUP = 'group',\n\tDOCUMENT = 'document',\n\tCHECKBOX = 'checkbox',\n\tBUTTON = 'button',\n\tMENU = 'menu',\n\tMENU_ITEM = 'menuitem',\n\tIMG = 'img',\n}\n"]}

package/interfaces/axis-scales.d.ts

@@ -1,201 +0,0 @@
-import { ScaleTypes, TickRotations, AxisTitleOrientations } from './enums';
-import { ThresholdOptions } from './components';
-import { TruncationOptions } from './truncation';
-import { AxisDomain } from 'd3-axis';
-import { Locale } from 'date-fns';
-export interface BasedAxisOptions {
-    /**
-     * type of the scale used on axis
-     */
-    scaleType?: ScaleTypes;
-    /**
-     * Whether the Axis should use the specified domain
-     * instead of it being dynamically generated based on data extents.
-     * The type of values should depend on the scale type.
-     * Example for continuous axis scale: [-100, 100]
-     * Example for discrete axis scale: ['Qty', 'More', 'Sold']
-     * No need to define domain for percentage axis scale
-     */
-    domain?: AxisDomain[];
-    /**
-     * an additional key from the charting data that is used to
-     * extend the domain of an axis by
-     * (e.g. in the bullet graph we need both the marker &
-     * the data values to define the domain of the linear scale)
-     */
-    extendLinearDomainBy?: string;
-    /**
-     * Whether the Axis should be forced to include 0 as a starting point
-     * (or ending point, in case of all negative axis).
-     * Default: true
-     */
-    includeZero?: boolean;
-    /**
-     * identifies what key within the data the axis values would map to
-     */
-    mapsTo?: string;
-    /**
-     * optional title for the scales
-     */
-    title?: string;
-    /**
-     * Override for the orientation of the title (for vertical axes).
-     * The title string can be overrided to be rotated left or right.
-     */
-    titleOrientation?: AxisTitleOrientations;
-    /**
-     * thresholds
-     * Example:
-     * [
-     *		{value: 10000},
-     *		{value: 40020, valueFormatter: (x) => x},
-     *		{value: 55000, label: "Custom label", fillColor: "#03a9f4"},
-     * ]
-     */
-    thresholds?: ThresholdOptions[];
-    /**
-     * tick configuration
-     */
-    ticks?: {
-        /**
-         * number of ticks to show
-         */
-        number?: number;
-        /**
-         * minimum tick value
-         */
-        min?: number;
-        /**
-         * maximum tick value
-         */
-        max?: number;
-        /**
-         * minimum width of a tick
-         * before getting rotated (in pixels)
-         */
-        rotateIfSmallerThan?: number;
-        /**
-         * when to rotate ticks
-         */
-        rotation?: TickRotations;
-        /**
-         * function to format the ticks
-         */
-        formatter?: Function;
-        /**
-         * optional custom array of tick values that is within the domain of data
-         */
-        values?: any[];
-    };
-    truncation?: TruncationOptions;
-    /**
-     * is axis visible or not
-     */
-    visible?: boolean;
-    /**
-     * Bins to display (Histogram)
-     * bins: 20
-     * bins: [0, 20, 40, 60]
-     * bins: [new Date(...), new Date(...), ...]
-     */
-    bins?: number | any[];
-    /**
-     * limit the visible axis domain to only the binned area
-     */
-    limitDomainToBins?: boolean;
-    /**
-     * should be set to `true` on the domain
-     * axis that's being broken into bins
-     */
-    binned?: boolean;
-}
-/**
- * options to configure a scale. not all options are used by all scales
- */
-export interface AxisOptions extends BasedAxisOptions {
-    /**
-     * option for stacked axis
-     */
-    stacked?: boolean;
-    /**
-     * option for percentage axis scale
-     */
-    percentage?: boolean;
-}
-export interface ComboChartAxisOptions extends AxisOptions {
-    /**
-     * should be set to `true` for the
-     * left axis to be the primary axis
-     */
-    main?: boolean;
-    /**
-     * used to map data on the secondary axis
-     */
-    correspondingDatasets?: Array<string>;
-}
-export interface BinnedAxisOptions {
-    /**
-     * should be set to `true` on the domain
-     * axis that's being broken into bins
-     */
-    binned?: boolean;
-    /**
-     * Bins to display (Histogram)
-     * bins: 20
-     * bins: [0, 20, 40, 60]
-     * bins: [new Date(...), new Date(...), ...]
-     */
-    bins?: number | any[];
-    /**
-     * limit the visible axis domain to only the binned area
-     */
-    limitDomainToBins?: boolean;
-}
-/**
- * customize time series scales
- */
-export interface TimeScaleOptions {
-    addSpaceOnEdges?: number;
-    /**
-     * if it's true, days are shown as mon-sun,
-     * otherwise days are shown as number 1-31
-     */
-    showDayName?: boolean;
-    /**
-     * formats for each time interval
-     */
-    timeIntervalFormats?: TimeIntervalFormats;
-    /**
-     * locale object, for more information see https://date-fns.org/v2.11.0/docs/Locale.
-     * example: `import enUSLocaleObject from "date-fns/locale/en-US/index"`.
-     * available locale objects are: https://github.com/date-fns/date-fns/tree/master/src/locale
-     */
-    localeObject?: Locale;
-}
-/**
- * time scales: customize ticks format for different time intervals
- */
-export interface TickFormats {
-    primary?: string;
-    secondary?: string;
-}
-export interface TimeIntervalFormats {
-    '15seconds'?: TickFormats;
-    minute?: TickFormats;
-    '30minutes'?: TickFormats;
-    hourly?: TickFormats;
-    daily?: TickFormats;
-    weekly?: TickFormats;
-    monthly?: TickFormats;
-    quarterly?: TickFormats;
-    yearly?: TickFormats;
-}
-/**
- * customize the axes components
- */
-export interface AxesOptions<AxesOptionType> {
-    left?: AxesOptionType;
-    bottom?: AxesOptionType;
-    right?: AxesOptionType;
-    top?: AxesOptionType;
-}

package/interfaces/axis-scales.js

@@ -1 +0,0 @@
-//# sourceMappingURL=../../src/interfaces/axis-scales.js.map

package/interfaces/axis-scales.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"axis-scales.js","sourceRoot":"","sources":["axis-scales.ts"],"names":[],"mappings":"","sourcesContent":["import { ScaleTypes, TickRotations, AxisTitleOrientations } from './enums';\nimport { ThresholdOptions } from './components';\nimport { TruncationOptions } from './truncation';\n\nimport { AxisDomain } from 'd3-axis';\nimport { Locale } from 'date-fns';\n\nexport interface BasedAxisOptions {\n\t/**\n\t * type of the scale used on axis\n\t */\n\tscaleType?: ScaleTypes;\n\t/**\n\t * Whether the Axis should use the specified domain\n\t * instead of it being dynamically generated based on data extents.\n\t * The type of values should depend on the scale type.\n\t * Example for continuous axis scale: [-100, 100]\n\t * Example for discrete axis scale: ['Qty', 'More', 'Sold']\n\t * No need to define domain for percentage axis scale\n\t */\n\tdomain?: AxisDomain[];\n\t/**\n\t * an additional key from the charting data that is used to\n\t * extend the domain of an axis by\n\t * (e.g. in the bullet graph we need both the marker &\n\t * the data values to define the domain of the linear scale)\n\t */\n\textendLinearDomainBy?: string;\n\t/**\n\t * Whether the Axis should be forced to include 0 as a starting point\n\t * (or ending point, in case of all negative axis).\n\t * Default: true\n\t */\n\tincludeZero?: boolean;\n\t/**\n\t * identifies what key within the data the axis values would map to\n\t */\n\tmapsTo?: string;\n\t/**\n\t * optional title for the scales\n\t */\n\ttitle?: string;\n\t/**\n\t * Override for the orientation of the title (for vertical axes).\n\t * The title string can be overrided to be rotated left or right.\n\t */\n\ttitleOrientation?: AxisTitleOrientations;\n\t/**\n\t * thresholds\n\t * Example:\n\t * [\n\t *\t\t{value: 10000},\n\t *\t\t{value: 40020, valueFormatter: (x) => x},\n\t *\t\t{value: 55000, label: \"Custom label\", fillColor: \"#03a9f4\"},\n\t * ]\n\t */\n\tthresholds?: ThresholdOptions[];\n\t/**\n\t * tick configuration\n\t */\n\tticks?: {\n\t\t/**\n\t\t * number of ticks to show\n\t\t */\n\t\tnumber?: number;\n\t\t/**\n\t\t * minimum tick value\n\t\t */\n\t\tmin?: number;\n\t\t/**\n\t\t * maximum tick value\n\t\t */\n\t\tmax?: number;\n\t\t/**\n\t\t * minimum width of a tick\n\t\t * before getting rotated (in pixels)\n\t\t */\n\t\trotateIfSmallerThan?: number;\n\t\t/**\n\t\t * when to rotate ticks\n\t\t */\n\t\trotation?: TickRotations;\n\t\t/**\n\t\t * function to format the ticks\n\t\t */\n\t\tformatter?: Function;\n\t\t/**\n\t\t * optional custom array of tick values that is within the domain of data\n\t\t */\n\t\tvalues?: any[];\n\t};\n\ttruncation?: TruncationOptions;\n\t/**\n\t * is axis visible or not\n\t */\n\tvisible?: boolean;\n\t/**\n\t * Bins to display (Histogram)\n\t * bins: 20\n\t * bins: [0, 20, 40, 60]\n\t * bins: [new Date(...), new Date(...), ...]\n\t */\n\tbins?: number | any[];\n\t/**\n\t * limit the visible axis domain to only the binned area\n\t */\n\tlimitDomainToBins?: boolean;\n\t/**\n\t * should be set to `true` on the domain\n\t * axis that's being broken into bins\n\t */\n\tbinned?: boolean;\n}\n\n/**\n * options to configure a scale. not all options are used by all scales\n */\nexport interface AxisOptions extends BasedAxisOptions {\n\t/**\n\t * option for stacked axis\n\t */\n\tstacked?: boolean;\n\t/**\n\t * option for percentage axis scale\n\t */\n\tpercentage?: boolean;\n}\n\nexport interface ComboChartAxisOptions extends AxisOptions {\n\t/**\n\t * should be set to `true` for the\n\t * left axis to be the primary axis\n\t */\n\tmain?: boolean;\n\t/**\n\t * used to map data on the secondary axis\n\t */\n\tcorrespondingDatasets?: Array<string>;\n}\n\nexport interface BinnedAxisOptions {\n\t/**\n\t * should be set to `true` on the domain\n\t * axis that's being broken into bins\n\t */\n\tbinned?: boolean;\n\t/**\n\t * Bins to display (Histogram)\n\t * bins: 20\n\t * bins: [0, 20, 40, 60]\n\t * bins: [new Date(...), new Date(...), ...]\n\t */\n\tbins?: number | any[];\n\t/**\n\t * limit the visible axis domain to only the binned area\n\t */\n\tlimitDomainToBins?: boolean;\n}\n\n/**\n * customize time series scales\n */\nexport interface TimeScaleOptions {\n\taddSpaceOnEdges?: number;\n\t/**\n\t * if it's true, days are shown as mon-sun,\n\t * otherwise days are shown as number 1-31\n\t */\n\tshowDayName?: boolean;\n\t/**\n\t * formats for each time interval\n\t */\n\ttimeIntervalFormats?: TimeIntervalFormats;\n\t/**\n\t * locale object, for more information see https://date-fns.org/v2.11.0/docs/Locale.\n\t * example: `import enUSLocaleObject from \"date-fns/locale/en-US/index\"`.\n\t * available locale objects are: https://github.com/date-fns/date-fns/tree/master/src/locale\n\t */\n\tlocaleObject?: Locale;\n}\n\n/**\n * time scales: customize ticks format for different time intervals\n */\nexport interface TickFormats {\n\tprimary?: string;\n\tsecondary?: string;\n}\n\nexport interface TimeIntervalFormats {\n\t'15seconds'?: TickFormats;\n\tminute?: TickFormats;\n\t'30minutes'?: TickFormats;\n\thourly?: TickFormats;\n\tdaily?: TickFormats;\n\tweekly?: TickFormats;\n\tmonthly?: TickFormats;\n\tquarterly?: TickFormats;\n\tyearly?: TickFormats;\n}\n\n/**\n * customize the axes components\n */\nexport interface AxesOptions<AxesOptionType> {\n\tleft?: AxesOptionType;\n\tbottom?: AxesOptionType;\n\tright?: AxesOptionType;\n\ttop?: AxesOptionType;\n}\n"]}

package/interfaces/charts.js

@@ -1 +0,0 @@
-//# sourceMappingURL=../../src/interfaces/charts.js.map

package/interfaces/charts.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"charts.js","sourceRoot":"","sources":["charts.ts"],"names":[],"mappings":"","sourcesContent":["import {\n\tGaugeTypes,\n\tStatuses,\n\tArrowDirections,\n\tAlignments,\n\tChartTypes,\n\tTreeTypes,\n\tDividerStatus,\n\tColorLegendType,\n\tChartTheme,\n\tProjection,\n} from './enums';\nimport {\n\tLegendOptions,\n\tTooltipOptions,\n\tGridOptions,\n\tAxesOptions,\n\tZoomBarsOptions,\n} from './index';\nimport { BarOptions, StackedBarOptions, ToolbarOptions } from './components';\nimport {\n\tAxisOptions,\n\tBinnedAxisOptions,\n\tComboChartAxisOptions,\n\tTimeScaleOptions,\n} from './axis-scales';\n\n/**\n * Base chart options common to any chart\n */\nexport interface BaseChartOptions {\n\t/**\n\t * Optionally specify a title for the chart\n\t */\n\ttitle?: string;\n\t/**\n\t * boolean to disable animations (enabled by default)\n\t */\n\tanimations?: boolean;\n\t/**\n\t * boolean to prevent the container from resizing\n\t */\n\tresizable?: boolean;\n\t/**\n\t * Optionally specify a width for the chart\n\t */\n\twidth?: string;\n\t/**\n\t * Optionally specify a height for the chart\n\t */\n\theight?: string;\n\t/**\n\t * Optionally specify a theme for the chart\n\t */\n\ttheme?: ChartTheme;\n\t/**\n\t * tooltip configuration\n\t */\n\ttooltip?: TooltipOptions;\n\t/**\n\t * legend configuration\n\t */\n\tlegend?: LegendOptions;\n\t/**\n\t * toolbar configurations\n\t */\n\ttoolbar?: ToolbarOptions;\n\t/**\n\t * Optional function to determine whether is filled based on datasetLabel, label, and/or data\n\t */\n\tgetIsFilled?: (\n\t\tdatasetLabel: any,\n\t\tlabel?: any,\n\t\tdata?: any,\n\t\tdefaultFilled?: boolean\n\t) => boolean;\n\t/**\n\t * Optional function to generate the fill color based on datasetLabel, label, and/or data\n\t */\n\tgetFillColor?: (\n\t\tgroup: string,\n\t\tlabel?: string,\n\t\tdata?: any,\n\t\tdefaultFillColor?: string\n\t) => string;\n\t/**\n\t * Optional function to generate the stroke color based on datasetLabel, label, and/or data\n\t * (note) - not all chart types support the stroke color (e.g. wordcloud)\n\t */\n\tgetStrokeColor?: (\n\t\tgroup: string,\n\t\tlabel?: any,\n\t\tdata?: any,\n\t\tdefaultStrokeColor?: string\n\t) => string;\n\t/**\n\t * stylesheet options\n\t */\n\tstyle?: {\n\t\t/**\n\t\t * optional prefixing string for css classes (defaults to 'cc')\n\t\t */\n\t\tprefix?: string;\n\t};\n\t/**\n\t * options related to charting data\n\t */\n\tdata?: {\n\t\t/**\n\t\t * identifier for data groups\n\t\t */\n\t\tgroupMapsTo?: string;\n\t\t/**\n\t\t * used to simulate data loading in skeleton way\n\t\t */\n\t\tloading?: boolean;\n\t\t/**\n\t\t * options related to pre-selected data groups\n\t\t * Remains empty if every legend item is active or dataset doesn't have the data groups.\n\t\t */\n\t\tselectedGroups?: string[];\n\t};\n\t/**\n\t * options related to color scales\n\t */\n\tcolor?: {\n\t\t/**\n\t\t * e.g. { 'Dataset 1': 'blue' }\n\t\t */\n\t\tscale?: object;\n\t\t/**\n\t\t * use a carbon dataviz preset color palette\n\t\t * put the index (selection of which variant)\n\t\t */\n\t\tpairing?: {\n\t\t\t/**\n\t\t\t * the number of color variants in the palette (defaults to using the number of data groups in the given data)\n\t\t\t */\n\t\t\tnumberOfVariants?: number;\n\t\t\t/**\n\t\t\t * the option number of the color paring\n\t\t\t */\n\t\t\toption?: number;\n\t\t};\n\t\t/*\n\t\t * options related to gradient\n\t\t * e.g. { enabled: true }\n\t\t */\n\t\tgradient?: {\n\t\t\tenabled?: boolean;\n\t\t\t/**\n\t\t\t * hex color array\n\t\t\t * e.g. ['#fff', '#000', ...]\n\t\t\t */\n\t\t\tcolors?: Array<String>;\n\t\t};\n\t};\n\t/*\n\t * options related to (CSV|PNG|JPG) file downloads\n\t */\n\tfileDownload?: {\n\t\t/**\n\t\t * the number of color variants in the palette (defaults to using the number of data groups in the given data)\n\t\t */\n\t\tfileName?: (type: 'png' | 'jpg' | 'csv') => string;\n\t};\n}\n\n/**\n * Options common to any chart with an axis\n */\nexport interface AxisChartOptions extends BaseChartOptions {\n\taxes?: AxesOptions<AxisOptions>;\n\tgrid?: GridOptions;\n\ttimeScale?: TimeScaleOptions;\n\t/**\n\t * zoombar configuration\n\t */\n\tzoomBar?: ZoomBarsOptions;\n}\n\n/**\n * Options common to binned charts with an axis\n */\nexport interface BinnedAxisChartOptions extends AxisChartOptions {\n\taxes?: AxesOptions<BinnedAxisOptions>;\n\tgrid?: GridOptions;\n\ttimeScale?: TimeScaleOptions;\n\t/**\n\t * zoombar configuration\n\t */\n\tzoomBar?: ZoomBarsOptions;\n}\n\n/**\n * options specific to boxplot charts\n */\nexport interface BoxplotChartOptions extends AxisChartOptions {}\n\n/**\n * options specific to bar charts\n */\nexport interface BarChartOptions extends AxisChartOptions {\n\tbars?: BarOptions;\n}\n\n/**\n * options specific to stacked bar charts\n */\nexport interface StackedBarChartOptions extends BarChartOptions {\n\tbars?: StackedBarOptions;\n}\n\n/**\n * options specific to scatter charts\n */\nexport interface ScatterChartOptions extends AxisChartOptions {\n\t/**\n\t * options for the points\n\t */\n\tpoints?: {\n\t\t/**\n\t\t * sets the radius of the point\n\t\t */\n\t\tradius: number;\n\t\tfillOpacity?: number;\n\t\tfilled?: boolean;\n\t\tenabled?: boolean;\n\t};\n}\n\n/**\n * options specific to lollipop charts\n */\nexport interface LollipopChartOptions extends ScatterChartOptions {}\n\n/**\n * options specific to bubble charts\n */\nexport interface BubbleChartOptions extends AxisChartOptions {\n\t/**\n\t * options for the individual bubbles\n\t */\n\tbubble?: {\n\t\t/**\n\t\t * the key to lookup in charting data for the bubble radius value\n\t\t */\n\t\tradiusMapsTo?: string;\n\t\t/**\n\t\t * options for what the bubble radius value maps to\n\t\t */\n\t\tradiusLabel?: string;\n\t\t/**\n\t\t * A function that would determine the range of the bubble radius to use\n\t\t * Returns an array with the 1st value being the min and the 2nd value being the max radius\n\t\t */\n\t\tradiusRange?: Function;\n\t\t/**\n\t\t * Opacity of the fills used within each circle\n\t\t */\n\t\tfillOpacity?: number;\n\t\t/**\n\t\t * enabled scatter dot or not\n\t\t */\n\t\tenabled?: boolean;\n\t};\n}\n\n/**\n * options specific to bullet charts\n */\nexport interface BulletChartOptions extends AxisChartOptions {\n\t/**\n\t * options for the individual bullets\n\t */\n\tbullet?: {\n\t\tperformanceAreaTitles?: string[];\n\t};\n}\n\n/**\n * options specific to histogram charts\n */\nexport interface HistogramChartOptions extends AxisChartOptions {\n\t/**\n\t * options related to bins\n\t */\n\tbins?: {\n\t\trangeLabel?: string;\n\t};\n}\n\n/**\n * options specific to line charts\n */\nexport interface LineChartOptions extends ScatterChartOptions {\n\t/**\n\t * options for the curve of the line\n\t */\n\tcurve?: string | { name: string };\n}\n\n/**\n * options specific to area charts\n */\nexport interface AreaChartOptions extends AxisChartOptions {\n\t/**\n\t * options for the curve of the line\n\t */\n\tcurve?: string | { name: string };\n\t/**\n\t * options to bound the area of the chart\n\t */\n\tbounds?: {\n\t\tupperBoundMapsTo?: string;\n\t\tlowerBoundMapsTo?: string;\n\t};\n}\n\n/**\n * options specific to area charts\n */\nexport interface StackedAreaChartOptions extends ScatterChartOptions {\n\t/**\n\t * options for the curve of the line\n\t */\n\tcurve?: string | { name: string };\n}\n\n/**\n * options specific to world cloud charts\n */\nexport interface WordCloudChartTooltipOptions extends TooltipOptions {\n\t/** the label that shows up by the highlighted word in the tooltip */\n\twordLabel?: string;\n\t/** the label that shows up by the value of the highlighted word in the tooltip */\n\tvalueLabel?: string;\n}\n\nexport interface WorldCloudChartOptions extends BaseChartOptions {\n\twordCloud?: {\n\t\t/** what key in your charting data will the font sizes map to? */\n\t\tfontSizeMapsTo?: string;\n\t\t/** a function (chartSize, data) => {} that'll decide the range of font sizes, e.g. [10, 80] */\n\t\tfontSizeRange?: Function;\n\t\t/** what key in your charting data will the words map to? */\n\t\twordMapsTo?: string;\n\t};\n\t/**\n\t * tooltip configuration\n\t */\n\ttooltip?: WordCloudChartTooltipOptions;\n}\n\n/**\n * options specific to pie charts\n */\nexport interface PieChartOptions extends BaseChartOptions {\n\tpie?: {\n\t\tlabels?: {\n\t\t\tformatter?: Function;\n\t\t\tenabled?: Boolean;\n\t\t};\n\t\talignment?: Alignments;\n\t\t/**\n\t\t * identifier for value key in your charting data\n\t\t * defaults to value\n\t\t */\n\t\tvalueMapsTo?: string;\n\t\tsortFunction?: (a: any, b: any) => number;\n\t};\n}\n\n/**\n * options specific to gauge charts\n */\nexport interface GaugeChartOptions extends BaseChartOptions {\n\tgauge?: {\n\t\tarcWidth?: number;\n\t\tdeltaArrow?: {\n\t\t\tdirection?: ArrowDirections;\n\t\t\tsize?: Function;\n\t\t\tenabled: Boolean;\n\t\t};\n\t\tshowPercentageSymbol?: Boolean;\n\t\tstatus?: Statuses;\n\t\tdeltaFontSize?: Function;\n\t\tnumberSpacing?: number;\n\t\tnumberFormatter?: Function;\n\t\tvalueFontSize?: Function;\n\t\ttype?: GaugeTypes;\n\t\talignment?: Alignments;\n\t};\n}\n\n/**\n * options specific to donut charts\n */\nexport interface DonutChartOptions extends PieChartOptions {\n\tdonut?: {\n\t\tcenter?: {\n\t\t\tlabel?: string;\n\t\t\tnumber?: number;\n\t\t\tnumberFontSize?: Function;\n\t\t\ttitleFontSize?: Function;\n\t\t\ttitleYPosition?: Function;\n\t\t\tnumberFormatter?: Function;\n\t\t};\n\t\talignment?: Alignments;\n\t};\n}\n\nexport interface MeterChartOptions extends BaseChartOptions {\n\tmeter?: {\n\t\tshowLabels?: boolean;\n\t\tproportional?: {\n\t\t\ttotal?: number;\n\t\t\tunit?: string;\n\t\t};\n\t\tpeak?: number;\n\t\tstatus?: {\n\t\t\tranges: Array<{\n\t\t\t\trange: [number, number];\n\t\t\t\tstatus: Statuses;\n\t\t\t}>;\n\t\t};\n\t\theight?: number;\n\t\ttitle?: {\n\t\t\tpercentageIndicator?: {\n\t\t\t\t/**\n\t\t\t\t * rendering of the percentage value relative to the dataset within title\n\t\t\t\t */\n\t\t\t\tenabled?: boolean;\n\t\t\t};\n\t\t};\n\t};\n}\n\nexport interface ProportionalMeterChartOptions extends BaseChartOptions {\n\tmeter?: {\n\t\tproportional?: {\n\t\t\ttotal?: number;\n\t\t\tunit?: string;\n\t\t};\n\t};\n}\n\n/**\n * options specific to radar charts\n */\nexport interface RadarChartOptions extends BaseChartOptions {\n\tradar?: {\n\t\taxes: {\n\t\t\tangle: string;\n\t\t\tvalue: string;\n\t\t};\n\t\talignment?: Alignments;\n\t};\n}\n\n/**\n * options specific to combo charts\n */\nexport interface ComboChartOptions extends AxisChartOptions {\n\taxes?: AxesOptions<ComboChartAxisOptions>;\n\tcomboChartTypes: Array<{\n\t\ttype: ChartTypes | any;\n\t\toptions?: object;\n\t\tcorrespondingDatasets: Array<string>;\n\t}>;\n}\n\n/*\n * options specific to treemap charts\n */\nexport interface TreemapChartOptions extends BaseChartOptions {}\n\n/*\n * options specific to tree charts\n */\nexport interface TreeChartOptions extends BaseChartOptions {\n\ttree?: {\n\t\ttype?: TreeTypes;\n\t\trootTitle?: string;\n\t};\n}\n\n/*\n * options specific to circle pack charts\n */\nexport interface CirclePackChartOptions extends BaseChartOptions {\n\tcirclePack?: {\n\t\tcircles: {\n\t\t\tfillOpacity: number;\n\t\t};\n\t\t// depth of nodes to display\n\t\thierachyLevel: number;\n\t\tpadding?: {\n\t\t\touter?: number;\n\t\t\tinner?: number;\n\t\t};\n\t};\n}\n\n/**\n * options specific to Alluvial charts\n */\nexport interface AlluvialChartOptions extends BaseChartOptions {\n\talluvial: {\n\t\tunits?: string;\n\t\t/**\n\t\t * List of nodes to draw\n\t\t */\n\t\tnodes: Array<{\n\t\t\tname: string;\n\t\t\tcategory?: string;\n\t\t}>;\n\t\t/**\n\t\t * Node alignment (Default is center)\n\t\t */\n\t\tnodeAlignment?: Alignments;\n\t\t/**\n\t\t * Set the node padding\n\t\t */\n\t\tnodePadding?: number;\n\t\t/**\n\t\t * Enable single color usage for lines\n\t\t */\n\t\tmonochrome?: boolean;\n\t};\n}\n\n/**\n * options specific to Heatmap charts\n */\nexport interface HeatmapChartOptions extends BaseChartOptions {\n\theatmap: {\n\t\t/**\n\t\t * Divider width state - will default to auto\n\t\t * No cell divider for cell dimensions less than 16\n\t\t */\n\t\tdivider?: {\n\t\t\tstate?: DividerStatus;\n\t\t};\n\t\t/**\n\t\t * customize color legend\n\t\t * enabled by default on select charts\n\t\t */\n\t\tcolorLegend?: {\n\t\t\t/**\n\t\t\t * Text to display beside or on top of the legend\n\t\t\t * Position is determined by text length\n\t\t\t */\n\t\t\ttitle?: string;\n\t\t\ttype: ColorLegendType;\n\t\t};\n\t};\n}\n\n/**\n * Options common to any thematic chart\n */\nexport interface ThematicChartOptions extends BaseChartOptions {\n\tthematic: {\n\t\tprojection: Projection;\n\t};\n}\n\n/**\n * Options common to any thematic chart\n */\nexport interface ChoroplethChartOptions extends ThematicChartOptions {\n\tchoropleth: {\n\t\t/**\n\t\t * customize color legend\n\t\t * enabled by default on select charts\n\t\t */\n\t\tcolorLegend?: {\n\t\t\t/**\n\t\t\t * Text to display beside or on top of the legend\n\t\t\t * Position is determined by text length\n\t\t\t */\n\t\t\ttitle?: string;\n\t\t\ttype: ColorLegendType;\n\t\t};\n\t};\n}\n"]}