UNPKG

highcharts

Version:
1,219 lines (1,215 loc) 134 kB
/** * @license Highcharts Gantt JS v8.2.0 (2020-08-20) * * Tree Grid * * (c) 2016-2019 Jon Arild Nygard * * License: www.highcharts.com/license */ 'use strict'; (function (factory) { if (typeof module === 'object' && module.exports) { factory['default'] = factory; module.exports = factory; } else if (typeof define === 'function' && define.amd) { define('highcharts/modules/treegrid', ['highcharts'], function (Highcharts) { factory(Highcharts); factory.Highcharts = Highcharts; return factory; }); } else { factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined); } }(function (Highcharts) { var _modules = Highcharts ? Highcharts._modules : {}; function _registerModule(obj, path, args, fn) { if (!obj.hasOwnProperty(path)) { obj[path] = fn.apply(null, args); } } _registerModule(_modules, 'Gantt/Tree.js', [_modules['Core/Utilities.js']], function (U) { /* * * * (c) 2016-2020 Highsoft AS * * Authors: Jon Arild Nygard * * License: www.highcharts.com/license * * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!! * * */ /* eslint no-console: 0 */ var extend = U.extend, isNumber = U.isNumber, pick = U.pick; /** * Creates an object map from parent id to childrens index. * * @private * @function Highcharts.Tree#getListOfParents * * @param {Array<*>} data * List of points set in options. `Array.parent` is parent id of point. * * @param {Array<string>} ids * List of all point ids. * * @return {Highcharts.Dictionary<Array<*>>} * Map from parent id to children index in data */ var getListOfParents = function (data, ids) { var listOfParents = data.reduce(function (prev, curr) { var parent = pick(curr.parent, ''); if (typeof prev[parent] === 'undefined') { prev[parent] = []; } prev[parent].push(curr); return prev; }, {}), parents = Object.keys(listOfParents); // If parent does not exist, hoist parent to root of tree. parents.forEach(function (parent, list) { var children = listOfParents[parent]; if ((parent !== '') && (ids.indexOf(parent) === -1)) { children.forEach(function (child) { list[''].push(child); }); delete list[parent]; } }); return listOfParents; }; var getNode = function (id, parent, level, data, mapOfIdToChildren, options) { var descendants = 0, height = 0, after = options && options.after, before = options && options.before, node = { data: data, depth: level - 1, id: id, level: level, parent: parent }, start, end, children; // Allow custom logic before the children has been created. if (typeof before === 'function') { before(node, options); } // Call getNode recursively on the children. Calulate the height of the // node, and the number of descendants. children = ((mapOfIdToChildren[id] || [])).map(function (child) { var node = getNode(child.id, id, (level + 1), child, mapOfIdToChildren, options), childStart = child.start, childEnd = (child.milestone === true ? childStart : child.end); // Start should be the lowest child.start. start = ((!isNumber(start) || childStart < start) ? childStart : start); // End should be the largest child.end. // If child is milestone, then use start as end. end = ((!isNumber(end) || childEnd > end) ? childEnd : end); descendants = descendants + 1 + node.descendants; height = Math.max(node.height + 1, height); return node; }); // Calculate start and end for point if it is not already explicitly set. if (data) { data.start = pick(data.start, start); data.end = pick(data.end, end); } extend(node, { children: children, descendants: descendants, height: height }); // Allow custom logic after the children has been created. if (typeof after === 'function') { after(node, options); } return node; }; var getTree = function (data, options) { var ids = data.map(function (d) { return d.id; }), mapOfIdToChildren = getListOfParents(data, ids); return getNode('', null, 1, null, mapOfIdToChildren, options); }; var Tree = { getListOfParents: getListOfParents, getNode: getNode, getTree: getTree }; return Tree; }); _registerModule(_modules, 'Core/Axis/TreeGridTick.js', [_modules['Core/Utilities.js']], function (U) { /* * * * (c) 2016 Highsoft AS * Authors: Jon Arild Nygard * * License: www.highcharts.com/license * * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!! * * */ var addEvent = U.addEvent, defined = U.defined, isObject = U.isObject, isNumber = U.isNumber, pick = U.pick, wrap = U.wrap; /** * @private */ var TreeGridTick; (function (TreeGridTick) { /* * * * Interfaces * * */ /* * * * Variables * * */ var applied = false; /* * * * Functions * * */ /** * @private */ function compose(TickClass) { if (!applied) { addEvent(TickClass, 'init', onInit); wrap(TickClass.prototype, 'getLabelPosition', wrapGetLabelPosition); wrap(TickClass.prototype, 'renderLabel', wrapRenderLabel); // backwards compatibility TickClass.prototype.collapse = function (redraw) { this.treeGrid.collapse(redraw); }; TickClass.prototype.expand = function (redraw) { this.treeGrid.expand(redraw); }; TickClass.prototype.toggleCollapse = function (redraw) { this.treeGrid.toggleCollapse(redraw); }; applied = true; } } TreeGridTick.compose = compose; /** * @private */ function onInit() { var tick = this; if (!tick.treeGrid) { tick.treeGrid = new Additions(tick); } } /** * @private */ function onTickHover(label) { label.addClass('highcharts-treegrid-node-active'); if (!label.renderer.styledMode) { label.css({ textDecoration: 'underline' }); } } /** * @private */ function onTickHoverExit(label, options) { var css = defined(options.style) ? options.style : {}; label.removeClass('highcharts-treegrid-node-active'); if (!label.renderer.styledMode) { label.css({ textDecoration: css.textDecoration }); } } /** * @private */ function renderLabelIcon(tick, params) { var treeGrid = tick.treeGrid, isNew = !treeGrid.labelIcon, renderer = params.renderer, labelBox = params.xy, options = params.options, width = options.width, height = options.height, iconCenter = { x: labelBox.x - (width / 2) - options.padding, y: labelBox.y - (height / 2) }, rotation = params.collapsed ? 90 : 180, shouldRender = params.show && isNumber(iconCenter.y); var icon = treeGrid.labelIcon; if (!icon) { treeGrid.labelIcon = icon = renderer .path(renderer.symbols[options.type](options.x, options.y, width, height)) .addClass('highcharts-label-icon') .add(params.group); } // Set the new position, and show or hide if (!shouldRender) { icon.attr({ y: -9999 }); // #1338 } // Presentational attributes if (!renderer.styledMode) { icon .attr({ 'stroke-width': 1, 'fill': pick(params.color, '#666666') }) .css({ cursor: 'pointer', stroke: options.lineColor, strokeWidth: options.lineWidth }); } // Update the icon positions icon[isNew ? 'attr' : 'animate']({ translateX: iconCenter.x, translateY: iconCenter.y, rotation: rotation }); } /** * @private */ function wrapGetLabelPosition(proceed, x, y, label, horiz, labelOptions, tickmarkOffset, index, step) { var tick = this, lbOptions = pick(tick.options && tick.options.labels, labelOptions), pos = tick.pos, axis = tick.axis, options = axis.options, isTreeGrid = options.type === 'treegrid', result = proceed.apply(tick, [x, y, label, horiz, lbOptions, tickmarkOffset, index, step]); var symbolOptions, indentation, mapOfPosToGridNode, node, level; if (isTreeGrid) { symbolOptions = (lbOptions && isObject(lbOptions.symbol, true) ? lbOptions.symbol : {}); indentation = (lbOptions && isNumber(lbOptions.indentation) ? lbOptions.indentation : 0); mapOfPosToGridNode = axis.treeGrid.mapOfPosToGridNode; node = mapOfPosToGridNode && mapOfPosToGridNode[pos]; level = (node && node.depth) || 1; result.x += ( // Add space for symbols ((symbolOptions.width) + (symbolOptions.padding * 2)) + // Apply indentation ((level - 1) * indentation)); } return result; } /** * @private */ function wrapRenderLabel(proceed) { var tick = this, pos = tick.pos, axis = tick.axis, label = tick.label, mapOfPosToGridNode = axis.treeGrid.mapOfPosToGridNode, options = axis.options, labelOptions = pick(tick.options && tick.options.labels, options && options.labels), symbolOptions = (labelOptions && isObject(labelOptions.symbol, true) ? labelOptions.symbol : {}), node = mapOfPosToGridNode && mapOfPosToGridNode[pos], level = node && node.depth, isTreeGrid = options.type === 'treegrid', shouldRender = axis.tickPositions.indexOf(pos) > -1, prefixClassName = 'highcharts-treegrid-node-', styledMode = axis.chart.styledMode; var collapsed, addClassName, removeClassName; if (isTreeGrid && node) { // Add class name for hierarchical styling. if (label && label.element) { label.addClass(prefixClassName + 'level-' + level); } } proceed.apply(tick, Array.prototype.slice.call(arguments, 1)); if (isTreeGrid && label && label.element && node && node.descendants && node.descendants > 0) { collapsed = axis.treeGrid.isCollapsed(node); renderLabelIcon(tick, { color: !styledMode && label.styles && label.styles.color || '', collapsed: collapsed, group: label.parentGroup, options: symbolOptions, renderer: label.renderer, show: shouldRender, xy: label.xy }); // Add class name for the node. addClassName = prefixClassName + (collapsed ? 'collapsed' : 'expanded'); removeClassName = prefixClassName + (collapsed ? 'expanded' : 'collapsed'); label .addClass(addClassName) .removeClass(removeClassName); if (!styledMode) { label.css({ cursor: 'pointer' }); } // Add events to both label text and icon [label, tick.treeGrid.labelIcon].forEach(function (object) { if (object && !object.attachedTreeGridEvents) { // On hover addEvent(object.element, 'mouseover', function () { onTickHover(label); }); // On hover out addEvent(object.element, 'mouseout', function () { onTickHoverExit(label, labelOptions); }); addEvent(object.element, 'click', function () { tick.treeGrid.toggleCollapse(); }); object.attachedTreeGridEvents = true; } }); } } /* * * * Classes * * */ /** * @private * @class */ var Additions = /** @class */ (function () { /* * * * Constructors * * */ /** * @private */ function Additions(tick) { this.tick = tick; } /* * * * Functions * * */ /** * Collapse the grid cell. Used when axis is of type treegrid. * * @see gantt/treegrid-axis/collapsed-dynamically/demo.js * * @private * @function Highcharts.Tick#collapse * * @param {boolean} [redraw=true] * Whether to redraw the chart or wait for an explicit call to * {@link Highcharts.Chart#redraw} */ Additions.prototype.collapse = function (redraw) { var tick = this.tick, axis = tick.axis, brokenAxis = axis.brokenAxis; if (brokenAxis && axis.treeGrid.mapOfPosToGridNode) { var pos = tick.pos, node = axis.treeGrid.mapOfPosToGridNode[pos], breaks = axis.treeGrid.collapse(node); brokenAxis.setBreaks(breaks, pick(redraw, true)); } }; /** * Expand the grid cell. Used when axis is of type treegrid. * * @see gantt/treegrid-axis/collapsed-dynamically/demo.js * * @private * @function Highcharts.Tick#expand * * @param {boolean} [redraw=true] * Whether to redraw the chart or wait for an explicit call to * {@link Highcharts.Chart#redraw} */ Additions.prototype.expand = function (redraw) { var tick = this.tick, axis = tick.axis, brokenAxis = axis.brokenAxis; if (brokenAxis && axis.treeGrid.mapOfPosToGridNode) { var pos = tick.pos, node = axis.treeGrid.mapOfPosToGridNode[pos], breaks = axis.treeGrid.expand(node); brokenAxis.setBreaks(breaks, pick(redraw, true)); } }; /** * Toggle the collapse/expand state of the grid cell. Used when axis is * of type treegrid. * * @see gantt/treegrid-axis/collapsed-dynamically/demo.js * * @private * @function Highcharts.Tick#toggleCollapse * * @param {boolean} [redraw=true] * Whether to redraw the chart or wait for an explicit call to * {@link Highcharts.Chart#redraw} */ Additions.prototype.toggleCollapse = function (redraw) { var tick = this.tick, axis = tick.axis, brokenAxis = axis.brokenAxis; if (brokenAxis && axis.treeGrid.mapOfPosToGridNode) { var pos = tick.pos, node = axis.treeGrid.mapOfPosToGridNode[pos], breaks = axis.treeGrid.toggleCollapse(node); brokenAxis.setBreaks(breaks, pick(redraw, true)); } }; return Additions; }()); TreeGridTick.Additions = Additions; })(TreeGridTick || (TreeGridTick = {})); return TreeGridTick; }); _registerModule(_modules, 'Mixins/TreeSeries.js', [_modules['Core/Color.js'], _modules['Core/Utilities.js']], function (Color, U) { /* * * * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!! * * */ var extend = U.extend, isArray = U.isArray, isNumber = U.isNumber, isObject = U.isObject, merge = U.merge, pick = U.pick; var isBoolean = function (x) { return typeof x === 'boolean'; }, isFn = function (x) { return typeof x === 'function'; }; /* eslint-disable valid-jsdoc */ /** * @todo Combine buildTree and buildNode with setTreeValues * @todo Remove logic from Treemap and make it utilize this mixin. * @private */ var setTreeValues = function setTreeValues(tree, options) { var before = options.before, idRoot = options.idRoot, mapIdToNode = options.mapIdToNode, nodeRoot = mapIdToNode[idRoot], levelIsConstant = (isBoolean(options.levelIsConstant) ? options.levelIsConstant : true), points = options.points, point = points[tree.i], optionsPoint = point && point.options || {}, childrenTotal = 0, children = [], value; extend(tree, { levelDynamic: tree.level - (levelIsConstant ? 0 : nodeRoot.level), name: pick(point && point.name, ''), visible: (idRoot === tree.id || (isBoolean(options.visible) ? options.visible : false)) }); if (isFn(before)) { tree = before(tree, options); } // First give the children some values tree.children.forEach(function (child, i) { var newOptions = extend({}, options); extend(newOptions, { index: i, siblings: tree.children.length, visible: tree.visible }); child = setTreeValues(child, newOptions); children.push(child); if (child.visible) { childrenTotal += child.val; } }); tree.visible = childrenTotal > 0 || tree.visible; // Set the values value = pick(optionsPoint.value, childrenTotal); extend(tree, { children: children, childrenTotal: childrenTotal, isLeaf: tree.visible && !childrenTotal, val: value }); return tree; }; /** * @private */ var getColor = function getColor(node, options) { var index = options.index, mapOptionsToLevel = options.mapOptionsToLevel, parentColor = options.parentColor, parentColorIndex = options.parentColorIndex, series = options.series, colors = options.colors, siblings = options.siblings, points = series.points, getColorByPoint, chartOptionsChart = series.chart.options.chart, point, level, colorByPoint, colorIndexByPoint, color, colorIndex; /** * @private */ function variation(color) { var colorVariation = level && level.colorVariation; if (colorVariation) { if (colorVariation.key === 'brightness') { return Color.parse(color).brighten(colorVariation.to * (index / siblings)).get(); } } return color; } if (node) { point = points[node.i]; level = mapOptionsToLevel[node.level] || {}; getColorByPoint = point && level.colorByPoint; if (getColorByPoint) { colorIndexByPoint = point.index % (colors ? colors.length : chartOptionsChart.colorCount); colorByPoint = colors && colors[colorIndexByPoint]; } // Select either point color, level color or inherited color. if (!series.chart.styledMode) { color = pick(point && point.options.color, level && level.color, colorByPoint, parentColor && variation(parentColor), series.color); } colorIndex = pick(point && point.options.colorIndex, level && level.colorIndex, colorIndexByPoint, parentColorIndex, options.colorIndex); } return { color: color, colorIndex: colorIndex }; }; /** * Creates a map from level number to its given options. * * @private * @function getLevelOptions * @param {object} params * Object containing parameters. * - `defaults` Object containing default options. The default options * are merged with the userOptions to get the final options for a * specific level. * - `from` The lowest level number. * - `levels` User options from series.levels. * - `to` The highest level number. * @return {Highcharts.Dictionary<object>|null} * Returns a map from level number to its given options. */ var getLevelOptions = function getLevelOptions(params) { var result = null, defaults, converted, i, from, to, levels; if (isObject(params)) { result = {}; from = isNumber(params.from) ? params.from : 1; levels = params.levels; converted = {}; defaults = isObject(params.defaults) ? params.defaults : {}; if (isArray(levels)) { converted = levels.reduce(function (obj, item) { var level, levelIsConstant, options; if (isObject(item) && isNumber(item.level)) { options = merge({}, item); levelIsConstant = (isBoolean(options.levelIsConstant) ? options.levelIsConstant : defaults.levelIsConstant); // Delete redundant properties. delete options.levelIsConstant; delete options.level; // Calculate which level these options apply to. level = item.level + (levelIsConstant ? 0 : from - 1); if (isObject(obj[level])) { extend(obj[level], options); } else { obj[level] = options; } } return obj; }, {}); } to = isNumber(params.to) ? params.to : 1; for (i = 0; i <= to; i++) { result[i] = merge({}, defaults, isObject(converted[i]) ? converted[i] : {}); } } return result; }; /** * Update the rootId property on the series. Also makes sure that it is * accessible to exporting. * * @private * @function updateRootId * * @param {object} series * The series to operate on. * * @return {string} * Returns the resulting rootId after update. */ var updateRootId = function (series) { var rootId, options; if (isObject(series)) { // Get the series options. options = isObject(series.options) ? series.options : {}; // Calculate the rootId. rootId = pick(series.rootNode, options.rootId, ''); // Set rootId on series.userOptions to pick it up in exporting. if (isObject(series.userOptions)) { series.userOptions.rootId = rootId; } // Set rootId on series to pick it up on next update. series.rootNode = rootId; } return rootId; }; var result = { getColor: getColor, getLevelOptions: getLevelOptions, setTreeValues: setTreeValues, updateRootId: updateRootId }; return result; }); _registerModule(_modules, 'Core/Axis/GridAxis.js', [_modules['Core/Axis/Axis.js'], _modules['Core/Globals.js'], _modules['Core/Options.js'], _modules['Core/Axis/Tick.js'], _modules['Core/Utilities.js']], function (Axis, H, O, Tick, U) { /* * * * (c) 2016 Highsoft AS * Authors: Lars A. V. Cabrera * * License: www.highcharts.com/license * * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!! * * */ var dateFormat = O.dateFormat; 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; var argsToArray = function (args) { return Array.prototype.slice.call(args, 1); }, isObject = function (x) { // Always use strict mode return U.isObject(x, true); }, Chart = H.Chart; var applyGridOptions = function applyGridOptions(axis) { var options = axis.options; // Center-align by default if (!options.labels) { options.labels = {}; } options.labels.align = pick(options.labels.align, 'center'); // @todo: Check against tickLabelPlacement between/on etc /* Prevents adding the last tick label if the axis is not a category axis. Since numeric labels are normally placed at starts and ends of a range of value, and this module makes the label point at the value, an "extra" label would appear. */ if (!axis.categories) { options.showLastLabel = false; } // Prevents rotation of labels when squished, as rotating them would not // help. axis.labelRotation = 0; options.labels.rotation = 0; }; /** * For a datetime axis, the scale will automatically adjust to the * appropriate unit. This member gives the default string * representations used for each unit. For intermediate values, * different units may be used, for example the `day` unit can be used * on midnight and `hour` unit be used for intermediate values on the * same axis. * For grid axes (like in Gantt charts), * it is possible to declare as a list to provide different * formats depending on available space. * For an overview of the replacement codes, see * [dateFormat](/class-reference/Highcharts#dateFormat). * * Defaults to: * ```js * { hour: { list: ['%H:%M', '%H'] }, day: { list: ['%A, %e. %B', '%a, %e. %b', '%E'] }, week: { list: ['Week %W', 'W%W'] }, month: { list: ['%B', '%b', '%o'] } }, * ``` * * @sample {gantt} gantt/demo/left-axis-table * Gantt Chart with custom axis date format. * * @product gantt * @apioption xAxis.dateTimeLabelFormats */ /** * Set grid options for the axis labels. Requires Highcharts Gantt. * * @since 6.2.0 * @product gantt * @apioption xAxis.grid */ /** * Enable grid on the axis labels. Defaults to true for Gantt charts. * * @type {boolean} * @default true * @since 6.2.0 * @product gantt * @apioption xAxis.grid.enabled */ /** * Set specific options for each column (or row for horizontal axes) in the * grid. Each extra column/row is its own axis, and the axis options can be set * here. * * @sample gantt/demo/left-axis-table * Left axis as a table * * @type {Array<Highcharts.XAxisOptions>} * @apioption xAxis.grid.columns */ /** * Set border color for the label grid lines. * * @type {Highcharts.ColorString} * @apioption xAxis.grid.borderColor */ /** * Set border width of the label grid lines. * * @type {number} * @default 1 * @apioption xAxis.grid.borderWidth */ /** * Set cell height for grid axis labels. By default this is calculated from font * size. This option only applies to horizontal axes. * * @sample gantt/grid-axis/cellheight * Gant chart with custom cell height * @type {number} * @apioption xAxis.grid.cellHeight */ ''; // detach doclets above /** * Get the largest label width and height. * * @private * @function Highcharts.Axis#getMaxLabelDimensions * * @param {Highcharts.Dictionary<Highcharts.Tick>} ticks * All the ticks on one axis. * * @param {Array<number|string>} tickPositions * All the tick positions on one axis. * * @return {Highcharts.SizeObject} * Object containing the properties height and width. * * @todo Move this to the generic axis implementation, as it is used there. */ Axis.prototype.getMaxLabelDimensions = function (ticks, tickPositions) { var dimensions = { width: 0, height: 0 }; tickPositions.forEach(function (pos) { var tick = ticks[pos], tickHeight = 0, tickWidth = 0, label; if (isObject(tick)) { label = isObject(tick.label) ? tick.label : {}; // Find width and height of tick tickHeight = label.getBBox ? label.getBBox().height : 0; if (label.textStr) { // Set the tickWidth same as the label width after ellipsis // applied #10281 tickWidth = Math.round(label.getBBox().width); } // Update the result if width and/or height are larger dimensions.height = Math.max(tickHeight, dimensions.height); dimensions.width = Math.max(tickWidth, dimensions.width); } }); return dimensions; }; // Adds week date format H.dateFormats.W = function (timestamp) { var d = new this.Date(timestamp); var firstDay = (this.get('Day', d) + 6) % 7; var thursday = new this.Date(d.valueOf()); this.set('Date', thursday, this.get('Date', d) - firstDay + 3); var firstThursday = new this.Date(this.get('FullYear', thursday), 0, 1); if (this.get('Day', firstThursday) !== 4) { this.set('Month', d, 0); this.set('Date', d, 1 + (11 - this.get('Day', firstThursday)) % 7); } return (1 + Math.floor((thursday.valueOf() - firstThursday.valueOf()) / 604800000)).toString(); }; // First letter of the day of the week, e.g. 'M' for 'Monday'. H.dateFormats.E = function (timestamp) { return dateFormat('%a', timestamp, true).charAt(0); }; /* eslint-disable no-invalid-this */ addEvent(Chart, 'afterSetChartSize', function () { this.axes.forEach(function (axis) { (axis.grid && axis.grid.columns || []).forEach(function (column) { column.setAxisSize(); column.setAxisTranslation(); }); }); }); // Center tick labels in cells. addEvent(Tick, 'afterGetLabelPosition', function (e) { 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, // verticalAlign is currently not supported for axis.labels. verticalAlign = 'middle', // labelOpts.verticalAlign, side = GridAxis.Side[axis.side], tickmarkOffset = e.tickmarkOffset, tickPositions = axis.tickPositions, tickPos = tick.pos - tickmarkOffset, nextTickPos = (isNumber(tickPositions[e.index + 1]) ? tickPositions[e.index + 1] - tickmarkOffset : 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; // Only center tick labels in grid axes if (gridOptions.enabled === true) { // Calculate top and bottom positions of the cell. if (side === 'top') { bottom = axis.top + axis.offset; top = bottom - tickWidth; } else if (side === 'bottom') { top = chart.chartHeight - axis.bottom + axis.offset; bottom = top + tickWidth; } else { bottom = axis.top + axis.len - axis.translate(reversed ? nextTickPos : tickPos); top = axis.top + axis.len - axis.translate(reversed ? tickPos : nextTickPos); } // Calculate left and right positions of the cell. if (side === 'right') { left = chart.chartWidth - axis.right + axis.offset; right = left + tickWidth; } else if (side === 'left') { right = axis.left + axis.offset; left = right - tickWidth; } else { left = Math.round(axis.left + axis.translate(reversed ? nextTickPos : tickPos)) - crispCorr; right = Math.round(axis.left + axis.translate(reversed ? tickPos : nextTickPos)) - crispCorr; } tick.slotWidth = right - left; // Calculate the positioning of the label based on // alignment. e.pos.x = (align === 'left' ? left : align === 'right' ? right : left + ((right - left) / 2) // default to center ); e.pos.y = (verticalAlign === 'top' ? top : verticalAlign === 'bottom' ? bottom : top + ((bottom - top) / 2) // default to middle ); lblMetrics = chart.renderer.fontMetrics(labelOpts.style.fontSize, label.element); labelHeight = label.getBBox().height; // Adjustment to y position to align the label correctly. // Would be better to have a setter or similar for this. if (!labelOpts.useHTML) { lines = Math.round(labelHeight / lblMetrics.h); e.pos.y += ( // Center the label // TODO: why does this actually center the label? ((lblMetrics.b - (lblMetrics.h - lblMetrics.f)) / 2) + // Adjust for height of additional lines. -(((lines - 1) * lblMetrics.h) / 2)); } else { e.pos.y += ( // Readjust yCorr in htmlUpdateTransform lblMetrics.b + // Adjust for height of html label -(labelHeight / 2)); } e.pos.x += (axis.horiz && labelOpts.x || 0); } }); /* eslint-enable no-invalid-this */ /** * Additions for grid axes. * @private * @class */ var GridAxisAdditions = /** @class */ (function () { /* * * * Constructors * * */ function GridAxisAdditions(axis) { this.axis = axis; } /* * * * Functions * * */ /** * Checks if an axis is the outer axis in its dimension. Since * axes are placed outwards in order, the axis with the highest * index is the outermost axis. * * Example: If there are multiple x-axes at the top of the chart, * this function returns true if the axis supplied is the last * of the x-axes. * * @private * * @return {boolean} * True if the axis is the outermost axis in its dimension; false if * not. */ GridAxisAdditions.prototype.isOuterAxis = function () { var axis = this.axis; var chart = axis.chart; var columnIndex = axis.grid.columnIndex; var columns = (axis.linkedParent && axis.linkedParent.grid.columns || axis.grid.columns); var parentAxis = columnIndex ? axis.linkedParent : axis; var thisIndex = -1, lastIndex = 0; chart[axis.coll].forEach(function (otherAxis, index) { if (otherAxis.side === axis.side && !otherAxis.options.isInternal) { lastIndex = index; if (otherAxis === parentAxis) { // Get the index of the axis in question thisIndex = index; } } }); return (lastIndex === thisIndex && (isNumber(columnIndex) ? columns.length === columnIndex : true)); }; return GridAxisAdditions; }()); /** * Axis with grid support. * @private * @class */ var GridAxis = /** @class */ (function () { function GridAxis() { } /* * * * Static Functions * * */ /* eslint-disable valid-jsdoc */ /** * Extends axis class with grid support. * @private */ GridAxis.compose = function (AxisClass) { Axis.keepProps.push('grid'); wrap(AxisClass.prototype, 'unsquish', GridAxis.wrapUnsquish); // Add event handlers addEvent(AxisClass, 'init', GridAxis.onInit); addEvent(AxisClass, 'afterGetOffset', GridAxis.onAfterGetOffset); addEvent(AxisClass, 'afterGetTitlePosition', GridAxis.onAfterGetTitlePosition); addEvent(AxisClass, 'afterInit', GridAxis.onAfterInit); addEvent(AxisClass, 'afterRender', GridAxis.onAfterRender); addEvent(AxisClass, 'afterSetAxisTranslation', GridAxis.onAfterSetAxisTranslation); addEvent(AxisClass, 'afterSetOptions', GridAxis.onAfterSetOptions); addEvent(AxisClass, 'afterSetOptions', GridAxis.onAfterSetOptions2); addEvent(AxisClass, 'afterSetScale', GridAxis.onAfterSetScale); addEvent(AxisClass, 'afterTickSize', GridAxis.onAfterTickSize); addEvent(AxisClass, 'trimTicks', GridAxis.onTrimTicks); addEvent(AxisClass, 'destroy', GridAxis.onDestroy); }; /** * Handle columns and getOffset. * @private */ GridAxis.onAfterGetOffset = function () { var grid = this.grid; (grid && grid.columns || []).forEach(function (column) { column.getOffset(); }); }; /** * @private */ GridAxis.onAfterGetTitlePosition = function (e) { var axis = this; var options = axis.options; var gridOptions = options.grid || {}; if (gridOptions.enabled === true) { // compute anchor points for each of the title align options 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; var tickSize = axis.tickSize(); var titleWidth = title && title.getBBox().width; var xOption = axisTitleOptions.x || 0; var yOption = axisTitleOptions.y || 0; var titleMargin = pick(axisTitleOptions.margin, horiz ? 5 : 10); var titleFontSize = axis.chart.renderer.fontMetrics(axisTitleOptions.style && axisTitleOptions.style.fontSize, title).f; var crispCorr = tickSize ? tickSize[0] / 2 : 0; // TODO account for alignment // the position in the perpendicular direction of the axis var offAxis = ((horiz ? axisTop + axisHeight : axisLeft) + (horiz ? 1 : -1) * // horizontal axis reverses the margin (opposite ? -1 : 1) * // so does opposite axes crispCorr + (axis.side === GridAxis.Side.bottom ? titleFontSize : 0)); e.titlePosition.x = horiz ? axisLeft - titleWidth / 2 - titleMargin + xOption : offAxis + (opposite ? axisWidth : 0) + offset + xOption; e.titlePosition.y = horiz ? (offAxis - (opposite ? axisHeight : 0) + (opposite ? titleFontSize : -titleFontSize) / 2 + offset + yOption) : axisTop - titleMargin + yOption; } }; /** * @private */ GridAxis.onAfterInit = function () { var axis = this; var chart = axis.chart, _a = axis.options.grid, gridOptions = _a === void 0 ? {} : _a, userOptions = axis.userOptions; if (gridOptions.enabled) { applyGridOptions(axis); /* eslint-disable no-invalid-this */ // TODO: wrap the axis instead wrap(axis, 'labelFormatter', function (proceed) { var _a = this, axis = _a.axis, value = _a.value; var tickPos = axis.tickPositions;