| Server IP : 49.231.201.246 / Your IP : 216.73.216.149 Web Server : Apache/2.4.18 (Ubuntu) System : Linux 246 4.4.0-210-generic #242-Ubuntu SMP Fri Apr 16 09:57:56 UTC 2021 x86_64 User : root ( 0) PHP Version : 7.0.33-0ubuntu0.16.04.16 Disable Function : exec,passthru,shell_exec,system,proc_open,popen,pcntl_exec MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /proc/11584/cwd/html/ppaobm/backend/web/assets/16c36a2e/es-modules/parts-3d/ |
Upload File : |
/* *
* (c) 2010-2019 Torstein Honsi
*
* Extension for 3D charts
*
* License: www.highcharts.com/license
*/
'use strict';
import H from '../parts/Globals.js';
import '../parts/Utilities.js';
import '../parts/Chart.js';
var addEvent = H.addEvent,
Chart = H.Chart,
merge = H.merge,
perspective = H.perspective,
pick = H.pick,
wrap = H.wrap;
// Shorthand to check the is3d flag
Chart.prototype.is3d = function () {
return (
this.options.chart.options3d &&
this.options.chart.options3d.enabled
); // #4280
};
Chart.prototype.propsRequireDirtyBox.push('chart.options3d');
Chart.prototype.propsRequireUpdateSeries.push('chart.options3d');
// Legacy support for HC < 6 to make 'scatter' series in a 3D chart route to the
// real 'scatter3d' series type.
addEvent(Chart, 'afterInit', function () {
var options = this.options;
if (this.is3d()) {
(options.series || []).forEach(function (s) {
var type = s.type ||
options.chart.type ||
options.chart.defaultSeriesType;
if (type === 'scatter') {
s.type = 'scatter3d';
}
});
}
});
// And do it on dynamic add (#8407)
addEvent(Chart, 'addSeries', function (e) {
if (this.is3d()) {
if (e.options.type === 'scatter') {
e.options.type = 'scatter3d';
}
}
});
/**
* Calculate scale of the 3D view. That is required to
* fit chart's 3D projection into the actual plotting area. Reported as #4933.
* @notice This function should ideally take the plot values instead of a chart
* object, but since the chart object is needed for perspective it is
* not practical. Possible to make both getScale and perspective more
* logical and also immutable.
*
* @private
* @function getScale
*
* @param {Highcharts.Chart} chart
* Chart object
*
* @param {number} depth
* The depth of the chart
*
* @return {number}
* The scale to fit the 3D chart into the plotting area.
*/
function getScale(chart, depth) {
var plotLeft = chart.plotLeft,
plotRight = chart.plotWidth + plotLeft,
plotTop = chart.plotTop,
plotBottom = chart.plotHeight + plotTop,
originX = plotLeft + chart.plotWidth / 2,
originY = plotTop + chart.plotHeight / 2,
bbox3d = {
minX: Number.MAX_VALUE,
maxX: -Number.MAX_VALUE,
minY: Number.MAX_VALUE,
maxY: -Number.MAX_VALUE
},
corners,
scale = 1;
// Top left corners:
corners = [{
x: plotLeft,
y: plotTop,
z: 0
}, {
x: plotLeft,
y: plotTop,
z: depth
}];
// Top right corners:
[0, 1].forEach(function (i) {
corners.push({
x: plotRight,
y: corners[i].y,
z: corners[i].z
});
});
// All bottom corners:
[0, 1, 2, 3].forEach(function (i) {
corners.push({
x: corners[i].x,
y: plotBottom,
z: corners[i].z
});
});
// Calculate 3D corners:
corners = perspective(corners, chart, false);
// Get bounding box of 3D element:
corners.forEach(function (corner) {
bbox3d.minX = Math.min(bbox3d.minX, corner.x);
bbox3d.maxX = Math.max(bbox3d.maxX, corner.x);
bbox3d.minY = Math.min(bbox3d.minY, corner.y);
bbox3d.maxY = Math.max(bbox3d.maxY, corner.y);
});
// Left edge:
if (plotLeft > bbox3d.minX) {
scale = Math.min(
scale,
1 - Math.abs((plotLeft + originX) / (bbox3d.minX + originX)) % 1
);
}
// Right edge:
if (plotRight < bbox3d.maxX) {
scale = Math.min(
scale,
(plotRight - originX) / (bbox3d.maxX - originX)
);
}
// Top edge:
if (plotTop > bbox3d.minY) {
if (bbox3d.minY < 0) {
scale = Math.min(
scale,
(plotTop + originY) / (-bbox3d.minY + plotTop + originY)
);
} else {
scale = Math.min(
scale,
1 - (plotTop + originY) / (bbox3d.minY + originY) % 1
);
}
}
// Bottom edge:
if (plotBottom < bbox3d.maxY) {
scale = Math.min(
scale,
Math.abs((plotBottom - originY) / (bbox3d.maxY - originY))
);
}
return scale;
}
H.wrap(H.Chart.prototype, 'isInsidePlot', function (proceed) {
return this.is3d() || proceed.apply(this, [].slice.call(arguments, 1));
});
var defaultOptions = H.getOptions();
/**
* @optionparent
*/
var extendedOptions = {
chart: {
/**
* Options to render charts in 3 dimensions. This feature requires
* `highcharts-3d.js`, found in the download package or online at
* [code.highcharts.com/highcharts-3d.js](http://code.highcharts.com/highcharts-3d.js).
*
* @since 4.0
* @product highcharts
*/
options3d: {
/**
* Wether to render the chart using the 3D functionality.
*
* @since 4.0
* @product highcharts
*/
enabled: false,
/**
* One of the two rotation angles for the chart.
*
* @since 4.0
* @product highcharts
*/
alpha: 0,
/**
* One of the two rotation angles for the chart.
*
* @since 4.0
* @product highcharts
*/
beta: 0,
/**
* The total depth of the chart.
*
* @since 4.0
* @product highcharts
*/
depth: 100,
/**
* Whether the 3d box should automatically adjust to the chart plot
* area.
*
* @since 4.2.4
* @product highcharts
*/
fitToPlot: true,
/**
* Defines the distance the viewer is standing in front of the
* chart, this setting is important to calculate the perspective
* effect in column and scatter charts. It is not used for 3D pie
* charts.
*
* @since 4.0
* @product highcharts
*/
viewDistance: 25,
/**
* Set it to `"auto"` to automatically move the labels to the best
* edge.
*
* @type {"auto"|null}
* @since 5.0.12
* @product highcharts
*/
axisLabelPosition: null,
/**
* Provides the option to draw a frame around the charts by defining
* a bottom, front and back panel.
*
* @since 4.0
* @product highcharts
*/
frame: {
/**
* Whether the frames are visible.
*/
visible: 'default',
/**
* General pixel thickness for the frame faces.
*/
size: 1,
/**
* The bottom of the frame around a 3D chart.
*
* @since 4.0
* @product highcharts
*/
/**
* The color of the panel.
*
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @default transparent
* @since 4.0
* @product highcharts
* @apioption chart.options3d.frame.bottom.color
*/
/**
* The thickness of the panel.
*
* @type {number}
* @default 1
* @since 4.0
* @product highcharts
* @apioption chart.options3d.frame.bottom.size
*/
/**
* Whether to display the frame. Possible values are `true`,
* `false`, `"auto"` to display only the frames behind the data,
* and `"default"` to display faces behind the data based on the
* axis layout, ignoring the point of view.
*
* @sample {highcharts} highcharts/3d/scatter-frame/
* Auto frames
*
* @type {boolean|"default"|"auto"}
* @default default
* @since 5.0.12
* @product highcharts
* @apioption chart.options3d.frame.bottom.visible
*/
/**
* The bottom of the frame around a 3D chart.
*/
bottom: {},
/**
* The top of the frame around a 3D chart.
*
* @extends chart.options3d.frame.bottom
*/
top: {},
/**
* The left side of the frame around a 3D chart.
*
* @extends chart.options3d.frame.bottom
*/
left: {},
/**
* The right of the frame around a 3D chart.
*
* @extends chart.options3d.frame.bottom
*/
right: {},
/**
* The back side of the frame around a 3D chart.
*
* @extends chart.options3d.frame.bottom
*/
back: {},
/**
* The front of the frame around a 3D chart.
*
* @extends chart.options3d.frame.bottom
*/
front: {}
}
}
}
};
merge(true, defaultOptions, extendedOptions);
// Add the required CSS classes for column sides (#6018)
addEvent(Chart, 'afterGetContainer', function () {
if (this.styledMode) {
this.renderer.definition({
tagName: 'style',
textContent:
'.highcharts-3d-top{' +
'filter: url(#highcharts-brighter)' +
'}\n' +
'.highcharts-3d-side{' +
'filter: url(#highcharts-darker)' +
'}\n'
});
// Add add definitions used by brighter and darker faces of the cuboids.
[{
name: 'darker',
slope: 0.6
}, {
name: 'brighter',
slope: 1.4
}].forEach(function (cfg) {
this.renderer.definition({
tagName: 'filter',
id: 'highcharts-' + cfg.name,
children: [{
tagName: 'feComponentTransfer',
children: [{
tagName: 'feFuncR',
type: 'linear',
slope: cfg.slope
}, {
tagName: 'feFuncG',
type: 'linear',
slope: cfg.slope
}, {
tagName: 'feFuncB',
type: 'linear',
slope: cfg.slope
}]
}]
});
}, this);
}
});
wrap(Chart.prototype, 'setClassName', function (proceed) {
proceed.apply(this, [].slice.call(arguments, 1));
if (this.is3d()) {
this.container.className += ' highcharts-3d-chart';
}
});
addEvent(H.Chart, 'afterSetChartSize', function () {
var chart = this,
options3d = chart.options.chart.options3d;
if (chart.is3d()) {
var inverted = chart.inverted,
clipBox = chart.clipBox,
margin = chart.margin,
x = inverted ? 'y' : 'x',
y = inverted ? 'x' : 'y',
w = inverted ? 'height' : 'width',
h = inverted ? 'width' : 'height';
clipBox[x] = -(margin[3] || 0);
clipBox[y] = -(margin[0] || 0);
clipBox[w] = chart.chartWidth + (margin[3] || 0) + (margin[1] || 0);
clipBox[h] = chart.chartHeight + (margin[0] || 0) + (margin[2] || 0);
// Set scale, used later in perspective method():
// getScale uses perspective, so scale3d has to be reset.
chart.scale3d = 1;
if (options3d.fitToPlot === true) {
chart.scale3d = getScale(chart, options3d.depth);
}
// Recalculate the 3d frame with every call of setChartSize,
// instead of doing it after every redraw(). It avoids ticks
// and axis title outside of chart.
chart.frame3d = this.get3dFrame(); // #7942
}
});
addEvent(Chart, 'beforeRedraw', function () {
if (this.is3d()) {
// Set to force a redraw of all elements
this.isDirtyBox = true;
}
});
addEvent(Chart, 'beforeRender', function () {
if (this.is3d()) {
this.frame3d = this.get3dFrame();
}
});
// Draw the series in the reverse order (#3803, #3917)
wrap(Chart.prototype, 'renderSeries', function (proceed) {
var series,
i = this.series.length;
if (this.is3d()) {
while (i--) {
series = this.series[i];
series.translate();
series.render();
}
} else {
proceed.call(this);
}
});
addEvent(Chart, 'afterDrawChartBox', function () {
if (this.is3d()) {
var chart = this,
renderer = chart.renderer,
options3d = this.options.chart.options3d,
frame = chart.get3dFrame(),
xm = this.plotLeft,
xp = this.plotLeft + this.plotWidth,
ym = this.plotTop,
yp = this.plotTop + this.plotHeight,
zm = 0,
zp = options3d.depth,
xmm = xm - (frame.left.visible ? frame.left.size : 0),
xpp = xp + (frame.right.visible ? frame.right.size : 0),
ymm = ym - (frame.top.visible ? frame.top.size : 0),
ypp = yp + (frame.bottom.visible ? frame.bottom.size : 0),
zmm = zm - (frame.front.visible ? frame.front.size : 0),
zpp = zp + (frame.back.visible ? frame.back.size : 0),
verb = chart.hasRendered ? 'animate' : 'attr';
this.frame3d = frame;
if (!this.frameShapes) {
this.frameShapes = {
bottom: renderer.polyhedron().add(),
top: renderer.polyhedron().add(),
left: renderer.polyhedron().add(),
right: renderer.polyhedron().add(),
back: renderer.polyhedron().add(),
front: renderer.polyhedron().add()
};
}
this.frameShapes.bottom[verb]({
'class': 'highcharts-3d-frame highcharts-3d-frame-bottom',
zIndex: frame.bottom.frontFacing ? -1000 : 1000,
faces: [{ // bottom
fill: H.color(frame.bottom.color).brighten(0.1).get(),
vertexes: [{
x: xmm,
y: ypp,
z: zmm
}, {
x: xpp,
y: ypp,
z: zmm
}, {
x: xpp,
y: ypp,
z: zpp
}, {
x: xmm,
y: ypp,
z: zpp
}],
enabled: frame.bottom.visible
},
{ // top
fill: H.color(frame.bottom.color).brighten(0.1).get(),
vertexes: [{
x: xm,
y: yp,
z: zp
}, {
x: xp,
y: yp,
z: zp
}, {
x: xp,
y: yp,
z: zm
}, {
x: xm,
y: yp,
z: zm
}],
enabled: frame.bottom.visible
},
{ // left
fill: H.color(frame.bottom.color).brighten(-0.1).get(),
vertexes: [{
x: xmm,
y: ypp,
z: zmm
}, {
x: xmm,
y: ypp,
z: zpp
}, {
x: xm,
y: yp,
z: zp
}, {
x: xm,
y: yp,
z: zm
}],
enabled: frame.bottom.visible && !frame.left.visible
},
{ // right
fill: H.color(frame.bottom.color).brighten(-0.1).get(),
vertexes: [{
x: xpp,
y: ypp,
z: zpp
}, {
x: xpp,
y: ypp,
z: zmm
}, {
x: xp,
y: yp,
z: zm
}, {
x: xp,
y: yp,
z: zp
}],
enabled: frame.bottom.visible && !frame.right.visible
},
{ // front
fill: H.color(frame.bottom.color).get(),
vertexes: [{
x: xpp,
y: ypp,
z: zmm
}, {
x: xmm,
y: ypp,
z: zmm
}, {
x: xm,
y: yp,
z: zm
}, {
x: xp,
y: yp,
z: zm
}],
enabled: frame.bottom.visible && !frame.front.visible
},
{ // back
fill: H.color(frame.bottom.color).get(),
vertexes: [{
x: xmm,
y: ypp,
z: zpp
}, {
x: xpp,
y: ypp,
z: zpp
}, {
x: xp,
y: yp,
z: zp
}, {
x: xm,
y: yp,
z: zp
}],
enabled: frame.bottom.visible && !frame.back.visible
}]
});
this.frameShapes.top[verb]({
'class': 'highcharts-3d-frame highcharts-3d-frame-top',
zIndex: frame.top.frontFacing ? -1000 : 1000,
faces: [{ // bottom
fill: H.color(frame.top.color).brighten(0.1).get(),
vertexes: [{
x: xmm,
y: ymm,
z: zpp
}, {
x: xpp,
y: ymm,
z: zpp
}, {
x: xpp,
y: ymm,
z: zmm
}, {
x: xmm,
y: ymm,
z: zmm
}],
enabled: frame.top.visible
},
{ // top
fill: H.color(frame.top.color).brighten(0.1).get(),
vertexes: [{
x: xm,
y: ym,
z: zm
}, {
x: xp,
y: ym,
z: zm
}, {
x: xp,
y: ym,
z: zp
}, {
x: xm,
y: ym,
z: zp
}],
enabled: frame.top.visible
},
{ // left
fill: H.color(frame.top.color).brighten(-0.1).get(),
vertexes: [{
x: xmm,
y: ymm,
z: zpp
}, {
x: xmm,
y: ymm,
z: zmm
}, {
x: xm,
y: ym,
z: zm
}, {
x: xm,
y: ym,
z: zp
}],
enabled: frame.top.visible && !frame.left.visible
},
{ // right
fill: H.color(frame.top.color).brighten(-0.1).get(),
vertexes: [{
x: xpp,
y: ymm,
z: zmm
}, {
x: xpp,
y: ymm,
z: zpp
}, {
x: xp,
y: ym,
z: zp
}, {
x: xp,
y: ym,
z: zm
}],
enabled: frame.top.visible && !frame.right.visible
},
{ // front
fill: H.color(frame.top.color).get(),
vertexes: [{
x: xmm,
y: ymm,
z: zmm
}, {
x: xpp,
y: ymm,
z: zmm
}, {
x: xp,
y: ym,
z: zm
}, {
x: xm,
y: ym,
z: zm
}],
enabled: frame.top.visible && !frame.front.visible
},
{ // back
fill: H.color(frame.top.color).get(),
vertexes: [{
x: xpp,
y: ymm,
z: zpp
}, {
x: xmm,
y: ymm,
z: zpp
}, {
x: xm,
y: ym,
z: zp
}, {
x: xp,
y: ym,
z: zp
}],
enabled: frame.top.visible && !frame.back.visible
}]
});
this.frameShapes.left[verb]({
'class': 'highcharts-3d-frame highcharts-3d-frame-left',
zIndex: frame.left.frontFacing ? -1000 : 1000,
faces: [{ // bottom
fill: H.color(frame.left.color).brighten(0.1).get(),
vertexes: [{
x: xmm,
y: ypp,
z: zmm
}, {
x: xm,
y: yp,
z: zm
}, {
x: xm,
y: yp,
z: zp
}, {
x: xmm,
y: ypp,
z: zpp
}],
enabled: frame.left.visible && !frame.bottom.visible
},
{ // top
fill: H.color(frame.left.color).brighten(0.1).get(),
vertexes: [{
x: xmm,
y: ymm,
z: zpp
}, {
x: xm,
y: ym,
z: zp
}, {
x: xm,
y: ym,
z: zm
}, {
x: xmm,
y: ymm,
z: zmm
}],
enabled: frame.left.visible && !frame.top.visible
},
{ // left
fill: H.color(frame.left.color).brighten(-0.1).get(),
vertexes: [{
x: xmm,
y: ypp,
z: zpp
}, {
x: xmm,
y: ymm,
z: zpp
}, {
x: xmm,
y: ymm,
z: zmm
}, {
x: xmm,
y: ypp,
z: zmm
}],
enabled: frame.left.visible
},
{ // right
fill: H.color(frame.left.color).brighten(-0.1).get(),
vertexes: [{
x: xm,
y: ym,
z: zp
}, {
x: xm,
y: yp,
z: zp
}, {
x: xm,
y: yp,
z: zm
}, {
x: xm,
y: ym,
z: zm
}],
enabled: frame.left.visible
},
{ // front
fill: H.color(frame.left.color).get(),
vertexes: [{
x: xmm,
y: ypp,
z: zmm
}, {
x: xmm,
y: ymm,
z: zmm
}, {
x: xm,
y: ym,
z: zm
}, {
x: xm,
y: yp,
z: zm
}],
enabled: frame.left.visible && !frame.front.visible
},
{ // back
fill: H.color(frame.left.color).get(),
vertexes: [{
x: xmm,
y: ymm,
z: zpp
}, {
x: xmm,
y: ypp,
z: zpp
}, {
x: xm,
y: yp,
z: zp
}, {
x: xm,
y: ym,
z: zp
}],
enabled: frame.left.visible && !frame.back.visible
}]
});
this.frameShapes.right[verb]({
'class': 'highcharts-3d-frame highcharts-3d-frame-right',
zIndex: frame.right.frontFacing ? -1000 : 1000,
faces: [{ // bottom
fill: H.color(frame.right.color).brighten(0.1).get(),
vertexes: [{
x: xpp,
y: ypp,
z: zpp
}, {
x: xp,
y: yp,
z: zp
}, {
x: xp,
y: yp,
z: zm
}, {
x: xpp,
y: ypp,
z: zmm
}],
enabled: frame.right.visible && !frame.bottom.visible
},
{ // top
fill: H.color(frame.right.color).brighten(0.1).get(),
vertexes: [{
x: xpp,
y: ymm,
z: zmm
}, {
x: xp,
y: ym,
z: zm
}, {
x: xp,
y: ym,
z: zp
}, {
x: xpp,
y: ymm,
z: zpp
}],
enabled: frame.right.visible && !frame.top.visible
},
{ // left
fill: H.color(frame.right.color).brighten(-0.1).get(),
vertexes: [{
x: xp,
y: ym,
z: zm
}, {
x: xp,
y: yp,
z: zm
}, {
x: xp,
y: yp,
z: zp
}, {
x: xp,
y: ym,
z: zp
}],
enabled: frame.right.visible
},
{ // right
fill: H.color(frame.right.color).brighten(-0.1).get(),
vertexes: [{
x: xpp,
y: ypp,
z: zmm
}, {
x: xpp,
y: ymm,
z: zmm
}, {
x: xpp,
y: ymm,
z: zpp
}, {
x: xpp,
y: ypp,
z: zpp
}],
enabled: frame.right.visible
},
{ // front
fill: H.color(frame.right.color).get(),
vertexes: [{
x: xpp,
y: ymm,
z: zmm
}, {
x: xpp,
y: ypp,
z: zmm
}, {
x: xp,
y: yp,
z: zm
}, {
x: xp,
y: ym,
z: zm
}],
enabled: frame.right.visible && !frame.front.visible
},
{ // back
fill: H.color(frame.right.color).get(),
vertexes: [{
x: xpp,
y: ypp,
z: zpp
}, {
x: xpp,
y: ymm,
z: zpp
}, {
x: xp,
y: ym,
z: zp
}, {
x: xp,
y: yp,
z: zp
}],
enabled: frame.right.visible && !frame.back.visible
}]
});
this.frameShapes.back[verb]({
'class': 'highcharts-3d-frame highcharts-3d-frame-back',
zIndex: frame.back.frontFacing ? -1000 : 1000,
faces: [{ // bottom
fill: H.color(frame.back.color).brighten(0.1).get(),
vertexes: [{
x: xpp,
y: ypp,
z: zpp
}, {
x: xmm,
y: ypp,
z: zpp
}, {
x: xm,
y: yp,
z: zp
}, {
x: xp,
y: yp,
z: zp
}],
enabled: frame.back.visible && !frame.bottom.visible
},
{ // top
fill: H.color(frame.back.color).brighten(0.1).get(),
vertexes: [{
x: xmm,
y: ymm,
z: zpp
}, {
x: xpp,
y: ymm,
z: zpp
}, {
x: xp,
y: ym,
z: zp
}, {
x: xm,
y: ym,
z: zp
}],
enabled: frame.back.visible && !frame.top.visible
},
{ // left
fill: H.color(frame.back.color).brighten(-0.1).get(),
vertexes: [{
x: xmm,
y: ypp,
z: zpp
}, {
x: xmm,
y: ymm,
z: zpp
}, {
x: xm,
y: ym,
z: zp
}, {
x: xm,
y: yp,
z: zp
}],
enabled: frame.back.visible && !frame.left.visible
},
{ // right
fill: H.color(frame.back.color).brighten(-0.1).get(),
vertexes: [{
x: xpp,
y: ymm,
z: zpp
}, {
x: xpp,
y: ypp,
z: zpp
}, {
x: xp,
y: yp,
z: zp
}, {
x: xp,
y: ym,
z: zp
}],
enabled: frame.back.visible && !frame.right.visible
},
{ // front
fill: H.color(frame.back.color).get(),
vertexes: [{
x: xm,
y: ym,
z: zp
}, {
x: xp,
y: ym,
z: zp
}, {
x: xp,
y: yp,
z: zp
}, {
x: xm,
y: yp,
z: zp
}],
enabled: frame.back.visible
},
{ // back
fill: H.color(frame.back.color).get(),
vertexes: [{
x: xmm,
y: ypp,
z: zpp
}, {
x: xpp,
y: ypp,
z: zpp
}, {
x: xpp,
y: ymm,
z: zpp
}, {
x: xmm,
y: ymm,
z: zpp
}],
enabled: frame.back.visible
}]
});
this.frameShapes.front[verb]({
'class': 'highcharts-3d-frame highcharts-3d-frame-front',
zIndex: frame.front.frontFacing ? -1000 : 1000,
faces: [{ // bottom
fill: H.color(frame.front.color).brighten(0.1).get(),
vertexes: [{
x: xmm,
y: ypp,
z: zmm
}, {
x: xpp,
y: ypp,
z: zmm
}, {
x: xp,
y: yp,
z: zm
}, {
x: xm,
y: yp,
z: zm
}],
enabled: frame.front.visible && !frame.bottom.visible
},
{ // top
fill: H.color(frame.front.color).brighten(0.1).get(),
vertexes: [{
x: xpp,
y: ymm,
z: zmm
}, {
x: xmm,
y: ymm,
z: zmm
}, {
x: xm,
y: ym,
z: zm
}, {
x: xp,
y: ym,
z: zm
}],
enabled: frame.front.visible && !frame.top.visible
},
{ // left
fill: H.color(frame.front.color).brighten(-0.1).get(),
vertexes: [{
x: xmm,
y: ymm,
z: zmm
}, {
x: xmm,
y: ypp,
z: zmm
}, {
x: xm,
y: yp,
z: zm
}, {
x: xm,
y: ym,
z: zm
}],
enabled: frame.front.visible && !frame.left.visible
},
{ // right
fill: H.color(frame.front.color).brighten(-0.1).get(),
vertexes: [{
x: xpp,
y: ypp,
z: zmm
}, {
x: xpp,
y: ymm,
z: zmm
}, {
x: xp,
y: ym,
z: zm
}, {
x: xp,
y: yp,
z: zm
}],
enabled: frame.front.visible && !frame.right.visible
},
{ // front
fill: H.color(frame.front.color).get(),
vertexes: [{
x: xp,
y: ym,
z: zm
}, {
x: xm,
y: ym,
z: zm
}, {
x: xm,
y: yp,
z: zm
}, {
x: xp,
y: yp,
z: zm
}],
enabled: frame.front.visible
},
{ // back
fill: H.color(frame.front.color).get(),
vertexes: [{
x: xpp,
y: ypp,
z: zmm
}, {
x: xmm,
y: ypp,
z: zmm
}, {
x: xmm,
y: ymm,
z: zmm
}, {
x: xpp,
y: ymm,
z: zmm
}],
enabled: frame.front.visible
}]
});
}
});
Chart.prototype.retrieveStacks = function (stacking) {
var series = this.series,
stacks = {},
stackNumber,
i = 1;
this.series.forEach(function (s) {
stackNumber = pick(
s.options.stack,
(stacking ? 0 : series.length - 1 - s.index)
); // #3841, #4532
if (!stacks[stackNumber]) {
stacks[stackNumber] = { series: [s], position: i };
i++;
} else {
stacks[stackNumber].series.push(s);
}
});
stacks.totalStacks = i + 1;
return stacks;
};
Chart.prototype.get3dFrame = function () {
var chart = this,
options3d = chart.options.chart.options3d,
frameOptions = options3d.frame,
xm = chart.plotLeft,
xp = chart.plotLeft + chart.plotWidth,
ym = chart.plotTop,
yp = chart.plotTop + chart.plotHeight,
zm = 0,
zp = options3d.depth,
faceOrientation = function (vertexes) {
var area = H.shapeArea3d(vertexes, chart);
// Give it 0.5 squared-pixel as a margin for rounding errors.
if (area > 0.5) {
return 1;
}
if (area < -0.5) {
return -1;
}
return 0;
},
bottomOrientation = faceOrientation([
{ x: xm, y: yp, z: zp },
{ x: xp, y: yp, z: zp },
{ x: xp, y: yp, z: zm },
{ x: xm, y: yp, z: zm }
]),
topOrientation = faceOrientation([
{ x: xm, y: ym, z: zm },
{ x: xp, y: ym, z: zm },
{ x: xp, y: ym, z: zp },
{ x: xm, y: ym, z: zp }
]),
leftOrientation = faceOrientation([
{ x: xm, y: ym, z: zm },
{ x: xm, y: ym, z: zp },
{ x: xm, y: yp, z: zp },
{ x: xm, y: yp, z: zm }
]),
rightOrientation = faceOrientation([
{ x: xp, y: ym, z: zp },
{ x: xp, y: ym, z: zm },
{ x: xp, y: yp, z: zm },
{ x: xp, y: yp, z: zp }
]),
frontOrientation = faceOrientation([
{ x: xm, y: yp, z: zm },
{ x: xp, y: yp, z: zm },
{ x: xp, y: ym, z: zm },
{ x: xm, y: ym, z: zm }
]),
backOrientation = faceOrientation([
{ x: xm, y: ym, z: zp },
{ x: xp, y: ym, z: zp },
{ x: xp, y: yp, z: zp },
{ x: xm, y: yp, z: zp }
]),
defaultShowBottom = false,
defaultShowTop = false,
defaultShowLeft = false,
defaultShowRight = false,
defaultShowFront = false,
defaultShowBack = true;
// The 'default' criteria to visible faces of the frame is looking up every
// axis to decide whenever the left/right//top/bottom sides of the frame
// will be shown
[].concat(chart.xAxis, chart.yAxis, chart.zAxis).forEach(function (axis) {
if (axis) {
if (axis.horiz) {
if (axis.opposite) {
defaultShowTop = true;
} else {
defaultShowBottom = true;
}
} else {
if (axis.opposite) {
defaultShowRight = true;
} else {
defaultShowLeft = true;
}
}
}
});
var getFaceOptions = function (sources, faceOrientation, defaultVisible) {
var faceAttrs = ['size', 'color', 'visible'];
var options = {};
for (var i = 0; i < faceAttrs.length; i++) {
var attr = faceAttrs[i];
for (var j = 0; j < sources.length; j++) {
if (typeof sources[j] === 'object') {
var val = sources[j][attr];
if (val !== undefined && val !== null) {
options[attr] = val;
break;
}
}
}
}
var isVisible = defaultVisible;
if (options.visible === true || options.visible === false) {
isVisible = options.visible;
} else if (options.visible === 'auto') {
isVisible = faceOrientation > 0;
}
return {
size: pick(options.size, 1),
color: pick(options.color, 'none'),
frontFacing: faceOrientation > 0,
visible: isVisible
};
};
// docs @TODO: Add all frame options (left, right, top, bottom, front, back)
// to apioptions JSDoc once the new system is up.
var ret = {
// FIXME: Previously, left/right, top/bottom and front/back pairs shared
// size and color.
// For compatibility and consistency sake, when one face have
// size/color/visibility set, the opposite face will default to the same
// values. Also, left/right used to be called 'side', so that's also
// added as a fallback
bottom: getFaceOptions(
[frameOptions.bottom, frameOptions.top, frameOptions],
bottomOrientation,
defaultShowBottom
),
top: getFaceOptions(
[frameOptions.top, frameOptions.bottom, frameOptions],
topOrientation,
defaultShowTop
),
left: getFaceOptions(
[
frameOptions.left,
frameOptions.right,
frameOptions.side,
frameOptions
],
leftOrientation,
defaultShowLeft
),
right: getFaceOptions(
[
frameOptions.right,
frameOptions.left,
frameOptions.side,
frameOptions
],
rightOrientation,
defaultShowRight
),
back: getFaceOptions(
[frameOptions.back, frameOptions.front, frameOptions],
backOrientation,
defaultShowBack
),
front: getFaceOptions(
[frameOptions.front, frameOptions.back, frameOptions],
frontOrientation,
defaultShowFront
)
};
// Decide the bast place to put axis title/labels based on the visible
// faces. Ideally, The labels can only be on the edge between a visible face
// and an invisble one. Also, the Y label should be one the left-most edge
// (right-most if opposite),
if (options3d.axisLabelPosition === 'auto') {
var isValidEdge = function (face1, face2) {
return (
(face1.visible !== face2.visible) ||
(
face1.visible &&
face2.visible &&
(face1.frontFacing !== face2.frontFacing)
)
);
};
var yEdges = [];
if (isValidEdge(ret.left, ret.front)) {
yEdges.push({
y: (ym + yp) / 2,
x: xm,
z: zm,
xDir: { x: 1, y: 0, z: 0 }
});
}
if (isValidEdge(ret.left, ret.back)) {
yEdges.push({
y: (ym + yp) / 2,
x: xm,
z: zp,
xDir: { x: 0, y: 0, z: -1 }
});
}
if (isValidEdge(ret.right, ret.front)) {
yEdges.push({
y: (ym + yp) / 2,
x: xp,
z: zm,
xDir: { x: 0, y: 0, z: 1 }
});
}
if (isValidEdge(ret.right, ret.back)) {
yEdges.push({
y: (ym + yp) / 2,
x: xp,
z: zp,
xDir: { x: -1, y: 0, z: 0 }
});
}
var xBottomEdges = [];
if (isValidEdge(ret.bottom, ret.front)) {
xBottomEdges.push({
x: (xm + xp) / 2,
y: yp,
z: zm,
xDir: { x: 1, y: 0, z: 0 }
});
}
if (isValidEdge(ret.bottom, ret.back)) {
xBottomEdges.push({
x: (xm + xp) / 2,
y: yp,
z: zp,
xDir: { x: -1, y: 0, z: 0 }
});
}
var xTopEdges = [];
if (isValidEdge(ret.top, ret.front)) {
xTopEdges.push({
x: (xm + xp) / 2,
y: ym,
z: zm,
xDir: { x: 1, y: 0, z: 0 }
});
}
if (isValidEdge(ret.top, ret.back)) {
xTopEdges.push({
x: (xm + xp) / 2,
y: ym,
z: zp,
xDir: { x: -1, y: 0, z: 0 }
});
}
var zBottomEdges = [];
if (isValidEdge(ret.bottom, ret.left)) {
zBottomEdges.push({
z: (zm + zp) / 2,
y: yp,
x: xm,
xDir: { x: 0, y: 0, z: -1 }
});
}
if (isValidEdge(ret.bottom, ret.right)) {
zBottomEdges.push({
z: (zm + zp) / 2,
y: yp,
x: xp,
xDir: { x: 0, y: 0, z: 1 }
});
}
var zTopEdges = [];
if (isValidEdge(ret.top, ret.left)) {
zTopEdges.push({
z: (zm + zp) / 2,
y: ym,
x: xm,
xDir: { x: 0, y: 0, z: -1 }
});
}
if (isValidEdge(ret.top, ret.right)) {
zTopEdges.push({
z: (zm + zp) / 2,
y: ym,
x: xp,
xDir: { x: 0, y: 0, z: 1 }
});
}
var pickEdge = function (edges, axis, mult) {
if (edges.length === 0) {
return null;
}
if (edges.length === 1) {
return edges[0];
}
var best = 0,
projections = perspective(edges, chart, false);
for (var i = 1; i < projections.length; i++) {
if (
mult * projections[i][axis] >
mult * projections[best][axis]
) {
best = i;
} else if (
(
mult * projections[i][axis] ===
mult * projections[best][axis]
) &&
(projections[i].z < projections[best].z)
) {
best = i;
}
}
return edges[best];
};
ret.axes = {
y: {
'left': pickEdge(yEdges, 'x', -1),
'right': pickEdge(yEdges, 'x', +1)
},
x: {
'top': pickEdge(xTopEdges, 'y', -1),
'bottom': pickEdge(xBottomEdges, 'y', +1)
},
z: {
'top': pickEdge(zTopEdges, 'y', -1),
'bottom': pickEdge(zBottomEdges, 'y', +1)
}
};
} else {
ret.axes = {
y: {
'left': { x: xm, z: zm, xDir: { x: 1, y: 0, z: 0 } },
'right': { x: xp, z: zm, xDir: { x: 0, y: 0, z: 1 } }
},
x: {
'top': { y: ym, z: zm, xDir: { x: 1, y: 0, z: 0 } },
'bottom': { y: yp, z: zm, xDir: { x: 1, y: 0, z: 0 } }
},
z: {
'top': {
x: defaultShowLeft ? xp : xm,
y: ym,
xDir: defaultShowLeft ?
{ x: 0, y: 0, z: 1 } :
{ x: 0, y: 0, z: -1 }
},
'bottom': {
x: defaultShowLeft ? xp : xm,
y: yp,
xDir: defaultShowLeft ?
{ x: 0, y: 0, z: 1 } :
{ x: 0, y: 0, z: -1 }
}
}
};
}
return ret;
};
// Animation setter for matrix property.
H.Fx.prototype.matrixSetter = function () {
var interpolated;
if (this.pos < 1 &&
(H.isArray(this.start) || H.isArray(this.end))) {
var start = this.start || [1, 0, 0, 1, 0, 0];
var end = this.end || [1, 0, 0, 1, 0, 0];
interpolated = [];
for (var i = 0; i < 6; i++) {
interpolated.push(this.pos * end[i] + (1 - this.pos) * start[i]);
}
} else {
interpolated = this.end;
}
this.elem.attr(
this.prop,
interpolated,
null,
true
);
};
/**
* Note: As of v5.0.12, `frame.left` or `frame.right` should be used instead.
*
* The side for the frame around a 3D chart.
*
* @deprecated
* @since 4.0
* @product highcharts
* @apioption chart.options3d.frame.side
*/
/**
* The color of the panel.
*
* @deprecated
* @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
* @default transparent
* @since 4.0
* @product highcharts
* @apioption chart.options3d.frame.side.color
*/
/**
* The thickness of the panel.
*
* @deprecated
* @type {number}
* @default 1
* @since 4.0
* @product highcharts
* @apioption chart.options3d.frame.side.size
*/