392 lines
14 KiB
JavaScript
392 lines
14 KiB
JavaScript
/* *
|
|
*
|
|
* (c) 2010-2021 Torstein Honsi
|
|
*
|
|
* License: www.highcharts.com/license
|
|
*
|
|
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
|
*
|
|
* Highcharts feature to make the Y axis stay fixed when scrolling the chart
|
|
* horizontally on mobile devices. Supports left and right side axes.
|
|
*/
|
|
/*
|
|
WIP on vertical scrollable plot area (#9378). To do:
|
|
- Bottom axis positioning
|
|
- Test with Gantt
|
|
- Look for size optimizing the code
|
|
- API and demos
|
|
*/
|
|
'use strict';
|
|
import A from '../Core/Animation/AnimationUtilities.js';
|
|
var stop = A.stop;
|
|
import Axis from '../Core/Axis/Axis.js';
|
|
import Chart from '../Core/Chart/Chart.js';
|
|
import Series from '../Core/Series/Series.js';
|
|
import RendererRegistry from '../Core/Renderer/RendererRegistry.js';
|
|
import U from '../Core/Utilities.js';
|
|
var addEvent = U.addEvent, createElement = U.createElement, defined = U.defined, merge = U.merge, pick = U.pick;
|
|
/* eslint-disable no-invalid-this, valid-jsdoc */
|
|
addEvent(Chart, 'afterSetChartSize', function (e) {
|
|
var scrollablePlotArea = this.options.chart.scrollablePlotArea, scrollableMinWidth = scrollablePlotArea && scrollablePlotArea.minWidth, scrollableMinHeight = scrollablePlotArea && scrollablePlotArea.minHeight, scrollablePixelsX, scrollablePixelsY, corrections;
|
|
if (!this.renderer.forExport) {
|
|
// The amount of pixels to scroll, the difference between chart
|
|
// width and scrollable width
|
|
if (scrollableMinWidth) {
|
|
this.scrollablePixelsX = scrollablePixelsX = Math.max(0, scrollableMinWidth - this.chartWidth);
|
|
if (scrollablePixelsX) {
|
|
this.scrollablePlotBox = (this.renderer.scrollablePlotBox = merge(this.plotBox));
|
|
this.plotBox.width = this.plotWidth += scrollablePixelsX;
|
|
if (this.inverted) {
|
|
this.clipBox.height += scrollablePixelsX;
|
|
}
|
|
else {
|
|
this.clipBox.width += scrollablePixelsX;
|
|
}
|
|
corrections = {
|
|
// Corrections for right side
|
|
1: { name: 'right', value: scrollablePixelsX }
|
|
};
|
|
}
|
|
// Currently we can only do either X or Y
|
|
}
|
|
else if (scrollableMinHeight) {
|
|
this.scrollablePixelsY = scrollablePixelsY = Math.max(0, scrollableMinHeight - this.chartHeight);
|
|
if (defined(scrollablePixelsY)) {
|
|
this.scrollablePlotBox = (this.renderer.scrollablePlotBox = merge(this.plotBox));
|
|
this.plotBox.height = this.plotHeight += scrollablePixelsY;
|
|
if (this.inverted) {
|
|
this.clipBox.width += scrollablePixelsY;
|
|
}
|
|
else {
|
|
this.clipBox.height += scrollablePixelsY;
|
|
}
|
|
corrections = {
|
|
2: { name: 'bottom', value: scrollablePixelsY }
|
|
};
|
|
}
|
|
}
|
|
if (corrections && !e.skipAxes) {
|
|
this.axes.forEach(function (axis) {
|
|
// For right and bottom axes, only fix the plot line length
|
|
if (corrections[axis.side]) {
|
|
// Get the plot lines right in getPlotLinePath,
|
|
// temporarily set it to the adjusted plot width.
|
|
axis.getPlotLinePath = function () {
|
|
var marginName = corrections[axis.side].name, correctionValue = corrections[axis.side].value,
|
|
// axis.right or axis.bottom
|
|
margin = this[marginName], path;
|
|
// Temporarily adjust
|
|
this[marginName] = margin - correctionValue;
|
|
path = Axis.prototype.getPlotLinePath.apply(this, arguments);
|
|
// Reset
|
|
this[marginName] = margin;
|
|
return path;
|
|
};
|
|
}
|
|
else {
|
|
// Apply the corrected plotWidth
|
|
axis.setAxisSize();
|
|
axis.setAxisTranslation();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
addEvent(Chart, 'render', function () {
|
|
if (this.scrollablePixelsX || this.scrollablePixelsY) {
|
|
if (this.setUpScrolling) {
|
|
this.setUpScrolling();
|
|
}
|
|
this.applyFixed();
|
|
}
|
|
else if (this.fixedDiv) { // Has been in scrollable mode
|
|
this.applyFixed();
|
|
}
|
|
});
|
|
/**
|
|
* @private
|
|
* @function Highcharts.Chart#setUpScrolling
|
|
* @return {void}
|
|
*/
|
|
Chart.prototype.setUpScrolling = function () {
|
|
var _this = this;
|
|
var css = {
|
|
WebkitOverflowScrolling: 'touch',
|
|
overflowX: 'hidden',
|
|
overflowY: 'hidden'
|
|
};
|
|
if (this.scrollablePixelsX) {
|
|
css.overflowX = 'auto';
|
|
}
|
|
if (this.scrollablePixelsY) {
|
|
css.overflowY = 'auto';
|
|
}
|
|
// Insert a container with position relative
|
|
// that scrolling and fixed container renders to (#10555)
|
|
this.scrollingParent = createElement('div', {
|
|
className: 'highcharts-scrolling-parent'
|
|
}, {
|
|
position: 'relative'
|
|
}, this.renderTo);
|
|
// Add the necessary divs to provide scrolling
|
|
this.scrollingContainer = createElement('div', {
|
|
'className': 'highcharts-scrolling'
|
|
}, css, this.scrollingParent);
|
|
// On scroll, reset the chart position because it applies to the scrolled
|
|
// container
|
|
addEvent(this.scrollingContainer, 'scroll', function () {
|
|
if (_this.pointer) {
|
|
delete _this.pointer.chartPosition;
|
|
}
|
|
});
|
|
this.innerContainer = createElement('div', {
|
|
'className': 'highcharts-inner-container'
|
|
}, null, this.scrollingContainer);
|
|
// Now move the container inside
|
|
this.innerContainer.appendChild(this.container);
|
|
// Don't run again
|
|
this.setUpScrolling = null;
|
|
};
|
|
/**
|
|
* These elements are moved over to the fixed renderer and stay fixed when the
|
|
* user scrolls the chart
|
|
* @private
|
|
*/
|
|
Chart.prototype.moveFixedElements = function () {
|
|
var container = this.container, fixedRenderer = this.fixedRenderer, fixedSelectors = [
|
|
'.highcharts-contextbutton',
|
|
'.highcharts-credits',
|
|
'.highcharts-legend',
|
|
'.highcharts-legend-checkbox',
|
|
'.highcharts-navigator-series',
|
|
'.highcharts-navigator-xaxis',
|
|
'.highcharts-navigator-yaxis',
|
|
'.highcharts-navigator',
|
|
'.highcharts-reset-zoom',
|
|
'.highcharts-drillup-button',
|
|
'.highcharts-scrollbar',
|
|
'.highcharts-subtitle',
|
|
'.highcharts-title'
|
|
], axisClass;
|
|
if (this.scrollablePixelsX && !this.inverted) {
|
|
axisClass = '.highcharts-yaxis';
|
|
}
|
|
else if (this.scrollablePixelsX && this.inverted) {
|
|
axisClass = '.highcharts-xaxis';
|
|
}
|
|
else if (this.scrollablePixelsY && !this.inverted) {
|
|
axisClass = '.highcharts-xaxis';
|
|
}
|
|
else if (this.scrollablePixelsY && this.inverted) {
|
|
axisClass = '.highcharts-yaxis';
|
|
}
|
|
if (axisClass) {
|
|
fixedSelectors.push("".concat(axisClass, ":not(.highcharts-radial-axis)"), "".concat(axisClass, "-labels:not(.highcharts-radial-axis-labels)"));
|
|
}
|
|
fixedSelectors.forEach(function (className) {
|
|
[].forEach.call(container.querySelectorAll(className), function (elem) {
|
|
(elem.namespaceURI === fixedRenderer.SVG_NS ?
|
|
fixedRenderer.box :
|
|
fixedRenderer.box.parentNode).appendChild(elem);
|
|
elem.style.pointerEvents = 'auto';
|
|
});
|
|
});
|
|
};
|
|
/**
|
|
* @private
|
|
* @function Highcharts.Chart#applyFixed
|
|
* @return {void}
|
|
*/
|
|
Chart.prototype.applyFixed = function () {
|
|
var firstTime = !this.fixedDiv, chartOptions = this.options.chart, scrollableOptions = chartOptions.scrollablePlotArea, Renderer = RendererRegistry.getRendererType();
|
|
var fixedRenderer, scrollableWidth, scrollableHeight;
|
|
// First render
|
|
if (firstTime) {
|
|
this.fixedDiv = createElement('div', {
|
|
className: 'highcharts-fixed'
|
|
}, {
|
|
position: 'absolute',
|
|
overflow: 'hidden',
|
|
pointerEvents: 'none',
|
|
zIndex: (chartOptions.style && chartOptions.style.zIndex || 0) + 2,
|
|
top: 0
|
|
}, null, true);
|
|
if (this.scrollingContainer) {
|
|
this.scrollingContainer.parentNode.insertBefore(this.fixedDiv, this.scrollingContainer);
|
|
}
|
|
this.renderTo.style.overflow = 'visible';
|
|
this.fixedRenderer = fixedRenderer = new Renderer(this.fixedDiv, this.chartWidth, this.chartHeight, this.options.chart.style);
|
|
// Mask
|
|
this.scrollableMask = fixedRenderer
|
|
.path()
|
|
.attr({
|
|
fill: this.options.chart.backgroundColor || '#fff',
|
|
'fill-opacity': pick(scrollableOptions.opacity, 0.85),
|
|
zIndex: -1
|
|
})
|
|
.addClass('highcharts-scrollable-mask')
|
|
.add();
|
|
addEvent(this, 'afterShowResetZoom', this.moveFixedElements);
|
|
addEvent(this, 'afterApplyDrilldown', this.moveFixedElements);
|
|
addEvent(this, 'afterLayOutTitles', this.moveFixedElements);
|
|
}
|
|
else {
|
|
// Set the size of the fixed renderer to the visible width
|
|
this.fixedRenderer.setSize(this.chartWidth, this.chartHeight);
|
|
}
|
|
if (this.scrollableDirty || firstTime) {
|
|
this.scrollableDirty = false;
|
|
this.moveFixedElements();
|
|
}
|
|
// Increase the size of the scrollable renderer and background
|
|
scrollableWidth = this.chartWidth + (this.scrollablePixelsX || 0);
|
|
scrollableHeight = this.chartHeight + (this.scrollablePixelsY || 0);
|
|
stop(this.container);
|
|
this.container.style.width = scrollableWidth + 'px';
|
|
this.container.style.height = scrollableHeight + 'px';
|
|
this.renderer.boxWrapper.attr({
|
|
width: scrollableWidth,
|
|
height: scrollableHeight,
|
|
viewBox: [0, 0, scrollableWidth, scrollableHeight].join(' ')
|
|
});
|
|
this.chartBackground.attr({
|
|
width: scrollableWidth,
|
|
height: scrollableHeight
|
|
});
|
|
this.scrollingContainer.style.height = this.chartHeight + 'px';
|
|
// Set scroll position
|
|
if (firstTime) {
|
|
if (scrollableOptions.scrollPositionX) {
|
|
this.scrollingContainer.scrollLeft =
|
|
this.scrollablePixelsX *
|
|
scrollableOptions.scrollPositionX;
|
|
}
|
|
if (scrollableOptions.scrollPositionY) {
|
|
this.scrollingContainer.scrollTop =
|
|
this.scrollablePixelsY *
|
|
scrollableOptions.scrollPositionY;
|
|
}
|
|
}
|
|
// Mask behind the left and right side
|
|
var axisOffset = this.axisOffset, maskTop = this.plotTop - axisOffset[0] - 1, maskLeft = this.plotLeft - axisOffset[3] - 1, maskBottom = this.plotTop + this.plotHeight + axisOffset[2] + 1, maskRight = this.plotLeft + this.plotWidth + axisOffset[1] + 1, maskPlotRight = this.plotLeft + this.plotWidth -
|
|
(this.scrollablePixelsX || 0), maskPlotBottom = this.plotTop + this.plotHeight -
|
|
(this.scrollablePixelsY || 0), d;
|
|
if (this.scrollablePixelsX) {
|
|
d = [
|
|
// Left side
|
|
['M', 0, maskTop],
|
|
['L', this.plotLeft - 1, maskTop],
|
|
['L', this.plotLeft - 1, maskBottom],
|
|
['L', 0, maskBottom],
|
|
['Z'],
|
|
// Right side
|
|
['M', maskPlotRight, maskTop],
|
|
['L', this.chartWidth, maskTop],
|
|
['L', this.chartWidth, maskBottom],
|
|
['L', maskPlotRight, maskBottom],
|
|
['Z']
|
|
];
|
|
}
|
|
else if (this.scrollablePixelsY) {
|
|
d = [
|
|
// Top side
|
|
['M', maskLeft, 0],
|
|
['L', maskLeft, this.plotTop - 1],
|
|
['L', maskRight, this.plotTop - 1],
|
|
['L', maskRight, 0],
|
|
['Z'],
|
|
// Bottom side
|
|
['M', maskLeft, maskPlotBottom],
|
|
['L', maskLeft, this.chartHeight],
|
|
['L', maskRight, this.chartHeight],
|
|
['L', maskRight, maskPlotBottom],
|
|
['Z']
|
|
];
|
|
}
|
|
else {
|
|
d = [['M', 0, 0]];
|
|
}
|
|
if (this.redrawTrigger !== 'adjustHeight') {
|
|
this.scrollableMask.attr({ d: d });
|
|
}
|
|
};
|
|
addEvent(Axis, 'afterInit', function () {
|
|
this.chart.scrollableDirty = true;
|
|
});
|
|
addEvent(Series, 'show', function () {
|
|
this.chart.scrollableDirty = true;
|
|
});
|
|
/* *
|
|
*
|
|
* API Declarations
|
|
*
|
|
* */
|
|
/**
|
|
* Options for a scrollable plot area. This feature provides a minimum size for
|
|
* the plot area of the chart. If the size gets smaller than this, typically
|
|
* on mobile devices, a native browser scrollbar is presented. This scrollbar
|
|
* provides smooth scrolling for the contents of the plot area, whereas the
|
|
* title, legend and unaffected axes are fixed.
|
|
*
|
|
* Since v7.1.2, a scrollable plot area can be defined for either horizontal or
|
|
* vertical scrolling, depending on whether the `minWidth` or `minHeight`
|
|
* option is set.
|
|
*
|
|
* @sample highcharts/chart/scrollable-plotarea
|
|
* Scrollable plot area
|
|
* @sample highcharts/chart/scrollable-plotarea-vertical
|
|
* Vertically scrollable plot area
|
|
* @sample {gantt} gantt/chart/scrollable-plotarea-vertical
|
|
* Gantt chart with vertically scrollable plot area
|
|
*
|
|
* @since 6.1.0
|
|
* @product highcharts gantt
|
|
* @apioption chart.scrollablePlotArea
|
|
*/
|
|
/**
|
|
* The minimum height for the plot area. If it gets smaller than this, the plot
|
|
* area will become scrollable.
|
|
*
|
|
* @type {number}
|
|
* @since 7.1.2
|
|
* @apioption chart.scrollablePlotArea.minHeight
|
|
*/
|
|
/**
|
|
* The minimum width for the plot area. If it gets smaller than this, the plot
|
|
* area will become scrollable.
|
|
*
|
|
* @type {number}
|
|
* @since 6.1.0
|
|
* @apioption chart.scrollablePlotArea.minWidth
|
|
*/
|
|
/**
|
|
* The initial scrolling position of the scrollable plot area. Ranges from 0 to
|
|
* 1, where 0 aligns the plot area to the left and 1 aligns it to the right.
|
|
* Typically we would use 1 if the chart has right aligned Y axes.
|
|
*
|
|
* @type {number}
|
|
* @since 6.1.0
|
|
* @apioption chart.scrollablePlotArea.scrollPositionX
|
|
*/
|
|
/**
|
|
* The initial scrolling position of the scrollable plot area. Ranges from 0 to
|
|
* 1, where 0 aligns the plot area to the top and 1 aligns it to the bottom.
|
|
*
|
|
* @type {number}
|
|
* @since 7.1.2
|
|
* @apioption chart.scrollablePlotArea.scrollPositionY
|
|
*/
|
|
/**
|
|
* The opacity of mask applied on one of the sides of the plot
|
|
* area.
|
|
*
|
|
* @sample {highcharts} highcharts/chart/scrollable-plotarea-opacity
|
|
* Disabled opacity for the mask
|
|
*
|
|
* @type {number}
|
|
* @default 0.85
|
|
* @since 7.1.1
|
|
* @apioption chart.scrollablePlotArea.opacity
|
|
*/
|
|
(''); // keep doclets above in transpiled file
|