/** * @class Ext.chart.Highlight * A mixin providing highlight functionality for Ext.chart.series.Series. */ Ext.define('Ext.chart.Highlight', { /* Begin Definitions */ requires: ['Ext.fx.Anim'], /* End Definitions */ /** * Highlight the given series item. * @param {Boolean/Object} Default's false. Can also be an object width style properties (i.e fill, stroke, radius) * or just use default styles per series by setting highlight = true. */ highlight: false, highlightCfg : null, constructor: function(config) { if (config.highlight) { if (config.highlight !== true) { //is an object this.highlightCfg = Ext.apply({}, config.highlight); } else { this.highlightCfg = { fill: '#fdd', radius: 20, lineWidth: 5, stroke: '#f55' }; } } }, /** * Highlight the given series item. * @param {Object} item Info about the item; same format as returned by #getItemForPoint. */ highlightItem: function(item) { if (!item) { return; } var me = this, sprite = item.sprite, opts = me.highlightCfg, surface = me.chart.surface, animate = me.chart.animate, p, from, to, pi; if (!me.highlight || !sprite || sprite._highlighted) { return; } if (sprite._anim) { sprite._anim.paused = true; } sprite._highlighted = true; if (!sprite._defaults) { sprite._defaults = Ext.apply({}, sprite.attr); from = {}; to = {}; for (p in opts) { if (! (p in sprite._defaults)) { sprite._defaults[p] = surface.availableAttrs[p]; } from[p] = sprite._defaults[p]; to[p] = opts[p]; if (Ext.isObject(opts[p])) { from[p] = {}; to[p] = {}; Ext.apply(sprite._defaults[p], sprite.attr[p]); Ext.apply(from[p], sprite._defaults[p]); for (pi in sprite._defaults[p]) { if (! (pi in opts[p])) { to[p][pi] = from[p][pi]; } else { to[p][pi] = opts[p][pi]; } } for (pi in opts[p]) { if (! (pi in to[p])) { to[p][pi] = opts[p][pi]; } } } } sprite._from = from; sprite._to = to; sprite._endStyle = to; } if (animate) { sprite._anim = Ext.create('Ext.fx.Anim', { target: sprite, from: sprite._from, to: sprite._to, duration: 150 }); } else { sprite.setAttributes(sprite._to, true); } }, /** * Un-highlight any existing highlights */ unHighlightItem: function() { if (!this.highlight || !this.items) { return; } var me = this, items = me.items, len = items.length, opts = me.highlightCfg, animate = me.chart.animate, i = 0, obj, p, sprite; for (; i < len; i++) { if (!items[i]) { continue; } sprite = items[i].sprite; if (sprite && sprite._highlighted) { if (sprite._anim) { sprite._anim.paused = true; } obj = {}; for (p in opts) { if (Ext.isObject(sprite._defaults[p])) { obj[p] = {}; Ext.apply(obj[p], sprite._defaults[p]); } else { obj[p] = sprite._defaults[p]; } } if (animate) { //sprite._to = obj; sprite._endStyle = obj; sprite._anim = Ext.create('Ext.fx.Anim', { target: sprite, to: obj, duration: 150 }); } else { sprite.setAttributes(obj, true); } delete sprite._highlighted; //delete sprite._defaults; } } }, cleanHighlights: function() { if (!this.highlight) { return; } var group = this.group, markerGroup = this.markerGroup, i = 0, l; for (l = group.getCount(); i < l; i++) { delete group.getAt(i)._defaults; } if (markerGroup) { for (l = markerGroup.getCount(); i < l; i++) { delete markerGroup.getAt(i)._defaults; } } } });