#10701 & #10702 Done

Erdogan Furkan
1 parent 0b40a169
Showing 3 changed files with 183 additions and 20 deletions Show diff stats
js/app/views/CatalogVisuHistogram.js
js/app/views/CatalogVisuScatter.js
js/app/views/VisuUI.js
@@ -17,7 +17,7 @@ Ext.define(&#39;amdaUI.CatalogVisuHistogram&#39;, {
 		this.callParent(arguments);
 	},
  
-  getChartConfig: function(catalogStore) {
+  getChartConfig: function(catalogStore,isColorBar=false) {
 		var paramOpt = {
 			paramId: '',
 			title: 'Parameter'
@@ -10,20 +10,52 @@
 Ext.define('amdaUI.CatalogVisuScatter', {
 	extend: 'Ext.form.Panel',
 	alias: 'widget.panelCatalogVisuScatter',
+	requires: [
+		'amdaPlotObj.PlotObjectConfig',
+		'amdaPlotComp.PlotColorPicker'
+	],
+
+	availableSymbolsTypes: [
+		{ 'key': 'circle', 'value': 'Dot' },
+		{ 'key': 'cross-open', 'value': 'Plus' },
+		{ 'key': 'circle-open', 'value': 'Circle' },
+		{ 'key': 'x-open', 'value': 'Crux' },
+		{ 'key': 'square-open', 'value': 'Square' },
+		{ 'key': 'triangle-up-open', 'value': 'Triangle Up' },
+		{ 'key': 'triangle-down-open', 'value': 'Triangle Down' },
+		{ 'key': 'triangle-left-open', 'value': 'Triangle Left' },
+		{ 'key': 'triangle-right-open', 'value': 'Triangle Right' },
+		{ 'key': 'circle-cross-open', 'value': 'Crux in circle' },
+		{ 'key': 'circle-open-dot', 'value': 'Dot in circle' },
+		{ 'key': 'diamond', 'value': 'Diamond' },
+		{ 'key': 'star-open', 'value': 'Star' },
+		{ 'key': 'hexagram-star-open', 'value': 'Hexagram' },
+		{ 'key': 'square', 'value': 'Full square' },
+		{ 'key': 'star', 'value': 'Full star' }
+	],
  
 	constructor: function(config) {
 		this.init(config);
 		this.callParent(arguments);
 	},
  
-  getChartConfig: function(catalogStore) {
+  getChartConfig: function(catalogStore, isColorBar=true) {
     var plotTypeField = Ext.getCmp('visu-scatter-type');
     var plotType = plotTypeField.getValue();
  
     var plotColorField = Ext.getCmp('visu-scatter-color');
-    plotColor = plotColorField.getValue();
+    var plotColor=plotColorField.ownerCt.colorDisplayer.value;
+
+	var plotSizeField = Ext.getCmp('visu-scatter-size');
+	var plotSize = plotSizeField.getValue();
+
+	var plotSymbolField = Ext.getCmp('visu-scatter-symbol');
+	var plotSymbol = plotSymbolField.getValue();	
+
+	//plotColor = plotColorField.getValue();
     var xAxisOpt = this.getAxisOptions('X');
     var yAxisOpt = this.getAxisOptions('Y');
+	var zAxisOpt = this.getAxisOptions('Z');
  
     if ((!xAxisOpt.paramId) || (xAxisOpt.paramId == '')) {
       //myDesktopApp.errorMsg('Missing parameter selection for X axis');
@@ -34,12 +66,21 @@ Ext.define(&#39;amdaUI.CatalogVisuScatter&#39;, {
       //myDesktopApp.errorMsg('Missing parameter selection for Y axis');
       return null;
     }
+	if ((!zAxisOpt.paramId) || (zAxisOpt.paramId == '')) {
+		//myDesktopApp.errorMsg('Missing parameter selection for Y axis');
+		isColorBar= false;
+	}
+
 	var x=[];
 	var y=[];
+	var z=[];
 	var text=[];
 	catalogStore.each(function(item){
 		x.push(item.get(xAxisOpt.paramId));
 		y.push(item.get(yAxisOpt.paramId));
+		if (isColorBar){
+			z.push(item.get(zAxisOpt.paramId));
+		}
 		text.push(''+item.get('start').toISOString()+'<br>'+item.get('stop').toISOString());
 	});
  
@@ -50,7 +91,18 @@ Ext.define(&#39;amdaUI.CatalogVisuScatter&#39;, {
 	mode: (plotType=='line') ? 'lines+markers' : 'markers',
 	text: text,
 	marker:{
-		color:plotColor},
+		color: (isColorBar) ? z : plotColor,
+		colorbar:(isColorBar) ? {
+			len:0.7,
+			title: zAxisOpt.title,
+			titleside:'right', 
+			titlefont:{size:10},
+		  } : null,
+		colorscale: 'Jet',
+		showscale:isColorBar,
+		symbol: plotSymbol,
+		size : plotSize,
+	},
 	type: 'scatter'}];
  
 	var layout = {
@@ -93,8 +145,10 @@ Ext.define(&#39;amdaUI.CatalogVisuScatter&#39;, {
     }
  
     var axisScalingField = Ext.getCmp('visu-scatter-'+axisName+'-scaling');
-    var axisScaling = axisScalingField.getValue();
-    if (axisScaling == 'manual') {
+	if (axisScalingField){
+		var axisScaling = axisScalingField.getValue();	
+	}
+	if (axisScaling == 'manual') {
       var axisRangeMinField = Ext.getCmp('visu-scatter-' + axisName + '-range-min');
       var axisRangeMin = axisRangeMinField.getValue();
       var axisRangeMaxField = Ext.getCmp('visu-scatter-' + axisName + '-range-max');
@@ -105,12 +159,13 @@ Ext.define(&#39;amdaUI.CatalogVisuScatter&#39;, {
       };
     }
  
-	opt.logscale = Ext.getCmp('visu-scatter-' + axisName + '-logbox').getValue();
-
+	if (Ext.getCmp('visu-scatter-' + axisName + '-logbox')){
+		opt.logscale = Ext.getCmp('visu-scatter-' + axisName + '-logbox').getValue();
+	}
     return opt;
   },
  
-	getAxisConfig: function(axisIndex, axisName, parametersStore) {
+	getAxisConfig: function(axisIndex, axisName, parametersStore, isColorbar = false) {
 		var paramComboConfig = {
 			xtype: 'combo',
 			emptyText: 'select parameter',
@@ -138,7 +193,7 @@ Ext.define(&#39;amdaUI.CatalogVisuScatter&#39;, {
 			forceSelection:true,
 			value: 'auto',
 			width: 80,
-      id: 'visu-scatter-' + axisName + '-scaling',
+      		id: 'visu-scatter-' + axisName + '-scaling',
 			listeners : {
 				scope : this,
 				change : function(combo, newValue, oldValue) {
@@ -222,11 +277,13 @@ Ext.define(&#39;amdaUI.CatalogVisuScatter&#39;, {
  
 		return {
 			xtype : 'fieldset',
+			collapsed:isColorbar,
+			collapsible:true,
+			checkboxToggle:isColorbar,
+			checkboxName:axisName + ' axis-checkbox',
 			title : axisName + ' axis',
-			items : [
+			items : (isColorbar) ? [
 				paramComboConfig,
-				axisRangeConfig,
-				logbox,
 				{
 					xtype: 'textfield',
 					fieldLabel: axisName + ' title',
@@ -237,14 +294,41 @@ Ext.define(&#39;amdaUI.CatalogVisuScatter&#39;, {
 						},
 						scope: this
 					},
-				}
-			]
+				}] :
+				[
+					paramComboConfig,
+					axisRangeConfig,
+					logbox,
+					{
+						xtype: 'textfield',
+						fieldLabel: axisName + ' title',
+						  id: 'visu-scatter-' + axisName + '-title',
+						listeners:{
+							change:function(){
+								this.visuUI.plotChart();
+							},
+							scope: this
+						},
+					}
+				],
+			listeners: (isColorbar) ? {
+				collapse:function(){
+					this.visuUI.plotChart(false);
+					
+				},
+				expand : function(combo, newValue, oldValue){
+					this.visuUI.plotChart();
+				},
+				scope: this
+			}: null,
 		};
 	},
  
 	getPlottingOptionConfig: function() {
 		var plotTypeComboConfig = {
 			xtype: 'combo',
+			fieldLabel:'Type',
+			margin:'2 2 2 2',
 			emptyText: 'select plot type',
 			editable: false,
 			store: ['scatter', 'line'],
@@ -260,10 +344,12 @@ Ext.define(&#39;amdaUI.CatalogVisuScatter&#39;, {
 				}
 			},scope: this
 		};
-
-		var plotThemeComboConfig = {
+		var plotThemeComboConfig = this.addColorsPicker('visu-scatter-color', 'Color', amdaPlotObj.PlotObjectConfig.availableColorsNew, 'standard');
+		plotThemeComboConfig.add({id:'visu-scatter-color'});
+		/*var plotThemeComboConfig = {
 			xtype: 'combo',
 			emptyText: 'select theme',
+			fieldLabel:'Color',
 			editable: false,
 			store: ['Base','Green','Sky','Red','Purple','Blue','Yellow'],
 			queryMode: 'local',
@@ -277,24 +363,101 @@ Ext.define(&#39;amdaUI.CatalogVisuScatter&#39;, {
 					this.visuUI.plotChart();
 				}
 			}
+		}; */
+
+		var comboStore = Ext.create('Ext.data.Store', {
+			fields: [amdaPlotObj.PlotObjectConfig.fieldComboBox.key, amdaPlotObj.PlotObjectConfig.fieldComboBox.value],
+			data: this.availableSymbolsTypes
+		});
+		var plotSymbolConfig = 
+		{
+			xtype: 'combo',
+			store: comboStore,
+			fieldLabel:'Symbol',
+			editable:false,
+			margin:'2 2 2 2',
+			queryMode: 'local',
+			displayField: 'value',
+			valueField: 'key',
+			value:'circle',
+			id: 'visu-scatter-symbol',
+			listeners: {
+				scope : this,
+				change : function(combo, newValue, oldValue) {
+					//this.chartConfig.theme = newValue;
+					this.visuUI.plotChart();
+				}
+			}
 		};
  
+		var plotSizeNumber=
+			{
+				xtype: 'numberfield',
+				layout:'hbox',
+				hidden: true,
+				width: 50,
+				disabled: true,
+				value: 5,
+				id: 'visu-scatter-size'
+			};
+		
+		var plotSizeConfig = {
+					xtype: 'slider',
+					fieldLabel: 'Size',
+					layout:'hbox',
+					margin:'2 2 2 2',
+					width: 80,
+					value: 5,
+					increment: 1,
+					minValue: 1,
+					maxValue: 20,
+					id: 'visu-scatter-size2',
+					listeners: {
+					  change: function ( slider, newValue, thumb, eOpts ) {
+						var binValueField = Ext.getCmp('visu-scatter-size');
+						binValueField.setValue(newValue);
+					  },
+					  changecomplete: function(){
+						this.visuUI.plotChart();
+					  },
+					  scope: this
+					}
+			};
+
+
 		return {
 			xtype : 'fieldset',
+			collapsed:true,
+			collapsible:true,
+			layout:'fit',
 			title : 'Plotting Options',
 			items : [
 				plotTypeComboConfig,
-				plotThemeComboConfig
+				plotSymbolConfig,
+				plotSizeConfig,
+				plotSizeNumber,
+				plotThemeComboConfig,
 			]
 		};
 	},
  
+	addColorsPicker: function (name, label, availableColors, mode) {
+		if (!mode) {
+			mode = 'standard';
+		}
+		var me =this;
+		return new amdaPlotComp.PlotColorPicker({name: name, label: label, mode: mode, colors: availableColors, onChange: function(name, newValue, oldValue) {
+			me.visuUI.plotChart();
+		}});
+	},
+
 	init : function (config)
 	{
 		var myConf = {
 			items: [
 				this.getAxisConfig(0,'X', config.parametersStore),
 				this.getAxisConfig(0,'Y', config.parametersStore),
+				this.getAxisConfig(0,'Z', config.parametersStore,true),
 				this.getPlottingOptionConfig()
 			]
 		};
@@ -149,9 +149,9 @@ Ext.define(&#39;amdaUI.VisuUI&#39;, {
         return false;
     },
  
-    plotChart: function () {
+    plotChart: function (isColorBar) {
         var tabPanel = Ext.getCmp('visu-tabpanel');
-        var allData = tabPanel.activeTab.items.items[0].getChartConfig(this.catalogStore);
+        var allData = tabPanel.activeTab.items.items[0].getChartConfig(this.catalogStore,isColorBar);
         this.replaceChart(allData);
     },