extjs/packages/charts/src/chart/interactions/Rotate.js

   1 /**
   2  * @class Ext.chart.interactions.Rotate
   3  * @extends Ext.chart.interactions.Abstract
   4  *
   5  * The Rotate interaction allows the user to rotate a polar chart about its central point.
   6  *
   7  *     @example
   8  *     Ext.create('Ext.Container', {
   9  *         renderTo: Ext.getBody(),
  10  *         width: 600,
  11  *         height: 400,
  12  *         layout: 'fit',
  13  *         items: {
  14  *             xtype: 'polar',
  15  *             interactions: 'rotate',
  16  *             colors: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e"],
  17  *             store: {
  18  *                 fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  19  *                 data: [
  20  *                     {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
  21  *                     {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
  22  *                     {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
  23  *                     {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
  24  *                     {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
  25  *                 ]
  26  *             },
  27  *             series: {
  28  *                 type: 'pie',
  29  *                 label: {
  30  *                     field: 'name',
  31  *                     display: 'rotate'
  32  *                 },
  33  *                 xField: 'data3',
  34  *                 donut: 30
  35  *             }
  36  *         }
  37  *     });
  38  */
  39 Ext.define('Ext.chart.interactions.Rotate', {
  40     extend: 'Ext.chart.interactions.Abstract',
  41
  42     type: 'rotate',
  43
  44     alias: 'interaction.rotate',
  45
  46     /**
  47      * @event rotate
  48      * Fires on every tick of the rotation
  49      * @param {Ext.chart.interactions.Rotate} this This interaction.
  50      * @param {Number} angle The new current rotation angle.
  51      */
  52
  53     /**
  54      * @event rotationEnd
  55      * Fires after a user finishes the rotation
  56      * @param {Ext.chart.interactions.Rotate} this This interaction.
  57      * @param {Number} angle The new current rotation angle.
  58      */
  59
  60     config: {
  61         /**
  62          * @cfg {String} gesture
  63          * Defines the gesture type that will be used to rotate the chart. Currently only
  64          * supports `pinch` for two-finger rotation and `drag` for single-finger rotation.
  65          * @private
  66          */
  67         gesture: 'rotate',
  68
  69         gestures: {
  70             rotate: 'onRotate',
  71             rotateend: 'onRotate',
  72             dragstart: 'onGestureStart',
  73             drag: 'onGesture',
  74             dragend: 'onGestureEnd'
  75         },
  76
  77         /**
  78          * @cfg {Number} rotation
  79          * Saves the current rotation of the series. Accepts negative values and values > 360 ( / 180 * Math.PI)
  80          * @private
  81          */
  82         rotation: 0
  83     },
  84
  85     oldRotations: null,
  86
  87     getAngle: function(e) {
  88         var me = this,
  89             chart = me.getChart(),
  90             xy = chart.getEventXY(e),
  91             center = chart.getCenter();
  92
  93         return Math.atan2(
  94             xy[1] - center[1],
  95             xy[0] - center[0]
  96         );
  97     },
  98
  99     getRadius: function (e) {
 100         return this.getChart().getRadius();
 101     },
 102
 103     getEventRadius: function(e) {
 104         var me = this,
 105             chart = me.getChart(),
 106             xy = chart.getEventXY(e),
 107             center = chart.getCenter(),
 108             dx = xy[0] - center[0],
 109             dy = xy[1] - center[1];
 110
 111         return Math.sqrt(dx * dx + dy * dy);
 112     },
 113
 114     onGestureStart: function(e) {
 115         var me = this,
 116             radius = me.getRadius(e),
 117             eventRadius = me.getEventRadius(e);
 118
 119         if (radius >= eventRadius) {
 120             me.lockEvents('drag');
 121             me.angle = me.getAngle(e);
 122             me.oldRotations = {};
 123             return false;
 124         }
 125     },
 126
 127     onGesture: function(e) {
 128         var me = this,
 129             angle = me.getAngle(e) - me.angle;
 130
 131         if (me.getLocks().drag === me) {
 132             me.doRotateTo(angle, true);
 133             return false;
 134         }
 135     },
 136
 137     /**
 138      * @private
 139      */
 140     doRotateTo: function(angle, relative, animate) {
 141         var me = this,
 142             chart = me.getChart(),
 143             axes = chart.getAxes(),
 144             series = chart.getSeries(),
 145             oldRotations = me.oldRotations,
 146             axis, seriesItem, oldRotation,
 147             i, ln;
 148
 149         if (!animate) {
 150             chart.suspendAnimation();
 151         }
 152
 153         for (i = 0, ln = axes.length; i < ln; i++) {
 154             axis = axes[i];
 155             oldRotation = oldRotations[axis.getId()] || (oldRotations[axis.getId()] = axis.getRotation());
 156             axis.setRotation( angle + (relative ? oldRotation : 0) );
 157         }
 158
 159         for (i = 0, ln = series.length; i < ln; i++) {
 160             seriesItem = series[i];
 161             oldRotation = oldRotations[seriesItem.getId()] || (oldRotations[seriesItem.getId()] = seriesItem.getRotation());
 162             seriesItem.setRotation( angle + (relative ? oldRotation : 0) );
 163         }
 164
 165         me.setRotation(angle + (relative ? oldRotation : 0));
 166
 167         me.fireEvent('rotate', me, me.getRotation());
 168
 169         me.sync();
 170         if (!animate) {
 171             chart.resumeAnimation();
 172         }
 173     },
 174
 175     /**
 176      * Rotates a polar chart about its center point to the specified angle.
 177      * @param {Number} angle The angle to rotate to.
 178      * @param {Boolean} [relative=false] Whether the rotation is relative to the current angle or not.
 179      * @param {Boolean} [animate=false] Whether to animate the rotation or not.
 180      */
 181     rotateTo: function (angle, relative, animate) {
 182         this.doRotateTo(angle, relative, animate);
 183         this.oldRotations = {};
 184     },
 185
 186     onGestureEnd: function(e) {
 187         var me = this;
 188         if (me.getLocks().drag === me) {
 189             me.onGesture(e);
 190             me.unlockEvents('drag');
 191
 192             me.fireEvent('rotationEnd', me, me.getRotation());
 193
 194             return false;
 195         }
 196     },
 197
 198     onRotate: function(e) {
 199
 200     }
 201 });