highcharts 10.2.0 → 10.2.1

package/es-modules/Extensions/Annotations/Popup/Popup.js

@@ -0,0 +1,295 @@
+/* *
+ *
+ *  Popup generator for Stock tools
+ *
+ *  (c) 2009-2021 Sebastian Bochan
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import AST from '../../../Core/Renderer/HTML/AST.js';
+import H from '../../../Core/Globals.js';
+var doc = H.doc;
+import D from '../../../Core/DefaultOptions.js';
+var getOptions = D.getOptions;
+import PopupAnnotations from './PopupAnnotations.js';
+import PopupIndicators from './PopupIndicators.js';
+import PopupTabs from './PopupTabs.js';
+import U from '../../../Core/Utilities.js';
+var addEvent = U.addEvent, createElement = U.createElement, extend = U.extend, fireEvent = U.fireEvent, pick = U.pick;
+/* *
+ *
+ *  Functions
+ *
+ * */
+/**
+ * Get values from all inputs and selections then create JSON.
+ *
+ * @private
+ *
+ * @param {Highcharts.HTMLDOMElement} parentDiv
+ * The container where inputs and selections are created.
+ *
+ * @param {string} type
+ * Type of the popup bookmark (add|edit|remove).
+ */
+function getFields(parentDiv, type) {
+    var inputList = Array.prototype.slice.call(parentDiv.querySelectorAll('input')), selectList = Array.prototype.slice.call(parentDiv.querySelectorAll('select')), optionSeries = '#highcharts-select-series > option:checked', optionVolume = '#highcharts-select-volume > option:checked', linkedTo = parentDiv.querySelectorAll(optionSeries)[0], volumeTo = parentDiv.querySelectorAll(optionVolume)[0];
+    var fieldsOutput = {
+        actionType: type,
+        linkedTo: linkedTo && linkedTo.getAttribute('value') || '',
+        fields: {}
+    };
+    inputList.forEach(function (input) {
+        var param = input.getAttribute('highcharts-data-name'), seriesId = input.getAttribute('highcharts-data-series-id');
+        // params
+        if (seriesId) {
+            fieldsOutput.seriesId = input.value;
+        }
+        else if (param) {
+            fieldsOutput.fields[param] = input.value;
+        }
+        else {
+            // type like sma / ema
+            fieldsOutput.type = input.value;
+        }
+    });
+    selectList.forEach(function (select) {
+        var id = select.id;
+        // Get inputs only for the parameters, not for series and volume.
+        if (id !== 'highcharts-select-series' &&
+            id !== 'highcharts-select-volume') {
+            var parameter = id.split('highcharts-select-')[1];
+            fieldsOutput.fields[parameter] = select.value;
+        }
+    });
+    if (volumeTo) {
+        fieldsOutput.fields['params.volumeSeriesID'] = volumeTo
+            .getAttribute('value') || '';
+    }
+    return fieldsOutput;
+}
+/* *
+ *
+ *  Class
+ *
+ * */
+var Popup = /** @class */ (function () {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    function Popup(parentDiv, iconsURL, chart) {
+        this.chart = chart;
+        this.iconsURL = iconsURL;
+        this.lang = getOptions().lang.navigation.popup;
+        // create popup div
+        this.container = createElement('div', {
+            className: 'highcharts-popup highcharts-no-tooltip'
+        }, void 0, parentDiv);
+        addEvent(this.container, 'mousedown', function () {
+            var activeAnnotation = chart &&
+                chart.navigationBindings &&
+                chart.navigationBindings.activeAnnotation;
+            if (activeAnnotation) {
+                activeAnnotation.cancelClick = true;
+                var unbind_1 = addEvent(H.doc, 'click', function () {
+                    setTimeout(function () {
+                        activeAnnotation.cancelClick = false;
+                    }, 0);
+                    unbind_1();
+                });
+            }
+        });
+        // add close button
+        this.addCloseBtn();
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /**
+     * Initialize the popup. Create base div and add close button.
+     * @private
+     * @param {Highcharts.HTMLDOMElement} parentDiv
+     * Container where popup should be placed
+     * @param {string} iconsURL
+     * Icon URL
+     */
+    Popup.prototype.init = function (parentDiv, iconsURL, chart) {
+        Popup.call(this, parentDiv, iconsURL, chart);
+    };
+    /**
+     * Create HTML element and attach click event (close popup).
+     * @private
+     */
+    Popup.prototype.addCloseBtn = function () {
+        var _this = this;
+        var iconsURL = this.iconsURL;
+        // create close popup btn
+        var closeBtn = createElement('div', {
+            className: 'highcharts-popup-close'
+        }, void 0, this.container);
+        closeBtn.style['background-image'] = 'url(' +
+            (iconsURL.match(/png|svg|jpeg|jpg|gif/ig) ?
+                iconsURL : iconsURL + 'close.svg') + ')';
+        ['click', 'touchstart'].forEach(function (eventName) {
+            addEvent(closeBtn, eventName, function () {
+                if (_this.chart) {
+                    fireEvent(_this.chart.navigationBindings, 'closePopup');
+                }
+                else {
+                    _this.closePopup();
+                }
+            });
+        });
+    };
+    /**
+     * Create input with label.
+     *
+     * @private
+     *
+     * @param {string} option
+     *        Chain of fields i.e params.styles.fontSize separeted by the dot.
+     *
+     * @param {string} indicatorType
+     *        Type of the indicator i.e. sma, ema...
+     *
+     * @param {HTMLDOMElement} parentDiv
+     *        HTML parent element.
+     *
+     * @param {Highcharts.InputAttributes} inputAttributes
+     *        Attributes of the input.
+     *
+     * @return {HTMLInputElement}
+     *         Return created input element.
+     */
+    Popup.prototype.addInput = function (option, indicatorType, parentDiv, inputAttributes) {
+        var optionParamList = option.split('.'), optionName = optionParamList[optionParamList.length - 1], lang = this.lang, inputName = 'highcharts-' + indicatorType + '-' + pick(inputAttributes.htmlFor, optionName);
+        if (!inputName.match(/\d/g)) {
+            // add label
+            createElement('label', {
+                htmlFor: inputName,
+                className: inputAttributes.labelClassName
+            }, void 0, parentDiv).appendChild(doc.createTextNode(lang[optionName] || optionName));
+        }
+        // add input
+        var input = createElement('input', {
+            name: inputName,
+            value: inputAttributes.value,
+            type: inputAttributes.type,
+            className: 'highcharts-popup-field'
+        }, void 0, parentDiv);
+        input.setAttribute('highcharts-data-name', option);
+        return input;
+    };
+    /**
+     * Create button.
+     * @private
+     * @param {Highcharts.HTMLDOMElement} parentDiv
+     * Container where elements should be added
+     * @param {string} label
+     * Text placed as button label
+     * @param {string} type
+     * add | edit | remove
+     * @param {Function} callback
+     * On click callback
+     * @param {Highcharts.HTMLDOMElement} fieldsDiv
+     * Container where inputs are generated
+     * @return {Highcharts.HTMLDOMElement}
+     * HTML button
+     */
+    Popup.prototype.addButton = function (parentDiv, label, type, fieldsDiv, callback) {
+        var _this = this;
+        var button = createElement('button', void 0, void 0, parentDiv);
+        button.appendChild(doc.createTextNode(label));
+        if (callback) {
+            ['click', 'touchstart'].forEach(function (eventName) {
+                addEvent(button, eventName, function () {
+                    _this.closePopup();
+                    return callback(getFields(fieldsDiv, type));
+                });
+            });
+        }
+        return button;
+    };
+    /**
+     * Reset content of the current popup and show.
+     * @private
+     */
+    Popup.prototype.showPopup = function () {
+        var popupDiv = this.container, toolbarClass = 'highcharts-annotation-toolbar', popupCloseBtn = popupDiv
+            .querySelectorAll('.highcharts-popup-close')[0];
+        this.formType = void 0;
+        // reset content
+        popupDiv.innerHTML = AST.emptyHTML;
+        // reset toolbar styles if exists
+        if (popupDiv.className.indexOf(toolbarClass) >= 0) {
+            popupDiv.classList.remove(toolbarClass);
+            // reset toolbar inline styles
+            popupDiv.removeAttribute('style');
+        }
+        // add close button
+        popupDiv.appendChild(popupCloseBtn);
+        popupDiv.style.display = 'block';
+        popupDiv.style.height = '';
+    };
+    /**
+     * Hide popup.
+     * @private
+     */
+    Popup.prototype.closePopup = function () {
+        this.container.style.display = 'none';
+    };
+    /**
+     * Create content and show popup.
+     * @private
+     * @param {string} - type of popup i.e indicators
+     * @param {Highcharts.Chart} - chart
+     * @param {Highcharts.AnnotationsOptions} - options
+     * @param {Function} - on click callback
+     */
+    Popup.prototype.showForm = function (type, chart, options, callback) {
+        if (!chart) {
+            return;
+        }
+        // show blank popup
+        this.showPopup();
+        // indicator form
+        if (type === 'indicators') {
+            this.indicators.addForm.call(this, chart, options, callback);
+        }
+        // annotation small toolbar
+        if (type === 'annotation-toolbar') {
+            this.annotations.addToolbar.call(this, chart, options, callback);
+        }
+        // annotation edit form
+        if (type === 'annotation-edit') {
+            this.annotations.addForm.call(this, chart, options, callback);
+        }
+        // flags form - add / edit
+        if (type === 'flag') {
+            this.annotations.addForm.call(this, chart, options, callback, true);
+        }
+        this.formType = type;
+        // Explicit height is needed to make inner elements scrollable
+        this.container.style.height = this.container.offsetHeight + 'px';
+    };
+    return Popup;
+}());
+extend(Popup.prototype, {
+    annotations: PopupAnnotations,
+    indicators: PopupIndicators,
+    tabs: PopupTabs
+});
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default Popup;

package/es-modules/Extensions/Annotations/Popup/PopupAnnotations.js

@@ -0,0 +1,177 @@
+/* *
+ *
+ *  Popup generator for Stock tools
+ *
+ *  (c) 2009-2021 Sebastian Bochan
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import H from '../../../Core/Globals.js';
+var doc = H.doc, isFirefox = H.isFirefox;
+import U from '../../../Core/Utilities.js';
+var createElement = U.createElement, isArray = U.isArray, isObject = U.isObject, objectEach = U.objectEach, pick = U.pick, stableSort = U.stableSort;
+/* *
+ *
+ *  Functions
+ *
+ * */
+/**
+ * Create annotation simple form.
+ * It contains fields with param names.
+ * @private
+ * @param {Highcharts.Chart} chart
+ * Chart
+ * @param {Object} options
+ * Options
+ * @param {Function} callback
+ * On click callback
+ * @param {boolean} [isInit]
+ * If it is a form declared for init annotation
+ */
+function addForm(chart, options, callback, isInit) {
+    if (!chart) {
+        return;
+    }
+    var popupDiv = this.container, lang = this.lang;
+    // create title of annotations
+    var lhsCol = createElement('h2', {
+        className: 'highcharts-popup-main-title'
+    }, void 0, popupDiv);
+    lhsCol.appendChild(doc.createTextNode(lang[options.langKey] || options.langKey || ''));
+    // left column
+    lhsCol = createElement('div', {
+        className: ('highcharts-popup-lhs-col highcharts-popup-lhs-full')
+    }, void 0, popupDiv);
+    var bottomRow = createElement('div', {
+        className: 'highcharts-popup-bottom-row'
+    }, void 0, popupDiv);
+    addFormFields.call(this, lhsCol, chart, '', options, [], true);
+    this.addButton(bottomRow, isInit ?
+        (lang.addButton || 'add') :
+        (lang.saveButton || 'save'), isInit ? 'add' : 'save', popupDiv, callback);
+}
+/**
+ * Create annotation simple form. It contains two buttons
+ * (edit / remove) and text label.
+ * @private
+ * @param {Highcharts.Chart} - chart
+ * @param {Highcharts.AnnotationsOptions} - options
+ * @param {Function} - on click callback
+ */
+function addToolbar(chart, options, callback) {
+    var _this = this;
+    var lang = this.lang, popupDiv = this.container, showForm = this.showForm, toolbarClass = 'highcharts-annotation-toolbar';
+    // set small size
+    if (popupDiv.className.indexOf(toolbarClass) === -1) {
+        popupDiv.className += ' ' + toolbarClass;
+    }
+    // set position
+    if (chart) {
+        popupDiv.style.top = chart.plotTop + 10 + 'px';
+    }
+    // create label
+    createElement('span', void 0, void 0, popupDiv).appendChild(doc.createTextNode(pick(
+    // Advanced annotations:
+    lang[options.langKey] || options.langKey, 
+    // Basic shapes:
+    options.shapes && options.shapes[0].type, '')));
+    // add buttons
+    var button = this.addButton(popupDiv, lang.removeButton || 'remove', 'remove', popupDiv, callback);
+    button.className += ' highcharts-annotation-remove-button';
+    button.style['background-image'] = 'url(' +
+        this.iconsURL + 'destroy.svg)';
+    button = this.addButton(popupDiv, lang.editButton || 'edit', 'edit', popupDiv, function () {
+        showForm.call(_this, 'annotation-edit', chart, options, callback);
+    });
+    button.className += ' highcharts-annotation-edit-button';
+    button.style['background-image'] = 'url(' +
+        this.iconsURL + 'edit.svg)';
+}
+/**
+ * Create annotation's form fields.
+ * @private
+ * @param {Highcharts.HTMLDOMElement} parentDiv
+ * Div where inputs are placed
+ * @param {Highcharts.Chart} chart
+ * Chart
+ * @param {string} parentNode
+ * Name of parent to create chain of names
+ * @param {Highcharts.AnnotationsOptions} options
+ * Options
+ * @param {Array<unknown>} storage
+ * Array where all items are stored
+ * @param {boolean} [isRoot]
+ * Recursive flag for root
+ */
+function addFormFields(parentDiv, chart, parentNode, options, storage, isRoot) {
+    var _this = this;
+    if (!chart) {
+        return;
+    }
+    var addInput = this.addInput, lang = this.lang;
+    var parentFullName, titleName;
+    objectEach(options, function (value, option) {
+        // create name like params.styles.fontSize
+        parentFullName = parentNode !== '' ? parentNode + '.' + option : option;
+        if (isObject(value)) {
+            if (
+            // value is object of options
+            !isArray(value) ||
+                // array of objects with params. i.e labels in Fibonacci
+                (isArray(value) && isObject(value[0]))) {
+                titleName = lang[option] || option;
+                if (!titleName.match(/\d/g)) {
+                    storage.push([
+                        true,
+                        titleName,
+                        parentDiv
+                    ]);
+                }
+                addFormFields.call(_this, parentDiv, chart, parentFullName, value, storage, false);
+            }
+            else {
+                storage.push([
+                    _this,
+                    parentFullName,
+                    'annotation',
+                    parentDiv,
+                    value
+                ]);
+            }
+        }
+    });
+    if (isRoot) {
+        stableSort(storage, function (a) { return (a[1].match(/format/g) ? -1 : 1); });
+        if (isFirefox) {
+            storage.reverse(); // (#14691)
+        }
+        storage.forEach(function (genInput) {
+            if (genInput[0] === true) {
+                createElement('span', {
+                    className: 'highcharts-annotation-title'
+                }, void 0, genInput[2]).appendChild(doc.createTextNode(genInput[1]));
+            }
+            else {
+                genInput[4] = {
+                    value: genInput[4][0],
+                    type: genInput[4][1]
+                };
+                addInput.apply(genInput[0], genInput.splice(1));
+            }
+        });
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+var PopupAnnotations = {
+    addForm: addForm,
+    addToolbar: addToolbar
+};
+export default PopupAnnotations;

package/es-modules/Extensions/Annotations/Popup/PopupComposition.js

@@ -0,0 +1,81 @@
+/* *
+ *
+ *  Popup generator for Stock tools
+ *
+ *  (c) 2009-2021 Sebastian Bochan
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import Popup from './Popup.js';
+import U from '../../../Core/Utilities.js';
+var addEvent = U.addEvent, wrap = U.wrap;
+/* *
+ *
+ *  Constants
+ *
+ * */
+var composedClasses = [];
+/* *
+ *
+ *  Functions
+ *
+ * */
+/**
+ * @private
+ */
+function compose(NagivationBindingsClass, PointerClass) {
+    if (composedClasses.indexOf(NagivationBindingsClass) === -1) {
+        composedClasses.push(NagivationBindingsClass);
+        addEvent(NagivationBindingsClass, 'closePopup', onNavigationBindingsClosePopup);
+        addEvent(NagivationBindingsClass, 'showPopup', onNavigationBindingsShowPopup);
+    }
+    if (composedClasses.indexOf(PointerClass) === -1) {
+        composedClasses.push(PointerClass);
+        wrap(PointerClass.prototype, 'onContainerMouseDown', wrapPointerOnContainerMouserDown);
+    }
+}
+/**
+ * @private
+ */
+function onNavigationBindingsClosePopup() {
+    if (this.popup) {
+        this.popup.closePopup();
+    }
+}
+/**
+ * @private
+ */
+function onNavigationBindingsShowPopup(config) {
+    if (!this.popup) {
+        // Add popup to main container
+        this.popup = new Popup(this.chart.container, (this.chart.options.navigation.iconsURL ||
+            (this.chart.options.stockTools &&
+                this.chart.options.stockTools.gui.iconsURL) ||
+            'https://code.highcharts.com/10.2.1/gfx/stock-icons/'), this.chart);
+    }
+    this.popup.showForm(config.formType, this.chart, config.options, config.onSubmit);
+}
+/**
+ * onContainerMouseDown blocks internal popup events, due to e.preventDefault.
+ * Related issue #4606
+ * @private
+ */
+function wrapPointerOnContainerMouserDown(proceed, e) {
+    // elements is not in popup
+    if (!this.inClass(e.target, 'highcharts-popup')) {
+        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+var PopupComposition = {
+    compose: compose
+};
+export default PopupComposition;