Draw histogram

Benjamin Renard
1 parent 1a0151a5
Showing 4 changed files with 193 additions and 100 deletions Show diff stats
js/app/views/CatalogVisuHistogram.js
js/app/views/CatalogVisuScatter.js
js/app/views/VisuUI.js
php/classes/CatalogCacheMgr.php
@@ -10,23 +10,196 @@
 Ext.define('amdaUI.CatalogVisuHistogram', {
 	extend: 'Ext.form.Panel',
 	alias: 'widget.panelCatalogVisuHistogram',
+	histogramStore: null,
  
 	constructor: function(config) {
 		this.init(config);
 		this.callParent(arguments);
 	},
  
-	initVisu: function() {
+  getChart: function(catalogStore) {
+		var paramOpt = {
+			paramId: '',
+			index: 0,
+			title: 'Parameter'
+		};
+
+		var paramField = Ext.getCmp('visu-histo-param');
+		var paramFieldId = paramField.getValue();
+		if (paramFieldId && (paramFieldId != "")) {
+			var paramField = paramField.getStore().getById(paramFieldId);
+			if (paramField) {
+				paramOpt.paramId = paramField.get('paramId');
+				paramOpt.index = paramField.get('index');
+				paramOpt.title = paramField.get('name');
+				if (paramField.get('size') > 1) {
+					paramOpt.title += '['+opt.index+']';
+					paramOpt.paramId += '_COMPONENT_'+opt.index;
+				}
+			}
+		}
+
+		var paramTitleField = Ext.getCmp('visu-histo-title');
+		var paramTitle = paramTitleField.getValue();
+		if (paramTitle && (paramTitle != "")) {
+			paramOpt.title = paramTitle;
+		}
+
+    var nbBinsField = Ext.getCmp('visu-histo-bin-slider');
+    var nbBinsValue = nbBinsField.getValue();
+		if (nbBinsValue <= 0) {
+			nbBinsValue = 1
+		}
+
+		this.histogramStore = Ext.create('Ext.data.Store', {
+			fields: ['value', 'count']
+		});
+
+		var minValue = null;
+		var maxValue = null;
+		catalogStore.each(function (item) {
+			minValue = (minValue == null) ? item.get(paramOpt.paramId) : Math.min(minValue, item.get(paramOpt.paramId));
+			maxValue = (maxValue == null) ? item.get(paramOpt.paramId) : Math.max(maxValue, item.get(paramOpt.paramId));
+		});
+
+		var binSize = (maxValue-minValue) / (nbBinsValue-1);
+		var data = [];
+		for (i = 0; i < nbBinsValue; ++i) {
+			data.push({
+				center: minValue + i * binSize,
+				count: 0
+			});
+		}
+
+		catalogStore.each(function (item) {
+			var valueIndex = Math.floor((item.get(paramOpt.paramId) - minValue) / binSize);
+			++data[valueIndex].count;
+		});
  
-	},
+
+		this.histogramStore = Ext.create('Ext.data.Store', {
+			fields: ['center', 'count']
+		});
+		this.histogramStore.loadData(data);
+
+		var chartConfig = {
+			style: 'background:#fff',
+			animate: false,
+			shadow: false,
+			store: this.histogramStore,
+      id: 'visu-chart',
+			axes:   [{
+				type: 'Numeric',
+				position: 'left',
+				fields: ['count'],
+				title: 'Number of Hits',
+				grid : true,
+				minimum: 0
+			}, {
+				type: 'Category',
+				position: 'bottom',
+				fields: ['center'],
+				title: paramOpt.title
+			}],
+			series: [{
+				type: 'column',
+				axis: 'left',
+				highlight: true,
+				gutter: 5,
+				xField: 'center',
+				yField: 'count'/*,
+        tips: {
+					width: 10,
+					height: 20,
+					hideDelay: 100, //200 ms
+					mouseOffset: [0,0],   //[15,18]
+					renderer: function(storeItem, item) {
+						//this.setTitle(storeItem.index + 1);
+					}
+				}*/
+			}]
+		};
+
+    return Ext.create('Ext.chart.Chart', chartConfig);
+  },
+
+  getHistoConfig: function(parametersStore) {
+    var paramComboConfig = {
+      xtype: 'combo',
+      emptyText: 'select parameter',
+      editable: false,
+      store: parametersStore,
+      queryMode: 'local',
+      displayField: 'text',
+      valueField: 'id',
+      id: 'visu-histo-param',
+      tpl: Ext.create('Ext.XTemplate',
+        '<tpl for=".">',
+            '<div class="x-boundlist-item">{name}<tpl if="size &gt; 1">[{index}]</tpl></div>',
+        '</tpl>'
+    ),
+      displayTpl: Ext.create('Ext.XTemplate',
+        '<tpl for=".">',
+            '{name}<tpl if="size &gt; 1">[{index}]</tpl>',
+        '</tpl>'
+      )
+    };
+
+    var sliderConfig = {
+      xtype : 'fieldcontainer',
+      layout: 'hbox',
+      items: [
+        {
+          xtype:'fieldset',
+          title: 'Nb. bins',
+          border: false,
+          layout: 'hbox',
+          items: [
+            {
+              xtype: 'slider',
+              width: 150,
+              value: 10,
+              increment: 1,
+              minValue: 2,
+              maxValue: 100,
+              id: 'visu-histo-bin-slider'
+            },
+            {
+              xtype: 'splitter'
+            },
+            {
+              xtype: 'numberfield',
+              hideTrigger: true,
+              width: 50,
+              disabled: true,
+              id: 'visu-histo-bin-value'
+            }
+        ]
+      }
+      ]
+     };
+
+    return {
+      xtype : 'fieldset',
+      title : 'Histogram axis',
+      items : [
+        paramComboConfig,
+        sliderConfig,
+        {
+          xtype: 'textfield',
+          fieldLabel: 'Title',
+          id: 'visu-histo-title'
+        }
+      ]
+    };
+  },
  
 	init : function (config)
 	{
 		var myConf = {
-			//layout: 'border',
 			items: [
-
-			]
+          this.getHistoConfig(config.parametersStore)
+      ]
 		};
  
 		Ext.apply (this, Ext.apply(arguments, myConf));
@@ -79,10 +79,6 @@ Ext.define(&#39;amdaUI.CatalogVisuScatter&#39;, {
     return Ext.create('Ext.chart.Chart', chartConfig);
   },
  
-	initVisu: function() {
-		var me = this;
-	},
-
   getAxisOptions: function(axisName) {
     var opt = {
       paramId: '',
@@ -97,9 +93,10 @@ Ext.define(&#39;amdaUI.CatalogVisuScatter&#39;, {
       if (paramField) {
         opt.paramId = paramField.get('paramId');
         opt.index = paramField.get('index');
-        opt.title = paramField.get('name');
+				opt.title = paramField.get('name');
         if (paramField.get('size') > 1) {
           opt.title += '['+opt.index+']';
+					opt.paramId += '_COMPONENT_'+opt.index;
         }
       }
     }
@@ -122,8 +119,6 @@ Ext.define(&#39;amdaUI.CatalogVisuScatter&#39;, {
         'max' : axisRangeMax
       };
     }
-
-    console.log(opt);
     return opt;
   },
  
@@ -57,15 +57,10 @@ Ext.define(&#39;amdaUI.VisuUI&#39;, {
 	},
  
 	reset : function() {
-		//reset all fieldsets except the first one (name, intervals)
-		var form = this.items.items[0].items.items[0];
-		for (var i = 1;  i < 4; i++) {
-			var fieldset = form.items.items[i];
-			Ext.each(fieldset.query('field'), function(field) {
+    var tabPanel = Ext.getCmp('visu-tabpanel');
+    Ext.each(tabPanel.activeTab.items.items[0].query('field'), function(field) {
 				field.reset();
-			});
-		}
-		this.resetChart();
+		});
 	},
  
 	/**
@@ -82,10 +77,6 @@ Ext.define(&#39;amdaUI.VisuUI&#39;, {
       }
     });
  
-    Ext.Array.each(this.visuTabContents, function(content) {
-      content.initVisu();
-    });
-
 		var onAfterInit = function(result, e)
 		{
       if (!result) {
@@ -160,7 +151,6 @@ Ext.define(&#39;amdaUI.VisuUI&#39;, {
     this.formPanel.getForm().loadRecord(this.object);
 	},
  
-
 	/**
 	 * Check if changes were made before closing window
 	 * @return true if changes
@@ -170,87 +160,22 @@ Ext.define(&#39;amdaUI.VisuUI&#39;, {
 		return false;
 	},
  
-	resetChart : function () {
-
-		var emptyAxesConfig =   [{
-			type: 'Numeric',
-			position: 'bottom',
-			fields: [],
-			title: 'X axis',
-			grid : true
-		}, {
-			type: 'Numeric',
-			position: 'left',
-			fields: [],
-			title: 'Y axis',
-			grid: true
-		}];
-
-		this.chartConfig.series[0].xField = '';
-		this.chartConfig.series[0].yField = '';
-
-		this.chartConfig.theme = 'Blue';
-
-		this.chartConfig.axes = emptyAxesConfig;
-
-		var chart =  Ext.create('Ext.chart.Chart', this.chartConfig);
-		this.replaceChart(chart);
-
-	},
-
 	plotChart : function () {
-
-		/*this.chartConfig.store = this.chartStore;
-
-		var xTitle = this.items.items[0].items.items[0].items.items[1].items.items[2].getValue();
-		var yTitle = this.items.items[0].items.items[0].items.items[2].items.items[2].getValue();
-
-		if (xTitle) this.chartConfig.axes[0].title = xTitle;
-		if (xTitle) this.chartConfig.axes[1].title = yTitle;
-
-		// axis modifs
-		if (this.comboXrange.getValue() == 'manual') {
-			var minX = this.comboXrange.next().next().getValue();
-			var maxX = this.comboXrange.next().next().next().next().getValue();
-			this.chartConfig.axes[0].minimum = minX;
-			this.chartConfig.axes[0].maximum = maxX ;
-		} else {
-			// unset min/max in config
-			delete this.chartConfig.axes[0].minimum;
-			delete this.chartConfig.axes[0].maximum;
-		}
-		if (this.comboYrange.getValue() == 'manual') {
-			var minX = this.comboYrange.next().next().getValue();
-			var maxX = this.comboYrange.next().next().next().next().getValue();
-		//	if (minX && maxX) {
-			this.chartConfig.axes[1].minimum = minX;
-			this.chartConfig.axes[1].maximum = maxX;
-		//	}
-		} else {
-			// unset min/max in config
-			delete this.chartConfig.axes[1].minimum;
-			delete this.chartConfig.axes[1].maximum;
-		}
-
-		var chart =  Ext.create('Ext.chart.Chart', this.chartConfig);
-
-		this.replaceChart(chart);*/
     var chart = Ext.getCmp('visu-chart');
     var tabPanel = Ext.getCmp('visu-tabpanel');
  
     var chartPanel = chart.up();
     chartPanel.remove(chart);
-    console.log(this.catalogStore);
     chartPanel.insert(tabPanel.activeTab.items.items[0].getChart(this.catalogStore));
 	},
  
-	replaceChart: function(chart) {
-		var chartPanel =  this.items.items[0].items.items[1];
-		var oldChart = chartPanel.down('chart');
-		oldIndex = chartPanel.items.indexOf(oldChart);
-		chartPanel.remove(oldChart);
-		chartPanel.insert(oldIndex, chart);
-	},
+  saveChart : function() {
+    var chart = Ext.getCmp('visu-chart');
+    chart.save({
+		   type: 'image/png',
+			 defaultUrl : window.location
+		});
+  },
  
   initChartTypes: function() {
     var me = this;
@@ -96,7 +96,7 @@ class CatalogCacheMgr extends TimeTableCacheMgr
  	}
  
 	 public function getIntervalsForChart() {
-     $result = $this->getIntervals(NULL, NULL, NULL, NULL);
+		 $result = $this->getIntervals(NULL, NULL, NULL, NULL);
 		 if (!$result['success']) {
 			 return FALSE;
 		 }
@@ -116,8 +116,8 @@ class CatalogCacheMgr extends TimeTableCacheMgr
 		 //split parameters
 		 foreach ($result[intervals] as &$interval) {
 			 foreach ($parameters_to_split as $parameter) {
-				 $values = explode ($interval[$parameter['id']]);
-				 unlink($interval[$parameter['id']]);
+				 $values = explode (',',$interval[$parameter['id']]);
+				 unset($interval[$parameter['id']]);
 				 foreach ($values as $key => $value) {
 					 $interval[$parameter['id'].'_COMPONENT_'.$key] = $value;
 				 }