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