src/examples/states/app/view/Pyramid.js

   1 /**
   2  * Demographic pyramid.
   3  *
   4  */
   5 Ext.define('States.view.Pyramid', {
   6     extend: 'Ext.chart.series.Cartesian',
   7
   8     type: 'pyramid',
   9     alias: 'series.pyramid',
  10     seriesType: 'barSeries',
  11
  12     config: {
  13         axis: 'bottom',
  14         /**
  15          * @cfg style Style properties that will override the theming series styles.
  16          */
  17
  18         /**
  19          * @cfg {Number} xPadding Padding between the left/right axes and the pyramids
  20          */
  21         xPadding: 0,
  22
  23         /**
  24          * @cfg {Number} yPadding Padding between the top/bottom axes and the pyramids
  25          */
  26         yPadding: 10,
  27
  28         y1Field: false,
  29
  30         y2Field: false,
  31
  32         colors: ['rgb(166, 206, 227)', 'rgb(31, 120, 180)'],
  33
  34         flipXY: true,
  35
  36         itemInstancing: {
  37             type: 'rect',
  38             fx: {
  39                 customDuration: {
  40                     x: 0,
  41                     y: 0,
  42                     width: 0,
  43                     height: 0,
  44                     radius: 0
  45                 }
  46             }
  47         }
  48     },
  49
  50     fieldCategoryY: ['Y1', 'Y2'],
  51
  52     coordinateY: function () {
  53         var me = this,
  54             store = me.getStore(),
  55             items = store.getData().items,
  56             range = {min: Infinity, max: -Infinity},
  57             data, style = {}, i,
  58             sprites = me.getSprites();
  59
  60         if (sprites.length > 0) {
  61             data = me.coordinateData(items, this.getY1Field());
  62             for (i = 0; i < data.length; i++) {
  63                 data[i] = -data[i];
  64             }
  65             me.getRangeOfData(data, range);
  66             style.dataY = data;
  67             sprites[0].setAttributes(style);
  68
  69
  70             data = me.coordinateData(items, this.getY2Field());
  71             me.getRangeOfData(data, range);
  72             style.dataY = data;
  73             sprites[1].setAttributes(style);
  74             me.dataRange[1] = range.min;
  75             me.dataRange[3] = range.max;
  76         }
  77     },
  78
  79     getSprites: function () {
  80         var me = this,
  81             chart = this.getChart(),
  82             animation = chart && chart.getAnimate(),
  83             sprites = me.sprites;
  84
  85         if (!chart) {
  86             return [];
  87         }
  88
  89         if (sprites.length === 2) {
  90             me.getLabel().getTemplate().fx.setConfig(animation);
  91             sprites[0].fx.setConfig(animation);
  92             sprites[0].itemsMarker.getTemplate().fx.setConfig(animation);
  93             sprites[1].fx.setConfig(animation);
  94             sprites[1].itemsMarker.getTemplate().fx.setConfig(animation);
  95             return sprites;
  96         }
  97
  98         me.createSprite();
  99         me.createSprite();
 100         me.setHidden([false, false]);
 101         return sprites;
 102     },
 103
 104     provideLegendInfo: function (target) {
 105         var store = this.getStore();
 106         if (store) {
 107             var hidden = this.getHidden();
 108             for (var i = 0; i < 2; i++) {
 109                 target.push({
 110                     name: ['Female', 'Male'][i],
 111                     mark: this.getStyleByIndex(i).fillStyle || this.getStyleByIndex(i).strokeStyle || 'black',
 112                     disabled: hidden[i],
 113                     series: this.getId(),
 114                     index: i
 115                 });
 116             }
 117         }
 118     }
 119 });
 120