drilldown.src.js 48 KB

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