/*
|
This file is part of Ext JS 4.2
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
Contact: http://www.sencha.com/contact
|
|
GNU General Public License Usage
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
packaging of this file.
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
at http://www.sencha.com/contact.
|
|
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
|
*/
|
/**
|
* @class Ext.chart.LegendItem
|
* A single item of a legend (marker plus label)
|
*/
|
Ext.define('Ext.chart.LegendItem', {
|
|
/* Begin Definitions */
|
|
extend: 'Ext.draw.CompositeSprite',
|
|
requires: ['Ext.chart.Shape'],
|
|
/* End Definitions */
|
|
// Controls Series visibility
|
hiddenSeries: false,
|
|
// These are cached for quick lookups
|
label: undefined,
|
|
// Position of the item, relative to the upper-left corner of the legend box
|
x: 0,
|
y: 0,
|
zIndex: 500,
|
|
// checks to make sure that a unit size follows the bold keyword in the font style value
|
boldRe: /bold\s\d{1,}.*/i,
|
|
constructor: function(config) {
|
this.callParent(arguments);
|
this.createLegend(config);
|
},
|
|
/**
|
* Creates all the individual sprites for this legend item
|
*/
|
createLegend: function(config) {
|
var me = this,
|
series = me.series,
|
index = config.yFieldIndex;
|
|
me.label = me.createLabel(config);
|
me.createSeriesMarkers(config);
|
|
me.setAttributes({
|
hidden: false
|
}, true);
|
|
me.yFieldIndex = index;
|
|
// Add event listeners
|
me.on('mouseover', me.onMouseOver, me);
|
me.on('mouseout', me.onMouseOut, me);
|
me.on('mousedown', me.onMouseDown, me);
|
|
if (!series.visibleInLegend(index)) {
|
me.hiddenSeries = true;
|
me.label.setAttributes({
|
opacity: 0.5
|
}, true);
|
};
|
|
// Relative to 0,0 at first so that the bbox is calculated correctly
|
me.updatePosition({ x: 0, y: 0 });
|
},
|
|
/**
|
* @private Retrieves text to be displayed as item label.
|
*/
|
getLabelText: function() {
|
var me = this,
|
series = me.series,
|
idx = me.yFieldIndex;
|
|
function getSeriesProp(name) {
|
var val = series[name];
|
return (Ext.isArray(val) ? val[idx] : val);
|
}
|
|
return getSeriesProp('title') || getSeriesProp('yField');
|
},
|
|
/**
|
* @private Creates label sprite.
|
*/
|
createLabel: function(config) {
|
var me = this,
|
legend = me.legend;
|
|
return me.add('label', me.surface.add({
|
type: 'text',
|
x: 20,
|
y: 0,
|
zIndex: (me.zIndex || 0) + 2,
|
fill: legend.labelColor,
|
font: legend.labelFont,
|
text: me.getLabelText(),
|
style: {
|
cursor: 'pointer'
|
}
|
}));
|
},
|
|
/**
|
* @private Creates Series marker Sprites.
|
*/
|
createSeriesMarkers: function(config) {
|
var me = this,
|
index = config.yFieldIndex,
|
series = me.series,
|
seriesType = series.type,
|
surface = me.surface,
|
z = me.zIndex;
|
|
// Line series - display as short line with optional marker in the middle
|
if (seriesType === 'line' || seriesType === 'scatter') {
|
if(seriesType === 'line') {
|
var seriesStyle = Ext.apply(series.seriesStyle, series.style);
|
me.drawLine(0.5, 0.5, 16.5, 0.5, z, seriesStyle, index);
|
};
|
|
if (series.showMarkers || seriesType === 'scatter') {
|
var markerConfig = Ext.apply(series.markerStyle, series.markerConfig || {}, {
|
fill: series.getLegendColor(index)
|
});
|
me.drawMarker(8.5, 0.5, z, markerConfig);
|
}
|
}
|
// All other series types - display as filled box
|
else {
|
me.drawFilledBox(12, 12, z, index);
|
}
|
},
|
|
/**
|
* @private Creates line sprite for Line series.
|
*/
|
drawLine: function(fromX, fromY, toX, toY, z, seriesStyle, index) {
|
var me = this,
|
surface = me.surface,
|
series = me.series;
|
|
return me.add('line', surface.add({
|
type: 'path',
|
path: 'M' + fromX + ',' + fromY + 'L' + toX + ',' + toY,
|
zIndex: (z || 0) + 2,
|
"stroke-width": series.lineWidth,
|
"stroke-linejoin": "round",
|
"stroke-dasharray": series.dash,
|
stroke: seriesStyle.stroke || series.getLegendColor(index) || '#000',
|
style: {
|
cursor: 'pointer'
|
}
|
}));
|
},
|
|
/**
|
* @private Creates series-shaped marker for Line and Scatter series.
|
*/
|
drawMarker: function(x, y, z, markerConfig) {
|
var me = this,
|
surface = me.surface,
|
series = me.series;
|
|
return me.add('marker', Ext.chart.Shape[markerConfig.type](surface, {
|
fill: markerConfig.fill,
|
x: x,
|
y: y,
|
zIndex: (z || 0) + 2,
|
radius: markerConfig.radius || markerConfig.size,
|
style: {
|
cursor: 'pointer'
|
}
|
}));
|
},
|
|
/**
|
* @private Creates box-shaped marker for all series but Line and Scatter.
|
*/
|
drawFilledBox: function(width, height, z, index) {
|
var me = this,
|
surface = me.surface,
|
series = me.series;
|
|
return me.add('box', surface.add({
|
type: 'rect',
|
zIndex: (z || 0) + 2,
|
x: 0,
|
y: 0,
|
width: width,
|
height: height,
|
fill: series.getLegendColor(index),
|
style: {
|
cursor: 'pointer'
|
}
|
}));
|
},
|
|
/**
|
* @private Draws label in bold when mouse cursor is over the item.
|
*/
|
onMouseOver: function() {
|
var me = this;
|
|
me.label.setStyle({
|
'font-weight': 'bold'
|
});
|
me.series._index = me.yFieldIndex;
|
me.series.highlightItem();
|
},
|
|
/**
|
* @private Draws label in normal when mouse cursor leaves the item.
|
*/
|
onMouseOut: function() {
|
var me = this,
|
legend = me.legend,
|
boldRe = me.boldRe;
|
|
me.label.setStyle({
|
'font-weight': legend.labelFont && boldRe.test(legend.labelFont) ? 'bold' : 'normal'
|
});
|
me.series._index = me.yFieldIndex;
|
me.series.unHighlightItem();
|
},
|
|
/**
|
* @private Toggles Series visibility upon mouse click on the item.
|
*/
|
onMouseDown: function() {
|
var me = this,
|
index = me.yFieldIndex;
|
|
if (!me.hiddenSeries) {
|
me.series.hideAll(index);
|
me.label.setAttributes({
|
opacity: 0.5
|
}, true);
|
} else {
|
me.series.showAll(index);
|
me.label.setAttributes({
|
opacity: 1
|
}, true);
|
}
|
me.hiddenSeries = !me.hiddenSeries;
|
me.legend.chart.redraw();
|
},
|
|
/**
|
* Update the positions of all this item's sprites to match the root position
|
* of the legend box.
|
* @param {Object} relativeTo (optional) If specified, this object's 'x' and 'y' values will be used
|
* as the reference point for the relative positioning. Defaults to the Legend.
|
*/
|
updatePosition: function(relativeTo) {
|
var me = this,
|
items = me.items,
|
ln = items.length,
|
i = 0,
|
item;
|
if (!relativeTo) {
|
relativeTo = me.legend;
|
}
|
for (; i < ln; i++) {
|
item = items[i];
|
switch (item.type) {
|
case 'text':
|
item.setAttributes({
|
x: 20 + relativeTo.x + me.x,
|
y: relativeTo.y + me.y
|
}, true);
|
break;
|
case 'rect':
|
item.setAttributes({
|
translate: {
|
x: relativeTo.x + me.x,
|
y: relativeTo.y + me.y - 6
|
}
|
}, true);
|
break;
|
default:
|
item.setAttributes({
|
translate: {
|
x: relativeTo.x + me.x,
|
y: relativeTo.y + me.y
|
}
|
}, true);
|
}
|
}
|
}
|
});
|
