/** * @class Ext.chart.Callout * A mixin providing callout functionality for Ext.chart.series.Series. */ Ext.define('Ext.chart.Callout', { /* Begin Definitions */ /* End Definitions */ constructor: function(config) { if (config.callouts) { config.callouts.styles = Ext.applyIf(config.callouts.styles || {}, { color: "#000", font: "11px Helvetica, sans-serif" }); this.callouts = Ext.apply(this.callouts || {}, config.callouts); this.calloutsArray = []; } }, renderCallouts: function() { if (!this.callouts) { return; } var me = this, items = me.items, animate = me.chart.animate, config = me.callouts, styles = config.styles, group = me.calloutsArray, store = me.chart.getChartStore(), len = store.getCount(), ratio = items.length / len, previouslyPlacedCallouts = [], i, count, j, p, item, label, storeItem, display; for (i = 0, count = 0; i < len; i++) { for (j = 0; j < ratio; j++) { item = items[count]; label = group[count]; storeItem = store.getAt(i); display = (!config.filter || config.filter(storeItem)); if (!display && !label) { count++; continue; } if (!label) { group[count] = label = me.onCreateCallout(storeItem, item, i, display, j, count); } for (p in label) { if (label[p] && label[p].setAttributes) { label[p].setAttributes(styles, true); } } if (!display) { for (p in label) { if (label[p]) { if (label[p].setAttributes) { label[p].setAttributes({ hidden: true }, true); } else if(label[p].setVisible) { label[p].setVisible(false); } } } } if (config && config.renderer) { config.renderer(label, storeItem); } me.onPlaceCallout(label, storeItem, item, i, display, animate, j, count, previouslyPlacedCallouts); previouslyPlacedCallouts.push(label); count++; } } this.hideCallouts(count); }, onCreateCallout: function(storeItem, item, i, display) { var me = this, group = me.calloutsGroup, config = me.callouts, styles = (config ? config.styles : undefined), width = (styles ? styles.width : 0), height = (styles ? styles.height : 0), chart = me.chart, surface = chart.surface, calloutObj = { //label: false, //box: false, lines: false }; calloutObj.lines = surface.add(Ext.apply({}, { type: 'path', path: 'M0,0', stroke: me.getLegendColor() || '#555' }, styles)); if (config.items) { calloutObj.panel = new Ext.Panel({ style: "position: absolute;", width: width, height: height, items: config.items, renderTo: chart.el }); } return calloutObj; }, hideCallouts: function(index) { var calloutsArray = this.calloutsArray, len = calloutsArray.length, co, p; while (len-->index) { co = calloutsArray[len]; for (p in co) { if (co[p]) { co[p].hide(true); } } } } });