I would really like to prevent this but it has been difficult. I cannot recreate it in Sencha Fiddle but I have a picture of the issue and I have included my code. If any of you have suggestions I am all ears. Thanks!
Code:
Ext.define('Test', {
extend: 'Test.dashboard.view.dashboardPortletBase',
alias: 'widget.dashboardPortletKPI',
title: 'KPI',
layout: 'fit',
id: 'dashboardPortletKPI',
reload: function () {
com.startLoading();
var me = this;
setTimeout(function () {
me.getData();
}, 50);
},
fields: [
{ name: 'eventDate', text: 'event Date', dataIndex: 'eventDisplayDate', flex: 1, menuDisabled: true },
{ name: 'eventScore', type: 'string', text: 'ERS', dataIndex: 'eventScore', menuDisabled: true },
{ name: 'eventLocationScore', type: 'string', text: 'ELS', dataIndex: 'eventLocationScore', menuDisabled: true },
{ name: 'eventCostCenterScore', type: 'string', text: 'ECCS', dataIndex: 'eventCostCenterScore', menuDisabled: true },
{ name: 'eventRiskScore', type: 'string', text: 'EVS', dataIndex: 'eventRiskScore', menuDisabled: true }
],
initComponent: function () {
com.startLoading();
var chartParms = this.getAxis();
Ext.apply(this, {
items: [
{
xtype: 'tabpanel',
id: 'dashboardPortletKPITabPanel',
margin: '10 10 10 10',
border: true,
tabBar: {
style: { backgroundColor: '#FFFFFF' },
bodyStyle: { backgroundColor: '#FFFFFF' }
},
items: [
{
xtype: 'container',
title: 'Chart',
layout: 'vbox',
style: {
fontSize: '12px'
},
items: [
{
xtype: 'cartesian',
id: 'dashboardPortletKPIChart',
padding: '5 5 5 5',
height: 270,
width: '100%',
suspendLayout: true,
legend: {
docked: 'right',
width: 100
axes: [
chartParms.axisPercent,
chartParms.axisTime
],
series: [
this.getSeries('EVS', '#009900'),
this.getSeries('ELS', '#0000FF'),
this.getSeries('ECCS', '#FF0000'),
this.getSeries('ERS', '#FF9900')
]
}, //chart
{
xtype: 'container',
id: 'theFooter',
html: '<div id="emspeed-kpi-label-container"><div id="emspeed-kpi-labels"><ul>' +
'<li><span style="color:#009900;font-weight:bold;font-size:12px;">EVS</span><span style="color:black;font-size:12px;">=Requirements Maturity</span></li>' +
'<li><span style="color:#0000FF;font-weight:bold;font-size:12px;">ELS</span><span style="color:black;font-size:12px;">=ELS Score</span></li>' +
'<li><span style="color:#FF0000;font-weight:bold;font-size:12px;">ECCS</span><span style="color:black;font-size:12px;">=Product Maturity</span></li>' +
'<li><span style="color:#FF9900;font-weight:bold;font-size:12px;">ERS</span><span style="color:black;font-size:12px;">=Lifecycle Attributes</span></li>' +
'<ul></div></div>'
}
]
},
{
xtype: 'grid',
id: 'dashboardPortletKPIGrid',
title: 'Data',
border: false,
margin: '0 0 0 0',
width: '100%',
height: 320,
cls: 'myprojects-grid',
disableSelection: true,
enableCtxMenu: false, // turn off header context menu
enableColLock: false, // turn off column lock context items
enableColumnMove: false, // turn off column reorder drag drop
enableColumnResize: false, // turn off column resize for whole grid
enableRowHeightSync: true,
columns: this.fields,
viewConfig: {
emptyText: 'No KPIs found for project',
dataRetrieved: false,
listeners: {
refresh: function (view, eOpts) {
if (this.dataRetrieved) {
com.endLoading();
this.dataRetrieved = false;
}
}
}
}
}
]
}
]
});
this.callParent(arguments);
var theChart = this.down('#dashboardPortletKPIChart');
theChart.legend.up().setBorder(false);
this.getData();
},
getAxis: function () {
var axisPercent = {
type: 'numeric',
minimum: 0,
maximum: 100,
position: 'left',
fields: ['EVS', 'ERS', 'ECCS', 'ELS'],
title: false,
label: {
fontSize: '12px'
},
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb'
}
}
};
var axisTime = {
type: 'time',
position: 'bottom',
fields: ['eventDate'],
title: false,
dateFormat: 'm/d/y',
label: {
fontSize: '12px'
}
};
var chartParms = {};
chartParms.axisPercent = axisPercent;
chartParms.axisTime = axisTime;
return chartParms;
},
getSeries: function (series, color) {
var theSeries = {
type: 'line',
axis: 'left',
xField: 'eventDate',
yField: series,
smooth: false,
style: {
lineWidth: 3,
fillStyle: color,
strokeStyle: color
},
marker: {
radius: 4,
fillStyle: color,
strokeStyle: color
},
highlight: {
fillStyle: '#000',
radius: 4,
strokeStyle: '#fff'
},
selectionTolerance: 4,
shadow: true,
fill: false,
tooltip: {
items: {
xtype: 'container',
layout: 'vbox',
items: [
{ xtype: 'label', itemId: 'theType' },
{ xtype: 'label', itemId: 'theValue' },
{ xtype: 'label', itemId: 'theeventDate' },
{ xtype: 'label', itemId: 'theeventTime' }
]
},
trackMouse: true,
maxWidth: 500,
width: 175,
height: 100,
renderer: function (storeItem, item) {
var yField = item.field;
this.setTitle('Selected Data Point');
this.down('label[itemId=theType]').setText('Type: ' + yField);
this.down('label[itemId=theValue]').setText('Value: ' + storeItem.get(yField));
var convertedStartDate = new Date(storeItem.get('eventDate'));
var month = convertedStartDate.getMonth() + 1
var day = convertedStartDate.getDate();
var year = convertedStartDate.getFullYear();
var shortStartDate = month + "/" + day + "/" + year;
var d = shortStartDate;
this.down('label[itemId=theeventDate]').setText('Date: ' + d);
var t = convertedStartDate.toLocaleTimeString().replace(/:\d+ /, ' ');
this.down('label[itemId=theeventTime]').setText('Time: ' + t);
}
}
}
return theSeries;
},
getData: function () {
var me = this;
var theUrl = com.ajaxUrl('ProjectService', 'GetKpiTrend');
var theParms = { filter: { orderBy: null, projectId: parseFloat(com.getProjectId()), eventDateRange: null } };
$.ajax(com.ajaxOptions({
url: theUrl,
data: theParms
}))
.done(function (data) {
var d = new Date();
if (data.Lastevent === null) {
com.endLoading();
return;
}
var theChart = me.down('cartesian');
var theGrid = me.down('grid');
for (var i in data.events) {
var s = data.events[i].eventDate;
data.events[i].eventDate = new Date(parseInt(s.replace('/Date(', '').replace(')/', '')));
data.events[i].eventDisplayDate = com.getFormattedLongDate(data.events[i].eventDate);
}
data.Lastevent.eventDate = new Date(parseInt(data.Lastevent.eventDate.replace('/Date(', '').replace(')/', '')));
var storeGrid = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: me.fields,
data: data.events
});
theGrid.view.dataRetrieved = true;
theGrid.bindStore(storeGrid);
var storeevents = Ext.create('Ext.data.Store', {
fields: [
{ name: 'ERS', type: 'number', mapping: 'eventScore' },
{ name: 'EVS', type: 'number', mapping: 'eventRiskScore' },
{ name: 'ECCS', type: 'number', mapping: 'eventCostCenterScore' },
{ name: 'ELS', type: 'number', mapping: 'eventLocationScore' },
{ name: 'eventDate', type: 'date', dataIndex: 'eventDate' }
],
data: data.events
});
var firsteventDate = new Date(data.events[0].eventDate)
firsteventDate = firsteventDate.setDate(firsteventDate.getDate() - 2);
var lasteventDate = data.Lastevent.eventDate.setDate(data.Lastevent.eventDate.getDate() + 2);
theChart.axes[1].setMaximum(lasteventDate);
theChart.axes[1].setMinimum(firsteventDate);
var theChart = Ext.getCmp('dashboardPortletKPI').down('#dashboardPortletKPIChart');
theChart.setBorder(false);
theChart.bindStore(storeevents);
setTimeout(function () {
chartLegendStore = theChart.legend.getStore();
chartLegendStore.each(function (rec, index, count) {
switch (rec.get('name')) {
case 'EVS':
rec.set('name', 'EVS ' + parseInt(data.Lastevent.eventRiskScore));
rec.set('mark', '#009900');
break;
case 'ELS':
rec.set('name', 'ELS ' + parseInt(data.Lastevent.eventLocationScore));
rec.set('mark', '#0000FF');
break;
case 'ECCS':
rec.set('name', 'ECCS ' + parseInt(data.Lastevent.eventCostCenterScore));
rec.set('mark', '#FF0000');
break;
case 'ERS':
rec.set('name', 'ERS ' + parseInt(data.Lastevent.eventScore));
rec.set('mark', '#FF9900');
break;
default:
''
}
});
}, 50);
com.endLoading();
});
}
});
Sencha Charts X-Axis Label Hidden Under Legend
Aucun commentaire:
Enregistrer un commentaire