DumbbellSeries.js 16 KB

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