examples/charts/FormDashboard.js

   1 Ext.require([
   2     'Ext.form.*',
   3     'Ext.data.*',
   4     'Ext.chart.*',
   5     'Ext.grid.Panel',
   6     'Ext.layout.container.Column'
   7 ]);
   8
   9
  10 Ext.onReady(function(){
  11
  12     //use a renderer for values in the data view.
  13     function perc(v) {
  14         return v + '%';
  15     }
  16
  17     var bd = Ext.getBody(),
  18         form = false,
  19         rec = false,
  20         selectedStoreItem = false,
  21         //performs the highlight of an item in the bar series
  22         selectItem = function(storeItem) {
  23             var name = storeItem.get('company'),
  24                 series = barChart.series.get(0),
  25                 i, items, l;
  26
  27             series.highlight = true;
  28             series.unHighlightItem();
  29             series.cleanHighlights();
  30             for (i = 0, items = series.items, l = items.length; i < l; i++) {
  31                 if (name == items[i].storeItem.get('company')) {
  32                     selectedStoreItem = items[i].storeItem;
  33                     series.highlightItem(items[i]);
  34                     break;
  35                 }
  36             }
  37             series.highlight = false;
  38         },
  39         //updates a record modified via the form
  40         updateRecord = function(rec) {
  41             var name, series, i, l, items, json = [{
  42                 'Name': 'Price %',
  43                 'Data': rec.get('price %')
  44             }, {
  45                 'Name': 'Revenue %',
  46                 'Data': rec.get('revenue %')
  47             }, {
  48                 'Name': 'Growth %',
  49                 'Data': rec.get('growth %')
  50             }, {
  51                 'Name': 'Product %',
  52                 'Data': rec.get('product %')
  53             }, {
  54                 'Name': 'Market %',
  55                 'Data': rec.get('market %')
  56             }];
  57             chs.loadData(json);
  58             selectItem(rec);
  59         },
  60         createListeners = function() {
  61             return {
  62                 // buffer so we don't refire while the user is still typing
  63                 buffer: 200,
  64                 change: function(field, newValue, oldValue, listener) {
  65                     form.updateRecord(rec);
  66                     updateRecord(rec);
  67                 }
  68             };
  69         };
  70
  71     // sample static data for the store
  72     var myData = [
  73         ['3m Co'],
  74         ['Alcoa Inc'],
  75         ['Altria Group Inc'],
  76         ['American Express Company'],
  77         ['American International Group, Inc.'],
  78         ['AT&T Inc'],
  79         ['Boeing Co.'],
  80         ['Caterpillar Inc.'],
  81         ['Citigroup, Inc.'],
  82         ['E.I. du Pont de Nemours and Company'],
  83         ['Exxon Mobil Corp'],
  84         ['General Electric Company'],
  85         ['General Motors Corporation'],
  86         ['Hewlett-Packard Co'],
  87         ['Honeywell Intl Inc'],
  88         ['Intel Corporation'],
  89         ['International Business Machines'],
  90         ['Johnson & Johnson'],
  91         ['JP Morgan & Chase & Co'],
  92         ['McDonald\'s Corporation'],
  93         ['Merck & Co., Inc.'],
  94         ['Microsoft Corporation'],
  95         ['Pfizer Inc'],
  96         ['The Coca-Cola Company'],
  97         ['The Home Depot, Inc.'],
  98         ['The Procter & Gamble Company'],
  99         ['United Technologies Corporation'],
 100         ['Verizon Communications'],
 101         ['Wal-Mart Stores, Inc.']
 102     ];
 103
 104     for (var i = 0, l = myData.length, rand = Math.random; i < l; i++) {
 105         var data = myData[i];
 106         data[1] = ((rand() * 10000) >> 0) / 100;
 107         data[2] = ((rand() * 10000) >> 0) / 100;
 108         data[3] = ((rand() * 10000) >> 0) / 100;
 109         data[4] = ((rand() * 10000) >> 0) / 100;
 110         data[5] = ((rand() * 10000) >> 0) / 100;
 111     }
 112
 113     //create data store to be shared among the grid and bar series.
 114     var ds = Ext.create('Ext.data.ArrayStore', {
 115         fields: [
 116             {name: 'company'},
 117             {name: 'price %',   type: 'float'},
 118             {name: 'revenue %', type: 'float'},
 119             {name: 'growth %',  type: 'float'},
 120             {name: 'product %', type: 'float'},
 121             {name: 'market %',  type: 'float'}
 122         ],
 123         data: myData
 124     });
 125
 126     //create radar dataset model.
 127     var chs = Ext.create('Ext.data.JsonStore', {
 128         fields: ['Name', 'Data'],
 129         data: [
 130         {
 131             'Name': 'Price %',
 132             'Data': 100
 133         }, {
 134             'Name': 'Revenue %',
 135             'Data': 100
 136         }, {
 137             'Name': 'Growth %',
 138             'Data': 100
 139         }, {
 140             'Name': 'Product %',
 141             'Data': 100
 142         }, {
 143             'Name': 'Market %',
 144             'Data': 100
 145         }]
 146     });
 147
 148     //Radar chart will render information for a selected company in the
 149     //list. Selection can also be done via clicking on the bars in the series.
 150     var radarChart = Ext.create('Ext.chart.Chart', {
 151         margin: '0 0 0 0',
 152         insetPadding: 20,
 153         flex: 1.2,
 154         animate: true,
 155         store: chs,
 156         axes: [{
 157             type: 'Radial',
 158             position: 'radial',
 159             maximum: 100,
 160             label: {
 161                 display: 'none'
 162             }
 163         }],
 164         series: [{
 165             type: 'radar',
 166             xField: 'Name',
 167             yField: 'Data',
 168             showInLegend: false,
 169             showMarkers: true,
 170             markerConfig: {
 171                 radius: 2,
 172                 size: 2
 173             },
 174             style: {
 175                 fill: '#273f68',
 176                 opacity: 0.5,
 177                 'stroke-width': 0.5
 178             },
 179             label: {
 180                 display: true,
 181                 field: 'Name'
 182             }
 183         }]
 184     });
 185
 186     //create a grid that will list the dataset items.
 187     var gridPanel = Ext.create('Ext.grid.Panel', {
 188         id: 'company-form',
 189         flex: 0.60,
 190         store: ds,
 191         title:'Company Data',
 192
 193         columns: [
 194             {
 195                 id       :'company',
 196                 text   : 'Company',
 197                 flex: 1,
 198                 sortable : true,
 199                 dataIndex: 'company'
 200             },
 201             {
 202                 text   : 'Price',
 203                 width    : 75,
 204                 sortable : true,
 205                 dataIndex: 'price %',
 206                 renderer: perc
 207             },
 208             {
 209                 text   : 'Revenue',
 210                 width    : 75,
 211                 sortable : true,
 212                 dataIndex: 'revenue %',
 213                 renderer: perc
 214             },
 215             {
 216                 text   : 'Growth',
 217                 width    : 75,
 218                 sortable : true,
 219                 dataIndex: 'growth %',
 220                 renderer: perc
 221             },
 222             {
 223                 text   : 'Product',
 224                 width    : 75,
 225                 sortable : true,
 226                 dataIndex: 'product %',
 227                 renderer: perc
 228             },
 229             {
 230                 text   : 'Market',
 231                 width    : 75,
 232                 sortable : true,
 233                 dataIndex: 'market %',
 234                 renderer: perc
 235             }
 236         ],
 237
 238         listeners: {
 239             selectionchange: function(model, records) {
 240                 var json, name, i, l, items, series, fields;
 241                 if (records[0]) {
 242                     rec = records[0];
 243                     form = form || this.up('form').getForm();
 244                     fields = form.getFields();
 245                     // prevent change events from firing
 246                     fields.each(function(field){
 247                         field.suspendEvents();
 248                     });
 249                     form.loadRecord(rec);
 250                     updateRecord(rec);
 251                     fields.each(function(field){
 252                         field.resumeEvents();
 253                     });
 254                 }
 255             }
 256         }
 257     });
 258
 259     //create a bar series to be at the top of the panel.
 260     var barChart = Ext.create('Ext.chart.Chart', {
 261         flex: 1,
 262         shadow: true,
 263         animate: true,
 264         store: ds,
 265         axes: [{
 266             type: 'Numeric',
 267             position: 'left',
 268             fields: ['price %'],
 269             minimum: 0,
 270             label: {
 271                 font: '9px Arial'
 272             },
 273             hidden: true
 274         }, {
 275             type: 'Category',
 276             position: 'bottom',
 277             fields: ['company'],
 278             label: {
 279                 font: '9px Arial'
 280             }
 281         }],
 282         series: [{
 283             type: 'column',
 284             axis: 'left',
 285             highlight: true,
 286             style: {
 287                 fill: '#456d9f'
 288             },
 289             highlightCfg: {
 290                 fill: '#a2b5ca'
 291             },
 292             label: {
 293                 display: 'insideEnd',
 294                 field: 'price %',
 295                 color: '#000',
 296                 orientation: 'vertical',
 297                 'text-anchor': 'middle'
 298             },
 299             listeners: {
 300                 'itemmouseup': function(item) {
 301                      var series = barChart.series.get(0),
 302                          index = Ext.Array.indexOf(series.items, item),
 303                          selectionModel = gridPanel.getSelectionModel();
 304
 305                      selectedStoreItem = item.storeItem;
 306                      selectionModel.select(index);
 307                 }
 308             },
 309             xField: 'name',
 310             yField: ['price %']
 311         }]
 312     });
 313
 314     //disable highlighting by default.
 315     barChart.series.get(0).highlight = false;
 316
 317     //add listener to (re)select bar item after sorting or refreshing the dataset.
 318     barChart.addListener('beforerefresh', (function() {
 319         var timer = false;
 320         return function() {
 321             clearTimeout(timer);
 322             if (selectedStoreItem) {
 323                 timer = setTimeout(function() {
 324                     selectItem(selectedStoreItem);
 325                 }, 900);
 326             }
 327         };
 328     })());
 329
 330     /*
 331      * Here is where we create the Form
 332      */
 333     var gridForm = Ext.create('Ext.form.Panel', {
 334         title: 'Company data',
 335         frame: true,
 336         bodyPadding: 5,
 337         width: 870,
 338         height: 700,
 339
 340         fieldDefaults: {
 341             labelAlign: 'left',
 342             msgTarget: 'side'
 343         },
 344
 345         layout: {
 346             type: 'vbox',
 347             align: 'stretch'
 348         },
 349
 350         items: [
 351             {
 352                 height: 200,
 353                 layout: 'fit',
 354                 margin: '0 0 3 0',
 355                 items: [barChart]
 356             },
 357             {
 358
 359             layout: {type: 'hbox', align: 'stretch'},
 360             flex: 3,
 361             border: false,
 362             bodyStyle: 'background-color: transparent',
 363
 364             items: [gridPanel, {
 365                 flex: 0.4,
 366                 layout: {
 367                     type: 'vbox',
 368                     align:'stretch'
 369                 },
 370                 margin: '0 0 0 5',
 371                 title: 'Company Details',
 372                 items: [{
 373                     margin: '5',
 374                     xtype: 'fieldset',
 375                     flex: 1,
 376                     title:'Company details',
 377                     defaults: {
 378                         width: 240,
 379                         labelWidth: 90
 380                     },
 381                     defaultType: 'textfield',
 382                     items: [{
 383                         fieldLabel: 'Name',
 384                         name: 'company',
 385                         disabled: true
 386                     },{
 387                         fieldLabel: 'Price %',
 388                         name: 'price %',
 389                         listeners: createListeners('price %')
 390                     },{
 391                         fieldLabel: 'Revenue %',
 392                         name: 'revenue %',
 393                         listeners: createListeners('revenue %')
 394                     },{
 395                         fieldLabel: 'Growth %',
 396                         name: 'growth %',
 397                         listeners: createListeners('growth %')
 398                     },{
 399                         fieldLabel: 'Product %',
 400                         name: 'product %',
 401                         listeners: createListeners('product %')
 402                     },{
 403                         fieldLabel: 'Market %',
 404                         name: 'market %',
 405                         listeners: createListeners('market %')
 406                     }]
 407                 }, radarChart]
 408             }]
 409         }],
 410         renderTo: bd
 411     });
 412
 413     var gp = Ext.getCmp('company-form');
 414 });