File: ia\ui\AreaBreakdownPieComponent.js

/** 
 * A class for rendering an area breakdown pie chart component.
 *
 * @author J Clare
 * @class ia.AreaBreakdownPieComponent
 * @extends ia.EventDispatcher
 * @constructor
 * @param {String} id The id of the component.
 * @param {String} The layout of the component "vertical", "horizontal" or single".
 */
ia.AreaBreakdownPieComponent = function(id, layout)
{		
	ia.AreaBreakdownPieComponent.baseConstructor.call(this);
	
	this.id = id;	
	this.tip = "";
	this._layout = layout;

	this._chartTitle1 = "";
	this._chart1 = undefined;
	this._layer1 = undefined;

	this._chartTitle2 = "";
	this._chart2 = undefined;
	this._layer2 = undefined;
	
	this._selectionIds = [];

	this._multiLayout = true;
	this._data = undefined;
	this._isVisible = true;
};
ia.extend(ia.EventDispatcher, ia.AreaBreakdownPieComponent);
	
/** 
 * The id.
 * 
 * @property id
 * @type String
 */
ia.AreaBreakdownPieComponent.prototype.id;

/**
 * The container that holds the object.
 * 
 * @property container
 * @type {JQUERY Element}
 */
ia.AreaBreakdownPieComponent.prototype.container;

/**
 * The thematic.
 * 
 * @property thematic
 * @type ia.Thematic
 */
ia.AreaBreakdownPieComponent.prototype.thematic;

/**
 * The initial title of the first chart.
 * 
 * @property title1
 * @type String
 */
ia.AreaBreakdownPieComponent.prototype.title1;

/**
 * The initial title of the second chart.
 * 
 * @property title2
 * @type String
 */
ia.AreaBreakdownPieComponent.prototype.title2;

/** 
 * The item selection color.
 * 
 * @property selectionColor
 * @type String
 */
ia.AreaBreakdownPieComponent.prototype.selectionColor;

/** 
 * The item highlight color.
 * 
 * @property highlightColor
 * @type String

 */
ia.AreaBreakdownPieComponent.prototype.highlightColor;

/**
 * The data tip.
 * 
 * @property tip
 * @type String
 * @default ""
 */
ia.AreaBreakdownPieComponent.prototype.tip;

/**
 * Builds the component
 *
 * @method build
 */
ia.AreaBreakdownPieComponent.prototype.build = function()
{
	// Interaction group
	var iGroup = new ia.InteractionGroup();

	this.container = $j("<div id='"+this.id+"'class='ia-area-breakdown-pie-chart'>");
	var me = this;
	
	// Pie thematics.
	this.thematic = new ia.Thematic();
	this.thematic.setDataType(ia.Thematic.CATEGORIC);
	this.thematic.setDataField("value");
	
	// Containers.
	var $pieContainer1;
	var $pieContainer2;
	if (this._layout === "vertical") 
	{
		$pieContainer1 = $j("<div style='padding:8px;text-align:center;width:100%;height:50%'>");
		$pieContainer2 = $j("<div style='padding:8px;text-align:center;width:100%;height:50%'>");
	}
	else if (this._layout === "horizontal")
	{
		$pieContainer1 = $j("<div style='display:inline-block;padding:8px;text-align:center;width:50%;height:100%'>");
	 	$pieContainer2 = $j("<div style='display:inline-block;padding:8px;text-align:center;width:50%;height:100%'>");
	}
	else // Single layout.
	{
		this._multiLayout = false;
		$pieContainer1 = $j("<div style='padding:8px;text-align:center;width:100%;height:100%'>");
	}
	this.container.append($pieContainer1);
	if (this._multiLayout) this.container.append($pieContainer2);
	
	// Pie Chart 1.
	this._chartTitle1 = $j("<div>").html("");
	$pieContainer1.append(this._chartTitle1);
	
	this._chart1 = new ia.PieChart(this.id+"-pie-chart-1");
	this._chart1.container.css('position','relative')
	$pieContainer1.append(this._chart1.container);

	this._layer1 = new ia.AdvancedPieLayer();
	this._layer1.thematic = this.thematic;
	this._layer1.highlightColor = this.highlightColor;
	this._layer1.selectionColor = this.selectionColor;
	this._layer1.tip = this.tip;
	this._layer1.setVisible(true);
	this._layer1.interactive = true;
	iGroup.addComponent(this._layer1);
	this._chart1.addLayer(this._layer1);
	
	if (this._multiLayout) 
	{
		// Pie Chart 2.
		this._chartTitle2 = $j("<div>").html("");
		$pieContainer2.append(this._chartTitle2);

		this._chart2 = new ia.PieChart(this.id+"-pie-chart-2");
		this._chart2.container.css('position','relative')
		$pieContainer2.append(this._chart2.container);

		this._layer2 = new ia.AdvancedPieLayer();
		this._layer2.thematic = this.thematic;
		this._layer2.highlightColor = this.highlightColor;
		this._layer2.selectionColor = this.selectionColor;
		this._layer2.tip = this.tip;
		this._layer2.setVisible(true);
		this._layer2.interactive = true;
		iGroup.addComponent(this._layer2);
		this._chart2.addLayer(this._layer2);
	}
};

/** 
 * Specifies a dataprovider.
 *
 * @method setData
 */
