xrange.src.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761
  1. /* *
  2. * X-range series module
  3. *
  4. * (c) 2010-2019 Torstein Honsi, Lars A. V. Cabrera
  5. *
  6. * License: www.highcharts.com/license
  7. */
  8. 'use strict';
  9. import H from '../parts/Globals.js';
  10. var addEvent = H.addEvent,
  11. defined = H.defined,
  12. color = H.Color,
  13. columnType = H.seriesTypes.column,
  14. correctFloat = H.correctFloat,
  15. isNumber = H.isNumber,
  16. isObject = H.isObject,
  17. merge = H.merge,
  18. pick = H.pick,
  19. seriesType = H.seriesType,
  20. seriesTypes = H.seriesTypes,
  21. Axis = H.Axis,
  22. Point = H.Point,
  23. Series = H.Series;
  24. /**
  25. * Return color of a point based on its category.
  26. *
  27. * @private
  28. * @function getColorByCategory
  29. *
  30. * @param {object} series
  31. * The series which the point belongs to.
  32. *
  33. * @param {object} point
  34. * The point to calculate its color for.
  35. *
  36. * @return {object}
  37. * Returns an object containing the properties color and colorIndex.
  38. */
  39. function getColorByCategory(series, point) {
  40. var colors = series.options.colors || series.chart.options.colors,
  41. colorCount = colors ?
  42. colors.length :
  43. series.chart.options.chart.colorCount,
  44. colorIndex = point.y % colorCount,
  45. color = colors && colors[colorIndex];
  46. return {
  47. colorIndex: colorIndex,
  48. color: color
  49. };
  50. }
  51. /**
  52. * @private
  53. * @class
  54. * @name Highcharts.seriesTypes.xrange
  55. *
  56. * @augments Highcharts.Series
  57. */
  58. seriesType('xrange', 'column'
  59. /**
  60. * The X-range series displays ranges on the X axis, typically time intervals
  61. * with a start and end date.
  62. *
  63. * @sample {highcharts} highcharts/demo/x-range/
  64. * X-range
  65. * @sample {highcharts} highcharts/css/x-range/
  66. * Styled mode X-range
  67. * @sample {highcharts} highcharts/chart/inverted-xrange/
  68. * Inverted X-range
  69. *
  70. * @extends plotOptions.column
  71. * @since 6.0.0
  72. * @product highcharts highstock gantt
  73. * @excluding boostThreshold, crisp, cropThreshold, depth, edgeColor,
  74. * edgeWidth, findNearestPointBy, getExtremesFromAll,
  75. * negativeColor, pointInterval, pointIntervalUnit,
  76. * pointPlacement, pointRange, pointStart, softThreshold,
  77. * stacking, threshold, data
  78. * @optionparent plotOptions.xrange
  79. */
  80. , {
  81. /**
  82. * A partial fill for each point, typically used to visualize how much of
  83. * a task is performed. The partial fill object can be set either on series
  84. * or point level.
  85. *
  86. * @sample {highcharts} highcharts/demo/x-range
  87. * X-range with partial fill
  88. *
  89. * @product highcharts highstock gantt
  90. * @apioption plotOptions.xrange.partialFill
  91. */
  92. /**
  93. * The fill color to be used for partial fills. Defaults to a darker shade
  94. * of the point color.
  95. *
  96. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  97. * @product highcharts highstock gantt
  98. * @apioption plotOptions.xrange.partialFill.fill
  99. */
  100. /**
  101. * A partial fill for each point, typically used to visualize how much of
  102. * a task is performed. See [completed](series.gantt.data.completed).
  103. *
  104. * @sample gantt/demo/progress-indicator
  105. * Gantt with progress indicator
  106. *
  107. * @product gantt
  108. * @apioption plotOptions.gantt.partialFill
  109. */
  110. /**
  111. * In an X-range series, this option makes all points of the same Y-axis
  112. * category the same color.
  113. */
  114. colorByPoint: true,
  115. dataLabels: {
  116. verticalAlign: 'middle',
  117. inside: true,
  118. /**
  119. * The default formatter for X-range data labels displays the percentage
  120. * of the partial fill amount.
  121. *
  122. * @type {Highcharts.FormatterCallbackFunction<Highcharts.SeriesDataLabelsFormatterContextObject>}
  123. * @default function () { return (amount * 100) + '%'; }
  124. */
  125. formatter: function () {
  126. var point = this.point,
  127. amount = point.partialFill;
  128. if (isObject(amount)) {
  129. amount = amount.amount;
  130. }
  131. if (!defined(amount)) {
  132. amount = 0;
  133. }
  134. return correctFloat(amount * 100) + '%';
  135. }
  136. },
  137. tooltip: {
  138. headerFormat: '<span style="font-size: 10px">{point.x} - {point.x2}</span><br/>',
  139. pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.yCategory}</b><br/>'
  140. },
  141. borderRadius: 3,
  142. pointRange: 0
  143. }, {
  144. type: 'xrange',
  145. parallelArrays: ['x', 'x2', 'y'],
  146. requireSorting: false,
  147. animate: seriesTypes.line.prototype.animate,
  148. cropShoulder: 1,
  149. getExtremesFromAll: true,
  150. autoIncrement: H.noop,
  151. /**
  152. * Borrow the column series metrics, but with swapped axes. This gives free
  153. * access to features like groupPadding, grouping, pointWidth etc.
  154. *
  155. * @private
  156. * @function Higcharts.Series#getColumnMetrics
  157. *
  158. * @return {Highcharts.ColumnMetricsObject}
  159. */
  160. getColumnMetrics: function () {
  161. var metrics,
  162. chart = this.chart;
  163. function swapAxes() {
  164. chart.series.forEach(function (s) {
  165. var xAxis = s.xAxis;
  166. s.xAxis = s.yAxis;
  167. s.yAxis = xAxis;
  168. });
  169. }
  170. swapAxes();
  171. metrics = columnType.prototype.getColumnMetrics.call(this);
  172. swapAxes();
  173. return metrics;
  174. },
  175. /**
  176. * Override cropData to show a point where x or x2 is outside visible range,
  177. * but one of them is inside.
  178. *
  179. * @private
  180. * @function Highcharts.Series#cropData
  181. *
  182. * @param {Array<number>} xData
  183. *
  184. * @param {Array<number>} yData
  185. *
  186. * @param {number} min
  187. *
  188. * @param {number} max
  189. *
  190. * @param {number} [cropShoulder]
  191. *
  192. * @return {*}
  193. */
  194. cropData: function (xData, yData, min, max) {
  195. // Replace xData with x2Data to find the appropriate cropStart
  196. var cropData = Series.prototype.cropData,
  197. crop = cropData.call(this, this.x2Data, yData, min, max);
  198. // Re-insert the cropped xData
  199. crop.xData = xData.slice(crop.start, crop.end);
  200. return crop;
  201. },
  202. /**
  203. * @private
  204. * @function Highcharts.Series#translatePoint
  205. *
  206. * @param {Highcharts.Point} point
  207. */
  208. translatePoint: function (point) {
  209. var series = this,
  210. xAxis = series.xAxis,
  211. yAxis = series.yAxis,
  212. metrics = series.columnMetrics,
  213. options = series.options,
  214. minPointLength = options.minPointLength || 0,
  215. plotX = point.plotX,
  216. posX = pick(point.x2, point.x + (point.len || 0)),
  217. plotX2 = xAxis.translate(posX, 0, 0, 0, 1),
  218. length = Math.abs(plotX2 - plotX),
  219. widthDifference,
  220. shapeArgs,
  221. partialFill,
  222. inverted = this.chart.inverted,
  223. borderWidth = pick(options.borderWidth, 1),
  224. crisper = borderWidth % 2 / 2,
  225. yOffset = metrics.offset,
  226. pointHeight = Math.round(metrics.width),
  227. dlLeft,
  228. dlRight,
  229. dlWidth;
  230. if (minPointLength) {
  231. widthDifference = minPointLength - length;
  232. if (widthDifference < 0) {
  233. widthDifference = 0;
  234. }
  235. plotX -= widthDifference / 2;
  236. plotX2 += widthDifference / 2;
  237. }
  238. plotX = Math.max(plotX, -10);
  239. plotX2 = Math.min(Math.max(plotX2, -10), xAxis.len + 10);
  240. // Handle individual pointWidth
  241. if (defined(point.options.pointWidth)) {
  242. yOffset -= (
  243. (Math.ceil(point.options.pointWidth) - pointHeight) / 2
  244. );
  245. pointHeight = Math.ceil(point.options.pointWidth);
  246. }
  247. // Apply pointPlacement to the Y axis
  248. if (
  249. options.pointPlacement &&
  250. isNumber(point.plotY) &&
  251. yAxis.categories
  252. ) {
  253. point.plotY = yAxis
  254. .translate(point.y, 0, 1, 0, 1, options.pointPlacement);
  255. }
  256. point.shapeArgs = {
  257. x: Math.floor(Math.min(plotX, plotX2)) + crisper,
  258. y: Math.floor(point.plotY + yOffset) + crisper,
  259. width: Math.round(Math.abs(plotX2 - plotX)),
  260. height: pointHeight,
  261. r: series.options.borderRadius
  262. };
  263. // Align data labels inside the shape and inside the plot area
  264. dlLeft = point.shapeArgs.x;
  265. dlRight = dlLeft + point.shapeArgs.width;
  266. if (dlLeft < 0 || dlRight > xAxis.len) {
  267. dlLeft = Math.min(xAxis.len, Math.max(0, dlLeft));
  268. dlRight = Math.max(0, Math.min(dlRight, xAxis.len));
  269. dlWidth = dlRight - dlLeft;
  270. point.dlBox = merge(point.shapeArgs, {
  271. x: dlLeft,
  272. width: dlRight - dlLeft,
  273. centerX: dlWidth ? dlWidth / 2 : null
  274. });
  275. } else {
  276. point.dlBox = null;
  277. }
  278. // Tooltip position
  279. if (!inverted) {
  280. point.tooltipPos[0] += length / 2 * (xAxis.reversed ? -1 : 1);
  281. point.tooltipPos[1] -= metrics.width / 2;
  282. // Limit position by the correct axis size (#9727)
  283. point.tooltipPos[0] = Math.max(
  284. Math.min(point.tooltipPos[0], xAxis.len - 1), 0
  285. );
  286. point.tooltipPos[1] = Math.max(
  287. Math.min(point.tooltipPos[1], yAxis.len - 1), 0
  288. );
  289. } else {
  290. point.tooltipPos[1] += length / 2 * (xAxis.reversed ? 1 : -1);
  291. point.tooltipPos[0] += metrics.width / 2;
  292. // Limit position by the correct axis size (#9727)
  293. point.tooltipPos[1] = Math.max(
  294. Math.min(point.tooltipPos[1], xAxis.len - 1), 0
  295. );
  296. point.tooltipPos[0] = Math.max(
  297. Math.min(point.tooltipPos[0], yAxis.len - 1), 0
  298. );
  299. }
  300. // Add a partShapeArgs to the point, based on the shapeArgs property
  301. partialFill = point.partialFill;
  302. if (partialFill) {
  303. // Get the partial fill amount
  304. if (isObject(partialFill)) {
  305. partialFill = partialFill.amount;
  306. }
  307. // If it was not a number, assume 0
  308. if (!isNumber(partialFill)) {
  309. partialFill = 0;
  310. }
  311. shapeArgs = point.shapeArgs;
  312. point.partShapeArgs = {
  313. x: shapeArgs.x,
  314. y: shapeArgs.y,
  315. width: shapeArgs.width,
  316. height: shapeArgs.height,
  317. r: series.options.borderRadius
  318. };
  319. point.clipRectArgs = {
  320. x: shapeArgs.x,
  321. y: shapeArgs.y,
  322. width: Math.max(
  323. Math.round(
  324. length * partialFill +
  325. (point.plotX - plotX)
  326. ),
  327. 0
  328. ),
  329. height: shapeArgs.height
  330. };
  331. }
  332. },
  333. /**
  334. * @private
  335. * @function Highcharts.Series#translate
  336. */
  337. translate: function () {
  338. columnType.prototype.translate.apply(this, arguments);
  339. this.points.forEach(function (point) {
  340. this.translatePoint(point);
  341. }, this);
  342. },
  343. /**
  344. * Draws a single point in the series. Needed for partial fill.
  345. *
  346. * This override turns point.graphic into a group containing the original
  347. * graphic and an overlay displaying the partial fill.
  348. *
  349. * @private
  350. * @function Highcharts.Series#drawPoint
  351. *
  352. * @param {Highcharts.Point} point
  353. * An instance of Point in the series.
  354. *
  355. * @param {"animate"|"attr"} verb
  356. * 'animate' (animates changes) or 'attr' (sets options)
  357. */
  358. drawPoint: function (point, verb) {
  359. var series = this,
  360. seriesOpts = series.options,
  361. renderer = series.chart.renderer,
  362. graphic = point.graphic,
  363. type = point.shapeType,
  364. shapeArgs = point.shapeArgs,
  365. partShapeArgs = point.partShapeArgs,
  366. clipRectArgs = point.clipRectArgs,
  367. pfOptions = point.partialFill,
  368. fill,
  369. state = point.selected && 'select',
  370. cutOff = seriesOpts.stacking && !seriesOpts.borderRadius;
  371. if (!point.isNull) {
  372. // Original graphic
  373. if (graphic) { // update
  374. point.graphicOriginal[verb](
  375. merge(shapeArgs)
  376. );
  377. } else {
  378. point.graphic = graphic = renderer.g('point')
  379. .addClass(point.getClassName())
  380. .add(point.group || series.group);
  381. point.graphicOriginal = renderer[type](shapeArgs)
  382. .addClass(point.getClassName())
  383. .addClass('highcharts-partfill-original')
  384. .add(graphic);
  385. }
  386. // Partial fill graphic
  387. if (partShapeArgs) {
  388. if (point.graphicOverlay) {
  389. point.graphicOverlay[verb](
  390. merge(partShapeArgs)
  391. );
  392. point.clipRect.animate(
  393. merge(clipRectArgs)
  394. );
  395. } else {
  396. point.clipRect = renderer.clipRect(
  397. clipRectArgs.x,
  398. clipRectArgs.y,
  399. clipRectArgs.width,
  400. clipRectArgs.height
  401. );
  402. point.graphicOverlay = renderer[type](partShapeArgs)
  403. .addClass('highcharts-partfill-overlay')
  404. .add(graphic)
  405. .clip(point.clipRect);
  406. }
  407. }
  408. // Presentational
  409. if (!series.chart.styledMode) {
  410. point.graphicOriginal
  411. .attr(series.pointAttribs(point, state))
  412. .shadow(seriesOpts.shadow, null, cutOff);
  413. if (partShapeArgs) {
  414. // Ensure pfOptions is an object
  415. if (!isObject(pfOptions)) {
  416. pfOptions = {};
  417. }
  418. if (isObject(seriesOpts.partialFill)) {
  419. pfOptions = merge(
  420. pfOptions, seriesOpts.partialFill
  421. );
  422. }
  423. fill = (
  424. pfOptions.fill ||
  425. color(point.color || series.color).brighten(-0.3).get()
  426. );
  427. point.graphicOverlay
  428. .attr(series.pointAttribs(point, state))
  429. .attr({
  430. 'fill': fill
  431. })
  432. .shadow(seriesOpts.shadow, null, cutOff);
  433. }
  434. }
  435. } else if (graphic) {
  436. point.graphic = graphic.destroy(); // #1269
  437. }
  438. },
  439. /**
  440. * @private
  441. * @function Highcharts.Series#drawPoints
  442. */
  443. drawPoints: function () {
  444. var series = this,
  445. verb = series.getAnimationVerb();
  446. // Draw the columns
  447. series.points.forEach(function (point) {
  448. series.drawPoint(point, verb);
  449. });
  450. },
  451. /**
  452. * Returns "animate", or "attr" if the number of points is above the
  453. * animation limit.
  454. *
  455. * @private
  456. * @function Highcharts.Series#getAnimationVerb
  457. *
  458. * @return {string}
  459. */
  460. getAnimationVerb: function () {
  461. return (
  462. this.chart.pointCount < (this.options.animationLimit || 250) ?
  463. 'animate' :
  464. 'attr'
  465. );
  466. }
  467. /*
  468. // Override to remove stroke from points. For partial fill.
  469. pointAttribs: function () {
  470. var series = this,
  471. retVal = columnType.prototype.pointAttribs.apply(series, arguments);
  472. //retVal['stroke-width'] = 0;
  473. return retVal;
  474. }
  475. //*/
  476. }, { // Point class properties
  477. /**
  478. * Extend applyOptions so that `colorByPoint` for x-range means that one
  479. * color is applied per Y axis category.
  480. *
  481. * @private
  482. * @function Highcharts.Point#applyOptions
  483. *
  484. * @return {Highcharts.Series}
  485. */
  486. applyOptions: function () {
  487. var point = Point.prototype.applyOptions.apply(this, arguments),
  488. series = point.series,
  489. colorByPoint;
  490. if (series.options.colorByPoint && !point.options.color) {
  491. colorByPoint = getColorByCategory(series, point);
  492. if (!series.chart.styledMode) {
  493. point.color = colorByPoint.color;
  494. }
  495. if (!point.options.colorIndex) {
  496. point.colorIndex = colorByPoint.colorIndex;
  497. }
  498. }
  499. return point;
  500. },
  501. /**
  502. * Extend init to have y default to 0.
  503. *
  504. * @private
  505. * @function Highcharts.Point#init
  506. *
  507. * @return {Highcharts.Series}
  508. */
  509. init: function () {
  510. Point.prototype.init.apply(this, arguments);
  511. if (!this.y) {
  512. this.y = 0;
  513. }
  514. return this;
  515. },
  516. /**
  517. * @private
  518. * @function Highcharts.Point#setState
  519. */
  520. setState: function () {
  521. Point.prototype.setState.apply(this, arguments);
  522. this.series.drawPoint(this, this.series.getAnimationVerb());
  523. },
  524. /**
  525. * @private
  526. * @function Highcharts.Point#getLabelConfig
  527. *
  528. * @return {Highcharts.PointLabelObject}
  529. */
  530. // Add x2 and yCategory to the available properties for tooltip formats
  531. getLabelConfig: function () {
  532. var point = this,
  533. cfg = Point.prototype.getLabelConfig.call(point),
  534. yCats = point.series.yAxis.categories;
  535. cfg.x2 = point.x2;
  536. cfg.yCategory = point.yCategory = yCats && yCats[point.y];
  537. return cfg;
  538. },
  539. tooltipDateKeys: ['x', 'x2'],
  540. /**
  541. * @private
  542. * @function Highcharts.Point#isValid
  543. *
  544. * @return {boolean}
  545. */
  546. isValid: function () {
  547. return typeof this.x === 'number' &&
  548. typeof this.x2 === 'number';
  549. }
  550. });
  551. // Max x2 should be considered in xAxis extremes
  552. addEvent(Axis, 'afterGetSeriesExtremes', function () {
  553. var axis = this,
  554. axisSeries = axis.series,
  555. dataMax,
  556. modMax;
  557. if (axis.isXAxis) {
  558. dataMax = pick(axis.dataMax, -Number.MAX_VALUE);
  559. axisSeries.forEach(function (series) {
  560. if (series.x2Data) {
  561. series.x2Data.forEach(function (val) {
  562. if (val > dataMax) {
  563. dataMax = val;
  564. modMax = true;
  565. }
  566. });
  567. }
  568. });
  569. if (modMax) {
  570. axis.dataMax = dataMax;
  571. }
  572. }
  573. });
  574. /**
  575. * An `xrange` series. If the [type](#series.xrange.type) option is not
  576. * specified, it is inherited from [chart.type](#chart.type).
  577. *
  578. * @extends series,plotOptions.xrange
  579. * @excluding boostThreshold, crisp, cropThreshold, depth, edgeColor, edgeWidth,
  580. * findNearestPointBy, getExtremesFromAll, negativeColor,
  581. * pointInterval, pointIntervalUnit, pointPlacement, pointRange,
  582. * pointStart, softThreshold, stacking, threshold
  583. * @product highcharts highstock gantt
  584. * @apioption series.xrange
  585. */
  586. /**
  587. * An array of data points for the series. For the `xrange` series type,
  588. * points can be given in the following ways:
  589. *
  590. * 1. An array of objects with named values. The objects are point configuration
  591. * objects as seen below.
  592. * ```js
  593. * data: [{
  594. * x: Date.UTC(2017, 0, 1),
  595. * x2: Date.UTC(2017, 0, 3),
  596. * name: "Test",
  597. * y: 0,
  598. * color: "#00FF00"
  599. * }, {
  600. * x: Date.UTC(2017, 0, 4),
  601. * x2: Date.UTC(2017, 0, 5),
  602. * name: "Deploy",
  603. * y: 1,
  604. * color: "#FF0000"
  605. * }]
  606. * ```
  607. *
  608. * @sample {highcharts} highcharts/series/data-array-of-objects/
  609. * Config objects
  610. *
  611. * @type {Array<*>}
  612. * @extends series.line.data
  613. * @product highcharts highstock gantt
  614. * @apioption series.xrange.data
  615. */
  616. /**
  617. * The starting X value of the range point.
  618. *
  619. * @sample {highcharts} highcharts/demo/x-range
  620. * X-range
  621. *
  622. * @type {number}
  623. * @product highcharts highstock gantt
  624. * @apioption series.xrange.data.x
  625. */
  626. /**
  627. * The ending X value of the range point.
  628. *
  629. * @sample {highcharts} highcharts/demo/x-range
  630. * X-range
  631. *
  632. * @type {number}
  633. * @product highcharts highstock gantt
  634. * @apioption series.xrange.data.x2
  635. */
  636. /**
  637. * The Y value of the range point.
  638. *
  639. * @sample {highcharts} highcharts/demo/x-range
  640. * X-range
  641. *
  642. * @type {number}
  643. * @product highcharts highstock gantt
  644. * @apioption series.xrange.data.y
  645. */
  646. /**
  647. * A partial fill for each point, typically used to visualize how much of
  648. * a task is performed. The partial fill object can be set either on series
  649. * or point level.
  650. *
  651. * @sample {highcharts} highcharts/demo/x-range
  652. * X-range with partial fill
  653. *
  654. * @product highcharts highstock gantt
  655. * @apioption series.xrange.data.partialFill
  656. */
  657. /**
  658. * The amount of the X-range point to be filled. Values can be 0-1 and are
  659. * converted to percentages in the default data label formatter.
  660. *
  661. * @type {number}
  662. * @product highcharts highstock gantt
  663. * @apioption series.xrange.data.partialFill.amount
  664. */
  665. /**
  666. * The fill color to be used for partial fills. Defaults to a darker shade
  667. * of the point color.
  668. *
  669. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  670. * @product highcharts highstock gantt
  671. * @apioption series.xrange.data.partialFill.fill
  672. */