<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-chart-LegendItem'>/**
|
</span> * @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 */
|
|
<span id='Ext-chart-LegendItem-property-hiddenSeries'> // Controls Series visibility
|
</span> hiddenSeries: false,
|
|
<span id='Ext-chart-LegendItem-property-label'> // These are cached for quick lookups
|
</span> label: undefined,
|
|
<span id='Ext-chart-LegendItem-property-x'> // Position of the item, relative to the upper-left corner of the legend box
|
</span> x: 0,
|
<span id='Ext-chart-LegendItem-property-y'> y: 0,
|
</span><span id='Ext-chart-LegendItem-property-zIndex'> zIndex: 500,
|
</span>
|
<span id='Ext-chart-LegendItem-property-boldRe'> // checks to make sure that a unit size follows the bold keyword in the font style value
|
</span> boldRe: /bold\s\d{1,}.*/i,
|
|
<span id='Ext-chart-LegendItem-method-constructor'> constructor: function(config) {
|
</span> this.callParent(arguments);
|
this.createLegend(config);
|
},
|
|
<span id='Ext-chart-LegendItem-method-createLegend'> /**
|
</span> * 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 });
|
},
|
|
<span id='Ext-chart-LegendItem-method-getLabelText'> /**
|
</span> * @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');
|
},
|
|
<span id='Ext-chart-LegendItem-method-createLabel'> /**
|
</span> * @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'
|
}
|
}));
|
},
|
|
<span id='Ext-chart-LegendItem-method-createSeriesMarkers'> /**
|
</span> * @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);
|
}
|
},
|
|
<span id='Ext-chart-LegendItem-method-drawLine'> /**
|
</span> * @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'
|
}
|
}));
|
},
|
|
<span id='Ext-chart-LegendItem-method-drawMarker'> /**
|
</span> * @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'
|
}
|
}));
|
},
|
|
<span id='Ext-chart-LegendItem-method-drawFilledBox'> /**
|
</span> * @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'
|
}
|
}));
|
},
|
|
<span id='Ext-chart-LegendItem-method-onMouseOver'> /**
|
</span> * @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();
|
},
|
|
<span id='Ext-chart-LegendItem-method-onMouseOut'> /**
|
</span> * @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();
|
},
|
|
<span id='Ext-chart-LegendItem-method-onMouseDown'> /**
|
</span> * @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();
|
},
|
|
<span id='Ext-chart-LegendItem-method-updatePosition'> /**
|
</span> * 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);
|
}
|
}
|
}
|
});
|
</pre>
|
</body>
|
</html>
|