ia.AreaBreakdownPieComponent.prototype.setData = function(data)
{
	this._data = data;
	this._layer1.setData(data)
	if (this._multiLayout) this._layer2.setData(data)
};

/**
 * Hightlights an item.
 *
 * @method highlight
 * @param {String} id The id of the item to highlight.
 */
ia.AreaBreakdownPieComponent.prototype.highlight = function(id)
{		
	if (this._multiLayout) 
	{
		if (this._selectionIds.length === 1)
		{
			this._layer2.itemId = id;
			this._layer2.update();
			this._layer2.render();
			this._chartTitle2.html(this._layer2.itemName);
		}
		else if (this._selectionIds.length === 0)
		{
			this._layer1.itemId = id;
			this._layer1.update();
			this._layer1.render();
			this._chartTitle1.html(this._layer1.itemName);
		}
	}
	else
	{
		if (this._selectionIds.length === 0)
		{
			this._layer1.itemId = id;
			this._layer1.update();
			this._layer1.render();
			this._chartTitle1.html(this._layer1.itemName);
		}
	}
};

/**
 * Clears all highlights.
 *
 * @method clearHighlight
 */
ia.AreaBreakdownPieComponent.prototype.clearHighlight = function() 
{
	if (this._multiLayout) 
	{
		if (this._selectionIds.length === 1)
		{
			this._chartTitle2.html(this.title2);
			this._layer2.itemId = null;
			this._layer2.update();
			this._layer2.render();
		}
		else if (this._selectionIds.length === 0)
		{
			this._chartTitle1.html(this.title1);
			this._layer1.itemId = null;
			this._layer1.update();
			this._layer1.render();
		}
	}
	else
	{
		if (this._selectionIds.length === 0)
		{
			this._chartTitle1.html(this.title1);
			this._layer1.itemId = null;
			this._layer1.update();
			this._layer1.render();
		}
	}
};

/**
 * Selects an item.
 *
 * @method select
 * @param {String} id The id of the item.
 */
ia.AreaBreakdownPieComponent.prototype.select = function(id)
{	
	var index = this._selectionIds.indexOf(id);
	if (index === -1) this._selectionIds.push(id);
	
	if (this._multiLayout) 
	{
		if (this._selectionIds.length > 1)
		{
			this._layer2.itemId = id;
			this._layer2.update();
			this._layer2.render();
			this._chartTitle2.html(this._layer2.itemName);
		}
		else
		{
			this._layer1.itemId = id;
			this._layer1.update();
			this._layer1.render();
			this._chartTitle1.html(this._layer1.itemName);
		}
	}
	else
	{
		this._layer1.itemId = id;
		this._layer1.update();
		this._layer1.render();
		this._chartTitle1.html(this._layer1.itemName);
	}
};

/**
 * Unselects an item.
 *
 * @method unselect
 * @param {String} id The id of the item.
 */
ia.AreaBreakdownPieComponent.prototype.unselect = function(id) 
{
	var index = this._selectionIds.indexOf(id);
	if (index !== -1) this._selectionIds.splice(index, 1);
	
	if (this._multiLayout) 
	{
		if (this._selectionIds.length === 0)
		{
			this._chartTitle1.html(this.title1);
			this._layer1.itemId = null;
			this._layer1.update();
			this._layer1.render();
		}
		else if (this._selectionIds.length === 1)
		{
			this._chartTitle2.html(this.title2);
			this._layer2.itemId = null;
			this._layer2.update();
			this._layer2.render();
		}
	}
	else
	{
		if (this._selectionIds.length === 0)
		{
			this._chartTitle1.html(this.title1);
			this._layer1.itemId = null;
			this._layer1.update();
			this._layer1.render();
		}
	}
};

/**
 * Clears all selections.
 *
 * @method clearSelection
 */
ia.AreaBreakdownPieComponent.prototype.clearSelection = function() 
{
	this._selectionIds = [];
	
	this._layer1.itemId = null;
	this._layer1.update();
	this._layer1.render();
	this._chartTitle1.html(this.title1);
	
	if (this._multiLayout) 
	{
		this._layer2.itemId = null;
		this._layer2.update();
		this._layer2.render();
		this._chartTitle2.html(this.title2);
	}
};

/**
 * Renders the component.
 *
 * @method render
 */
ia.AreaBreakdownPieComponent.prototype.render = function() 
{
	this._layer1.update();
	this._layer1.render();
	if (this._chartTitle1.html() === "") this._chartTitle1.html(this.title1);
	if (this._multiLayout) 
	{
		this._layer2.update();
		this._layer2.render();
		if (this._chartTitle2.html() === "") this._chartTitle2.html(this.title2);
	}	
};

/**
 * Toggles the chart visibility.
 *
 * @method toggle
 */
ia.AreaBreakdownPieComponent.prototype.toggle = function(visible)
{
	if (this._isVisible) this.hide();
	else this.show();
};

/**
 * Hides the chart.
 *
 * @method hide
 */
ia.AreaBreakdownPieComponent.prototype.hide = function()
{
	if (this._isVisible)
	{
		this._isVisible = false;
		this.container.stop();
		this.container.animate({opacity: 0}, function() {});
	}
};

/**
 * Shows the chart.
 *
 * @method show
 */
ia.AreaBreakdownPieComponent.prototype.show = function()
{
	if (!this._isVisible)
	{
		this._isVisible = true;
		this.container.stop();
		this.container.animate({opacity: 1}, function() {});
	}
};