123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171 |
- Ext.define('PageAnalyzer.Summary', {
- extend: 'Ext.panel.Panel',
- requires: [
- 'Ext.chart.*',
- 'Ext.grid.Panel',
- 'Ext.grid.feature.Grouping',
- 'Ext.layout.container.Border',
- 'PageAnalyzer.models.LayoutTypeSummaryData',
- 'PageAnalyzer.models.LayoutIdSummaryData',
- 'Ext.tab.Panel'
- ],
- layout: 'fit',
- border: false,
- toolTipTpl: [
- 'layout type: {type}<br/>',
- 'total time: {duration}<br/>',
- 'calls: {count}<br/>',
- 'avg. time: {[Math.round((values.duration / values.count) * 100) / 100]}<br/>',
- 'instances: {layoutCount}'
- ],
- initComponent: function () {
- var me = this;
- me.typeDurationStore = Ext.create('Ext.data.Store', {
- model: 'PageAnalyzer.models.LayoutTypeSummaryData',
- sorters: { property: 'type', direction: 'DESC' }
- });
- me.items = [{
- xtype: 'tabpanel',
- deferredRender: false,
- items:[
- me.makeTypeTimeSummaryChart({}),
- me.makeTypeCountSummaryChart({})
- ]
- }];
- me.callParent();
- },
- makeTypeTimeSummaryChart: function(cfg) {
- var me = this,
- toolTipTpl = me.getTpl('toolTipTpl');
- return Ext.apply({
- xtype: 'chart',
- store: me.typeDurationStore,
- itemId: 'durationsByTypeChart',
- title: 'Time By Layout Type',
- theme: 'Base:gradients',
- hideMode: 'offsets',
- axes: [{
- type: 'Numeric',
- title: 'Time (ms)',
- position: 'left',
- fields: ['duration'],
- grid: true
- },{
- type: 'Category',
- position: 'bottom',
- fields: ['type'],
- title: 'Layout Type',
- label:{
- 'text-anchor': 'middle',
- rotate: {
- degrees: -35
- },
- translate: {
- x: 10,
- y: 0
- }
- }
- }],
- series: [{
- type: 'column',
- axis: 'left',
- label: {
- field: 'type',
- font: '12px Arial'
- },
- tips: {
- trackMouse: true,
- tpl: toolTipTpl,
- renderer: function(storeItem, item) {
- this.update(storeItem.data);
- }
- },
- xField: 'type',
- yField: 'duration'
- }]
- }, cfg);
- },
- makeTypeCountSummaryChart: function(cfg) {
- var me = this,
- toolTipTpl = me.getTpl('toolTipTpl');
- return Ext.apply({
- xtype: 'chart',
- store: me.typeDurationStore,
- itemId: 'countsByTypeChart',
- title: 'Calls by Layout Type',
- theme: 'Base:gradients',
- hideMode: 'offsets',
- axes: [{
- type: 'Numeric',
- title: 'Total Calls',
- position: 'left',
- fields: ['count'],
- grid: true
- }, {
- type: 'Category',
- position: 'bottom',
- fields: ['type'],
- title: 'Layout Type',
- label:{
- 'text-anchor': 'middle',
- rotate: {
- degrees: -35
- },
- translate: {
- x: 10,
- y: 0
- }
- }
- }],
- series: [{
- type: 'column',
- axis: 'left',
- label: {
- field: 'type',
- font: '12px Arial'
- },
- tips: {
- trackMouse: true,
- tpl: toolTipTpl,
- renderer: function(storeItem, item) {
- this.update(storeItem.data);
- }
- },
- xField: 'type',
- yField: 'count'
- }]
- }, cfg);
- },
- loadTypeSummary: function (summary) {
- var me = this,
- data = [];
- Ext.Object.each(summary, function (type, sum){
- data.push({
- type: type,
- duration: sum.duration,
- count: sum.count,
- layoutCount: sum.layoutCount
- });
- });
- me.typeDurationStore.removeAll();
- me.typeDurationStore.loadData(data);
- me.typeDurationStore.sort();
- }
- });
|