/** * @license Highcharts JS v11.4.1 (2024-04-04) * * Highcharts funnel module * * (c) 2010-2024 Torstein Honsi * * License: www.highcharts.com/license */ (function (factory) { if (typeof module === 'object' && module.exports) { factory['default'] = factory; module.exports = factory; } else if (typeof define === 'function' && define.amd) { define('highcharts/modules/funnel', ['highcharts'], function (Highcharts) { factory(Highcharts); factory.Highcharts = Highcharts; return factory; }); } else { factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined); } }(function (Highcharts) { 'use strict'; var _modules = Highcharts ? Highcharts._modules : {}; function _registerModule(obj, path, args, fn) { if (!obj.hasOwnProperty(path)) { obj[path] = fn.apply(null, args); if (typeof CustomEvent === 'function') { window.dispatchEvent(new CustomEvent( 'HighchartsModuleLoaded', { detail: { path: path, module: obj[path] } } )); } } } _registerModule(_modules, 'Series/Funnel/FunnelSeriesDefaults.js', [], function () { /* * * * Highcharts funnel module * * (c) 2010-2024 Torstein Honsi * * License: www.highcharts.com/license * * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!! * * */ /* * * * API Options * * */ /** * Funnel charts are a type of chart often used to visualize stages in a * sales project, where the top are the initial stages with the most * clients. It requires that the modules/funnel.js file is loaded. * * @sample highcharts/demo/funnel/ * Funnel demo * * @extends plotOptions.pie * @excluding innerSize,size,dataSorting * @product highcharts * @requires modules/funnel * @optionparent plotOptions.funnel */ const FunnelSeriesDefaults = { /** * Initial animation is by default disabled for the funnel chart. */ animation: false, /** * The corner radius of the border surrounding all points or series. A * number signifies pixels. A percentage string, like for example `50%`, * signifies a size relative to the series width. * * @sample highcharts/plotoptions/funnel-border-radius * Funnel and pyramid with rounded border */ borderRadius: 0, /** * The center of the series. By default, it is centered in the middle * of the plot area, so it fills the plot area height. * * @type {Array} * @default ["50%", "50%"] * @since 3.0 */ center: ['50%', '50%'], /** * The width of the funnel compared to the width of the plot area, * or the pixel width if it is a number. * * @type {number|string} * @since 3.0 */ width: '90%', /** * The width of the neck, the lower part of the funnel. A number defines * pixel width, a percentage string defines a percentage of the plot * area width. * * @sample {highcharts} highcharts/demo/funnel/ * Funnel demo * * @type {number|string} * @since 3.0 */ neckWidth: '30%', /** * The height of the funnel or pyramid. If it is a number it defines * the pixel height, if it is a percentage string it is the percentage * of the plot area height. * * @sample {highcharts} highcharts/demo/funnel/ * Funnel demo * * @type {number|string} * @since 3.0 */ height: '100%', /** * The height of the neck, the lower part of the funnel. A number * defines pixel width, a percentage string defines a percentage of the * plot area height. * * @type {number|string} */ neckHeight: '25%', /** * A reversed funnel has the widest area down. A reversed funnel with * no neck width and neck height is a pyramid. * * @since 3.0.10 */ reversed: false, /** * To avoid adapting the data label size in Pie.drawDataLabels. * @ignore-option */ size: true, dataLabels: { connectorWidth: 1, verticalAlign: 'middle' }, /** * Options for the series states. */ states: { /** * @excluding halo, marker, lineWidth, lineWidthPlus * @apioption plotOptions.funnel.states.hover */ /** * Options for a selected funnel item. * * @excluding halo, marker, lineWidth, lineWidthPlus */ select: { /** * A specific color for the selected point. * * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject} */ color: "#cccccc" /* Palette.neutralColor20 */, /** * A specific border color for the selected point. * * @type {Highcharts.ColorString} */ borderColor: "#000000" /* Palette.neutralColor100 */ } } }; /** * A `funnel` series. If the [type](#series.funnel.type) option is * not specified, it is inherited from [chart.type](#chart.type). * * @extends series,plotOptions.funnel * @excluding dataParser, dataURL, stack, xAxis, yAxis, dataSorting, * boostBlending, boostThreshold * @product highcharts * @requires modules/funnel * @apioption series.funnel */ /** * An array of data points for the series. For the `funnel` series type, * points can be given in the following ways: * * 1. An array of numerical values. In this case, the numerical values * will be interpreted as `y` options. Example: * * ```js * data: [0, 5, 3, 5] * ``` * * 2. An array of objects with named values. The following snippet shows only a * few settings, see the complete options set below. If the total number of data * points exceeds the series' [turboThreshold](#series.funnel.turboThreshold), * this option is not available. * * ```js * data: [{ * y: 3, * name: "Point2", * color: "#00FF00" * }, { * y: 1, * name: "Point1", * color: "#FF00FF" * }] * ``` * * @sample {highcharts} highcharts/chart/reflow-true/ * Numerical values * @sample {highcharts} highcharts/series/data-array-of-arrays/ * Arrays of numeric x and y * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/ * Arrays of datetime x and y * @sample {highcharts} highcharts/series/data-array-of-name-value/ * Arrays of point.name and y * @sample {highcharts} highcharts/series/data-array-of-objects/ * Config objects * * @type {Array} * @extends series.pie.data * @excluding sliced * @product highcharts * @apioption series.funnel.data */ ''; // Keeps doclets above separate /* * * * Default Export * * */ return FunnelSeriesDefaults; }); _registerModule(_modules, 'Series/Funnel/FunnelSeries.js', [_modules['Series/Funnel/FunnelSeriesDefaults.js'], _modules['Core/Globals.js'], _modules['Extensions/BorderRadius.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (FunnelSeriesDefaults, H, BorderRadius, SeriesRegistry, U) { /* * * * Highcharts funnel module * * (c) 2010-2024 Torstein Honsi * * License: www.highcharts.com/license * * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!! * * */ const { composed, noop } = H; const { column: ColumnSeries, pie: PieSeries } = SeriesRegistry.seriesTypes; const { addEvent, correctFloat, extend, fireEvent, isArray, merge, pick, pushUnique, relativeLength, splat } = U; /* * * * Constants * * */ const baseAlignDataLabel = SeriesRegistry.series.prototype.alignDataLabel; /* * * * Functions * * */ /** * Get positions - either an integer or a percentage string must be * given. * @private * @param {number|string|undefined} length * Length * @param {number} relativeTo * Relative factor * @return {number} * Relative position */ function getLength(length, relativeTo) { return (/%$/).test(length) ? relativeTo * parseInt(length, 10) / 100 : parseInt(length, 10); } /* * * * Class * * */ /** * @private * @class * @name Highcharts.seriesTypes.funnel * * @augments Highcharts.Series */ class FunnelSeries extends PieSeries { /* * * * Functions * * */ /* eslint-disable valid-jsdoc */ /** * @private */ alignDataLabel(point, dataLabel, options, alignTo, isNew) { const series = point.series, reversed = series.options.reversed, dlBox = point.dlBox || point.shapeArgs, { align, padding = 0, verticalAlign } = options, inside = ((series.options || {}).dataLabels || {}).inside, centerY = series.center[1], plotY = point.plotY || 0, pointPlotY = (reversed ? 2 * centerY - plotY : plotY), // #16176: Only SVGLabel has height set dataLabelHeight = dataLabel.height ?? dataLabel.getBBox().height, widthAtLabel = series.getWidthAt(pointPlotY - dlBox.height / 2 + dataLabelHeight), offset = verticalAlign === 'middle' ? (dlBox.topWidth - dlBox.bottomWidth) / 4 : (widthAtLabel - dlBox.bottomWidth) / 2; let y = dlBox.y, x = dlBox.x; if (verticalAlign === 'middle') { y = dlBox.y - dlBox.height / 2 + dataLabelHeight / 2; } else if (verticalAlign === 'top') { y = dlBox.y - dlBox.height + dataLabelHeight + padding; } if (verticalAlign === 'top' && !reversed || verticalAlign === 'bottom' && reversed || verticalAlign === 'middle') { if (align === 'right') { x = dlBox.x - padding + offset; } else if (align === 'left') { x = dlBox.x + padding - offset; } } alignTo = { x: x, y: reversed ? y - dlBox.height : y, width: dlBox.bottomWidth, height: dlBox.height }; options.verticalAlign = 'bottom'; if (inside) { // If the distance were positive (as default), the overlapping // labels logic would skip these labels and they would be allowed // to overlap. options.distance = void 0; } // Call the parent method if (inside && point.visible) { baseAlignDataLabel.call(series, point, dataLabel, options, alignTo, isNew); } if (inside) { if (!point.visible && point.dataLabel) { // Avoid animation from top point.dataLabel.placed = false; } // If label is inside and we have contrast, set it: if (point.contrastColor) { dataLabel.css({ color: point.contrastColor }); } } } /** * Extend the data label method. * @private */ drawDataLabels() { (splat(this.options.dataLabels)[0].inside ? ColumnSeries : PieSeries).prototype.drawDataLabels.call(this); } /** @private */ getDataLabelPosition(point, distance) { const y = point.plotY || 0, sign = point.half ? 1 : -1, x = this.getX(y, !!point.half, point); return { distance, // Initial position of the data label - it's utilized for finding // the final position for the label natural: { x: 0, y }, computed: { // Used for generating connector path - initialized later in // drawDataLabels function x: undefined, y: undefined }, // Left - funnel on the left side of the data label // Right - funnel on the right side of the data label alignment: point.half ? 'right' : 'left', connectorPosition: { breakAt: { x: x + (distance - 5) * sign, y }, touchingSliceAt: { x: x + distance * sign, y } } }; } /** * Overrides the pie translate method. * @private */ translate() { const series = this, chart = series.chart, options = series.options, reversed = options.reversed, ignoreHiddenPoint = options.ignoreHiddenPoint, borderRadiusObject = BorderRadius.optionsToObject(options.borderRadius), plotWidth = chart.plotWidth, plotHeight = chart.plotHeight, center = options.center, centerX = getLength(center[0], plotWidth), centerY = getLength(center[1], plotHeight), width = getLength(options.width, plotWidth), height = getLength(options.height, plotHeight), neckWidth = getLength(options.neckWidth, plotWidth), neckHeight = getLength(options.neckHeight, plotHeight), neckY = (centerY - height / 2) + height - neckHeight, points = series.points, borderRadius = relativeLength(borderRadiusObject.radius, width), radiusScope = borderRadiusObject.scope, half = (options.dataLabels.position === 'left' ? 1 : 0), roundingFactors = (angle) => { const tan = Math.tan(angle / 2), cosA = Math.cos(alpha), sinA = Math.sin(alpha); let r = borderRadius, t = r / tan, k = Math.tan((Math.PI - angle) / 3.2104); if (t > maxT) { t = maxT; r = t * tan; } k *= r; return { dx: [t * cosA, (t - k) * cosA, t - k, t], dy: [t * sinA, (t - k) * sinA, t - k, t] .map((i) => (reversed ? -i : i)) }; }; let sum = 0, cumulative = 0, // Start at top tempWidth, path, fraction, alpha, // The angle between top and left point's edges maxT, x1, y1, x2, x3, y3, x4, y5; series.getWidthAt = function (y) { const top = (centerY - height / 2); return (y > neckY || height === neckHeight) ? neckWidth : neckWidth + (width - neckWidth) * (1 - (y - top) / (height - neckHeight)); }; series.getX = function (y, half, point) { return centerX + (half ? -1 : 1) * ((series.getWidthAt(reversed ? 2 * centerY - y : y) / 2) + (point.dataLabel?.dataLabelPosition?.distance ?? relativeLength(this.options.dataLabels?.distance || 0, width))); }; // Expose series.center = [centerX, centerY, height]; series.centerX = centerX; /* Individual point coordinate naming: x1,y1 _________________ x2,y1 \ / \ / \ / \ / \ / x3,y3 _________ x4,y3 Additional for the base of the neck: | | | | | | x3,y5 _________ x4,y5 */ // get the total sum for (const point of points) { if (point.y && point.isValid() && (!ignoreHiddenPoint || point.visible !== false)) { sum += point.y; } } for (const point of points) { // Set start and end positions y5 = null; fraction = sum ? point.y / sum : 0; y1 = centerY - height / 2 + cumulative * height; y3 = y1 + fraction * height; tempWidth = series.getWidthAt(y1); x1 = centerX - tempWidth / 2; x2 = x1 + tempWidth; tempWidth = series.getWidthAt(y3); x3 = centerX - tempWidth / 2; x4 = x3 + tempWidth; // The entire point is within the neck if (correctFloat(y1) >= neckY) { x1 = x3 = centerX - neckWidth / 2; x2 = x4 = centerX + neckWidth / 2; // The base of the neck } else if (y3 > neckY) { y5 = y3; tempWidth = series.getWidthAt(neckY); x3 = centerX - tempWidth / 2; x4 = x3 + tempWidth; y3 = neckY; } if (reversed) { y1 = 2 * centerY - y1; y3 = 2 * centerY - y3; if (y5 !== null) { y5 = 2 * centerY - y5; } } if (borderRadius && (radiusScope === 'point' || point.index === 0 || point.index === points.length - 1 || y5 !== null)) { // Creating the path of funnel points with rounded corners // (#18839) const h = Math.abs(y3 - y1), xSide = x2 - x4, lBase = x4 - x3, lSide = Math.sqrt(xSide * xSide + h * h); // If xSide equals zero, return Infinity to avoid dividing // by zero (#20319) alpha = Math.atan(xSide !== 0 ? h / xSide : Infinity); maxT = lSide / 2; if (y5 !== null) { maxT = Math.min(maxT, Math.abs(y5 - y3) / 2); } if (lBase >= 1) { maxT = Math.min(maxT, lBase / 2); } // Creating a point base let f = roundingFactors(alpha); if (radiusScope === 'stack' && point.index !== 0) { path = [ ['M', x1, y1], ['L', x2, y1] ]; } else { path = [ ['M', x1 + f.dx[0], y1 + f.dy[0]], [ 'C', x1 + f.dx[1], y1 + f.dy[1], x1 + f.dx[2], y1, x1 + f.dx[3], y1 ], ['L', x2 - f.dx[3], y1], [ 'C', x2 - f.dx[2], y1, x2 - f.dx[1], y1 + f.dy[1], x2 - f.dx[0], y1 + f.dy[0] ] ]; } if (y5 !== null) { // Closure of point with extension const fr = roundingFactors(Math.PI / 2); f = roundingFactors(Math.PI / 2 + alpha); path.push(['L', x4 + f.dx[0], y3 - f.dy[0]], [ 'C', x4 + f.dx[1], y3 - f.dy[1], x4, y3 + f.dy[2], x4, y3 + f.dy[3] ]); if (radiusScope === 'stack' && point.index !== points.length - 1) { path.push(['L', x4, y5], ['L', x3, y5]); } else { path.push(['L', x4, y5 - fr.dy[3]], [ 'C', x4, y5 - fr.dy[2], x4 - fr.dx[2], y5, x4 - fr.dx[3], y5 ], ['L', x3 + fr.dx[3], y5], [ 'C', x3 + fr.dx[2], y5, x3, y5 - fr.dy[2], x3, y5 - fr.dy[3] ]); } path.push(['L', x3, y3 + f.dy[3]], [ 'C', x3, y3 + f.dy[2], x3 - f.dx[1], y3 - f.dy[1], x3 - f.dx[0], y3 - f.dy[0] ]); } else if (lBase >= 1) { // Closure of point without extension f = roundingFactors(Math.PI - alpha); if (radiusScope === 'stack' && point.index === 0) { path.push(['L', x4, y3], ['L', x3, y3]); } else { path.push(['L', x4 + f.dx[0], y3 - f.dy[0]], [ 'C', x4 + f.dx[1], y3 - f.dy[1], x4 - f.dx[2], y3, x4 - f.dx[3], y3 ], ['L', x3 + f.dx[3], y3], [ 'C', x3 + f.dx[2], y3, x3 - f.dx[1], y3 - f.dy[1], x3 - f.dx[0], y3 - f.dy[0] ]); } } else { // Creating a rounded tip of the "pyramid" f = roundingFactors(Math.PI - alpha * 2); path.push(['L', x3 + f.dx[0], y3 - f.dy[0]], [ 'C', x3 + f.dx[1], y3 - f.dy[1], x3 - f.dx[1], y3 - f.dy[1], x3 - f.dx[0], y3 - f.dy[0] ]); } } else { // Creating the path of funnel points without rounded corners path = [ ['M', x1, y1], ['L', x2, y1], ['L', x4, y3] ]; if (y5 !== null) { path.push(['L', x4, y5], ['L', x3, y5]); } path.push(['L', x3, y3]); } path.push(['Z']); // Prepare for using shared dr point.shapeType = 'path'; point.shapeArgs = { d: path }; // For tooltips and data labels point.percentage = fraction * 100; point.plotX = centerX; point.plotY = (y1 + (y5 || y3)) / 2; // Placement of tooltips and data labels point.tooltipPos = [ centerX, point.plotY ]; point.dlBox = { x: x3, y: y1, topWidth: x2 - x1, bottomWidth: x4 - x3, height: Math.abs(pick(y5, y3) - y1), width: NaN }; // Slice is a noop on funnel points point.slice = noop; // Mimicking pie data label placement logic point.half = half; if (point.isValid() && (!ignoreHiddenPoint || point.visible !== false)) { cumulative += fraction; } } fireEvent(series, 'afterTranslate'); } /** * Funnel items don't have angles (#2289). * @private */ sortByAngle(points) { points.sort((a, b) => (a.plotY - b.plotY)); } } /* * * * Static Properties * * */ FunnelSeries.defaultOptions = merge(PieSeries.defaultOptions, FunnelSeriesDefaults); extend(FunnelSeries.prototype, { animate: noop }); /* * * * Class Namespace * * */ (function (FunnelSeries) { /* * * * Functions * * */ /** @private */ function compose(ChartClass) { if (pushUnique(composed, 'FunnelSeries')) { addEvent(ChartClass, 'afterHideAllOverlappingLabels', onChartAfterHideAllOverlappingLabels); } } FunnelSeries.compose = compose; /** @private */ function onChartAfterHideAllOverlappingLabels() { for (const series of this.series) { let dataLabelsOptions = series.options && series.options.dataLabels; if (isArray(dataLabelsOptions)) { dataLabelsOptions = dataLabelsOptions[0]; } if (series.is('pie') && series.placeDataLabels && dataLabelsOptions && !dataLabelsOptions.inside) { series.placeDataLabels(); } } } })(FunnelSeries || (FunnelSeries = {})); SeriesRegistry.registerSeriesType('funnel', FunnelSeries); /* * * * Default Export * * */ return FunnelSeries; }); _registerModule(_modules, 'Series/Pyramid/PyramidSeriesDefaults.js', [], function () { /* * * * Highcharts funnel module * * (c) 2010-2024 Torstein Honsi * * License: www.highcharts.com/license * * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!! * * */ /* * * * API Options * * */ const PyramidSeriesDefaults = { /** * The pyramid neck width is zero by default, as opposed to the funnel, * which shares the same layout logic. * * @since 3.0.10 */ neckWidth: '0%', /** * The pyramid neck width is zero by default, as opposed to the funnel, * which shares the same layout logic. * * @since 3.0.10 */ neckHeight: '0%', /** * The pyramid is reversed by default, as opposed to the funnel, which * shares the layout engine, and is not reversed. * * @since 3.0.10 */ reversed: true }; /** * A `pyramid` series. If the [type](#series.pyramid.type) option is * not specified, it is inherited from [chart.type](#chart.type). * * @extends series,plotOptions.pyramid * @excluding dataParser, dataURL, stack, xAxis, yAxis, dataSorting, * boostThreshold, boostBlending * @product highcharts * @requires modules/funnel * @apioption series.pyramid */ /** * An array of data points for the series. For the `pyramid` series * type, points can be given in the following ways: * * 1. An array of numerical values. In this case, the numerical values will be * interpreted as `y` options. Example: * ```js * data: [0, 5, 3, 5] * ``` * * 2. An array of objects with named values. The following snippet shows only a * few settings, see the complete options set below. If the total number of * data points exceeds the series' * [turboThreshold](#series.pyramid.turboThreshold), this option is not * available. * ```js * data: [{ * y: 9, * name: "Point2", * color: "#00FF00" * }, { * y: 6, * name: "Point1", * color: "#FF00FF" * }] * ``` * * @sample {highcharts} highcharts/chart/reflow-true/ * Numerical values * @sample {highcharts} highcharts/series/data-array-of-objects/ * Config objects * * @type {Array} * @extends series.pie.data * @excluding sliced * @product highcharts * @apioption series.pyramid.data */ ''; // Keeps doclets above separate /* * * * Default Export * * */ return PyramidSeriesDefaults; }); _registerModule(_modules, 'Series/Pyramid/PyramidSeries.js', [_modules['Series/Funnel/FunnelSeries.js'], _modules['Series/Pyramid/PyramidSeriesDefaults.js'], _modules['Core/Series/SeriesRegistry.js'], _modules['Core/Utilities.js']], function (FunnelSeries, PyramidSeriesDefaults, SeriesRegistry, U) { /* * * * Highcharts funnel module * * (c) 2010-2024 Torstein Honsi * * License: www.highcharts.com/license * * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!! * * */ const { merge } = U; /* * * * Class * * */ /** * Pyramid series type. * * @private * @class * @name Highcharts.seriesTypes.pyramid * * @augments Highcharts.Series */ class PyramidSeries extends FunnelSeries { } /* * * * Static Properties * * */ /** * A pyramid series is a special type of funnel, without neck and reversed * by default. * * @sample highcharts/demo/pyramid/ * Pyramid chart * * @extends plotOptions.funnel * @product highcharts * @requires modules/funnel * @optionparent plotOptions.pyramid */ PyramidSeries.defaultOptions = merge(FunnelSeries.defaultOptions, PyramidSeriesDefaults); SeriesRegistry.registerSeriesType('pyramid', PyramidSeries); /* * * * Default Export * * */ return PyramidSeries; }); _registerModule(_modules, 'masters/modules/funnel.src.js', [_modules['Core/Globals.js'], _modules['Series/Funnel/FunnelSeries.js']], function (Highcharts, FunnelSeries) { const G = Highcharts; FunnelSeries.compose(G.Chart); return Highcharts; }); }));