601 lines
21 KiB
JavaScript
601 lines
21 KiB
JavaScript
/**
|
|
* @license Highcharts JS v11.4.1 (2024-04-04)
|
|
*
|
|
* Highcharts cylinder module
|
|
*
|
|
* (c) 2010-2024 Kacper Madej
|
|
*
|
|
* 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/cylinder', ['highcharts', 'highcharts/highcharts-3d'], 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, 'Series/Cylinder/SVGElement3DCylinder.js', [_modules['Core/Color/Color.js'], _modules['Core/Renderer/RendererRegistry.js']], function (Color, RendererRegistry) {
|
|
/* *
|
|
*
|
|
* Highcharts cylinder - a 3D series
|
|
*
|
|
* (c) 2010-2024 Highsoft AS
|
|
*
|
|
* Author: Kacper Madej
|
|
*
|
|
* License: www.highcharts.com/license
|
|
*
|
|
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
|
*
|
|
* */
|
|
const { parse: color } = Color;
|
|
const { Element3D: SVGElement3D } = RendererRegistry.getRendererType().prototype;
|
|
/* *
|
|
*
|
|
* Class
|
|
*
|
|
* */
|
|
class SVGElement3DCylinder extends SVGElement3D {
|
|
constructor() {
|
|
/* *
|
|
*
|
|
* Properties
|
|
*
|
|
* */
|
|
super(...arguments);
|
|
this.parts = ['top', 'bottom', 'front', 'back'];
|
|
this.pathType = 'cylinder';
|
|
}
|
|
/* *
|
|
*
|
|
* Functions
|
|
*
|
|
* */
|
|
fillSetter(fill) {
|
|
this.singleSetterForParts('fill', null, {
|
|
front: fill,
|
|
back: fill,
|
|
top: color(fill).brighten(0.1).get(),
|
|
bottom: color(fill).brighten(-0.1).get()
|
|
});
|
|
// Fill for animation getter (#6776)
|
|
this.color = this.fill = fill;
|
|
return this;
|
|
}
|
|
}
|
|
/* *
|
|
*
|
|
* Default Export
|
|
*
|
|
* */
|
|
|
|
return SVGElement3DCylinder;
|
|
});
|
|
_registerModule(_modules, 'Series/Cylinder/CylinderComposition.js', [_modules['Core/Globals.js'], _modules['Core/Math3D.js'], _modules['Series/Cylinder/SVGElement3DCylinder.js'], _modules['Core/Utilities.js']], function (H, Math3D, SVGElement3DCylinder, U) {
|
|
/* *
|
|
*
|
|
* Highcharts cylinder - a 3D series
|
|
*
|
|
* (c) 2010-2024 Highsoft AS
|
|
*
|
|
* Author: Kacper Madej
|
|
*
|
|
* License: www.highcharts.com/license
|
|
*
|
|
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
|
*
|
|
* */
|
|
const { charts, deg2rad } = H;
|
|
const { perspective } = Math3D;
|
|
const { extend, pick } = U;
|
|
/* *
|
|
*
|
|
* Functions
|
|
*
|
|
* */
|
|
/**
|
|
*
|
|
*/
|
|
function compose(SVGRendererClass) {
|
|
const rendererProto = SVGRendererClass.prototype;
|
|
if (!rendererProto.cylinder) {
|
|
rendererProto.Element3D.types.cylinder = SVGElement3DCylinder;
|
|
extend(rendererProto, {
|
|
cylinder: rendererCylinder,
|
|
cylinderPath: rendererCylinderPath,
|
|
getCurvedPath: rendererGetCurvedPath,
|
|
getCylinderBack: rendererGetCylinderBack,
|
|
getCylinderEnd: rendererGetCylinderEnd,
|
|
getCylinderFront: rendererGetCylinderFront
|
|
});
|
|
}
|
|
}
|
|
/**
|
|
* Check if a path is simplified. The simplified path contains only lineTo
|
|
* segments, whereas non-simplified contain curves.
|
|
* @private
|
|
*/
|
|
function isSimplified(path) {
|
|
return !path.some((seg) => seg[0] === 'C');
|
|
}
|
|
/** @private */
|
|
function rendererCylinder(shapeArgs) {
|
|
return this.element3d('cylinder', shapeArgs);
|
|
}
|
|
/**
|
|
* Generates paths and zIndexes.
|
|
* @private
|
|
*/
|
|
function rendererCylinderPath(shapeArgs) {
|
|
const renderer = this, chart = charts[renderer.chartIndex],
|
|
// Decide zIndexes of parts based on cuboid logic, for consistency.
|
|
cuboidData = this.cuboidPath(shapeArgs), isTopFirst = !cuboidData.isTop, isFronFirst = !cuboidData.isFront, top = renderer.getCylinderEnd(chart, shapeArgs), bottom = renderer.getCylinderEnd(chart, shapeArgs, true);
|
|
return {
|
|
front: renderer.getCylinderFront(top, bottom),
|
|
back: renderer.getCylinderBack(top, bottom),
|
|
top: top,
|
|
bottom: bottom,
|
|
zIndexes: {
|
|
top: isTopFirst ? 3 : 0,
|
|
bottom: isTopFirst ? 0 : 3,
|
|
front: isFronFirst ? 2 : 1,
|
|
back: isFronFirst ? 1 : 2,
|
|
group: cuboidData.zIndexes.group
|
|
}
|
|
};
|
|
}
|
|
/**
|
|
* Returns curved path in format of:
|
|
* [ M, x, y, ...[C, cp1x, cp2y, cp2x, cp2y, epx, epy]*n_times ]
|
|
* (cp - control point, ep - end point)
|
|
* @private
|
|
*/
|
|
function rendererGetCurvedPath(points) {
|
|
const path = [['M', points[0].x, points[0].y]], limit = points.length - 2;
|
|
for (let i = 1; i < limit; i += 3) {
|
|
path.push([
|
|
'C',
|
|
points[i].x, points[i].y,
|
|
points[i + 1].x, points[i + 1].y,
|
|
points[i + 2].x, points[i + 2].y
|
|
]);
|
|
}
|
|
return path;
|
|
}
|
|
/**
|
|
* Returns cylinder Back path.
|
|
* @private
|
|
*/
|
|
function rendererGetCylinderBack(topPath, bottomPath) {
|
|
const path = [];
|
|
if (isSimplified(topPath)) {
|
|
const move = topPath[0], line2 = topPath[2];
|
|
if (move[0] === 'M' && line2[0] === 'L') {
|
|
path.push(['M', line2[1], line2[2]]);
|
|
path.push(topPath[3]);
|
|
// End at start
|
|
path.push(['L', move[1], move[2]]);
|
|
}
|
|
}
|
|
else {
|
|
if (topPath[2][0] === 'C') {
|
|
path.push(['M', topPath[2][5], topPath[2][6]]);
|
|
}
|
|
path.push(topPath[3], topPath[4]);
|
|
}
|
|
if (isSimplified(bottomPath)) {
|
|
const move = bottomPath[0];
|
|
if (move[0] === 'M') {
|
|
path.push(['L', move[1], move[2]]);
|
|
path.push(bottomPath[3]);
|
|
path.push(bottomPath[2]);
|
|
}
|
|
}
|
|
else {
|
|
const curve2 = bottomPath[2], curve3 = bottomPath[3], curve4 = bottomPath[4];
|
|
if (curve2[0] === 'C' && curve3[0] === 'C' && curve4[0] === 'C') {
|
|
path.push(['L', curve4[5], curve4[6]]);
|
|
path.push([
|
|
'C',
|
|
curve4[3],
|
|
curve4[4],
|
|
curve4[1],
|
|
curve4[2],
|
|
curve3[5],
|
|
curve3[6]
|
|
]);
|
|
path.push([
|
|
'C',
|
|
curve3[3],
|
|
curve3[4],
|
|
curve3[1],
|
|
curve3[2],
|
|
curve2[5],
|
|
curve2[6]
|
|
]);
|
|
}
|
|
}
|
|
path.push(['Z']);
|
|
return path;
|
|
}
|
|
/**
|
|
* Returns cylinder path for top or bottom.
|
|
* @private
|
|
*/
|
|
function rendererGetCylinderEnd(chart, shapeArgs, isBottom) {
|
|
const { width = 0, height = 0, alphaCorrection = 0 } = shapeArgs,
|
|
// A half of the smaller one out of width or depth (optional, because
|
|
// there's no depth for a funnel that reuses the code)
|
|
depth = pick(shapeArgs.depth, width, 0), radius = Math.min(width, depth) / 2,
|
|
// Approximated longest diameter
|
|
angleOffset = deg2rad * (chart.options.chart.options3d.beta - 90 +
|
|
alphaCorrection),
|
|
// Could be top or bottom of the cylinder
|
|
y = (shapeArgs.y || 0) + (isBottom ? height : 0),
|
|
// Use cubic Bezier curve to draw a circle in x,z (y is constant).
|
|
// More math. at spencermortensen.com/articles/bezier-circle/
|
|
c = 0.5519 * radius, centerX = width / 2 + (shapeArgs.x || 0), centerZ = depth / 2 + (shapeArgs.z || 0),
|
|
// Points could be generated in a loop, but readability will plummet
|
|
points = [{
|
|
x: 0,
|
|
y: y,
|
|
z: radius
|
|
}, {
|
|
x: c,
|
|
y: y,
|
|
z: radius
|
|
}, {
|
|
x: radius,
|
|
y: y,
|
|
z: c
|
|
}, {
|
|
x: radius,
|
|
y: y,
|
|
z: 0
|
|
}, {
|
|
x: radius,
|
|
y: y,
|
|
z: -c
|
|
}, {
|
|
x: c,
|
|
y: y,
|
|
z: -radius
|
|
}, {
|
|
x: 0,
|
|
y: y,
|
|
z: -radius
|
|
}, {
|
|
x: -c,
|
|
y: y,
|
|
z: -radius
|
|
}, {
|
|
x: -radius,
|
|
y: y,
|
|
z: -c
|
|
}, {
|
|
x: -radius,
|
|
y: y,
|
|
z: 0
|
|
}, {
|
|
x: -radius,
|
|
y: y,
|
|
z: c
|
|
}, {
|
|
x: -c,
|
|
y: y,
|
|
z: radius
|
|
}, {
|
|
x: 0,
|
|
y: y,
|
|
z: radius
|
|
}], cosTheta = Math.cos(angleOffset), sinTheta = Math.sin(angleOffset);
|
|
let path, x, z;
|
|
// Rotate to match chart's beta and translate to the shape center
|
|
for (const point of points) {
|
|
x = point.x;
|
|
z = point.z;
|
|
point.x = (x * cosTheta - z * sinTheta) + centerX;
|
|
point.z = (z * cosTheta + x * sinTheta) + centerZ;
|
|
}
|
|
const perspectivePoints = perspective(points, chart, true);
|
|
// Check for sub-pixel curve issue, compare front and back edges
|
|
if (Math.abs(perspectivePoints[3].y - perspectivePoints[9].y) < 2.5 &&
|
|
Math.abs(perspectivePoints[0].y - perspectivePoints[6].y) < 2.5) {
|
|
// Use simplified shape
|
|
path = this.toLinePath([
|
|
perspectivePoints[0],
|
|
perspectivePoints[3],
|
|
perspectivePoints[6],
|
|
perspectivePoints[9]
|
|
], true);
|
|
}
|
|
else {
|
|
// Or default curved path to imitate ellipse (2D circle)
|
|
path = this.getCurvedPath(perspectivePoints);
|
|
}
|
|
return path;
|
|
}
|
|
/**
|
|
* Returns cylinder Front path.
|
|
* @private
|
|
*/
|
|
function rendererGetCylinderFront(topPath, bottomPath) {
|
|
const path = topPath.slice(0, 3);
|
|
if (isSimplified(bottomPath)) {
|
|
const move = bottomPath[0];
|
|
if (move[0] === 'M') {
|
|
path.push(bottomPath[2]);
|
|
path.push(bottomPath[1]);
|
|
path.push(['L', move[1], move[2]]);
|
|
}
|
|
}
|
|
else {
|
|
const move = bottomPath[0], curve1 = bottomPath[1], curve2 = bottomPath[2];
|
|
if (move[0] === 'M' && curve1[0] === 'C' && curve2[0] === 'C') {
|
|
path.push(['L', curve2[5], curve2[6]]);
|
|
path.push([
|
|
'C',
|
|
curve2[3],
|
|
curve2[4],
|
|
curve2[1],
|
|
curve2[2],
|
|
curve1[5],
|
|
curve1[6]
|
|
]);
|
|
path.push([
|
|
'C',
|
|
curve1[3],
|
|
curve1[4],
|
|
curve1[1],
|
|
curve1[2],
|
|
move[1],
|
|
move[2]
|
|
]);
|
|
}
|
|
}
|
|
path.push(['Z']);
|
|
return path;
|
|
}
|
|
/* *
|
|
*
|
|
* Default Export
|
|
*
|
|
* */
|
|
const CylinderComposition = {
|
|
compose
|
|
};
|
|
|
|
return CylinderComposition;
|
|
});
|
|
_registerModule(_modules, 'Series/Cylinder/CylinderPoint.js', [_modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (SeriesRegistry, U) {
|
|
/* *
|
|
*
|
|
* Highcharts cylinder - a 3D series
|
|
*
|
|
* (c) 2010-2024 Highsoft AS
|
|
*
|
|
* Author: Kacper Madej
|
|
*
|
|
* License: www.highcharts.com/license
|
|
*
|
|
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
|
*
|
|
* */
|
|
const { column: { prototype: { pointClass: ColumnPoint } } } = SeriesRegistry.seriesTypes;
|
|
const { extend } = U;
|
|
/* *
|
|
*
|
|
* Class
|
|
*
|
|
* */
|
|
class CylinderPoint extends ColumnPoint {
|
|
}
|
|
extend(CylinderPoint.prototype, {
|
|
shapeType: 'cylinder'
|
|
});
|
|
/* *
|
|
*
|
|
* Default Export
|
|
*
|
|
* */
|
|
|
|
return CylinderPoint;
|
|
});
|
|
_registerModule(_modules, 'Series/Cylinder/CylinderSeriesDefaults.js', [], function () {
|
|
/* *
|
|
*
|
|
* Highcharts cylinder - a 3D series
|
|
*
|
|
* (c) 2010-2024 Highsoft AS
|
|
*
|
|
* Author: Kacper Madej
|
|
*
|
|
* License: www.highcharts.com/license
|
|
*
|
|
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
|
*
|
|
* */
|
|
/* *
|
|
*
|
|
* API Options
|
|
*
|
|
* */
|
|
/**
|
|
* A cylinder graph is a variation of a 3d column graph. The cylinder graph
|
|
* features cylindrical points.
|
|
*
|
|
* @sample {highcharts} highcharts/demo/cylinder/
|
|
* Cylinder graph
|
|
*
|
|
* @extends plotOptions.column
|
|
* @since 7.0.0
|
|
* @product highcharts
|
|
* @excluding allAreas, boostThreshold, colorAxis, compare, compareBase,
|
|
* dragDrop, boostBlending
|
|
* @requires modules/cylinder
|
|
* @optionparent plotOptions.cylinder
|
|
*/
|
|
const CylinderSeriesDefaults = {};
|
|
/**
|
|
* A `cylinder` series. If the [type](#series.cylinder.type) option is not
|
|
* specified, it is inherited from [chart.type](#chart.type).
|
|
*
|
|
* @extends series,plotOptions.cylinder
|
|
* @since 7.0.0
|
|
* @product highcharts
|
|
* @excluding allAreas, boostThreshold, colorAxis, compare, compareBase,
|
|
* boostBlending
|
|
* @requires modules/cylinder
|
|
* @apioption series.cylinder
|
|
*/
|
|
/**
|
|
* An array of data points for the series. For the `cylinder` series type,
|
|
* points can be given in the following ways:
|
|
*
|
|
* 1. An array of numerical values. In this case, the numerical values will be
|
|
* interpreted as `y` options. The `x` values will be automatically
|
|
* calculated, either starting at 0 and incremented by 1, or from
|
|
* `pointStart` and `pointInterval` given in the series options. If the axis
|
|
* has categories, these will be used. Example:
|
|
* ```js
|
|
* data: [0, 5, 3, 5]
|
|
* ```
|
|
*
|
|
* 2. An array of arrays with 2 values. In this case, the values correspond to
|
|
* `x,y`. If the first value is a string, it is applied as the name of the
|
|
* point, and the `x` value is inferred.
|
|
* ```js
|
|
* data: [
|
|
* [0, 0],
|
|
* [1, 8],
|
|
* [2, 9]
|
|
* ]
|
|
* ```
|
|
*
|
|
* 3. An array of objects with named values. The following snippet shows only a
|
|
* few settings, see the complete options set below. If the total number of
|
|
* data points exceeds the series'
|
|
* [turboThreshold](#series.cylinder.turboThreshold), this option is not
|
|
* available.
|
|
*
|
|
* ```js
|
|
* data: [{
|
|
* x: 1,
|
|
* y: 2,
|
|
* name: "Point2",
|
|
* color: "#00FF00"
|
|
* }, {
|
|
* x: 1,
|
|
* y: 4,
|
|
* name: "Point1",
|
|
* color: "#FF00FF"
|
|
* }]
|
|
* ```
|
|
*
|
|
* @sample {highcharts} highcharts/chart/reflow-true/
|
|
* Numerical values
|
|
* @sample {highcharts} highcharts/series/data-array-of-arrays/
|
|
* Arrays of numeric x and y
|
|
* @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
|
|
* Arrays of datetime x and y
|
|
* @sample {highcharts} highcharts/series/data-array-of-name-value/
|
|
* Arrays of point.name and y
|
|
* @sample {highcharts} highcharts/series/data-array-of-objects/
|
|
* Config objects
|
|
*
|
|
* @type {Array<number|Array<(number|string),(number|null)>|null|*>}
|
|
* @extends series.column.data
|
|
* @product highcharts highstock
|
|
* @apioption series.cylinder.data
|
|
*/
|
|
''; // Detaches doclets above
|
|
/* *
|
|
*
|
|
* Default Export
|
|
*
|
|
* */
|
|
|
|
return CylinderSeriesDefaults;
|
|
});
|
|
_registerModule(_modules, 'Series/Cylinder/CylinderSeries.js', [_modules['Series/Cylinder/CylinderComposition.js'], _modules['Series/Cylinder/CylinderPoint.js'], _modules['Series/Cylinder/CylinderSeriesDefaults.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (CylinderComposition, CylinderPoint, CylinderSeriesDefaults, SeriesRegistry, U) {
|
|
/* *
|
|
*
|
|
* Highcharts cylinder - a 3D series
|
|
*
|
|
* (c) 2010-2024 Highsoft AS
|
|
*
|
|
* Author: Kacper Madej
|
|
*
|
|
* License: www.highcharts.com/license
|
|
*
|
|
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
|
*
|
|
* */
|
|
const { column: ColumnSeries } = SeriesRegistry.seriesTypes;
|
|
const { extend, merge } = U;
|
|
/* *
|
|
*
|
|
* Class
|
|
*
|
|
* */
|
|
/**
|
|
* The cylinder series type.
|
|
*
|
|
* @requires highcharts-3d
|
|
* @requires modules/cylinder
|
|
*
|
|
* @private
|
|
* @class
|
|
* @name Highcharts.seriesTypes.cylinder
|
|
*
|
|
* @augments Highcharts.Series
|
|
*/
|
|
class CylinderSeries extends ColumnSeries {
|
|
}
|
|
/* *
|
|
*
|
|
* Static Properties
|
|
*
|
|
* */
|
|
CylinderSeries.compose = CylinderComposition.compose;
|
|
CylinderSeries.defaultOptions = merge(ColumnSeries.defaultOptions, CylinderSeriesDefaults);
|
|
extend(CylinderSeries.prototype, {
|
|
pointClass: CylinderPoint
|
|
});
|
|
SeriesRegistry.registerSeriesType('cylinder', CylinderSeries);
|
|
/* *
|
|
*
|
|
* Default Export
|
|
*
|
|
* */
|
|
|
|
return CylinderSeries;
|
|
});
|
|
_registerModule(_modules, 'masters/modules/cylinder.src.js', [_modules['Core/Globals.js'], _modules['Series/Cylinder/CylinderSeries.js'], _modules['Core/Renderer/RendererRegistry.js']], function (Highcharts, CylinderSeries, RendererRegistry) {
|
|
|
|
CylinderSeries.compose(RendererRegistry.getRendererType());
|
|
|
|
return Highcharts;
|
|
});
|
|
})); |