docs/source/Label2.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-chart.Label'>/**
   2 </span> * @class Ext.chart.Label
   3  *
   4  * Labels is a mixin whose methods are appended onto the Series class. Labels is an interface with methods implemented
   5  * in each of the Series (Pie, Bar, etc) for label creation and label placement.
   6  *
   7  * The methods implemented by the Series are:
   8  *
   9  * - **`onCreateLabel(storeItem, item, i, display)`** Called each time a new label is created.
  10  *   The arguments of the method are:
  11  *   - *`storeItem`* The element of the store that is related to the label sprite.
  12  *   - *`item`* The item related to the label sprite. An item is an object containing the position of the shape
  13  *     used to describe the visualization and also pointing to the actual shape (circle, rectangle, path, etc).
  14  *   - *`i`* The index of the element created (i.e the first created label, second created label, etc)
  15  *   - *`display`* The display type. May be &lt;b&gt;false&lt;/b&gt; if the label is hidden
  16  *
  17  *  - **`onPlaceLabel(label, storeItem, item, i, display, animate)`** Called for updating the position of the label.
  18  *    The arguments of the method are:
  19  *    - *`label`* The sprite label.&lt;/li&gt;
  20  *    - *`storeItem`* The element of the store that is related to the label sprite&lt;/li&gt;
  21  *    - *`item`* The item related to the label sprite. An item is an object containing the position of the shape
  22  *      used to describe the visualization and also pointing to the actual shape (circle, rectangle, path, etc).
  23  *    - *`i`* The index of the element to be updated (i.e. whether it is the first, second, third from the labelGroup)
  24  *    - *`display`* The display type. May be &lt;b&gt;false&lt;/b&gt; if the label is hidden.
  25  *    - *`animate`* A boolean value to set or unset animations for the labels.
  26  */
  27 Ext.define('Ext.chart.Label', {
  28
  29     /* Begin Definitions */
  30
  31     requires: ['Ext.draw.Color'],
  32
  33     /* End Definitions */
  34
  35 <span id='Ext-chart.Label-cfg-display'>    /**
  36 </span>     * @cfg {String} display
  37      * Specifies the presence and position of labels for each pie slice. Either &quot;rotate&quot;, &quot;middle&quot;, &quot;insideStart&quot;,
  38      * &quot;insideEnd&quot;, &quot;outside&quot;, &quot;over&quot;, &quot;under&quot;, or &quot;none&quot; to prevent label rendering.
  39      * Default value: 'none'.
  40      */
  41
  42 <span id='Ext-chart.Label-cfg-color'>    /**
  43 </span>     * @cfg {String} color
  44      * The color of the label text.
  45      * Default value: '#000' (black).
  46      */
  47
  48 <span id='Ext-chart.Label-cfg-field'>    /**
  49 </span>     * @cfg {String} field
  50      * The name of the field to be displayed in the label.
  51      * Default value: 'name'.
  52      */
  53
  54 <span id='Ext-chart.Label-cfg-minMargin'>    /**
  55 </span>     * @cfg {Number} minMargin
  56      * Specifies the minimum distance from a label to the origin of the visualization.
  57      * This parameter is useful when using PieSeries width variable pie slice lengths.
  58      * Default value: 50.
  59      */
  60
  61 <span id='Ext-chart.Label-cfg-font'>    /**
  62 </span>     * @cfg {String} font
  63      * The font used for the labels.
  64      * Defautl value: &quot;11px Helvetica, sans-serif&quot;.
  65      */
  66
  67 <span id='Ext-chart.Label-cfg-orientation'>    /**
  68 </span>     * @cfg {String} orientation
  69      * Either &quot;horizontal&quot; or &quot;vertical&quot;.
  70      * Dafault value: &quot;horizontal&quot;.
  71      */
  72
  73 <span id='Ext-chart.Label-cfg-renderer'>    /**
  74 </span>     * @cfg {Function} renderer
  75      * Optional function for formatting the label into a displayable value.
  76      * Default value: function(v) { return v; }
  77      * @param v
  78      */
  79
  80     //@private a regex to parse url type colors.
  81     colorStringRe: /url\s*\(\s*#([^\/)]+)\s*\)/,
  82
  83     //@private the mixin constructor. Used internally by Series.
  84     constructor: function(config) {
  85         var me = this;
  86         me.label = Ext.applyIf(me.label || {},
  87         {
  88             display: &quot;none&quot;,
  89             color: &quot;#000&quot;,
  90             field: &quot;name&quot;,
  91             minMargin: 50,
  92             font: &quot;11px Helvetica, sans-serif&quot;,
  93             orientation: &quot;horizontal&quot;,
  94             renderer: function(v) {
  95                 return v;
  96             }
  97         });
  98
  99         if (me.label.display !== 'none') {
 100             me.labelsGroup = me.chart.surface.getGroup(me.seriesId + '-labels');
 101         }
 102     },
 103
 104     //@private a method to render all labels in the labelGroup
 105     renderLabels: function() {
 106         var me = this,
 107             chart = me.chart,
 108             gradients = chart.gradients,
 109             gradient,
 110             items = me.items,
 111             animate = chart.animate,
 112             config = me.label,
 113             display = config.display,
 114             color = config.color,
 115             field = [].concat(config.field),
 116             group = me.labelsGroup,
 117             store = me.chart.store,
 118             len = store.getCount(),
 119             ratio = items.length / len,
 120             i, count, j,
 121             k, gradientsCount = (gradients || 0) &amp;&amp; gradients.length,
 122             colorStopTotal, colorStopIndex, colorStop,
 123             item, label, storeItem,
 124             sprite, spriteColor, spriteBrightness, labelColor,
 125             Color = Ext.draw.Color,
 126             colorString;
 127
 128         if (display == 'none') {
 129             return;
 130         }
 131
 132         for (i = 0, count = 0; i &lt; len; i++) {
 133             for (j = 0; j &lt; ratio; j++) {
 134                 item = items[count];
 135                 label = group.getAt(count);
 136                 storeItem = store.getAt(i);
 137
 138                 if (!item &amp;&amp; label) {
 139                     label.hide(true);
 140                 }
 141
 142                 if (item &amp;&amp; field[j]) {
 143                     if (!label) {
 144                         label = me.onCreateLabel(storeItem, item, i, display, j, count);
 145                     }
 146                     me.onPlaceLabel(label, storeItem, item, i, display, animate, j, count);
 147
 148                     //set contrast
 149                     if (config.contrast &amp;&amp; item.sprite) {
 150                         sprite = item.sprite;
 151                         colorString = sprite._to &amp;&amp; sprite._to.fill || sprite.attr.fill;
 152                         spriteColor = Color.fromString(colorString);
 153                         //color wasn't parsed property maybe because it's a gradient id
 154                         if (colorString &amp;&amp; !spriteColor) {
 155                             colorString = colorString.match(me.colorStringRe)[1];
 156                             for (k = 0; k &lt; gradientsCount; k++) {
 157                                 gradient = gradients[k];
 158                                 if (gradient.id == colorString) {
 159                                     //avg color stops
 160                                     colorStop = 0; colorStopTotal = 0;
 161                                     for (colorStopIndex in gradient.stops) {
 162                                         colorStop++;
 163                                         colorStopTotal += Color.fromString(gradient.stops[colorStopIndex].color).getGrayscale();
 164                                     }
 165                                     spriteBrightness = (colorStopTotal / colorStop) / 255;
 166                                     break;
 167                                 }
 168                             }
 169                         }
 170                         else {
 171                             spriteBrightness = spriteColor.getGrayscale() / 255;
 172                         }
 173                         labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL();
 174
 175                         labelColor[2] = spriteBrightness &gt; 0.5? 0.2 : 0.8;
 176                         label.setAttributes({
 177                             fill: String(Color.fromHSL.apply({}, labelColor))
 178                         }, true);
 179                     }
 180                 }
 181                 count++;
 182             }
 183         }
 184         me.hideLabels(count);
 185     },
 186
 187     //@private a method to hide labels.
 188     hideLabels: function(index) {
 189         var labelsGroup = this.labelsGroup, len;
 190         if (labelsGroup) {
 191             len = labelsGroup.getCount();
 192             while (len--&gt;index) {
 193                 labelsGroup.getAt(len).hide(true);
 194             }
 195         }
 196     }
 197 });</pre></pre></body></html>