Column.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
  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 H from '../parts/Globals.js';
  12. import StackItem from '../parts/Stacking.js';
  13. import U from '../parts/Utilities.js';
  14. var addEvent = U.addEvent, pick = U.pick, wrap = U.wrap;
  15. import '../parts/Series.js';
  16. var perspective = H.perspective, Series = H.Series, seriesTypes = H.seriesTypes, svg = H.svg;
  17. /**
  18. * Depth of the columns in a 3D column chart.
  19. *
  20. * @type {number}
  21. * @default 25
  22. * @since 4.0
  23. * @product highcharts
  24. * @requires highcharts-3d
  25. * @apioption plotOptions.column.depth
  26. */
  27. /**
  28. * 3D columns only. The color of the edges. Similar to `borderColor`, except it
  29. * defaults to the same color as the column.
  30. *
  31. * @type {Highcharts.ColorString}
  32. * @product highcharts
  33. * @requires highcharts-3d
  34. * @apioption plotOptions.column.edgeColor
  35. */
  36. /**
  37. * 3D columns only. The width of the colored edges.
  38. *
  39. * @type {number}
  40. * @default 1
  41. * @product highcharts
  42. * @requires highcharts-3d
  43. * @apioption plotOptions.column.edgeWidth
  44. */
  45. /**
  46. * The spacing between columns on the Z Axis in a 3D chart.
  47. *
  48. * @type {number}
  49. * @default 1
  50. * @since 4.0
  51. * @product highcharts
  52. * @requires highcharts-3d
  53. * @apioption plotOptions.column.groupZPadding
  54. */
  55. /* eslint-disable no-invalid-this */
  56. /**
  57. * @private
  58. * @param {Highcharts.Chart} chart
  59. * Chart with stacks
  60. * @param {string} stacking
  61. * Stacking option
  62. * @return {Highcharts.Stack3dDictionary}
  63. */
  64. function retrieveStacks(chart, stacking) {
  65. var series = chart.series, stacks = {};
  66. var stackNumber, i = 1;
  67. series.forEach(function (s) {
  68. stackNumber = pick(s.options.stack, (stacking ? 0 : series.length - 1 - s.index)); // #3841, #4532
  69. if (!stacks[stackNumber]) {
  70. stacks[stackNumber] = { series: [s], position: i };
  71. i++;
  72. }
  73. else {
  74. stacks[stackNumber].series.push(s);
  75. }
  76. });
  77. stacks.totalStacks = i + 1;
  78. return stacks;
  79. }
  80. wrap(seriesTypes.column.prototype, 'translate', function (proceed) {
  81. proceed.apply(this, [].slice.call(arguments, 1));
  82. // Do not do this if the chart is not 3D
  83. if (this.chart.is3d()) {
  84. this.translate3dShapes();
  85. }
  86. });
  87. // Don't use justifyDataLabel when point is outsidePlot
  88. wrap(H.Series.prototype, 'justifyDataLabel', function (proceed) {
  89. return !(arguments[2].outside3dPlot) ?
  90. proceed.apply(this, [].slice.call(arguments, 1)) :
  91. false;
  92. });
  93. seriesTypes.column.prototype.translate3dPoints = function () { };
  94. seriesTypes.column.prototype.translate3dShapes = function () {
  95. var series = this, chart = series.chart, seriesOptions = series.options, depth = seriesOptions.depth, stack = seriesOptions.stacking ?
  96. (seriesOptions.stack || 0) :
  97. series.index, // #4743
  98. z = stack * (depth + (seriesOptions.groupZPadding || 1)), borderCrisp = series.borderWidth % 2 ? 0.5 : 0, point2dPos; // Position of point in 2D, used for 3D position calculation.
  99. if (chart.inverted && !series.yAxis.reversed) {
  100. borderCrisp *= -1;
  101. }
  102. if (seriesOptions.grouping !== false) {
  103. z = 0;
  104. }
  105. z += (seriesOptions.groupZPadding || 1);
  106. series.data.forEach(function (point) {
  107. // #7103 Reset outside3dPlot flag
  108. point.outside3dPlot = null;
  109. if (point.y !== null) {
  110. var shapeArgs = point.shapeArgs, tooltipPos = point.tooltipPos,
  111. // Array for final shapeArgs calculation.
  112. // We are checking two dimensions (x and y).
  113. dimensions = [['x', 'width'], ['y', 'height']], borderlessBase; // Crisped rects can have +/- 0.5 pixels offset.
  114. // #3131 We need to check if column is inside plotArea.
  115. dimensions.forEach(function (d) {
  116. borderlessBase = shapeArgs[d[0]] - borderCrisp;
  117. if (borderlessBase < 0) {
  118. // If borderLessBase is smaller than 0, it is needed to set
  119. // its value to 0 or 0.5 depending on borderWidth
  120. // borderWidth may be even or odd.
  121. shapeArgs[d[1]] +=
  122. shapeArgs[d[0]] + borderCrisp;
  123. shapeArgs[d[0]] = -borderCrisp;
  124. borderlessBase = 0;
  125. }
  126. if ((borderlessBase + shapeArgs[d[1]] >
  127. series[d[0] + 'Axis'].len) &&
  128. // Do not change height/width of column if 0 (#6708)
  129. shapeArgs[d[1]] !== 0) {
  130. shapeArgs[d[1]] =
  131. series[d[0] + 'Axis'].len -
  132. shapeArgs[d[0]];
  133. }
  134. if (
  135. // Do not remove columns with zero height/width.
  136. (shapeArgs[d[1]] !== 0) &&
  137. (shapeArgs[d[0]] >=
  138. series[d[0] + 'Axis'].len ||
  139. shapeArgs[d[0]] + shapeArgs[d[1]] <=
  140. borderCrisp)) {
  141. // Set args to 0 if column is outside the chart.
  142. for (var key in shapeArgs) { // eslint-disable-line guard-for-in
  143. shapeArgs[key] = 0;
  144. }
  145. // #7103 outside3dPlot flag is set on Points which are
  146. // currently outside of plot.
  147. point.outside3dPlot = true;
  148. }
  149. });
  150. // Change from 2d to 3d
  151. if (point.shapeType === 'rect') {
  152. point.shapeType = 'cuboid';
  153. }
  154. shapeArgs.z = z;
  155. shapeArgs.depth = depth;
  156. shapeArgs.insidePlotArea = true;
  157. // Point's position in 2D
  158. point2dPos = {
  159. x: shapeArgs.x + shapeArgs.width / 2,
  160. y: shapeArgs.y,
  161. z: z + depth / 2 // The center of column in Z dimension
  162. };
  163. // Recalculate point positions for inverted graphs
  164. if (chart.inverted) {
  165. point2dPos.x = shapeArgs.height;
  166. point2dPos.y = point.clientX;
  167. }
  168. // Calculate and store point's position in 3D,
  169. // using perspective method.
  170. point.plot3d = perspective([point2dPos], chart, true, false)[0];
  171. // Translate the tooltip position in 3d space
  172. tooltipPos = perspective([{
  173. x: tooltipPos[0],
  174. y: tooltipPos[1],
  175. z: z + depth / 2 // The center of column in Z dimension
  176. }], chart, true, false)[0];
  177. point.tooltipPos = [tooltipPos.x, tooltipPos.y];
  178. }
  179. });
  180. // store for later use #4067
  181. series.z = z;
  182. };
  183. wrap(seriesTypes.column.prototype, 'animate', function (proceed) {
  184. if (!this.chart.is3d()) {
  185. proceed.apply(this, [].slice.call(arguments, 1));
  186. }
  187. else {
  188. var args = arguments, init = args[1], yAxis = this.yAxis, series = this, reversed = this.yAxis.reversed;
  189. if (svg) { // VML is too slow anyway
  190. if (init) {
  191. series.data.forEach(function (point) {
  192. if (point.y !== null) {
  193. point.height = point.shapeArgs.height;
  194. point.shapey = point.shapeArgs.y; // #2968
  195. point.shapeArgs.height = 1;
  196. if (!reversed) {
  197. if (point.stackY) {
  198. point.shapeArgs.y =
  199. point.plotY +
  200. yAxis.translate(point.stackY);
  201. }
  202. else {
  203. point.shapeArgs.y =
  204. point.plotY +
  205. (point.negative ?
  206. -point.height :
  207. point.height);
  208. }
  209. }
  210. }
  211. });
  212. }
  213. else { // run the animation
  214. series.data.forEach(function (point) {
  215. if (point.y !== null) {
  216. point.shapeArgs.height = point.height;
  217. point.shapeArgs.y = point.shapey; // #2968
  218. // null value do not have a graphic
  219. if (point.graphic) {
  220. point.graphic.animate(point.shapeArgs, series.options.animation);
  221. }
  222. }
  223. });
  224. // redraw datalabels to the correct position
  225. this.drawDataLabels();
  226. }
  227. }
  228. }
  229. });
  230. // In case of 3d columns there is no sense to add this columns to a specific
  231. // series group - if series is added to a group all columns will have the same
  232. // zIndex in comparison with different series.
  233. wrap(seriesTypes.column.prototype, 'plotGroup', function (proceed, prop, name, visibility, zIndex, parent) {
  234. if (prop !== 'dataLabelsGroup') {
  235. if (this.chart.is3d()) {
  236. if (this[prop]) {
  237. delete this[prop];
  238. }
  239. if (parent) {
  240. if (!this.chart.columnGroup) {
  241. this.chart.columnGroup =
  242. this.chart.renderer.g('columnGroup').add(parent);
  243. }
  244. this[prop] = this.chart.columnGroup;
  245. this.chart.columnGroup.attr(this.getPlotBox());
  246. this[prop].survive = true;
  247. if (prop === 'group' || prop === 'markerGroup') {
  248. arguments[3] = 'visible';
  249. // For 3D column group and markerGroup should be visible
  250. }
  251. }
  252. }
  253. }
  254. return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  255. });
  256. // When series is not added to group it is needed to change setVisible method to
  257. // allow correct Legend funcionality. This wrap is basing on pie chart series.
  258. wrap(seriesTypes.column.prototype, 'setVisible', function (proceed, vis) {
  259. var series = this, pointVis;
  260. if (series.chart.is3d()) {
  261. series.data.forEach(function (point) {
  262. point.visible = point.options.visible = vis =
  263. typeof vis === 'undefined' ?
  264. !pick(series.visible, point.visible) : vis;
  265. pointVis = vis ? 'visible' : 'hidden';
  266. series.options.data[series.data.indexOf(point)] =
  267. point.options;
  268. if (point.graphic) {
  269. point.graphic.attr({
  270. visibility: pointVis
  271. });
  272. }
  273. });
  274. }
  275. proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  276. });
  277. seriesTypes.column.prototype
  278. .handle3dGrouping = true;
  279. addEvent(Series, 'afterInit', function () {
  280. if (this.chart.is3d() &&
  281. this.handle3dGrouping) {
  282. var series = this, seriesOptions = this.options, grouping = seriesOptions.grouping, stacking = seriesOptions.stacking, reversedStacks = pick(this.yAxis.options.reversedStacks, true), z = 0;
  283. // @todo grouping === true ?
  284. if (!(typeof grouping !== 'undefined' && !grouping)) {
  285. var stacks = retrieveStacks(this.chart, stacking), stack = seriesOptions.stack || 0, i; // position within the stack
  286. for (i = 0; i < stacks[stack].series.length; i++) {
  287. if (stacks[stack].series[i] === this) {
  288. break;
  289. }
  290. }
  291. z = (10 * (stacks.totalStacks - stacks[stack].position)) +
  292. (reversedStacks ? i : -i); // #4369
  293. // In case when axis is reversed, columns are also reversed inside
  294. // the group (#3737)
  295. if (!this.xAxis.reversed) {
  296. z = (stacks.totalStacks * 10) - z;
  297. }
  298. }
  299. seriesOptions.depth = seriesOptions.depth || 25;
  300. series.z = series.z || 0;
  301. seriesOptions.zIndex = z;
  302. }
  303. });
  304. // eslint-disable-next-line valid-jsdoc
  305. /**
  306. * @private
  307. */
  308. function pointAttribs(proceed) {
  309. var attr = proceed.apply(this, [].slice.call(arguments, 1));
  310. if (this.chart.is3d && this.chart.is3d()) {
  311. // Set the fill color to the fill color to provide a smooth edge
  312. attr.stroke = this.options.edgeColor || attr.fill;
  313. attr['stroke-width'] = pick(this.options.edgeWidth, 1); // #4055
  314. }
  315. return attr;
  316. }
  317. // eslint-disable-next-line valid-jsdoc
  318. /**
  319. * In 3D mode, all column-series are rendered in one main group. Because of that
  320. * we need to apply inactive state on all points.
  321. * @private
  322. */
  323. function setState(proceed, state, inherit) {
  324. var is3d = this.chart.is3d && this.chart.is3d();
  325. if (is3d) {
  326. this.options.inactiveOtherPoints = true;
  327. }
  328. proceed.call(this, state, inherit);
  329. if (is3d) {
  330. this.options.inactiveOtherPoints = false;
  331. }
  332. }
  333. // eslint-disable-next-line valid-jsdoc
  334. /**
  335. * In 3D mode, simple checking for a new shape to animate is not enough.
  336. * Additionally check if graphic is a group of elements
  337. * @private
  338. */
  339. function hasNewShapeType(proceed) {
  340. var args = [];
  341. for (var _i = 1; _i < arguments.length; _i++) {
  342. args[_i - 1] = arguments[_i];
  343. }
  344. return this.series.chart.is3d() ?
  345. this.graphic && this.graphic.element.nodeName !== 'g' :
  346. proceed.apply(this, args);
  347. }
  348. wrap(seriesTypes.column.prototype, 'pointAttribs', pointAttribs);
  349. wrap(seriesTypes.column.prototype, 'setState', setState);
  350. wrap(seriesTypes.column.prototype.pointClass.prototype, 'hasNewShapeType', hasNewShapeType);
  351. if (seriesTypes.columnrange) {
  352. wrap(seriesTypes.columnrange.prototype, 'pointAttribs', pointAttribs);
  353. wrap(seriesTypes.columnrange.prototype, 'setState', setState);
  354. wrap(seriesTypes.columnrange.prototype.pointClass.prototype, 'hasNewShapeType', hasNewShapeType);
  355. seriesTypes.columnrange.prototype.plotGroup =
  356. seriesTypes.column.prototype.plotGroup;
  357. seriesTypes.columnrange.prototype.setVisible =
  358. seriesTypes.column.prototype.setVisible;
  359. }
  360. wrap(Series.prototype, 'alignDataLabel', function (proceed, point, dataLabel, options, alignTo) {
  361. var chart = this.chart;
  362. // In 3D we need to pass point.outsidePlot option to the justifyDataLabel
  363. // method for disabling justifying dataLabels in columns outside plot
  364. options.outside3dPlot = point.outside3dPlot;
  365. // Only do this for 3D columns and it's derived series
  366. if (chart.is3d() &&
  367. this.is('column')) {
  368. var series = this, seriesOptions = series.options, inside = pick(options.inside, !!series.options.stacking), options3d = chart.options.chart.options3d, xOffset = point.pointWidth / 2 || 0;
  369. var dLPosition = {
  370. x: alignTo.x + xOffset,
  371. y: alignTo.y,
  372. z: series.z + seriesOptions.depth / 2
  373. };
  374. if (chart.inverted) {
  375. // Inside dataLabels are positioned according to above
  376. // logic and there is no need to position them using
  377. // non-3D algorighm (that use alignTo.width)
  378. if (inside) {
  379. alignTo.width = 0;
  380. dLPosition.x += point.shapeArgs.height / 2;
  381. }
  382. // When chart is upside down
  383. // (alpha angle between 180 and 360 degrees)
  384. // it is needed to add column width to calculated value.
  385. if (options3d.alpha >= 90 && options3d.alpha <= 270) {
  386. dLPosition.y += point.shapeArgs.width;
  387. }
  388. }
  389. // dLPosition is recalculated for 3D graphs
  390. dLPosition = perspective([dLPosition], chart, true, false)[0];
  391. alignTo.x = dLPosition.x - xOffset;
  392. // #7103 If point is outside of plotArea, hide data label.
  393. alignTo.y = point.outside3dPlot ? -9e9 : dLPosition.y;
  394. }
  395. proceed.apply(this, [].slice.call(arguments, 1));
  396. });
  397. // Added stackLabels position calculation for 3D charts.
  398. wrap(StackItem.prototype, 'getStackBox', function (proceed, chart, stackItem, x, y, xWidth, h, axis) {
  399. var stackBox = proceed.apply(this, [].slice.call(arguments, 1));
  400. // Only do this for 3D graph
  401. if (chart.is3d() && stackItem.base) {
  402. // First element of stackItem.base is an index of base series.
  403. var baseSeriesInd = +(stackItem.base).split(',')[0];
  404. var columnSeries = chart.series[baseSeriesInd];
  405. var options3d = chart.options.chart.options3d;
  406. // Only do this if base series is a column or inherited type,
  407. // use its barW, z and depth parameters
  408. // for correct stackLabels position calculation
  409. if (columnSeries &&
  410. columnSeries instanceof seriesTypes.column) {
  411. var dLPosition = {
  412. x: stackBox.x + (chart.inverted ? h : xWidth / 2),
  413. y: stackBox.y,
  414. z: columnSeries.options.depth / 2
  415. };
  416. if (chart.inverted) {
  417. // Do not use default offset calculation logic
  418. // for 3D inverted stackLabels.
  419. stackBox.width = 0;
  420. // When chart is upside down
  421. // (alpha angle between 180 and 360 degrees)
  422. // it is needed to add column width to calculated value.
  423. if (options3d.alpha >= 90 && options3d.alpha <= 270) {
  424. dLPosition.y += xWidth;
  425. }
  426. }
  427. dLPosition = perspective([dLPosition], chart, true, false)[0];
  428. stackBox.x = dLPosition.x - xWidth / 2;
  429. stackBox.y = dLPosition.y;
  430. }
  431. }
  432. return stackBox;
  433. });