/* * * * (c) 2010-2018 Grzegorz Blachlinski, Sebastian Bochan * * License: www.highcharts.com/license * * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!! * * */ 'use strict'; var _Globals = require('../parts/Globals.js'); var _Globals2 = _interopRequireDefault(_Globals); var _Utilities = require('../parts/Utilities.js'); var _Utilities2 = _interopRequireDefault(_Utilities); require('../parts/Axis.js'); require('../parts/Color.js'); require('../parts/Point.js'); require('../parts/Series.js'); require('../modules/networkgraph/layouts.js'); require('../modules/networkgraph/draggable-nodes.js'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var defined = _Utilities2.default.defined, isArray = _Utilities2.default.isArray, isNumber = _Utilities2.default.isNumber; /** * Formatter callback function. * * @callback Highcharts.SeriesPackedBubbleDataLabelsFormatterCallbackFunction * * @param {Highcharts.SeriesPackedBubbleDataLabelsFormatterContextObject|Highcharts.DataLabelsFormatterContextObject} this * Data label context to format * * @return {string} * Formatted data label text */ /** * Context for the formatter function. * * @interface Highcharts.SeriesPackedBubbleDataLabelsFormatterContextObject * @extends Highcharts.DataLabelsFormatterContextObject * @since 7.0.0 */ /** * The color of the node. * @name Highcharts.SeriesPackedBubbleDataLabelsFormatterContextObject#color * @type {Highcharts.ColorString} * @since 7.0.0 */ /** * The point (node) object. The node name, if defined, is available through * `this.point.name`. Arrays: `this.point.linksFrom` and `this.point.linksTo` * contains all nodes connected to this point. * @name Highcharts.SeriesPackedBubbleDataLabelsFormatterContextObject#point * @type {Highcharts.Point} * @since 7.0.0 */ /** * The ID of the node. * @name Highcharts.SeriesPackedBubbleDataLabelsFormatterContextObject#key * @type {string} * @since 7.0.0 */ /** * Data labels options * * @interface Highcharts.SeriesPackedBubbleDataLabelsOptionsObject * @extends Highcharts.DataLabelsOptionsObject * @since 7.0.0 */ /** * The * [format string](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting) * specifying what to show for _node_ in the networkgraph. In v7.0 defaults to * `{key}`, since v7.1 defaults to `undefined` and `formatter` is used instead. * @name Highcharts.SeriesPackedBubbleDataLabelsOptionsObject#format * @type {string|undefined} * @since 7.0.0 */ /** * Callback JavaScript function to format the data label for a node. Note that * if a `format` is defined, the format takes precedence and the formatter is * ignored. * @name Highcharts.SeriesPackedBubbleDataLabelsOptionsObject#formatter * @type {Highcharts.SeriesPackedBubbleDataLabelsFormatterCallbackFunction|undefined} * @since 7.0.0 */ /** * @name Highcharts.SeriesPackedBubbleDataLabelsOptionsObject#parentNodeFormat * @type {string|undefined} * @since 7.1.0 */ /** * Callback to format data labels for _parentNodes_. The `parentNodeFormat` * option takes precedence over the `parentNodeFormatter`. * @name Highcharts.SeriesPackedBubbleDataLabelsOptionsObject#parentNodeFormatter * @type {Highcharts.FormatterCallbackFunction|undefined} * @since 7.1.0 */ /** * Options for a _parentNode_ label text. * @sample highcharts/series-packedbubble/packed-dashboard * Dashboard with dataLabels on parentNodes * @name Highcharts.SeriesPackedBubbleDataLabelsOptionsObject#parentNodeTextPath * @type {Highcharts.SeriesPackedBubbleDataLabelsTextPathOptionsObject|undefined} * @since 7.1.0 */ /** * Options for a _node_ label text which should follow marker's shape. * **Note:** Only SVG-based renderer supports this option. * @see {@link Highcharts.SeriesPackedBubbleDataLabelsTextPath#linkTextPath} * @name Highcharts.SeriesPackedBubbleDataLabelsOptionsObject#textPath * @type {Highcharts.SeriesPackedBubbleDataLabelsTextPathOptionsObject|undefined} * @since 7.1.0 */ /** * **Note:** Only SVG-based renderer supports this option. * * @see {@link Highcharts.SeriesNetworkDataLabelsTextPath#linkTextPath} * @see {@link Highcharts.SeriesNetworkDataLabelsTextPath#textPath} * * @interface Highcharts.SeriesPackedBubbleDataLabelsTextPathOptionsObject * @since 7.1.0 */ /** * Presentation attributes for the text path. * @name Highcharts.SeriesPackedBubbleDataLabelsTextPathOptionsObject#attributes * @type {Highcharts.SVGAttributes|undefined} * @since 7.1.0 */ /** * Enable or disable `textPath` option for link's or marker's data labels. * @name Highcharts.SeriesPackedBubbleDataLabelsTextPathOptionsObject#enabled * @type {boolean|undefined} * @since 7.1.0 */ var seriesType = _Globals2.default.seriesType, Series = _Globals2.default.Series, Point = _Globals2.default.Point, pick = _Globals2.default.pick, addEvent = _Globals2.default.addEvent, Chart = _Globals2.default.Chart, color = _Globals2.default.Color, Reingold = _Globals2.default.layouts['reingold-fruchterman'], NetworkPoint = _Globals2.default.seriesTypes.bubble.prototype.pointClass, dragNodesMixin = _Globals2.default.dragNodesMixin; _Globals2.default.networkgraphIntegrations.packedbubble = { repulsiveForceFunction: function repulsiveForceFunction(d, k, node, repNode) { return Math.min(d, (node.marker.radius + repNode.marker.radius) / 2); }, barycenter: function barycenter() { var layout = this, gravitationalConstant = layout.options.gravitationalConstant, box = layout.box, nodes = layout.nodes, centerX, centerY; nodes.forEach(function (node) { if (layout.options.splitSeries && !node.isParentNode) { centerX = node.series.parentNode.plotX; centerY = node.series.parentNode.plotY; } else { centerX = box.width / 2; centerY = box.height / 2; } if (!node.fixedPosition) { node.plotX -= (node.plotX - centerX) * gravitationalConstant / (node.mass * Math.sqrt(nodes.length)); node.plotY -= (node.plotY - centerY) * gravitationalConstant / (node.mass * Math.sqrt(nodes.length)); } }); }, repulsive: function repulsive(node, force, distanceXY, repNode) { var factor = force * this.diffTemperature / node.mass / node.degree, x = distanceXY.x * factor, y = distanceXY.y * factor; if (!node.fixedPosition) { node.plotX += x; node.plotY += y; } if (!repNode.fixedPosition) { repNode.plotX -= x; repNode.plotY -= y; } }, integrate: _Globals2.default.networkgraphIntegrations.verlet.integrate, getK: _Globals2.default.noop }; _Globals2.default.layouts.packedbubble = _Globals2.default.extendClass(Reingold, { beforeStep: function beforeStep() { if (this.options.marker) { this.series.forEach(function (series) { if (series) { series.calculateParentRadius(); } }); } }, setCircularPositions: function setCircularPositions() { var layout = this, box = layout.box, nodes = layout.nodes, nodesLength = nodes.length + 1, angle = 2 * Math.PI / nodesLength, centerX, centerY, radius = layout.options.initialPositionRadius; nodes.forEach(function (node, index) { if (layout.options.splitSeries && !node.isParentNode) { centerX = node.series.parentNode.plotX; centerY = node.series.parentNode.plotY; } else { centerX = box.width / 2; centerY = box.height / 2; } node.plotX = node.prevX = pick(node.plotX, centerX + radius * Math.cos(node.index || index * angle)); node.plotY = node.prevY = pick(node.plotY, centerY + radius * Math.sin(node.index || index * angle)); node.dispX = 0; node.dispY = 0; }); }, repulsiveForces: function repulsiveForces() { var layout = this, force, distanceR, distanceXY, bubblePadding = layout.options.bubblePadding; layout.nodes.forEach(function (node) { node.degree = node.mass; node.neighbours = 0; layout.nodes.forEach(function (repNode) { force = 0; if ( // Node can not repulse itself: node !== repNode && // Only close nodes affect each other: // Not dragged: !node.fixedPosition && (layout.options.seriesInteraction || node.series === repNode.series)) { distanceXY = layout.getDistXY(node, repNode); distanceR = layout.vectorLength(distanceXY) - (node.marker.radius + repNode.marker.radius + bubblePadding); // TODO padding configurable if (distanceR < 0) { node.degree += 0.01; node.neighbours++; force = layout.repulsiveForce(-distanceR / Math.sqrt(node.neighbours), layout.k, node, repNode); } layout.force('repulsive', node, force * repNode.mass, distanceXY, repNode, distanceR); } }); }); }, applyLimitBox: function applyLimitBox(node) { var layout = this, distanceXY, distanceR, factor = 0.01; // parentNodeLimit should be used together // with seriesInteraction: false if (layout.options.splitSeries && !node.isParentNode && layout.options.parentNodeLimit) { distanceXY = layout.getDistXY(node, node.series.parentNode); distanceR = node.series.parentNodeRadius - node.marker.radius - layout.vectorLength(distanceXY); if (distanceR < 0 && distanceR > -2 * node.marker.radius) { node.plotX -= distanceXY.x * factor; node.plotY -= distanceXY.y * factor; } } Reingold.prototype.applyLimitBox.apply(this, arguments); }, isStable: function isStable() { return Math.abs(this.systemTemperature - this.prevSystemTemperature) < 0.00001 || this.temperature <= 0 || // In first iteration system does not move: this.systemTemperature > 0 && this.systemTemperature / this.nodes.length < 0.02 && this.enableSimulation // Use only when simulation is enabled ; } }); /** * @private * @class * @name Highcharts.seriesTypes.packedbubble * * @extends Highcharts.Series */ seriesType('packedbubble', 'bubble', /** * A packed bubble series is a two dimensional series type, where each point * renders a value in X, Y position. Each point is drawn as a bubble * where the bubbles don't overlap with each other and the radius * of the bubble relates to the value. * Requires `highcharts-more.js`. * * @sample highcharts/demo/packed-bubble/ * Packed bubble chart * @sample highcharts/demo/packed-bubble-split/ * Split packed bubble chart * @extends plotOptions.bubble * @excluding connectEnds, connectNulls, jitter, keys, pointPlacement, * sizeByAbsoluteValue, step, xAxis, yAxis, zMax, zMin * @product highcharts * @since 7.0.0 * @optionparent plotOptions.packedbubble */ { /** * Minimum bubble size. Bubbles will automatically size between the * `minSize` and `maxSize` to reflect the value of each bubble. * Can be either pixels (when no unit is given), or a percentage of * the smallest one of the plot width and height, divided by the square * root of total number of points. * * @sample highcharts/plotoptions/bubble-size/ * Bubble size * * @type {number|string} * * @private */ minSize: '10%', /** * Maximum bubble size. Bubbles will automatically size between the * `minSize` and `maxSize` to reflect the value of each bubble. * Can be either pixels (when no unit is given), or a percentage of * the smallest one of the plot width and height, divided by the square * root of total number of points. * * @sample highcharts/plotoptions/bubble-size/ * Bubble size * * @type {number|string} * * @private */ maxSize: '50%', sizeBy: 'area', zoneAxis: 'y', tooltip: { pointFormat: 'Value: {point.value}' }, /** * Flag to determine if nodes are draggable or not. Available for * graph with useSimulation set to true only. * * @since 7.1.0 * * @private */ draggable: true, /** * An option is giving a possibility to choose between using simulation * for calculating bubble positions. These reflects in both animation * and final position of bubbles. Simulation is also adding options to * the series graph based on used layout. In case of big data sets, with * any performance issues, it is possible to disable animation and pack * bubble in a simple circular way. * * @sample highcharts/series-packedbubble/spiral/ * useSimulation set to false * * @since 7.1.0 * * @private */ useSimulation: true, /** * @type {Highcharts.SeriesPackedBubbleDataLabelsOptionsObject|Array} * @default {"formatter": function () { return this.point.value; }, "parentNodeFormatter": function () { return this.name; }, "parentNodeTextPath": {"enabled: true}, "padding": 0} * * @private */ dataLabels: { // eslint-disable-next-line valid-jsdoc /** @ignore-option */ formatter: function formatter() { return this.point.value; }, // eslint-disable-next-line valid-jsdoc /** @ignore-option */ parentNodeFormatter: function parentNodeFormatter() { return this.name; }, /** @ignore-option */ parentNodeTextPath: { enabled: true }, /** @ignore-option */ padding: 0 }, /** * Options for layout algorithm when simulation is enabled. Inside there * are options to change the speed, padding, initial bubbles positions * and more. * * @extends plotOptions.networkgraph.layoutAlgorithm * @excluding approximation, attractiveForce, repulsiveForce, theta * @since 7.1.0 * * @private */ layoutAlgorithm: { /** * Initial layout algorithm for positioning nodes. Can be one of * the built-in options ("circle", "random") or a function where * positions should be set on each node (`this.nodes`) as * `node.plotX` and `node.plotY`. * * @sample highcharts/series-networkgraph/initial-positions/ * Initial positions with callback * * @type {"circle"|"random"|Function} */ initialPositions: 'circle', /** * @sample highcharts/series-packedbubble/initial-radius/ * Initial radius set to 200 * * @extends plotOptions.networkgraph.layoutAlgorithm.initialPositionRadius * @excluding states */ initialPositionRadius: 20, /** * The distance between two bubbles, when the algorithm starts to * treat two bubbles as overlapping. The `bubblePadding` is also the * expected distance between all the bubbles on simulation end. */ bubblePadding: 5, /** * Whether bubbles should interact with their parentNode to keep * them inside. */ parentNodeLimit: false, /** * Whether series should interact with each other or not. When * `parentNodeLimit` is set to true, thi option should be set to * false to avoid sticking points in wrong series parentNode. */ seriesInteraction: true, /** * In case of split series, this option allows user to drag and * drop points between series, for changing point related series. * * @sample highcharts/series-packedbubble/packed-dashboard/ * Example of drag'n drop bubbles for bubble kanban */ dragBetweenSeries: false, /** * Layout algorithm options for parent nodes. * * @extends plotOptions.networkgraph.layoutAlgorithm * @excluding approximation, attractiveForce, enableSimulation, * repulsiveForce, theta */ parentNodeOptions: { maxIterations: 400, gravitationalConstant: 0.03, maxSpeed: 50, initialPositionRadius: 100, seriesInteraction: true, /** * Styling options for parentNodes markers. Similar to * line.marker options. * * @sample highcharts/series-packedbubble/parentnode-style/ * Bubble size * * @extends plotOptions.series.marker * @excluding states */ marker: { fillColor: null, fillOpacity: 1, lineWidth: 1, lineColor: null, symbol: 'circle' } }, enableSimulation: true, /** * Type of the algorithm used when positioning bubbles. * @ignore-option */ type: 'packedbubble', /** * Integration type. Integration determines how forces are applied * on particles. The `packedbubble` integration is based on * the networkgraph `verlet` integration, where the new position * is based on a previous position without velocity: * `newPosition += previousPosition - newPosition`. * * @sample highcharts/series-networkgraph/forces/ * * @ignore-option */ integration: 'packedbubble', maxIterations: 1000, /** * Whether to split series into individual groups or to mix all * series together. * * @since 7.1.0 * @default false */ splitSeries: false, /** * Max speed that node can get in one iteration. In terms of * simulation, it's a maximum translation (in pixels) that a node * can move (in both, x and y, dimensions). While `friction` is * applied on all nodes, max speed is applied only for nodes that * move very fast, for example small or disconnected ones. * * @see [layoutAlgorithm.integration](#series.networkgraph.layoutAlgorithm.integration) * * @see [layoutAlgorithm.friction](#series.networkgraph.layoutAlgorithm.friction) */ maxSpeed: 5, gravitationalConstant: 0.01, friction: -0.981 } }, { /** * An internal option used for allowing nodes dragging. * @private */ hasDraggableNodes: true, /** * Array of internal forces. Each force should be later defined in * integrations.js. * @private */ forces: ['barycenter', 'repulsive'], pointArrayMap: ['value'], pointValKey: 'value', isCartesian: false, axisTypes: [], noSharedTooltip: true, /* eslint-disable no-invalid-this, valid-jsdoc */ /** * Create a single array of all points from all series * @private * @param {Highcharts.Series} series Array of all series objects * @return {Array} Returns the array of all points. */ accumulateAllPoints: function accumulateAllPoints(series) { var chart = series.chart, allDataPoints = [], i, j; for (i = 0; i < chart.series.length; i++) { series = chart.series[i]; if (series.visible || !chart.options.chart.ignoreHiddenSeries) { // add data to array only if series is visible for (j = 0; j < series.yData.length; j++) { allDataPoints.push([null, null, series.yData[j], series.index, j, { id: j, marker: { radius: 0 } }]); } } } return allDataPoints; }, init: function init() { Series.prototype.init.apply(this, arguments); // When one series is modified, the others need to be recomputed addEvent(this, 'updatedData', function () { this.chart.series.forEach(function (s) { if (s.type === this.type) { s.isDirty = true; } }, this); }); return this; }, render: function render() { var series = this, dataLabels = []; Series.prototype.render.apply(this, arguments); // #10823 - dataLabels should stay visible // when enabled allowOverlap. if (!series.options.dataLabels.allowOverlap) { series.data.forEach(function (point) { if (isArray(point.dataLabels)) { point.dataLabels.forEach(function (dataLabel) { dataLabels.push(dataLabel); }); } }); series.chart.hideOverlappingLabels(dataLabels); } }, // Needed because of z-indexing issue if point is added in series.group setVisible: function setVisible() { var series = this; Series.prototype.setVisible.apply(series, arguments); if (series.parentNodeLayout && series.graph) { if (series.visible) { series.graph.show(); if (series.parentNode.dataLabel) { series.parentNode.dataLabel.show(); } } else { series.graph.hide(); series.parentNodeLayout.removeNode(series.parentNode); if (series.parentNode.dataLabel) { series.parentNode.dataLabel.hide(); } } } else if (series.layout) { if (series.visible) { series.layout.addNodes(series.points); } else { series.points.forEach(function (node) { series.layout.removeNode(node); }); } } }, // Packedbubble has two separate collecions of nodes if split, render // dataLabels for both sets: drawDataLabels: function drawDataLabels() { var textPath = this.options.dataLabels.textPath, points = this.points; // Render node labels: Series.prototype.drawDataLabels.apply(this, arguments); // Render parentNode labels: if (this.parentNode) { this.parentNode.formatPrefix = 'parentNode'; this.points = [this.parentNode]; this.options.dataLabels.textPath = this.options.dataLabels.parentNodeTextPath; Series.prototype.drawDataLabels.apply(this, arguments); // Restore nodes this.points = points; this.options.dataLabels.textPath = textPath; } }, /** * The function responsible for calculating series bubble' s bBox. * Needed because of exporting failure when useSimulation * is set to false * @private */ seriesBox: function seriesBox() { var series = this, chart = series.chart, data = series.data, max = Math.max, min = Math.min, radius, // bBox = [xMin, xMax, yMin, yMax] bBox = [chart.plotLeft, chart.plotLeft + chart.plotWidth, chart.plotTop, chart.plotTop + chart.plotHeight]; data.forEach(function (p) { if (defined(p.plotX) && defined(p.plotY) && p.marker.radius) { radius = p.marker.radius; bBox[0] = min(bBox[0], p.plotX - radius); bBox[1] = max(bBox[1], p.plotX + radius); bBox[2] = min(bBox[2], p.plotY - radius); bBox[3] = max(bBox[3], p.plotY + radius); } }); return isNumber(bBox.width / bBox.height) ? bBox : null; }, /** * The function responsible for calculating the parent node radius * based on the total surface of iniside-bubbles and the group BBox * @private */ calculateParentRadius: function calculateParentRadius() { var series = this, bBox, parentPadding = 20, minParentRadius = 20; bBox = series.seriesBox(); series.parentNodeRadius = Math.min(Math.max(Math.sqrt(2 * series.parentNodeMass / Math.PI) + parentPadding, minParentRadius), bBox ? Math.max(Math.sqrt(Math.pow(bBox.width, 2) + Math.pow(bBox.height, 2)) / 2 + parentPadding, minParentRadius) : Math.sqrt(2 * series.parentNodeMass / Math.PI) + parentPadding); if (series.parentNode) { series.parentNode.marker.radius = series.parentNode.radius = series.parentNodeRadius; } }, // Create Background/Parent Nodes for split series. drawGraph: function drawGraph() { // if the series is not using layout, don't add parent nodes if (!this.layout || !this.layout.options.splitSeries) { return; } var series = this, chart = series.chart, parentAttribs = {}, nodeMarker = this.layout.options.parentNodeOptions.marker, parentOptions = { fill: nodeMarker.fillColor || color(series.color).brighten(0.4).get(), opacity: nodeMarker.fillOpacity, stroke: nodeMarker.lineColor || series.color, 'stroke-width': nodeMarker.lineWidth }, visibility = series.visible ? 'inherit' : 'hidden'; // create the group for parent Nodes if doesn't exist if (!this.parentNodesGroup) { series.parentNodesGroup = series.plotGroup('parentNodesGroup', 'parentNode', visibility, 0.1, chart.seriesGroup); series.group.attr({ zIndex: 2 }); } this.calculateParentRadius(); parentAttribs = _Globals2.default.merge({ x: series.parentNode.plotX - series.parentNodeRadius, y: series.parentNode.plotY - series.parentNodeRadius, width: series.parentNodeRadius * 2, height: series.parentNodeRadius * 2 }, parentOptions); if (!series.graph) { series.graph = series.parentNode.graphic = chart.renderer.symbol(parentOptions.symbol).attr(parentAttribs).add(series.parentNodesGroup); } else { series.graph.attr(parentAttribs); } }, /** * Creating parent nodes for split series, in which all the bubbles * are rendered. * @private */ createParentNodes: function createParentNodes() { var series = this, chart = series.chart, parentNodeLayout = series.parentNodeLayout, nodeAdded, parentNode = series.parentNode; series.parentNodeMass = 0; series.points.forEach(function (p) { series.parentNodeMass += Math.PI * Math.pow(p.marker.radius, 2); }); series.calculateParentRadius(); parentNodeLayout.nodes.forEach(function (node) { if (node.seriesIndex === series.index) { nodeAdded = true; } }); parentNodeLayout.setArea(0, 0, chart.plotWidth, chart.plotHeight); if (!nodeAdded) { if (!parentNode) { parentNode = new NetworkPoint().init(this, { mass: series.parentNodeRadius / 2, marker: { radius: series.parentNodeRadius }, dataLabels: { inside: false }, dataLabelOnNull: true, degree: series.parentNodeRadius, isParentNode: true, seriesIndex: series.index }); } if (series.parentNode) { parentNode.plotX = series.parentNode.plotX; parentNode.plotY = series.parentNode.plotY; } series.parentNode = parentNode; parentNodeLayout.addSeries(series); parentNodeLayout.addNodes([parentNode]); } }, /** * Function responsible for adding series layout, used for parent nodes. * @private */ addSeriesLayout: function addSeriesLayout() { var series = this, layoutOptions = series.options.layoutAlgorithm, graphLayoutsStorage = series.chart.graphLayoutsStorage, graphLayoutsLookup = series.chart.graphLayoutsLookup, parentNodeOptions = _Globals2.default.merge(layoutOptions, layoutOptions.parentNodeOptions, { enableSimulation: series.layout.options.enableSimulation }), parentNodeLayout; parentNodeLayout = graphLayoutsStorage[layoutOptions.type + '-series']; if (!parentNodeLayout) { graphLayoutsStorage[layoutOptions.type + '-series'] = parentNodeLayout = new _Globals2.default.layouts[layoutOptions.type](); parentNodeLayout.init(parentNodeOptions); graphLayoutsLookup.splice(parentNodeLayout.index, 0, parentNodeLayout); } series.parentNodeLayout = parentNodeLayout; this.createParentNodes(); }, /** * Adding the basic layout to series points. * @private */ addLayout: function addLayout() { var series = this, layoutOptions = series.options.layoutAlgorithm, graphLayoutsStorage = series.chart.graphLayoutsStorage, graphLayoutsLookup = series.chart.graphLayoutsLookup, chartOptions = series.chart.options.chart, layout; if (!graphLayoutsStorage) { series.chart.graphLayoutsStorage = graphLayoutsStorage = {}; series.chart.graphLayoutsLookup = graphLayoutsLookup = []; } layout = graphLayoutsStorage[layoutOptions.type]; if (!layout) { layoutOptions.enableSimulation = !defined(chartOptions.forExport) ? layoutOptions.enableSimulation : !chartOptions.forExport; graphLayoutsStorage[layoutOptions.type] = layout = new _Globals2.default.layouts[layoutOptions.type](); layout.init(layoutOptions); graphLayoutsLookup.splice(layout.index, 0, layout); } series.layout = layout; series.points.forEach(function (node) { node.mass = 2; node.degree = 1; node.collisionNmb = 1; }); layout.setArea(0, 0, series.chart.plotWidth, series.chart.plotHeight); layout.addSeries(series); layout.addNodes(series.points); }, /** * Function responsible for adding all the layouts to the chart. * @private */ deferLayout: function deferLayout() { // TODO split layouts to independent methods var series = this, layoutOptions = series.options.layoutAlgorithm; if (!series.visible) { return; } // layout is using nodes for position calculation series.addLayout(); if (layoutOptions.splitSeries) { series.addSeriesLayout(); } }, /** * Extend the base translate method to handle bubble size, * and correct positioning them. * @private */ translate: function translate() { var series = this, chart = series.chart, data = series.data, index = series.index, point, radius, positions, i, useSimulation = series.options.useSimulation; series.processedXData = series.xData; series.generatePoints(); // merged data is an array with all of the data from all series if (!defined(chart.allDataPoints)) { chart.allDataPoints = series.accumulateAllPoints(series); // calculate radius for all added data series.getPointRadius(); } // after getting initial radius, calculate bubble positions if (useSimulation) { positions = chart.allDataPoints; } else { positions = series.placeBubbles(chart.allDataPoints); series.options.draggable = false; } // Set the shape and arguments to be picked up in drawPoints for (i = 0; i < positions.length; i++) { if (positions[i][3] === index) { // update the series points with the val from positions // array point = data[positions[i][4]]; radius = positions[i][2]; if (!useSimulation) { point.plotX = positions[i][0] - chart.plotLeft + chart.diffX; point.plotY = positions[i][1] - chart.plotTop + chart.diffY; } point.marker = _Globals2.default.extend(point.marker, { radius: radius, width: 2 * radius, height: 2 * radius }); point.radius = radius; } } if (useSimulation) { series.deferLayout(); } }, /** * Check if two bubbles overlaps. * @private * @param {Array} first bubble * @param {Array} second bubble * @return {Boolean} overlap or not */ checkOverlap: function checkOverlap(bubble1, bubble2) { var diffX = bubble1[0] - bubble2[0], // diff of X center values diffY = bubble1[1] - bubble2[1], // diff of Y center values sumRad = bubble1[2] + bubble2[2]; // sum of bubble radius return Math.sqrt(diffX * diffX + diffY * diffY) - Math.abs(sumRad) < -0.001; }, /** * Function that is adding one bubble based on positions and sizes of * two other bubbles, lastBubble is the last added bubble, newOrigin is * the bubble for positioning new bubbles. nextBubble is the curently * added bubble for which we are calculating positions * @private * @param {Array} lastBubble The closest last bubble * @param {Array} newOrigin New bubble * @param {Array} nextBubble The closest next bubble * @return {Array} Bubble with correct positions */ positionBubble: function positionBubble(lastBubble, newOrigin, nextBubble) { var sqrt = Math.sqrt, asin = Math.asin, acos = Math.acos, pow = Math.pow, abs = Math.abs, distance = sqrt( // dist between lastBubble and newOrigin pow(lastBubble[0] - newOrigin[0], 2) + pow(lastBubble[1] - newOrigin[1], 2)), alfa = acos( // from cosinus theorem: alfa is an angle used for // calculating correct position (pow(distance, 2) + pow(nextBubble[2] + newOrigin[2], 2) - pow(nextBubble[2] + lastBubble[2], 2)) / (2 * (nextBubble[2] + newOrigin[2]) * distance)), beta = asin( // from sinus theorem. abs(lastBubble[0] - newOrigin[0]) / distance), // providing helping variables, related to angle between // lastBubble and newOrigin gamma = lastBubble[1] - newOrigin[1] < 0 ? 0 : Math.PI, // if new origin y is smaller than last bubble y value // (2 and 3 quarter), // add Math.PI to final angle delta = (lastBubble[0] - newOrigin[0]) * (lastBubble[1] - newOrigin[1]) < 0 ? 1 : -1, // (1st and 3rd quarter) finalAngle = gamma + alfa + beta * delta, cosA = Math.cos(finalAngle), sinA = Math.sin(finalAngle), posX = newOrigin[0] + (newOrigin[2] + nextBubble[2]) * sinA, // center of new origin + (radius1 + radius2) * sinus A posY = newOrigin[1] - (newOrigin[2] + nextBubble[2]) * cosA; return [posX, posY, nextBubble[2], nextBubble[3], nextBubble[4]]; // the same as described before }, /** * This is the main function responsible * for positioning all of the bubbles * allDataPoints - bubble array, in format [pixel x value, * pixel y value, radius, * related series index, related point index] * @private * @param {Array} allDataPoints All points from all series * @return {Array} Positions of all bubbles */ placeBubbles: function placeBubbles(allDataPoints) { var series = this, checkOverlap = series.checkOverlap, positionBubble = series.positionBubble, bubblePos = [], stage = 1, j = 0, k = 0, calculatedBubble, sortedArr, arr = [], i; // sort all points sortedArr = allDataPoints.sort(function (a, b) { return b[2] - a[2]; }); if (sortedArr.length) { // create first bubble in the middle of the chart bubblePos.push([[0, 0, sortedArr[0][2], sortedArr[0][3], sortedArr[0][4]] // point index ]); // 0 level bubble if (sortedArr.length > 1) { bubblePos.push([[0, 0 - sortedArr[1][2] - sortedArr[0][2], // move bubble above first one sortedArr[1][2], sortedArr[1][3], sortedArr[1][4]]]); // 1 level 1st bubble // first two already positioned so starting from 2 for (i = 2; i < sortedArr.length; i++) { sortedArr[i][2] = sortedArr[i][2] || 1; // in case if radius is calculated as 0. calculatedBubble = positionBubble(bubblePos[stage][j], bubblePos[stage - 1][k], sortedArr[i]); // calculate initial bubble position if (checkOverlap(calculatedBubble, bubblePos[stage][0])) { /* if new bubble is overlapping with first bubble * in current level (stage) */ bubblePos.push([]); k = 0; /* reset index of bubble, used for * positioning the bubbles around it, * we are starting from first bubble in next * stage because we are changing level to higher */ bubblePos[stage + 1].push(positionBubble(bubblePos[stage][j], bubblePos[stage][0], sortedArr[i])); // (last bubble, 1. from curr stage, new bubble) stage++; // the new level is created, above current j = 0; // set the index of bubble in curr level to 0 } else if (stage > 1 && bubblePos[stage - 1][k + 1] && checkOverlap(calculatedBubble, bubblePos[stage - 1][k + 1])) { /* if new bubble is overlapping with one of the prev * stage bubbles, it means that - bubble, used for * positioning the bubbles around it has changed * so we need to recalculate it */ k++; bubblePos[stage].push(positionBubble(bubblePos[stage][j], bubblePos[stage - 1][k], sortedArr[i])); // (last bubble, prev stage bubble, new bubble) j++; } else { // simply add calculated bubble j++; bubblePos[stage].push(calculatedBubble); } } } series.chart.stages = bubblePos; // it may not be necessary but adding it just in case - // it is containing all of the bubble levels series.chart.rawPositions = [].concat.apply([], bubblePos); // bubble positions merged into one array series.resizeRadius(); arr = series.chart.rawPositions; } return arr; }, /** * The function responsible for resizing the bubble radius. * In shortcut: it is taking the initially * calculated positions of bubbles. Then it is calculating the min max * of both dimensions, creating something in shape of bBox. * The comparison of bBox and the size of plotArea * (later it may be also the size set by customer) is giving the * value how to recalculate the radius so it will match the size * @private */ resizeRadius: function resizeRadius() { var chart = this.chart, positions = chart.rawPositions, min = Math.min, max = Math.max, plotLeft = chart.plotLeft, plotTop = chart.plotTop, chartHeight = chart.plotHeight, chartWidth = chart.plotWidth, minX, maxX, minY, maxY, radius, bBox, spaceRatio, smallerDimension, i; minX = minY = Number.POSITIVE_INFINITY; // set initial values maxX = maxY = Number.NEGATIVE_INFINITY; for (i = 0; i < positions.length; i++) { radius = positions[i][2]; minX = min(minX, positions[i][0] - radius); // (x center-radius) is the min x value used by specific bubble maxX = max(maxX, positions[i][0] + radius); minY = min(minY, positions[i][1] - radius); maxY = max(maxY, positions[i][1] + radius); } bBox = [maxX - minX, maxY - minY]; spaceRatio = [(chartWidth - plotLeft) / bBox[0], (chartHeight - plotTop) / bBox[1]]; smallerDimension = min.apply([], spaceRatio); if (Math.abs(smallerDimension - 1) > 1e-10) { // if bBox is considered not the same width as possible size for (i = 0; i < positions.length; i++) { positions[i][2] *= smallerDimension; } this.placeBubbles(positions); } else { /** if no radius recalculation is needed, we need to position * the whole bubbles in center of chart plotarea * for this, we are adding two parameters, * diffY and diffX, that are related to differences * between the initial center and the bounding box */ chart.diffY = chartHeight / 2 + plotTop - minY - (maxY - minY) / 2; chart.diffX = chartWidth / 2 + plotLeft - minX - (maxX - minX) / 2; } }, /** * Calculate min and max bubble value for radius calculation. * @private */ calculateZExtremes: function calculateZExtremes() { var chart = this.chart, zMin = this.options.zMin, zMax = this.options.zMax, valMin = Infinity, valMax = -Infinity; if (zMin && zMax) { return [zMin, zMax]; } // it is needed to deal with null // and undefined values chart.series.forEach(function (s) { s.yData.forEach(function (p) { if (defined(p)) { if (p > valMax) { valMax = p; } if (p < valMin) { valMin = p; } } }); }); zMin = pick(zMin, valMin); zMax = pick(zMax, valMax); return [zMin, zMax]; }, /** * Calculate radius of bubbles in series. * @private */ getPointRadius: function getPointRadius() { var series = this, chart = series.chart, plotWidth = chart.plotWidth, plotHeight = chart.plotHeight, seriesOptions = series.options, useSimulation = seriesOptions.useSimulation, smallestSize = Math.min(plotWidth, plotHeight), extremes = {}, radii = [], allDataPoints = chart.allDataPoints, minSize, maxSize, value, radius, zExtremes; ['minSize', 'maxSize'].forEach(function (prop) { var length = parseInt(seriesOptions[prop], 10), isPercent = /%$/.test(seriesOptions[prop]); extremes[prop] = isPercent ? smallestSize * length / 100 : length * Math.sqrt(allDataPoints.length); }); chart.minRadius = minSize = extremes.minSize / Math.sqrt(allDataPoints.length); chart.maxRadius = maxSize = extremes.maxSize / Math.sqrt(allDataPoints.length); zExtremes = useSimulation ? series.calculateZExtremes() : [minSize, maxSize]; (allDataPoints || []).forEach(function (point, i) { value = useSimulation ? Math.max(Math.min(point[2], zExtremes[1]), zExtremes[0]) : point[2]; radius = series.getRadius(zExtremes[0], zExtremes[1], minSize, maxSize, value); if (radius === 0) { radius = null; } allDataPoints[i][2] = radius; radii.push(radius); }); series.radii = radii; }, // Draggable mode: /** * Redraw halo on mousemove during the drag&drop action. * @private * @param {Highcharts.Point} point The point that should show halo. */ redrawHalo: dragNodesMixin.redrawHalo, /** * Mouse down action, initializing drag&drop mode. * @private * @param {global.Event} event Browser event, before normalization. * @param {Highcharts.Point} point The point that event occured. */ onMouseDown: dragNodesMixin.onMouseDown, /** * Mouse move action during drag&drop. * @private * @param {global.Event} event Browser event, before normalization. * @param {Highcharts.Point} point The point that event occured. */ onMouseMove: dragNodesMixin.onMouseMove, /** * Mouse up action, finalizing drag&drop. * @private * @param {Highcharts.Point} point The point that event occured. */ onMouseUp: function onMouseUp(point) { if (point.fixedPosition && !point.removed) { var distanceXY, distanceR, layout = this.layout, parentNodeLayout = this.parentNodeLayout; if (parentNodeLayout && layout.options.dragBetweenSeries) { parentNodeLayout.nodes.forEach(function (node) { if (point && point.marker && node !== point.series.parentNode) { distanceXY = layout.getDistXY(point, node); distanceR = layout.vectorLength(distanceXY) - node.marker.radius - point.marker.radius; if (distanceR < 0) { node.series.addPoint(_Globals2.default.merge(point.options, { plotX: point.plotX, plotY: point.plotY }), false); layout.removeNode(point); point.remove(); } } }); } dragNodesMixin.onMouseUp.apply(this, arguments); } }, destroy: function destroy() { if (this.parentNode) { this.parentNodeLayout.removeNode(this.parentNode); if (this.parentNode.dataLabel) { this.parentNode.dataLabel = this.parentNode.dataLabel.destroy(); } } _Globals2.default.Series.prototype.destroy.apply(this, arguments); }, alignDataLabel: _Globals2.default.Series.prototype.alignDataLabel }, { /** * Destroy point. * Then remove point from the layout. * @private * @return {undefined} */ destroy: function destroy() { if (this.series.layout) { this.series.layout.removeNode(this); } return Point.prototype.destroy.apply(this, arguments); } }); // Remove accumulated data points to redistribute all of them again // (i.e after hiding series by legend) addEvent(Chart, 'beforeRedraw', function () { if (this.allDataPoints) { delete this.allDataPoints; } }); /* eslint-enable no-invalid-this, valid-jsdoc */ /** * A `packedbubble` series. If the [type](#series.packedbubble.type) option is * not specified, it is inherited from [chart.type](#chart.type). * * @type {Object} * @extends series,plotOptions.packedbubble * @excluding dataParser,dataURL,stack * @product highcharts highstock * @apioption series.packedbubble */ /** * An array of data points for the series. For the `packedbubble` series type, * points can be given in the following ways: * * 1. An array of `values`. * * ```js * data: [5, 1, 20] * ``` * * 2. An array of objects with named values. The objects are point * configuration objects as seen below. If the total number of data points * exceeds the series' [turboThreshold](#series.packedbubble.turboThreshold), * this option is not available. * * ```js * data: [{ * value: 1, * name: "Point2", * color: "#00FF00" * }, { * value: 5, * name: "Point1", * color: "#FF00FF" * }] * ``` * * @type {Array} * @extends series.line.data * @excluding marker, x, y * @sample {highcharts} highcharts/series/data-array-of-objects/ * Config objects * @product highcharts * @apioption series.packedbubble.data */ /** * @type {Highcharts.SeriesPackedBubbleDataLabelsOptionsObject|Array} * @product highcharts * @apioption series.packedbubble.data.dataLabels */ /** * @excluding enabled,enabledThreshold,height,radius,width * @product highcharts * @apioption series.packedbubble.marker */ ''; // adds doclets above to transpiled file