123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757 |
- /**
- * @license Highcharts JS v5.0.6 (2016-12-07)
- * Highcharts Drilldown module
- *
- * Author: Torstein Honsi
- * License: www.highcharts.com/license
- *
- */
- (function(factory) {
- if (typeof module === 'object' && module.exports) {
- module.exports = factory;
- } else {
- factory(Highcharts);
- }
- }(function(Highcharts) {
- (function(H) {
- /**
- * Highcharts Drilldown module
- *
- * Author: Torstein Honsi
- * License: www.highcharts.com/license
- *
- */
- 'use strict';
- var noop = H.noop,
- color = H.color,
- defaultOptions = H.defaultOptions,
- each = H.each,
- extend = H.extend,
- format = H.format,
- pick = H.pick,
- wrap = H.wrap,
- Chart = H.Chart,
- seriesTypes = H.seriesTypes,
- PieSeries = seriesTypes.pie,
- ColumnSeries = seriesTypes.column,
- Tick = H.Tick,
- fireEvent = H.fireEvent,
- inArray = H.inArray,
- ddSeriesId = 1;
- // Utilities
- /*
- * Return an intermediate color between two colors, according to pos where 0
- * is the from color and 1 is the to color. This method is copied from ColorAxis.js
- * and should always be kept updated, until we get AMD support.
- */
- function tweenColors(from, to, pos) {
- // Check for has alpha, because rgba colors perform worse due to lack of
- // support in WebKit.
- var hasAlpha,
- ret;
- // Unsupported color, return to-color (#3920)
- if (!to.rgba.length || !from.rgba.length) {
- ret = to.input || 'none';
- // Interpolate
- } else {
- from = from.rgba;
- to = to.rgba;
- hasAlpha = (to[3] !== 1 || from[3] !== 1);
- ret = (hasAlpha ? 'rgba(' : 'rgb(') +
- Math.round(to[0] + (from[0] - to[0]) * (1 - pos)) + ',' +
- Math.round(to[1] + (from[1] - to[1]) * (1 - pos)) + ',' +
- Math.round(to[2] + (from[2] - to[2]) * (1 - pos)) +
- (hasAlpha ? (',' + (to[3] + (from[3] - to[3]) * (1 - pos))) : '') + ')';
- }
- return ret;
- }
- /**
- * Handle animation of the color attributes directly
- */
- each(['fill', 'stroke'], function(prop) {
- H.Fx.prototype[prop + 'Setter'] = function() {
- this.elem.attr(
- prop,
- tweenColors(color(this.start), color(this.end), this.pos),
- null,
- true
- );
- };
- });
- // Add language
- extend(defaultOptions.lang, {
- drillUpText: '◁ Back to {series.name}'
- });
- defaultOptions.drilldown = {
- animation: {
- duration: 500
- },
- drillUpButton: {
- position: {
- align: 'right',
- x: -10,
- y: 10
- }
- // relativeTo: 'plotBox'
- // theme
- }
- };
- /**
- * A general fadeIn method
- */
- H.SVGRenderer.prototype.Element.prototype.fadeIn = function(animation) {
- this
- .attr({
- opacity: 0.1,
- visibility: 'inherit'
- })
- .animate({
- opacity: pick(this.newOpacity, 1) // newOpacity used in maps
- }, animation || {
- duration: 250
- });
- };
- Chart.prototype.addSeriesAsDrilldown = function(point, ddOptions) {
- this.addSingleSeriesAsDrilldown(point, ddOptions);
- this.applyDrilldown();
- };
- Chart.prototype.addSingleSeriesAsDrilldown = function(point, ddOptions) {
- var oldSeries = point.series,
- xAxis = oldSeries.xAxis,
- yAxis = oldSeries.yAxis,
- newSeries,
- pointIndex,
- levelSeries = [],
- levelSeriesOptions = [],
- level,
- levelNumber,
- last,
- colorProp;
- colorProp = {
- colorIndex: pick(point.colorIndex, oldSeries.colorIndex)
- };
- if (!this.drilldownLevels) {
- this.drilldownLevels = [];
- }
- levelNumber = oldSeries.options._levelNumber || 0;
- // See if we can reuse the registered series from last run
- last = this.drilldownLevels[this.drilldownLevels.length - 1];
- if (last && last.levelNumber !== levelNumber) {
- last = undefined;
- }
- ddOptions = extend(extend({
- _ddSeriesId: ddSeriesId++
- }, colorProp), ddOptions);
- pointIndex = inArray(point, oldSeries.points);
- // Record options for all current series
- each(oldSeries.chart.series, function(series) {
- if (series.xAxis === xAxis && !series.isDrilling) {
- series.options._ddSeriesId = series.options._ddSeriesId || ddSeriesId++;
- series.options._colorIndex = series.userOptions._colorIndex;
- series.options._levelNumber = series.options._levelNumber || levelNumber; // #3182
- if (last) {
- levelSeries = last.levelSeries;
- levelSeriesOptions = last.levelSeriesOptions;
- } else {
- levelSeries.push(series);
- levelSeriesOptions.push(series.options);
- }
- }
- });
- // Add a record of properties for each drilldown level
- level = extend({
- levelNumber: levelNumber,
- seriesOptions: oldSeries.options,
- levelSeriesOptions: levelSeriesOptions,
- levelSeries: levelSeries,
- shapeArgs: point.shapeArgs,
- bBox: point.graphic ? point.graphic.getBBox() : {}, // no graphic in line series with markers disabled
- color: point.isNull ? new H.Color(color).setOpacity(0).get() : color,
- lowerSeriesOptions: ddOptions,
- pointOptions: oldSeries.options.data[pointIndex],
- pointIndex: pointIndex,
- oldExtremes: {
- xMin: xAxis && xAxis.userMin,
- xMax: xAxis && xAxis.userMax,
- yMin: yAxis && yAxis.userMin,
- yMax: yAxis && yAxis.userMax
- }
- }, colorProp);
- // Push it to the lookup array
- this.drilldownLevels.push(level);
- newSeries = level.lowerSeries = this.addSeries(ddOptions, false);
- newSeries.options._levelNumber = levelNumber + 1;
- if (xAxis) {
- xAxis.oldPos = xAxis.pos;
- xAxis.userMin = xAxis.userMax = null;
- yAxis.userMin = yAxis.userMax = null;
- }
- // Run fancy cross-animation on supported and equal types
- if (oldSeries.type === newSeries.type) {
- newSeries.animate = newSeries.animateDrilldown || noop;
- newSeries.options.animation = true;
- }
- };
- Chart.prototype.applyDrilldown = function() {
- var drilldownLevels = this.drilldownLevels,
- levelToRemove;
- if (drilldownLevels && drilldownLevels.length > 0) { // #3352, async loading
- levelToRemove = drilldownLevels[drilldownLevels.length - 1].levelNumber;
- each(this.drilldownLevels, function(level) {
- if (level.levelNumber === levelToRemove) {
- each(level.levelSeries, function(series) {
- if (series.options && series.options._levelNumber === levelToRemove) { // Not removed, not added as part of a multi-series drilldown
- series.remove(false);
- }
- });
- }
- });
- }
- this.redraw();
- this.showDrillUpButton();
- };
- Chart.prototype.getDrilldownBackText = function() {
- var drilldownLevels = this.drilldownLevels,
- lastLevel;
- if (drilldownLevels && drilldownLevels.length > 0) { // #3352, async loading
- lastLevel = drilldownLevels[drilldownLevels.length - 1];
- lastLevel.series = lastLevel.seriesOptions;
- return format(this.options.lang.drillUpText, lastLevel);
- }
- };
- Chart.prototype.showDrillUpButton = function() {
- var chart = this,
- backText = this.getDrilldownBackText(),
- buttonOptions = chart.options.drilldown.drillUpButton,
- attr,
- states;
- if (!this.drillUpButton) {
- attr = buttonOptions.theme;
- states = attr && attr.states;
- this.drillUpButton = this.renderer.button(
- backText,
- null,
- null,
- function() {
- chart.drillUp();
- },
- attr,
- states && states.hover,
- states && states.select
- )
- .addClass('highcharts-drillup-button')
- .attr({
- align: buttonOptions.position.align,
- zIndex: 7
- })
- .add()
- .align(buttonOptions.position, false, buttonOptions.relativeTo || 'plotBox');
- } else {
- this.drillUpButton.attr({
- text: backText
- })
- .align();
- }
- };
- Chart.prototype.drillUp = function() {
- 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) {
- var addedSeries;
- each(chartSeries, function(series) {
- if (series.options._ddSeriesId === seriesOptions._ddSeriesId) {
- addedSeries = series;
- }
- });
- addedSeries = addedSeries || chart.addSeries(seriesOptions, false);
- if (addedSeries.type === oldSeries.type && addedSeries.animateDrillupTo) {
- addedSeries.animate = addedSeries.animateDrillupTo;
- }
- if (seriesOptions === level.seriesOptions) {
- newSeries = addedSeries;
- }
- };
- while (i--) {
- level = drilldownLevels[i];
- if (level.levelNumber === levelNumber) {
- drilldownLevels.pop();
- // Get the lower series by reference or id
- oldSeries = level.lowerSeries;
- if (!oldSeries.chart) { // #2786
- seriesI = chartSeries.length; // #2919
- while (seriesI--) {
- if (chartSeries[seriesI].options.id === level.lowerSeriesOptions.id &&
- chartSeries[seriesI].options._levelNumber === levelNumber + 1) { // #3867
- oldSeries = chartSeries[seriesI];
- break;
- }
- }
- }
- oldSeries.xData = []; // Overcome problems with minRange (#2898)
- each(level.levelSeriesOptions, addSeries);
- fireEvent(chart, 'drillup', {
- seriesOptions: level.seriesOptions
- });
- if (newSeries.type === oldSeries.type) {
- newSeries.drilldownLevel = level;
- newSeries.options.animation = chart.options.drilldown.animation;
- if (oldSeries.animateDrillupFrom && oldSeries.chart) { // #2919
- oldSeries.animateDrillupFrom(level);
- }
- }
- newSeries.options._levelNumber = levelNumber;
- oldSeries.remove(false);
- // Reset the zoom level of the upper series
- if (newSeries.xAxis) {
- oldExtremes = level.oldExtremes;
- newSeries.xAxis.setExtremes(oldExtremes.xMin, oldExtremes.xMax, false);
- newSeries.yAxis.setExtremes(oldExtremes.yMin, oldExtremes.yMax, false);
- }
- }
- }
- // Fire a once-off event after all series have been drilled up (#5158)
- fireEvent(chart, 'drillupall');
- this.redraw();
- if (this.drilldownLevels.length === 0) {
- this.drillUpButton = this.drillUpButton.destroy();
- } else {
- this.drillUpButton.attr({
- text: this.getDrilldownBackText()
- })
- .align();
- }
- this.ddDupes.length = []; // #3315
- };
- ColumnSeries.prototype.supportsDrilldown = true;
- /**
- * When drilling up, keep the upper series invisible until the lower series has
- * moved into place
- */
- ColumnSeries.prototype.animateDrillupTo = function(init) {
- if (!init) {
- var newSeries = this,
- level = newSeries.drilldownLevel;
- each(this.points, function(point) {
- if (point.graphic) { // #3407
- point.graphic.hide();
- }
- if (point.dataLabel) {
- point.dataLabel.hide();
- }
- if (point.connector) {
- point.connector.hide();
- }
- });
- // Do dummy animation on first point to get to complete
- setTimeout(function() {
- if (newSeries.points) { // May be destroyed in the meantime, #3389
- each(newSeries.points, function(point, i) {
- // Fade in other points
- var verb = i === (level && level.pointIndex) ? 'show' : 'fadeIn',
- inherit = verb === 'show' ? true : undefined;
- if (point.graphic) { // #3407
- point.graphic[verb](inherit);
- }
- if (point.dataLabel) {
- point.dataLabel[verb](inherit);
- }
- if (point.connector) {
- point.connector[verb](inherit);
- }
- });
- }
- }, Math.max(this.chart.options.drilldown.animation.duration - 50, 0));
- // Reset
- this.animate = noop;
- }
- };
- ColumnSeries.prototype.animateDrilldown = function(init) {
- var series = this,
- drilldownLevels = this.chart.drilldownLevels,
- animateFrom,
- animationOptions = this.chart.options.drilldown.animation,
- xAxis = this.xAxis;
- if (!init) {
- each(drilldownLevels, function(level) {
- if (series.options._ddSeriesId === level.lowerSeriesOptions._ddSeriesId) {
- animateFrom = level.shapeArgs;
- }
- });
- animateFrom.x += (pick(xAxis.oldPos, xAxis.pos) - xAxis.pos);
- each(this.points, function(point) {
- var animateTo = point.shapeArgs;
- if (point.graphic) {
- point.graphic
- .attr(animateFrom)
- .animate(
- extend(point.shapeArgs, {
- fill: point.color || series.color
- }),
- animationOptions
- );
- }
- if (point.dataLabel) {
- point.dataLabel.fadeIn(animationOptions);
- }
- });
- this.animate = null;
- }
- };
- /**
- * When drilling up, pull out the individual point graphics from the lower series
- * and animate them into the origin point in the upper series.
- */
- ColumnSeries.prototype.animateDrillupFrom = function(level) {
- var animationOptions = this.chart.options.drilldown.animation,
- group = this.group,
- series = this;
- // Cancel mouse events on the series group (#2787)
- each(series.trackerGroups, function(key) {
- if (series[key]) { // we don't always have dataLabelsGroup
- series[key].on('mouseover');
- }
- });
- delete this.group;
- each(this.points, function(point) {
- var graphic = point.graphic,
- animateTo = level.shapeArgs,
- complete = function() {
- graphic.destroy();
- if (group) {
- group = group.destroy();
- }
- };
- if (graphic) {
- delete point.graphic;
- if (animationOptions) {
- graphic.animate(
- animateTo,
- H.merge(animationOptions, {
- complete: complete
- })
- );
- } else {
- graphic.attr(animateTo);
- complete();
- }
- }
- });
- };
- if (PieSeries) {
- extend(PieSeries.prototype, {
- supportsDrilldown: true,
- animateDrillupTo: ColumnSeries.prototype.animateDrillupTo,
- animateDrillupFrom: ColumnSeries.prototype.animateDrillupFrom,
- animateDrilldown: function(init) {
- 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;
- if (!init) {
- each(this.points, function(point, i) {
- var animateTo = point.shapeArgs;
- if (point.graphic) {
- point.graphic
- .attr(H.merge(animateFrom, {
- start: start + i * startAngle,
- end: start + (i + 1) * startAngle
- }))[animationOptions ? 'animate' : 'attr'](
- animateTo,
- animationOptions
- );
- }
- });
- this.animate = null;
- }
- }
- });
- }
- H.Point.prototype.doDrilldown = function(_holdRedraw, category, originalEvent) {
- var series = this.series,
- chart = series.chart,
- drilldown = chart.options.drilldown,
- i = (drilldown.series || []).length,
- seriesOptions;
- if (!chart.ddDupes) {
- chart.ddDupes = [];
- }
- while (i-- && !seriesOptions) {
- if (drilldown.series[i].id === this.drilldown && inArray(this.drilldown, chart.ddDupes) === -1) {
- seriesOptions = drilldown.series[i];
- chart.ddDupes.push(this.drilldown);
- }
- }
- // Fire the event. If seriesOptions is undefined, the implementer can check for
- // seriesOptions, and call addSeriesAsDrilldown async if necessary.
- fireEvent(chart, 'drilldown', {
- point: this,
- seriesOptions: seriesOptions,
- category: category,
- originalEvent: originalEvent,
- points: category !== undefined && this.series.xAxis.getDDPoints(category).slice(0)
- }, function(e) {
- var chart = e.point.series && e.point.series.chart,
- seriesOptions = e.seriesOptions;
- if (chart && seriesOptions) {
- if (_holdRedraw) {
- chart.addSingleSeriesAsDrilldown(e.point, seriesOptions);
- } else {
- chart.addSeriesAsDrilldown(e.point, seriesOptions);
- }
- }
- });
- };
- /**
- * Drill down to a given category. This is the same as clicking on an axis label.
- */
- H.Axis.prototype.drilldownCategory = function(x, e) {
- var key,
- point,
- ddPointsX = this.getDDPoints(x);
- for (key in ddPointsX) {
- point = ddPointsX[key];
- if (point && point.series && point.series.visible && point.doDrilldown) { // #3197
- point.doDrilldown(true, x, e);
- }
- }
- this.chart.applyDrilldown();
- };
- /**
- * Return drillable points for this specific X value
- */
- H.Axis.prototype.getDDPoints = function(x) {
- var ret = [];
- each(this.series, function(series) {
- var i,
- xData = series.xData,
- points = series.points;
- for (i = 0; i < xData.length; i++) {
- if (xData[i] === x && series.options.data[i] && series.options.data[i].drilldown) {
- ret.push(points ? points[i] : true);
- break;
- }
- }
- });
- return ret;
- };
- /**
- * Make a tick label drillable, or remove drilling on update
- */
- Tick.prototype.drillable = function() {
- var pos = this.pos,
- label = this.label,
- axis = this.axis,
- isDrillable = axis.coll === 'xAxis' && axis.getDDPoints,
- ddPointsX = isDrillable && axis.getDDPoints(pos);
- if (isDrillable) {
- if (label && ddPointsX.length) {
- label.drillable = true;
- label
- .addClass('highcharts-drilldown-axis-label')
- .on('click', function(e) {
- axis.drilldownCategory(pos, e);
- });
- } else if (label && label.drillable) {
- label.on('click', null); // #3806
- label.removeClass('highcharts-drilldown-axis-label');
- }
- }
- };
- /**
- * Always keep the drillability updated (#3951)
- */
- wrap(Tick.prototype, 'addLabel', function(proceed) {
- proceed.call(this);
- this.drillable();
- });
- /**
- * On initialization of each point, identify its label and make it clickable. Also, provide a
- * list of points associated to that label.
- */
- wrap(H.Point.prototype, 'init', function(proceed, series, options, x) {
- var point = proceed.call(this, series, options, x),
- xAxis = series.xAxis,
- tick = xAxis && xAxis.ticks[x];
- if (point.drilldown) {
- // Add the click event to the point
- H.addEvent(point, 'click', function(e) {
- if (series.xAxis && series.chart.options.drilldown.allowPointDrilldown === false) {
- series.xAxis.drilldownCategory(point.x, e); // #5822, x changed
- } else {
- point.doDrilldown(undefined, undefined, e);
- }
- });
- /*wrap(point, 'importEvents', function (proceed) { // wrapping importEvents makes point.click event work
- if (!this.hasImportedEvents) {
- proceed.call(this);
- H.addEvent(this, 'click', function () {
- this.doDrilldown();
- });
- }
- });*/
- }
- // Add or remove click handler and style on the tick label
- if (tick) {
- tick.drillable();
- }
- return point;
- });
- wrap(H.Series.prototype, 'drawDataLabels', function(proceed) {
- var css = this.chart.options.drilldown.activeDataLabelStyle,
- renderer = this.chart.renderer;
- proceed.call(this);
- each(this.points, function(point) {
- var pointCSS = {};
- if (point.drilldown && point.dataLabel) {
- if (css.color === 'contrast') {
- pointCSS.color = renderer.getContrast(point.color || this.color);
- }
- point.dataLabel
- .addClass('highcharts-drilldown-data-label');
- }
- }, this);
- });
- // Mark the trackers with a pointer
- var type,
- drawTrackerWrapper = function(proceed) {
- proceed.call(this);
- each(this.points, function(point) {
- if (point.drilldown && point.graphic) {
- point.graphic.addClass('highcharts-drilldown-point');
- }
- });
- };
- for (type in seriesTypes) {
- if (seriesTypes[type].prototype.supportsDrilldown) {
- wrap(seriesTypes[type].prototype, 'drawTracker', drawTrackerWrapper);
- }
- }
- }(Highcharts));
- }));
|