Code:
Ext.define('SplcMetrics.view.SdElements', { extend: 'Ext.tab.Panel',
title: 'SD Elements',
items: [
{
xtype: 'panel',
title: 'Metrics',
flex: 1,
maxHeight: 250,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
//Header Panel
xtype: 'panel',
height: 100,
padding: '10px 10px 10px 10px',
html: '<h1>SD Elements Metrics</h1><br />'
},
{
//Coverage Panel for Security Champions
xtype: 'panel',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
//Sub Product Line Coverage Donut
xtype: 'polar',
minHeight: 150,
maxHeight: 420,
minWidth: 150,
maxWidth: 600,
flex: 1,
animation: true,
padding: '10px 10px 10px 10px',
donut: true,
sprites: [{
type: 'text',
text: 'Coverage by Sub Product Line',
font: '14px bold Calibri Arial Verdana Sans-Serif',
width: 50,
height: 10,
x: 10, // the sprite x position
y: 10 // the sprite y position
}],
//Chart Store
store: {
fields: [{
name: 'name'
}, {
name: 'data'
}],
autoLoad: true,
pageSize: 100,
proxy: {
type: 'ajax',
url: '/api/v1/SdElements.GetCoverageBySPL()',
reader: {
type: 'json',
rootProperty: 'value.metrics.splcoverage'
}
}
},
//Chart Series
series: [{
type: 'pie',
donut: 85,
angleField: 'data',
showInLegend: true,
colors: ["#4472C4", "lightgrey"]
}],
//Listeners
listeners: {
afterrender: function (m, e) {
//Get Coverage
var coverageResponse = Ext.Ajax.request({
url: '/api/v1/SdElements.GetCoverageBySPL()',
success: function (response, opts) {
var obj = Ext.decode(response.responseText);
//Add Spl Sprite
var surface = m.getSurface();
var sprite = surface.add({
type: 'text',
text: obj.value.coverage.actualSplCoverage + '%',
textAlign: 'center',
font: '38px Calibri',
fillStyle: '#69708a',
x: ((surface._rect[2] - surface._rect[0]) / 2) + surface._rect[0],
y: ((surface._rect[3] - surface._rect[1]) / 2) + surface._rect[1]
});
sprite.show();
m.redraw();
},
failure: function (response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
}
}
}, //Close Coverage Chart
{
//Delivery Team Coverage Donut
xtype: 'polar',
minHeight: 150,
maxHeight: 420,
minWidth: 150,
maxWidth: 600,
flex: 1,
animation: true,
padding: '10px 10px 10px 10px',
donut: true,
sprites: [{
type: 'text',
text: 'Coverage by Delivery Team',
font: '14px bold Calibri Arial Verdana Sans-Serif',
width: 50,
height: 10,
x: 10, // the sprite x position
y: 10 // the sprite y position
}],
//Chart Store
store: {
fields: [{
name: 'name'
}, {
name: 'data'
}],
autoLoad: true,
pageSize: 100,
proxy: {
type: 'ajax',
url: '/api/v1/SdElements.GetCoverageByDeliveryTeam()',
reader: {
type: 'json',
rootProperty: 'value.metrics.dtcoverage'
}
}
},
//Chart Series
series: [{
type: 'pie',
donut: 85,
angleField: 'data',
showInLegend: true,
colors: ["#70AD47", "lightgrey"]
}],
//Listeners
listeners: {
afterrender: function (m, e) {
//Get Coverage
var coverageResponse = Ext.Ajax.request({
url: '/api/v1/SdElements.GetCoverageByDeliveryTeam()',
timeout: 60000,
success: function (response, opts) {
var obj = Ext.decode(response.responseText);
//Add Spl Sprite
var surface = m.getSurface();
var sprite = surface.add({
type: 'text',
text: obj.value.coverage.actualDtCoverage + '%',
textAlign: 'center',
font: '38px Calibri',
fillStyle: '#69708a',
x: ((surface._rect[2] - surface._rect[0]) / 2) + surface._rect[0],
y: ((surface._rect[3] - surface._rect[1]) / 2) + surface._rect[1]
});
sprite.show();
m.redraw();
},
failure: function (response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
}
}
}
] //Close Panel Items Collection
} //Close Coverage Panel
]
},
{
//SD Elements Projects
xtype: 'gridpanel',
store: {
model: 'SplcMetrics.model.SdeProject',
autoLoad: true,
pageSize: 100,
proxy: {
type: 'ajax',
url: '/api/v1/SdElements.GetProjects()',
reader: {
type: 'json',
rootProperty: 'value'
}
}
},
width: 400,
height: 200,
title: 'Projects',
columns: [
{
text: 'Name',
flex: 1,
minWidth: 300,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
text: 'Creator',
width: 350,
dataIndex: 'creator',
},
{
text: 'Delivery Team',
width: 350,
dataIndex: 'deliveryTeam'
},
{
text: 'Product Line',
width: 350,
dataIndex: 'productLine'
},
{
text: 'Sub Product Line',
width: 350,
dataIndex: 'subproductLine'
},
{
xtype: 'datecolumn',
text: 'Created',
width: 150,
dataIndex: 'created',
format: 'Y-m-d'
}
],
//}]
} //Close SDE Projects Grid Pabel
]
}); //End View Definition
Rendering issues in donut chart
Aucun commentaire:
Enregistrer un commentaire