drilldown.src.js 38 KB

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