broken-axis.src.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516
  1. /**
  2. * (c) 2009-2019 Torstein Honsi
  3. *
  4. * License: www.highcharts.com/license
  5. */
  6. 'use strict';
  7. import H from '../parts/Globals.js';
  8. import '../parts/Utilities.js';
  9. import '../parts/Axis.js';
  10. import '../parts/Series.js';
  11. var addEvent = H.addEvent,
  12. pick = H.pick,
  13. extend = H.extend,
  14. isArray = H.isArray,
  15. fireEvent = H.fireEvent,
  16. Axis = H.Axis,
  17. Series = H.Series;
  18. extend(Axis.prototype, {
  19. isInBreak: function (brk, val) {
  20. var ret,
  21. repeat = brk.repeat || Infinity,
  22. from = brk.from,
  23. length = brk.to - brk.from,
  24. test = (
  25. val >= from ?
  26. (val - from) % repeat :
  27. repeat - ((from - val) % repeat)
  28. );
  29. if (!brk.inclusive) {
  30. ret = test < length && test !== 0;
  31. } else {
  32. ret = test <= length;
  33. }
  34. return ret;
  35. },
  36. isInAnyBreak: function (val, testKeep) {
  37. var breaks = this.options.breaks,
  38. i = breaks && breaks.length,
  39. inbrk,
  40. keep,
  41. ret;
  42. if (i) {
  43. while (i--) {
  44. if (this.isInBreak(breaks[i], val)) {
  45. inbrk = true;
  46. if (!keep) {
  47. keep = pick(
  48. breaks[i].showPoints,
  49. !this.isXAxis
  50. );
  51. }
  52. }
  53. }
  54. if (inbrk && testKeep) {
  55. ret = inbrk && !keep;
  56. } else {
  57. ret = inbrk;
  58. }
  59. }
  60. return ret;
  61. }
  62. });
  63. addEvent(Axis, 'afterInit', function () {
  64. if (typeof this.setBreaks === 'function') {
  65. this.setBreaks(this.options.breaks, false);
  66. }
  67. });
  68. addEvent(Axis, 'afterSetTickPositions', function () {
  69. if (this.isBroken) {
  70. var axis = this,
  71. tickPositions = this.tickPositions,
  72. info = this.tickPositions.info,
  73. newPositions = [],
  74. i;
  75. for (i = 0; i < tickPositions.length; i++) {
  76. if (!axis.isInAnyBreak(tickPositions[i])) {
  77. newPositions.push(tickPositions[i]);
  78. }
  79. }
  80. this.tickPositions = newPositions;
  81. this.tickPositions.info = info;
  82. }
  83. });
  84. // Force Axis to be not-ordinal when breaks are defined
  85. addEvent(Axis, 'afterSetOptions', function () {
  86. if (this.isBroken) {
  87. this.options.ordinal = false;
  88. }
  89. });
  90. /**
  91. * Dynamically set or unset breaks in an axis. This function in lighter than
  92. * usin Axis.update, and it also preserves animation.
  93. *
  94. * @private
  95. * @function Highcharts.Axis#setBreaks
  96. *
  97. * @param {Array<*>} [breaks]
  98. * The breaks to add. When `undefined` it removes existing breaks.
  99. *
  100. * @param {boolean} [redraw=true]
  101. * Whether to redraw the chart immediately.
  102. */
  103. Axis.prototype.setBreaks = function (breaks, redraw) {
  104. var axis = this,
  105. isBroken = (isArray(breaks) && !!breaks.length);
  106. function breakVal2Lin(val) {
  107. var nval = val,
  108. brk,
  109. i;
  110. for (i = 0; i < axis.breakArray.length; i++) {
  111. brk = axis.breakArray[i];
  112. if (brk.to <= val) {
  113. nval -= brk.len;
  114. } else if (brk.from >= val) {
  115. break;
  116. } else if (axis.isInBreak(brk, val)) {
  117. nval -= (val - brk.from);
  118. break;
  119. }
  120. }
  121. return nval;
  122. }
  123. function breakLin2Val(val) {
  124. var nval = val,
  125. brk,
  126. i;
  127. for (i = 0; i < axis.breakArray.length; i++) {
  128. brk = axis.breakArray[i];
  129. if (brk.from >= nval) {
  130. break;
  131. } else if (brk.to < nval) {
  132. nval += brk.len;
  133. } else if (axis.isInBreak(brk, nval)) {
  134. nval += brk.len;
  135. }
  136. }
  137. return nval;
  138. }
  139. axis.isDirty = axis.isBroken !== isBroken;
  140. axis.isBroken = isBroken;
  141. axis.options.breaks = axis.userOptions.breaks = breaks;
  142. axis.forceRedraw = true; // Force recalculation in setScale
  143. if (!isBroken && axis.val2lin === breakVal2Lin) {
  144. // Revert to prototype functions
  145. delete axis.val2lin;
  146. delete axis.lin2val;
  147. }
  148. if (isBroken) {
  149. axis.userOptions.ordinal = false;
  150. axis.val2lin = breakVal2Lin;
  151. axis.lin2val = breakLin2Val;
  152. axis.setExtremes = function (
  153. newMin,
  154. newMax,
  155. redraw,
  156. animation,
  157. eventArguments
  158. ) {
  159. // If trying to set extremes inside a break, extend it to before and
  160. // after the break ( #3857 )
  161. if (this.isBroken) {
  162. while (this.isInAnyBreak(newMin)) {
  163. newMin -= this.closestPointRange;
  164. }
  165. while (this.isInAnyBreak(newMax)) {
  166. newMax -= this.closestPointRange;
  167. }
  168. }
  169. Axis.prototype.setExtremes.call(
  170. this,
  171. newMin,
  172. newMax,
  173. redraw,
  174. animation,
  175. eventArguments
  176. );
  177. };
  178. axis.setAxisTranslation = function (saveOld) {
  179. Axis.prototype.setAxisTranslation.call(this, saveOld);
  180. this.unitLength = null;
  181. if (this.isBroken) {
  182. var breaks = axis.options.breaks,
  183. breakArrayT = [], // Temporary one
  184. breakArray = [],
  185. length = 0,
  186. inBrk,
  187. repeat,
  188. min = axis.userMin || axis.min,
  189. max = axis.userMax || axis.max,
  190. pointRangePadding = pick(axis.pointRangePadding, 0),
  191. start,
  192. i;
  193. // Min & max check (#4247)
  194. breaks.forEach(function (brk) {
  195. repeat = brk.repeat || Infinity;
  196. if (axis.isInBreak(brk, min)) {
  197. min += (brk.to % repeat) - (min % repeat);
  198. }
  199. if (axis.isInBreak(brk, max)) {
  200. max -= (max % repeat) - (brk.from % repeat);
  201. }
  202. });
  203. // Construct an array holding all breaks in the axis
  204. breaks.forEach(function (brk) {
  205. start = brk.from;
  206. repeat = brk.repeat || Infinity;
  207. while (start - repeat > min) {
  208. start -= repeat;
  209. }
  210. while (start < min) {
  211. start += repeat;
  212. }
  213. for (i = start; i < max; i += repeat) {
  214. breakArrayT.push({
  215. value: i,
  216. move: 'in'
  217. });
  218. breakArrayT.push({
  219. value: i + (brk.to - brk.from),
  220. move: 'out',
  221. size: brk.breakSize
  222. });
  223. }
  224. });
  225. breakArrayT.sort(function (a, b) {
  226. return (
  227. (a.value === b.value) ?
  228. (
  229. (a.move === 'in' ? 0 : 1) -
  230. (b.move === 'in' ? 0 : 1)
  231. ) :
  232. a.value - b.value
  233. );
  234. });
  235. // Simplify the breaks
  236. inBrk = 0;
  237. start = min;
  238. breakArrayT.forEach(function (brk) {
  239. inBrk += (brk.move === 'in' ? 1 : -1);
  240. if (inBrk === 1 && brk.move === 'in') {
  241. start = brk.value;
  242. }
  243. if (inBrk === 0) {
  244. breakArray.push({
  245. from: start,
  246. to: brk.value,
  247. len: brk.value - start - (brk.size || 0)
  248. });
  249. length += brk.value - start - (brk.size || 0);
  250. }
  251. });
  252. axis.breakArray = breakArray;
  253. // Used with staticScale, and below, the actual axis length when
  254. // breaks are substracted.
  255. axis.unitLength = max - min - length + pointRangePadding;
  256. fireEvent(axis, 'afterBreaks');
  257. if (axis.staticScale) {
  258. axis.transA = axis.staticScale;
  259. } else if (axis.unitLength) {
  260. axis.transA *= (max - axis.min + pointRangePadding) /
  261. axis.unitLength;
  262. }
  263. if (pointRangePadding) {
  264. axis.minPixelPadding = axis.transA * axis.minPointOffset;
  265. }
  266. axis.min = min;
  267. axis.max = max;
  268. }
  269. };
  270. }
  271. if (pick(redraw, true)) {
  272. this.chart.redraw();
  273. }
  274. };
  275. addEvent(Series, 'afterGeneratePoints', function () {
  276. var series = this,
  277. xAxis = series.xAxis,
  278. yAxis = series.yAxis,
  279. points = series.points,
  280. point,
  281. i = points.length,
  282. connectNulls = series.options.connectNulls,
  283. nullGap;
  284. if (xAxis && yAxis && (xAxis.options.breaks || yAxis.options.breaks)) {
  285. while (i--) {
  286. point = points[i];
  287. // Respect nulls inside the break (#4275)
  288. nullGap = point.y === null && connectNulls === false;
  289. if (
  290. !nullGap &&
  291. (
  292. xAxis.isInAnyBreak(point.x, true) ||
  293. yAxis.isInAnyBreak(point.y, true)
  294. )
  295. ) {
  296. points.splice(i, 1);
  297. if (this.data[i]) {
  298. // Removes the graphics for this point if they exist
  299. this.data[i].destroyElements();
  300. }
  301. }
  302. }
  303. }
  304. });
  305. addEvent(Series, 'afterRender', function drawPointsWrapped() {
  306. this.drawBreaks(this.xAxis, ['x']);
  307. this.drawBreaks(this.yAxis, pick(this.pointArrayMap, ['y']));
  308. });
  309. H.Series.prototype.drawBreaks = function (axis, keys) {
  310. var series = this,
  311. points = series.points,
  312. breaks,
  313. threshold,
  314. eventName,
  315. y;
  316. if (!axis) {
  317. return; // #5950
  318. }
  319. keys.forEach(function (key) {
  320. breaks = axis.breakArray || [];
  321. threshold = axis.isXAxis ?
  322. axis.min :
  323. pick(series.options.threshold, axis.min);
  324. points.forEach(function (point) {
  325. y = pick(point['stack' + key.toUpperCase()], point[key]);
  326. breaks.forEach(function (brk) {
  327. eventName = false;
  328. if (
  329. (threshold < brk.from && y > brk.to) ||
  330. (threshold > brk.from && y < brk.from)
  331. ) {
  332. eventName = 'pointBreak';
  333. } else if (
  334. (threshold < brk.from && y > brk.from && y < brk.to) ||
  335. (threshold > brk.from && y > brk.to && y < brk.from)
  336. ) {
  337. eventName = 'pointInBreak';
  338. }
  339. if (eventName) {
  340. fireEvent(axis, eventName, { point: point, brk: brk });
  341. }
  342. });
  343. });
  344. });
  345. };
  346. /**
  347. * Extend getGraphPath by identifying gaps in the data so that we can draw a gap
  348. * in the line or area. This was moved from ordinal axis module to broken axis
  349. * module as of #5045.
  350. *
  351. * @private
  352. * @function Highcharts.Series#gappedPath
  353. */
  354. H.Series.prototype.gappedPath = function () {
  355. var currentDataGrouping = this.currentDataGrouping,
  356. groupingSize = currentDataGrouping && currentDataGrouping.totalRange,
  357. gapSize = this.options.gapSize,
  358. points = this.points.slice(),
  359. i = points.length - 1,
  360. yAxis = this.yAxis,
  361. xRange,
  362. stack;
  363. /**
  364. * Defines when to display a gap in the graph, together with the
  365. * [gapUnit](plotOptions.series.gapUnit) option.
  366. *
  367. * In case when `dataGrouping` is enabled, points can be grouped into a
  368. * larger time span. This can make the grouped points to have a greater
  369. * distance than the absolute value of `gapSize` property, which will result
  370. * in disappearing graph completely. To prevent this situation the mentioned
  371. * distance between grouped points is used instead of previously defined
  372. * `gapSize`.
  373. *
  374. * In practice, this option is most often used to visualize gaps in
  375. * time series. In a stock chart, intraday data is available for daytime
  376. * hours, while gaps will appear in nights and weekends.
  377. *
  378. * @see [gapUnit](plotOptions.series.gapUnit)
  379. * @see [xAxis.breaks](#xAxis.breaks)
  380. *
  381. * @sample {highstock} stock/plotoptions/series-gapsize/
  382. * Setting the gap size to 2 introduces gaps for weekends in daily
  383. * datasets.
  384. *
  385. * @type {number}
  386. * @default 0
  387. * @product highstock
  388. * @apioption plotOptions.series.gapSize
  389. */
  390. /**
  391. * Together with [gapSize](plotOptions.series.gapSize), this option defines
  392. * where to draw gaps in the graph.
  393. *
  394. * When the `gapUnit` is `relative` (default), a gap size of 5 means
  395. * that if the distance between two points is greater than five times
  396. * that of the two closest points, the graph will be broken.
  397. *
  398. * When the `gapUnit` is `value`, the gap is based on absolute axis values,
  399. * which on a datetime axis is milliseconds. This also applies to the
  400. * navigator series that inherits gap options from the base series.
  401. *
  402. * @see [gapSize](plotOptions.series.gapSize)
  403. *
  404. * @type {string}
  405. * @default relative
  406. * @since 5.0.13
  407. * @product highstock
  408. * @validvalue ["relative", "value"]
  409. * @apioption plotOptions.series.gapUnit
  410. */
  411. if (gapSize && i > 0) { // #5008
  412. // Gap unit is relative
  413. if (this.options.gapUnit !== 'value') {
  414. gapSize *= this.closestPointRange;
  415. }
  416. // Setting a new gapSize in case dataGrouping is enabled (#7686)
  417. if (groupingSize && groupingSize > gapSize) {
  418. gapSize = groupingSize;
  419. }
  420. // extension for ordinal breaks
  421. while (i--) {
  422. if (points[i + 1].x - points[i].x > gapSize) {
  423. xRange = (points[i].x + points[i + 1].x) / 2;
  424. points.splice( // insert after this one
  425. i + 1,
  426. 0,
  427. {
  428. isNull: true,
  429. x: xRange
  430. }
  431. );
  432. // For stacked chart generate empty stack items, #6546
  433. if (this.options.stacking) {
  434. stack = yAxis.stacks[this.stackKey][xRange] =
  435. new H.StackItem(
  436. yAxis,
  437. yAxis.options.stackLabels,
  438. false,
  439. xRange,
  440. this.stack
  441. );
  442. stack.total = 0;
  443. }
  444. }
  445. }
  446. }
  447. // Call base method
  448. return this.getGraphPath(points);
  449. };