Polar.js 29 KB

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