903 lines
30 KiB
JavaScript
903 lines
30 KiB
JavaScript
/* *
|
|
*
|
|
* Highcharts Breadcrumbs module
|
|
*
|
|
* Authors: Grzegorz Blachlinski, Karol Kolodziej
|
|
*
|
|
* License: www.highcharts.com/license
|
|
*
|
|
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
|
*
|
|
* */
|
|
'use strict';
|
|
import Chart from '../Core/Chart/Chart.js';
|
|
import H from '../Core/Globals.js';
|
|
import D from '../Core/DefaultOptions.js';
|
|
var defaultOptions = D.defaultOptions;
|
|
import U from '../Core/Utilities.js';
|
|
import F from '../Core/FormatUtilities.js';
|
|
var format = F.format;
|
|
var addEvent = U.addEvent, objectEach = U.objectEach, extend = U.extend, fireEvent = U.fireEvent, merge = U.merge, pick = U.pick, defined = U.defined, isString = U.isString;
|
|
// Add language support.
|
|
extend(defaultOptions.lang,
|
|
/**
|
|
* @optionparent lang
|
|
*
|
|
* @private
|
|
*/
|
|
{
|
|
/**
|
|
* @since 10.0.0
|
|
* @product highcharts
|
|
*
|
|
* @private
|
|
*/
|
|
mainBreadcrumb: 'Main'
|
|
});
|
|
/**
|
|
* The Breadcrumbs class
|
|
*
|
|
* @private
|
|
* @class
|
|
* @name Highcharts.Breadcrumbs
|
|
*
|
|
* @param {Highcharts.Chart} chart
|
|
* Chart object
|
|
* @param {Highcharts.Options} userOptions
|
|
* User options
|
|
*/
|
|
var Breadcrumbs = /** @class */ (function () {
|
|
function Breadcrumbs(chart, userOptions) {
|
|
/* *
|
|
*
|
|
* Properties
|
|
*
|
|
* */
|
|
this.group = void 0;
|
|
this.list = [];
|
|
this.elementList = {};
|
|
this.isDirty = true;
|
|
this.level = 0;
|
|
this.options = void 0;
|
|
var chartOptions = merge(chart.options.drilldown &&
|
|
chart.options.drilldown.drillUpButton, Breadcrumbs.defaultBreadcrumbsOptions, chart.options.navigation && chart.options.navigation.breadcrumbs, userOptions);
|
|
this.chart = chart;
|
|
this.options = chartOptions || {};
|
|
}
|
|
/**
|
|
* Update Breadcrumbs properties, like level and list.
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @function Highcharts.Breadcrumbs#updateProperties
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
*/
|
|
Breadcrumbs.prototype.updateProperties = function (list) {
|
|
this.setList(list);
|
|
this.setLevel();
|
|
this.isDirty = true;
|
|
};
|
|
/**
|
|
* Set breadcrumbs list.
|
|
* @function Highcharts.Breadcrumbs#setList
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
* @param {Highcharts.BreadcrumbsOptions} list
|
|
* Breadcrumbs list.
|
|
*/
|
|
Breadcrumbs.prototype.setList = function (list) {
|
|
this.list = list;
|
|
};
|
|
/**
|
|
* Calcule level on which chart currently is.
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @function Highcharts.Breadcrumbs#setLevel
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
*/
|
|
Breadcrumbs.prototype.setLevel = function () {
|
|
this.level = this.list.length && this.list.length - 1;
|
|
};
|
|
/**
|
|
* Get Breadcrumbs level
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @function Highcharts.Breadcrumbs#getLevel
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
*/
|
|
Breadcrumbs.prototype.getLevel = function () {
|
|
return this.level;
|
|
};
|
|
/**
|
|
* Default button text formatter.
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @function Highcharts.Breadcrumbs#getButtonText
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
* @param {Highcharts.Breadcrumbs} breadcrumb
|
|
* Breadcrumb.
|
|
* @return {string}
|
|
* Formatted text.
|
|
*/
|
|
Breadcrumbs.prototype.getButtonText = function (breadcrumb) {
|
|
var breadcrumbs = this, chart = breadcrumbs.chart, breadcrumbsOptions = breadcrumbs.options, lang = chart.options.lang, textFormat = pick(breadcrumbsOptions.format, breadcrumbsOptions.showFullPath ?
|
|
'{level.name}' : '← {level.name}'), defaultText = lang && pick(lang.drillUpText, lang.mainBreadcrumb);
|
|
var returnText = breadcrumbsOptions.formatter &&
|
|
breadcrumbsOptions.formatter(breadcrumb) ||
|
|
format(textFormat, { level: breadcrumb.levelOptions }, chart) || '';
|
|
if (((isString(returnText) &&
|
|
!returnText.length) ||
|
|
returnText === '← ') &&
|
|
defined(defaultText)) {
|
|
returnText = !breadcrumbsOptions.showFullPath ?
|
|
'← ' + defaultText :
|
|
defaultText;
|
|
}
|
|
return returnText;
|
|
};
|
|
/**
|
|
* Redraw.
|
|
*
|
|
* @requires modules/breadcrums
|
|
*
|
|
* @function Highcharts.Breadcrumbs#redraw
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
*/
|
|
Breadcrumbs.prototype.redraw = function () {
|
|
if (this.isDirty) {
|
|
this.render();
|
|
}
|
|
if (this.group) {
|
|
this.group.align();
|
|
}
|
|
this.isDirty = false;
|
|
};
|
|
/**
|
|
* Create a group, then draw breadcrumbs together with the separators.
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @function Highcharts.Breadcrumbs#render
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
*/
|
|
Breadcrumbs.prototype.render = function () {
|
|
var breadcrumbs = this, chart = breadcrumbs.chart, breadcrumbsOptions = breadcrumbs.options;
|
|
// A main group for the breadcrumbs.
|
|
if (!breadcrumbs.group && breadcrumbsOptions) {
|
|
breadcrumbs.group = chart.renderer
|
|
.g('breadcrumbs-group')
|
|
.addClass('highcharts-no-tooltip highcharts-breadcrumbs')
|
|
.attr({
|
|
zIndex: breadcrumbsOptions.zIndex
|
|
})
|
|
.add();
|
|
}
|
|
// Draw breadcrumbs.
|
|
if (breadcrumbsOptions.showFullPath) {
|
|
this.renderFullPathButtons();
|
|
}
|
|
else {
|
|
this.renderSingleButton();
|
|
}
|
|
this.alignBreadcrumbsGroup();
|
|
};
|
|
/**
|
|
* Draw breadcrumbs together with the separators.
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @function Highcharts.Breadcrumbs#renderFullPathButtons
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
*/
|
|
Breadcrumbs.prototype.renderFullPathButtons = function () {
|
|
// Make sure that only one type of button is visible.
|
|
this.destroySingleButton();
|
|
this.resetElementListState();
|
|
this.updateListElements();
|
|
this.destroyListElements();
|
|
};
|
|
/**
|
|
* Render Single button - when showFullPath is not used. The button is
|
|
* similar to the old drillUpButton
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @function Highcharts.Breadcrumbs#renderSingleButton
|
|
* @param {Highcharts.Breadcrumbs} this Breadcrumbs class.
|
|
*/
|
|
Breadcrumbs.prototype.renderSingleButton = function () {
|
|
var breadcrumbs = this, chart = breadcrumbs.chart, list = breadcrumbs.list, breadcrumbsOptions = breadcrumbs.options, buttonSpacing = breadcrumbsOptions.buttonSpacing;
|
|
// Make sure that only one type of button is visible.
|
|
this.destroyListElements();
|
|
// Draw breadcrumbs. Inital position for calculating the breadcrumbs
|
|
// group.
|
|
var posX = breadcrumbs.group ?
|
|
breadcrumbs.group.getBBox().width :
|
|
buttonSpacing, posY = buttonSpacing;
|
|
var previousBreadcrumb = list[list.length - 2];
|
|
if (!chart.drillUpButton && (this.level > 0)) {
|
|
chart.drillUpButton = breadcrumbs.renderButton(previousBreadcrumb, posX, posY);
|
|
}
|
|
else if (chart.drillUpButton) {
|
|
if (this.level > 0) {
|
|
// Update button.
|
|
this.updateSingleButton();
|
|
}
|
|
else {
|
|
this.destroySingleButton();
|
|
}
|
|
}
|
|
};
|
|
/**
|
|
* Update group position based on align and it's width.
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @function Highcharts.Breadcrumbs#renderSingleButton
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
*/
|
|
Breadcrumbs.prototype.alignBreadcrumbsGroup = function (xOffset) {
|
|
var breadcrumbs = this;
|
|
if (breadcrumbs.group) {
|
|
var breadcrumbsOptions = breadcrumbs.options, buttonTheme = breadcrumbsOptions.buttonTheme, positionOptions = breadcrumbsOptions.position, alignTo = (breadcrumbsOptions.relativeTo === 'chart' ||
|
|
breadcrumbsOptions.relativeTo === 'spacingBox' ?
|
|
void 0 :
|
|
'scrollablePlotBox'), bBox = breadcrumbs.group.getBBox(), additionalSpace = 2 * (buttonTheme.padding || 0) +
|
|
breadcrumbsOptions.buttonSpacing;
|
|
// Store positionOptions
|
|
positionOptions.width = bBox.width + additionalSpace;
|
|
positionOptions.height = bBox.height + additionalSpace;
|
|
var newPositions = merge(positionOptions);
|
|
// Add x offset if specified.
|
|
if (xOffset) {
|
|
newPositions.x += xOffset;
|
|
}
|
|
if (breadcrumbs.options.rtl) {
|
|
newPositions.x += positionOptions.width;
|
|
}
|
|
newPositions.y = pick(newPositions.y, this.yOffset, 0);
|
|
breadcrumbs.group.align(newPositions, true, alignTo);
|
|
}
|
|
};
|
|
/**
|
|
* Render a button.
|
|
*
|
|
* @requires modules/breadcrums
|
|
*
|
|
* @function Highcharts.Breadcrumbs#renderButton
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
* @param {Highcharts.Breadcrumbs} breadcrumb
|
|
* Current breadcrumb
|
|
* @param {Highcharts.Breadcrumbs} posX
|
|
* Initial horizontal position
|
|
* @param {Highcharts.Breadcrumbs} posY
|
|
* Initial vertical position
|
|
* @return {SVGElement|void}
|
|
* Returns the SVG button
|
|
*/
|
|
Breadcrumbs.prototype.renderButton = function (breadcrumb, posX, posY) {
|
|
var breadcrumbs = this, chart = this.chart, breadcrumbsOptions = breadcrumbs.options, buttonTheme = merge(breadcrumbsOptions.buttonTheme);
|
|
var button = chart.renderer
|
|
.button(breadcrumbs.getButtonText(breadcrumb), posX, posY, function (e) {
|
|
// Extract events from button object and call
|
|
var buttonEvents = breadcrumbsOptions.events &&
|
|
breadcrumbsOptions.events.click;
|
|
var callDefaultEvent;
|
|
if (buttonEvents) {
|
|
callDefaultEvent = buttonEvents.call(breadcrumbs, e, breadcrumb);
|
|
}
|
|
// (difference in behaviour of showFullPath and drillUp)
|
|
if (callDefaultEvent !== false) {
|
|
// For single button we are not going to the button
|
|
// level, but the one level up
|
|
if (!breadcrumbsOptions.showFullPath) {
|
|
e.newLevel = breadcrumbs.level - 1;
|
|
}
|
|
else {
|
|
e.newLevel = breadcrumb.level;
|
|
}
|
|
fireEvent(breadcrumbs, 'up', e);
|
|
}
|
|
}, buttonTheme)
|
|
.addClass('highcharts-breadcrumbs-button')
|
|
.add(breadcrumbs.group);
|
|
if (!chart.styledMode) {
|
|
button.attr(breadcrumbsOptions.style);
|
|
}
|
|
return button;
|
|
};
|
|
/**
|
|
* Render a separator.
|
|
*
|
|
* @requires modules/breadcrums
|
|
*
|
|
* @function Highcharts.Breadcrumbs#renderSeparator
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
* @param {Highcharts.Breadcrumbs} posX
|
|
* Initial horizontal position
|
|
* @param {Highcharts.Breadcrumbs} posY
|
|
* Initial vertical position
|
|
* @return {Highcharts.SVGElement}
|
|
* Returns the SVG button
|
|
*/
|
|
Breadcrumbs.prototype.renderSeparator = function (posX, posY) {
|
|
var breadcrumbs = this, chart = this.chart, breadcrumbsOptions = breadcrumbs.options, separatorOptions = breadcrumbsOptions.separator;
|
|
var separator = chart.renderer
|
|
.label(separatorOptions.text, posX, posY, void 0, void 0, void 0, false)
|
|
.addClass('highcharts-breadcrumbs-separator')
|
|
.add(breadcrumbs.group);
|
|
if (!chart.styledMode) {
|
|
separator.css(separatorOptions.style);
|
|
}
|
|
return separator;
|
|
};
|
|
/**
|
|
* Update.
|
|
* @function Highcharts.Breadcrumbs#update
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
* @param {Highcharts.BreadcrumbsOptions} options
|
|
* Breadcrumbs class.
|
|
* @param {boolean} redraw
|
|
* Redraw flag
|
|
*/
|
|
Breadcrumbs.prototype.update = function (options) {
|
|
merge(true, this.options, options);
|
|
this.destroy();
|
|
this.isDirty = true;
|
|
};
|
|
/**
|
|
* Update button text when the showFullPath set to false.
|
|
* @function Highcharts.Breadcrumbs#updateSingleButton
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
*/
|
|
Breadcrumbs.prototype.updateSingleButton = function () {
|
|
var chart = this.chart, currentBreadcrumb = this.list[this.level - 1];
|
|
if (chart.drillUpButton) {
|
|
chart.drillUpButton.attr({
|
|
text: this.getButtonText(currentBreadcrumb)
|
|
});
|
|
}
|
|
};
|
|
/**
|
|
* Destroy the chosen breadcrumbs group
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @function Highcharts.Breadcrumbs#destroy
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
*/
|
|
Breadcrumbs.prototype.destroy = function () {
|
|
this.destroySingleButton();
|
|
// Destroy elements one by one. It's necessary beacause
|
|
// g().destroy() does not remove added HTML
|
|
this.destroyListElements(true);
|
|
// Then, destroy the group itself.
|
|
if (this.group) {
|
|
this.group.destroy();
|
|
}
|
|
this.group = void 0;
|
|
};
|
|
/**
|
|
* Destroy the elements' buttons and separators.
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @function Highcharts.Breadcrumbs#destroyListElements
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
*/
|
|
Breadcrumbs.prototype.destroyListElements = function (force) {
|
|
var elementList = this.elementList;
|
|
objectEach(elementList, function (element, level) {
|
|
if (force ||
|
|
!elementList[level].updated) {
|
|
element = elementList[level];
|
|
element.button && element.button.destroy();
|
|
element.separator && element.separator.destroy();
|
|
delete element.button;
|
|
delete element.separator;
|
|
delete elementList[level];
|
|
}
|
|
});
|
|
if (force) {
|
|
this.elementList = {};
|
|
}
|
|
};
|
|
/**
|
|
* Destroy the single button if exists.
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @function Highcharts.Breadcrumbs#destroySingleButton
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
*/
|
|
Breadcrumbs.prototype.destroySingleButton = function () {
|
|
if (this.chart.drillUpButton) {
|
|
this.chart.drillUpButton.destroy();
|
|
this.chart.drillUpButton = void 0;
|
|
}
|
|
};
|
|
/**
|
|
* Reset state for all buttons in elementList.
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @function Highcharts.Breadcrumbs#resetElementListState
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
*/
|
|
Breadcrumbs.prototype.resetElementListState = function () {
|
|
objectEach(this.elementList, function (element) {
|
|
element.updated = false;
|
|
});
|
|
};
|
|
/**
|
|
* Update rendered elements inside the elementList.
|
|
*
|
|
* @requires modules/breadcrumbs
|
|
*
|
|
* @function Highcharts.Breadcrumbs#updateListElements
|
|
* @param {Highcharts.Breadcrumbs} this
|
|
* Breadcrumbs class.
|
|
*/
|
|
Breadcrumbs.prototype.updateListElements = function () {
|
|
var breadcrumbs = this, elementList = breadcrumbs.elementList, buttonSpacing = breadcrumbs.options.buttonSpacing, list = breadcrumbs.list, rtl = breadcrumbs.options.rtl, rtlFactor = rtl ? -1 : 1, updateXPosition = function (element, spacing) {
|
|
return rtlFactor * element.getBBox().width +
|
|
rtlFactor * spacing;
|
|
}, adjustToRTL = function (element, posX, posY) {
|
|
element.translate(posX - element.getBBox().width, posY);
|
|
};
|
|
// Inital position for calculating the breadcrumbs group.
|
|
var posX = breadcrumbs.group ?
|
|
updateXPosition(breadcrumbs.group, buttonSpacing) :
|
|
buttonSpacing, posY = buttonSpacing, currentBreadcrumb;
|
|
list.forEach(function (breadcrumb, index) {
|
|
var isLast = index === list.length - 1;
|
|
var button, separator;
|
|
if (elementList[breadcrumb.level]) {
|
|
currentBreadcrumb = elementList[breadcrumb.level];
|
|
button = currentBreadcrumb.button;
|
|
// Render a separator if it was not created before.
|
|
if (!currentBreadcrumb.separator &&
|
|
!isLast) {
|
|
// Add spacing for the next separator
|
|
posX += rtlFactor * buttonSpacing;
|
|
currentBreadcrumb.separator =
|
|
breadcrumbs.renderSeparator(posX, posY);
|
|
if (rtl) {
|
|
adjustToRTL(currentBreadcrumb.separator, posX, posY);
|
|
}
|
|
posX += updateXPosition(currentBreadcrumb.separator, buttonSpacing);
|
|
}
|
|
else if (currentBreadcrumb.separator &&
|
|
isLast) {
|
|
currentBreadcrumb.separator.destroy();
|
|
delete currentBreadcrumb.separator;
|
|
}
|
|
elementList[breadcrumb.level].updated = true;
|
|
}
|
|
else {
|
|
// Render a button.
|
|
button = breadcrumbs.renderButton(breadcrumb, posX, posY);
|
|
if (rtl) {
|
|
adjustToRTL(button, posX, posY);
|
|
}
|
|
posX += updateXPosition(button, buttonSpacing);
|
|
// Render a separator.
|
|
if (!isLast) {
|
|
separator = breadcrumbs.renderSeparator(posX, posY);
|
|
if (rtl) {
|
|
adjustToRTL(separator, posX, posY);
|
|
}
|
|
posX += updateXPosition(separator, buttonSpacing);
|
|
}
|
|
elementList[breadcrumb.level] = {
|
|
button: button,
|
|
separator: separator,
|
|
updated: true
|
|
};
|
|
}
|
|
if (button) {
|
|
button.setState(isLast ? 2 : 0);
|
|
}
|
|
});
|
|
};
|
|
/**
|
|
* Options for breadcrumbs. Breadcrumbs general options are defined in
|
|
* `navigation.breadcrumbs`. Specific options for drilldown are set in
|
|
* `drilldown.breadcrumbs` and for tree-like series traversing, in
|
|
* `plotOptions[series].breadcrumbs`.
|
|
*
|
|
* @since 10.0.0
|
|
* @product highcharts
|
|
* @optionparent navigation.breadcrumbs
|
|
*/
|
|
Breadcrumbs.defaultBreadcrumbsOptions = {
|
|
/**
|
|
* A collection of attributes for the buttons. The object takes SVG
|
|
* attributes like `fill`, `stroke`, `stroke-width`, as well as `style`,
|
|
* a collection of CSS properties for the text.
|
|
*
|
|
* The object can also be extended with states, so you can set
|
|
* presentational options for `hover`, `select` or `disabled` button
|
|
* states.
|
|
*
|
|
* @sample {highcharts} highcharts/breadcrumbs/single-button
|
|
* Themed, single button
|
|
*
|
|
* @type {Highcharts.SVGAttributes}
|
|
* @since 10.0.0
|
|
* @product highcharts
|
|
*/
|
|
buttonTheme: {
|
|
/** @ignore */
|
|
fill: 'none',
|
|
/** @ignore */
|
|
height: 18,
|
|
/** @ignore */
|
|
padding: 2,
|
|
/** @ignore */
|
|
'stroke-width': 0,
|
|
/** @ignore */
|
|
zIndex: 7,
|
|
/** @ignore */
|
|
states: {
|
|
select: {
|
|
fill: 'none'
|
|
}
|
|
},
|
|
style: {
|
|
color: "#335cad" /* Palette.highlightColor80 */
|
|
}
|
|
},
|
|
/**
|
|
* The default padding for each button and separator in each direction.
|
|
*
|
|
* @type {number}
|
|
* @since 10.0.0
|
|
*/
|
|
buttonSpacing: 5,
|
|
/**
|
|
* Fires when clicking on the breadcrumbs button. Two arguments are
|
|
* passed to the function. First breadcrumb button as an SVG element.
|
|
* Second is the breadcrumbs class, containing reference to the chart,
|
|
* series etc.
|
|
*
|
|
* ```js
|
|
* click: function(button, breadcrumbs) {
|
|
* console.log(button);
|
|
* }
|
|
* ```
|
|
*
|
|
* Return false to stop default buttons click action.
|
|
*
|
|
* @type {Highcharts.BreadcrumbsClickCallbackFunction}
|
|
* @since 10.0.0
|
|
* @apioption navigation.breadcrumbs.events.click
|
|
*/
|
|
/**
|
|
* When the breadcrumbs are floating, the plot area will not move to
|
|
* make space for it. By default, the chart will not make space for the
|
|
* buttons. This property won't work when positioned in the middle.
|
|
*
|
|
* @sample highcharts/breadcrumbs/single-button
|
|
* Floating button
|
|
* @type {boolean}
|
|
* @since 10.0.0
|
|
*/
|
|
floating: false,
|
|
/**
|
|
* A format string for the breadcrumbs button. Variables are enclosed by
|
|
* curly brackets. Available values are passed in the declared point
|
|
* options.
|
|
*
|
|
* @type {string|undefined}
|
|
* @since 10.0.0
|
|
* @default undefined
|
|
* @sample {highcharts} highcharts/breadcrumbs/format Display custom
|
|
* values in breadcrumb button.
|
|
*/
|
|
format: void 0,
|
|
/**
|
|
* Callback function to format the breadcrumb text from scratch.
|
|
*
|
|
* @type {Highcharts.BreadcrumbsFormatterCallbackFunction}
|
|
* @since 10.0.0
|
|
* @default undefined
|
|
* @apioption navigation.breadcrumbs.formatter
|
|
*/
|
|
/**
|
|
* What box to align the button to. Can be either `plotBox` or
|
|
* `spacingBox`.
|
|
*
|
|
* @type {Highcharts.ButtonRelativeToValue}
|
|
* @default plotBox
|
|
* @since 10.0.0
|
|
* @product highcharts highmaps
|
|
*/
|
|
relativeTo: 'plotBox',
|
|
/**
|
|
* Whether to reverse the order of buttons. This is common in Arabic
|
|
* and Hebrew.
|
|
*
|
|
* @type {boolean}
|
|
* @since 10.2.0
|
|
* @sample {highcharts} highcharts/breadcrumbs/rtl
|
|
* Breadcrumbs in RTL
|
|
*/
|
|
rtl: false,
|
|
/**
|
|
* Positioning for the button row. The breadcrumbs buttons will be
|
|
* aligned properly for the default chart layout (title, subtitle,
|
|
* legend, range selector) for the custom chart layout set the position
|
|
* properties.
|
|
* @type {Highcharts.BreadcrumbsAlignOptions}
|
|
* @since 10.0.0
|
|
* @product highcharts highmaps
|
|
* @sample {highcharts} highcharts/breadcrumbs/single-button
|
|
* Single, right aligned button
|
|
*/
|
|
position: {
|
|
/**
|
|
* Horizontal alignment of the breadcrumbs buttons.
|
|
*
|
|
* @type {Highcharts.AlignValue}
|
|
*/
|
|
align: 'left',
|
|
/**
|
|
* Vertical alignment of the breadcrumbs buttons.
|
|
*
|
|
* @type {Highcharts.VerticalAlignValue}
|
|
*/
|
|
verticalAlign: 'top',
|
|
/**
|
|
* The X offset of the breadcrumbs button group.
|
|
*
|
|
* @type {number}
|
|
*/
|
|
x: 0,
|
|
/**
|
|
* The Y offset of the breadcrumbs button group. When `undefined`,
|
|
* and `floating` is `false`, the `y` position is adapted so that
|
|
* the breadcrumbs are rendered outside the target area.
|
|
*
|
|
* @type {number|undefined}
|
|
*/
|
|
y: void 0
|
|
},
|
|
/**
|
|
* Options object for Breadcrumbs separator.
|
|
*
|
|
* @since 10.0.0
|
|
*/
|
|
separator: {
|
|
/**
|
|
* @type {string}
|
|
* @since 10.0.0
|
|
* @product highcharts
|
|
*/
|
|
text: '/',
|
|
/**
|
|
* CSS styles for the breadcrumbs separator.
|
|
*
|
|
* In styled mode, the breadcrumbs separators are styled by the
|
|
* `.highcharts-separator` rule with its different states.
|
|
* @type {Highcharts.CSSObject}
|
|
* @since 10.0.0
|
|
*/
|
|
style: {
|
|
color: "#666666" /* Palette.neutralColor60 */
|
|
}
|
|
},
|
|
/**
|
|
* Show full path or only a single button.
|
|
*
|
|
* @type {boolean}
|
|
* @since 10.0.0
|
|
* @sample {highcharts} highcharts/breadcrumbs/single-button
|
|
* Single, styled button
|
|
*/
|
|
showFullPath: true,
|
|
/**
|
|
* CSS styles for all breadcrumbs.
|
|
*
|
|
* In styled mode, the breadcrumbs buttons are styled by the
|
|
* `.highcharts-breadcrumbs-buttons .highcharts-button` rule with its
|
|
* different states.
|
|
* @type {Highcharts.SVGAttributes}
|
|
* @since 10.0.0
|
|
*/
|
|
style: {},
|
|
/**
|
|
* Whether to use HTML to render the breadcrumbs items texts.
|
|
*
|
|
* @type {boolean}
|
|
* @since 10.0.0
|
|
*/
|
|
useHTML: false,
|
|
/**
|
|
* The z index of the breadcrumbs group.
|
|
*
|
|
* @type {number}
|
|
* @since 10.0.0
|
|
*/
|
|
zIndex: 7
|
|
};
|
|
return Breadcrumbs;
|
|
}());
|
|
/* eslint-disable no-invalid-this */
|
|
if (!H.Breadcrumbs) {
|
|
H.Breadcrumbs = Breadcrumbs;
|
|
// Logic for making space for the buttons above the plot area
|
|
addEvent(Chart, 'getMargins', function () {
|
|
var breadcrumbs = this.breadcrumbs;
|
|
if (breadcrumbs &&
|
|
!breadcrumbs.options.floating &&
|
|
breadcrumbs.level) {
|
|
var breadcrumbsOptions = breadcrumbs.options, buttonTheme = breadcrumbsOptions.buttonTheme, breadcrumbsHeight = ((buttonTheme.height || 0) +
|
|
2 * (buttonTheme.padding || 0) +
|
|
breadcrumbsOptions.buttonSpacing), verticalAlign = breadcrumbsOptions.position.verticalAlign;
|
|
if (verticalAlign === 'bottom') {
|
|
this.marginBottom = (this.marginBottom || 0) + breadcrumbsHeight;
|
|
breadcrumbs.yOffset = breadcrumbsHeight;
|
|
}
|
|
else if (verticalAlign !== 'middle') {
|
|
this.plotTop += breadcrumbsHeight;
|
|
breadcrumbs.yOffset = -breadcrumbsHeight;
|
|
}
|
|
else {
|
|
breadcrumbs.yOffset = void 0;
|
|
}
|
|
}
|
|
});
|
|
addEvent(Chart, 'redraw', function () {
|
|
this.breadcrumbs && this.breadcrumbs.redraw();
|
|
});
|
|
// Remove resize/afterSetExtremes at chart destroy
|
|
addEvent(Chart, 'destroy', function destroyEvents() {
|
|
if (this.breadcrumbs) {
|
|
this.breadcrumbs.destroy();
|
|
this.breadcrumbs = void 0;
|
|
}
|
|
});
|
|
// Shift the drillUpButton to make the space for resetZoomButton, #8095.
|
|
addEvent(Chart, 'afterShowResetZoom', function () {
|
|
var chart = this;
|
|
if (chart.breadcrumbs) {
|
|
var bbox = chart.resetZoomButton &&
|
|
chart.resetZoomButton.getBBox(), breadcrumbsOptions = chart.breadcrumbs.options;
|
|
if (bbox &&
|
|
breadcrumbsOptions.position.align === 'right' &&
|
|
breadcrumbsOptions.relativeTo === 'plotBox') {
|
|
chart.breadcrumbs.alignBreadcrumbsGroup(-bbox.width - breadcrumbsOptions.buttonSpacing);
|
|
}
|
|
}
|
|
});
|
|
// After zooming out, shift the drillUpButton
|
|
// to the previous position, #8095.
|
|
addEvent(Chart, 'selection', function (event) {
|
|
if (event.resetSelection === true &&
|
|
this.breadcrumbs) {
|
|
this.breadcrumbs.alignBreadcrumbsGroup();
|
|
}
|
|
});
|
|
}
|
|
/* *
|
|
*
|
|
* Default Export
|
|
*
|
|
* */
|
|
export default Breadcrumbs;
|
|
/* *
|
|
*
|
|
* API Declarations
|
|
*
|
|
* */
|
|
/**
|
|
* Callback function to react on button clicks.
|
|
*
|
|
* @callback Highcharts.BreadcrumbsClickCallbackFunction
|
|
*
|
|
* @param {Highcharts.Event} event
|
|
* Event.
|
|
*
|
|
* @param {Highcharts.BreadcrumbOptions} options
|
|
* Breadcrumb options.
|
|
*
|
|
* @param {global.Event} e
|
|
* Event arguments.
|
|
*/
|
|
/**
|
|
* Callback function to format the breadcrumb text from scratch.
|
|
*
|
|
* @callback Highcharts.BreadcrumbsFormatterCallbackFunction
|
|
*
|
|
* @param {Highcharts.Event} event
|
|
* Event.
|
|
*
|
|
* @param {Highcharts.BreadcrumbOptions} options
|
|
* Breadcrumb options.
|
|
*
|
|
* @return {string}
|
|
* Formatted text or false
|
|
*/
|
|
/**
|
|
* Options for the one breadcrumb.
|
|
*
|
|
* @interface Highcharts.BreadcrumbOptions
|
|
*/
|
|
/**
|
|
* Level connected to a specific breadcrumb.
|
|
* @name Highcharts.BreadcrumbOptions#level
|
|
* @type {number}
|
|
*/
|
|
/**
|
|
* Options for series or point connected to a specific breadcrumb.
|
|
* @name Highcharts.BreadcrumbOptions#levelOptions
|
|
* @type {SeriesOptions|PointOptionsObject}
|
|
*/
|
|
/**
|
|
* Options for aligning breadcrumbs group.
|
|
*
|
|
* @interface Highcharts.BreadcrumbsAlignOptions
|
|
*/
|
|
/**
|
|
* Align of a Breadcrumb group.
|
|
* @default right
|
|
* @name Highcharts.BreadcrumbsAlignOptions#align
|
|
* @type {AlignValue}
|
|
*/
|
|
/**
|
|
* Vertical align of a Breadcrumb group.
|
|
* @default top
|
|
* @name Highcharts.BreadcrumbsAlignOptions#verticalAlign
|
|
* @type {VerticalAlignValue}
|
|
*/
|
|
/**
|
|
* X offset of a Breadcrumbs group.
|
|
* @name Highcharts.BreadcrumbsAlignOptions#x
|
|
* @type {number}
|
|
*/
|
|
/**
|
|
* Y offset of a Breadcrumbs group.
|
|
* @name Highcharts.BreadcrumbsAlignOptions#y
|
|
* @type {number}
|
|
*/
|
|
/**
|
|
* Options for all breadcrumbs.
|
|
*
|
|
* @interface Highcharts.BreadcrumbsOptions
|
|
*/
|
|
/**
|
|
* Button theme.
|
|
* @name Highcharts.BreadcrumbsOptions#buttonTheme
|
|
* @type { SVGAttributes | undefined }
|
|
*/
|
|
(''); // Keeps doclets above in JS file
|