docs/source/LegendItem.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-chart-LegendItem'>/**
  19 </span> * @class Ext.chart.LegendItem
  20  * @extends Ext.draw.CompositeSprite
  21  * A single item of a legend (marker plus label)
  22  */
  23 Ext.define('Ext.chart.LegendItem', {
  24
  25     /* Begin Definitions */
  26
  27     extend: 'Ext.draw.CompositeSprite',
  28
  29     requires: ['Ext.chart.Shape'],
  30
  31     /* End Definitions */
  32
  33     // Position of the item, relative to the upper-left corner of the legend box
  34     x: 0,
  35     y: 0,
  36     zIndex: 500,
  37
  38     constructor: function(config) {
  39         this.callParent(arguments);
  40         this.createLegend(config);
  41     },
  42
  43 <span id='Ext-chart-LegendItem-method-createLegend'>    /**
  44 </span>     * Creates all the individual sprites for this legend item
  45      */
  46     createLegend: function(config) {
  47         var me = this,
  48             index = config.yFieldIndex,
  49             series = me.series,
  50             seriesType = series.type,
  51             idx = me.yFieldIndex,
  52             legend = me.legend,
  53             surface = me.surface,
  54             refX = legend.x + me.x,
  55             refY = legend.y + me.y,
  56             bbox, z = me.zIndex,
  57             markerConfig, label, mask,
  58             radius, toggle = false,
  59             seriesStyle = Ext.apply(series.seriesStyle, series.style);
  60
  61         function getSeriesProp(name) {
  62             var val = series[name];
  63             return (Ext.isArray(val) ? val[idx] : val);
  64         }
  65
  66         label = me.add('label', surface.add({
  67             type: 'text',
  68             x: 20,
  69             y: 0,
  70             zIndex: z || 0,
  71             font: legend.labelFont,
  72             text: getSeriesProp('title') || getSeriesProp('yField')
  73         }));
  74
  75         // Line series - display as short line with optional marker in the middle
  76         if (seriesType === 'line' || seriesType === 'scatter') {
  77             if(seriesType === 'line') {
  78                 me.add('line', surface.add({
  79                     type: 'path',
  80                     path: 'M0.5,0.5L16.5,0.5',
  81                     zIndex: z,
  82                     &quot;stroke-width&quot;: series.lineWidth,
  83                     &quot;stroke-linejoin&quot;: &quot;round&quot;,
  84                     &quot;stroke-dasharray&quot;: series.dash,
  85                     stroke: seriesStyle.stroke || '#000',
  86                     style: {
  87                         cursor: 'pointer'
  88                     }
  89                 }));
  90             }
  91             if (series.showMarkers || seriesType === 'scatter') {
  92                 markerConfig = Ext.apply(series.markerStyle, series.markerConfig || {});
  93                 me.add('marker', Ext.chart.Shape[markerConfig.type](surface, {
  94                     fill: markerConfig.fill,
  95                     x: 8.5,
  96                     y: 0.5,
  97                     zIndex: z,
  98                     radius: markerConfig.radius || markerConfig.size,
  99                     style: {
 100                         cursor: 'pointer'
 101                     }
 102                 }));
 103             }
 104         }
 105         // All other series types - display as filled box
 106         else {
 107             me.add('box', surface.add({
 108                 type: 'rect',
 109                 zIndex: z,
 110                 x: 0,
 111                 y: 0,
 112                 width: 12,
 113                 height: 12,
 114                 fill: series.getLegendColor(index),
 115                 style: {
 116                     cursor: 'pointer'
 117                 }
 118             }));
 119         }
 120
 121         me.setAttributes({
 122             hidden: false
 123         }, true);
 124
 125         bbox = me.getBBox();
 126
 127         mask = me.add('mask', surface.add({
 128             type: 'rect',
 129             x: bbox.x,
 130             y: bbox.y,
 131             width: bbox.width || 20,
 132             height: bbox.height || 20,
 133             zIndex: (z || 0) + 1000,
 134             fill: '#f00',
 135             opacity: 0,
 136             style: {
 137                 'cursor': 'pointer'
 138             }
 139         }));
 140
 141         //add toggle listener
 142         me.on('mouseover', function() {
 143             label.setStyle({
 144                 'font-weight': 'bold'
 145             });
 146             mask.setStyle({
 147                 'cursor': 'pointer'
 148             });
 149             series._index = index;
 150             series.highlightItem();
 151         }, me);
 152
 153         me.on('mouseout', function() {
 154             label.setStyle({
 155                 'font-weight': 'normal'
 156             });
 157             series._index = index;
 158             series.unHighlightItem();
 159         }, me);
 160
 161         if (!series.visibleInLegend(index)) {
 162             toggle = true;
 163             label.setAttributes({
 164                opacity: 0.5
 165             }, true);
 166         }
 167
 168         me.on('mousedown', function() {
 169             if (!toggle) {
 170                 series.hideAll();
 171                 label.setAttributes({
 172                     opacity: 0.5
 173                 }, true);
 174             } else {
 175                 series.showAll();
 176                 label.setAttributes({
 177                     opacity: 1
 178                 }, true);
 179             }
 180             toggle = !toggle;
 181         }, me);
 182         me.updatePosition({x:0, y:0}); //Relative to 0,0 at first so that the bbox is calculated correctly
 183     },
 184
 185 <span id='Ext-chart-LegendItem-method-updatePosition'>    /**
 186 </span>     * Update the positions of all this item's sprites to match the root position
 187      * of the legend box.
 188      * @param {Object} relativeTo (optional) If specified, this object's 'x' and 'y' values will be used
 189      *                 as the reference point for the relative positioning. Defaults to the Legend.
 190      */
 191     updatePosition: function(relativeTo) {
 192         var me = this,
 193             items = me.items,
 194             ln = items.length,
 195             i = 0,
 196             item;
 197         if (!relativeTo) {
 198             relativeTo = me.legend;
 199         }
 200         for (; i &lt; ln; i++) {
 201             item = items[i];
 202             switch (item.type) {
 203                 case 'text':
 204                     item.setAttributes({
 205                         x: 20 + relativeTo.x + me.x,
 206                         y: relativeTo.y + me.y
 207                     }, true);
 208                     break;
 209                 case 'rect':
 210                     item.setAttributes({
 211                         translate: {
 212                             x: relativeTo.x + me.x,
 213                             y: relativeTo.y + me.y - 6
 214                         }
 215                     }, true);
 216                     break;
 217                 default:
 218                     item.setAttributes({
 219                         translate: {
 220                             x: relativeTo.x + me.x,
 221                             y: relativeTo.y + me.y
 222                         }
 223                     }, true);
 224             }
 225         }
 226     }
 227 });
 228 </pre>
 229 </body>
 230 </html>