marker-clusters.src.js 75 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538
  1. /**
  2. * @license Highcharts JS v8.1.2 (2020-06-16)
  3. *
  4. * Marker clusters module for Highcharts
  5. *
  6. * (c) 2010-2019 Wojciech Chmiel
  7. *
  8. * License: www.highcharts.com/license
  9. */
  10. 'use strict';
  11. (function (factory) {
  12. if (typeof module === 'object' && module.exports) {
  13. factory['default'] = factory;
  14. module.exports = factory;
  15. } else if (typeof define === 'function' && define.amd) {
  16. define('highcharts/modules/marker-clusters', ['highcharts'], function (Highcharts) {
  17. factory(Highcharts);
  18. factory.Highcharts = Highcharts;
  19. return factory;
  20. });
  21. } else {
  22. factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined);
  23. }
  24. }(function (Highcharts) {
  25. var _modules = Highcharts ? Highcharts._modules : {};
  26. function _registerModule(obj, path, args, fn) {
  27. if (!obj.hasOwnProperty(path)) {
  28. obj[path] = fn.apply(null, args);
  29. }
  30. }
  31. _registerModule(_modules, 'modules/marker-clusters.src.js', [_modules['parts/Chart.js'], _modules['parts/Globals.js'], _modules['parts/Options.js'], _modules['parts/Point.js'], _modules['parts/SVGRenderer.js'], _modules['parts/Utilities.js']], function (Chart, H, O, Point, SVGRenderer, U) {
  32. /* *
  33. *
  34. * Marker clusters module.
  35. *
  36. * (c) 2010-2020 Torstein Honsi
  37. *
  38. * Author: Wojciech Chmiel
  39. *
  40. * License: www.highcharts.com/license
  41. *
  42. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  43. *
  44. * */
  45. var defaultOptions = O.defaultOptions;
  46. var addEvent = U.addEvent, animObject = U.animObject, defined = U.defined, error = U.error, isArray = U.isArray, isFunction = U.isFunction, isObject = U.isObject, isNumber = U.isNumber, merge = U.merge, objectEach = U.objectEach, relativeLength = U.relativeLength, syncTimeout = U.syncTimeout;
  47. /**
  48. * Function callback when a cluster is clicked.
  49. *
  50. * @callback Highcharts.MarkerClusterDrillCallbackFunction
  51. *
  52. * @param {Highcharts.Point} this
  53. * The point where the event occured.
  54. *
  55. * @param {Highcharts.PointClickEventObject} event
  56. * Event arguments.
  57. */
  58. ''; // detach doclets from following code
  59. /* eslint-disable no-invalid-this */
  60. var Series = H.Series, Scatter = H.seriesTypes.scatter, baseGeneratePoints = Series.prototype.generatePoints, stateIdCounter = 0,
  61. // Points that ids are included in the oldPointsStateId array
  62. // are hidden before animation. Other ones are destroyed.
  63. oldPointsStateId = [];
  64. /**
  65. * Options for marker clusters, the concept of sampling the data
  66. * values into larger blocks in order to ease readability and
  67. * increase performance of the JavaScript charts.
  68. *
  69. * Note: marker clusters module is not working with `boost`
  70. * and `draggable-points` modules.
  71. *
  72. * The marker clusters feature requires the marker-clusters.js
  73. * file to be loaded, found in the modules directory of the download
  74. * package, or online at [code.highcharts.com/modules/marker-clusters.js
  75. * ](code.highcharts.com/modules/marker-clusters.js).
  76. *
  77. * @sample maps/marker-clusters/europe
  78. * Maps marker clusters
  79. * @sample highcharts/marker-clusters/basic
  80. * Scatter marker clusters
  81. * @sample maps/marker-clusters/optimized-kmeans
  82. * Marker clusters with colorAxis
  83. *
  84. * @product highcharts highmaps
  85. * @since 8.0.0
  86. * @optionparent plotOptions.scatter.cluster
  87. *
  88. * @private
  89. */
  90. var clusterDefaultOptions = {
  91. /**
  92. * Whether to enable the marker-clusters module.
  93. *
  94. * @sample maps/marker-clusters/basic
  95. * Maps marker clusters
  96. * @sample highcharts/marker-clusters/basic
  97. * Scatter marker clusters
  98. */
  99. enabled: false,
  100. /**
  101. * When set to `false` prevent cluster overlapping - this option
  102. * works only when `layoutAlgorithm.type = "grid"`.
  103. *
  104. * @sample highcharts/marker-clusters/grid
  105. * Prevent overlapping
  106. */
  107. allowOverlap: true,
  108. /**
  109. * Options for the cluster marker animation.
  110. * @type {boolean|Highcharts.AnimationOptionsObject}
  111. * @default { "duration": 500 }
  112. */
  113. animation: {
  114. /** @ignore-option */
  115. duration: 500
  116. },
  117. /**
  118. * Zoom the plot area to the cluster points range when a cluster is clicked.
  119. */
  120. drillToCluster: true,
  121. /**
  122. * The minimum amount of points to be combined into a cluster.
  123. * This value has to be greater or equal to 2.
  124. *
  125. * @sample highcharts/marker-clusters/basic
  126. * At least three points in the cluster
  127. */
  128. minimumClusterSize: 2,
  129. /**
  130. * Options for layout algorithm. Inside there
  131. * are options to change the type of the algorithm, gridSize,
  132. * distance or iterations.
  133. */
  134. layoutAlgorithm: {
  135. /**
  136. * Type of the algorithm used to combine points into a cluster.
  137. * There are three available algorithms:
  138. *
  139. * 1) `grid` - grid-based clustering technique. Points are assigned
  140. * to squares of set size depending on their position on the plot
  141. * area. Points inside the grid square are combined into a cluster.
  142. * The grid size can be controlled by `gridSize` property
  143. * (grid size changes at certain zoom levels).
  144. *
  145. * 2) `kmeans` - based on K-Means clustering technique. In the
  146. * first step, points are divided using the grid method (distance
  147. * property is a grid size) to find the initial amount of clusters.
  148. * Next, each point is classified by computing the distance between
  149. * each cluster center and that point. When the closest cluster
  150. * distance is lower than distance property set by a user the point
  151. * is added to this cluster otherwise is classified as `noise`. The
  152. * algorithm is repeated until each cluster center not change its
  153. * previous position more than one pixel. This technique is more
  154. * accurate but also more time consuming than the `grid` algorithm,
  155. * especially for big datasets.
  156. *
  157. * 3) `optimizedKmeans` - based on K-Means clustering technique. This
  158. * algorithm uses k-means algorithm only on the chart initialization
  159. * or when chart extremes have greater range than on initialization.
  160. * When a chart is redrawn the algorithm checks only clustered points
  161. * distance from the cluster center and rebuild it when the point is
  162. * spaced enough to be outside the cluster. It provides performance
  163. * improvement and more stable clusters position yet can be used rather
  164. * on small and sparse datasets.
  165. *
  166. * By default, the algorithm depends on visible quantity of points
  167. * and `kmeansThreshold`. When there are more visible points than the
  168. * `kmeansThreshold` the `grid` algorithm is used, otherwise `kmeans`.
  169. *
  170. * The custom clustering algorithm can be added by assigning a callback
  171. * function as the type property. This function takes an array of
  172. * `processedXData`, `processedYData`, `processedXData` indexes and
  173. * `layoutAlgorithm` options as arguments and should return an object
  174. * with grouped data.
  175. *
  176. * The algorithm should return an object like that:
  177. * <pre>{
  178. * clusterId1: [{
  179. * x: 573,
  180. * y: 285,
  181. * index: 1 // point index in the data array
  182. * }, {
  183. * x: 521,
  184. * y: 197,
  185. * index: 2
  186. * }],
  187. * clusterId2: [{
  188. * ...
  189. * }]
  190. * ...
  191. * }</pre>
  192. *
  193. * `clusterId` (example above - unique id of a cluster or noise)
  194. * is an array of points belonging to a cluster. If the
  195. * array has only one point or fewer points than set in
  196. * `cluster.minimumClusterSize` it won't be combined into a cluster.
  197. *
  198. * @sample maps/marker-clusters/optimized-kmeans
  199. * Optimized K-Means algorithm
  200. * @sample highcharts/marker-clusters/kmeans
  201. * K-Means algorithm
  202. * @sample highcharts/marker-clusters/grid
  203. * Grid algorithm
  204. * @sample maps/marker-clusters/custom-alg
  205. * Custom algorithm
  206. *
  207. * @type {string|Function}
  208. * @see [cluster.minimumClusterSize](#plotOptions.scatter.marker.cluster.minimumClusterSize)
  209. * @apioption plotOptions.scatter.cluster.layoutAlgorithm.type
  210. */
  211. /**
  212. * When `type` is set to the `grid`,
  213. * `gridSize` is a size of a grid square element either as a number
  214. * defining pixels, or a percentage defining a percentage
  215. * of the plot area width.
  216. *
  217. * @type {number|string}
  218. */
  219. gridSize: 50,
  220. /**
  221. * When `type` is set to `kmeans`,
  222. * `iterations` are the number of iterations that this algorithm will be
  223. * repeated to find clusters positions.
  224. *
  225. * @type {number}
  226. * @apioption plotOptions.scatter.cluster.layoutAlgorithm.iterations
  227. */
  228. /**
  229. * When `type` is set to `kmeans`,
  230. * `distance` is a maximum distance between point and cluster center
  231. * so that this point will be inside the cluster. The distance
  232. * is either a number defining pixels or a percentage
  233. * defining a percentage of the plot area width.
  234. *
  235. * @type {number|string}
  236. */
  237. distance: 40,
  238. /**
  239. * When `type` is set to `undefined` and there are more visible points
  240. * than the kmeansThreshold the `grid` algorithm is used to find
  241. * clusters, otherwise `kmeans`. It ensures good performance on
  242. * large datasets and better clusters arrangement after the zoom.
  243. */
  244. kmeansThreshold: 100
  245. },
  246. /**
  247. * Options for the cluster marker.
  248. * @extends plotOptions.series.marker
  249. * @excluding enabledThreshold, states
  250. * @type {Highcharts.PointMarkerOptionsObject}
  251. */
  252. marker: {
  253. /** @internal */
  254. symbol: 'cluster',
  255. /** @internal */
  256. radius: 15,
  257. /** @internal */
  258. lineWidth: 0,
  259. /** @internal */
  260. lineColor: '#ffffff'
  261. },
  262. /**
  263. * Fires when the cluster point is clicked and `drillToCluster` is enabled.
  264. * One parameter, `event`, is passed to the function. The default action
  265. * is to zoom to the cluster points range. This can be prevented
  266. * by calling `event.preventDefault()`.
  267. *
  268. * @type {Highcharts.MarkerClusterDrillCallbackFunction}
  269. * @product highcharts highmaps
  270. * @see [cluster.drillToCluster](#plotOptions.scatter.marker.cluster.drillToCluster)
  271. * @apioption plotOptions.scatter.cluster.events.drillToCluster
  272. */
  273. /**
  274. * An array defining zones within marker clusters.
  275. *
  276. * In styled mode, the color zones are styled with the
  277. * `.highcharts-cluster-zone-{n}` class, or custom
  278. * classed from the `className`
  279. * option.
  280. *
  281. * @sample highcharts/marker-clusters/basic
  282. * Marker clusters zones
  283. * @sample maps/marker-clusters/custom-alg
  284. * Zones on maps
  285. *
  286. * @type {Array<*>}
  287. * @product highcharts highmaps
  288. * @apioption plotOptions.scatter.cluster.zones
  289. */
  290. /**
  291. * Styled mode only. A custom class name for the zone.
  292. *
  293. * @sample highcharts/css/color-zones/
  294. * Zones styled by class name
  295. *
  296. * @type {string}
  297. * @apioption plotOptions.scatter.cluster.zones.className
  298. */
  299. /**
  300. * Settings for the cluster marker belonging to the zone.
  301. *
  302. * @see [cluster.marker](#plotOptions.scatter.cluster.marker)
  303. * @extends plotOptions.scatter.cluster.marker
  304. * @product highcharts highmaps
  305. * @apioption plotOptions.scatter.cluster.zones.marker
  306. */
  307. /**
  308. * The value where the zone starts.
  309. *
  310. * @type {number}
  311. * @product highcharts highmaps
  312. * @apioption plotOptions.scatter.cluster.zones.from
  313. */
  314. /**
  315. * The value where the zone ends.
  316. *
  317. * @type {number}
  318. * @product highcharts highmaps
  319. * @apioption plotOptions.scatter.cluster.zones.to
  320. */
  321. /**
  322. * The fill color of the cluster marker in hover state. When
  323. * `undefined`, the series' or point's fillColor for normal
  324. * state is used.
  325. *
  326. * @type {Highcharts.ColorType}
  327. * @apioption plotOptions.scatter.cluster.states.hover.fillColor
  328. */
  329. /**
  330. * Options for the cluster data labels.
  331. * @type {Highcharts.DataLabelsOptions}
  332. */
  333. dataLabels: {
  334. /** @internal */
  335. enabled: true,
  336. /** @internal */
  337. format: '{point.clusterPointsAmount}',
  338. /** @internal */
  339. verticalAlign: 'middle',
  340. /** @internal */
  341. align: 'center',
  342. /** @internal */
  343. style: {
  344. color: 'contrast'
  345. },
  346. /** @internal */
  347. inside: true
  348. }
  349. };
  350. (defaultOptions.plotOptions || {}).series = merge((defaultOptions.plotOptions || {}).series, {
  351. cluster: clusterDefaultOptions,
  352. tooltip: {
  353. /**
  354. * The HTML of the cluster point's in the tooltip. Works only with
  355. * marker-clusters module and analogously to
  356. * [pointFormat](#tooltip.pointFormat).
  357. *
  358. * The cluster tooltip can be also formatted using
  359. * `tooltip.formatter` callback function and `point.isCluster` flag.
  360. *
  361. * @sample highcharts/marker-clusters/grid
  362. * Format tooltip for cluster points.
  363. *
  364. * @sample maps/marker-clusters/europe/
  365. * Format tooltip for clusters using tooltip.formatter
  366. *
  367. * @apioption tooltip.clusterFormat
  368. */
  369. clusterFormat: '<span>Clustered points: ' +
  370. '{point.clusterPointsAmount}</span><br/>'
  371. }
  372. });
  373. // Utils.
  374. /* eslint-disable require-jsdoc */
  375. function getClusterPosition(points) {
  376. var pointsLen = points.length, sumX = 0, sumY = 0, i;
  377. for (i = 0; i < pointsLen; i++) {
  378. sumX += points[i].x;
  379. sumY += points[i].y;
  380. }
  381. return {
  382. x: sumX / pointsLen,
  383. y: sumY / pointsLen
  384. };
  385. }
  386. // Prepare array with sorted data objects to be
  387. // compared in getPointsState method.
  388. function getDataState(clusteredData, stateDataLen) {
  389. var state = [];
  390. state.length = stateDataLen;
  391. clusteredData.clusters.forEach(function (cluster) {
  392. cluster.data.forEach(function (elem) {
  393. state[elem.dataIndex] = elem;
  394. });
  395. });
  396. clusteredData.noise.forEach(function (noise) {
  397. state[noise.data[0].dataIndex] = noise.data[0];
  398. });
  399. return state;
  400. }
  401. function fadeInElement(elem, opacity, animation) {
  402. elem
  403. .attr({
  404. opacity: opacity
  405. })
  406. .animate({
  407. opacity: 1
  408. }, animation);
  409. }
  410. function fadeInStatePoint(stateObj, opacity, animation, fadeinGraphic, fadeinDataLabel) {
  411. if (stateObj.point) {
  412. if (fadeinGraphic && stateObj.point.graphic) {
  413. stateObj.point.graphic.show();
  414. fadeInElement(stateObj.point.graphic, opacity, animation);
  415. }
  416. if (fadeinDataLabel && stateObj.point.dataLabel) {
  417. stateObj.point.dataLabel.show();
  418. fadeInElement(stateObj.point.dataLabel, opacity, animation);
  419. }
  420. }
  421. }
  422. function hideStatePoint(stateObj, hideGraphic, hideDataLabel) {
  423. if (stateObj.point) {
  424. if (hideGraphic && stateObj.point.graphic) {
  425. stateObj.point.graphic.hide();
  426. }
  427. if (hideDataLabel && stateObj.point.dataLabel) {
  428. stateObj.point.dataLabel.hide();
  429. }
  430. }
  431. }
  432. function destroyOldPoints(oldState) {
  433. if (oldState) {
  434. objectEach(oldState, function (state) {
  435. if (state.point && state.point.destroy) {
  436. state.point.destroy();
  437. }
  438. });
  439. }
  440. }
  441. function fadeInNewPointAndDestoryOld(newPointObj, oldPoints, animation, opacity) {
  442. // Fade in new point.
  443. fadeInStatePoint(newPointObj, opacity, animation, true, true);
  444. // Destroy old animated points.
  445. oldPoints.forEach(function (p) {
  446. if (p.point && p.point.destroy) {
  447. p.point.destroy();
  448. }
  449. });
  450. }
  451. // Generate unique stateId for a state element.
  452. function getStateId() {
  453. return Math.random().toString(36).substring(2, 7) + '-' + stateIdCounter++;
  454. }
  455. // Useful for debugging.
  456. // function drawGridLines(
  457. // series: Highcharts.Series,
  458. // options: Highcharts.MarkerClusterLayoutAlgorithmOptions
  459. // ): void {
  460. // var chart = series.chart,
  461. // xAxis = series.xAxis,
  462. // yAxis = series.yAxis,
  463. // xAxisLen = series.xAxis.len,
  464. // yAxisLen = series.yAxis.len,
  465. // i, j, elem, text,
  466. // currentX = 0,
  467. // currentY = 0,
  468. // scaledGridSize = 50,
  469. // gridX = 0,
  470. // gridY = 0,
  471. // gridOffset = series.getGridOffset(),
  472. // mapXSize, mapYSize;
  473. // if (series.debugGridLines && series.debugGridLines.length) {
  474. // series.debugGridLines.forEach(function (gridItem): void {
  475. // if (gridItem && gridItem.destroy) {
  476. // gridItem.destroy();
  477. // }
  478. // });
  479. // }
  480. // series.debugGridLines = [];
  481. // scaledGridSize = series.getScaledGridSize(options);
  482. // mapXSize = Math.abs(
  483. // xAxis.toPixels(xAxis.dataMax || 0) -
  484. // xAxis.toPixels(xAxis.dataMin || 0)
  485. // );
  486. // mapYSize = Math.abs(
  487. // yAxis.toPixels(yAxis.dataMax || 0) -
  488. // yAxis.toPixels(yAxis.dataMin || 0)
  489. // );
  490. // gridX = Math.ceil(mapXSize / scaledGridSize);
  491. // gridY = Math.ceil(mapYSize / scaledGridSize);
  492. // for (i = 0; i < gridX; i++) {
  493. // currentX = i * scaledGridSize;
  494. // if (
  495. // gridOffset.plotLeft + currentX >= 0 &&
  496. // gridOffset.plotLeft + currentX < xAxisLen
  497. // ) {
  498. // for (j = 0; j < gridY; j++) {
  499. // currentY = j * scaledGridSize;
  500. // if (
  501. // gridOffset.plotTop + currentY >= 0 &&
  502. // gridOffset.plotTop + currentY < yAxisLen
  503. // ) {
  504. // if (j % 2 === 0 && i % 2 === 0) {
  505. // var rect = chart.renderer
  506. // .rect(
  507. // gridOffset.plotLeft + currentX,
  508. // gridOffset.plotTop + currentY,
  509. // scaledGridSize * 2,
  510. // scaledGridSize * 2
  511. // )
  512. // .attr({
  513. // stroke: series.color,
  514. // 'stroke-width': '2px'
  515. // })
  516. // .add()
  517. // .toFront();
  518. // series.debugGridLines.push(rect);
  519. // }
  520. // elem = chart.renderer
  521. // .rect(
  522. // gridOffset.plotLeft + currentX,
  523. // gridOffset.plotTop + currentY,
  524. // scaledGridSize,
  525. // scaledGridSize
  526. // )
  527. // .attr({
  528. // stroke: series.color,
  529. // opacity: 0.3,
  530. // 'stroke-width': '1px'
  531. // })
  532. // .add()
  533. // .toFront();
  534. // text = chart.renderer
  535. // .text(
  536. // j + '-' + i,
  537. // gridOffset.plotLeft + currentX + 2,
  538. // gridOffset.plotTop + currentY + 7
  539. // )
  540. // .css({
  541. // fill: 'rgba(0, 0, 0, 0.7)',
  542. // fontSize: '7px'
  543. // })
  544. // .add()
  545. // .toFront();
  546. // series.debugGridLines.push(elem);
  547. // series.debugGridLines.push(text);
  548. // }
  549. // }
  550. // }
  551. // }
  552. // }
  553. /* eslint-enable require-jsdoc */
  554. // Cluster symbol.
  555. SVGRenderer.prototype.symbols.cluster = function (x, y, width, height) {
  556. var w = width / 2, h = height / 2, outerWidth = 1, space = 1, inner, outer1, outer2;
  557. inner = this.arc(x + w, y + h, w - space * 4, h - space * 4, {
  558. start: Math.PI * 0.5,
  559. end: Math.PI * 2.5,
  560. open: false
  561. });
  562. outer1 = this.arc(x + w, y + h, w - space * 3, h - space * 3, {
  563. start: Math.PI * 0.5,
  564. end: Math.PI * 2.5,
  565. innerR: w - outerWidth * 2,
  566. open: false
  567. });
  568. outer2 = this.arc(x + w, y + h, w - space, h - space, {
  569. start: Math.PI * 0.5,
  570. end: Math.PI * 2.5,
  571. innerR: w,
  572. open: false
  573. });
  574. return outer2.concat(outer1, inner);
  575. };
  576. Scatter.prototype.animateClusterPoint = function (clusterObj) {
  577. var series = this, xAxis = series.xAxis, yAxis = series.yAxis, chart = series.chart, clusterOptions = series.options.cluster, animation = animObject((clusterOptions || {}).animation), animDuration = animation.duration || 500, pointsState = (series.markerClusterInfo || {}).pointsState, newState = (pointsState || {}).newState, oldState = (pointsState || {}).oldState, parentId, oldPointObj, newPointObj, oldPoints = [], newPointBBox, offset = 0, newX = 0, newY = 0, isOldPointGrahic = false, isCbHandled = false;
  578. if (oldState && newState) {
  579. newPointObj = newState[clusterObj.stateId];
  580. newX = xAxis.toPixels(newPointObj.x) - chart.plotLeft;
  581. newY = yAxis.toPixels(newPointObj.y) - chart.plotTop;
  582. // Point has one ancestor.
  583. if (newPointObj.parentsId.length === 1) {
  584. parentId = (newState || {})[clusterObj.stateId].parentsId[0];
  585. oldPointObj = oldState[parentId];
  586. // If old and new poistions are the same do not animate.
  587. if (newPointObj.point &&
  588. newPointObj.point.graphic &&
  589. oldPointObj &&
  590. oldPointObj.point &&
  591. oldPointObj.point.plotX &&
  592. oldPointObj.point.plotY &&
  593. oldPointObj.point.plotX !== newPointObj.point.plotX &&
  594. oldPointObj.point.plotY !== newPointObj.point.plotY) {
  595. newPointBBox = newPointObj.point.graphic.getBBox();
  596. offset = newPointBBox.width / 2;
  597. newPointObj.point.graphic.attr({
  598. x: oldPointObj.point.plotX - offset,
  599. y: oldPointObj.point.plotY - offset
  600. });
  601. newPointObj.point.graphic.animate({
  602. x: newX - newPointObj.point.graphic.radius,
  603. y: newY - newPointObj.point.graphic.radius
  604. }, animation, function () {
  605. isCbHandled = true;
  606. // Destroy old point.
  607. if (oldPointObj.point && oldPointObj.point.destroy) {
  608. oldPointObj.point.destroy();
  609. }
  610. });
  611. // Data label animation.
  612. if (newPointObj.point.dataLabel &&
  613. newPointObj.point.dataLabel.alignAttr &&
  614. oldPointObj.point.dataLabel &&
  615. oldPointObj.point.dataLabel.alignAttr) {
  616. newPointObj.point.dataLabel.attr({
  617. x: oldPointObj.point.dataLabel.alignAttr.x,
  618. y: oldPointObj.point.dataLabel.alignAttr.y
  619. });
  620. newPointObj.point.dataLabel.animate({
  621. x: newPointObj.point.dataLabel.alignAttr.x,
  622. y: newPointObj.point.dataLabel.alignAttr.y
  623. }, animation);
  624. }
  625. }
  626. }
  627. else if (newPointObj.parentsId.length === 0) {
  628. // Point has no ancestors - new point.
  629. // Hide new point.
  630. hideStatePoint(newPointObj, true, true);
  631. syncTimeout(function () {
  632. // Fade in new point.
  633. fadeInStatePoint(newPointObj, 0.1, animation, true, true);
  634. }, animDuration / 2);
  635. }
  636. else {
  637. // Point has many ancestors.
  638. // Hide new point before animation.
  639. hideStatePoint(newPointObj, true, true);
  640. newPointObj.parentsId.forEach(function (elem) {
  641. if (oldState && oldState[elem]) {
  642. oldPointObj = oldState[elem];
  643. oldPoints.push(oldPointObj);
  644. if (oldPointObj.point &&
  645. oldPointObj.point.graphic) {
  646. isOldPointGrahic = true;
  647. oldPointObj.point.graphic.show();
  648. oldPointObj.point.graphic.animate({
  649. x: newX - oldPointObj.point.graphic.radius,
  650. y: newY - oldPointObj.point.graphic.radius,
  651. opacity: 0.4
  652. }, animation, function () {
  653. isCbHandled = true;
  654. fadeInNewPointAndDestoryOld(newPointObj, oldPoints, animation, 0.7);
  655. });
  656. if (oldPointObj.point.dataLabel &&
  657. oldPointObj.point.dataLabel.y !== -9999 &&
  658. newPointObj.point &&
  659. newPointObj.point.dataLabel &&
  660. newPointObj.point.dataLabel.alignAttr) {
  661. oldPointObj.point.dataLabel.show();
  662. oldPointObj.point.dataLabel.animate({
  663. x: newPointObj.point.dataLabel.alignAttr.x,
  664. y: newPointObj.point.dataLabel.alignAttr.y,
  665. opacity: 0.4
  666. }, animation);
  667. }
  668. }
  669. }
  670. });
  671. // Make sure point is faded in.
  672. syncTimeout(function () {
  673. if (!isCbHandled) {
  674. fadeInNewPointAndDestoryOld(newPointObj, oldPoints, animation, 0.85);
  675. }
  676. }, animDuration);
  677. if (!isOldPointGrahic) {
  678. syncTimeout(function () {
  679. fadeInNewPointAndDestoryOld(newPointObj, oldPoints, animation, 0.1);
  680. }, animDuration / 2);
  681. }
  682. }
  683. }
  684. };
  685. Scatter.prototype.getGridOffset = function () {
  686. var series = this, chart = series.chart, xAxis = series.xAxis, yAxis = series.yAxis, plotLeft = 0, plotTop = 0;
  687. if (series.dataMinX && series.dataMaxX) {
  688. plotLeft = xAxis.reversed ?
  689. xAxis.toPixels(series.dataMaxX) : xAxis.toPixels(series.dataMinX);
  690. }
  691. else {
  692. plotLeft = chart.plotLeft;
  693. }
  694. if (series.dataMinY && series.dataMaxY) {
  695. plotTop = yAxis.reversed ?
  696. yAxis.toPixels(series.dataMinY) : yAxis.toPixels(series.dataMaxY);
  697. }
  698. else {
  699. plotTop = chart.plotTop;
  700. }
  701. return { plotLeft: plotLeft, plotTop: plotTop };
  702. };
  703. Scatter.prototype.getScaledGridSize = function (options) {
  704. var series = this, xAxis = series.xAxis, search = true, k = 1, divider = 1, processedGridSize = options.processedGridSize ||
  705. clusterDefaultOptions.layoutAlgorithm.gridSize, gridSize, scale, level;
  706. if (!series.gridValueSize) {
  707. series.gridValueSize = Math.abs(xAxis.toValue(processedGridSize) - xAxis.toValue(0));
  708. }
  709. gridSize = xAxis.toPixels(series.gridValueSize) - xAxis.toPixels(0);
  710. scale = +(processedGridSize / gridSize).toFixed(14);
  711. // Find the level and its divider.
  712. while (search && scale !== 1) {
  713. level = Math.pow(2, k);
  714. if (scale > 0.75 && scale < 1.25) {
  715. search = false;
  716. }
  717. else if (scale >= (1 / level) && scale < 2 * (1 / level)) {
  718. search = false;
  719. divider = level;
  720. }
  721. else if (scale <= level && scale > level / 2) {
  722. search = false;
  723. divider = 1 / level;
  724. }
  725. k++;
  726. }
  727. return (processedGridSize / divider) / scale;
  728. };
  729. Scatter.prototype.getRealExtremes = function () {
  730. var _a, _b;
  731. var series = this, chart = series.chart, xAxis = series.xAxis, yAxis = series.yAxis, realMinX = xAxis ? xAxis.toValue(chart.plotLeft) : 0, realMaxX = xAxis ?
  732. xAxis.toValue(chart.plotLeft + chart.plotWidth) : 0, realMinY = yAxis ? yAxis.toValue(chart.plotTop) : 0, realMaxY = yAxis ?
  733. yAxis.toValue(chart.plotTop + chart.plotHeight) : 0;
  734. if (realMinX > realMaxX) {
  735. _a = [realMinX, realMaxX], realMaxX = _a[0], realMinX = _a[1];
  736. }
  737. if (realMinY > realMaxY) {
  738. _b = [realMinY, realMaxY], realMaxY = _b[0], realMinY = _b[1];
  739. }
  740. return {
  741. minX: realMinX,
  742. maxX: realMaxX,
  743. minY: realMinY,
  744. maxY: realMaxY
  745. };
  746. };
  747. Scatter.prototype.onDrillToCluster = function (event) {
  748. var point = event.point || event.target;
  749. point.firePointEvent('drillToCluster', event, function (e) {
  750. var _a, _b;
  751. var point = e.point || e.target, series = point.series, xAxis = point.series.xAxis, yAxis = point.series.yAxis, chart = point.series.chart, clusterOptions = series.options.cluster, drillToCluster = (clusterOptions || {}).drillToCluster, offsetX, offsetY, sortedDataX, sortedDataY, minX, minY, maxX, maxY;
  752. if (drillToCluster && point.clusteredData) {
  753. sortedDataX = point.clusteredData.map(function (data) {
  754. return data.x;
  755. }).sort(function (a, b) { return a - b; });
  756. sortedDataY = point.clusteredData.map(function (data) {
  757. return data.y;
  758. }).sort(function (a, b) { return a - b; });
  759. minX = sortedDataX[0];
  760. maxX = sortedDataX[sortedDataX.length - 1];
  761. minY = sortedDataY[0];
  762. maxY = sortedDataY[sortedDataY.length - 1];
  763. offsetX = Math.abs((maxX - minX) * 0.1);
  764. offsetY = Math.abs((maxY - minY) * 0.1);
  765. chart.pointer.zoomX = true;
  766. chart.pointer.zoomY = true;
  767. // Swap when minus values.
  768. if (minX > maxX) {
  769. _a = [maxX, minX], minX = _a[0], maxX = _a[1];
  770. }
  771. if (minY > maxY) {
  772. _b = [maxY, minY], minY = _b[0], maxY = _b[1];
  773. }
  774. chart.zoom({
  775. originalEvent: e,
  776. xAxis: [{
  777. axis: xAxis,
  778. min: minX - offsetX,
  779. max: maxX + offsetX
  780. }],
  781. yAxis: [{
  782. axis: yAxis,
  783. min: minY - offsetY,
  784. max: maxY + offsetY
  785. }]
  786. });
  787. }
  788. });
  789. };
  790. Scatter.prototype.getClusterDistancesFromPoint = function (clusters, pointX, pointY) {
  791. var series = this, xAxis = series.xAxis, yAxis = series.yAxis, pointClusterDistance = [], j, distance;
  792. for (j = 0; j < clusters.length; j++) {
  793. distance = Math.sqrt(Math.pow(xAxis.toPixels(pointX) -
  794. xAxis.toPixels(clusters[j].posX), 2) +
  795. Math.pow(yAxis.toPixels(pointY) -
  796. yAxis.toPixels(clusters[j].posY), 2));
  797. pointClusterDistance.push({
  798. clusterIndex: j,
  799. distance: distance
  800. });
  801. }
  802. return pointClusterDistance.sort(function (a, b) { return a.distance - b.distance; });
  803. };
  804. // Point state used when animation is enabled to compare
  805. // and bind old points with new ones.
  806. Scatter.prototype.getPointsState = function (clusteredData, oldMarkerClusterInfo, dataLength) {
  807. var oldDataStateArr = oldMarkerClusterInfo ?
  808. getDataState(oldMarkerClusterInfo, dataLength) : [], newDataStateArr = getDataState(clusteredData, dataLength), state = {}, newState, oldState, i;
  809. // Clear global array before populate with new ids.
  810. oldPointsStateId = [];
  811. // Build points state structure.
  812. clusteredData.clusters.forEach(function (cluster) {
  813. state[cluster.stateId] = {
  814. x: cluster.x,
  815. y: cluster.y,
  816. id: cluster.stateId,
  817. point: cluster.point,
  818. parentsId: []
  819. };
  820. });
  821. clusteredData.noise.forEach(function (noise) {
  822. state[noise.stateId] = {
  823. x: noise.x,
  824. y: noise.y,
  825. id: noise.stateId,
  826. point: noise.point,
  827. parentsId: []
  828. };
  829. });
  830. // Bind new and old state.
  831. for (i = 0; i < newDataStateArr.length; i++) {
  832. newState = newDataStateArr[i];
  833. oldState = oldDataStateArr[i];
  834. if (newState &&
  835. oldState &&
  836. newState.parentStateId &&
  837. oldState.parentStateId &&
  838. state[newState.parentStateId] &&
  839. state[newState.parentStateId].parentsId.indexOf(oldState.parentStateId) === -1) {
  840. state[newState.parentStateId].parentsId.push(oldState.parentStateId);
  841. if (oldPointsStateId.indexOf(oldState.parentStateId) === -1) {
  842. oldPointsStateId.push(oldState.parentStateId);
  843. }
  844. }
  845. }
  846. return state;
  847. };
  848. Scatter.prototype.markerClusterAlgorithms = {
  849. grid: function (dataX, dataY, dataIndexes, options) {
  850. var series = this, xAxis = series.xAxis, yAxis = series.yAxis, grid = {}, gridOffset = series.getGridOffset(), scaledGridSize, x, y, gridX, gridY, key, i;
  851. // drawGridLines(series, options);
  852. scaledGridSize = series.getScaledGridSize(options);
  853. for (i = 0; i < dataX.length; i++) {
  854. x = xAxis.toPixels(dataX[i]) - gridOffset.plotLeft;
  855. y = yAxis.toPixels(dataY[i]) - gridOffset.plotTop;
  856. gridX = Math.floor(x / scaledGridSize);
  857. gridY = Math.floor(y / scaledGridSize);
  858. key = gridY + '-' + gridX;
  859. if (!grid[key]) {
  860. grid[key] = [];
  861. }
  862. grid[key].push({
  863. dataIndex: dataIndexes[i],
  864. x: dataX[i],
  865. y: dataY[i]
  866. });
  867. }
  868. return grid;
  869. },
  870. kmeans: function (dataX, dataY, dataIndexes, options) {
  871. var series = this, clusters = [], noise = [], group = {}, pointMaxDistance = options.processedDistance ||
  872. clusterDefaultOptions.layoutAlgorithm.distance, iterations = options.iterations,
  873. // Max pixel difference beetwen new and old cluster position.
  874. maxClusterShift = 1, currentIteration = 0, repeat = true, pointX = 0, pointY = 0, tempPos, pointClusterDistance = [], groupedData, key, i, j;
  875. options.processedGridSize = options.processedDistance;
  876. // Use grid method to get groupedData object.
  877. groupedData = series.markerClusterAlgorithms ?
  878. series.markerClusterAlgorithms.grid.call(series, dataX, dataY, dataIndexes, options) : {};
  879. // Find clusters amount and its start positions
  880. // based on grid grouped data.
  881. for (key in groupedData) {
  882. if (groupedData[key].length > 1) {
  883. tempPos = getClusterPosition(groupedData[key]);
  884. clusters.push({
  885. posX: tempPos.x,
  886. posY: tempPos.y,
  887. oldX: 0,
  888. oldY: 0,
  889. startPointsLen: groupedData[key].length,
  890. points: []
  891. });
  892. }
  893. }
  894. // Start kmeans iteration process.
  895. while (repeat) {
  896. clusters.map(function (c) {
  897. c.points.length = 0;
  898. return c;
  899. });
  900. noise.length = 0;
  901. for (i = 0; i < dataX.length; i++) {
  902. pointX = dataX[i];
  903. pointY = dataY[i];
  904. pointClusterDistance = series.getClusterDistancesFromPoint(clusters, pointX, pointY);
  905. if (pointClusterDistance.length &&
  906. pointClusterDistance[0].distance < pointMaxDistance) {
  907. clusters[pointClusterDistance[0].clusterIndex].points.push({
  908. x: pointX,
  909. y: pointY,
  910. dataIndex: dataIndexes[i]
  911. });
  912. }
  913. else {
  914. noise.push({
  915. x: pointX,
  916. y: pointY,
  917. dataIndex: dataIndexes[i]
  918. });
  919. }
  920. }
  921. // When cluster points array has only one point the
  922. // point should be classified again.
  923. for (j = 0; j < clusters.length; j++) {
  924. if (clusters[j].points.length === 1) {
  925. pointClusterDistance = series.getClusterDistancesFromPoint(clusters, clusters[j].points[0].x, clusters[j].points[0].y);
  926. if (pointClusterDistance[1].distance < pointMaxDistance) {
  927. // Add point to the next closest cluster.
  928. clusters[pointClusterDistance[1].clusterIndex].points
  929. .push(clusters[j].points[0]);
  930. // Clear points array.
  931. clusters[pointClusterDistance[0].clusterIndex]
  932. .points.length = 0;
  933. }
  934. }
  935. }
  936. // Compute a new clusters position and check if it
  937. // is different than the old one.
  938. repeat = false;
  939. for (j = 0; j < clusters.length; j++) {
  940. tempPos = getClusterPosition(clusters[j].points);
  941. clusters[j].oldX = clusters[j].posX;
  942. clusters[j].oldY = clusters[j].posY;
  943. clusters[j].posX = tempPos.x;
  944. clusters[j].posY = tempPos.y;
  945. // Repeat the algorithm if at least one cluster
  946. // is shifted more than maxClusterShift property.
  947. if (clusters[j].posX > clusters[j].oldX + maxClusterShift ||
  948. clusters[j].posX < clusters[j].oldX - maxClusterShift ||
  949. clusters[j].posY > clusters[j].oldY + maxClusterShift ||
  950. clusters[j].posY < clusters[j].oldY - maxClusterShift) {
  951. repeat = true;
  952. }
  953. }
  954. // If iterations property is set repeat the algorithm
  955. // specified amount of times.
  956. if (iterations) {
  957. repeat = currentIteration < iterations - 1;
  958. }
  959. currentIteration++;
  960. }
  961. clusters.forEach(function (cluster, i) {
  962. group['cluster' + i] = cluster.points;
  963. });
  964. noise.forEach(function (noise, i) {
  965. group['noise' + i] = [noise];
  966. });
  967. return group;
  968. },
  969. optimizedKmeans: function (processedXData, processedYData, dataIndexes, options) {
  970. var series = this, xAxis = series.xAxis, yAxis = series.yAxis, pointMaxDistance = options.processedDistance ||
  971. clusterDefaultOptions.layoutAlgorithm.gridSize, group = {}, extremes = series.getRealExtremes(), clusterMarkerOptions = (series.options.cluster || {}).marker, offset, distance, radius;
  972. if (!series.markerClusterInfo || (series.initMaxX && series.initMaxX < extremes.maxX ||
  973. series.initMinX && series.initMinX > extremes.minX ||
  974. series.initMaxY && series.initMaxY < extremes.maxY ||
  975. series.initMinY && series.initMinY > extremes.minY)) {
  976. series.initMaxX = extremes.maxX;
  977. series.initMinX = extremes.minX;
  978. series.initMaxY = extremes.maxY;
  979. series.initMinY = extremes.minY;
  980. group = series.markerClusterAlgorithms ?
  981. series.markerClusterAlgorithms.kmeans.call(series, processedXData, processedYData, dataIndexes, options) : {};
  982. series.baseClusters = null;
  983. }
  984. else {
  985. if (!series.baseClusters) {
  986. series.baseClusters = {
  987. clusters: series.markerClusterInfo.clusters,
  988. noise: series.markerClusterInfo.noise
  989. };
  990. }
  991. series.baseClusters.clusters.forEach(function (cluster) {
  992. cluster.pointsOutside = [];
  993. cluster.pointsInside = [];
  994. cluster.data.forEach(function (dataPoint) {
  995. distance = Math.sqrt(Math.pow(xAxis.toPixels(dataPoint.x) -
  996. xAxis.toPixels(cluster.x), 2) +
  997. Math.pow(yAxis.toPixels(dataPoint.y) -
  998. yAxis.toPixels(cluster.y), 2));
  999. if (cluster.clusterZone &&
  1000. cluster.clusterZone.marker &&
  1001. cluster.clusterZone.marker.radius) {
  1002. radius = cluster.clusterZone.marker.radius;
  1003. }
  1004. else if (clusterMarkerOptions &&
  1005. clusterMarkerOptions.radius) {
  1006. radius = clusterMarkerOptions.radius;
  1007. }
  1008. else {
  1009. radius = clusterDefaultOptions.marker.radius;
  1010. }
  1011. offset = pointMaxDistance - radius >= 0 ?
  1012. pointMaxDistance - radius : radius;
  1013. if (distance > radius + offset &&
  1014. defined(cluster.pointsOutside)) {
  1015. cluster.pointsOutside.push(dataPoint);
  1016. }
  1017. else if (defined(cluster.pointsInside)) {
  1018. cluster.pointsInside.push(dataPoint);
  1019. }
  1020. });
  1021. if (cluster.pointsInside.length) {
  1022. group[cluster.id] = cluster.pointsInside;
  1023. }
  1024. cluster.pointsOutside.forEach(function (p, i) {
  1025. group[cluster.id + '_noise' + i] = [p];
  1026. });
  1027. });
  1028. series.baseClusters.noise.forEach(function (noise) {
  1029. group[noise.id] = noise.data;
  1030. });
  1031. }
  1032. return group;
  1033. }
  1034. };
  1035. Scatter.prototype.preventClusterCollisions = function (props) {
  1036. var series = this, xAxis = series.xAxis, yAxis = series.yAxis, _a = props.key.split('-').map(parseFloat), gridY = _a[0], gridX = _a[1], gridSize = props.gridSize, groupedData = props.groupedData, defaultRadius = props.defaultRadius, clusterRadius = props.clusterRadius, gridXPx = gridX * gridSize, gridYPx = gridY * gridSize, xPixel = xAxis.toPixels(props.x), yPixel = yAxis.toPixels(props.y), gridsToCheckCollision = [], pointsLen = 0, radius = 0, clusterMarkerOptions = (series.options.cluster || {}).marker, zoneOptions = (series.options.cluster || {}).zones, gridOffset = series.getGridOffset(), nextXPixel, nextYPixel, signX, signY, cornerGridX, cornerGridY, i, j, itemX, itemY, nextClusterPos, maxDist, keys, x, y;
  1037. // Distance to the grid start.
  1038. xPixel -= gridOffset.plotLeft;
  1039. yPixel -= gridOffset.plotTop;
  1040. for (i = 1; i < 5; i++) {
  1041. signX = i % 2 ? -1 : 1;
  1042. signY = i < 3 ? -1 : 1;
  1043. cornerGridX = Math.floor((xPixel + signX * clusterRadius) / gridSize);
  1044. cornerGridY = Math.floor((yPixel + signY * clusterRadius) / gridSize);
  1045. keys = [
  1046. cornerGridY + '-' + cornerGridX,
  1047. cornerGridY + '-' + gridX,
  1048. gridY + '-' + cornerGridX
  1049. ];
  1050. for (j = 0; j < keys.length; j++) {
  1051. if (gridsToCheckCollision.indexOf(keys[j]) === -1 &&
  1052. keys[j] !== props.key) {
  1053. gridsToCheckCollision.push(keys[j]);
  1054. }
  1055. }
  1056. }
  1057. gridsToCheckCollision.forEach(function (item) {
  1058. var _a;
  1059. if (groupedData[item]) {
  1060. // Cluster or noise position is already computed.
  1061. if (!groupedData[item].posX) {
  1062. nextClusterPos = getClusterPosition(groupedData[item]);
  1063. groupedData[item].posX = nextClusterPos.x;
  1064. groupedData[item].posY = nextClusterPos.y;
  1065. }
  1066. nextXPixel = xAxis.toPixels(groupedData[item].posX || 0) -
  1067. gridOffset.plotLeft;
  1068. nextYPixel = yAxis.toPixels(groupedData[item].posY || 0) -
  1069. gridOffset.plotTop;
  1070. _a = item.split('-').map(parseFloat), itemY = _a[0], itemX = _a[1];
  1071. if (zoneOptions) {
  1072. pointsLen = groupedData[item].length;
  1073. for (i = 0; i < zoneOptions.length; i++) {
  1074. if (pointsLen >= zoneOptions[i].from &&
  1075. pointsLen <= zoneOptions[i].to) {
  1076. if (defined((zoneOptions[i].marker || {}).radius)) {
  1077. radius = zoneOptions[i].marker.radius || 0;
  1078. }
  1079. else if (clusterMarkerOptions &&
  1080. clusterMarkerOptions.radius) {
  1081. radius = clusterMarkerOptions.radius;
  1082. }
  1083. else {
  1084. radius = clusterDefaultOptions.marker.radius;
  1085. }
  1086. }
  1087. }
  1088. }
  1089. if (groupedData[item].length > 1 &&
  1090. radius === 0 &&
  1091. clusterMarkerOptions &&
  1092. clusterMarkerOptions.radius) {
  1093. radius = clusterMarkerOptions.radius;
  1094. }
  1095. else if (groupedData[item].length === 1) {
  1096. radius = defaultRadius;
  1097. }
  1098. maxDist = clusterRadius + radius;
  1099. radius = 0;
  1100. if (itemX !== gridX &&
  1101. Math.abs(xPixel - nextXPixel) < maxDist) {
  1102. xPixel = itemX - gridX < 0 ? gridXPx + clusterRadius :
  1103. gridXPx + gridSize - clusterRadius;
  1104. }
  1105. if (itemY !== gridY &&
  1106. Math.abs(yPixel - nextYPixel) < maxDist) {
  1107. yPixel = itemY - gridY < 0 ? gridYPx + clusterRadius :
  1108. gridYPx + gridSize - clusterRadius;
  1109. }
  1110. }
  1111. });
  1112. x = xAxis.toValue(xPixel + gridOffset.plotLeft);
  1113. y = yAxis.toValue(yPixel + gridOffset.plotTop);
  1114. groupedData[props.key].posX = x;
  1115. groupedData[props.key].posY = y;
  1116. return { x: x, y: y };
  1117. };
  1118. // Check if user algorithm result is valid groupedDataObject.
  1119. Scatter.prototype.isValidGroupedDataObject = function (groupedData) {
  1120. var result = false, i;
  1121. if (!isObject(groupedData)) {
  1122. return false;
  1123. }
  1124. objectEach(groupedData, function (elem) {
  1125. result = true;
  1126. if (!isArray(elem) || !elem.length) {
  1127. result = false;
  1128. return;
  1129. }
  1130. for (i = 0; i < elem.length; i++) {
  1131. if (!isObject(elem[i]) || (!elem[i].x || !elem[i].y)) {
  1132. result = false;
  1133. return;
  1134. }
  1135. }
  1136. });
  1137. return result;
  1138. };
  1139. Scatter.prototype.getClusteredData = function (groupedData, options) {
  1140. var series = this, groupedXData = [], groupedYData = [], clusters = [], // Container for clusters.
  1141. noise = [], // Container for points not belonging to any cluster.
  1142. groupMap = [], index = 0,
  1143. // Prevent minimumClusterSize lower than 2.
  1144. minimumClusterSize = Math.max(2, options.minimumClusterSize || 2), stateId, point, points, pointUserOptions, pointsLen, marker, clusterPos, pointOptions, clusterTempPos, zoneOptions, clusterZone, clusterZoneClassName, i, k;
  1145. // Check if groupedData is valid when user uses a custom algorithm.
  1146. if (isFunction(options.layoutAlgorithm.type) &&
  1147. !series.isValidGroupedDataObject(groupedData)) {
  1148. error('Highcharts marker-clusters module: ' +
  1149. 'The custom algorithm result is not valid!', false, series.chart);
  1150. return false;
  1151. }
  1152. for (k in groupedData) {
  1153. if (groupedData[k].length >= minimumClusterSize) {
  1154. points = groupedData[k];
  1155. stateId = getStateId();
  1156. pointsLen = points.length;
  1157. // Get zone options for cluster.
  1158. if (options.zones) {
  1159. for (i = 0; i < options.zones.length; i++) {
  1160. if (pointsLen >= options.zones[i].from &&
  1161. pointsLen <= options.zones[i].to) {
  1162. clusterZone = options.zones[i];
  1163. clusterZone.zoneIndex = i;
  1164. zoneOptions = options.zones[i].marker;
  1165. clusterZoneClassName = options.zones[i].className;
  1166. }
  1167. }
  1168. }
  1169. clusterTempPos = getClusterPosition(points);
  1170. if (options.layoutAlgorithm.type === 'grid' &&
  1171. !options.allowOverlap) {
  1172. marker = series.options.marker || {};
  1173. clusterPos = series.preventClusterCollisions({
  1174. x: clusterTempPos.x,
  1175. y: clusterTempPos.y,
  1176. key: k,
  1177. groupedData: groupedData,
  1178. gridSize: series.getScaledGridSize(options.layoutAlgorithm),
  1179. defaultRadius: marker.radius || 3 + (marker.lineWidth || 0),
  1180. clusterRadius: (zoneOptions && zoneOptions.radius) ?
  1181. zoneOptions.radius :
  1182. (options.marker || {}).radius ||
  1183. clusterDefaultOptions.marker.radius
  1184. });
  1185. }
  1186. else {
  1187. clusterPos = {
  1188. x: clusterTempPos.x,
  1189. y: clusterTempPos.y
  1190. };
  1191. }
  1192. for (i = 0; i < pointsLen; i++) {
  1193. points[i].parentStateId = stateId;
  1194. }
  1195. clusters.push({
  1196. x: clusterPos.x,
  1197. y: clusterPos.y,
  1198. id: k,
  1199. stateId: stateId,
  1200. index: index,
  1201. data: points,
  1202. clusterZone: clusterZone,
  1203. clusterZoneClassName: clusterZoneClassName
  1204. });
  1205. groupedXData.push(clusterPos.x);
  1206. groupedYData.push(clusterPos.y);
  1207. groupMap.push({
  1208. options: {
  1209. formatPrefix: 'cluster',
  1210. dataLabels: options.dataLabels,
  1211. marker: merge(options.marker, {
  1212. states: options.states
  1213. }, zoneOptions || {})
  1214. }
  1215. });
  1216. // Save cluster data points options.
  1217. if (series.options.data && series.options.data.length) {
  1218. for (i = 0; i < pointsLen; i++) {
  1219. if (isObject(series.options.data[points[i].dataIndex])) {
  1220. points[i].options =
  1221. series.options.data[points[i].dataIndex];
  1222. }
  1223. }
  1224. }
  1225. index++;
  1226. zoneOptions = null;
  1227. }
  1228. else {
  1229. for (i = 0; i < groupedData[k].length; i++) {
  1230. // Points not belonging to any cluster.
  1231. point = groupedData[k][i];
  1232. stateId = getStateId();
  1233. pointOptions = null;
  1234. pointUserOptions =
  1235. ((series.options || {}).data || [])[point.dataIndex];
  1236. groupedXData.push(point.x);
  1237. groupedYData.push(point.y);
  1238. point.parentStateId = stateId;
  1239. noise.push({
  1240. x: point.x,
  1241. y: point.y,
  1242. id: k,
  1243. stateId: stateId,
  1244. index: index,
  1245. data: groupedData[k]
  1246. });
  1247. if (pointUserOptions &&
  1248. typeof pointUserOptions === 'object' &&
  1249. !isArray(pointUserOptions)) {
  1250. pointOptions = merge(pointUserOptions, { x: point.x, y: point.y });
  1251. }
  1252. else {
  1253. pointOptions = {
  1254. userOptions: pointUserOptions,
  1255. x: point.x,
  1256. y: point.y
  1257. };
  1258. }
  1259. groupMap.push({ options: pointOptions });
  1260. index++;
  1261. }
  1262. }
  1263. }
  1264. return {
  1265. clusters: clusters,
  1266. noise: noise,
  1267. groupedXData: groupedXData,
  1268. groupedYData: groupedYData,
  1269. groupMap: groupMap
  1270. };
  1271. };
  1272. // Destroy clustered data points.
  1273. Scatter.prototype.destroyClusteredData = function () {
  1274. var clusteredSeriesData = this.markerClusterSeriesData;
  1275. // Clear previous groups.
  1276. (clusteredSeriesData || []).forEach(function (point) {
  1277. if (point && point.destroy) {
  1278. point.destroy();
  1279. }
  1280. });
  1281. this.markerClusterSeriesData = null;
  1282. };
  1283. // Hide clustered data points.
  1284. Scatter.prototype.hideClusteredData = function () {
  1285. var series = this, clusteredSeriesData = this.markerClusterSeriesData, oldState = ((series.markerClusterInfo || {}).pointsState || {}).oldState || {}, oldPointsId = oldPointsStateId.map(function (elem) {
  1286. return (oldState[elem].point || {}).id || '';
  1287. });
  1288. (clusteredSeriesData || []).forEach(function (point) {
  1289. // If an old point is used in animation hide it, otherwise destroy.
  1290. if (point &&
  1291. oldPointsId.indexOf(point.id) !== -1) {
  1292. if (point.graphic) {
  1293. point.graphic.hide();
  1294. }
  1295. if (point.dataLabel) {
  1296. point.dataLabel.hide();
  1297. }
  1298. }
  1299. else {
  1300. if (point && point.destroy) {
  1301. point.destroy();
  1302. }
  1303. }
  1304. });
  1305. };
  1306. // Override the generatePoints method by adding a reference to grouped data.
  1307. Scatter.prototype.generatePoints = function () {
  1308. var series = this, chart = series.chart, xAxis = series.xAxis, yAxis = series.yAxis, clusterOptions = series.options.cluster, realExtremes = series.getRealExtremes(), visibleXData = [], visibleYData = [], visibleDataIndexes = [], oldPointsState, oldDataLen, oldMarkerClusterInfo, kmeansThreshold, cropDataOffsetX, cropDataOffsetY, seriesMinX, seriesMaxX, seriesMinY, seriesMaxY, type, algorithm, clusteredData, groupedData, layoutAlgOptions, point, i;
  1309. if (clusterOptions &&
  1310. clusterOptions.enabled &&
  1311. series.xData &&
  1312. series.yData &&
  1313. !chart.polar) {
  1314. type = clusterOptions.layoutAlgorithm.type;
  1315. layoutAlgOptions = clusterOptions.layoutAlgorithm;
  1316. // Get processed algorithm properties.
  1317. layoutAlgOptions.processedGridSize = relativeLength(layoutAlgOptions.gridSize ||
  1318. clusterDefaultOptions.layoutAlgorithm.gridSize, chart.plotWidth);
  1319. layoutAlgOptions.processedDistance = relativeLength(layoutAlgOptions.distance ||
  1320. clusterDefaultOptions.layoutAlgorithm.distance, chart.plotWidth);
  1321. kmeansThreshold = layoutAlgOptions.kmeansThreshold ||
  1322. clusterDefaultOptions.layoutAlgorithm.kmeansThreshold;
  1323. // Offset to prevent cluster size changes.
  1324. cropDataOffsetX = Math.abs(xAxis.toValue(layoutAlgOptions.processedGridSize / 2) -
  1325. xAxis.toValue(0));
  1326. cropDataOffsetY = Math.abs(yAxis.toValue(layoutAlgOptions.processedGridSize / 2) -
  1327. yAxis.toValue(0));
  1328. // Get only visible data.
  1329. for (i = 0; i < series.xData.length; i++) {
  1330. if (!series.dataMaxX) {
  1331. if (!defined(seriesMaxX) ||
  1332. !defined(seriesMinX) ||
  1333. !defined(seriesMaxY) ||
  1334. !defined(seriesMinY)) {
  1335. seriesMaxX = seriesMinX = series.xData[i];
  1336. seriesMaxY = seriesMinY = series.yData[i];
  1337. }
  1338. else if (isNumber(series.yData[i]) &&
  1339. isNumber(seriesMaxY) &&
  1340. isNumber(seriesMinY)) {
  1341. seriesMaxX = Math.max(series.xData[i], seriesMaxX);
  1342. seriesMinX = Math.min(series.xData[i], seriesMinX);
  1343. seriesMaxY = Math.max(series.yData[i] || seriesMaxY, seriesMaxY);
  1344. seriesMinY = Math.min(series.yData[i] || seriesMinY, seriesMinY);
  1345. }
  1346. }
  1347. // Crop data to visible ones with appropriate offset to prevent
  1348. // cluster size changes on the edge of the plot area.
  1349. if (series.xData[i] >= (realExtremes.minX - cropDataOffsetX) &&
  1350. series.xData[i] <= (realExtremes.maxX + cropDataOffsetX) &&
  1351. (series.yData[i] || realExtremes.minY) >=
  1352. (realExtremes.minY - cropDataOffsetY) &&
  1353. (series.yData[i] || realExtremes.maxY) <=
  1354. (realExtremes.maxY + cropDataOffsetY)) {
  1355. visibleXData.push(series.xData[i]);
  1356. visibleYData.push(series.yData[i]);
  1357. visibleDataIndexes.push(i);
  1358. }
  1359. }
  1360. // Save data max values.
  1361. if (defined(seriesMaxX) && defined(seriesMinX) &&
  1362. isNumber(seriesMaxY) && isNumber(seriesMinY)) {
  1363. series.dataMaxX = seriesMaxX;
  1364. series.dataMinX = seriesMinX;
  1365. series.dataMaxY = seriesMaxY;
  1366. series.dataMinY = seriesMinY;
  1367. }
  1368. if (isFunction(type)) {
  1369. algorithm = type;
  1370. }
  1371. else if (series.markerClusterAlgorithms) {
  1372. if (type && series.markerClusterAlgorithms[type]) {
  1373. algorithm = series.markerClusterAlgorithms[type];
  1374. }
  1375. else {
  1376. algorithm = visibleXData.length < kmeansThreshold ?
  1377. series.markerClusterAlgorithms.kmeans :
  1378. series.markerClusterAlgorithms.grid;
  1379. }
  1380. }
  1381. else {
  1382. algorithm = function () {
  1383. return false;
  1384. };
  1385. }
  1386. groupedData = algorithm.call(this, visibleXData, visibleYData, visibleDataIndexes, layoutAlgOptions);
  1387. clusteredData = groupedData ? series.getClusteredData(groupedData, clusterOptions) : groupedData;
  1388. // When animation is enabled get old points state.
  1389. if (clusterOptions.animation &&
  1390. series.markerClusterInfo &&
  1391. series.markerClusterInfo.pointsState &&
  1392. series.markerClusterInfo.pointsState.oldState) {
  1393. // Destroy old points.
  1394. destroyOldPoints(series.markerClusterInfo.pointsState.oldState);
  1395. oldPointsState = series.markerClusterInfo.pointsState.newState;
  1396. }
  1397. else {
  1398. oldPointsState = {};
  1399. }
  1400. // Save points old state info.
  1401. oldDataLen = series.xData.length;
  1402. oldMarkerClusterInfo = series.markerClusterInfo;
  1403. if (clusteredData) {
  1404. series.processedXData = clusteredData.groupedXData;
  1405. series.processedYData = clusteredData.groupedYData;
  1406. series.hasGroupedData = true;
  1407. series.markerClusterInfo = clusteredData;
  1408. series.groupMap = clusteredData.groupMap;
  1409. }
  1410. baseGeneratePoints.apply(this);
  1411. if (clusteredData && series.markerClusterInfo) {
  1412. // Mark cluster points. Safe point reference in the cluster object.
  1413. (series.markerClusterInfo.clusters || []).forEach(function (cluster) {
  1414. point = series.points[cluster.index];
  1415. point.isCluster = true;
  1416. point.clusteredData = cluster.data;
  1417. point.clusterPointsAmount = cluster.data.length;
  1418. cluster.point = point;
  1419. // Add zoom to cluster range.
  1420. addEvent(point, 'click', series.onDrillToCluster);
  1421. });
  1422. // Safe point reference in the noise object.
  1423. (series.markerClusterInfo.noise || []).forEach(function (noise) {
  1424. noise.point = series.points[noise.index];
  1425. });
  1426. // When animation is enabled save points state.
  1427. if (clusterOptions.animation &&
  1428. series.markerClusterInfo) {
  1429. series.markerClusterInfo.pointsState = {
  1430. oldState: oldPointsState,
  1431. newState: series.getPointsState(clusteredData, oldMarkerClusterInfo, oldDataLen)
  1432. };
  1433. }
  1434. // Record grouped data in order to let it be destroyed the next time
  1435. // processData runs.
  1436. if (!clusterOptions.animation) {
  1437. this.destroyClusteredData();
  1438. }
  1439. else {
  1440. this.hideClusteredData();
  1441. }
  1442. this.markerClusterSeriesData =
  1443. this.hasGroupedData ? this.points : null;
  1444. }
  1445. }
  1446. else {
  1447. baseGeneratePoints.apply(this);
  1448. }
  1449. };
  1450. // Handle animation.
  1451. addEvent(Chart, 'render', function () {
  1452. var chart = this;
  1453. (chart.series || []).forEach(function (series) {
  1454. if (series.markerClusterInfo) {
  1455. var options = series.options.cluster, pointsState = (series.markerClusterInfo || {}).pointsState, oldState = (pointsState || {}).oldState;
  1456. if ((options || {}).animation &&
  1457. series.markerClusterInfo &&
  1458. series.chart.pointer.pinchDown.length === 0 &&
  1459. (series.xAxis.eventArgs || {}).trigger !== 'pan' &&
  1460. oldState &&
  1461. Object.keys(oldState).length) {
  1462. series.markerClusterInfo.clusters.forEach(function (cluster) {
  1463. series.animateClusterPoint(cluster);
  1464. });
  1465. series.markerClusterInfo.noise.forEach(function (noise) {
  1466. series.animateClusterPoint(noise);
  1467. });
  1468. }
  1469. }
  1470. });
  1471. });
  1472. // Override point prototype to throw a warning when trying to update
  1473. // clustered point.
  1474. addEvent(Point, 'update', function () {
  1475. if (this.dataGroup) {
  1476. error('Highcharts marker-clusters module: ' +
  1477. 'Running `Point.update` when point belongs to clustered series' +
  1478. ' is not supported.', false, this.series.chart);
  1479. return false;
  1480. }
  1481. });
  1482. // Destroy grouped data on series destroy.
  1483. addEvent(Series, 'destroy', Scatter.prototype.destroyClusteredData);
  1484. // Add classes, change mouse cursor.
  1485. addEvent(Series, 'afterRender', function () {
  1486. var series = this, clusterZoomEnabled = (series.options.cluster || {}).drillToCluster;
  1487. if (series.markerClusterInfo && series.markerClusterInfo.clusters) {
  1488. series.markerClusterInfo.clusters.forEach(function (cluster) {
  1489. if (cluster.point && cluster.point.graphic) {
  1490. cluster.point.graphic.addClass('highcharts-cluster-point');
  1491. // Change cursor to pointer when drillToCluster is enabled.
  1492. if (clusterZoomEnabled && cluster.point) {
  1493. cluster.point.graphic.css({
  1494. cursor: 'pointer'
  1495. });
  1496. if (cluster.point.dataLabel) {
  1497. cluster.point.dataLabel.css({
  1498. cursor: 'pointer'
  1499. });
  1500. }
  1501. }
  1502. if (defined(cluster.clusterZone)) {
  1503. cluster.point.graphic.addClass(cluster.clusterZoneClassName ||
  1504. 'highcharts-cluster-zone-' +
  1505. cluster.clusterZone.zoneIndex);
  1506. }
  1507. }
  1508. });
  1509. }
  1510. });
  1511. addEvent(Point, 'drillToCluster', function (event) {
  1512. var point = event.point || event.target, series = point.series, clusterOptions = series.options.cluster, onDrillToCluster = ((clusterOptions || {}).events || {}).drillToCluster;
  1513. if (isFunction(onDrillToCluster)) {
  1514. onDrillToCluster.call(this, event);
  1515. }
  1516. });
  1517. // Destroy the old tooltip after zoom.
  1518. addEvent(H.Axis, 'setExtremes', function () {
  1519. var chart = this.chart, animationDuration = 0, animation;
  1520. chart.series.forEach(function (series) {
  1521. if (series.markerClusterInfo) {
  1522. animation = animObject((series.options.cluster || {}).animation);
  1523. animationDuration = animation.duration || 0;
  1524. }
  1525. });
  1526. syncTimeout(function () {
  1527. if (chart.tooltip) {
  1528. chart.tooltip.destroy();
  1529. }
  1530. }, animationDuration);
  1531. });
  1532. });
  1533. _registerModule(_modules, 'masters/modules/marker-clusters.src.js', [], function () {
  1534. });
  1535. }));