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.