Subversion-Projekte lars-tiefland.cienc

/**

 * Highcharts Drilldown plugin

 *

 * Author: Torstein Honsi

 * License: MIT License

 *

 * Demo: http://jsfiddle.net/highcharts/Vf3yT/

 */

/*global Highcharts,HighchartsAdapter*/

(function (H) {

	"use strict";

	var noop = function () {},

		defaultOptions = H.getOptions(),

		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 = HighchartsAdapter.fireEvent,

		inArray = HighchartsAdapter.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.raw || '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) {

		HighchartsAdapter.addAnimSetter(prop, function (fx) {

			fx.elem.attr(prop, tweenColors(H.Color(fx.start), H.Color(fx.end), fx.pos));

		});

	});

	// Add language

	extend(defaultOptions.lang, {

		drillUpText: '◁ Back to {series.name}'

	});

	defaultOptions.drilldown = {

		activeAxisLabelStyle: {

			cursor: 'pointer',

			color: '#0d233a',

			fontWeight: 'bold',

			textDecoration: 'underline'

		},

		activeDataLabelStyle: {

			cursor: 'pointer',

			color: '#0d233a',

			fontWeight: 'bold',

			textDecoration: 'underline'

		},

		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,

			color = point.color || oldSeries.color,

			pointIndex,

			levelSeries = [],

			levelSeriesOptions = [],

			level,

			levelNumber,

			last;

		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({

			color: color,

			_ddSeriesId: ddSeriesId++

		}, 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 = {

			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: 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

			}

		};

		// 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

			)

			.attr({

				align: buttonOptions.position.align,

				zIndex: 9

			})

			.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);

				}

			}

		}

		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.fill = level.color;

				}

			});

			animateFrom.x += (pick(xAxis.oldPos, xAxis.pos) - xAxis.pos);

			each(this.points, function (point) {

				if (point.graphic) {

					point.graphic

						.attr(animateFrom)

						.animate(

							extend(point.shapeArgs, { fill: point.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,

				complete = function () {

					graphic.destroy();

					if (group) {

						group = group.destroy();

					}

				};

			if (graphic) {

				delete point.graphic;

				if (animationOptions) {

					graphic.animate(

						extend(level.shapeArgs, { fill: level.color }),

						H.merge(animationOptions, { complete: complete })

					);

				} else {

					graphic.attr(level.shapeArgs);

					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) {

						point.graphic

							.attr(H.merge(animateFrom, {

								start: start + i * startAngle,

								end: start + (i + 1) * startAngle,

								fill: level.color

							}))[animationOptions ? 'animate' : 'attr'](

								extend(point.shapeArgs, { fill: point.color }),

								animationOptions

							);

					});

					this.animate = null;

				}

			}

		});

	}

	H.Point.prototype.doDrilldown = function (_holdRedraw, category) {

		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,

			points: category !== undefined && this.series.xAxis.ddPoints[category].slice(0)

		});

		if (seriesOptions) {

			if (_holdRedraw) {

				chart.addSingleSeriesAsDrilldown(this, seriesOptions);

			} else {

				chart.addSeriesAsDrilldown(this, seriesOptions);

			}

		}

	};

	/**

	 * Drill down to a given category. This is the same as clicking on an axis label.

	 */

	H.Axis.prototype.drilldownCategory = function (x) {

		var key,

			point,

			ddPointsX = this.ddPoints[x];

		for (key in ddPointsX) {

			point = ddPointsX[key];

			if (point && point.series && point.series.visible && point.doDrilldown) { // #3197

				point.doDrilldown(true, x);

			}

		}

		this.chart.applyDrilldown();

	};

	/**

	 * Create and return a collection of points associated with the X position. Reset it for each level.

	 */

	H.Axis.prototype.getDDPoints = function (x, levelNumber) {

		var ddPoints = this.ddPoints;

		if (!ddPoints) {

			this.ddPoints = ddPoints = {};

		}

		if (!ddPoints[x]) {

			ddPoints[x] = [];

		}

		if (ddPoints[x].levelNumber !== levelNumber) {

			ddPoints[x].length = 0; // reset

		}

		return ddPoints[x];

	};

	/**

	 * Make a tick label drillable, or remove drilling on update

	 */

	Tick.prototype.drillable = function () {

		var pos = this.pos,

			label = this.label,

			axis = this.axis,

			ddPointsX = axis.ddPoints && axis.ddPoints[pos];

		if (label && ddPointsX && ddPointsX.length) {

			if (!label.basicStyles) {

				label.basicStyles = H.merge(label.styles);

			}

			label

				.addClass('highcharts-drilldown-axis-label')

				.css(axis.chart.options.drilldown.activeAxisLabelStyle)

				.on('click', function () {

					axis.drilldownCategory(pos);

				});

		} else if (label && label.basicStyles) {

			label.styles = {}; // reset for full overwrite of styles

			label.css(label.basicStyles);

			label.on('click', null); // #3806

		}

	};

	/**

	 * 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],

			ddPointsX = xAxis && xAxis.getDDPoints(x, series.options._levelNumber);

		if (point.drilldown) {

			// Add the click event to the point

			H.addEvent(point, 'click', function () {

				if (series.xAxis && series.chart.options.drilldown.allowPointDrilldown === false) {

					series.xAxis.drilldownCategory(x);

				} else {

					point.doDrilldown();

				}

			});

			/*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();

					});

				}

			});*/

			// Register drilldown points on this X value

			if (ddPointsX) {

				ddPointsX.push(point);

				ddPointsX.levelNumber = series.options._levelNumber;

			}

		}

		// 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;

		proceed.call(this);

		each(this.points, function (point) {

			if (point.drilldown && point.dataLabel) {

				point.dataLabel

					.attr({

						'class': 'highcharts-drilldown-data-label'

					})

					.css(css);

			}

		});

	});

	// 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

						.attr({

							'class': 'highcharts-drilldown-point'

						})

						.css({ cursor: 'pointer' });

				}

			});

		};

	for (type in seriesTypes) {

		if (seriesTypes[type].prototype.supportsDrilldown) {

			wrap(seriesTypes[type].prototype, 'drawTracker', drawTrackerWrapper);

		}

	}

}(Highcharts));