We've already built part of this screen already. We can reuse Instrumatics.ux.chart.HistoricalRequestChart we created earlier to display the trend for a specified date range. As this data's coming from the store, we can simply filter the store and don't have to do anything on the component itself. With this in mind, the Web view looks like this:
// app/view/web/Web.js
Ext.define('Instrumatics.view.web.Web',{
extend: 'Ext.panel.Panel',
xtype: 'web-logs',
viewModel: {
type: 'web-web'
},
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
header: {
title: 'Web Requests',
items: [
{ xtype: 'datefield', fieldLabel: 'From', labelAlign: 'right', bind: '{currentStartDate}' },
{ xtype: 'datefield', fieldLabel: 'To', labelAlign: 'right', bind: '{currentEndDate}', labelWidth: 30 },
{ xtype: 'button', text: 'Refresh', margin: '0 0 0 10' }
]
},
margin: 10, xtype: 'historical-request-chart', bind: '{logData}', flex: 1
},
{
xtype: 'grid',
margin: 10,
hideHeaders: true,
viewConfig: {
trackOver: false
},
disableSelection: true,
header: {
title: 'Breakdown',
items: [
{
xtype: 'combo',
labelAlign: 'right', labelWidth: 60,
fieldLabel: 'Category',
bind: {
store: '{categories}',
value: '{currentCategory}'
},
queryMode: 'local',
editable: false,
forceSelection: true,
displayField: 'text',
valueField: 'value'
}
]
},
bind: '{logStatistics}',
flex: 1,
width: '100%',
columns: [
{ name: 'Label', dataIndex: 'label', flex: 1 },
{ name: 'Percentage', dataIndex: 'percentage', flex: 1 }
]
}
]
});It's a fair amount of code, but nothing other than component configuration is happening here. Let's break it down step-by-step.
Firstly, there's the configuration of the panel itself where we set up a vbox layout.
Then we add our first item, an instance of the HistoricalRequestChart we built earlier, and add To and From date fields to its header. The values of these are bound to values (currentStartDate and currentEndDate) in the view model, and the chart itself is bound to logData in the view model.
Finally, we have the configuration of the statistics grid. Its store is bound to logStatistics and in its header, we add a combo box that has its value bound to currentCategory in the view model and its store—to provide the combo box options—bound to categories. The combo box allows the user to choose which statistics category they'd like to view.