dumbbell.src.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  1. /**
  2. * @license Highcharts JS v8.0.0 (2019-12-10)
  3. *
  4. * (c) 2009-2019 Sebastian Bochan, Rafal Sebestjanski
  5. *
  6. * License: www.highcharts.com/license
  7. */
  8. 'use strict';
  9. (function (factory) {
  10. if (typeof module === 'object' && module.exports) {
  11. factory['default'] = factory;
  12. module.exports = factory;
  13. } else if (typeof define === 'function' && define.amd) {
  14. define('highcharts/modules/dumbbell', ['highcharts'], function (Highcharts) {
  15. factory(Highcharts);
  16. factory.Highcharts = Highcharts;
  17. return factory;
  18. });
  19. } else {
  20. factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined);
  21. }
  22. }(function (Highcharts) {
  23. var _modules = Highcharts ? Highcharts._modules : {};
  24. function _registerModule(obj, path, args, fn) {
  25. if (!obj.hasOwnProperty(path)) {
  26. obj[path] = fn.apply(null, args);
  27. }
  28. }
  29. _registerModule(_modules, 'modules/dumbbell.src.js', [_modules['parts/Globals.js']], function (H) {
  30. /* *
  31. *
  32. * (c) 2010-2019 Sebastian Bochan, Rafal Sebestjanski
  33. *
  34. * License: www.highcharts.com/license
  35. *
  36. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  37. *
  38. * */
  39. var pick = H.pick, seriesType = H.seriesType, seriesTypes = H.seriesTypes, seriesProto = H.Series.prototype, areaRangeProto = seriesTypes.arearange.prototype, columnRangeProto = seriesTypes.columnrange.prototype, colProto = seriesTypes.column.prototype, areaRangePointProto = areaRangeProto.pointClass.prototype;
  40. /**
  41. * The dumbbell series is a cartesian series with higher and lower values for
  42. * each point along an X axis, connected with a line between the values.
  43. * Requires `highcharts-more.js` and `modules/dumbbell.js`.
  44. *
  45. * @sample {highcharts} highcharts/demo/dumbbell/
  46. * Dumbbell chart
  47. * @sample {highcharts} highcharts/series-dumbbell/styled-mode-dumbbell/
  48. * Styled mode
  49. *
  50. * @extends plotOptions.arearange
  51. * @product highcharts highstock
  52. * @excluding fillColor, fillOpacity, lineWidth, stack, stacking,
  53. * stickyTracking, trackByArea
  54. * @since 8.0.0
  55. * @optionparent plotOptions.dumbbell
  56. */
  57. seriesType('dumbbell', 'arearange', {
  58. /** @ignore-option */
  59. trackByArea: false,
  60. /** @ignore-option */
  61. fillColor: 'none',
  62. /** @ignore-option */
  63. lineWidth: 0,
  64. pointRange: 1,
  65. /**
  66. * Pixel width of the line that connects the dumbbell point's values.
  67. *
  68. * @since 8.0.0
  69. * @product highcharts highstock
  70. */
  71. connectorWidth: 1,
  72. /** @ignore-option */
  73. stickyTracking: false,
  74. groupPadding: 0.2,
  75. pointPadding: 0.1,
  76. /**
  77. * Color of the start markers in a dumbbell graph.
  78. *
  79. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  80. * @since 8.0.0
  81. * @product highcharts highstock
  82. */
  83. lowColor: '#333333',
  84. /**
  85. * Color of the line that connects the dumbbell point's values.
  86. * By default it is the series' color.
  87. *
  88. * @type {string}
  89. * @product highcharts highstock
  90. * @since 8.0.0
  91. * @apioption plotOptions.dumbbell.connectorColor
  92. */
  93. states: {
  94. hover: {
  95. /** @ignore-option */
  96. lineWidthPlus: 0,
  97. /**
  98. * The additional connector line width for a hovered point.
  99. *
  100. * @since 8.0.0
  101. * @product highcharts highstock
  102. */
  103. connectorWidthPlus: 1,
  104. /** @ignore-option */
  105. halo: false
  106. }
  107. }
  108. }, {
  109. trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
  110. drawTracker: H.TrackerMixin.drawTrackerPoint,
  111. drawGraph: H.noop,
  112. /**
  113. * Correct line position by Math.floor instead of round.
  114. * As a result the line is aligned in the same way as marker
  115. *
  116. * @private
  117. *
  118. * @function Highcharts.seriesTypes.dumbbell#crispConnector
  119. *
  120. * @param {Highcharts.SVGRenderer} this
  121. * Highcharts Renderer.
  122. * @param {Highcharts.SVGPathArray} points
  123. * The original points on the format `['M', 0, 0, 'L', 100, 0]`.
  124. * @param {number} width
  125. * Connector's width.
  126. *
  127. * @return {Highcharts.SVGPathArray}
  128. * The original points array, but modified to render crisply.
  129. *
  130. *
  131. */
  132. crispConnector: function (points, width) {
  133. if (points[1] === points[4]) {
  134. // Substract due to #1129. Now bottom and left axis gridlines behave
  135. // the same.
  136. points[1] = points[4] =
  137. Math.floor(points[1]) + (width % 2 / 2);
  138. }
  139. if (points[2] === points[5]) {
  140. points[2] = points[5] =
  141. Math.floor(points[2]) + (width % 2 / 2);
  142. }
  143. return points;
  144. },
  145. crispCol: colProto.crispCol,
  146. /**
  147. * Get connector line path and styles that connects dumbbell point's low and
  148. * high values.
  149. * @private
  150. *
  151. * @param {Highcharts.Series} this The series of points.
  152. * @param {Highcharts.Point} point The point to inspect.
  153. *
  154. * @return {Highcharts.SVGAttributes} attribs The path and styles.
  155. */
  156. getConnectorAttribs: function (point) {
  157. var series = this, chart = series.chart, pointOptions = point.options, seriesOptions = series.options, xAxis = series.xAxis, yAxis = series.yAxis, connectorWidth = pick(pointOptions.connectorWidth, seriesOptions.connectorWidth), connectorColor = pick(pointOptions.connectorColor, seriesOptions.connectorColor, pointOptions.color, point.zone ? point.zone.color : void 0, point.color), connectorWidthPlus = pick(seriesOptions.states &&
  158. seriesOptions.states.hover &&
  159. seriesOptions.states.hover.connectorWidthPlus, 1), dashStyle = pick(pointOptions.dashStyle, seriesOptions.dashStyle), pointTop = pick(point.plotLow, point.plotY), pxThreshold = yAxis.toPixels(seriesOptions.threshold || 0, true), pointHeight = chart.inverted ?
  160. yAxis.len - pxThreshold : pxThreshold, pointBottom = pick(point.plotHigh, pointHeight), attribs, origProps;
  161. if (point.state) {
  162. connectorWidth = connectorWidth + connectorWidthPlus;
  163. }
  164. if (pointTop < 0) {
  165. pointTop = 0;
  166. }
  167. else if (pointTop >= yAxis.len) {
  168. pointTop = yAxis.len;
  169. }
  170. if (pointBottom < 0) {
  171. pointBottom = 0;
  172. }
  173. else if (pointBottom >= yAxis.len) {
  174. pointBottom = yAxis.len;
  175. }
  176. if (point.plotX < 0 || point.plotX > xAxis.len) {
  177. connectorWidth = 0;
  178. }
  179. // Connector should reflect upper marker's zone color
  180. if (point.upperGraphic) {
  181. origProps = {
  182. y: point.y,
  183. zone: point.zone
  184. };
  185. point.y = point.high;
  186. point.zone = point.zone ? point.getZone() : void 0;
  187. connectorColor = pick(pointOptions.connectorColor, seriesOptions.connectorColor, pointOptions.color, point.zone ? point.zone.color : void 0, point.color);
  188. H.extend(point, origProps);
  189. }
  190. attribs = {
  191. d: series.crispConnector([
  192. 'M',
  193. point.plotX,
  194. pointTop,
  195. 'L',
  196. point.plotX,
  197. pointBottom
  198. ], connectorWidth)
  199. };
  200. if (!chart.styledMode) {
  201. attribs.stroke = connectorColor;
  202. attribs['stroke-width'] = connectorWidth;
  203. if (dashStyle) {
  204. attribs.dashstyle = dashStyle;
  205. }
  206. }
  207. return attribs;
  208. },
  209. /**
  210. * Draw connector line that connects dumbbell point's low and high values.
  211. * @private
  212. *
  213. * @param {Highcharts.Series} this The series of points.
  214. * @param {Highcharts.Point} point The point to inspect.
  215. *
  216. * @return {void}
  217. */
  218. drawConnector: function (point) {
  219. var series = this, animationLimit = pick(series.options.animationLimit, 250), verb = point.connector && series.chart.pointCount < animationLimit ?
  220. 'animate' : 'attr';
  221. if (!point.connector) {
  222. point.connector = series.chart.renderer.path()
  223. .addClass('highcharts-lollipop-stem')
  224. .attr({
  225. zIndex: -1
  226. })
  227. .add(series.markerGroup);
  228. }
  229. point.connector[verb](this.getConnectorAttribs(point));
  230. },
  231. /**
  232. * Return the width and x offset of the dumbbell adjusted for grouping,
  233. * groupPadding, pointPadding, pointWidth etc.
  234. *
  235. * @private
  236. *
  237. * @function Highcharts.seriesTypes.column#getColumnMetrics
  238. *
  239. * @param {Highcharts.Series} this The series of points.
  240. *
  241. * @return {Highcharts.ColumnMetricsObject} metrics shapeArgs
  242. *
  243. */
  244. getColumnMetrics: function () {
  245. var metrics = colProto.getColumnMetrics.apply(this, arguments);
  246. metrics.offset = metrics.offset + metrics.width / 2;
  247. return metrics;
  248. },
  249. translatePoint: areaRangeProto.translate,
  250. setShapeArgs: columnRangeProto.translate,
  251. /**
  252. * Translate each point to the plot area coordinate system and find
  253. * shape positions
  254. *
  255. * @private
  256. *
  257. * @function Highcharts.seriesTypes.dumbbell#translate
  258. *
  259. * @param {Highcharts.Series} this The series of points.
  260. *
  261. * @return {void}
  262. */
  263. translate: function () {
  264. // Calculate shapeargs
  265. this.setShapeArgs.apply(this);
  266. // Calculate point low / high values
  267. this.translatePoint.apply(this, arguments);
  268. // Correct x position
  269. this.points.forEach(function (point) {
  270. var shapeArgs = point.shapeArgs, pointWidth = point.pointWidth;
  271. point.plotX = shapeArgs.x;
  272. shapeArgs.x = point.plotX - pointWidth / 2;
  273. point.tooltipPos = null;
  274. });
  275. },
  276. seriesDrawPoints: areaRangeProto.drawPoints,
  277. /**
  278. * Extend the arearange series' drawPoints method by applying a connector
  279. * and coloring markers.
  280. * @private
  281. *
  282. * @function Highcharts.Series#drawPoints
  283. *
  284. * @param {Highcharts.Series} this The series of points.
  285. *
  286. * @return {void}
  287. */
  288. drawPoints: function () {
  289. var series = this, chart = series.chart, pointLength = series.points.length, seriesLowColor = series.lowColor = series.options.lowColor, i = 0, lowerGraphicColor, point, zoneColor;
  290. this.seriesDrawPoints.apply(series, arguments);
  291. // Draw connectors and color upper markers
  292. while (i < pointLength) {
  293. point = series.points[i];
  294. series.drawConnector(point);
  295. if (point.upperGraphic) {
  296. point.upperGraphic.element.point = point;
  297. point.upperGraphic.addClass('highcharts-lollipop-high');
  298. }
  299. point.connector.element.point = point;
  300. if (point.lowerGraphic) {
  301. zoneColor = point.zone && point.zone.color;
  302. lowerGraphicColor = pick(point.options.lowColor, seriesLowColor, point.options.color, zoneColor, point.color, series.color);
  303. if (!chart.styledMode) {
  304. point.lowerGraphic.attr({
  305. fill: lowerGraphicColor
  306. });
  307. }
  308. point.lowerGraphic.addClass('highcharts-lollipop-low');
  309. }
  310. i++;
  311. }
  312. },
  313. /**
  314. * Get non-presentational attributes for a point. Used internally for
  315. * both styled mode and classic. Set correct position in link with connector
  316. * line.
  317. *
  318. * @see Series#pointAttribs
  319. *
  320. * @function Highcharts.Series#markerAttribs
  321. *
  322. * @param {Highcharts.Series} this The series of points.
  323. *
  324. * @return {Highcharts.SVGAttributes}
  325. * A hash containing those attributes that are not settable from
  326. * CSS.
  327. */
  328. markerAttribs: function () {
  329. var ret = areaRangeProto.markerAttribs.apply(this, arguments);
  330. ret.x = Math.floor(ret.x);
  331. ret.y = Math.floor(ret.y);
  332. return ret;
  333. },
  334. /**
  335. * Get presentational attributes
  336. *
  337. * @private
  338. * @function Highcharts.seriesTypes.column#pointAttribs
  339. *
  340. * @param {Highcharts.Series} this The series of points.
  341. * @param {Highcharts.Point} point The point to inspect.
  342. * @param {string} state current state of point (normal, hover, select)
  343. *
  344. * @return {Highcharts.SVGAttributes} pointAttribs SVGAttributes
  345. */
  346. pointAttribs: function (point, state) {
  347. var pointAttribs;
  348. pointAttribs = seriesProto.pointAttribs.apply(this, arguments);
  349. if (state === 'hover') {
  350. delete pointAttribs.fill;
  351. }
  352. return pointAttribs;
  353. }
  354. }, {
  355. // seriesTypes doesn't inherit from arearange point proto so put below
  356. // methods rigidly.
  357. destroyElements: areaRangePointProto.destroyElements,
  358. isValid: areaRangePointProto.isValid,
  359. pointSetState: areaRangePointProto.setState,
  360. /**
  361. * Set the point's state extended by have influence on the connector
  362. * (between low and high value).
  363. *
  364. * @private
  365. * @param {Highcharts.Point} this The point to inspect.
  366. *
  367. * @return {void}
  368. */
  369. setState: function () {
  370. var point = this, series = point.series, chart = series.chart, seriesLowColor = series.options.lowColor, pointOptions = point.options, pointLowColor = pointOptions.lowColor, zoneColor = point.zone && point.zone.color, lowerGraphicColor = pick(pointLowColor, seriesLowColor, pointOptions.color, zoneColor, point.color, series.color), verb = 'attr', upperGraphicColor, origProps;
  371. this.pointSetState.apply(this, arguments);
  372. if (!this.state) {
  373. verb = 'animate';
  374. if (point.lowerGraphic && !chart.styledMode) {
  375. point.lowerGraphic.attr({
  376. fill: lowerGraphicColor
  377. });
  378. if (point.upperGraphic) {
  379. origProps = {
  380. y: point.y,
  381. zone: point.zone
  382. };
  383. point.y = point.high;
  384. point.zone = point.zone ? point.getZone() : void 0;
  385. upperGraphicColor = pick(point.marker ? point.marker.fillColor : void 0, pointOptions.color, point.zone ? point.zone.color : void 0, point.color);
  386. point.upperGraphic.attr({
  387. fill: upperGraphicColor
  388. });
  389. H.extend(point, origProps);
  390. }
  391. }
  392. }
  393. point.connector[verb](series.getConnectorAttribs(point));
  394. }
  395. });
  396. });
  397. _registerModule(_modules, 'masters/modules/dumbbell.src.js', [], function () {
  398. });
  399. }));