commit 0ca7b9ca068f9b631af7d322f86761f3c4d5d892
parent 713ca5bbc19121f055c642ef79b5918cd555769f
Author: Felicitus <felicitus@felicitus.org>
Date: Sun, 11 Sep 2011 12:51:24 +0200
Added time selection support
Diffstat:
3 files changed, 197 insertions(+), 86 deletions(-)
diff --git a/frontend/js/Components/Statistics/StatisticsChart.js b/frontend/js/Components/Statistics/StatisticsChart.js
@@ -0,0 +1,137 @@
+Ext.define('PartKeepr.StatisticsChart', {
+ extend: 'Ext.chart.Chart',
+ animate: true,
+ shadow: true,
+
+ legend: {
+ position: 'right'
+ },
+
+ background: {
+ fill: '#fff'
+ },
+
+ theme: 'Base',
+ series: [{
+ type: 'line',
+ highlight: {
+ size: 7,
+ radius: 7
+ },
+ axis: 'left',
+ xField: 'start',
+ yField: 'parts',
+ tips: {
+ trackMouse: true,
+ width: 170,
+ height: 28,
+ renderer: function(storeItem, item) {
+ this.setTitle(Ext.Date.format(storeItem.get('start'), "Y-m-d") + ": " + storeItem.get("parts") +" " + i18n("Parts"));
+ }
+ },
+ title: i18n("Parts"),
+ markerConfig: {
+ type: 'cross',
+ size: 4,
+ radius: 4,
+ 'stroke-width': 0
+ }
+ }, {
+ type: 'line',
+ highlight: {
+ size: 7,
+ radius: 7
+ },
+ tips: {
+ trackMouse: true,
+ width: 170,
+ height: 28,
+ renderer: function(storeItem, item) {
+ this.setTitle(Ext.Date.format(storeItem.get('start'), "Y-m-d") + ": " + storeItem.get("categories") +" " + i18n("Categories"));
+ }
+ },
+ axis: 'left',
+ title: i18n("Categories"),
+ smooth: true,
+ xField: 'start',
+ yField: 'categories',
+ markerConfig: {
+ type: 'circle',
+ size: 4,
+ radius: 4,
+ 'stroke-width': 0
+ }
+ }],
+ initComponent: function () {
+
+ /**
+ * Defines the first axis, which indicates the count.
+ */
+ this.axis1 = {
+ type: 'Numeric',
+ minimum: 0,
+ position: 'left',
+ fields: ['parts', 'categories'],
+ title: i18n("Count"),
+ minorTickSteps: 1,
+ grid: {
+ odd: {
+ opacity: 1,
+ fill: '#ddd',
+ stroke: '#bbb',
+ 'stroke-width': 0.5
+ }
+ }
+ };
+
+ /**
+ * Defines the second axis, which indicates the time.
+ */
+ this.axis2 = {
+ type: 'Time',
+ dateFormat: 'Y-m-d',
+ position: 'bottom',
+ aggregateOp: "avg",
+ fields: ['start'],
+ title: i18n("Date")
+ };
+
+ this.axes = [ this.axis1, this.axis2 ];
+
+ this.store = Ext.create("Ext.data.Store", {
+ model: 'PartKeepr.StatisticSample',
+ proxy: {
+ type: 'ajax',
+ reader: {
+ type: 'json',
+ root: 'response.data'
+ },
+ url : 'service.php',
+ extraParams: {
+ "service": "Statistic",
+ "call": "getSampledStatistics",
+ "startDateTime": "2011-01-01 00:00:00",
+ "endDateTime": "2011-12-01 00:00:00"
+ },
+ headers: {
+ session :PartKeepr.getApplication().getSession()
+ }
+ },
+ listeners: {
+ load: function (store) {
+ console.log("FOO");
+ console.log(store);
+ }
+ },
+ autoLoad: false
+ });
+
+ this.callParent();
+ },
+ setStart: function (date) {
+ this.store.getProxy().extraParams.startDateTime = Ext.Date.format(date, "Y-m-d H:i:s");
+ },
+ setEnd: function (date) {
+ this.store.getProxy().extraParams.endDateTime = Ext.Date.format(date, "Y-m-d H:i:s");
+ }
+});+
\ No newline at end of file
diff --git a/frontend/js/Components/Statistics/StatisticsChartPanel.js b/frontend/js/Components/Statistics/StatisticsChartPanel.js
@@ -1,92 +1,65 @@
Ext.define('PartKeepr.StatisticsChartPanel', {
- extend: 'Ext.chart.Chart',
- shadow: true,
+ extend: 'Ext.form.Panel',
title: i18n("Statistics Chart"),
- legend: {
- position: 'right'
- },
- background: {
- fill: '#fff'
- },
- axes: [{
- type: 'Numeric',
- minimum: 0,
- position: 'left',
- fields: ['parts', 'categories'],
- title: i18n("Count"),
- minorTickSteps: 1,
- grid: {
- odd: {
- opacity: 1,
- fill: '#ddd',
- stroke: '#bbb',
- 'stroke-width': 0.5
- }
- }
- }, {
- type: 'Time',
- dateFormat: 'Y-m-d',
- position: 'bottom',
- fields: ['start'],
- title: i18n("Date")
- }],
- series: [{
- type: 'line',
- highlight: {
- size: 7,
- radius: 7
- },
- axis: 'left',
- xField: 'start',
- yField: 'parts',
- title: i18n("Parts"),
- markerConfig: {
- type: 'cross',
- size: 4,
- radius: 4,
- 'stroke-width': 0
- }
- }, {
- type: 'line',
- highlight: {
- size: 7,
- radius: 7
- },
- axis: 'left',
- title: i18n("Categories"),
- smooth: true,
- xField: 'start',
- yField: 'categories',
- markerConfig: {
- type: 'circle',
- size: 4,
- radius: 4,
- 'stroke-width': 0
- }
- }],
+
+ layout: 'anchor',
+
initComponent: function () {
- this.store = Ext.create("Ext.data.Store", {
- model: 'PartKeepr.StatisticSample',
- proxy: {
- type: 'ajax',
- reader: {
- type: 'json',
- root: 'response.data'
- },
- url : 'service.php',
- extraParams: {
- "service": "Statistic",
- "call": "getSampledStatistics",
- "startDateTime": "2011-01-01 00:00:00",
- "endDateTime": "2011-12-01 00:00:00"
- },
- headers: {
- session :PartKeepr.getApplication().getSession()
- }
- },
- autoLoad: true
+ this.chart = Ext.create("PartKeepr.StatisticsChart", { anchor: '100% -50' });
+
+ this.dateSelector1 = Ext.create("Ext.form.field.Date", {
+ fieldLabel: i18n("From"),
+ listeners: {
+ change: Ext.bind(this.onDateChanged, this)
+ }
+ });
+
+ this.dateSelector2 = Ext.create("Ext.form.field.Date", {
+ fieldLabel: i18n("To"),
+ listeners: {
+ change: Ext.bind(this.onDateChanged, this)
+ }
});
+ this.items = [ this.chart, this.dateSelector1, this.dateSelector2 ];
+
+ this.reloadDates();
+
this.callParent();
+ },
+ onDateChanged: function () {
+ this.chart.setStart(this.dateSelector1.getValue());
+ this.chart.setEnd(this.dateSelector2.getValue());
+ this.chart.store.load();
+ },
+ reloadDates: function () {
+ var call = new PartKeepr.ServiceCall("Statistic", "getStatisticRange");
+ call.setHandler(Ext.bind(this.onReloadDates, this));
+ call.doCall();
+ },
+ onReloadDates: function (data) {
+ console.log(data);
+
+ var start = Ext.Date.parse(data.data.start, "Y-m-d H:i:s");
+ var end = Ext.Date.parse(data.data.end, "Y-m-d H:i:s");
+
+ this.dateSelector1.setMinValue(start);
+ this.dateSelector1.setMaxValue(end);
+ this.dateSelector1.suspendEvents();
+
+ this.dateSelector1.setValue(start);
+ this.dateSelector1.resumeEvents();
+
+
+ this.dateSelector2.setMinValue(start);
+ this.dateSelector2.setMaxValue(end);
+
+ this.dateSelector2.suspendEvents();
+ this.dateSelector2.setValue(end);
+ this.dateSelector2.resumeEvents();
+
+ this.chart.setStart(start);
+ this.chart.setEnd(end);
+ this.chart.store.load();
}
});
\ No newline at end of file
diff --git a/frontend/js/Models/StatisticSample.js b/frontend/js/Models/StatisticSample.js
@@ -2,7 +2,7 @@ Ext.define("PartKeepr.StatisticSample", {
extend: "Ext.data.Model",
fields: [
{ name: 'start', type: 'date'},
- { name: 'parts', type: 'int'},
- { name: 'categories', type: 'int'}
+ { name: 'parts', type: 'int', useNull: true },
+ { name: 'categories', type: 'int', useNull: true }
]
});
\ No newline at end of file
