Polar.js 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727
  1. /* *
  2. *
  3. * (c) 2010-2021 Torstein Honsi
  4. *
  5. * License: www.highcharts.com/license
  6. *
  7. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  8. *
  9. * */
  10. 'use strict';
  11. import A from '../Core/Animation/AnimationUtilities.js';
  12. var animObject = A.animObject;
  13. import Chart from '../Core/Chart/Chart.js';
  14. import H from '../Core/Globals.js';
  15. import Pane from './Pane.js';
  16. import Pointer from '../Core/Pointer.js';
  17. import Series from '../Core/Series/Series.js';
  18. import SeriesRegistry from '../Core/Series/SeriesRegistry.js';
  19. var seriesTypes = SeriesRegistry.seriesTypes;
  20. import SVGRenderer from '../Core/Renderer/SVG/SVGRenderer.js';
  21. import U from '../Core/Utilities.js';
  22. var addEvent = U.addEvent, defined = U.defined, find = U.find, isNumber = U.isNumber, pick = U.pick, splat = U.splat, uniqueKey = U.uniqueKey, wrap = U.wrap;
  23. // Extensions for polar charts. Additionally, much of the geometry required for
  24. // polar charts is gathered in RadialAxes.js.
  25. var seriesProto = Series.prototype, pointerProto = Pointer.prototype, columnProto, arearangeProto;
  26. /* eslint-disable no-invalid-this, valid-jsdoc */
  27. /**
  28. * Search a k-d tree by the point angle, used for shared tooltips in polar
  29. * charts
  30. * @private
  31. */
  32. seriesProto.searchPointByAngle = function (e) {
  33. var series = this, chart = series.chart, xAxis = series.xAxis, center = xAxis.pane.center, plotX = e.chartX - center[0] - chart.plotLeft, plotY = e.chartY - center[1] - chart.plotTop;
  34. return this.searchKDTree({
  35. clientX: 180 + (Math.atan2(plotX, plotY) * (-180 / Math.PI))
  36. });
  37. };
  38. /**
  39. * #6212 Calculate connectors for spline series in polar chart.
  40. * @private
  41. * @param {boolean} calculateNeighbours
  42. * Check if connectors should be calculated for neighbour points as
  43. * well allows short recurence
  44. */
  45. seriesProto.getConnectors = function (segment, index, calculateNeighbours, connectEnds) {
  46. var i, prevPointInd, nextPointInd, previousPoint, nextPoint, previousX, previousY, nextX, nextY, plotX, plotY, ret,
  47. // 1 means control points midway between points, 2 means 1/3 from
  48. // the point, 3 is 1/4 etc;
  49. smoothing = 1.5, denom = smoothing + 1, leftContX, leftContY, rightContX, rightContY, dLControlPoint, // distance left control point
  50. dRControlPoint, leftContAngle, rightContAngle, jointAngle, addedNumber = connectEnds ? 1 : 0;
  51. // Calculate final index of points depending on the initial index value.
  52. // Because of calculating neighbours, index may be outisde segment
  53. // array.
  54. if (index >= 0 && index <= segment.length - 1) {
  55. i = index;
  56. }
  57. else if (index < 0) {
  58. i = segment.length - 1 + index;
  59. }
  60. else {
  61. i = 0;
  62. }
  63. prevPointInd = (i - 1 < 0) ? segment.length - (1 + addedNumber) : i - 1;
  64. nextPointInd = (i + 1 > segment.length - 1) ? addedNumber : i + 1;
  65. previousPoint = segment[prevPointInd];
  66. nextPoint = segment[nextPointInd];
  67. previousX = previousPoint.plotX;
  68. previousY = previousPoint.plotY;
  69. nextX = nextPoint.plotX;
  70. nextY = nextPoint.plotY;
  71. plotX = segment[i].plotX; // actual point
  72. plotY = segment[i].plotY;
  73. leftContX = (smoothing * plotX + previousX) / denom;
  74. leftContY = (smoothing * plotY + previousY) / denom;
  75. rightContX = (smoothing * plotX + nextX) / denom;
  76. rightContY = (smoothing * plotY + nextY) / denom;
  77. dLControlPoint = Math.sqrt(Math.pow(leftContX - plotX, 2) + Math.pow(leftContY - plotY, 2));
  78. dRControlPoint = Math.sqrt(Math.pow(rightContX - plotX, 2) + Math.pow(rightContY - plotY, 2));
  79. leftContAngle = Math.atan2(leftContY - plotY, leftContX - plotX);
  80. rightContAngle = Math.atan2(rightContY - plotY, rightContX - plotX);
  81. jointAngle = (Math.PI / 2) + ((leftContAngle + rightContAngle) / 2);
  82. // Ensure the right direction, jointAngle should be in the same quadrant
  83. // as leftContAngle
  84. if (Math.abs(leftContAngle - jointAngle) > Math.PI / 2) {
  85. jointAngle -= Math.PI;
  86. }
  87. // Find the corrected control points for a spline straight through the
  88. // point
  89. leftContX = plotX + Math.cos(jointAngle) * dLControlPoint;
  90. leftContY = plotY + Math.sin(jointAngle) * dLControlPoint;
  91. rightContX = plotX + Math.cos(Math.PI + jointAngle) * dRControlPoint;
  92. rightContY = plotY + Math.sin(Math.PI + jointAngle) * dRControlPoint;
  93. // push current point's connectors into returned object
  94. ret = {
  95. rightContX: rightContX,
  96. rightContY: rightContY,
  97. leftContX: leftContX,
  98. leftContY: leftContY,
  99. plotX: plotX,
  100. plotY: plotY
  101. };
  102. // calculate connectors for previous and next point and push them inside
  103. // returned object
  104. if (calculateNeighbours) {
  105. ret.prevPointCont = this.getConnectors(segment, prevPointInd, false, connectEnds);
  106. }
  107. return ret;
  108. };
  109. /**
  110. * Translate a point's plotX and plotY from the internal angle and radius
  111. * measures to true plotX, plotY coordinates
  112. * @private
  113. */
  114. seriesProto.toXY = function (point) {
  115. var xy, chart = this.chart, xAxis = this.xAxis, yAxis = this.yAxis, plotX = point.plotX, plotY = point.plotY, series = point.series, inverted = chart.inverted, pointY = point.y, radius = inverted ? plotX : yAxis.len - plotY, clientX;
  116. // Corrected y position of inverted series other than column
  117. if (inverted && series && !series.isRadialBar) {
  118. point.plotY = plotY =
  119. typeof pointY === 'number' ? (yAxis.translate(pointY) || 0) : 0;
  120. }
  121. // Save rectangular plotX, plotY for later computation
  122. point.rectPlotX = plotX;
  123. point.rectPlotY = plotY;
  124. if (yAxis.center) {
  125. radius += yAxis.center[3] / 2;
  126. }
  127. // Find the polar plotX and plotY
  128. xy = inverted ? yAxis.postTranslate(plotY, radius) :
  129. xAxis.postTranslate(plotX, radius);
  130. point.plotX = point.polarPlotX = xy.x - chart.plotLeft;
  131. point.plotY = point.polarPlotY = xy.y - chart.plotTop;
  132. // If shared tooltip, record the angle in degrees in order to align X
  133. // points. Otherwise, use a standard k-d tree to get the nearest point
  134. // in two dimensions.
  135. if (this.kdByAngle) {
  136. clientX = ((plotX / Math.PI * 180) +
  137. xAxis.pane.options.startAngle) % 360;
  138. if (clientX < 0) { // #2665
  139. clientX += 360;
  140. }
  141. point.clientX = clientX;
  142. }
  143. else {
  144. point.clientX = point.plotX;
  145. }
  146. };
  147. if (seriesTypes.spline) {
  148. /**
  149. * Overridden method for calculating a spline from one point to the next
  150. * @private
  151. */
  152. wrap(seriesTypes.spline.prototype, 'getPointSpline', function (proceed, segment, point, i) {
  153. var ret, connectors;
  154. if (this.chart.polar) {
  155. // moveTo or lineTo
  156. if (!i) {
  157. ret = ['M', point.plotX, point.plotY];
  158. }
  159. else { // curve from last point to this
  160. connectors = this.getConnectors(segment, i, true, this.connectEnds);
  161. ret = [
  162. 'C',
  163. connectors.prevPointCont.rightContX,
  164. connectors.prevPointCont.rightContY,
  165. connectors.leftContX,
  166. connectors.leftContY,
  167. connectors.plotX,
  168. connectors.plotY
  169. ];
  170. }
  171. }
  172. else {
  173. ret = proceed.call(this, segment, point, i);
  174. }
  175. return ret;
  176. });
  177. // #6430 Areasplinerange series use unwrapped getPointSpline method, so
  178. // we need to set this method again.
  179. if (seriesTypes.areasplinerange) {
  180. seriesTypes.areasplinerange.prototype.getPointSpline = seriesTypes.spline.prototype.getPointSpline;
  181. }
  182. }
  183. /**
  184. * Extend translate. The plotX and plotY values are computed as if the polar
  185. * chart were a cartesian plane, where plotX denotes the angle in radians
  186. * and (yAxis.len - plotY) is the pixel distance from center.
  187. * @private
  188. */
  189. addEvent(Series, 'afterTranslate', function () {
  190. var series = this;
  191. var chart = series.chart;
  192. if (chart.polar && series.xAxis) {
  193. // Prepare k-d-tree handling. It searches by angle (clientX) in
  194. // case of shared tooltip, and by two dimensional distance in case
  195. // of non-shared.
  196. series.kdByAngle = chart.tooltip && chart.tooltip.shared;
  197. if (series.kdByAngle) {
  198. series.searchPoint = series.searchPointByAngle;
  199. }
  200. else {
  201. series.options.findNearestPointBy = 'xy';
  202. }
  203. // Postprocess plot coordinates
  204. if (!series.preventPostTranslate) {
  205. var points = series.points;
  206. var i = points.length;
  207. while (i--) {
  208. // Translate plotX, plotY from angle and radius to true plot
  209. // coordinates
  210. series.toXY(points[i]);
  211. // Treat points below Y axis min as null (#10082)
  212. if (!chart.hasParallelCoordinates &&
  213. !series.yAxis.reversed &&
  214. points[i].y < series.yAxis.min) {
  215. points[i].isNull = true;
  216. }
  217. }
  218. }
  219. // Perform clip after render
  220. if (!this.hasClipCircleSetter) {
  221. this.hasClipCircleSetter = !!series.eventsToUnbind.push(addEvent(series, 'afterRender', function () {
  222. var circ;
  223. if (chart.polar) {
  224. // For clipping purposes there is a need for
  225. // coordinates from the absolute center
  226. circ = this.yAxis.pane.center;
  227. if (!this.clipCircle) {
  228. this.clipCircle = chart.renderer.clipCircle(circ[0], circ[1], circ[2] / 2, circ[3] / 2);
  229. }
  230. else {
  231. this.clipCircle.animate({
  232. x: circ[0],
  233. y: circ[1],
  234. r: circ[2] / 2,
  235. innerR: circ[3] / 2
  236. });
  237. }
  238. this.group.clip(this.clipCircle);
  239. this.setClip = H.noop;
  240. }
  241. }));
  242. }
  243. }
  244. }, { order: 2 }); // Run after translation of ||-coords
  245. /**
  246. * Extend getSegmentPath to allow connecting ends across 0 to provide a
  247. * closed circle in line-like series.
  248. * @private
  249. */
  250. wrap(seriesTypes.line.prototype, 'getGraphPath', function (proceed, points) {
  251. var series = this, i, firstValid, popLastPoint;
  252. // Connect the path
  253. if (this.chart.polar) {
  254. points = points || this.points;
  255. // Append first valid point in order to connect the ends
  256. for (i = 0; i < points.length; i++) {
  257. if (!points[i].isNull) {
  258. firstValid = i;
  259. break;
  260. }
  261. }
  262. /**
  263. * Polar charts only. Whether to connect the ends of a line series
  264. * plot across the extremes.
  265. *
  266. * @sample {highcharts} highcharts/plotoptions/line-connectends-false/
  267. * Do not connect
  268. *
  269. * @type {boolean}
  270. * @since 2.3.0
  271. * @product highcharts
  272. * @apioption plotOptions.series.connectEnds
  273. */
  274. if (this.options.connectEnds !== false &&
  275. typeof firstValid !== 'undefined') {
  276. this.connectEnds = true; // re-used in splines
  277. points.splice(points.length, 0, points[firstValid]);
  278. popLastPoint = true;
  279. }
  280. // For area charts, pseudo points are added to the graph, now we
  281. // need to translate these
  282. points.forEach(function (point) {
  283. if (typeof point.polarPlotY === 'undefined') {
  284. series.toXY(point);
  285. }
  286. });
  287. }
  288. // Run uber method
  289. var ret = proceed.apply(this, [].slice.call(arguments, 1));
  290. // #6212 points.splice method is adding points to an array. In case of
  291. // areaspline getGraphPath method is used two times and in both times
  292. // points are added to an array. That is why points.pop is used, to get
  293. // unmodified points.
  294. if (popLastPoint) {
  295. points.pop();
  296. }
  297. return ret;
  298. });
  299. var polarAnimate = function (proceed, init) {
  300. var series = this, chart = this.chart, animation = this.options.animation, group = this.group, markerGroup = this.markerGroup, center = this.xAxis.center, plotLeft = chart.plotLeft, plotTop = chart.plotTop, attribs, paneInnerR, graphic, shapeArgs, r, innerR;
  301. // Specific animation for polar charts
  302. if (chart.polar) {
  303. if (series.isRadialBar) {
  304. if (!init) {
  305. // Run the pie animation for radial bars
  306. series.startAngleRad = pick(series.translatedThreshold, series.xAxis.startAngleRad);
  307. H.seriesTypes.pie.prototype.animate.call(series, init);
  308. }
  309. }
  310. else {
  311. // Enable animation on polar charts only in SVG. In VML, the scaling
  312. // is different, plus animation would be so slow it would't matter.
  313. if (chart.renderer.isSVG) {
  314. animation = animObject(animation);
  315. // A different animation needed for column like series
  316. if (series.is('column')) {
  317. if (!init) {
  318. paneInnerR = center[3] / 2;
  319. series.points.forEach(function (point) {
  320. graphic = point.graphic;
  321. shapeArgs = point.shapeArgs;
  322. r = shapeArgs && shapeArgs.r;
  323. innerR = shapeArgs && shapeArgs.innerR;
  324. if (graphic && shapeArgs) {
  325. // start values
  326. graphic.attr({
  327. r: paneInnerR,
  328. innerR: paneInnerR
  329. });
  330. // animate
  331. graphic.animate({
  332. r: r,
  333. innerR: innerR
  334. }, series.options.animation);
  335. }
  336. });
  337. }
  338. }
  339. else {
  340. // Initialize the animation
  341. if (init) {
  342. // Scale down the group and place it in the center
  343. attribs = {
  344. translateX: center[0] + plotLeft,
  345. translateY: center[1] + plotTop,
  346. scaleX: 0.001,
  347. scaleY: 0.001
  348. };
  349. group.attr(attribs);
  350. if (markerGroup) {
  351. markerGroup.attr(attribs);
  352. }
  353. // Run the animation
  354. }
  355. else {
  356. attribs = {
  357. translateX: plotLeft,
  358. translateY: plotTop,
  359. scaleX: 1,
  360. scaleY: 1
  361. };
  362. group.animate(attribs, animation);
  363. if (markerGroup) {
  364. markerGroup.animate(attribs, animation);
  365. }
  366. }
  367. }
  368. }
  369. }
  370. // For non-polar charts, revert to the basic animation
  371. }
  372. else {
  373. proceed.call(this, init);
  374. }
  375. };
  376. // Define the animate method for regular series
  377. wrap(seriesProto, 'animate', polarAnimate);
  378. if (seriesTypes.column) {
  379. arearangeProto = seriesTypes.arearange.prototype;
  380. columnProto = seriesTypes.column.prototype;
  381. columnProto.polarArc = function (low, high, start, end) {
  382. var center = this.xAxis.center, len = this.yAxis.len, paneInnerR = center[3] / 2, r = len - high + paneInnerR, innerR = len - pick(low, len) + paneInnerR;
  383. // Prevent columns from shooting through the pane's center
  384. if (this.yAxis.reversed) {
  385. if (r < 0) {
  386. r = paneInnerR;
  387. }
  388. if (innerR < 0) {
  389. innerR = paneInnerR;
  390. }
  391. }
  392. // Return a new shapeArgs
  393. return {
  394. x: center[0],
  395. y: center[1],
  396. r: r,
  397. innerR: innerR,
  398. start: start,
  399. end: end
  400. };
  401. };
  402. /**
  403. * Define the animate method for columnseries
  404. * @private
  405. */
  406. wrap(columnProto, 'animate', polarAnimate);
  407. /**
  408. * Extend the column prototype's translate method
  409. * @private
  410. */
  411. wrap(columnProto, 'translate', function (proceed) {
  412. var series = this, options = series.options, threshold = options.threshold, stacking = options.stacking, chart = series.chart, xAxis = series.xAxis, yAxis = series.yAxis, reversed = yAxis.reversed, center = yAxis.center, startAngleRad = xAxis.startAngleRad, endAngleRad = xAxis.endAngleRad, visibleRange = endAngleRad - startAngleRad, thresholdAngleRad, points, point, i, yMin, yMax, start, end, tooltipPos, pointX, pointY, stackValues, stack, barX, innerR, r;
  413. series.preventPostTranslate = true;
  414. // Run uber method
  415. proceed.call(series);
  416. // Postprocess plot coordinates
  417. if (xAxis.isRadial) {
  418. points = series.points;
  419. i = points.length;
  420. yMin = yAxis.translate(yAxis.min);
  421. yMax = yAxis.translate(yAxis.max);
  422. threshold = options.threshold || 0;
  423. if (chart.inverted) {
  424. // Finding a correct threshold
  425. if (isNumber(threshold)) {
  426. thresholdAngleRad = yAxis.translate(threshold);
  427. // Checks if threshold is outside the visible range
  428. if (defined(thresholdAngleRad)) {
  429. if (thresholdAngleRad < 0) {
  430. thresholdAngleRad = 0;
  431. }
  432. else if (thresholdAngleRad > visibleRange) {
  433. thresholdAngleRad = visibleRange;
  434. }
  435. // Adding start angle offset
  436. series.translatedThreshold =
  437. thresholdAngleRad + startAngleRad;
  438. }
  439. }
  440. }
  441. while (i--) {
  442. point = points[i];
  443. barX = point.barX;
  444. pointX = point.x;
  445. pointY = point.y;
  446. point.shapeType = 'arc';
  447. if (chart.inverted) {
  448. point.plotY = yAxis.translate(pointY);
  449. if (stacking && yAxis.stacking) {
  450. stack = yAxis.stacking.stacks[(pointY < 0 ? '-' : '') +
  451. series.stackKey];
  452. if (series.visible && stack && stack[pointX]) {
  453. if (!point.isNull) {
  454. stackValues = stack[pointX].points[series.getStackIndicator(void 0, pointX, series.index).key];
  455. // Translating to radial values
  456. start = yAxis.translate(stackValues[0]);
  457. end = yAxis.translate(stackValues[1]);
  458. // If starting point is beyond the
  459. // range, set it to 0
  460. if (defined(start)) {
  461. start = U.clamp(start, 0, visibleRange);
  462. }
  463. }
  464. }
  465. }
  466. else {
  467. // Initial start and end angles for radial bar
  468. start = thresholdAngleRad;
  469. end = point.plotY;
  470. }
  471. if (start > end) {
  472. // Swapping start and end
  473. end = [start, start = end][0];
  474. }
  475. // Prevent from rendering point outside the
  476. // acceptable circular range
  477. if (!reversed) {
  478. if (start < yMin) {
  479. start = yMin;
  480. }
  481. else if (end > yMax) {
  482. end = yMax;
  483. }
  484. else if (end < yMin || start > yMax) {
  485. start = end = 0;
  486. }
  487. }
  488. else {
  489. if (end > yMin) {
  490. end = yMin;
  491. }
  492. else if (start < yMax) {
  493. start = yMax;
  494. }
  495. else if (start > yMin || end < yMax) {
  496. start = end = visibleRange;
  497. }
  498. }
  499. if (yAxis.min > yAxis.max) {
  500. start = end = reversed ? visibleRange : 0;
  501. }
  502. start += startAngleRad;
  503. end += startAngleRad;
  504. if (center) {
  505. point.barX = barX += center[3] / 2;
  506. }
  507. // In case when radius, inner radius or both are
  508. // negative, a point is rendered but partially or as
  509. // a center point
  510. innerR = Math.max(barX, 0);
  511. r = Math.max(barX + point.pointWidth, 0);
  512. point.shapeArgs = {
  513. x: center && center[0],
  514. y: center && center[1],
  515. r: r,
  516. innerR: innerR,
  517. start: start,
  518. end: end
  519. };
  520. // Fade out the points if not inside the polar "plot area"
  521. point.opacity = start === end ? 0 : void 0;
  522. // A correct value for stacked or not fully visible
  523. // point
  524. point.plotY = (defined(series.translatedThreshold) &&
  525. (start < series.translatedThreshold ? start : end)) -
  526. startAngleRad;
  527. }
  528. else {
  529. start = barX + startAngleRad;
  530. // Changed the way polar columns are drawn in order to make
  531. // it more consistent with the drawing of inverted columns
  532. // (they are using the same function now). Also, it was
  533. // essential to make the animation work correctly (the
  534. // scaling of the group) is replaced by animating each
  535. // element separately.
  536. point.shapeArgs = series.polarArc(point.yBottom, point.plotY, start, start + point.pointWidth);
  537. }
  538. // Provided a correct coordinates for the tooltip
  539. series.toXY(point);
  540. if (chart.inverted) {
  541. tooltipPos = yAxis.postTranslate(point.rectPlotY, barX + point.pointWidth / 2);
  542. point.tooltipPos = [
  543. tooltipPos.x - chart.plotLeft,
  544. tooltipPos.y - chart.plotTop
  545. ];
  546. }
  547. else {
  548. point.tooltipPos = [point.plotX, point.plotY];
  549. }
  550. if (center) {
  551. point.ttBelow = point.plotY > center[1];
  552. }
  553. }
  554. }
  555. });
  556. /**
  557. * Find correct align and vertical align based on an angle in polar chart
  558. * @private
  559. */
  560. columnProto.findAlignments = function (angle, options) {
  561. var align, verticalAlign;
  562. if (options.align === null) {
  563. if (angle > 20 && angle < 160) {
  564. align = 'left'; // right hemisphere
  565. }
  566. else if (angle > 200 && angle < 340) {
  567. align = 'right'; // left hemisphere
  568. }
  569. else {
  570. align = 'center'; // top or bottom
  571. }
  572. options.align = align;
  573. }
  574. if (options.verticalAlign === null) {
  575. if (angle < 45 || angle > 315) {
  576. verticalAlign = 'bottom'; // top part
  577. }
  578. else if (angle > 135 && angle < 225) {
  579. verticalAlign = 'top'; // bottom part
  580. }
  581. else {
  582. verticalAlign = 'middle'; // left or right
  583. }
  584. options.verticalAlign = verticalAlign;
  585. }
  586. return options;
  587. };
  588. if (arearangeProto) {
  589. arearangeProto.findAlignments = columnProto.findAlignments;
  590. }
  591. /**
  592. * Align column data labels outside the columns. #1199.
  593. * @private
  594. */
  595. wrap(columnProto, 'alignDataLabel', function (proceed, point, dataLabel, options, alignTo, isNew) {
  596. var chart = this.chart, inside = pick(options.inside, !!this.options.stacking), angle, shapeArgs, labelPos;
  597. if (chart.polar) {
  598. angle = point.rectPlotX / Math.PI * 180;
  599. if (!chart.inverted) {
  600. // Align nicely outside the perimeter of the columns
  601. if (this.findAlignments) {
  602. options = this.findAlignments(angle, options);
  603. }
  604. }
  605. else { // Required corrections for data labels of inverted bars
  606. // The plotX and plotY are correctly set therefore they
  607. // don't need to be swapped (inverted argument is false)
  608. this.forceDL = chart.isInsidePlot(point.plotX, Math.round(point.plotY), false);
  609. // Checks if labels should be positioned inside
  610. if (inside && point.shapeArgs) {
  611. shapeArgs = point.shapeArgs;
  612. // Calculates pixel positions for a data label to be
  613. // inside
  614. labelPos =
  615. this.yAxis.postTranslate(
  616. // angle
  617. (shapeArgs.start + shapeArgs.end) / 2 -
  618. this
  619. .xAxis.startAngleRad,
  620. // radius
  621. point.barX +
  622. point.pointWidth / 2);
  623. alignTo = {
  624. x: labelPos.x - chart.plotLeft,
  625. y: labelPos.y - chart.plotTop
  626. };
  627. }
  628. else if (point.tooltipPos) {
  629. alignTo = {
  630. x: point.tooltipPos[0],
  631. y: point.tooltipPos[1]
  632. };
  633. }
  634. options.align = pick(options.align, 'center');
  635. options.verticalAlign =
  636. pick(options.verticalAlign, 'middle');
  637. }
  638. seriesProto.alignDataLabel.call(this, point, dataLabel, options, alignTo, isNew);
  639. // Hide label of a point (only inverted) that is outside the
  640. // visible y range
  641. if (this.isRadialBar && point.shapeArgs &&
  642. point.shapeArgs.start === point.shapeArgs.end) {
  643. dataLabel.hide(true);
  644. }
  645. }
  646. else {
  647. proceed.call(this, point, dataLabel, options, alignTo, isNew);
  648. }
  649. });
  650. }
  651. /**
  652. * Extend getCoordinates to prepare for polar axis values
  653. * @private
  654. */
  655. wrap(pointerProto, 'getCoordinates', function (proceed, e) {
  656. var chart = this.chart, ret = {
  657. xAxis: [],
  658. yAxis: []
  659. };
  660. if (chart.polar) {
  661. chart.axes.forEach(function (axis) {
  662. var isXAxis = axis.isXAxis, center = axis.center, x, y;
  663. // Skip colorAxis
  664. if (axis.coll === 'colorAxis') {
  665. return;
  666. }
  667. x = e.chartX - center[0] - chart.plotLeft;
  668. y = e.chartY - center[1] - chart.plotTop;
  669. ret[isXAxis ? 'xAxis' : 'yAxis'].push({
  670. axis: axis,
  671. value: axis.translate(isXAxis ?
  672. Math.PI - Math.atan2(x, y) : // angle
  673. // distance from center
  674. Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)), true)
  675. });
  676. });
  677. }
  678. else {
  679. ret = proceed.call(this, e);
  680. }
  681. return ret;
  682. });
  683. SVGRenderer.prototype.clipCircle = function (x, y, r, innerR) {
  684. var wrapper, id = uniqueKey(), clipPath = this.createElement('clipPath').attr({
  685. id: id
  686. }).add(this.defs);
  687. wrapper = innerR ?
  688. this.arc(x, y, r, innerR, 0, 2 * Math.PI).add(clipPath) :
  689. this.circle(x, y, r).add(clipPath);
  690. wrapper.id = id;
  691. wrapper.clipPath = clipPath;
  692. return wrapper;
  693. };
  694. addEvent(Chart, 'getAxes', function () {
  695. if (!this.pane) {
  696. this.pane = [];
  697. }
  698. splat(this.options.pane).forEach(function (paneOptions) {
  699. new Pane(// eslint-disable-line no-new
  700. paneOptions, this);
  701. }, this);
  702. });
  703. addEvent(Chart, 'afterDrawChartBox', function () {
  704. this.pane.forEach(function (pane) {
  705. pane.render();
  706. });
  707. });
  708. addEvent(Series, 'afterInit', function () {
  709. var chart = this.chart;
  710. // Add flags that identifies radial inverted series
  711. if (chart.inverted && chart.polar) {
  712. this.isRadialSeries = true;
  713. if (this.is('column')) {
  714. this.isRadialBar = true;
  715. }
  716. }
  717. });
  718. /**
  719. * Extend chart.get to also search in panes. Used internally in
  720. * responsiveness and chart.update.
  721. * @private
  722. */
  723. wrap(Chart.prototype, 'get', function (proceed, id) {
  724. return find(this.pane || [], function (pane) {
  725. return pane.options.id === id;
  726. }) || proceed.call(this, id);
  727. });