cylinder.src.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. /**
  2. * @license Highcharts JS v8.0.0 (2019-12-10)
  3. *
  4. * Highcharts cylinder module
  5. *
  6. * (c) 2010-2019 Kacper Madej
  7. *
  8. * License: www.highcharts.com/license
  9. */
  10. 'use strict';
  11. (function (factory) {
  12. if (typeof module === 'object' && module.exports) {
  13. factory['default'] = factory;
  14. module.exports = factory;
  15. } else if (typeof define === 'function' && define.amd) {
  16. define('highcharts/modules/cylinder', ['highcharts', 'highcharts/highcharts-3d'], function (Highcharts) {
  17. factory(Highcharts);
  18. factory.Highcharts = Highcharts;
  19. return factory;
  20. });
  21. } else {
  22. factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined);
  23. }
  24. }(function (Highcharts) {
  25. var _modules = Highcharts ? Highcharts._modules : {};
  26. function _registerModule(obj, path, args, fn) {
  27. if (!obj.hasOwnProperty(path)) {
  28. obj[path] = fn.apply(null, args);
  29. }
  30. }
  31. _registerModule(_modules, 'modules/cylinder.src.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
  32. /* *
  33. *
  34. * Highcharts cylinder - a 3D series
  35. *
  36. * (c) 2010-2019 Highsoft AS
  37. *
  38. * Author: Kacper Madej
  39. *
  40. * License: www.highcharts.com/license
  41. *
  42. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  43. *
  44. * */
  45. var pick = U.pick;
  46. var charts = H.charts, color = H.color, deg2rad = H.deg2rad, perspective = H.perspective, seriesType = H.seriesType,
  47. // Work on H.Renderer instead of H.SVGRenderer for VML support.
  48. RendererProto = H.Renderer.prototype, cuboidPath = RendererProto.cuboidPath, cylinderMethods;
  49. /**
  50. * The cylinder series type.
  51. *
  52. * @requires module:highcharts-3d
  53. * @requires module:modules/cylinder
  54. *
  55. * @private
  56. * @class
  57. * @name Highcharts.seriesTypes.cylinder
  58. *
  59. * @augments Highcharts.Series
  60. */
  61. seriesType('cylinder', 'column',
  62. /**
  63. * A cylinder graph is a variation of a 3d column graph. The cylinder graph
  64. * features cylindrical points.
  65. *
  66. * @sample {highcharts} highcharts/demo/cylinder/
  67. * Cylinder graph
  68. *
  69. * @extends plotOptions.column
  70. * @since 7.0.0
  71. * @product highcharts
  72. * @excluding allAreas, boostThreshold, colorAxis, compare, compareBase,
  73. * dragDrop
  74. * @requires modules/cylinder
  75. * @optionparent plotOptions.cylinder
  76. */
  77. {}, {},
  78. /** @lends Highcharts.seriesTypes.cylinder#pointClass# */
  79. {
  80. shapeType: 'cylinder',
  81. hasNewShapeType: H
  82. .seriesTypes.column.prototype
  83. .pointClass.prototype
  84. .hasNewShapeType
  85. });
  86. /**
  87. * A `cylinder` series. If the [type](#series.cylinder.type) option is not
  88. * specified, it is inherited from [chart.type](#chart.type).
  89. *
  90. * @extends series,plotOptions.cylinder
  91. * @since 7.0.0
  92. * @product highcharts
  93. * @excluding allAreas, boostThreshold, colorAxis, compare, compareBase
  94. * @requires modules/cylinder
  95. * @apioption series.cylinder
  96. */
  97. /**
  98. * An array of data points for the series. For the `cylinder` series type,
  99. * points can be given in the following ways:
  100. *
  101. * 1. An array of numerical values. In this case, the numerical values will be
  102. * interpreted as `y` options. The `x` values will be automatically
  103. * calculated, either starting at 0 and incremented by 1, or from
  104. * `pointStart` and `pointInterval` given in the series options. If the axis
  105. * has categories, these will be used. Example:
  106. * ```js
  107. * data: [0, 5, 3, 5]
  108. * ```
  109. *
  110. * 2. An array of arrays with 2 values. In this case, the values correspond to
  111. * `x,y`. If the first value is a string, it is applied as the name of the
  112. * point, and the `x` value is inferred.
  113. * ```js
  114. * data: [
  115. * [0, 0],
  116. * [1, 8],
  117. * [2, 9]
  118. * ]
  119. * ```
  120. *
  121. * 3. An array of objects with named values. The following snippet shows only a
  122. * few settings, see the complete options set below. If the total number of
  123. * data points exceeds the series'
  124. * [turboThreshold](#series.cylinder.turboThreshold), this option is not
  125. * available.
  126. *
  127. * ```js
  128. * data: [{
  129. * x: 1,
  130. * y: 2,
  131. * name: "Point2",
  132. * color: "#00FF00"
  133. * }, {
  134. * x: 1,
  135. * y: 4,
  136. * name: "Point1",
  137. * color: "#FF00FF"
  138. * }]
  139. * ```
  140. *
  141. * @sample {highcharts} highcharts/chart/reflow-true/
  142. * Numerical values
  143. * @sample {highcharts} highcharts/series/data-array-of-arrays/
  144. * Arrays of numeric x and y
  145. * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
  146. * Arrays of datetime x and y
  147. * @sample {highcharts} highcharts/series/data-array-of-name-value/
  148. * Arrays of point.name and y
  149. * @sample {highcharts} highcharts/series/data-array-of-objects/
  150. * Config objects
  151. *
  152. * @type {Array<number|Array<(number|string),(number|null)>|null|*>}
  153. * @extends series.column.data
  154. * @product highcharts highstock
  155. * @apioption series.cylinder.data
  156. */
  157. // cylinder extends cuboid
  158. cylinderMethods = H.merge(RendererProto.elements3d.cuboid, {
  159. parts: ['top', 'bottom', 'front', 'back'],
  160. pathType: 'cylinder',
  161. fillSetter: function (fill) {
  162. this.singleSetterForParts('fill', null, {
  163. front: fill,
  164. back: fill,
  165. top: color(fill).brighten(0.1).get(),
  166. bottom: color(fill).brighten(-0.1).get()
  167. });
  168. // fill for animation getter (#6776)
  169. this.color = this.fill = fill;
  170. return this;
  171. }
  172. });
  173. RendererProto.elements3d.cylinder = cylinderMethods;
  174. RendererProto.cylinder = function (shapeArgs) {
  175. return this.element3d('cylinder', shapeArgs);
  176. };
  177. // Generates paths and zIndexes.
  178. RendererProto.cylinderPath = function (shapeArgs) {
  179. var renderer = this, chart = charts[renderer.chartIndex],
  180. // decide zIndexes of parts based on cubiod logic, for consistency.
  181. cuboidData = cuboidPath.call(renderer, shapeArgs), isTopFirst = !cuboidData.isTop, isFronFirst = !cuboidData.isFront, top = renderer.getCylinderEnd(chart, shapeArgs), bottom = renderer.getCylinderEnd(chart, shapeArgs, true);
  182. return {
  183. front: renderer.getCylinderFront(top, bottom),
  184. back: renderer.getCylinderBack(top, bottom),
  185. top: top,
  186. bottom: bottom,
  187. zIndexes: {
  188. top: isTopFirst ? 3 : 0,
  189. bottom: isTopFirst ? 0 : 3,
  190. front: isFronFirst ? 2 : 1,
  191. back: isFronFirst ? 1 : 2,
  192. group: cuboidData.zIndexes.group
  193. }
  194. };
  195. };
  196. // Returns cylinder Front path
  197. RendererProto.getCylinderFront = function (topPath, bottomPath) {
  198. var path = topPath.slice(0, topPath.simplified ? 9 : 17);
  199. path.push('L');
  200. if (bottomPath.simplified) {
  201. path = path
  202. .concat(bottomPath.slice(7, 9))
  203. .concat(bottomPath.slice(3, 6))
  204. .concat(bottomPath.slice(0, 3));
  205. // change 'M' into 'L'
  206. path[path.length - 3] = 'L';
  207. }
  208. else {
  209. 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]);
  210. }
  211. path.push('Z');
  212. return path;
  213. };
  214. // Returns cylinder Back path
  215. RendererProto.getCylinderBack = function (topPath, bottomPath) {
  216. var path = ['M'];
  217. if (topPath.simplified) {
  218. path = path.concat(topPath.slice(7, 12));
  219. // end at start
  220. path.push('L', topPath[1], topPath[2]);
  221. }
  222. else {
  223. path = path.concat(topPath.slice(15));
  224. }
  225. path.push('L');
  226. if (bottomPath.simplified) {
  227. path = path
  228. .concat(bottomPath.slice(1, 3))
  229. .concat(bottomPath.slice(9, 12))
  230. .concat(bottomPath.slice(6, 9));
  231. }
  232. else {
  233. 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]);
  234. }
  235. path.push('Z');
  236. return path;
  237. };
  238. // Retruns cylinder path for top or bottom
  239. RendererProto.getCylinderEnd = function (chart, shapeArgs, isBottom) {
  240. // A half of the smaller one out of width or depth (optional, because
  241. // there's no depth for a funnel that reuses the code)
  242. var depth = pick(shapeArgs.depth, shapeArgs.width), radius = Math.min(shapeArgs.width, depth) / 2,
  243. // Approximated longest diameter
  244. angleOffset = deg2rad * (chart.options.chart.options3d.beta - 90 +
  245. (shapeArgs.alphaCorrection || 0)),
  246. // Could be top or bottom of the cylinder
  247. y = shapeArgs.y + (isBottom ? shapeArgs.height : 0),
  248. // Use cubic Bezier curve to draw a cricle in x,z (y is constant).
  249. // More math. at spencermortensen.com/articles/bezier-circle/
  250. c = 0.5519 * radius, centerX = shapeArgs.width / 2 + shapeArgs.x, centerZ = depth / 2 + shapeArgs.z,
  251. // points could be generated in a loop, but readability will plummet
  252. points = [{
  253. x: 0,
  254. y: y,
  255. z: radius
  256. }, {
  257. x: c,
  258. y: y,
  259. z: radius
  260. }, {
  261. x: radius,
  262. y: y,
  263. z: c
  264. }, {
  265. x: radius,
  266. y: y,
  267. z: 0
  268. }, {
  269. x: radius,
  270. y: y,
  271. z: -c
  272. }, {
  273. x: c,
  274. y: y,
  275. z: -radius
  276. }, {
  277. x: 0,
  278. y: y,
  279. z: -radius
  280. }, {
  281. x: -c,
  282. y: y,
  283. z: -radius
  284. }, {
  285. x: -radius,
  286. y: y,
  287. z: -c
  288. }, {
  289. x: -radius,
  290. y: y,
  291. z: 0
  292. }, {
  293. x: -radius,
  294. y: y,
  295. z: c
  296. }, {
  297. x: -c,
  298. y: y,
  299. z: radius
  300. }, {
  301. x: 0,
  302. y: y,
  303. z: radius
  304. }], cosTheta = Math.cos(angleOffset), sinTheta = Math.sin(angleOffset), perspectivePoints, path, x, z;
  305. // rotete to match chart's beta and translate to the shape center
  306. points.forEach(function (point, i) {
  307. x = point.x;
  308. z = point.z;
  309. // x′ = (x * cosθ − z * sinθ) + centerX
  310. // z′ = (z * cosθ + x * sinθ) + centerZ
  311. points[i].x = (x * cosTheta - z * sinTheta) + centerX;
  312. points[i].z = (z * cosTheta + x * sinTheta) + centerZ;
  313. });
  314. perspectivePoints = perspective(points, chart, true);
  315. // check for sub-pixel curve issue, compare front and back edges
  316. if (Math.abs(perspectivePoints[3].y - perspectivePoints[9].y) < 2.5 &&
  317. Math.abs(perspectivePoints[0].y - perspectivePoints[6].y) < 2.5) {
  318. // use simplied shape
  319. path = this.toLinePath([
  320. perspectivePoints[0],
  321. perspectivePoints[3],
  322. perspectivePoints[6],
  323. perspectivePoints[9]
  324. ], true);
  325. path.simplified = true;
  326. }
  327. else {
  328. // or default curved path to imitate ellipse (2D circle)
  329. path = this.getCurvedPath(perspectivePoints);
  330. }
  331. return path;
  332. };
  333. // Returns curved path in format of:
  334. // [ M, x, y, ...[C, cp1x, cp2y, cp2x, cp2y, epx, epy]*n_times ]
  335. // (cp - control point, ep - end point)
  336. RendererProto.getCurvedPath = function (points) {
  337. var path = [
  338. 'M',
  339. points[0].x, points[0].y
  340. ], limit = points.length - 2, i;
  341. for (i = 1; i < limit; i += 3) {
  342. 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);
  343. }
  344. return path;
  345. };
  346. });
  347. _registerModule(_modules, 'masters/modules/cylinder.src.js', [], function () {
  348. });
  349. }));