ColumnPyramidSeries.js 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. /* *
  2. *
  3. * (c) 2010-2020 Sebastian Bochan
  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 '../Core/Globals.js';
  12. import U from '../Core/Utilities.js';
  13. var clamp = U.clamp, pick = U.pick, seriesType = U.seriesType;
  14. var seriesTypes = H.seriesTypes;
  15. var colProto = seriesTypes.column.prototype;
  16. /**
  17. * The ColumnPyramidSeries class
  18. *
  19. * @private
  20. * @class
  21. * @name Highcharts.seriesTypes.columnpyramid
  22. *
  23. * @augments Highcharts.Series
  24. */
  25. seriesType('columnpyramid', 'column',
  26. /**
  27. * Column pyramid series display one pyramid per value along an X axis.
  28. * To display horizontal pyramids, set [chart.inverted](#chart.inverted) to
  29. * `true`.
  30. *
  31. * @sample {highcharts|highstock} highcharts/demo/column-pyramid/
  32. * Column pyramid
  33. * @sample {highcharts|highstock} highcharts/plotoptions/columnpyramid-stacked/
  34. * Column pyramid stacked
  35. * @sample {highcharts|highstock} highcharts/plotoptions/columnpyramid-inverted/
  36. * Column pyramid inverted
  37. *
  38. * @extends plotOptions.column
  39. * @since 7.0.0
  40. * @product highcharts highstock
  41. * @excluding boostThreshold, borderRadius, crisp, depth, edgeColor,
  42. * edgeWidth, groupZPadding, negativeColor, softThreshold,
  43. * threshold, zoneAxis, zones, boostBlending
  44. * @requires highcharts-more
  45. * @optionparent plotOptions.columnpyramid
  46. */
  47. {
  48. // no additions
  49. }, {
  50. /* eslint-disable-next-line valid-jsdoc */
  51. /**
  52. * Overrides the column translate method
  53. * @private
  54. */
  55. translate: function () {
  56. var series = this, chart = series.chart, options = series.options, dense = series.dense =
  57. series.closestPointRange * series.xAxis.transA < 2, borderWidth = series.borderWidth = pick(options.borderWidth, dense ? 0 : 1 // #3635
  58. ), yAxis = series.yAxis, threshold = options.threshold, translatedThreshold = series.translatedThreshold =
  59. yAxis.getThreshold(threshold), minPointLength = pick(options.minPointLength, 5), metrics = series.getColumnMetrics(), pointWidth = metrics.width,
  60. // postprocessed for border width
  61. seriesBarW = series.barW =
  62. Math.max(pointWidth, 1 + 2 * borderWidth), pointXOffset = series.pointXOffset = metrics.offset;
  63. if (chart.inverted) {
  64. translatedThreshold -= 0.5; // #3355
  65. }
  66. // When the pointPadding is 0,
  67. // we want the pyramids to be packed tightly,
  68. // so we allow individual pyramids to have individual sizes.
  69. // When pointPadding is greater,
  70. // we strive for equal-width columns (#2694).
  71. if (options.pointPadding) {
  72. seriesBarW = Math.ceil(seriesBarW);
  73. }
  74. colProto.translate.apply(series);
  75. // Record the new values
  76. series.points.forEach(function (point) {
  77. var yBottom = pick(point.yBottom, translatedThreshold), safeDistance = 999 + Math.abs(yBottom), plotY = clamp(point.plotY, -safeDistance, yAxis.len + safeDistance),
  78. // Don't draw too far outside plot area
  79. // (#1303, #2241, #4264)
  80. barX = point.plotX + pointXOffset, barW = seriesBarW / 2, barY = Math.min(plotY, yBottom), barH = Math.max(plotY, yBottom) - barY, stackTotal, stackHeight, topPointY, topXwidth, bottomXwidth, invBarPos, x1, x2, x3, x4, y1, y2;
  81. point.barX = barX;
  82. point.pointWidth = pointWidth;
  83. // Fix the tooltip on center of grouped pyramids
  84. // (#1216, #424, #3648)
  85. point.tooltipPos = chart.inverted ?
  86. [
  87. yAxis.len + yAxis.pos - chart.plotLeft - plotY,
  88. series.xAxis.len - barX - barW,
  89. barH
  90. ] :
  91. [
  92. barX + barW,
  93. plotY + yAxis.pos - chart.plotTop,
  94. barH
  95. ];
  96. stackTotal =
  97. threshold + (point.total || point.y);
  98. // overwrite stacktotal (always 100 / -100)
  99. if (options.stacking === 'percent') {
  100. stackTotal =
  101. threshold + (point.y < 0) ?
  102. -100 :
  103. 100;
  104. }
  105. // get the highest point (if stack, extract from total)
  106. topPointY = yAxis.toPixels((stackTotal), true);
  107. // calculate height of stack (in pixels)
  108. stackHeight =
  109. chart.plotHeight - topPointY -
  110. (chart.plotHeight - translatedThreshold);
  111. // topXwidth and bottomXwidth = width of lines from the center
  112. // calculated from tanges proportion.
  113. // Can not be a NaN #12514
  114. topXwidth = stackHeight ? (barW * (barY - topPointY)) / stackHeight : 0;
  115. // like topXwidth, but with height of point
  116. bottomXwidth = stackHeight ? (barW * (barY + barH - topPointY)) / stackHeight : 0;
  117. /*
  118. /\
  119. / \
  120. x1,y1,------ x2,y1
  121. / \
  122. ----------
  123. x4,y2 x3,y2
  124. */
  125. x1 = barX - topXwidth + barW;
  126. x2 = barX + topXwidth + barW;
  127. x3 = barX + bottomXwidth + barW;
  128. x4 = barX - bottomXwidth + barW;
  129. y1 = barY - minPointLength;
  130. y2 = barY + barH;
  131. if (point.y < 0) {
  132. y1 = barY;
  133. y2 = barY + barH + minPointLength;
  134. }
  135. // inverted chart
  136. if (chart.inverted) {
  137. invBarPos = chart.plotWidth - barY;
  138. stackHeight = (topPointY -
  139. (chart.plotWidth - translatedThreshold));
  140. // proportion tanges
  141. topXwidth = (barW *
  142. (topPointY - invBarPos)) / stackHeight;
  143. bottomXwidth = (barW *
  144. (topPointY - (invBarPos - barH))) / stackHeight;
  145. x1 = barX + barW + topXwidth; // top bottom
  146. x2 = x1 - 2 * topXwidth; // top top
  147. x3 = barX - bottomXwidth + barW; // bottom top
  148. x4 = barX + bottomXwidth + barW; // bottom bottom
  149. y1 = barY;
  150. y2 = barY + barH - minPointLength;
  151. if (point.y < 0) {
  152. y2 = barY + barH + minPointLength;
  153. }
  154. }
  155. // Register shape type and arguments to be used in drawPoints
  156. point.shapeType = 'path';
  157. point.shapeArgs = {
  158. // args for datalabels positioning
  159. x: x1,
  160. y: y1,
  161. width: x2 - x1,
  162. height: barH,
  163. // path of pyramid
  164. d: [
  165. ['M', x1, y1],
  166. ['L', x2, y1],
  167. ['L', x3, y2],
  168. ['L', x4, y2],
  169. ['Z']
  170. ]
  171. };
  172. });
  173. }
  174. });
  175. /**
  176. * A `columnpyramid` series. If the [type](#series.columnpyramid.type) option is
  177. * not specified, it is inherited from [chart.type](#chart.type).
  178. *
  179. * @extends series,plotOptions.columnpyramid
  180. * @excluding connectEnds, connectNulls, dashStyle, dataParser, dataURL,
  181. * gapSize, gapUnit, linecap, lineWidth, marker, step,
  182. * boostThreshold, boostBlending
  183. * @product highcharts highstock
  184. * @requires highcharts-more
  185. * @apioption series.columnpyramid
  186. */
  187. /**
  188. * @excluding halo, lineWidth, lineWidthPlus, marker
  189. * @product highcharts highstock
  190. * @apioption series.columnpyramid.states.hover
  191. */
  192. /**
  193. * @excluding halo, lineWidth, lineWidthPlus, marker
  194. * @product highcharts highstock
  195. * @apioption series.columnpyramid.states.select
  196. */
  197. /**
  198. * An array of data points for the series. For the `columnpyramid` series type,
  199. * points can be given in the following ways:
  200. *
  201. * 1. An array of numerical values. In this case, the numerical values will be
  202. * interpreted as `y` options. The `x` values will be automatically
  203. * calculated, either starting at 0 and incremented by 1, or from
  204. * `pointStart` and `pointInterval` given in the series options. If the axis
  205. * has categories, these will be used. Example:
  206. * ```js
  207. * data: [0, 5, 3, 5]
  208. * ```
  209. *
  210. * 2. An array of arrays with 2 values. In this case, the values correspond to
  211. * `x,y`. If the first value is a string, it is applied as the name of the
  212. * point, and the `x` value is inferred.
  213. * ```js
  214. * data: [
  215. * [0, 6],
  216. * [1, 2],
  217. * [2, 6]
  218. * ]
  219. * ```
  220. *
  221. * 3. An array of objects with named values. The objects are point configuration
  222. * objects as seen below. If the total number of data points exceeds the
  223. * series' [turboThreshold](#series.columnpyramid.turboThreshold), this
  224. * option is not available.
  225. * ```js
  226. * data: [{
  227. * x: 1,
  228. * y: 9,
  229. * name: "Point2",
  230. * color: "#00FF00"
  231. * }, {
  232. * x: 1,
  233. * y: 6,
  234. * name: "Point1",
  235. * color: "#FF00FF"
  236. * }]
  237. * ```
  238. *
  239. * @sample {highcharts} highcharts/chart/reflow-true/
  240. * Numerical values
  241. * @sample {highcharts} highcharts/series/data-array-of-arrays/
  242. * Arrays of numeric x and y
  243. * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
  244. * Arrays of datetime x and y
  245. * @sample {highcharts} highcharts/series/data-array-of-name-value/
  246. * Arrays of point.name and y
  247. * @sample {highcharts} highcharts/series/data-array-of-objects/
  248. * Config objects
  249. *
  250. * @type {Array<number|Array<(number|string),(number|null)>|null|*>}
  251. * @extends series.line.data
  252. * @excluding marker
  253. * @product highcharts highstock
  254. * @apioption series.columnpyramid.data
  255. */
  256. ''; // adds doclets above to transpiled file;