drilldown.src.js 36 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168
  1. /**
  2. * @license Highcharts JS v6.1.0 (2018-04-13)
  3. * Highcharts Drilldown module
  4. *
  5. * Author: Torstein Honsi
  6. * License: www.highcharts.com/license
  7. *
  8. */
  9. 'use strict';
  10. (function (factory) {
  11. if (typeof module === 'object' && module.exports) {
  12. module.exports = factory;
  13. } else {
  14. factory(Highcharts);
  15. }
  16. }(function (Highcharts) {
  17. (function (H) {
  18. /**
  19. * Highcharts Drilldown module
  20. *
  21. * Author: Torstein Honsi
  22. * License: www.highcharts.com/license
  23. *
  24. */
  25. var animObject = H.animObject,
  26. noop = H.noop,
  27. color = H.color,
  28. defaultOptions = H.defaultOptions,
  29. each = H.each,
  30. extend = H.extend,
  31. format = H.format,
  32. objectEach = H.objectEach,
  33. pick = H.pick,
  34. Chart = H.Chart,
  35. seriesTypes = H.seriesTypes,
  36. PieSeries = seriesTypes.pie,
  37. ColumnSeries = seriesTypes.column,
  38. Tick = H.Tick,
  39. fireEvent = H.fireEvent,
  40. inArray = H.inArray,
  41. ddSeriesId = 1;
  42. // Add language
  43. extend(defaultOptions.lang, {
  44. /**
  45. * The text for the button that appears when drilling down, linking
  46. * back to the parent series. The parent series' name is inserted for
  47. * `{series.name}`.
  48. *
  49. * @type {String}
  50. * @default Back to {series.name}
  51. * @since 3.0.8
  52. * @product highcharts highmaps
  53. * @apioption lang.drillUpText
  54. */
  55. drillUpText: '◁ Back to {series.name}'
  56. });
  57. /**
  58. * Options for drill down, the concept of inspecting increasingly high
  59. * resolution data through clicking on chart items like columns or pie slices.
  60. *
  61. * The drilldown feature requires the drilldown.js file to be loaded,
  62. * found in the modules directory of the download package, or online at
  63. * (code.highcharts.com/modules/drilldown.js)[code.highcharts.com/modules/
  64. * drilldown.js].
  65. *
  66. * @type {Object}
  67. * @optionparent drilldown
  68. */
  69. defaultOptions.drilldown = {
  70. /**
  71. * When this option is false, clicking a single point will drill down
  72. * all points in the same category, equivalent to clicking the X axis
  73. * label.
  74. *
  75. * @type {Boolean}
  76. * @sample {highcharts} highcharts/drilldown/allowpointdrilldown-false/
  77. * Don't allow point drilldown
  78. * @default true
  79. * @since 4.1.7
  80. * @product highcharts
  81. * @apioption drilldown.allowPointDrilldown
  82. */
  83. /**
  84. * An array of series configurations for the drill down. Each series
  85. * configuration uses the same syntax as the [series](#series) option
  86. * set. These drilldown series are hidden by default. The drilldown
  87. * series is linked to the parent series' point by its `id`.
  88. *
  89. * @type {Array<Object>}
  90. * @since 3.0.8
  91. * @product highcharts highmaps
  92. * @apioption drilldown.series
  93. */
  94. /**
  95. * Additional styles to apply to the X axis label for a point that
  96. * has drilldown data. By default it is underlined and blue to invite
  97. * to interaction.
  98. *
  99. * @type {CSSObject}
  100. * @see In styled mode, active label styles can be set with the
  101. * `.highcharts-drilldown-axis-label` class.
  102. * @sample {highcharts} highcharts/drilldown/labels/ Label styles
  103. * @default { "cursor": "pointer", "color": "#003399", "fontWeight": "bold", "textDecoration": "underline" }
  104. * @since 3.0.8
  105. * @product highcharts highmaps
  106. */
  107. activeAxisLabelStyle: {
  108. cursor: 'pointer',
  109. color: '#003399',
  110. fontWeight: 'bold',
  111. textDecoration: 'underline'
  112. },
  113. /**
  114. * Additional styles to apply to the data label of a point that has
  115. * drilldown data. By default it is underlined and blue to invite to
  116. * interaction.
  117. *
  118. * @type {CSSObject}
  119. * @see In styled mode, active data label styles can be applied with
  120. * the `.highcharts-drilldown-data-label` class.
  121. * @sample {highcharts} highcharts/drilldown/labels/ Label styles
  122. * @default { "cursor": "pointer", "color": "#003399", "fontWeight": "bold", "textDecoration": "underline" }
  123. * @since 3.0.8
  124. * @product highcharts highmaps
  125. */
  126. activeDataLabelStyle: {
  127. cursor: 'pointer',
  128. color: '#003399',
  129. fontWeight: 'bold',
  130. textDecoration: 'underline'
  131. },
  132. /**
  133. * Set the animation for all drilldown animations. Animation of a drilldown
  134. * occurs when drilling between a column point and a column series,
  135. * or a pie slice and a full pie series. Drilldown can still be used
  136. * between series and points of different types, but animation will
  137. * not occur.
  138. *
  139. * The animation can either be set as a boolean or a configuration
  140. * object. If `true`, it will use the 'swing' jQuery easing and a duration
  141. * of 500 ms. If used as a configuration object, the following properties
  142. * are supported:
  143. *
  144. * <dl>
  145. *
  146. * <dt>duration</dt>
  147. *
  148. * <dd>The duration of the animation in milliseconds.</dd>
  149. *
  150. * <dt>easing</dt>
  151. *
  152. * <dd>A string reference to an easing function set on the `Math` object.
  153. * See [the easing demo](http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-
  154. * animation-easing/).</dd>
  155. *
  156. * </dl>
  157. *
  158. * @type {Boolean|Object}
  159. * @since 3.0.8
  160. * @product highcharts highmaps
  161. */
  162. animation: {
  163. /**
  164. * Duration for the drilldown animation.
  165. * @default 500
  166. */
  167. duration: 500
  168. },
  169. /**
  170. * Options for the drill up button that appears when drilling down
  171. * on a series. The text for the button is defined in
  172. * [lang.drillUpText](#lang.drillUpText).
  173. *
  174. * @type {Object}
  175. * @sample {highcharts} highcharts/drilldown/drillupbutton/ Drill up button
  176. * @sample {highmaps} highcharts/drilldown/drillupbutton/ Drill up button
  177. * @since 3.0.8
  178. * @product highcharts highmaps
  179. */
  180. drillUpButton: {
  181. /**
  182. * What box to align the button to. Can be either `plotBox` or
  183. * `spacingBox`.
  184. *
  185. * @type {String}
  186. * @default plotBox
  187. * @validvalue ["plotBox", "spacingBox"]
  188. * @since 3.0.8
  189. * @product highcharts highmaps
  190. * @apioption drilldown.drillUpButton.relativeTo
  191. */
  192. /**
  193. * A collection of attributes for the button. The object takes SVG
  194. * attributes like `fill`, `stroke`, `stroke-width` or `r`, the border
  195. * radius. The theme also supports `style`, a collection of CSS
  196. * properties for the text. Equivalent attributes for the hover state
  197. * are given in `theme.states.hover`.
  198. *
  199. * @type {Object}
  200. * @see In styled mode, drill-up button styles can be applied with
  201. * the `.highcharts-drillup-button` class.
  202. * @sample {highcharts} highcharts/drilldown/drillupbutton/
  203. * Button theming
  204. * @sample {highmaps} highcharts/drilldown/drillupbutton/
  205. * Button theming
  206. * @since 3.0.8
  207. * @product highcharts highmaps
  208. * @apioption drilldown.drillUpButton.theme
  209. */
  210. /**
  211. * Positioning options for the button within the `relativeTo` box.
  212. * Available properties are `x`, `y`, `align` and `verticalAlign`.
  213. *
  214. * @type {Object}
  215. * @since 3.0.8
  216. * @product highcharts highmaps
  217. */
  218. position: {
  219. /**
  220. * Vertical alignment of the button.
  221. *
  222. * @type {String}
  223. * @default top
  224. * @validvalue ["top", "middle", "bottom"]
  225. * @product highcharts highmaps
  226. * @apioption drilldown.drillUpButton.position.verticalAlign
  227. */
  228. /**
  229. * Horizontal alignment.
  230. * @type {String}
  231. */
  232. align: 'right',
  233. /**
  234. * The X offset of the button.
  235. * @type {Number}
  236. */
  237. x: -10,
  238. /**
  239. * The Y offset of the button.
  240. * @type {Number}
  241. */
  242. y: 10
  243. }
  244. }
  245. };
  246. /**
  247. * Fires when a drilldown point is clicked, before the new series is
  248. * added. This event is also utilized for async drilldown, where the
  249. * seriesOptions are not added by option, but rather loaded async. Note
  250. * that when clicking a category label to trigger multiple series drilldown,
  251. * one `drilldown` event is triggered per point in the category.
  252. *
  253. * Event arguments:
  254. *
  255. * <dl>
  256. *
  257. * <dt>`category`</dt>
  258. *
  259. * <dd>If a category label was clicked, which index.</dd>
  260. *
  261. * <dt>`point`</dt>
  262. *
  263. * <dd>The originating point.</dd>
  264. *
  265. * <dt>`originalEvent`</dt>
  266. *
  267. * <dd>The original browser event (usually click) that triggered the
  268. * drilldown.</dd>
  269. *
  270. * <dt>`points`</dt>
  271. *
  272. * <dd>If a category label was clicked, this array holds all points
  273. * corresponing to the category.</dd>
  274. *
  275. * <dt>`seriesOptions`</dt>
  276. *
  277. * <dd>Options for the new series</dd>
  278. *
  279. * </dl>
  280. *
  281. * @type {Function}
  282. * @context Chart
  283. * @sample {highcharts} highcharts/drilldown/async/ Async drilldown
  284. * @since 3.0.8
  285. * @product highcharts highmaps
  286. * @apioption chart.events.drilldown
  287. */
  288. /**
  289. * Fires when drilling up from a drilldown series.
  290. *
  291. * @type {Function}
  292. * @context Chart
  293. * @since 3.0.8
  294. * @product highcharts highmaps
  295. * @apioption chart.events.drillup
  296. */
  297. /**
  298. * In a chart with multiple drilldown series, this event fires after
  299. * all the series have been drilled up.
  300. *
  301. * @type {Function}
  302. * @context Chart
  303. * @since 4.2.4
  304. * @product highcharts highmaps
  305. * @apioption chart.events.drillupall
  306. */
  307. /**
  308. * The `id` of a series in the [drilldown.series](#drilldown.series)
  309. * array to use for a drilldown for this point.
  310. *
  311. * @type {String}
  312. * @sample {highcharts} highcharts/drilldown/basic/ Basic drilldown
  313. * @since 3.0.8
  314. * @product highcharts
  315. * @apioption series.line.data.drilldown
  316. */
  317. /**
  318. * A general fadeIn method
  319. */
  320. H.SVGRenderer.prototype.Element.prototype.fadeIn = function (animation) {
  321. this
  322. .attr({
  323. opacity: 0.1,
  324. visibility: 'inherit'
  325. })
  326. .animate({
  327. opacity: pick(this.newOpacity, 1) // newOpacity used in maps
  328. }, animation || {
  329. duration: 250
  330. });
  331. };
  332. /**
  333. * Add a series to the chart as drilldown from a specific point in the parent
  334. * series. This method is used for async drilldown, when clicking a point in a
  335. * series should result in loading and displaying a more high-resolution series.
  336. * When not async, the setup is simpler using the {@link
  337. * https://api.highcharts.com/highcharts/drilldown.series|drilldown.series}
  338. * options structure.
  339. *
  340. * @memberOf Highcharts.Chart
  341. * @function #addSeriesAsDrilldown
  342. *
  343. * @param {Highcharts.Point} point
  344. * The point from which the drilldown will start.
  345. * @param {SeriesOptions} options
  346. * The series options for the new, detailed series.
  347. *
  348. * @sample highcharts/drilldown/async/ Async drilldown
  349. */
  350. Chart.prototype.addSeriesAsDrilldown = function (point, options) {
  351. this.addSingleSeriesAsDrilldown(point, options);
  352. this.applyDrilldown();
  353. };
  354. Chart.prototype.addSingleSeriesAsDrilldown = function (point, ddOptions) {
  355. var oldSeries = point.series,
  356. xAxis = oldSeries.xAxis,
  357. yAxis = oldSeries.yAxis,
  358. newSeries,
  359. pointIndex,
  360. levelSeries = [],
  361. levelSeriesOptions = [],
  362. level,
  363. levelNumber,
  364. last,
  365. colorProp;
  366. colorProp = { color: point.color || oldSeries.color };
  367. if (!this.drilldownLevels) {
  368. this.drilldownLevels = [];
  369. }
  370. levelNumber = oldSeries.options._levelNumber || 0;
  371. // See if we can reuse the registered series from last run
  372. last = this.drilldownLevels[this.drilldownLevels.length - 1];
  373. if (last && last.levelNumber !== levelNumber) {
  374. last = undefined;
  375. }
  376. ddOptions = extend(extend({
  377. _ddSeriesId: ddSeriesId++
  378. }, colorProp), ddOptions);
  379. pointIndex = inArray(point, oldSeries.points);
  380. // Record options for all current series
  381. each(oldSeries.chart.series, function (series) {
  382. if (series.xAxis === xAxis && !series.isDrilling) {
  383. series.options._ddSeriesId =
  384. series.options._ddSeriesId || ddSeriesId++;
  385. series.options._colorIndex = series.userOptions._colorIndex;
  386. series.options._levelNumber =
  387. series.options._levelNumber || levelNumber; // #3182
  388. if (last) {
  389. levelSeries = last.levelSeries;
  390. levelSeriesOptions = last.levelSeriesOptions;
  391. } else {
  392. levelSeries.push(series);
  393. levelSeriesOptions.push(series.options);
  394. }
  395. }
  396. });
  397. // Add a record of properties for each drilldown level
  398. level = extend({
  399. levelNumber: levelNumber,
  400. seriesOptions: oldSeries.options,
  401. levelSeriesOptions: levelSeriesOptions,
  402. levelSeries: levelSeries,
  403. shapeArgs: point.shapeArgs,
  404. // no graphic in line series with markers disabled
  405. bBox: point.graphic ? point.graphic.getBBox() : {},
  406. color: point.isNull ? new H.Color(color).setOpacity(0).get() : color,
  407. lowerSeriesOptions: ddOptions,
  408. pointOptions: oldSeries.options.data[pointIndex],
  409. pointIndex: pointIndex,
  410. oldExtremes: {
  411. xMin: xAxis && xAxis.userMin,
  412. xMax: xAxis && xAxis.userMax,
  413. yMin: yAxis && yAxis.userMin,
  414. yMax: yAxis && yAxis.userMax
  415. },
  416. resetZoomButton: this.resetZoomButton
  417. }, colorProp);
  418. // Push it to the lookup array
  419. this.drilldownLevels.push(level);
  420. // Reset names to prevent extending (#6704)
  421. if (xAxis && xAxis.names) {
  422. xAxis.names.length = 0;
  423. }
  424. newSeries = level.lowerSeries = this.addSeries(ddOptions, false);
  425. newSeries.options._levelNumber = levelNumber + 1;
  426. if (xAxis) {
  427. xAxis.oldPos = xAxis.pos;
  428. xAxis.userMin = xAxis.userMax = null;
  429. yAxis.userMin = yAxis.userMax = null;
  430. }
  431. // Run fancy cross-animation on supported and equal types
  432. if (oldSeries.type === newSeries.type) {
  433. newSeries.animate = newSeries.animateDrilldown || noop;
  434. newSeries.options.animation = true;
  435. }
  436. };
  437. Chart.prototype.applyDrilldown = function () {
  438. var drilldownLevels = this.drilldownLevels,
  439. levelToRemove;
  440. if (drilldownLevels && drilldownLevels.length > 0) { // #3352, async loading
  441. levelToRemove = drilldownLevels[drilldownLevels.length - 1].levelNumber;
  442. each(this.drilldownLevels, function (level) {
  443. if (level.levelNumber === levelToRemove) {
  444. each(level.levelSeries, function (series) {
  445. // Not removed, not added as part of a multi-series
  446. // drilldown
  447. if (
  448. series.options &&
  449. series.options._levelNumber === levelToRemove
  450. ) {
  451. series.remove(false);
  452. }
  453. });
  454. }
  455. });
  456. }
  457. // We have a reset zoom button. Hide it and detatch it from the chart. It
  458. // is preserved to the layer config above.
  459. if (this.resetZoomButton) {
  460. this.resetZoomButton.hide();
  461. delete this.resetZoomButton;
  462. }
  463. this.pointer.reset();
  464. this.redraw();
  465. this.showDrillUpButton();
  466. };
  467. Chart.prototype.getDrilldownBackText = function () {
  468. var drilldownLevels = this.drilldownLevels,
  469. lastLevel;
  470. if (drilldownLevels && drilldownLevels.length > 0) { // #3352, async loading
  471. lastLevel = drilldownLevels[drilldownLevels.length - 1];
  472. lastLevel.series = lastLevel.seriesOptions;
  473. return format(this.options.lang.drillUpText, lastLevel);
  474. }
  475. };
  476. Chart.prototype.showDrillUpButton = function () {
  477. var chart = this,
  478. backText = this.getDrilldownBackText(),
  479. buttonOptions = chart.options.drilldown.drillUpButton,
  480. attr,
  481. states;
  482. if (!this.drillUpButton) {
  483. attr = buttonOptions.theme;
  484. states = attr && attr.states;
  485. this.drillUpButton = this.renderer.button(
  486. backText,
  487. null,
  488. null,
  489. function () {
  490. chart.drillUp();
  491. },
  492. attr,
  493. states && states.hover,
  494. states && states.select
  495. )
  496. .addClass('highcharts-drillup-button')
  497. .attr({
  498. align: buttonOptions.position.align,
  499. zIndex: 7
  500. })
  501. .add()
  502. .align(
  503. buttonOptions.position,
  504. false,
  505. buttonOptions.relativeTo || 'plotBox'
  506. );
  507. } else {
  508. this.drillUpButton.attr({
  509. text: backText
  510. })
  511. .align();
  512. }
  513. };
  514. /**
  515. * When the chart is drilled down to a child series, calling `chart.drillUp()`
  516. * will drill up to the parent series. Requires the drilldown module.
  517. *
  518. * @function drillUp
  519. * @memberOf Highcharts.Chart
  520. */
  521. Chart.prototype.drillUp = function () {
  522. if (!this.drilldownLevels || this.drilldownLevels.length === 0) {
  523. return;
  524. }
  525. var chart = this,
  526. drilldownLevels = chart.drilldownLevels,
  527. levelNumber = drilldownLevels[drilldownLevels.length - 1].levelNumber,
  528. i = drilldownLevels.length,
  529. chartSeries = chart.series,
  530. seriesI,
  531. level,
  532. oldSeries,
  533. newSeries,
  534. oldExtremes,
  535. addSeries = function (seriesOptions) {
  536. var addedSeries;
  537. each(chartSeries, function (series) {
  538. if (series.options._ddSeriesId === seriesOptions._ddSeriesId) {
  539. addedSeries = series;
  540. }
  541. });
  542. addedSeries = addedSeries || chart.addSeries(seriesOptions, false);
  543. if (
  544. addedSeries.type === oldSeries.type &&
  545. addedSeries.animateDrillupTo
  546. ) {
  547. addedSeries.animate = addedSeries.animateDrillupTo;
  548. }
  549. if (seriesOptions === level.seriesOptions) {
  550. newSeries = addedSeries;
  551. }
  552. };
  553. while (i--) {
  554. level = drilldownLevels[i];
  555. if (level.levelNumber === levelNumber) {
  556. drilldownLevels.pop();
  557. // Get the lower series by reference or id
  558. oldSeries = level.lowerSeries;
  559. if (!oldSeries.chart) { // #2786
  560. seriesI = chartSeries.length; // #2919
  561. while (seriesI--) {
  562. if (
  563. chartSeries[seriesI].options.id ===
  564. level.lowerSeriesOptions.id &&
  565. chartSeries[seriesI].options._levelNumber ===
  566. levelNumber + 1
  567. ) { // #3867
  568. oldSeries = chartSeries[seriesI];
  569. break;
  570. }
  571. }
  572. }
  573. oldSeries.xData = []; // Overcome problems with minRange (#2898)
  574. each(level.levelSeriesOptions, addSeries);
  575. fireEvent(chart, 'drillup', { seriesOptions: level.seriesOptions });
  576. if (newSeries.type === oldSeries.type) {
  577. newSeries.drilldownLevel = level;
  578. newSeries.options.animation = chart.options.drilldown.animation;
  579. if (oldSeries.animateDrillupFrom && oldSeries.chart) { // #2919
  580. oldSeries.animateDrillupFrom(level);
  581. }
  582. }
  583. newSeries.options._levelNumber = levelNumber;
  584. oldSeries.remove(false);
  585. // Reset the zoom level of the upper series
  586. if (newSeries.xAxis) {
  587. oldExtremes = level.oldExtremes;
  588. newSeries.xAxis.setExtremes(
  589. oldExtremes.xMin,
  590. oldExtremes.xMax,
  591. false
  592. );
  593. newSeries.yAxis.setExtremes(
  594. oldExtremes.yMin,
  595. oldExtremes.yMax,
  596. false
  597. );
  598. }
  599. // We have a resetZoomButton tucked away for this level. Attatch
  600. // it to the chart and show it.
  601. if (level.resetZoomButton) {
  602. chart.resetZoomButton = level.resetZoomButton;
  603. chart.resetZoomButton.show();
  604. }
  605. }
  606. }
  607. // Fire a once-off event after all series have been drilled up (#5158)
  608. fireEvent(chart, 'drillupall');
  609. this.redraw();
  610. if (this.drilldownLevels.length === 0) {
  611. this.drillUpButton = this.drillUpButton.destroy();
  612. } else {
  613. this.drillUpButton.attr({
  614. text: this.getDrilldownBackText()
  615. })
  616. .align();
  617. }
  618. this.ddDupes.length = []; // #3315
  619. };
  620. // Add update function to be called internally from Chart.update (#7600)
  621. Chart.prototype.callbacks.push(function () {
  622. var chart = this;
  623. chart.drilldown = {
  624. update: function (options, redraw) {
  625. H.merge(true, chart.options.drilldown, options);
  626. if (pick(redraw, true)) {
  627. chart.redraw();
  628. }
  629. }
  630. };
  631. });
  632. // Don't show the reset button if we already are displaying the drillUp button.
  633. H.addEvent(Chart, 'beforeShowResetZoom', function () {
  634. if (this.drillUpButton) {
  635. return false;
  636. }
  637. });
  638. H.addEvent(Chart, 'render', function setDDPoints() {
  639. each(this.xAxis || [], function (axis) {
  640. axis.ddPoints = {};
  641. each(axis.series, function (series) {
  642. var i,
  643. xData = series.xData || [],
  644. points = series.points,
  645. p;
  646. for (i = 0; i < xData.length; i++) {
  647. p = series.options.data[i];
  648. // The `drilldown` property can only be set on an array or an
  649. // object
  650. if (typeof p !== 'number') {
  651. // Convert array to object (#8008)
  652. p = series.pointClass.prototype.optionsToObject
  653. .call({ series: series }, p);
  654. if (p.drilldown) {
  655. if (!axis.ddPoints[xData[i]]) {
  656. axis.ddPoints[xData[i]] = [];
  657. }
  658. axis.ddPoints[xData[i]].push(points ? points[i] : true);
  659. }
  660. }
  661. }
  662. });
  663. // Add drillability to ticks, and always keep it drillability updated
  664. // (#3951)
  665. objectEach(axis.ticks, Tick.prototype.drillable);
  666. });
  667. });
  668. /**
  669. * When drilling up, keep the upper series invisible until the lower series has
  670. * moved into place
  671. */
  672. ColumnSeries.prototype.animateDrillupTo = function (init) {
  673. if (!init) {
  674. var newSeries = this,
  675. level = newSeries.drilldownLevel;
  676. // First hide all items before animating in again
  677. each(this.points, function (point) {
  678. var dataLabel = point.dataLabel;
  679. if (point.graphic) { // #3407
  680. point.graphic.hide();
  681. }
  682. if (dataLabel) {
  683. // The data label is initially hidden, make sure it is not faded
  684. // in (#6127)
  685. dataLabel.hidden = dataLabel.attr('visibility') === 'hidden';
  686. if (!dataLabel.hidden) {
  687. dataLabel.hide();
  688. if (point.connector) {
  689. point.connector.hide();
  690. }
  691. }
  692. }
  693. });
  694. // Do dummy animation on first point to get to complete
  695. H.syncTimeout(function () {
  696. if (newSeries.points) { // May be destroyed in the meantime, #3389
  697. each(newSeries.points, function (point, i) {
  698. // Fade in other points
  699. var verb =
  700. i === (level && level.pointIndex) ? 'show' : 'fadeIn',
  701. inherit = verb === 'show' ? true : undefined,
  702. dataLabel = point.dataLabel;
  703. if (point.graphic) { // #3407
  704. point.graphic[verb](inherit);
  705. }
  706. if (dataLabel && !dataLabel.hidden) { // #6127
  707. dataLabel.fadeIn(); // #7384
  708. if (point.connector) {
  709. point.connector.fadeIn();
  710. }
  711. }
  712. });
  713. }
  714. }, Math.max(this.chart.options.drilldown.animation.duration - 50, 0));
  715. // Reset
  716. this.animate = noop;
  717. }
  718. };
  719. ColumnSeries.prototype.animateDrilldown = function (init) {
  720. var series = this,
  721. drilldownLevels = this.chart.drilldownLevels,
  722. animateFrom,
  723. animationOptions = animObject(this.chart.options.drilldown.animation),
  724. xAxis = this.xAxis;
  725. if (!init) {
  726. each(drilldownLevels, function (level) {
  727. if (
  728. series.options._ddSeriesId ===
  729. level.lowerSeriesOptions._ddSeriesId
  730. ) {
  731. animateFrom = level.shapeArgs;
  732. // Add the point colors to animate from
  733. animateFrom.fill = level.color;
  734. }
  735. });
  736. animateFrom.x += (pick(xAxis.oldPos, xAxis.pos) - xAxis.pos);
  737. each(this.points, function (point) {
  738. var animateTo = point.shapeArgs;
  739. // Add the point colors to animate to
  740. animateTo.fill = point.color;
  741. if (point.graphic) {
  742. point.graphic
  743. .attr(animateFrom)
  744. .animate(
  745. extend(
  746. point.shapeArgs,
  747. { fill: point.color || series.color }
  748. ),
  749. animationOptions
  750. );
  751. }
  752. if (point.dataLabel) {
  753. point.dataLabel.fadeIn(animationOptions);
  754. }
  755. });
  756. this.animate = null;
  757. }
  758. };
  759. /**
  760. * When drilling up, pull out the individual point graphics from the lower
  761. * series and animate them into the origin point in the upper series.
  762. */
  763. ColumnSeries.prototype.animateDrillupFrom = function (level) {
  764. var animationOptions = animObject(this.chart.options.drilldown.animation),
  765. group = this.group,
  766. // For 3d column series all columns are added to one group
  767. // so we should not delete the whole group. #5297
  768. removeGroup = group !== this.chart.columnGroup,
  769. series = this;
  770. // Cancel mouse events on the series group (#2787)
  771. each(series.trackerGroups, function (key) {
  772. if (series[key]) { // we don't always have dataLabelsGroup
  773. series[key].on('mouseover');
  774. }
  775. });
  776. if (removeGroup) {
  777. delete this.group;
  778. }
  779. each(this.points, function (point) {
  780. var graphic = point.graphic,
  781. animateTo = level.shapeArgs,
  782. complete = function () {
  783. graphic.destroy();
  784. if (group && removeGroup) {
  785. group = group.destroy();
  786. }
  787. };
  788. if (graphic) {
  789. delete point.graphic;
  790. animateTo.fill = level.color;
  791. if (animationOptions.duration) {
  792. graphic.animate(
  793. animateTo,
  794. H.merge(animationOptions, { complete: complete })
  795. );
  796. } else {
  797. graphic.attr(animateTo);
  798. complete();
  799. }
  800. }
  801. });
  802. };
  803. if (PieSeries) {
  804. extend(PieSeries.prototype, {
  805. animateDrillupTo: ColumnSeries.prototype.animateDrillupTo,
  806. animateDrillupFrom: ColumnSeries.prototype.animateDrillupFrom,
  807. animateDrilldown: function (init) {
  808. var level = this.chart.drilldownLevels[
  809. this.chart.drilldownLevels.length - 1
  810. ],
  811. animationOptions = this.chart.options.drilldown.animation,
  812. animateFrom = level.shapeArgs,
  813. start = animateFrom.start,
  814. angle = animateFrom.end - start,
  815. startAngle = angle / this.points.length;
  816. if (!init) {
  817. each(this.points, function (point, i) {
  818. var animateTo = point.shapeArgs;
  819. animateFrom.fill = level.color;
  820. animateTo.fill = point.color;
  821. if (point.graphic) {
  822. point.graphic
  823. .attr(H.merge(animateFrom, {
  824. start: start + i * startAngle,
  825. end: start + (i + 1) * startAngle
  826. }))[animationOptions ? 'animate' : 'attr'](
  827. animateTo,
  828. animationOptions
  829. );
  830. }
  831. });
  832. this.animate = null;
  833. }
  834. }
  835. });
  836. }
  837. H.Point.prototype.doDrilldown = function (
  838. _holdRedraw,
  839. category,
  840. originalEvent
  841. ) {
  842. var series = this.series,
  843. chart = series.chart,
  844. drilldown = chart.options.drilldown,
  845. i = (drilldown.series || []).length,
  846. seriesOptions;
  847. if (!chart.ddDupes) {
  848. chart.ddDupes = [];
  849. }
  850. while (i-- && !seriesOptions) {
  851. if (
  852. drilldown.series[i].id === this.drilldown &&
  853. inArray(this.drilldown, chart.ddDupes) === -1
  854. ) {
  855. seriesOptions = drilldown.series[i];
  856. chart.ddDupes.push(this.drilldown);
  857. }
  858. }
  859. // Fire the event. If seriesOptions is undefined, the implementer can check
  860. // for seriesOptions, and call addSeriesAsDrilldown async if necessary.
  861. fireEvent(chart, 'drilldown', {
  862. point: this,
  863. seriesOptions: seriesOptions,
  864. category: category,
  865. originalEvent: originalEvent,
  866. points: (
  867. category !== undefined &&
  868. this.series.xAxis.getDDPoints(category).slice(0)
  869. )
  870. }, function (e) {
  871. var chart = e.point.series && e.point.series.chart,
  872. seriesOptions = e.seriesOptions;
  873. if (chart && seriesOptions) {
  874. if (_holdRedraw) {
  875. chart.addSingleSeriesAsDrilldown(e.point, seriesOptions);
  876. } else {
  877. chart.addSeriesAsDrilldown(e.point, seriesOptions);
  878. }
  879. }
  880. });
  881. };
  882. /**
  883. * Drill down to a given category. This is the same as clicking on an axis
  884. * label.
  885. */
  886. H.Axis.prototype.drilldownCategory = function (x, e) {
  887. objectEach(this.getDDPoints(x), function (point) {
  888. if (
  889. point &&
  890. point.series &&
  891. point.series.visible &&
  892. point.doDrilldown
  893. ) { // #3197
  894. point.doDrilldown(true, x, e);
  895. }
  896. });
  897. this.chart.applyDrilldown();
  898. };
  899. /**
  900. * Return drillable points for this specific X value
  901. */
  902. H.Axis.prototype.getDDPoints = function (x) {
  903. return this.ddPoints && this.ddPoints[x];
  904. };
  905. /**
  906. * Make a tick label drillable, or remove drilling on update
  907. */
  908. Tick.prototype.drillable = function () {
  909. var pos = this.pos,
  910. label = this.label,
  911. axis = this.axis,
  912. isDrillable = axis.coll === 'xAxis' && axis.getDDPoints,
  913. ddPointsX = isDrillable && axis.getDDPoints(pos);
  914. if (isDrillable) {
  915. if (label && ddPointsX && ddPointsX.length) {
  916. label.drillable = true;
  917. if (!label.basicStyles) {
  918. label.basicStyles = H.merge(label.styles);
  919. }
  920. label
  921. .addClass('highcharts-drilldown-axis-label')
  922. .css(axis.chart.options.drilldown.activeAxisLabelStyle)
  923. .on('click', function (e) {
  924. axis.drilldownCategory(pos, e);
  925. });
  926. } else if (label && label.drillable) {
  927. label.styles = {}; // reset for full overwrite of styles
  928. label.css(label.basicStyles);
  929. label.on('click', null); // #3806
  930. label.removeClass('highcharts-drilldown-axis-label');
  931. }
  932. }
  933. };
  934. /**
  935. * On initialization of each point, identify its label and make it clickable.
  936. * Also, provide a list of points associated to that label.
  937. */
  938. H.addEvent(H.Point, 'afterInit', function () {
  939. var point = this,
  940. series = point.series;
  941. if (point.drilldown) {
  942. // Add the click event to the point
  943. H.addEvent(point, 'click', function (e) {
  944. if (
  945. series.xAxis &&
  946. series.chart.options.drilldown.allowPointDrilldown === false
  947. ) {
  948. series.xAxis.drilldownCategory(point.x, e); // #5822, x changed
  949. } else {
  950. point.doDrilldown(undefined, undefined, e);
  951. }
  952. });
  953. }
  954. return point;
  955. });
  956. H.addEvent(H.Series, 'afterDrawDataLabels', function () {
  957. var css = this.chart.options.drilldown.activeDataLabelStyle,
  958. renderer = this.chart.renderer;
  959. each(this.points, function (point) {
  960. var dataLabelsOptions = point.options.dataLabels,
  961. pointCSS = pick(
  962. point.dlOptions,
  963. dataLabelsOptions && dataLabelsOptions.style,
  964. {}
  965. );
  966. if (point.drilldown && point.dataLabel) {
  967. if (css.color === 'contrast') {
  968. pointCSS.color = renderer.getContrast(
  969. point.color || this.color
  970. );
  971. }
  972. if (dataLabelsOptions && dataLabelsOptions.color) {
  973. pointCSS.color = dataLabelsOptions.color;
  974. }
  975. point.dataLabel
  976. .addClass('highcharts-drilldown-data-label');
  977. point.dataLabel
  978. .css(css)
  979. .css(pointCSS);
  980. }
  981. }, this);
  982. });
  983. var applyCursorCSS = function (element, cursor, addClass) {
  984. element[addClass ? 'addClass' : 'removeClass'](
  985. 'highcharts-drilldown-point'
  986. );
  987. element.css({ cursor: cursor });
  988. };
  989. // Mark the trackers with a pointer
  990. H.addEvent(H.Series, 'afterDrawTracker', function () {
  991. each(this.points, function (point) {
  992. if (point.drilldown && point.graphic) {
  993. applyCursorCSS(point.graphic, 'pointer', true);
  994. }
  995. });
  996. });
  997. H.addEvent(H.Point, 'afterSetState', function () {
  998. if (this.drilldown && this.series.halo && this.state === 'hover') {
  999. applyCursorCSS(this.series.halo, 'pointer', true);
  1000. } else if (this.series.halo) {
  1001. applyCursorCSS(this.series.halo, 'auto', false);
  1002. }
  1003. });
  1004. }(Highcharts));
  1005. }));