src/chart/Callout.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 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.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * @class Ext.chart.Callout
  17  * A mixin providing callout functionality for Ext.chart.series.Series.
  18  */
  19 Ext.define('Ext.chart.Callout', {
  20
  21     /* Begin Definitions */
  22
  23     /* End Definitions */
  24
  25     constructor: function(config) {
  26         if (config.callouts) {
  27             config.callouts.styles = Ext.applyIf(config.callouts.styles || {}, {
  28                 color: "#000",
  29                 font: "11px Helvetica, sans-serif"
  30             });
  31             this.callouts = Ext.apply(this.callouts || {}, config.callouts);
  32             this.calloutsArray = [];
  33         }
  34     },
  35
  36     renderCallouts: function() {
  37         if (!this.callouts) {
  38             return;
  39         }
  40
  41         var me = this,
  42             items = me.items,
  43             animate = me.chart.animate,
  44             config = me.callouts,
  45             styles = config.styles,
  46             group = me.calloutsArray,
  47             store = me.chart.store,
  48             len = store.getCount(),
  49             ratio = items.length / len,
  50             previouslyPlacedCallouts = [],
  51             i,
  52             count,
  53             j,
  54             p;
  55
  56         for (i = 0, count = 0; i < len; i++) {
  57             for (j = 0; j < ratio; j++) {
  58                 var item = items[count],
  59                     label = group[count],
  60                     storeItem = store.getAt(i),
  61                     display;
  62
  63                 display = config.filter(storeItem);
  64
  65                 if (!display && !label) {
  66                     count++;
  67                     continue;
  68                 }
  69
  70                 if (!label) {
  71                     group[count] = label = me.onCreateCallout(storeItem, item, i, display, j, count);
  72                 }
  73                 for (p in label) {
  74                     if (label[p] && label[p].setAttributes) {
  75                         label[p].setAttributes(styles, true);
  76                     }
  77                 }
  78                 if (!display) {
  79                     for (p in label) {
  80                         if (label[p]) {
  81                             if (label[p].setAttributes) {
  82                                 label[p].setAttributes({
  83                                     hidden: true
  84                                 }, true);
  85                             } else if(label[p].setVisible) {
  86                                 label[p].setVisible(false);
  87                             }
  88                         }
  89                     }
  90                 }
  91                 config.renderer(label, storeItem);
  92                 me.onPlaceCallout(label, storeItem, item, i, display, animate,
  93                                   j, count, previouslyPlacedCallouts);
  94                 previouslyPlacedCallouts.push(label);
  95                 count++;
  96             }
  97         }
  98         this.hideCallouts(count);
  99     },
 100
 101     onCreateCallout: function(storeItem, item, i, display) {
 102         var me = this,
 103             group = me.calloutsGroup,
 104             config = me.callouts,
 105             styles = config.styles,
 106             width = styles.width,
 107             height = styles.height,
 108             chart = me.chart,
 109             surface = chart.surface,
 110             calloutObj = {
 111                 //label: false,
 112                 //box: false,
 113                 lines: false
 114             };
 115
 116         calloutObj.lines = surface.add(Ext.apply({},
 117         {
 118             type: 'path',
 119             path: 'M0,0',
 120             stroke: me.getLegendColor() || '#555'
 121         },
 122         styles));
 123
 124         if (config.items) {
 125             calloutObj.panel = Ext.create('widget.panel', {
 126                 style: "position: absolute;",
 127                 width: width,
 128                 height: height,
 129                 items: config.items,
 130                 renderTo: chart.el
 131             });
 132         }
 133
 134         return calloutObj;
 135     },
 136
 137     hideCallouts: function(index) {
 138         var calloutsArray = this.calloutsArray,
 139             len = calloutsArray.length,
 140             co,
 141             p;
 142         while (len-->index) {
 143             co = calloutsArray[len];
 144             for (p in co) {
 145                 if (co[p]) {
 146                     co[p].hide(true);
 147                 }
 148             }
 149         }
 150     }
 151 });
 152