highcharts
Version:
JavaScript charting framework
1,104 lines (1,100 loc) • 238 kB
JavaScript
/**
* @license Highstock JS v11.3.0 (2024-01-10)
*
* Advanced Highcharts Stock tools
*
* (c) 2010-2024 Highsoft AS
* Author: Torstein Honsi
*
* License: www.highcharts.com/license
*/
(function (factory) {
if (typeof module === 'object' && module.exports) {
factory['default'] = factory;
module.exports = factory;
} else if (typeof define === 'function' && define.amd) {
define('highcharts/modules/stock-tools', ['highcharts', 'highcharts/modules/stock'], function (Highcharts) {
factory(Highcharts);
factory.Highcharts = Highcharts;
return factory;
});
} else {
factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined);
}
}(function (Highcharts) {
'use strict';
var _modules = Highcharts ? Highcharts._modules : {};
function _registerModule(obj, path, args, fn) {
if (!obj.hasOwnProperty(path)) {
obj[path] = fn.apply(null, args);
if (typeof CustomEvent === 'function') {
window.dispatchEvent(new CustomEvent(
'HighchartsModuleLoaded',
{ detail: { path: path, module: obj[path] } }
));
}
}
}
_registerModule(_modules, 'Core/Chart/ChartNavigationComposition.js', [], function () {
/**
*
* (c) 2010-2024 Paweł Fus
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
/* *
*
* Composition
*
* */
var ChartNavigationComposition;
(function (ChartNavigationComposition) {
/* *
*
* Declarations
*
* */
/* *
*
* Functions
*
* */
/* eslint-disable valid-jsdoc */
/**
* @private
*/
function compose(chart) {
if (!chart.navigation) {
chart.navigation = new Additions(chart);
}
return chart;
}
ChartNavigationComposition.compose = compose;
/* *
*
* Class
*
* */
/**
* Initializes `chart.navigation` object which delegates `update()` methods
* to all other common classes (used in exporting and navigationBindings).
* @private
*/
class Additions {
/* *
*
* Constructor
*
* */
constructor(chart) {
this.updates = [];
this.chart = chart;
}
/* *
*
* Functions
*
* */
/**
* Registers an `update()` method in the `chart.navigation` object.
*
* @private
* @param {UpdateFunction} updateFn
* The `update()` method that will be called in `chart.update()`.
*/
addUpdate(updateFn) {
this.chart.navigation.updates.push(updateFn);
}
/**
* @private
*/
update(options, redraw) {
this.updates.forEach((updateFn) => {
updateFn.call(this.chart, options, redraw);
});
}
}
ChartNavigationComposition.Additions = Additions;
})(ChartNavigationComposition || (ChartNavigationComposition = {}));
/* *
*
* Default Export
*
* */
return ChartNavigationComposition;
});
_registerModule(_modules, 'Extensions/Annotations/NavigationBindingsDefaults.js', [_modules['Extensions/Annotations/NavigationBindingsUtilities.js'], _modules['Core/Utilities.js']], function (NBU, U) {
/* *
*
* (c) 2009-2024 Highsoft, Black Label
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
const { getAssignedAxis } = NBU;
const { isNumber, merge } = U;
/* *
*
* Constants
*
* */
/**
* @optionparent lang
*/
const lang = {
/**
* Configure the Popup strings in the chart. Requires the
* `annotations.js` or `annotations-advanced.src.js` module to be
* loaded.
* @since 7.0.0
* @product highcharts highstock
*/
navigation: {
/**
* Translations for all field names used in popup.
*
* @product highcharts highstock
*/
popup: {
simpleShapes: 'Simple shapes',
lines: 'Lines',
circle: 'Circle',
ellipse: 'Ellipse',
rectangle: 'Rectangle',
label: 'Label',
shapeOptions: 'Shape options',
typeOptions: 'Details',
fill: 'Fill',
format: 'Text',
strokeWidth: 'Line width',
stroke: 'Line color',
title: 'Title',
name: 'Name',
labelOptions: 'Label options',
labels: 'Labels',
backgroundColor: 'Background color',
backgroundColors: 'Background colors',
borderColor: 'Border color',
borderRadius: 'Border radius',
borderWidth: 'Border width',
style: 'Style',
padding: 'Padding',
fontSize: 'Font size',
color: 'Color',
height: 'Height',
shapes: 'Shape options'
}
}
};
/**
* @optionparent navigation
* @product highcharts highstock
*/
const navigation = {
/**
* A CSS class name where all bindings will be attached to. Multiple
* charts on the same page should have separate class names to prevent
* duplicating events.
*
* Default value of versions < 7.0.4 `highcharts-bindings-wrapper`
*
* @since 7.0.0
* @type {string}
*/
bindingsClassName: 'highcharts-bindings-container',
/**
* Bindings definitions for custom HTML buttons. Each binding implements
* simple event-driven interface:
*
* - `className`: classname used to bind event to
*
* - `init`: initial event, fired on button click
*
* - `start`: fired on first click on a chart
*
* - `steps`: array of sequential events fired one after another on each
* of users clicks
*
* - `end`: last event to be called after last step event
*
* @type {Highcharts.Dictionary<Highcharts.NavigationBindingsOptionsObject>|*}
*
* @sample {highstock} stock/stocktools/stocktools-thresholds
* Custom bindings
* @sample {highcharts} highcharts/annotations/bindings/
* Simple binding
* @sample {highcharts} highcharts/annotations/bindings-custom-annotation/
* Custom annotation binding
*
* @since 7.0.0
* @requires modules/annotations
* @product highcharts highstock
*/
bindings: {
/**
* A circle annotation bindings. Includes `start` and one event in
* `steps` array.
*
* @type {Highcharts.NavigationBindingsOptionsObject}
* @default {"className": "highcharts-circle-annotation", "start": function() {}, "steps": [function() {}], "annotationsOptions": {}}
*/
circleAnnotation: {
/** @ignore-option */
className: 'highcharts-circle-annotation',
/** @ignore-option */
start: function (e) {
const coords = this.chart.pointer.getCoordinates(e), coordsX = getAssignedAxis(coords.xAxis), coordsY = getAssignedAxis(coords.yAxis), navigation = this.chart.options.navigation;
// Exit if clicked out of axes area
if (!coordsX || !coordsY) {
return;
}
return this.chart.addAnnotation(merge({
langKey: 'circle',
type: 'basicAnnotation',
shapes: [{
type: 'circle',
point: {
x: coordsX.value,
y: coordsY.value,
xAxis: coordsX.axis.index,
yAxis: coordsY.axis.index
},
r: 5
}]
}, navigation.annotationsOptions, navigation.bindings.circleAnnotation
.annotationsOptions));
},
/** @ignore-option */
steps: [
function (e, annotation) {
const shapes = annotation.options.shapes, mockPointOpts = ((shapes && shapes[0] && shapes[0].point) ||
{});
let distance;
if (isNumber(mockPointOpts.xAxis) &&
isNumber(mockPointOpts.yAxis)) {
const inverted = this.chart.inverted, x = this.chart.xAxis[mockPointOpts.xAxis]
.toPixels(mockPointOpts.x), y = this.chart.yAxis[mockPointOpts.yAxis]
.toPixels(mockPointOpts.y);
distance = Math.max(Math.sqrt(Math.pow(inverted ? y - e.chartX : x - e.chartX, 2) +
Math.pow(inverted ? x - e.chartY : y - e.chartY, 2)), 5);
}
annotation.update({
shapes: [{
r: distance
}]
});
}
]
},
/**
* A ellipse annotation bindings. Includes `start` and two events in
* `steps` array. First updates the second point, responsible for a
* rx width, and second updates the ry width.
*
* @type {Highcharts.NavigationBindingsOptionsObject}
* @default {"className": "highcharts-ellipse-annotation", "start": function() {}, "steps": [function() {}], "annotationsOptions": {}}
*/
ellipseAnnotation: {
className: 'highcharts-ellipse-annotation',
start: function (e) {
const coords = this.chart.pointer.getCoordinates(e), coordsX = getAssignedAxis(coords.xAxis), coordsY = getAssignedAxis(coords.yAxis), navigation = this.chart.options.navigation;
if (!coordsX || !coordsY) {
return;
}
return this.chart.addAnnotation(merge({
langKey: 'ellipse',
type: 'basicAnnotation',
shapes: [
{
type: 'ellipse',
xAxis: coordsX.axis.index,
yAxis: coordsY.axis.index,
points: [{
x: coordsX.value,
y: coordsY.value
}, {
x: coordsX.value,
y: coordsY.value
}],
ry: 1
}
]
}, navigation.annotationsOptions, navigation.bindings.ellipseAnnotation
.annotationOptions));
},
steps: [
function (e, annotation) {
const target = annotation.shapes[0], position = target.getAbsolutePosition(target.points[1]);
target.translatePoint(e.chartX - position.x, e.chartY - position.y, 1);
target.redraw(false);
},
function (e, annotation) {
const target = annotation.shapes[0], position = target.getAbsolutePosition(target.points[0]), position2 = target.getAbsolutePosition(target.points[1]), newR = target.getDistanceFromLine(position, position2, e.chartX, e.chartY), yAxis = target.getYAxis(), newRY = Math.abs(yAxis.toValue(0) - yAxis.toValue(newR));
target.setYRadius(newRY);
target.redraw(false);
}
]
},
/**
* A rectangle annotation bindings. Includes `start` and one event
* in `steps` array.
*
* @type {Highcharts.NavigationBindingsOptionsObject}
* @default {"className": "highcharts-rectangle-annotation", "start": function() {}, "steps": [function() {}], "annotationsOptions": {}}
*/
rectangleAnnotation: {
/** @ignore-option */
className: 'highcharts-rectangle-annotation',
/** @ignore-option */
start: function (e) {
const coords = this.chart.pointer.getCoordinates(e), coordsX = getAssignedAxis(coords.xAxis), coordsY = getAssignedAxis(coords.yAxis);
// Exit if clicked out of axes area
if (!coordsX || !coordsY) {
return;
}
const x = coordsX.value, y = coordsY.value, xAxis = coordsX.axis.index, yAxis = coordsY.axis.index, navigation = this.chart.options.navigation;
return this.chart.addAnnotation(merge({
langKey: 'rectangle',
type: 'basicAnnotation',
shapes: [{
type: 'path',
points: [
{ xAxis, yAxis, x, y },
{ xAxis, yAxis, x, y },
{ xAxis, yAxis, x, y },
{ xAxis, yAxis, x, y },
{ command: 'Z' }
]
}]
}, navigation
.annotationsOptions, navigation
.bindings
.rectangleAnnotation
.annotationsOptions));
},
/** @ignore-option */
steps: [
function (e, annotation) {
const shapes = annotation.options.shapes, points = ((shapes && shapes[0] && shapes[0].points) ||
[]), coords = this.chart.pointer.getCoordinates(e), coordsX = getAssignedAxis(coords.xAxis), coordsY = getAssignedAxis(coords.yAxis);
if (coordsX && coordsY) {
const x = coordsX.value, y = coordsY.value;
// Top right point
points[1].x = x;
// Bottom right point (cursor position)
points[2].x = x;
points[2].y = y;
// Bottom left
points[3].y = y;
annotation.update({
shapes: [{
points: points
}]
});
}
}
]
},
/**
* A label annotation bindings. Includes `start` event only.
*
* @type {Highcharts.NavigationBindingsOptionsObject}
* @default {"className": "highcharts-label-annotation", "start": function() {}, "steps": [function() {}], "annotationsOptions": {}}
*/
labelAnnotation: {
/** @ignore-option */
className: 'highcharts-label-annotation',
/** @ignore-option */
start: function (e) {
const coords = this.chart.pointer.getCoordinates(e), coordsX = getAssignedAxis(coords.xAxis), coordsY = getAssignedAxis(coords.yAxis), navigation = this.chart.options.navigation;
// Exit if clicked out of axes area
if (!coordsX || !coordsY) {
return;
}
return this.chart.addAnnotation(merge({
langKey: 'label',
type: 'basicAnnotation',
labelOptions: {
format: '{y:.2f}',
overflow: 'none',
crop: true
},
labels: [{
point: {
xAxis: coordsX.axis.index,
yAxis: coordsY.axis.index,
x: coordsX.value,
y: coordsY.value
}
}]
}, navigation
.annotationsOptions, navigation
.bindings
.labelAnnotation
.annotationsOptions));
}
}
},
/**
* Path where Highcharts will look for icons. Change this to use icons
* from a different server.
*
* @type {string}
* @default https://code.highcharts.com/11.3.0/gfx/stock-icons/
* @since 7.1.3
* @apioption navigation.iconsURL
*/
/**
* A `showPopup` event. Fired when selecting for example an annotation.
*
* @type {Function}
* @apioption navigation.events.showPopup
*/
/**
* A `closePopup` event. Fired when Popup should be hidden, for example
* when clicking on an annotation again.
*
* @type {Function}
* @apioption navigation.events.closePopup
*/
/**
* Event fired on a button click.
*
* @type {Function}
* @sample highcharts/annotations/gui/
* Change icon in a dropddown on event
* @sample highcharts/annotations/gui-buttons/
* Change button class on event
* @apioption navigation.events.selectButton
*/
/**
* Event fired when button state should change, for example after
* adding an annotation.
*
* @type {Function}
* @sample highcharts/annotations/gui/
* Change icon in a dropddown on event
* @sample highcharts/annotations/gui-buttons/
* Change button class on event
* @apioption navigation.events.deselectButton
*/
/**
* Events to communicate between Stock Tools and custom GUI.
*
* @since 7.0.0
* @product highcharts highstock
* @optionparent navigation.events
*/
events: {},
/**
* Additional options to be merged into all annotations.
*
* @sample stock/stocktools/navigation-annotation-options
* Set red color of all line annotations
*
* @type {Highcharts.AnnotationsOptions}
* @extends annotations
* @exclude crookedLine, elliottWave, fibonacci, infinityLine,
* measure, pitchfork, tunnel, verticalLine, basicAnnotation
* @requires modules/annotations
* @apioption navigation.annotationsOptions
*/
annotationsOptions: {
animation: {
defer: 0
}
}
};
/* *
*
* Default Export
*
* */
const NavigationBindingDefaults = {
lang,
navigation
};
return NavigationBindingDefaults;
});
_registerModule(_modules, 'Extensions/Annotations/NavigationBindings.js', [_modules['Core/Chart/ChartNavigationComposition.js'], _modules['Core/Defaults.js'], _modules['Core/Templating.js'], _modules['Core/Globals.js'], _modules['Extensions/Annotations/NavigationBindingsDefaults.js'], _modules['Extensions/Annotations/NavigationBindingsUtilities.js'], _modules['Core/Utilities.js']], function (ChartNavigationComposition, D, F, H, NavigationBindingDefaults, NBU, U) {
/* *
*
* (c) 2009-2024 Highsoft, Black Label
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* */
const { setOptions } = D;
const { format } = F;
const { composed, doc, win } = H;
const { getFieldType } = NBU;
const { addEvent, attr, defined, fireEvent, isArray, isFunction, isNumber, isObject, merge, objectEach, pick, pushUnique } = U;
/* *
*
* Functions
*
* */
/**
* IE 9-11 polyfill for Element.closest():
* @private
*/
function closestPolyfill(el, s) {
const ElementProto = win.Element.prototype, elementMatches = ElementProto.matches ||
ElementProto.msMatchesSelector ||
ElementProto.webkitMatchesSelector;
let ret = null;
if (ElementProto.closest) {
ret = ElementProto.closest.call(el, s);
}
else {
do {
if (elementMatches.call(el, s)) {
return el;
}
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
}
return ret;
}
/**
* @private
*/
function onAnnotationRemove() {
if (this.chart.navigationBindings) {
this.chart.navigationBindings.deselectAnnotation();
}
}
/**
* @private
*/
function onChartDestroy() {
if (this.navigationBindings) {
this.navigationBindings.destroy();
}
}
/**
* @private
*/
function onChartLoad() {
const options = this.options;
if (options && options.navigation && options.navigation.bindings) {
this.navigationBindings = new NavigationBindings(this, options.navigation);
this.navigationBindings.initEvents();
this.navigationBindings.initUpdate();
}
}
/**
* @private
*/
function onChartRender() {
const navigationBindings = this.navigationBindings, disabledClassName = 'highcharts-disabled-btn';
if (this && navigationBindings) {
// Check if the buttons should be enabled/disabled based on
// visible series.
let buttonsEnabled = false;
this.series.forEach((series) => {
if (!series.options.isInternal && series.visible) {
buttonsEnabled = true;
}
});
if (this.navigationBindings &&
this.navigationBindings.container &&
this.navigationBindings.container[0]) {
const container = this.navigationBindings.container[0];
objectEach(navigationBindings.boundClassNames, (value, key) => {
// Get the HTML element coresponding to the className taken
// from StockToolsBindings.
const buttonNode = container.querySelectorAll('.' + key);
if (buttonNode) {
for (let i = 0; i < buttonNode.length; i++) {
const button = buttonNode[i], cls = button.className;
if (value.noDataState === 'normal') {
// If button has noDataState: 'normal', and has
// disabledClassName, remove this className.
if (cls.indexOf(disabledClassName) !== -1) {
button.classList.remove(disabledClassName);
}
}
else if (!buttonsEnabled) {
if (cls.indexOf(disabledClassName) === -1) {
button.className += ' ' + disabledClassName;
}
}
else {
// Enable all buttons by deleting the className.
if (cls.indexOf(disabledClassName) !== -1) {
button.classList.remove(disabledClassName);
}
}
}
}
});
}
}
}
/**
* @private
*/
function onNavigationBindingsClosePopup() {
this.deselectAnnotation();
}
/**
* @private
*/
function onNavigationBindingsDeselectButton() {
this.selectedButtonElement = null;
}
/**
* Show edit-annotation form:
* @private
*/
function selectableAnnotation(annotationType) {
const originalClick = annotationType.prototype.defaultOptions.events &&
annotationType.prototype.defaultOptions.events.click;
/**
* Select and show popup
* @private
*/
function selectAndShowPopup(eventArguments) {
const annotation = this, navigation = annotation.chart.navigationBindings, prevAnnotation = navigation.activeAnnotation;
if (originalClick) {
originalClick.call(annotation, eventArguments);
}
if (prevAnnotation !== annotation) {
// Select current:
navigation.deselectAnnotation();
navigation.activeAnnotation = annotation;
annotation.setControlPointsVisibility(true);
fireEvent(navigation, 'showPopup', {
annotation: annotation,
formType: 'annotation-toolbar',
options: navigation.annotationToFields(annotation),
onSubmit: function (data) {
if (data.actionType === 'remove') {
navigation.activeAnnotation = false;
navigation.chart.removeAnnotation(annotation);
}
else {
const config = {};
navigation.fieldsToOptions(data.fields, config);
navigation.deselectAnnotation();
const typeOptions = config.typeOptions;
if (annotation.options.type === 'measure') {
// Manually disable crooshars according to
// stroke width of the shape:
typeOptions.crosshairY.enabled = (typeOptions.crosshairY
.strokeWidth !== 0);
typeOptions.crosshairX.enabled = (typeOptions.crosshairX
.strokeWidth !== 0);
}
annotation.update(config);
}
}
});
}
else {
// Deselect current:
fireEvent(navigation, 'closePopup');
}
// Let bubble event to chart.click:
eventArguments.activeAnnotation = true;
}
// #18276, show popup on touchend, but not on touchmove
let touchStartX, touchStartY;
function saveCoords(e) {
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
}
function checkForTouchmove(e) {
const hasMoved = touchStartX ? Math.sqrt(Math.pow(touchStartX - e.changedTouches[0].clientX, 2) +
Math.pow(touchStartY - e.changedTouches[0].clientY, 2)) >= 4 : false;
if (!hasMoved) {
selectAndShowPopup.call(this, e);
}
}
merge(true, annotationType.prototype.defaultOptions.events, {
click: selectAndShowPopup,
touchstart: saveCoords,
touchend: checkForTouchmove
});
}
/* *
*
* Class
*
* */
/**
* @private
*/
class NavigationBindings {
/* *
*
* Static Functions
*
* */
static compose(AnnotationClass, ChartClass) {
if (pushUnique(composed, this.compose)) {
addEvent(AnnotationClass, 'remove', onAnnotationRemove);
// Basic shapes:
selectableAnnotation(AnnotationClass);
// Advanced annotations:
objectEach(AnnotationClass.types, (annotationType) => {
selectableAnnotation(annotationType);
});
addEvent(ChartClass, 'destroy', onChartDestroy);
addEvent(ChartClass, 'load', onChartLoad);
addEvent(ChartClass, 'render', onChartRender);
addEvent(NavigationBindings, 'closePopup', onNavigationBindingsClosePopup);
addEvent(NavigationBindings, 'deselectButton', onNavigationBindingsDeselectButton);
setOptions(NavigationBindingDefaults);
}
}
/* *
*
* Constructor
*
* */
constructor(chart, options) {
this.boundClassNames = void 0;
this.chart = chart;
this.options = options;
this.eventsToUnbind = [];
this.container =
this.chart.container.getElementsByClassName(this.options.bindingsClassName || '');
if (!this.container.length) {
this.container = doc.getElementsByClassName(this.options.bindingsClassName || '');
}
}
/* *
*
* Functions
*
* */
/**
* Initi all events conencted to NavigationBindings.
*
* @private
* @function Highcharts.NavigationBindings#initEvents
*/
initEvents() {
const navigation = this, chart = navigation.chart, bindingsContainer = navigation.container, options = navigation.options;
// Shorthand object for getting events for buttons:
navigation.boundClassNames = {};
objectEach((options.bindings || {}), (value) => {
navigation.boundClassNames[value.className] = value;
});
// Handle multiple containers with the same class names:
[].forEach.call(bindingsContainer, (subContainer) => {
navigation.eventsToUnbind.push(addEvent(subContainer, 'click', (event) => {
const bindings = navigation.getButtonEvents(subContainer, event);
if (bindings &&
(!bindings.button.classList
.contains('highcharts-disabled-btn'))) {
navigation.bindingsButtonClick(bindings.button, bindings.events, event);
}
}));
});
objectEach((options.events || {}), (callback, eventName) => {
if (isFunction(callback)) {
navigation.eventsToUnbind.push(addEvent(navigation, eventName, callback, { passive: false }));
}
});
navigation.eventsToUnbind.push(addEvent(chart.container, 'click', function (e) {
if (!chart.cancelClick &&
chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop, {
visiblePlotOnly: true
})) {
navigation.bindingsChartClick(this, e);
}
}));
navigation.eventsToUnbind.push(addEvent(chart.container, H.isTouchDevice ? 'touchmove' : 'mousemove', function (e) {
navigation.bindingsContainerMouseMove(this, e);
}, H.isTouchDevice ? { passive: false } : void 0));
}
/**
* Common chart.update() delegation, shared between bindings and exporting.
*
* @private
* @function Highcharts.NavigationBindings#initUpdate
*/
initUpdate() {
const navigation = this;
ChartNavigationComposition
.compose(this.chart).navigation
.addUpdate((options) => {
navigation.update(options);
});
}
/**
* Hook for click on a button, method selcts/unselects buttons,
* then calls `bindings.init` callback.
*
* @private
* @function Highcharts.NavigationBindings#bindingsButtonClick
*
* @param {Highcharts.HTMLDOMElement} [button]
* Clicked button
*
* @param {Object} events
* Events passed down from bindings (`init`, `start`, `step`, `end`)
*
* @param {Highcharts.PointerEventObject} clickEvent
* Browser's click event
*/
bindingsButtonClick(button, events, clickEvent) {
const navigation = this, chart = navigation.chart, svgContainer = chart.renderer.boxWrapper;
let shouldEventBeFired = true;
if (navigation.selectedButtonElement) {
if (navigation.selectedButtonElement.classList === button.classList) {
shouldEventBeFired = false;
}
fireEvent(navigation, 'deselectButton', { button: navigation.selectedButtonElement });
if (navigation.nextEvent) {
// Remove in-progress annotations adders:
if (navigation.currentUserDetails &&
navigation.currentUserDetails.coll === 'annotations') {
chart.removeAnnotation(navigation.currentUserDetails);
}
navigation.mouseMoveEvent = navigation.nextEvent = false;
}
}
if (shouldEventBeFired) {
navigation.selectedButton = events;
navigation.selectedButtonElement = button;
fireEvent(navigation, 'selectButton', { button: button });
// Call "init" event, for example to open modal window
if (events.init) {
events.init.call(navigation, button, clickEvent);
}
if (events.start || events.steps) {
chart.renderer.boxWrapper.addClass('highcharts-draw-mode');
}
}
else {
chart.stockTools &&
chart.stockTools.toggleButtonActiveClass(button);
svgContainer.removeClass('highcharts-draw-mode');
navigation.nextEvent = false;
navigation.mouseMoveEvent = false;
navigation.selectedButton = null;
}
}
/**
* Hook for click on a chart, first click on a chart calls `start` event,
* then on all subsequent clicks iterate over `steps` array.
* When finished, calls `end` event.
*
* @private
* @function Highcharts.NavigationBindings#bindingsChartClick
*
* @param {Highcharts.Chart} chart
* Chart that click was performed on.
*
* @param {Highcharts.PointerEventObject} clickEvent
* Browser's click event.
*/
bindingsChartClick(chart, clickEvent) {
chart = this.chart;
const navigation = this, activeAnnotation = navigation.activeAnnotation, selectedButton = navigation.selectedButton, svgContainer = chart.renderer.boxWrapper;
if (activeAnnotation) {
// Click outside popups, should close them and deselect the
// annotation
if (!activeAnnotation.cancelClick && // #15729
!clickEvent.activeAnnotation &&
// Element could be removed in the child action, e.g. button
clickEvent.target.parentNode &&
// TO DO: Polyfill for IE11?
!closestPolyfill(clickEvent.target, '.highcharts-popup')) {
fireEvent(navigation, 'closePopup');
}
else if (activeAnnotation.cancelClick) {
// Reset cancelClick after the other event handlers have run
setTimeout(() => {
activeAnnotation.cancelClick = false;
}, 0);
}
}
if (!selectedButton || !selectedButton.start) {
return;
}
if (!navigation.nextEvent) {
// Call init method:
navigation.currentUserDetails = selectedButton.start.call(navigation, clickEvent);
// If steps exists (e.g. Annotations), bind them:
if (navigation.currentUserDetails && selectedButton.steps) {
navigation.stepIndex = 0;
navigation.steps = true;
navigation.mouseMoveEvent = navigation.nextEvent =
selectedButton.steps[navigation.stepIndex];
}
else {
fireEvent(navigation, 'deselectButton', { button: navigation.selectedButtonElement });
svgContainer.removeClass('highcharts-draw-mode');
navigation.steps = false;
navigation.selectedButton = null;
// First click is also the last one:
if (selectedButton.end) {
selectedButton.end.call(navigation, clickEvent, navigation.currentUserDetails);
}
}
}
else {
navigation.nextEvent(clickEvent, navigation.currentUserDetails);
if (navigation.steps) {
navigation.stepIndex++;
if (selectedButton.steps[navigation.stepIndex]) {
// If we have more steps, bind them one by one:
navigation.mouseMoveEvent = navigation.nextEvent = selectedButton.steps[navigation.stepIndex];
}
else {
fireEvent(navigation, 'deselectButton', { button: navigation.selectedButtonElement });
svgContainer.removeClass('highcharts-draw-mode');
// That was the last step, call end():
if (selectedButton.end) {
selectedButton.end.call(navigation, clickEvent, navigation.currentUserDetails);
}
navigation.nextEvent = false;
navigation.mouseMoveEvent = false;
navigation.selectedButton = null;
}
}
}
}
/**
* Hook for mouse move on a chart's container. It calls current step.
*
* @private
* @function Highcharts.NavigationBindings#bindingsContainerMouseMove
*
* @param {Highcharts.HTMLDOMElement} container
* Chart's container.
*
* @param {global.Event} moveEvent
* Browser's move event.
*/
bindingsContainerMouseMove(_container, moveEvent) {
if (this.mouseMoveEvent) {
this.mouseMoveEvent(moveEvent, this.currentUserDetails);
}
}
/**
* Translate fields (e.g. `params.period` or `marker.styles.color`) to
* Highcharts options object (e.g. `{ params: { period } }`).
*
* @private
* @function Highcharts.NavigationBindings#fieldsToOptions<T>
*
* @param {Highcharts.Dictionary<string>} fields
* Fields from popup form.
*
* @param {T} config
* Default config to be modified.
*
* @return {T}
* Modified config
*/
fieldsToOptions(fields, config) {
objectEach(fields, (value, field) => {
const parsedValue = parseFloat(value), path = field.split('.'), pathLength = path.length - 1;
// If it's a number (not "format" options), parse it:
if (isNumber(parsedValue) &&
!value.match(/px|em/g) &&
!field.match(/format/g)) {
value = parsedValue;
}
// Remove values like 0
if (value !== 'undefined') {
let parent = config;
path.forEach((name, index) => {
const nextName = pick(path[index + 1], '');
if (pathLength === index) {
// Last index, put value:
parent[name] = value;
}
else if (!parent[name]) {
// Create middle property:
parent[name] = nextName.match(/\d/g) ? [] : {};
parent = parent[name];
}
else {
// Jump into next property
parent = parent[name];
}
});
}
});
return config;
}
/**
* Shorthand method to deselect an annotation.
*
* @function Highcharts.NavigationBindings#deselectAnnotation
*/
deselectAnnotation() {
if (this.activeAnnotation) {
this.activeAnnotation.setControlPointsVisibility(false);
this.activeAnnotation = false;
}
}
/**
* Generates API config for popup in the same format as options for
* Annotation object.
*
* @function Highcharts.NavigationBindings#annotationToFields
*
* @param {Highcharts.Annotation} annotation
* Annotations object
*
* @return {Highcharts.Dictionary<string>}
* Annotation options to be displayed in popup box
*/
annotationToFields(annotation) {
const options = annotation.options, editables = NavigationBindings.annotationsEditable, nestedEditables = editables.nestedOptions, type = pick(options.type, options.shapes && options.shapes[0] &&
options.shapes[0].type, options.labels && options.labels[0] &&
options.labels[0].type, 'label'), nonEditables = NavigationBindings.annotationsNonEditable[options.langKey] || [], visualOptions = {
langKey: options.langKey,
type: type
};
/**
* Nested options traversing. Method goes down to the options and copies
* allowed options (with values) to new object, which is last parameter:
* "parent".
*
* @private
*
* @param {*} option
* Atomic type or object/array
*
* @param {string} key
* Option name, for example "visible" or "x", "y"
*
* @param {Object} parentEditables
* Editables from NavigationBindings.annotationsEditable
*
* @param {Object} parent
* Where new options will be assigned
*/
function traverse(option, key, parentEditables, parent, parentKey) {
let nextParent;
if (parentEditables &&
defined(option) &&
nonEditables.indexOf(key) === -1 &&
((parentEditables.indexOf &&
parentEditables.indexOf(key)) >= 0 ||
parentEditables[key] || // nested array
parentEditables === true // simple array
)) {
// Roots:
if (isArray(option)) {
parent[key] = [];
option.forEach((arrayOption, i) => {
if (!isObject(arrayOption)) {
// Simple arrays, e.g. [String, Number, Boolean]
traverse(arrayOption, 0, nestedEditables[key], parent[key], key);