/**
* The StackedBarSeries renders bar chart in which series are stacked horizontally to show
* their contribution to the cumulative total.
*
* @class StackedBarSeries
* @extends BarSeries
* @uses StackingUtil
* @constructor
*/
Y.StackedBarSeries = Y.Base.create("stackedBarSeries", Y.BarSeries, [Y.StackingUtil], {
/**
* @protected
*
* Draws the series.
*
* @method drawSeries
*/
drawSeries: function()
{
if(this.get("xcoords").length < 1)
{
return;
}
var style = this.get("styles").marker,
w = style.width,
h = style.height,
xcoords = this.get("xcoords"),
ycoords = this.get("ycoords"),
i = 0,
len = xcoords.length,
top = ycoords[0],
type = this.get("type"),
graph = this.get("graph"),
seriesCollection = graph.seriesTypes[type],
ratio,
order = this.get("order"),
graphOrder = this.get("graphOrder"),
left,
marker,
lastCollection,
negativeBaseValues,
positiveBaseValues,
useOrigin = order === 0,
totalHeight = len * h,
hotspot,
isChrome = ISCHROME;
this._createMarkerCache();
if(isChrome)
{
this._createHotspotCache();
}
if(totalHeight > this.get("height"))
{
ratio = this.height/totalHeight;
h *= ratio;
h = Math.max(h, 1);
}
if(!useOrigin)
{
lastCollection = seriesCollection[order - 1];
negativeBaseValues = lastCollection.get("negativeBaseValues");
positiveBaseValues = lastCollection.get("positiveBaseValues");
}
else
{
negativeBaseValues = [];
positiveBaseValues = [];
}
this.set("negativeBaseValues", negativeBaseValues);
this.set("positiveBaseValues", positiveBaseValues);
for(i = 0; i < len; ++i)
{
top = ycoords[i];
left = xcoords[i];
if(useOrigin)
{
w = left - this._leftOrigin;
if(left > this._leftOrigin)
{
positiveBaseValues[i] = left;
negativeBaseValues[i] = this._leftOrigin;
}
else if(left < this._leftOrigin)
{
positiveBaseValues[i] = this._leftOrigin;
negativeBaseValues[i] = left;
}
else
{
positiveBaseValues[i] = left;
negativeBaseValues[i] = this._leftOrigin;
}
left -= w;
}
else
{
if(left < this._leftOrigin)
{
left = negativeBaseValues[i] - (this._leftOrigin - xcoords[i]);
w = negativeBaseValues[i] - left;
negativeBaseValues[i] = left;
}
else if(left > this._leftOrigin)
{
left += (positiveBaseValues[i] - this._leftOrigin);
w = left - positiveBaseValues[i];
positiveBaseValues[i] = left;
left -= w;
}
}
top -= h/2;
style.width = w;
style.height = h;
marker = this.getMarker(style, graphOrder, i);
marker.setPosition(left, top);
if(isChrome)
{
hotspot = this.getHotspot(style, graphOrder, i);
hotspot.setPosition(left, top);
hotspot.parentNode.style.zIndex = 5;
}
}
this._clearMarkerCache();
if(isChrome)
{
this._clearHotspotCache();
}
},
/**
* @protected
*
* Resizes and positions markers based on a mouse interaction.
*
* @method updateMarkerState
* @param {String} type state of the marker
* @param {Number} i index of the marker
*/
updateMarkerState: function(type, i)
{
if(this._markers[i])
{
var state = this._getState(type),
ycoords = this.get("ycoords"),
marker = this._markers[i],
styles = this.get("styles").marker,
h = styles.height,
markerStyles = state == "off" || !styles[state] ? styles : styles[state];
markerStyles.width = marker.width;
marker.update(markerStyles);
if(marker.parentNode)
{
Y.one(marker.parentNode).setStyle("top", (ycoords[i] - h/2));
}
}
},
/**
* @protected
*
* Returns default values for the <code>styles</code> attribute.
*
* @method _getPlotDefaults
* @return Object
*/
_getPlotDefaults: function()
{
var defs = {
fill:{
type: "solid",
alpha: 1,
colors:null,
alphas: null,
ratios: null
},
border:{
weight: 0,
alpha: 1
},
width: 24,
height: 24,
shape: "rect",
padding:{
top: 0,
left: 0,
right: 0,
bottom: 0
}
};
defs.fill.color = this._getDefaultColor(this.get("graphOrder"), "fill");
defs.border.color = this._getDefaultColor(this.get("graphOrder"), "border");
return defs;
}
}, {
ATTRS: {
/**
* Read-only attribute indicating the type of series.
*
* @attribute type
* @type String
* @default stackedBar
*/
type: {
value: "stackedBar"
},
/**
* Direction of the series
*
* @attribute direction
* @type String
* @default vertical
*/
direction: {
value: "vertical"
},
/**
* @private
*
* @attribute negativeBaseValues
* @type Array
* @default null
*/
negativeBaseValues: {
value: null
},
/**
* @private
*
* @attribute positiveBaseValues
* @type Array
* @default null
*/
positiveBaseValues: {
value: null
}
/**
* Style properties used for drawing markers. This attribute is inherited from <code>BarSeries</code>. Below are the default values:
* <dl>
* <dt>fill</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the fill. The default value is determined by the order of the series on the graph. The color
* will be retrieved from the below array:<br/>
* <code>["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]</code>
* </dd>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker fill. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>border</dt><dd>A hash containing the following values:
* <dl>
* <dt>color</dt><dd>Color of the border. The default value is determined by the order of the series on the graph. The color
* will be retrieved from the below array:<br/>
* <code>["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]</code>
* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>
* <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>
* </dl>
* </dd>
* <dt>height</dt><dd>indicates the width of the marker. The default value is 24.</dd>
* <dt>over</dt><dd>hash containing styles for markers when highlighted by a <code>mouseover</code> event. The default
* values for each style is null. When an over style is not set, the non-over value will be used. For example,
* the default value for <code>marker.over.fill.color</code> is equivalent to <code>marker.fill.color</code>.</dd>
* </dl>
*
* @attribute styles
* @type Object
*/
}
});