MapSeries.js 39 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045
  1. /* *
  2. *
  3. * (c) 2010-2019 Torstein Honsi
  4. *
  5. * License: www.highcharts.com/license
  6. *
  7. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  8. *
  9. * */
  10. 'use strict';
  11. import H from '../parts/Globals.js';
  12. import '../parts/Color.js';
  13. import '../parts/Legend.js';
  14. import '../parts/Options.js';
  15. import '../parts/Point.js';
  16. import '../parts/ScatterSeries.js';
  17. import '../parts/Series.js';
  18. import './ColorMapSeriesMixin.js';
  19. import U from '../parts/Utilities.js';
  20. var extend = U.extend, isArray = U.isArray, isNumber = U.isNumber, objectEach = U.objectEach, pick = U.pick, splat = U.splat;
  21. var colorMapPointMixin = H.colorMapPointMixin, colorMapSeriesMixin = H.colorMapSeriesMixin, LegendSymbolMixin = H.LegendSymbolMixin, merge = H.merge, noop = H.noop, fireEvent = H.fireEvent, Point = H.Point, Series = H.Series, seriesType = H.seriesType, seriesTypes = H.seriesTypes;
  22. /**
  23. * @private
  24. * @class
  25. * @name Highcharts.seriesTypes.map
  26. *
  27. * @augments Highcharts.Series
  28. */
  29. seriesType('map', 'scatter',
  30. /**
  31. * The map series is used for basic choropleth maps, where each map area has
  32. * a color based on its value.
  33. *
  34. * @sample maps/demo/all-maps/
  35. * Choropleth map
  36. *
  37. * @extends plotOptions.scatter
  38. * @excluding marker, cluster
  39. * @product highmaps
  40. * @optionparent plotOptions.map
  41. */
  42. {
  43. animation: false,
  44. dataLabels: {
  45. crop: false,
  46. formatter: function () {
  47. return this.point.value;
  48. },
  49. inside: true,
  50. overflow: false,
  51. padding: 0,
  52. verticalAlign: 'middle'
  53. },
  54. /**
  55. * @ignore-option
  56. *
  57. * @private
  58. */
  59. marker: null,
  60. /**
  61. * The color to apply to null points.
  62. *
  63. * In styled mode, the null point fill is set in the
  64. * `.highcharts-null-point` class.
  65. *
  66. * @sample maps/demo/all-areas-as-null/
  67. * Null color
  68. *
  69. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  70. *
  71. * @private
  72. */
  73. nullColor: '#f7f7f7',
  74. /**
  75. * Whether to allow pointer interaction like tooltips and mouse events
  76. * on null points.
  77. *
  78. * @type {boolean}
  79. * @since 4.2.7
  80. * @apioption plotOptions.map.nullInteraction
  81. *
  82. * @private
  83. */
  84. stickyTracking: false,
  85. tooltip: {
  86. followPointer: true,
  87. pointFormat: '{point.name}: {point.value}<br/>'
  88. },
  89. /**
  90. * @ignore-option
  91. *
  92. * @private
  93. */
  94. turboThreshold: 0,
  95. /**
  96. * Whether all areas of the map defined in `mapData` should be rendered.
  97. * If `true`, areas which don't correspond to a data point, are rendered
  98. * as `null` points. If `false`, those areas are skipped.
  99. *
  100. * @sample maps/plotoptions/series-allareas-false/
  101. * All areas set to false
  102. *
  103. * @type {boolean}
  104. * @default true
  105. * @product highmaps
  106. * @apioption plotOptions.series.allAreas
  107. *
  108. * @private
  109. */
  110. allAreas: true,
  111. /**
  112. * The border color of the map areas.
  113. *
  114. * In styled mode, the border stroke is given in the `.highcharts-point`
  115. * class.
  116. *
  117. * @sample {highmaps} maps/plotoptions/series-border/
  118. * Borders demo
  119. *
  120. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  121. * @default '#cccccc'
  122. * @product highmaps
  123. * @apioption plotOptions.series.borderColor
  124. *
  125. * @private
  126. */
  127. borderColor: '#cccccc',
  128. /**
  129. * The border width of each map area.
  130. *
  131. * In styled mode, the border stroke width is given in the
  132. * `.highcharts-point` class.
  133. *
  134. * @sample maps/plotoptions/series-border/
  135. * Borders demo
  136. *
  137. * @type {number}
  138. * @default 1
  139. * @product highmaps
  140. * @apioption plotOptions.series.borderWidth
  141. *
  142. * @private
  143. */
  144. borderWidth: 1,
  145. /**
  146. * @default value
  147. * @apioption plotOptions.map.colorKey
  148. */
  149. /**
  150. * What property to join the `mapData` to the value data. For example,
  151. * if joinBy is "code", the mapData items with a specific code is merged
  152. * into the data with the same code. For maps loaded from GeoJSON, the
  153. * keys may be held in each point's `properties` object.
  154. *
  155. * The joinBy option can also be an array of two values, where the first
  156. * points to a key in the `mapData`, and the second points to another
  157. * key in the `data`.
  158. *
  159. * When joinBy is `null`, the map items are joined by their position in
  160. * the array, which performs much better in maps with many data points.
  161. * This is the recommended option if you are printing more than a
  162. * thousand data points and have a backend that can preprocess the data
  163. * into a parallel array of the mapData.
  164. *
  165. * @sample maps/plotoptions/series-border/
  166. * Joined by "code"
  167. * @sample maps/demo/geojson/
  168. * GeoJSON joined by an array
  169. * @sample maps/series/joinby-null/
  170. * Simple data joined by null
  171. *
  172. * @type {string|Array<string>}
  173. * @default hc-key
  174. * @product highmaps
  175. * @apioption plotOptions.series.joinBy
  176. *
  177. * @private
  178. */
  179. joinBy: 'hc-key',
  180. /**
  181. * Define the z index of the series.
  182. *
  183. * @type {number}
  184. * @product highmaps
  185. * @apioption plotOptions.series.zIndex
  186. */
  187. /**
  188. * @apioption plotOptions.series.states
  189. *
  190. * @private
  191. */
  192. states: {
  193. /**
  194. * @apioption plotOptions.series.states.hover
  195. */
  196. hover: {
  197. /** @ignore-option */
  198. halo: null,
  199. /**
  200. * The color of the shape in this state.
  201. *
  202. * @sample maps/plotoptions/series-states-hover/
  203. * Hover options
  204. *
  205. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  206. * @product highmaps
  207. * @apioption plotOptions.series.states.hover.color
  208. */
  209. /**
  210. * The border color of the point in this state.
  211. *
  212. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  213. * @product highmaps
  214. * @apioption plotOptions.series.states.hover.borderColor
  215. */
  216. /**
  217. * The border width of the point in this state
  218. *
  219. * @type {number}
  220. * @product highmaps
  221. * @apioption plotOptions.series.states.hover.borderWidth
  222. */
  223. /**
  224. * The relative brightness of the point when hovered, relative
  225. * to the normal point color.
  226. *
  227. * @type {number}
  228. * @product highmaps
  229. * @default 0.2
  230. * @apioption plotOptions.series.states.hover.brightness
  231. */
  232. brightness: 0.2
  233. },
  234. /**
  235. * @apioption plotOptions.series.states.normal
  236. */
  237. normal: {
  238. /**
  239. * @productdesc {highmaps}
  240. * The animation adds some latency in order to reduce the effect
  241. * of flickering when hovering in and out of for example an
  242. * uneven coastline.
  243. *
  244. * @sample {highmaps} maps/plotoptions/series-states-animation-false/
  245. * No animation of fill color
  246. *
  247. * @apioption plotOptions.series.states.normal.animation
  248. */
  249. animation: true
  250. },
  251. /**
  252. * @apioption plotOptions.series.states.select
  253. */
  254. select: {
  255. /**
  256. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  257. * @default #cccccc
  258. * @product highmaps
  259. * @apioption plotOptions.series.states.select.color
  260. */
  261. color: '#cccccc'
  262. },
  263. inactive: {
  264. opacity: 1
  265. }
  266. }
  267. // Prototype members
  268. }, merge(colorMapSeriesMixin, {
  269. type: 'map',
  270. getExtremesFromAll: true,
  271. useMapGeometry: true,
  272. forceDL: true,
  273. searchPoint: noop,
  274. // When tooltip is not shared, this series (and derivatives) requires
  275. // direct touch/hover. KD-tree does not apply.
  276. directTouch: true,
  277. // X axis and Y axis must have same translation slope
  278. preserveAspectRatio: true,
  279. pointArrayMap: ['value'],
  280. // Extend setOptions by picking up the joinBy option and applying it
  281. // to a series property
  282. setOptions: function (itemOptions) {
  283. var options = Series.prototype.setOptions.call(this, itemOptions), joinBy = options.joinBy, joinByNull = joinBy === null;
  284. if (joinByNull) {
  285. joinBy = '_i';
  286. }
  287. joinBy = this.joinBy = splat(joinBy);
  288. if (!joinBy[1]) {
  289. joinBy[1] = joinBy[0];
  290. }
  291. return options;
  292. },
  293. // Get the bounding box of all paths in the map combined.
  294. getBox: function (paths) {
  295. var MAX_VALUE = Number.MAX_VALUE, maxX = -MAX_VALUE, minX = MAX_VALUE, maxY = -MAX_VALUE, minY = MAX_VALUE, minRange = MAX_VALUE, xAxis = this.xAxis, yAxis = this.yAxis, hasBox;
  296. // Find the bounding box
  297. (paths || []).forEach(function (point) {
  298. if (point.path) {
  299. if (typeof point.path === 'string') {
  300. point.path = H.splitPath(point.path);
  301. }
  302. var path = point.path || [], i = path.length, even = false, // while loop reads from the end
  303. pointMaxX = -MAX_VALUE, pointMinX = MAX_VALUE, pointMaxY = -MAX_VALUE, pointMinY = MAX_VALUE, properties = point.properties;
  304. // The first time a map point is used, analyze its box
  305. if (!point._foundBox) {
  306. while (i--) {
  307. if (isNumber(path[i])) {
  308. if (even) { // even = x
  309. pointMaxX =
  310. Math.max(pointMaxX, path[i]);
  311. pointMinX =
  312. Math.min(pointMinX, path[i]);
  313. }
  314. else { // odd = Y
  315. pointMaxY =
  316. Math.max(pointMaxY, path[i]);
  317. pointMinY =
  318. Math.min(pointMinY, path[i]);
  319. }
  320. even = !even;
  321. }
  322. }
  323. // Cache point bounding box for use to position data
  324. // labels, bubbles etc
  325. point._midX = (pointMinX + (pointMaxX - pointMinX) * pick(point.middleX, properties &&
  326. properties['hc-middle-x'], 0.5));
  327. point._midY = (pointMinY + (pointMaxY - pointMinY) * pick(point.middleY, properties &&
  328. properties['hc-middle-y'], 0.5));
  329. point._maxX = pointMaxX;
  330. point._minX = pointMinX;
  331. point._maxY = pointMaxY;
  332. point._minY = pointMinY;
  333. point.labelrank = pick(point.labelrank, (pointMaxX - pointMinX) * (pointMaxY - pointMinY));
  334. point._foundBox = true;
  335. }
  336. maxX = Math.max(maxX, point._maxX);
  337. minX = Math.min(minX, point._minX);
  338. maxY = Math.max(maxY, point._maxY);
  339. minY = Math.min(minY, point._minY);
  340. minRange = Math.min(point._maxX - point._minX, point._maxY - point._minY, minRange);
  341. hasBox = true;
  342. }
  343. });
  344. // Set the box for the whole series
  345. if (hasBox) {
  346. this.minY = Math.min(minY, pick(this.minY, MAX_VALUE));
  347. this.maxY = Math.max(maxY, pick(this.maxY, -MAX_VALUE));
  348. this.minX = Math.min(minX, pick(this.minX, MAX_VALUE));
  349. this.maxX = Math.max(maxX, pick(this.maxX, -MAX_VALUE));
  350. // If no minRange option is set, set the default minimum zooming
  351. // range to 5 times the size of the smallest element
  352. if (xAxis && typeof xAxis.options.minRange === 'undefined') {
  353. xAxis.minRange = Math.min(5 * minRange, (this.maxX - this.minX) / 5, xAxis.minRange || MAX_VALUE);
  354. }
  355. if (yAxis && typeof yAxis.options.minRange === 'undefined') {
  356. yAxis.minRange = Math.min(5 * minRange, (this.maxY - this.minY) / 5, yAxis.minRange || MAX_VALUE);
  357. }
  358. }
  359. },
  360. // Define hasData function for non-cartesian series.
  361. // Returns true if the series has points at all.
  362. hasData: function () {
  363. return !!this.processedXData.length; // != 0
  364. },
  365. getExtremes: function () {
  366. // Get the actual value extremes for colors
  367. Series.prototype.getExtremes.call(this, this.valueData);
  368. // Recalculate box on updated data
  369. if (this.chart.hasRendered && this.isDirtyData) {
  370. this.getBox(this.options.data);
  371. }
  372. this.valueMin = this.dataMin;
  373. this.valueMax = this.dataMax;
  374. // Extremes for the mock Y axis
  375. this.dataMin = this.minY;
  376. this.dataMax = this.maxY;
  377. },
  378. // Translate the path, so it automatically fits into the plot area box
  379. translatePath: function (path) {
  380. var series = this, even = false, // while loop reads from the end
  381. xAxis = series.xAxis, yAxis = series.yAxis, xMin = xAxis.min, xTransA = xAxis.transA, xMinPixelPadding = xAxis.minPixelPadding, yMin = yAxis.min, yTransA = yAxis.transA, yMinPixelPadding = yAxis.minPixelPadding, i, ret = []; // Preserve the original
  382. // Do the translation
  383. if (path) {
  384. i = path.length;
  385. while (i--) {
  386. if (isNumber(path[i])) {
  387. ret[i] = even ?
  388. (path[i] - xMin) *
  389. xTransA + xMinPixelPadding :
  390. (path[i] - yMin) *
  391. yTransA + yMinPixelPadding;
  392. even = !even;
  393. }
  394. else {
  395. ret[i] = path[i];
  396. }
  397. }
  398. }
  399. return ret;
  400. },
  401. // Extend setData to join in mapData. If the allAreas option is true,
  402. // all areas from the mapData are used, and those that don't correspond
  403. // to a data value are given null values.
  404. setData: function (data, redraw, animation, updatePoints) {
  405. var options = this.options, chartOptions = this.chart.options.chart, globalMapData = chartOptions && chartOptions.map, mapData = options.mapData, joinBy = this.joinBy, pointArrayMap = options.keys || this.pointArrayMap, dataUsed = [], mapMap = {}, mapPoint, mapTransforms = this.chart.mapTransforms, props, i;
  406. // Collect mapData from chart options if not defined on series
  407. if (!mapData && globalMapData) {
  408. mapData = typeof globalMapData === 'string' ?
  409. H.maps[globalMapData] :
  410. globalMapData;
  411. }
  412. // Pick up numeric values, add index
  413. // Convert Array point definitions to objects using pointArrayMap
  414. if (data) {
  415. data.forEach(function (val, i) {
  416. var ix = 0;
  417. if (isNumber(val)) {
  418. data[i] = {
  419. value: val
  420. };
  421. }
  422. else if (isArray(val)) {
  423. data[i] = {};
  424. // Automatically copy first item to hc-key if there is
  425. // an extra leading string
  426. if (!options.keys &&
  427. val.length > pointArrayMap.length &&
  428. typeof val[0] === 'string') {
  429. data[i]['hc-key'] = val[0];
  430. ++ix;
  431. }
  432. // Run through pointArrayMap and what's left of the
  433. // point data array in parallel, copying over the values
  434. for (var j = 0; j < pointArrayMap.length; ++j, ++ix) {
  435. if (pointArrayMap[j] &&
  436. typeof val[ix] !== 'undefined') {
  437. if (pointArrayMap[j].indexOf('.') > 0) {
  438. H.Point.prototype.setNestedProperty(data[i], val[ix], pointArrayMap[j]);
  439. }
  440. else {
  441. data[i][pointArrayMap[j]] =
  442. val[ix];
  443. }
  444. }
  445. }
  446. }
  447. if (joinBy && joinBy[0] === '_i') {
  448. data[i]._i = i;
  449. }
  450. });
  451. }
  452. this.getBox(data);
  453. // Pick up transform definitions for chart
  454. this.chart.mapTransforms = mapTransforms =
  455. chartOptions && chartOptions.mapTransforms ||
  456. mapData && mapData['hc-transform'] ||
  457. mapTransforms;
  458. // Cache cos/sin of transform rotation angle
  459. if (mapTransforms) {
  460. objectEach(mapTransforms, function (transform) {
  461. if (transform.rotation) {
  462. transform.cosAngle = Math.cos(transform.rotation);
  463. transform.sinAngle = Math.sin(transform.rotation);
  464. }
  465. });
  466. }
  467. if (mapData) {
  468. if (mapData.type === 'FeatureCollection') {
  469. this.mapTitle = mapData.title;
  470. mapData = H.geojson(mapData, this.type, this);
  471. }
  472. this.mapData = mapData;
  473. this.mapMap = {};
  474. for (i = 0; i < mapData.length; i++) {
  475. mapPoint = mapData[i];
  476. props = mapPoint.properties;
  477. mapPoint._i = i;
  478. // Copy the property over to root for faster access
  479. if (joinBy[0] && props && props[joinBy[0]]) {
  480. mapPoint[joinBy[0]] = props[joinBy[0]];
  481. }
  482. mapMap[mapPoint[joinBy[0]]] = mapPoint;
  483. }
  484. this.mapMap = mapMap;
  485. // Registered the point codes that actually hold data
  486. if (data && joinBy[1]) {
  487. data.forEach(function (point) {
  488. if (mapMap[point[joinBy[1]]]) {
  489. dataUsed.push(mapMap[point[joinBy[1]]]);
  490. }
  491. });
  492. }
  493. if (options.allAreas) {
  494. this.getBox(mapData);
  495. data = data || [];
  496. // Registered the point codes that actually hold data
  497. if (joinBy[1]) {
  498. data.forEach(function (point) {
  499. dataUsed.push(point[joinBy[1]]);
  500. });
  501. }
  502. // Add those map points that don't correspond to data, which
  503. // will be drawn as null points
  504. dataUsed = ('|' + dataUsed.map(function (point) {
  505. return point && point[joinBy[0]];
  506. }).join('|') + '|'); // Faster than array.indexOf
  507. mapData.forEach(function (mapPoint) {
  508. if (!joinBy[0] ||
  509. dataUsed.indexOf('|' + mapPoint[joinBy[0]] + '|') === -1) {
  510. data.push(merge(mapPoint, { value: null }));
  511. // #5050 - adding all areas causes the update
  512. // optimization of setData to kick in, even though
  513. // the point order has changed
  514. updatePoints = false;
  515. }
  516. });
  517. }
  518. else {
  519. this.getBox(dataUsed); // Issue #4784
  520. }
  521. }
  522. Series.prototype.setData.call(this, data, redraw, animation, updatePoints);
  523. },
  524. // No graph for the map series
  525. drawGraph: noop,
  526. // We need the points' bounding boxes in order to draw the data labels,
  527. // so we skip it now and call it from drawPoints instead.
  528. drawDataLabels: noop,
  529. // Allow a quick redraw by just translating the area group. Used for
  530. // zooming and panning in capable browsers.
  531. doFullTranslate: function () {
  532. return (this.isDirtyData ||
  533. this.chart.isResizing ||
  534. this.chart.renderer.isVML ||
  535. !this.baseTrans);
  536. },
  537. // Add the path option for data points. Find the max value for color
  538. // calculation.
  539. translate: function () {
  540. var series = this, xAxis = series.xAxis, yAxis = series.yAxis, doFullTranslate = series.doFullTranslate();
  541. series.generatePoints();
  542. series.data.forEach(function (point) {
  543. // Record the middle point (loosely based on centroid),
  544. // determined by the middleX and middleY options.
  545. if (isNumber(point._midX) && isNumber(point._midY)) {
  546. point.plotX = xAxis.toPixels(point._midX, true);
  547. point.plotY = yAxis.toPixels(point._midY, true);
  548. }
  549. if (doFullTranslate) {
  550. point.shapeType = 'path';
  551. point.shapeArgs = {
  552. d: series.translatePath(point.path)
  553. };
  554. }
  555. });
  556. fireEvent(series, 'afterTranslate');
  557. },
  558. // Get presentational attributes. In the maps series this runs in both
  559. // styled and non-styled mode, because colors hold data when a colorAxis
  560. // is used.
  561. pointAttribs: function (point, state) {
  562. var attr = point.series.chart.styledMode ?
  563. this.colorAttribs(point) :
  564. seriesTypes.column.prototype.pointAttribs.call(this, point, state);
  565. // Set the stroke-width on the group element and let all point
  566. // graphics inherit. That way we don't have to iterate over all
  567. // points to update the stroke-width on zooming.
  568. attr['stroke-width'] = pick(point.options[(this.pointAttrToOptions &&
  569. this.pointAttrToOptions['stroke-width']) || 'borderWidth'], 'inherit');
  570. return attr;
  571. },
  572. // Use the drawPoints method of column, that is able to handle simple
  573. // shapeArgs. Extend it by assigning the tooltip position.
  574. drawPoints: function () {
  575. var series = this, xAxis = series.xAxis, yAxis = series.yAxis, group = series.group, chart = series.chart, renderer = chart.renderer, scaleX, scaleY, translateX, translateY, baseTrans = this.baseTrans, transformGroup, startTranslateX, startTranslateY, startScaleX, startScaleY;
  576. // Set a group that handles transform during zooming and panning in
  577. // order to preserve clipping on series.group
  578. if (!series.transformGroup) {
  579. series.transformGroup = renderer.g()
  580. .attr({
  581. scaleX: 1,
  582. scaleY: 1
  583. })
  584. .add(group);
  585. series.transformGroup.survive = true;
  586. }
  587. // Draw the shapes again
  588. if (series.doFullTranslate()) {
  589. // Individual point actions.
  590. if (chart.hasRendered && !chart.styledMode) {
  591. series.points.forEach(function (point) {
  592. // Restore state color on update/redraw (#3529)
  593. if (point.shapeArgs) {
  594. point.shapeArgs.fill = series.pointAttribs(point, point.state).fill;
  595. }
  596. });
  597. }
  598. // Draw them in transformGroup
  599. series.group = series.transformGroup;
  600. seriesTypes.column.prototype.drawPoints.apply(series);
  601. series.group = group; // Reset
  602. // Add class names
  603. series.points.forEach(function (point) {
  604. if (point.graphic) {
  605. var className = '';
  606. if (point.name) {
  607. className +=
  608. 'highcharts-name-' +
  609. point.name.replace(/ /g, '-').toLowerCase();
  610. }
  611. if (point.properties &&
  612. point.properties['hc-key']) {
  613. className +=
  614. ' highcharts-key-' +
  615. point.properties['hc-key'].toLowerCase();
  616. }
  617. if (className) {
  618. point.graphic.addClass(className);
  619. }
  620. // In styled mode, apply point colors by CSS
  621. if (chart.styledMode) {
  622. point.graphic.css(series.pointAttribs(point, point.selected && 'select' || void 0));
  623. }
  624. }
  625. });
  626. // Set the base for later scale-zooming. The originX and originY
  627. // properties are the axis values in the plot area's upper left
  628. // corner.
  629. this.baseTrans = {
  630. originX: (xAxis.min -
  631. xAxis.minPixelPadding / xAxis.transA),
  632. originY: (yAxis.min -
  633. yAxis.minPixelPadding / yAxis.transA +
  634. (yAxis.reversed ? 0 : yAxis.len / yAxis.transA)),
  635. transAX: xAxis.transA,
  636. transAY: yAxis.transA
  637. };
  638. // Reset transformation in case we're doing a full translate
  639. // (#3789)
  640. this.transformGroup.animate({
  641. translateX: 0,
  642. translateY: 0,
  643. scaleX: 1,
  644. scaleY: 1
  645. });
  646. // Just update the scale and transform for better performance
  647. }
  648. else {
  649. scaleX = xAxis.transA / baseTrans.transAX;
  650. scaleY = yAxis.transA / baseTrans.transAY;
  651. translateX = xAxis.toPixels(baseTrans.originX, true);
  652. translateY = yAxis.toPixels(baseTrans.originY, true);
  653. // Handle rounding errors in normal view (#3789)
  654. if (scaleX > 0.99 &&
  655. scaleX < 1.01 &&
  656. scaleY > 0.99 &&
  657. scaleY < 1.01) {
  658. scaleX = 1;
  659. scaleY = 1;
  660. translateX = Math.round(translateX);
  661. translateY = Math.round(translateY);
  662. }
  663. /* Animate or move to the new zoom level. In order to prevent
  664. flickering as the different transform components are set out
  665. of sync (#5991), we run a fake animator attribute and set
  666. scale and translation synchronously in the same step.
  667. A possible improvement to the API would be to handle this in
  668. the renderer or animation engine itself, to ensure that when
  669. we are animating multiple properties, we make sure that each
  670. step for each property is performed in the same step. Also,
  671. for symbols and for transform properties, it should induce a
  672. single updateTransform and symbolAttr call. */
  673. transformGroup = this.transformGroup;
  674. if (chart.renderer.globalAnimation) {
  675. startTranslateX = transformGroup.attr('translateX');
  676. startTranslateY = transformGroup.attr('translateY');
  677. startScaleX = transformGroup.attr('scaleX');
  678. startScaleY = transformGroup.attr('scaleY');
  679. transformGroup
  680. .attr({ animator: 0 })
  681. .animate({
  682. animator: 1
  683. }, {
  684. step: function (now, fx) {
  685. transformGroup.attr({
  686. translateX: (startTranslateX +
  687. (translateX - startTranslateX) * fx.pos),
  688. translateY: (startTranslateY +
  689. (translateY - startTranslateY) * fx.pos),
  690. scaleX: (startScaleX +
  691. (scaleX - startScaleX) *
  692. fx.pos),
  693. scaleY: (startScaleY +
  694. (scaleY - startScaleY) * fx.pos)
  695. });
  696. }
  697. });
  698. // When dragging, animation is off.
  699. }
  700. else {
  701. transformGroup.attr({
  702. translateX: translateX,
  703. translateY: translateY,
  704. scaleX: scaleX,
  705. scaleY: scaleY
  706. });
  707. }
  708. }
  709. /* Set the stroke-width directly on the group element so the
  710. children inherit it. We need to use setAttribute directly,
  711. because the stroke-widthSetter method expects a stroke color also
  712. to be set. */
  713. if (!chart.styledMode) {
  714. group.element.setAttribute('stroke-width', (pick(series.options[(series.pointAttrToOptions &&
  715. series.pointAttrToOptions['stroke-width']) || 'borderWidth'], 1 // Styled mode
  716. ) / (scaleX || 1)));
  717. }
  718. this.drawMapDataLabels();
  719. },
  720. // Draw the data labels. Special for maps is the time that the data
  721. // labels are drawn (after points), and the clipping of the
  722. // dataLabelsGroup.
  723. drawMapDataLabels: function () {
  724. Series.prototype.drawDataLabels.call(this);
  725. if (this.dataLabelsGroup) {
  726. this.dataLabelsGroup.clip(this.chart.clipRect);
  727. }
  728. },
  729. // Override render to throw in an async call in IE8. Otherwise it chokes
  730. // on the US counties demo.
  731. render: function () {
  732. var series = this, render = Series.prototype.render;
  733. // Give IE8 some time to breathe.
  734. if (series.chart.renderer.isVML && series.data.length > 3000) {
  735. setTimeout(function () {
  736. render.call(series);
  737. });
  738. }
  739. else {
  740. render.call(series);
  741. }
  742. },
  743. // The initial animation for the map series. By default, animation is
  744. // disabled. Animation of map shapes is not at all supported in VML
  745. // browsers.
  746. animate: function (init) {
  747. var chart = this.chart, animation = this.options.animation, group = this.group, xAxis = this.xAxis, yAxis = this.yAxis, left = xAxis.pos, top = yAxis.pos;
  748. if (chart.renderer.isSVG) {
  749. if (animation === true) {
  750. animation = {
  751. duration: 1000
  752. };
  753. }
  754. // Initialize the animation
  755. if (init) {
  756. // Scale down the group and place it in the center
  757. group.attr({
  758. translateX: left + xAxis.len / 2,
  759. translateY: top + yAxis.len / 2,
  760. scaleX: 0.001,
  761. scaleY: 0.001
  762. });
  763. // Run the animation
  764. }
  765. else {
  766. group.animate({
  767. translateX: left,
  768. translateY: top,
  769. scaleX: 1,
  770. scaleY: 1
  771. }, animation);
  772. // Delete this function to allow it only once
  773. this.animate = null;
  774. }
  775. }
  776. },
  777. // Animate in the new series from the clicked point in the old series.
  778. // Depends on the drilldown.js module
  779. animateDrilldown: function (init) {
  780. var toBox = this.chart.plotBox, level = this.chart.drilldownLevels[this.chart.drilldownLevels.length - 1], fromBox = level.bBox, animationOptions = this.chart.options.drilldown.animation, scale;
  781. if (!init) {
  782. scale = Math.min(fromBox.width / toBox.width, fromBox.height / toBox.height);
  783. level.shapeArgs = {
  784. scaleX: scale,
  785. scaleY: scale,
  786. translateX: fromBox.x,
  787. translateY: fromBox.y
  788. };
  789. this.points.forEach(function (point) {
  790. if (point.graphic) {
  791. point.graphic
  792. .attr(level.shapeArgs)
  793. .animate({
  794. scaleX: 1,
  795. scaleY: 1,
  796. translateX: 0,
  797. translateY: 0
  798. }, animationOptions);
  799. }
  800. });
  801. this.animate = null;
  802. }
  803. },
  804. drawLegendSymbol: LegendSymbolMixin.drawRectangle,
  805. // When drilling up, pull out the individual point graphics from the
  806. // lower series and animate them into the origin point in the upper
  807. // series.
  808. animateDrillupFrom: function (level) {
  809. seriesTypes.column.prototype
  810. .animateDrillupFrom.call(this, level);
  811. },
  812. // When drilling up, keep the upper series invisible until the lower
  813. // series has moved into place
  814. animateDrillupTo: function (init) {
  815. seriesTypes.column.prototype
  816. .animateDrillupTo.call(this, init);
  817. }
  818. // Point class
  819. }), extend({
  820. // Extend the Point object to split paths
  821. applyOptions: function (options, x) {
  822. var series = this.series, point = Point.prototype.applyOptions.call(this, options, x), joinBy = series.joinBy, mapPoint;
  823. if (series.mapData) {
  824. mapPoint = typeof point[joinBy[1]] !== 'undefined' &&
  825. series.mapMap[point[joinBy[1]]];
  826. if (mapPoint) {
  827. // This applies only to bubbles
  828. if (series.xyFromShape) {
  829. point.x = mapPoint._midX;
  830. point.y = mapPoint._midY;
  831. }
  832. extend(point, mapPoint); // copy over properties
  833. }
  834. else {
  835. point.value = point.value || null;
  836. }
  837. }
  838. return point;
  839. },
  840. // Stop the fade-out
  841. onMouseOver: function (e) {
  842. H.clearTimeout(this.colorInterval);
  843. if (this.value !== null || this.series.options.nullInteraction) {
  844. Point.prototype.onMouseOver.call(this, e);
  845. }
  846. else {
  847. // #3401 Tooltip doesn't hide when hovering over null points
  848. this.series.onMouseOut(e);
  849. }
  850. },
  851. // eslint-disable-next-line valid-jsdoc
  852. /**
  853. * Highmaps only. Zoom in on the point using the global animation.
  854. *
  855. * @sample maps/members/point-zoomto/
  856. * Zoom to points from butons
  857. *
  858. * @requires modules/map
  859. *
  860. * @function Highcharts.Point#zoomTo
  861. */
  862. zoomTo: function () {
  863. var point = this, series = point.series;
  864. series.xAxis.setExtremes(point._minX, point._maxX, false);
  865. series.yAxis.setExtremes(point._minY, point._maxY, false);
  866. series.chart.redraw();
  867. }
  868. }, colorMapPointMixin));
  869. /**
  870. * A map data object containing a `path` definition and optionally additional
  871. * properties to join in the data as per the `joinBy` option.
  872. *
  873. * @sample maps/demo/category-map/
  874. * Map data and joinBy
  875. *
  876. * @type {Array<Highcharts.SeriesMapDataOptions>|*}
  877. * @product highmaps
  878. * @apioption series.mapData
  879. */
  880. /**
  881. * A `map` series. If the [type](#series.map.type) option is not specified, it
  882. * is inherited from [chart.type](#chart.type).
  883. *
  884. * @extends series,plotOptions.map
  885. * @excluding dataParser, dataURL, marker
  886. * @product highmaps
  887. * @apioption series.map
  888. */
  889. /**
  890. * An array of data points for the series. For the `map` series type, points can
  891. * be given in the following ways:
  892. *
  893. * 1. An array of numerical values. In this case, the numerical values will be
  894. * interpreted as `value` options. Example:
  895. * ```js
  896. * data: [0, 5, 3, 5]
  897. * ```
  898. *
  899. * 2. An array of arrays with 2 values. In this case, the values correspond to
  900. * `[hc-key, value]`. Example:
  901. * ```js
  902. * data: [
  903. * ['us-ny', 0],
  904. * ['us-mi', 5],
  905. * ['us-tx', 3],
  906. * ['us-ak', 5]
  907. * ]
  908. * ```
  909. *
  910. * 3. An array of objects with named values. The following snippet shows only a
  911. * few settings, see the complete options set below. If the total number of
  912. * data points exceeds the series'
  913. * [turboThreshold](#series.map.turboThreshold),
  914. * this option is not available.
  915. * ```js
  916. * data: [{
  917. * value: 6,
  918. * name: "Point2",
  919. * color: "#00FF00"
  920. * }, {
  921. * value: 6,
  922. * name: "Point1",
  923. * color: "#FF00FF"
  924. * }]
  925. * ```
  926. *
  927. * @type {Array<number|Array<string,(number|null)>|null|*>}
  928. * @product highmaps
  929. * @apioption series.map.data
  930. */
  931. /**
  932. * Individual color for the point. By default the color is either used
  933. * to denote the value, or pulled from the global `colors` array.
  934. *
  935. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  936. * @product highmaps
  937. * @apioption series.map.data.color
  938. */
  939. /**
  940. * Individual data label for each point. The options are the same as
  941. * the ones for [plotOptions.series.dataLabels](
  942. * #plotOptions.series.dataLabels).
  943. *
  944. * @sample maps/series/data-datalabels/
  945. * Disable data labels for individual areas
  946. *
  947. * @type {Highcharts.DataLabelsOptionsObject}
  948. * @product highmaps
  949. * @apioption series.map.data.dataLabels
  950. */
  951. /**
  952. * The `id` of a series in the [drilldown.series](#drilldown.series)
  953. * array to use for a drilldown for this point.
  954. *
  955. * @sample maps/demo/map-drilldown/
  956. * Basic drilldown
  957. *
  958. * @type {string}
  959. * @product highmaps
  960. * @apioption series.map.data.drilldown
  961. */
  962. /**
  963. * An id for the point. This can be used after render time to get a
  964. * pointer to the point object through `chart.get()`.
  965. *
  966. * @sample maps/series/data-id/
  967. * Highlight a point by id
  968. *
  969. * @type {string}
  970. * @product highmaps
  971. * @apioption series.map.data.id
  972. */
  973. /**
  974. * When data labels are laid out on a map, Highmaps runs a simplified
  975. * algorithm to detect collision. When two labels collide, the one with
  976. * the lowest rank is hidden. By default the rank is computed from the
  977. * area.
  978. *
  979. * @type {number}
  980. * @product highmaps
  981. * @apioption series.map.data.labelrank
  982. */
  983. /**
  984. * The relative mid point of an area, used to place the data label.
  985. * Ranges from 0 to 1\. When `mapData` is used, middleX can be defined
  986. * there.
  987. *
  988. * @type {number}
  989. * @default 0.5
  990. * @product highmaps
  991. * @apioption series.map.data.middleX
  992. */
  993. /**
  994. * The relative mid point of an area, used to place the data label.
  995. * Ranges from 0 to 1\. When `mapData` is used, middleY can be defined
  996. * there.
  997. *
  998. * @type {number}
  999. * @default 0.5
  1000. * @product highmaps
  1001. * @apioption series.map.data.middleY
  1002. */
  1003. /**
  1004. * The name of the point as shown in the legend, tooltip, dataLabel
  1005. * etc.
  1006. *
  1007. * @sample maps/series/data-datalabels/
  1008. * Point names
  1009. *
  1010. * @type {string}
  1011. * @product highmaps
  1012. * @apioption series.map.data.name
  1013. */
  1014. /**
  1015. * For map and mapline series types, the SVG path for the shape. For
  1016. * compatibily with old IE, not all SVG path definitions are supported,
  1017. * but M, L and C operators are safe.
  1018. *
  1019. * To achieve a better separation between the structure and the data,
  1020. * it is recommended to use `mapData` to define that paths instead
  1021. * of defining them on the data points themselves.
  1022. *
  1023. * @sample maps/series/data-path/
  1024. * Paths defined in data
  1025. *
  1026. * @type {string}
  1027. * @product highmaps
  1028. * @apioption series.map.data.path
  1029. */
  1030. /**
  1031. * The numeric value of the data point.
  1032. *
  1033. * @type {number|null}
  1034. * @product highmaps
  1035. * @apioption series.map.data.value
  1036. */
  1037. /**
  1038. * Individual point events
  1039. *
  1040. * @extends plotOptions.series.point.events
  1041. * @product highmaps
  1042. * @apioption series.map.data.events
  1043. */
  1044. ''; // adds doclets above to the transpiled file