GridAxis.js 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845
  1. /* *
  2. *
  3. * (c) 2016 Highsoft AS
  4. * Authors: Lars A. V. Cabrera
  5. *
  6. * License: www.highcharts.com/license
  7. *
  8. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  9. *
  10. * */
  11. 'use strict';
  12. import Axis from '../parts/Axis.js';
  13. import H from '../parts/Globals.js';
  14. import O from '../parts/Options.js';
  15. var dateFormat = O.dateFormat;
  16. import Tick from '../parts/Tick.js';
  17. import U from '../parts/Utilities.js';
  18. var addEvent = U.addEvent, defined = U.defined, erase = U.erase, find = U.find, isArray = U.isArray, isNumber = U.isNumber, merge = U.merge, pick = U.pick, timeUnits = U.timeUnits, wrap = U.wrap;
  19. var argsToArray = function (args) {
  20. return Array.prototype.slice.call(args, 1);
  21. }, isObject = function (x) {
  22. // Always use strict mode
  23. return U.isObject(x, true);
  24. }, Chart = H.Chart;
  25. var applyGridOptions = function applyGridOptions(axis) {
  26. var options = axis.options;
  27. // Center-align by default
  28. if (!options.labels) {
  29. options.labels = {};
  30. }
  31. options.labels.align = pick(options.labels.align, 'center');
  32. // @todo: Check against tickLabelPlacement between/on etc
  33. /* Prevents adding the last tick label if the axis is not a category
  34. axis.
  35. Since numeric labels are normally placed at starts and ends of a
  36. range of value, and this module makes the label point at the value,
  37. an "extra" label would appear. */
  38. if (!axis.categories) {
  39. options.showLastLabel = false;
  40. }
  41. // Prevents rotation of labels when squished, as rotating them would not
  42. // help.
  43. axis.labelRotation = 0;
  44. options.labels.rotation = 0;
  45. };
  46. /**
  47. * Set grid options for the axis labels. Requires Highcharts Gantt.
  48. *
  49. * @since 6.2.0
  50. * @product gantt
  51. * @apioption xAxis.grid
  52. */
  53. /**
  54. * Enable grid on the axis labels. Defaults to true for Gantt charts.
  55. *
  56. * @type {boolean}
  57. * @default true
  58. * @since 6.2.0
  59. * @product gantt
  60. * @apioption xAxis.grid.enabled
  61. */
  62. /**
  63. * Set specific options for each column (or row for horizontal axes) in the
  64. * grid. Each extra column/row is its own axis, and the axis options can be set
  65. * here.
  66. *
  67. * @sample gantt/demo/left-axis-table
  68. * Left axis as a table
  69. *
  70. * @type {Array<Highcharts.XAxisOptions>}
  71. * @apioption xAxis.grid.columns
  72. */
  73. /**
  74. * Set border color for the label grid lines.
  75. *
  76. * @type {Highcharts.ColorString}
  77. * @apioption xAxis.grid.borderColor
  78. */
  79. /**
  80. * Set border width of the label grid lines.
  81. *
  82. * @type {number}
  83. * @default 1
  84. * @apioption xAxis.grid.borderWidth
  85. */
  86. /**
  87. * Set cell height for grid axis labels. By default this is calculated from font
  88. * size. This option only applies to horizontal axes.
  89. *
  90. * @sample gantt/grid-axis/cellheight
  91. * Gant chart with custom cell height
  92. * @type {number}
  93. * @apioption xAxis.grid.cellHeight
  94. */
  95. ''; // detach doclets above
  96. /**
  97. * Get the largest label width and height.
  98. *
  99. * @private
  100. * @function Highcharts.Axis#getMaxLabelDimensions
  101. *
  102. * @param {Highcharts.Dictionary<Highcharts.Tick>} ticks
  103. * All the ticks on one axis.
  104. *
  105. * @param {Array<number|string>} tickPositions
  106. * All the tick positions on one axis.
  107. *
  108. * @return {Highcharts.SizeObject}
  109. * Object containing the properties height and width.
  110. *
  111. * @todo Move this to the generic axis implementation, as it is used there.
  112. */
  113. Axis.prototype.getMaxLabelDimensions = function (ticks, tickPositions) {
  114. var dimensions = {
  115. width: 0,
  116. height: 0
  117. };
  118. tickPositions.forEach(function (pos) {
  119. var tick = ticks[pos], tickHeight = 0, tickWidth = 0, label;
  120. if (isObject(tick)) {
  121. label = isObject(tick.label) ? tick.label : {};
  122. // Find width and height of tick
  123. tickHeight = label.getBBox ? label.getBBox().height : 0;
  124. if (label.textStr && !isNumber(label.textPxLength)) {
  125. label.textPxLength = label.getBBox().width;
  126. }
  127. tickWidth = isNumber(label.textPxLength) ?
  128. // Math.round ensures crisp lines
  129. Math.round(label.textPxLength) :
  130. 0;
  131. // Update the result if width and/or height are larger
  132. dimensions.height = Math.max(tickHeight, dimensions.height);
  133. dimensions.width = Math.max(tickWidth, dimensions.width);
  134. }
  135. });
  136. return dimensions;
  137. };
  138. // Adds week date format
  139. H.dateFormats.W = function (timestamp) {
  140. var d = new this.Date(timestamp);
  141. var firstDay = (this.get('Day', d) + 6) % 7;
  142. var thursday = new this.Date(d.valueOf());
  143. this.set('Date', thursday, this.get('Date', d) - firstDay + 3);
  144. var firstThursday = new this.Date(this.get('FullYear', thursday), 0, 1);
  145. if (this.get('Day', firstThursday) !== 4) {
  146. this.set('Month', d, 0);
  147. this.set('Date', d, 1 + (11 - this.get('Day', firstThursday)) % 7);
  148. }
  149. return (1 +
  150. Math.floor((thursday.valueOf() - firstThursday.valueOf()) / 604800000)).toString();
  151. };
  152. // First letter of the day of the week, e.g. 'M' for 'Monday'.
  153. H.dateFormats.E = function (timestamp) {
  154. return dateFormat('%a', timestamp, true).charAt(0);
  155. };
  156. /* eslint-disable no-invalid-this */
  157. addEvent(Chart, 'afterSetChartSize', function () {
  158. this.axes.forEach(function (axis) {
  159. (axis.grid && axis.grid.columns || []).forEach(function (column) {
  160. column.setAxisSize();
  161. column.setAxisTranslation();
  162. });
  163. });
  164. });
  165. // Center tick labels in cells.
  166. addEvent(Tick, 'afterGetLabelPosition', function (e) {
  167. var tick = this, label = tick.label, axis = tick.axis, reversed = axis.reversed, chart = axis.chart, options = axis.options, gridOptions = options.grid || {}, labelOpts = axis.options.labels, align = labelOpts.align,
  168. // verticalAlign is currently not supported for axis.labels.
  169. verticalAlign = 'middle', // labelOpts.verticalAlign,
  170. side = GridAxis.Side[axis.side], tickmarkOffset = e.tickmarkOffset, tickPositions = axis.tickPositions, tickPos = tick.pos - tickmarkOffset, nextTickPos = (isNumber(tickPositions[e.index + 1]) ?
  171. tickPositions[e.index + 1] - tickmarkOffset :
  172. axis.max + tickmarkOffset), tickSize = axis.tickSize('tick'), tickWidth = tickSize ? tickSize[0] : 0, crispCorr = tickSize ? tickSize[1] / 2 : 0, labelHeight, lblMetrics, lines, bottom, top, left, right;
  173. // Only center tick labels in grid axes
  174. if (gridOptions.enabled === true) {
  175. // Calculate top and bottom positions of the cell.
  176. if (side === 'top') {
  177. bottom = axis.top + axis.offset;
  178. top = bottom - tickWidth;
  179. }
  180. else if (side === 'bottom') {
  181. top = chart.chartHeight - axis.bottom + axis.offset;
  182. bottom = top + tickWidth;
  183. }
  184. else {
  185. bottom = axis.top + axis.len - axis.translate(reversed ? nextTickPos : tickPos);
  186. top = axis.top + axis.len - axis.translate(reversed ? tickPos : nextTickPos);
  187. }
  188. // Calculate left and right positions of the cell.
  189. if (side === 'right') {
  190. left = chart.chartWidth - axis.right + axis.offset;
  191. right = left + tickWidth;
  192. }
  193. else if (side === 'left') {
  194. right = axis.left + axis.offset;
  195. left = right - tickWidth;
  196. }
  197. else {
  198. left = Math.round(axis.left + axis.translate(reversed ? nextTickPos : tickPos)) - crispCorr;
  199. right = Math.round(axis.left + axis.translate(reversed ? tickPos : nextTickPos)) - crispCorr;
  200. }
  201. tick.slotWidth = right - left;
  202. // Calculate the positioning of the label based on
  203. // alignment.
  204. e.pos.x = (align === 'left' ?
  205. left :
  206. align === 'right' ?
  207. right :
  208. left + ((right - left) / 2) // default to center
  209. );
  210. e.pos.y = (verticalAlign === 'top' ?
  211. top :
  212. verticalAlign === 'bottom' ?
  213. bottom :
  214. top + ((bottom - top) / 2) // default to middle
  215. );
  216. lblMetrics = chart.renderer.fontMetrics(labelOpts.style.fontSize, label.element);
  217. labelHeight = label.getBBox().height;
  218. // Adjustment to y position to align the label correctly.
  219. // Would be better to have a setter or similar for this.
  220. if (!labelOpts.useHTML) {
  221. lines = Math.round(labelHeight / lblMetrics.h);
  222. e.pos.y += (
  223. // Center the label
  224. // TODO: why does this actually center the label?
  225. ((lblMetrics.b - (lblMetrics.h - lblMetrics.f)) / 2) +
  226. // Adjust for height of additional lines.
  227. -(((lines - 1) * lblMetrics.h) / 2));
  228. }
  229. else {
  230. e.pos.y += (
  231. // Readjust yCorr in htmlUpdateTransform
  232. lblMetrics.b +
  233. // Adjust for height of html label
  234. -(labelHeight / 2));
  235. }
  236. e.pos.x += (axis.horiz && labelOpts.x || 0);
  237. }
  238. });
  239. /* eslint-enable no-invalid-this */
  240. /**
  241. * Additions for grid axes.
  242. * @private
  243. * @class
  244. */
  245. var GridAxisAdditions = /** @class */ (function () {
  246. /* *
  247. *
  248. * Constructors
  249. *
  250. * */
  251. function GridAxisAdditions(axis) {
  252. this.axis = axis;
  253. }
  254. /* *
  255. *
  256. * Functions
  257. *
  258. * */
  259. /**
  260. * Checks if an axis is the outer axis in its dimension. Since
  261. * axes are placed outwards in order, the axis with the highest
  262. * index is the outermost axis.
  263. *
  264. * Example: If there are multiple x-axes at the top of the chart,
  265. * this function returns true if the axis supplied is the last
  266. * of the x-axes.
  267. *
  268. * @private
  269. *
  270. * @return {boolean}
  271. * True if the axis is the outermost axis in its dimension; false if
  272. * not.
  273. */
  274. GridAxisAdditions.prototype.isOuterAxis = function () {
  275. var axis = this.axis;
  276. var chart = axis.chart;
  277. var columnIndex = axis.grid.columnIndex;
  278. var columns = (axis.linkedParent && axis.linkedParent.grid.columns ||
  279. axis.grid.columns);
  280. var parentAxis = columnIndex ? axis.linkedParent : axis;
  281. var thisIndex = -1, lastIndex = 0;
  282. chart[axis.coll].forEach(function (otherAxis, index) {
  283. if (otherAxis.side === axis.side && !otherAxis.options.isInternal) {
  284. lastIndex = index;
  285. if (otherAxis === parentAxis) {
  286. // Get the index of the axis in question
  287. thisIndex = index;
  288. }
  289. }
  290. });
  291. return (lastIndex === thisIndex &&
  292. (isNumber(columnIndex) ? columns.length === columnIndex : true));
  293. };
  294. return GridAxisAdditions;
  295. }());
  296. /**
  297. * Axis with grid support.
  298. * @private
  299. * @class
  300. */
  301. var GridAxis = /** @class */ (function () {
  302. function GridAxis() {
  303. }
  304. /* *
  305. *
  306. * Static Functions
  307. *
  308. * */
  309. /* eslint-disable valid-jsdoc */
  310. /**
  311. * Extends axis class with grid support.
  312. * @private
  313. */
  314. GridAxis.compose = function (AxisClass) {
  315. Axis.keepProps.push('grid');
  316. wrap(AxisClass.prototype, 'unsquish', GridAxis.wrapUnsquish);
  317. // Add event handlers
  318. addEvent(AxisClass, 'init', GridAxis.onInit);
  319. addEvent(AxisClass, 'afterGetOffset', GridAxis.onAfterGetOffset);
  320. addEvent(AxisClass, 'afterGetTitlePosition', GridAxis.onAfterGetTitlePosition);
  321. addEvent(AxisClass, 'afterInit', GridAxis.onAfterInit);
  322. addEvent(AxisClass, 'afterRender', GridAxis.onAfterRender);
  323. addEvent(AxisClass, 'afterSetAxisTranslation', GridAxis.onAfterSetAxisTranslation);
  324. addEvent(AxisClass, 'afterSetOptions', GridAxis.onAfterSetOptions);
  325. addEvent(AxisClass, 'afterSetOptions', GridAxis.onAfterSetOptions2);
  326. addEvent(AxisClass, 'afterSetScale', GridAxis.onAfterSetScale);
  327. addEvent(AxisClass, 'afterTickSize', GridAxis.onAfterTickSize);
  328. addEvent(AxisClass, 'trimTicks', GridAxis.onTrimTicks);
  329. addEvent(AxisClass, 'destroy', GridAxis.onDestroy);
  330. };
  331. /**
  332. * Handle columns and getOffset.
  333. * @private
  334. */
  335. GridAxis.onAfterGetOffset = function () {
  336. var grid = this.grid;
  337. (grid && grid.columns || []).forEach(function (column) {
  338. column.getOffset();
  339. });
  340. };
  341. /**
  342. * @private
  343. */
  344. GridAxis.onAfterGetTitlePosition = function (e) {
  345. var axis = this;
  346. var options = axis.options;
  347. var gridOptions = options.grid || {};
  348. if (gridOptions.enabled === true) {
  349. // compute anchor points for each of the title align options
  350. var title = axis.axisTitle, axisHeight = axis.height, horiz = axis.horiz, axisLeft = axis.left, offset = axis.offset, opposite = axis.opposite, _a = axis.options.title, axisTitleOptions = _a === void 0 ? {} : _a, axisTop = axis.top, axisWidth = axis.width;
  351. var tickSize = axis.tickSize();
  352. var titleWidth = title && title.getBBox().width;
  353. var xOption = axisTitleOptions.x || 0;
  354. var yOption = axisTitleOptions.y || 0;
  355. var titleMargin = pick(axisTitleOptions.margin, horiz ? 5 : 10);
  356. var titleFontSize = axis.chart.renderer.fontMetrics(axisTitleOptions.style &&
  357. axisTitleOptions.style.fontSize, title).f;
  358. var crispCorr = tickSize ? tickSize[0] / 2 : 0;
  359. // TODO account for alignment
  360. // the position in the perpendicular direction of the axis
  361. var offAxis = ((horiz ? axisTop + axisHeight : axisLeft) +
  362. (horiz ? 1 : -1) * // horizontal axis reverses the margin
  363. (opposite ? -1 : 1) * // so does opposite axes
  364. crispCorr +
  365. (axis.side === GridAxis.Side.bottom ? titleFontSize : 0));
  366. e.titlePosition.x = horiz ?
  367. axisLeft - titleWidth / 2 - titleMargin + xOption :
  368. offAxis + (opposite ? axisWidth : 0) + offset + xOption;
  369. e.titlePosition.y = horiz ?
  370. (offAxis -
  371. (opposite ? axisHeight : 0) +
  372. (opposite ? titleFontSize : -titleFontSize) / 2 +
  373. offset +
  374. yOption) :
  375. axisTop - titleMargin + yOption;
  376. }
  377. };
  378. /**
  379. * @private
  380. */
  381. GridAxis.onAfterInit = function () {
  382. var axis = this;
  383. var chart = axis.chart, _a = axis.options.grid, gridOptions = _a === void 0 ? {} : _a, userOptions = axis.userOptions;
  384. if (gridOptions.enabled) {
  385. applyGridOptions(axis);
  386. /* eslint-disable no-invalid-this */
  387. // TODO: wrap the axis instead
  388. wrap(axis, 'labelFormatter', function (proceed) {
  389. var _a = this, axis = _a.axis, value = _a.value;
  390. var tickPos = axis.tickPositions;
  391. var series = (axis.isLinked ?
  392. axis.linkedParent :
  393. axis).series[0];
  394. var isFirst = value === tickPos[0];
  395. var isLast = value === tickPos[tickPos.length - 1];
  396. var point = series && find(series.options.data, function (p) {
  397. return p[axis.isXAxis ? 'x' : 'y'] === value;
  398. });
  399. // Make additional properties available for the
  400. // formatter
  401. this.isFirst = isFirst;
  402. this.isLast = isLast;
  403. this.point = point;
  404. // Call original labelFormatter
  405. return proceed.call(this);
  406. });
  407. /* eslint-enable no-invalid-this */
  408. }
  409. if (gridOptions.columns) {
  410. var columns = axis.grid.columns = [], columnIndex = axis.grid.columnIndex = 0;
  411. // Handle columns, each column is a grid axis
  412. while (++columnIndex < gridOptions.columns.length) {
  413. var columnOptions = merge(userOptions, gridOptions.columns[gridOptions.columns.length - columnIndex - 1], {
  414. linkedTo: 0,
  415. // Force to behave like category axis
  416. type: 'category'
  417. });
  418. delete columnOptions.grid.columns; // Prevent recursion
  419. var column = new Axis(axis.chart, columnOptions);
  420. column.grid.isColumn = true;
  421. column.grid.columnIndex = columnIndex;
  422. // Remove column axis from chart axes array, and place it
  423. // in the columns array.
  424. erase(chart.axes, column);
  425. erase(chart[axis.coll], column);
  426. columns.push(column);
  427. }
  428. }
  429. };
  430. /**
  431. * Draw an extra line on the far side of the outermost axis,
  432. * creating floor/roof/wall of a grid. And some padding.
  433. * ```
  434. * Make this:
  435. * (axis.min) __________________________ (axis.max)
  436. * | | | | |
  437. * Into this:
  438. * (axis.min) __________________________ (axis.max)
  439. * ___|____|____|____|____|__
  440. * ```
  441. * @private
  442. */
  443. GridAxis.onAfterRender = function () {
  444. var axis = this;
  445. var grid = axis.grid;
  446. var options = axis.options;
  447. var renderer = axis.chart.renderer;
  448. var gridOptions = options.grid || {};
  449. var yStartIndex, yEndIndex, xStartIndex, xEndIndex;
  450. if (gridOptions.enabled === true) {
  451. // @todo acutual label padding (top, bottom, left, right)
  452. axis.maxLabelDimensions = axis.getMaxLabelDimensions(axis.ticks, axis.tickPositions);
  453. // Remove right wall before rendering if updating
  454. if (axis.rightWall) {
  455. axis.rightWall.destroy();
  456. }
  457. /*
  458. Draw an extra axis line on outer axes
  459. >
  460. Make this: |______|______|______|___
  461. > _________________________
  462. Into this: |______|______|______|__|
  463. */
  464. if (axis.grid && axis.grid.isOuterAxis() && axis.axisLine) {
  465. var lineWidth = options.lineWidth;
  466. if (lineWidth) {
  467. var linePath = axis.getLinePath(lineWidth);
  468. var startPoint = linePath[0];
  469. var endPoint = linePath[1];
  470. // Negate distance if top or left axis
  471. // Subtract 1px to draw the line at the end of the tick
  472. var tickLength = (axis.tickSize('tick') || [1])[0];
  473. var distance = (tickLength - 1) * ((axis.side === GridAxis.Side.top ||
  474. axis.side === GridAxis.Side.left) ? -1 : 1);
  475. // If axis is horizontal, reposition line path vertically
  476. if (startPoint[0] === 'M' && endPoint[0] === 'L') {
  477. if (axis.horiz) {
  478. startPoint[2] += distance;
  479. endPoint[2] += distance;
  480. }
  481. else {
  482. // If axis is vertical, reposition line path
  483. // horizontally
  484. startPoint[1] += distance;
  485. endPoint[1] += distance;
  486. }
  487. }
  488. if (!axis.grid.axisLineExtra) {
  489. axis.grid.axisLineExtra = renderer
  490. .path(linePath)
  491. .attr({
  492. zIndex: 7
  493. })
  494. .addClass('highcharts-axis-line')
  495. .add(axis.axisGroup);
  496. if (!renderer.styledMode) {
  497. axis.grid.axisLineExtra.attr({
  498. stroke: options.lineColor,
  499. 'stroke-width': lineWidth
  500. });
  501. }
  502. }
  503. else {
  504. axis.grid.axisLineExtra.animate({
  505. d: linePath
  506. });
  507. }
  508. // show or hide the line depending on
  509. // options.showEmpty
  510. axis.axisLine[axis.showAxis ? 'show' : 'hide'](true);
  511. }
  512. }
  513. (grid && grid.columns || []).forEach(function (column) {
  514. column.render();
  515. });
  516. }
  517. };
  518. /**
  519. * @private
  520. */
  521. GridAxis.onAfterSetAxisTranslation = function () {
  522. var axis = this;
  523. var tickInfo = axis.tickPositions && axis.tickPositions.info;
  524. var options = axis.options;
  525. var gridOptions = options.grid || {};
  526. var userLabels = axis.userOptions.labels || {};
  527. if (axis.horiz) {
  528. if (gridOptions.enabled === true) {
  529. axis.series.forEach(function (series) {
  530. series.options.pointRange = 0;
  531. });
  532. }
  533. // Lower level time ticks, like hours or minutes, represent
  534. // points in time and not ranges. These should be aligned
  535. // left in the grid cell by default. The same applies to
  536. // years of higher order.
  537. if (tickInfo &&
  538. options.dateTimeLabelFormats &&
  539. options.labels &&
  540. !defined(userLabels.align) &&
  541. (options.dateTimeLabelFormats[tickInfo.unitName].range === false ||
  542. tickInfo.count > 1 // years
  543. )) {
  544. options.labels.align = 'left';
  545. if (!defined(userLabels.x)) {
  546. options.labels.x = 3;
  547. }
  548. }
  549. }
  550. };
  551. /**
  552. * Creates a left and right wall on horizontal axes:
  553. * - Places leftmost tick at the start of the axis, to create a left
  554. * wall
  555. * - Ensures that the rightmost tick is at the end of the axis, to
  556. * create a right wall.
  557. * @private
  558. */
  559. GridAxis.onAfterSetOptions = function (e) {
  560. var options = this.options, userOptions = e.userOptions, gridAxisOptions, gridOptions = ((options && isObject(options.grid)) ? options.grid : {});
  561. if (gridOptions.enabled === true) {
  562. // Merge the user options into default grid axis options so
  563. // that when a user option is set, it takes presedence.
  564. gridAxisOptions = merge(true, {
  565. className: ('highcharts-grid-axis ' + (userOptions.className || '')),
  566. dateTimeLabelFormats: {
  567. hour: {
  568. list: ['%H:%M', '%H']
  569. },
  570. day: {
  571. list: ['%A, %e. %B', '%a, %e. %b', '%E']
  572. },
  573. week: {
  574. list: ['Week %W', 'W%W']
  575. },
  576. month: {
  577. list: ['%B', '%b', '%o']
  578. }
  579. },
  580. grid: {
  581. borderWidth: 1
  582. },
  583. labels: {
  584. padding: 2,
  585. style: {
  586. fontSize: '13px'
  587. }
  588. },
  589. margin: 0,
  590. title: {
  591. text: null,
  592. reserveSpace: false,
  593. rotation: 0
  594. },
  595. // In a grid axis, only allow one unit of certain types,
  596. // for example we shouln't have one grid cell spanning
  597. // two days.
  598. units: [[
  599. 'millisecond',
  600. [1, 10, 100]
  601. ], [
  602. 'second',
  603. [1, 10]
  604. ], [
  605. 'minute',
  606. [1, 5, 15]
  607. ], [
  608. 'hour',
  609. [1, 6]
  610. ], [
  611. 'day',
  612. [1]
  613. ], [
  614. 'week',
  615. [1]
  616. ], [
  617. 'month',
  618. [1]
  619. ], [
  620. 'year',
  621. null
  622. ]]
  623. }, userOptions);
  624. // X-axis specific options
  625. if (this.coll === 'xAxis') {
  626. // For linked axes, tickPixelInterval is used only if
  627. // the tickPositioner below doesn't run or returns
  628. // undefined (like multiple years)
  629. if (defined(userOptions.linkedTo) &&
  630. !defined(userOptions.tickPixelInterval)) {
  631. gridAxisOptions.tickPixelInterval = 350;
  632. }
  633. // For the secondary grid axis, use the primary axis'
  634. // tick intervals and return ticks one level higher.
  635. if (
  636. // Check for tick pixel interval in options
  637. !defined(userOptions.tickPixelInterval) &&
  638. // Only for linked axes
  639. defined(userOptions.linkedTo) &&
  640. !defined(userOptions.tickPositioner) &&
  641. !defined(userOptions.tickInterval)) {
  642. gridAxisOptions.tickPositioner = function (min, max) {
  643. var parentInfo = (this.linkedParent &&
  644. this.linkedParent.tickPositions &&
  645. this.linkedParent.tickPositions.info);
  646. if (parentInfo) {
  647. var unitIdx, count, unitName, i, units = gridAxisOptions.units, unitRange;
  648. for (i = 0; i < units.length; i++) {
  649. if (units[i][0] ===
  650. parentInfo.unitName) {
  651. unitIdx = i;
  652. break;
  653. }
  654. }
  655. // Get the first allowed count on the next
  656. // unit.
  657. if (units[unitIdx + 1]) {
  658. unitName = units[unitIdx + 1][0];
  659. count =
  660. (units[unitIdx + 1][1] || [1])[0];
  661. // In case the base X axis shows years, make
  662. // the secondary axis show ten times the
  663. // years (#11427)
  664. }
  665. else if (parentInfo.unitName === 'year') {
  666. unitName = 'year';
  667. count = parentInfo.count * 10;
  668. }
  669. unitRange = timeUnits[unitName];
  670. this.tickInterval = unitRange * count;
  671. return this.getTimeTicks({
  672. unitRange: unitRange,
  673. count: count,
  674. unitName: unitName
  675. }, min, max, this.options.startOfWeek);
  676. }
  677. };
  678. }
  679. }
  680. // Now merge the combined options into the axis options
  681. merge(true, this.options, gridAxisOptions);
  682. if (this.horiz) {
  683. /* _________________________
  684. Make this: ___|_____|_____|_____|__|
  685. ^ ^
  686. _________________________
  687. Into this: |_____|_____|_____|_____|
  688. ^ ^ */
  689. options.minPadding = pick(userOptions.minPadding, 0);
  690. options.maxPadding = pick(userOptions.maxPadding, 0);
  691. }
  692. // If borderWidth is set, then use its value for tick and
  693. // line width.
  694. if (isNumber(options.grid.borderWidth)) {
  695. options.tickWidth = options.lineWidth = gridOptions.borderWidth;
  696. }
  697. }
  698. };
  699. /**
  700. * @private
  701. */
  702. GridAxis.onAfterSetOptions2 = function (e) {
  703. var axis = this;
  704. var userOptions = e.userOptions;
  705. var gridOptions = userOptions && userOptions.grid || {};
  706. var columns = gridOptions.columns;
  707. // Add column options to the parent axis. Children has their column
  708. // options set on init in onGridAxisAfterInit.
  709. if (gridOptions.enabled && columns) {
  710. merge(true, axis.options, columns[columns.length - 1]);
  711. }
  712. };
  713. /**
  714. * Handle columns and setScale.
  715. * @private
  716. */
  717. GridAxis.onAfterSetScale = function () {
  718. var axis = this;
  719. (axis.grid.columns || []).forEach(function (column) {
  720. column.setScale();
  721. });
  722. };
  723. /**
  724. * Draw vertical axis ticks extra long to create cell floors and roofs.
  725. * Overrides the tickLength for vertical axes.
  726. * @private
  727. */
  728. GridAxis.onAfterTickSize = function (e) {
  729. var defaultLeftAxisOptions = Axis.defaultLeftAxisOptions;
  730. var _a = this, horiz = _a.horiz, maxLabelDimensions = _a.maxLabelDimensions, _b = _a.options.grid, gridOptions = _b === void 0 ? {} : _b;
  731. if (gridOptions.enabled && maxLabelDimensions) {
  732. var labelPadding = (Math.abs(defaultLeftAxisOptions.labels.x) * 2);
  733. var distance = horiz ?
  734. gridOptions.cellHeight || labelPadding + maxLabelDimensions.height :
  735. labelPadding + maxLabelDimensions.width;
  736. if (isArray(e.tickSize)) {
  737. e.tickSize[0] = distance;
  738. }
  739. else {
  740. e.tickSize = [distance, 0];
  741. }
  742. }
  743. };
  744. /**
  745. * @private
  746. */
  747. GridAxis.onDestroy = function (e) {
  748. var grid = this.grid;
  749. (grid.columns || []).forEach(function (column) {
  750. column.destroy(e.keepEvents);
  751. });
  752. grid.columns = void 0;
  753. };
  754. /**
  755. * Wraps axis init to draw cell walls on vertical axes.
  756. * @private
  757. */
  758. GridAxis.onInit = function (e) {
  759. var axis = this;
  760. var userOptions = e.userOptions || {};
  761. var gridOptions = userOptions.grid || {};
  762. if (gridOptions.enabled && defined(gridOptions.borderColor)) {
  763. userOptions.tickColor = userOptions.lineColor = gridOptions.borderColor;
  764. }
  765. if (!axis.grid) {
  766. axis.grid = new GridAxisAdditions(axis);
  767. }
  768. };
  769. /**
  770. * Makes tick labels which are usually ignored in a linked axis
  771. * displayed if they are within range of linkedParent.min.
  772. * ```
  773. * _____________________________
  774. * | | | | |
  775. * Make this: | | 2 | 3 | 4 |
  776. * |___|_______|_______|_______|
  777. * ^
  778. * _____________________________
  779. * | | | | |
  780. * Into this: | 1 | 2 | 3 | 4 |
  781. * |___|_______|_______|_______|
  782. * ^
  783. * ```
  784. * @private
  785. * @todo Does this function do what the drawing says? Seems to affect
  786. * ticks and not the labels directly?
  787. */
  788. GridAxis.onTrimTicks = function () {
  789. var axis = this;
  790. var options = axis.options;
  791. var gridOptions = options.grid || {};
  792. var categoryAxis = axis.categories;
  793. var tickPositions = axis.tickPositions;
  794. var firstPos = tickPositions[0];
  795. var lastPos = tickPositions[tickPositions.length - 1];
  796. var linkedMin = axis.linkedParent && axis.linkedParent.min;
  797. var linkedMax = axis.linkedParent && axis.linkedParent.max;
  798. var min = linkedMin || axis.min;
  799. var max = linkedMax || axis.max;
  800. var tickInterval = axis.tickInterval;
  801. var endMoreThanMin = (firstPos < min &&
  802. firstPos + tickInterval > min);
  803. var startLessThanMax = (lastPos > max &&
  804. lastPos - tickInterval < max);
  805. if (gridOptions.enabled === true &&
  806. !categoryAxis &&
  807. (axis.horiz || axis.isLinked)) {
  808. if (endMoreThanMin && !options.startOnTick) {
  809. tickPositions[0] = min;
  810. }
  811. if (startLessThanMax && !options.endOnTick) {
  812. tickPositions[tickPositions.length - 1] = max;
  813. }
  814. }
  815. };
  816. /**
  817. * Avoid altering tickInterval when reserving space.
  818. * @private
  819. */
  820. GridAxis.wrapUnsquish = function (proceed) {
  821. var axis = this;
  822. var _a = axis.options.grid, gridOptions = _a === void 0 ? {} : _a;
  823. if (gridOptions.enabled === true && axis.categories) {
  824. return axis.tickInterval;
  825. }
  826. return proceed.apply(axis, argsToArray(arguments));
  827. };
  828. return GridAxis;
  829. }());
  830. (function (GridAxis) {
  831. /**
  832. * Enum for which side the axis is on. Maps to axis.side.
  833. * @private
  834. */
  835. var Side;
  836. (function (Side) {
  837. Side[Side["top"] = 0] = "top";
  838. Side[Side["right"] = 1] = "right";
  839. Side[Side["bottom"] = 2] = "bottom";
  840. Side[Side["left"] = 3] = "left";
  841. })(Side = GridAxis.Side || (GridAxis.Side = {}));
  842. })(GridAxis || (GridAxis = {}));
  843. GridAxis.compose(Axis);
  844. export default GridAxis;