dumbbell.src.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
  1. /* *
  2. *
  3. * (c) 2010-2020 Sebastian Bochan, Rafal Sebestjanski
  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. var SVGRenderer = H.SVGRenderer;
  13. import U from '../parts/Utilities.js';
  14. var extend = U.extend, pick = U.pick, seriesType = U.seriesType;
  15. var seriesTypes = H.seriesTypes, seriesProto = H.Series.prototype, areaRangeProto = seriesTypes.arearange.prototype, columnRangeProto = seriesTypes.columnrange.prototype, colProto = seriesTypes.column.prototype, areaRangePointProto = areaRangeProto.pointClass.prototype;
  16. /**
  17. * The dumbbell series is a cartesian series with higher and lower values for
  18. * each point along an X axis, connected with a line between the values.
  19. * Requires `highcharts-more.js` and `modules/dumbbell.js`.
  20. *
  21. * @sample {highcharts} highcharts/demo/dumbbell/
  22. * Dumbbell chart
  23. * @sample {highcharts} highcharts/series-dumbbell/styled-mode-dumbbell/
  24. * Styled mode
  25. *
  26. * @extends plotOptions.arearange
  27. * @product highcharts highstock
  28. * @excluding fillColor, fillOpacity, lineWidth, stack, stacking,
  29. * stickyTracking, trackByArea
  30. * @since 8.0.0
  31. * @optionparent plotOptions.dumbbell
  32. */
  33. seriesType('dumbbell', 'arearange', {
  34. /** @ignore-option */
  35. trackByArea: false,
  36. /** @ignore-option */
  37. fillColor: 'none',
  38. /** @ignore-option */
  39. lineWidth: 0,
  40. pointRange: 1,
  41. /**
  42. * Pixel width of the line that connects the dumbbell point's values.
  43. *
  44. * @since 8.0.0
  45. * @product highcharts highstock
  46. */
  47. connectorWidth: 1,
  48. /** @ignore-option */
  49. stickyTracking: false,
  50. groupPadding: 0.2,
  51. crisp: false,
  52. pointPadding: 0.1,
  53. /**
  54. * Color of the start markers in a dumbbell graph.
  55. *
  56. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  57. * @since 8.0.0
  58. * @product highcharts highstock
  59. */
  60. lowColor: '#333333',
  61. /**
  62. * Color of the line that connects the dumbbell point's values.
  63. * By default it is the series' color.
  64. *
  65. * @type {string}
  66. * @product highcharts highstock
  67. * @since 8.0.0
  68. * @apioption plotOptions.dumbbell.connectorColor
  69. */
  70. states: {
  71. hover: {
  72. /** @ignore-option */
  73. lineWidthPlus: 0,
  74. /**
  75. * The additional connector line width for a hovered point.
  76. *
  77. * @since 8.0.0
  78. * @product highcharts highstock
  79. */
  80. connectorWidthPlus: 1,
  81. /** @ignore-option */
  82. halo: false
  83. }
  84. }
  85. }, {
  86. trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
  87. drawTracker: H.TrackerMixin.drawTrackerPoint,
  88. drawGraph: H.noop,
  89. crispCol: colProto.crispCol,
  90. /**
  91. * Get connector line path and styles that connects dumbbell point's low and
  92. * high values.
  93. * @private
  94. *
  95. * @param {Highcharts.Series} this The series of points.
  96. * @param {Highcharts.Point} point The point to inspect.
  97. *
  98. * @return {Highcharts.SVGAttributes} attribs The path and styles.
  99. */
  100. getConnectorAttribs: function (point) {
  101. 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 &&
  102. seriesOptions.states.hover &&
  103. 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 ?
  104. yAxis.len - pxThreshold : pxThreshold, pointBottom = pick(point.plotHigh, pointHeight), attribs, origProps;
  105. if (point.state) {
  106. connectorWidth = connectorWidth + connectorWidthPlus;
  107. }
  108. if (pointTop < 0) {
  109. pointTop = 0;
  110. }
  111. else if (pointTop >= yAxis.len) {
  112. pointTop = yAxis.len;
  113. }
  114. if (pointBottom < 0) {
  115. pointBottom = 0;
  116. }
  117. else if (pointBottom >= yAxis.len) {
  118. pointBottom = yAxis.len;
  119. }
  120. if (point.plotX < 0 || point.plotX > xAxis.len) {
  121. connectorWidth = 0;
  122. }
  123. // Connector should reflect upper marker's zone color
  124. if (point.upperGraphic) {
  125. origProps = {
  126. y: point.y,
  127. zone: point.zone
  128. };
  129. point.y = point.high;
  130. point.zone = point.zone ? point.getZone() : void 0;
  131. connectorColor = pick(pointOptions.connectorColor, seriesOptions.connectorColor, pointOptions.color, point.zone ? point.zone.color : void 0, point.color);
  132. extend(point, origProps);
  133. }
  134. attribs = {
  135. d: SVGRenderer.prototype.crispLine([[
  136. 'M',
  137. point.plotX,
  138. pointTop
  139. ], [
  140. 'L',
  141. point.plotX,
  142. pointBottom
  143. ]], connectorWidth, 'ceil')
  144. };
  145. if (!chart.styledMode) {
  146. attribs.stroke = connectorColor;
  147. attribs['stroke-width'] = connectorWidth;
  148. if (dashStyle) {
  149. attribs.dashstyle = dashStyle;
  150. }
  151. }
  152. return attribs;
  153. },
  154. /**
  155. * Draw connector line that connects dumbbell point's low and high values.
  156. * @private
  157. *
  158. * @param {Highcharts.Series} this The series of points.
  159. * @param {Highcharts.Point} point The point to inspect.
  160. *
  161. * @return {void}
  162. */
  163. drawConnector: function (point) {
  164. var series = this, animationLimit = pick(series.options.animationLimit, 250), verb = point.connector && series.chart.pointCount < animationLimit ?
  165. 'animate' : 'attr';
  166. if (!point.connector) {
  167. point.connector = series.chart.renderer.path()
  168. .addClass('highcharts-lollipop-stem')
  169. .attr({
  170. zIndex: -1
  171. })
  172. .add(series.markerGroup);
  173. }
  174. point.connector[verb](this.getConnectorAttribs(point));
  175. },
  176. /**
  177. * Return the width and x offset of the dumbbell adjusted for grouping,
  178. * groupPadding, pointPadding, pointWidth etc.
  179. *
  180. * @private
  181. *
  182. * @function Highcharts.seriesTypes.column#getColumnMetrics
  183. *
  184. * @param {Highcharts.Series} this The series of points.
  185. *
  186. * @return {Highcharts.ColumnMetricsObject} metrics shapeArgs
  187. *
  188. */
  189. getColumnMetrics: function () {
  190. var metrics = colProto.getColumnMetrics.apply(this, arguments);
  191. metrics.offset += metrics.width / 2;
  192. return metrics;
  193. },
  194. translatePoint: areaRangeProto.translate,
  195. setShapeArgs: columnRangeProto.translate,
  196. /**
  197. * Translate each point to the plot area coordinate system and find
  198. * shape positions
  199. *
  200. * @private
  201. *
  202. * @function Highcharts.seriesTypes.dumbbell#translate
  203. *
  204. * @param {Highcharts.Series} this The series of points.
  205. *
  206. * @return {void}
  207. */
  208. translate: function () {
  209. // Calculate shapeargs
  210. this.setShapeArgs.apply(this);
  211. // Calculate point low / high values
  212. this.translatePoint.apply(this, arguments);
  213. // Correct x position
  214. this.points.forEach(function (point) {
  215. var shapeArgs = point.shapeArgs, pointWidth = point.pointWidth;
  216. point.plotX = shapeArgs.x;
  217. shapeArgs.x = point.plotX - pointWidth / 2;
  218. point.tooltipPos = null;
  219. });
  220. this.columnMetrics.offset -= this.columnMetrics.width / 2;
  221. },
  222. seriesDrawPoints: areaRangeProto.drawPoints,
  223. /**
  224. * Extend the arearange series' drawPoints method by applying a connector
  225. * and coloring markers.
  226. * @private
  227. *
  228. * @function Highcharts.Series#drawPoints
  229. *
  230. * @param {Highcharts.Series} this The series of points.
  231. *
  232. * @return {void}
  233. */
  234. drawPoints: function () {
  235. var series = this, chart = series.chart, pointLength = series.points.length, seriesLowColor = series.lowColor = series.options.lowColor, i = 0, lowerGraphicColor, point, zoneColor;
  236. this.seriesDrawPoints.apply(series, arguments);
  237. // Draw connectors and color upper markers
  238. while (i < pointLength) {
  239. point = series.points[i];
  240. series.drawConnector(point);
  241. if (point.upperGraphic) {
  242. point.upperGraphic.element.point = point;
  243. point.upperGraphic.addClass('highcharts-lollipop-high');
  244. }
  245. point.connector.element.point = point;
  246. if (point.lowerGraphic) {
  247. zoneColor = point.zone && point.zone.color;
  248. lowerGraphicColor = pick(point.options.lowColor, seriesLowColor, point.options.color, zoneColor, point.color, series.color);
  249. if (!chart.styledMode) {
  250. point.lowerGraphic.attr({
  251. fill: lowerGraphicColor
  252. });
  253. }
  254. point.lowerGraphic.addClass('highcharts-lollipop-low');
  255. }
  256. i++;
  257. }
  258. },
  259. /**
  260. * Get non-presentational attributes for a point. Used internally for
  261. * both styled mode and classic. Set correct position in link with connector
  262. * line.
  263. *
  264. * @see Series#pointAttribs
  265. *
  266. * @function Highcharts.Series#markerAttribs
  267. *
  268. * @param {Highcharts.Series} this The series of points.
  269. *
  270. * @return {Highcharts.SVGAttributes}
  271. * A hash containing those attributes that are not settable from
  272. * CSS.
  273. */
  274. markerAttribs: function () {
  275. var ret = areaRangeProto.markerAttribs.apply(this, arguments);
  276. ret.x = Math.floor(ret.x);
  277. ret.y = Math.floor(ret.y);
  278. return ret;
  279. },
  280. /**
  281. * Get presentational attributes
  282. *
  283. * @private
  284. * @function Highcharts.seriesTypes.column#pointAttribs
  285. *
  286. * @param {Highcharts.Series} this The series of points.
  287. * @param {Highcharts.Point} point The point to inspect.
  288. * @param {string} state current state of point (normal, hover, select)
  289. *
  290. * @return {Highcharts.SVGAttributes} pointAttribs SVGAttributes
  291. */
  292. pointAttribs: function (point, state) {
  293. var pointAttribs;
  294. pointAttribs = seriesProto.pointAttribs.apply(this, arguments);
  295. if (state === 'hover') {
  296. delete pointAttribs.fill;
  297. }
  298. return pointAttribs;
  299. }
  300. }, {
  301. // seriesTypes doesn't inherit from arearange point proto so put below
  302. // methods rigidly.
  303. destroyElements: areaRangePointProto.destroyElements,
  304. isValid: areaRangePointProto.isValid,
  305. pointSetState: areaRangePointProto.setState,
  306. /**
  307. * Set the point's state extended by have influence on the connector
  308. * (between low and high value).
  309. *
  310. * @private
  311. * @param {Highcharts.Point} this The point to inspect.
  312. *
  313. * @return {void}
  314. */
  315. setState: function () {
  316. var point = this, series = point.series, chart = series.chart, seriesLowColor = series.options.lowColor, seriesMarker = series.options.marker, 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;
  317. this.pointSetState.apply(this, arguments);
  318. if (!point.state) {
  319. verb = 'animate';
  320. if (point.lowerGraphic && !chart.styledMode) {
  321. point.lowerGraphic.attr({
  322. fill: lowerGraphicColor
  323. });
  324. if (point.upperGraphic) {
  325. origProps = {
  326. y: point.y,
  327. zone: point.zone
  328. };
  329. point.y = point.high;
  330. point.zone = point.zone ? point.getZone() : void 0;
  331. upperGraphicColor = pick(point.marker ? point.marker.fillColor : void 0, seriesMarker ? seriesMarker.fillColor : void 0, pointOptions.color, point.zone ? point.zone.color : void 0, point.color);
  332. point.upperGraphic.attr({
  333. fill: upperGraphicColor
  334. });
  335. extend(point, origProps);
  336. }
  337. }
  338. }
  339. point.connector[verb](series.getConnectorAttribs(point));
  340. }
  341. });
  342. /**
  343. * The `dumbbell` series. If the [type](#series.dumbbell.type) option is
  344. * not specified, it is inherited from [chart.type](#chart.type).
  345. *
  346. * @extends series,plotOptions.dumbbell
  347. * @product highcharts highstock
  348. * @requires highcharts-more
  349. * @requires modules/dumbbell
  350. * @apioption series.dumbbell
  351. */
  352. /**
  353. * An array of data points for the series. For the `dumbbell` series
  354. * type, points can be given in the following ways:
  355. *
  356. * 1. An array of arrays with 3 or 2 values. In this case, the values correspond
  357. * to `x,low,high`. If the first value is a string, it is applied as the name
  358. * of the point, and the `x` value is inferred. The `x` value can also be
  359. * omitted, in which case the inner arrays should be of length 2\. Then the
  360. * `x` value is automatically calculated, either starting at 0 and
  361. * incremented by 1, or from `pointStart` and `pointInterval` given in the
  362. * series options.
  363. * ```js
  364. * data: [
  365. * [0, 4, 2],
  366. * [1, 2, 1],
  367. * [2, 9, 10]
  368. * ]
  369. * ```
  370. *
  371. * 2. An array of objects with named values. The following snippet shows only a
  372. * few settings, see the complete options set below. If the total number of
  373. * data points exceeds the series'
  374. * [turboThreshold](#series.dumbbell.turboThreshold), this option is not
  375. * available.
  376. * ```js
  377. * data: [{
  378. * x: 1,
  379. * low: 0,
  380. * high: 4,
  381. * name: "Point2",
  382. * color: "#00FF00",
  383. * lowColor: "#00FFFF",
  384. * connectorWidth: 3,
  385. * connectorColor: "#FF00FF"
  386. * }, {
  387. * x: 1,
  388. * low: 5,
  389. * high: 3,
  390. * name: "Point1",
  391. * color: "#FF00FF"
  392. * }]
  393. * ```
  394. *
  395. * @sample {highcharts} highcharts/series/data-array-of-arrays/
  396. * Arrays of numeric x and y
  397. * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
  398. * Arrays of datetime x and y
  399. * @sample {highcharts} highcharts/series/data-array-of-name-value/
  400. * Arrays of point.name and y
  401. * @sample {highcharts} highcharts/series/data-array-of-objects/
  402. * Config objects
  403. *
  404. * @type {Array<Array<(number|string),number>|Array<(number|string),number,number>|*>}
  405. * @extends series.arearange.data
  406. * @product highcharts highstock
  407. * @apioption series.dumbbell.data
  408. */
  409. /**
  410. * Color of the line that connects the dumbbell point's values.
  411. * By default it is the series' color.
  412. *
  413. * @type {string}
  414. * @since 8.0.0
  415. * @product highcharts highstock
  416. * @apioption series.dumbbell.data.connectorColor
  417. */
  418. /**
  419. * Pixel width of the line that connects the dumbbell point's values.
  420. *
  421. * @type {number}
  422. * @since 8.0.0
  423. * @default 1
  424. * @product highcharts highstock
  425. * @apioption series.dumbbell.data.connectorWidth
  426. */
  427. /**
  428. * Color of the start markers in a dumbbell graph.
  429. *
  430. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  431. * @since 8.0.0
  432. * @default #333333
  433. * @product highcharts highstock
  434. * @apioption series.dumbbell.data.lowColor
  435. */
  436. ''; // adds doclets above to transpiled file