/** * @license Highcharts JS v7.0.3 (2019-02-06) * Highcharts cylinder module * * (c) 2010-2019 Kacper Madej * * License: www.highcharts.com/license */ 'use strict'; (function (factory) { if (typeof module === 'object' && module.exports) { factory['default'] = factory; module.exports = factory; } else if (typeof define === 'function' && define.amd) { define(function () { return factory; }); } else { factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined); } }(function (Highcharts) { (function (H) { /* * * (c) 2010-2019 Kacper Madej * * License: www.highcharts.com/license */ var charts = H.charts, color = H.color, deg2rad = H.deg2rad, perspective = H.perspective, seriesType = H.seriesType, // Work on H.Renderer instead of H.SVGRenderer for VML support. RendererProto = H.Renderer.prototype, cuboidPath = RendererProto.cuboidPath, cylinderMethods; /** * The cylinder series type. * * @requires module:highcharts-3d * @requires module:modules/cylinder * * @private * @class * @name Highcharts.seriesTypes.cylinder * * @augments Highcharts.Series */ seriesType( 'cylinder', 'column', /** * 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 * @optionparent plotOptions.cylinder */ {}, {}, /** @lends Highcharts.seriesTypes.cylinder#pointClass# */ { shapeType: 'cylinder' } ); /** * 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 * @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|*>} * @extends series.column.data * @product highcharts highstock * @apioption series.cylinder.data */ // cylinder extends cuboid cylinderMethods = H.merge(RendererProto.elements3d.cuboid, { parts: ['top', 'bottom', 'front', 'back'], pathType: 'cylinder', fillSetter: function (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; } }); RendererProto.elements3d.cylinder = cylinderMethods; RendererProto.cylinder = function (shapeArgs) { return this.element3d('cylinder', shapeArgs); }; // Generates paths and zIndexes. RendererProto.cylinderPath = function (shapeArgs) { var renderer = this, chart = charts[renderer.chartIndex], // decide zIndexes of parts based on cubiod logic, for consistency. cuboidData = cuboidPath.call(renderer, 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 cylinder Front path RendererProto.getCylinderFront = function (topPath, bottomPath) { var path = topPath.slice(0, topPath.simplified ? 9 : 17); path.push('L'); if (bottomPath.simplified) { path = path .concat(bottomPath.slice(7, 9)) .concat(bottomPath.slice(3, 6)) .concat(bottomPath.slice(0, 3)); // change 'M' into 'L' path[path.length - 3] = 'L'; } else { path.push( bottomPath[15], bottomPath[16], 'C', bottomPath[13], bottomPath[14], bottomPath[11], bottomPath[12], bottomPath[8], bottomPath[9], 'C', bottomPath[6], bottomPath[7], bottomPath[4], bottomPath[5], bottomPath[1], bottomPath[2] ); } path.push('Z'); return path; }; // Returns cylinder Back path RendererProto.getCylinderBack = function (topPath, bottomPath) { var path = ['M']; if (bottomPath.simplified) { path = path.concat(topPath.slice(7, 12)); // end at start path.push( 'L', topPath[1], topPath[2] ); } else { path = path.concat(topPath.slice(15)); } path.push('L'); if (bottomPath.simplified) { path = path .concat(bottomPath.slice(1, 3)) .concat(bottomPath.slice(9, 12)) .concat(bottomPath.slice(6, 9)); } else { path.push( bottomPath[29], bottomPath[30], 'C', bottomPath[27], bottomPath[28], bottomPath[25], bottomPath[26], bottomPath[22], bottomPath[23], 'C', bottomPath[20], bottomPath[21], bottomPath[18], bottomPath[19], bottomPath[15], bottomPath[16] ); } path.push('Z'); return path; }; // Retruns cylinder path for top or bottom RendererProto.getCylinderEnd = function (chart, shapeArgs, isBottom) { // A half of the smaller one out of width or depth var radius = Math.min(shapeArgs.width, shapeArgs.depth) / 2, // Approximated longest diameter angleOffset = deg2rad * (chart.options.chart.options3d.beta - 90), // Could be top or bottom of the cylinder y = shapeArgs.y + (isBottom ? shapeArgs.height : 0), // Use cubic Bezier curve to draw a cricle in x,z (y is constant). // More math. at spencermortensen.com/articles/bezier-circle/ c = 0.5519 * radius, centerX = shapeArgs.width / 2 + shapeArgs.x, centerZ = shapeArgs.depth / 2 + shapeArgs.z, // points could be generated in a loop, but readability will plummet points = [{ // M - starting point x: 0, y: y, z: radius }, { // C1 - control point 1 x: c, y: y, z: radius }, { // C1 - control point 2 x: radius, y: y, z: c }, { // C1 - end point x: radius, y: y, z: 0 }, { // C2 - control point 1 x: radius, y: y, z: -c }, { // C2 - control point 2 x: c, y: y, z: -radius }, { // C2 - end point x: 0, y: y, z: -radius }, { // C3 - control point 1 x: -c, y: y, z: -radius }, { // C3 - control point 2 x: -radius, y: y, z: -c }, { // C3 - end point x: -radius, y: y, z: 0 }, { // C4 - control point 1 x: -radius, y: y, z: c }, { // C4 - control point 2 x: -c, y: y, z: radius }, { // C4 - end point x: 0, y: y, z: radius }], cosTheta = Math.cos(angleOffset), sinTheta = Math.sin(angleOffset), perspectivePoints, path, x, z; // rotete to match chart's beta and translate to the shape center points.forEach(function (point, i) { x = point.x; z = point.z; // x′ = (x * cosθ − z * sinθ) + centerX // z′ = (z * cosθ + x * sinθ) + centerZ points[i].x = (x * cosTheta - z * sinTheta) + centerX; points[i].z = (z * cosTheta + x * sinTheta) + centerZ; }); 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) { // use simplied shape path = this.toLinePath([ perspectivePoints[0], perspectivePoints[3], perspectivePoints[6], perspectivePoints[9] ], true); path.simplified = true; } else { // or default curved path to imitate ellipse (2D circle) path = this.getCurvedPath(perspectivePoints); } return path; }; // Returns curved path in format of: // [ M, x, y, [C, cp1x, cp2y, cp2x, cp2y, epx, epy]*n_times ] // (cp - control point, ep - end point) RendererProto.getCurvedPath = function (points) { var path = [ 'M', points[0].x, points[0].y ], limit = points.length - 2, i; for (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; }; }(Highcharts)); return (function () { }()); }));