add grid report container and float report container.

2013-12-27 13:16:14 +08:00 · 2013-12-27 13:16:14 +08:00 · e8ca728684
parent 3ba2684d8f
commit e8ca728684
23 changed files with 1472 additions and 140 deletions
--- a/src/main/java/haflow/dto/entity/ChartSerie.java
+++ b/src/main/java/haflow/dto/entity/ChartSerie.java
@ -0,0 +1,63 @@
+package haflow.dto.entity;
+
+import java.util.UUID;
+
+import javax.persistence.Column;
+import javax.persistence.Entity;
+import javax.persistence.Id;
+import javax.persistence.JoinColumn;
+import javax.persistence.ManyToOne;
+import javax.persistence.Table;
+
+@Entity
+@Table( name = "chartserie")
+public class ChartSerie {
+	private UUID id;
+	private String column_index;
+	private String file_path;
+	private String name;
+	
+	private Portlet portlet;
+	
+	@Id
+    @Column(name="id", length = 16)
+	public UUID getId() {
+		return id;
+	}
+	public void setId(UUID id) {
+		this.id = id;
+	}
+	
+	@Column(name="column_index")
+	public String getColumn_index() {
+		return column_index;
+	}
+	public void setColumn_index(String column_index) {
+		this.column_index = column_index;
+	}
+	
+	@Column(name="file_path")
+	public String getFile_path() {
+		return file_path;
+	}
+	public void setFile_path(String file_path) {
+		this.file_path = file_path;
+	}
+	
+	@Column(name="name")
+	public String getName() {
+		return name;
+	}
+	public void setName(String name) {
+		this.name = name;
+	}
+	
+	@ManyToOne
+	@JoinColumn( name="portletid", referencedColumnName="id")
+	public Portlet getPortlet() {
+		return portlet;
+	}
+	public void setPortlet(Portlet portlet) {
+		this.portlet = portlet;
+	}
+}
--- a/src/main/java/haflow/dto/entity/Portlet.java
+++ b/src/main/java/haflow/dto/entity/Portlet.java
@ -21,10 +21,18 @@ import javax.persistence.Table;
    private String title;
    private String type;
    private int position;
+	private int zone;
+	private int column_number;
+	private int width;
+	private int height;
+	private int left_pos;
+	private int top_pos;
 	
    private Report report;
    private Set<PortletConfiguration> configurations;
    
+    private Set<ChartSerie> chartSeries;
+  
    @Id
    @Column(name="id", length = 16)
    public UUID getId() {
@ -81,4 +89,68 @@ import javax.persistence.Table;
 		this.configurations = configurations;
 	}

+	 @Column(name="zone")
+	public int getZone() {
+		return zone;
+	}
+
+	public void setZone(int zone) {
+		this.zone = zone;
+	}
+
+	@Column(name="column_number")
+	public int getColumn_number() {
+		return column_number;
+	}
+
+	public void setColumn_number(int column) {
+		this.column_number = column;
+	}
+
+	@Column(name="width")
+	public int getWidth() {
+		return width;
+	}
+
+	public void setWidth(int width) {
+		this.width = width;
+	}
+
+	@Column(name="height")
+	public int getHeight() {
+		return height;
+	}
+
+	public void setHeight(int height) {
+		this.height = height;
+	}
+
+	@Column(name="left_pos")
+	public int getLeft_pos() {
+		return left_pos;
+	}
+
+	public void setLeft_pos(int left_pos) {
+		this.left_pos = left_pos;
+	}
+
+	@Column(name="top_pos")
+	public int getTop_pos() {
+		return top_pos;
+	}
+
+	public void setTop_pos(int top_pos) {
+		this.top_pos = top_pos;
+	}
+
+	@OneToMany(mappedBy = "portlet", cascade = CascadeType.ALL, orphanRemoval = true, fetch = FetchType.EAGER)
+	public Set<ChartSerie> getChartSeries() {
+		return chartSeries;
+	}
+
+	public void setChartSeries(Set<ChartSerie> chartSeries) {
+		this.chartSeries = chartSeries;
+	}
+    
+	
  }
--- a/src/main/java/haflow/dto/entity/PortletConfiguration.java
+++ b/src/main/java/haflow/dto/entity/PortletConfiguration.java
@ -16,6 +16,7 @@ public class PortletConfiguration {
 	private UUID id;
 	private String key;
 	private String value;
+	private String value_type;
 	private Portlet portlet;
 	
 	@Id
@ -43,6 +44,14 @@ public class PortletConfiguration {
 		this.value = value;
 	}
 	
+	@Column( name="value_type")
+	public String getValue_type() {
+		return value_type;
+	}
+	public void setValue_type(String value_type) {
+		this.value_type = value_type;
+	}
+	
 	@ManyToOne
 	@JoinColumn( name="portletid", referencedColumnName="id")
 	public Portlet getPortlet() {
--- a/src/main/java/haflow/dto/entity/Report.java
+++ b/src/main/java/haflow/dto/entity/Report.java
@ -21,6 +21,8 @@ public class Report {
 	private String name;
 	private Report parent;
 	private boolean isDirectory;
+	private Integer nbZones;
+	private String panelType;
 	private Set<Portlet> portlets;
 	private MainUser user;
 	private Set<Report> children;
@ -60,6 +62,24 @@ public class Report {
 		this.isDirectory = isDirectory;
 	}
 	
+	@Column(name="nbZones")
+	public Integer getNbZones() {
+		return nbZones;
+	}
+
+	public void setNbZones(Integer nbZones) {
+		this.nbZones = nbZones;
+	}
+
+	@Column(name="panelType")
+	public String getPanelType() {
+		return panelType;
+	}
+
+	public void setPanelType(String panelType) {
+		this.panelType = panelType;
+	}
+
 	@OneToMany(mappedBy = "report", cascade = CascadeType.ALL, orphanRemoval = true, fetch = FetchType.EAGER)
 	public Set<Portlet> getPortlets() {
 		return portlets;
--- a/src/main/java/haflow/service/HdfsService.java
+++ b/src/main/java/haflow/service/HdfsService.java
@ -10,6 +10,8 @@ import java.io.IOException;
 import java.io.InputStream;
 import java.io.InputStreamReader;
 import java.io.OutputStream;
+import java.util.ArrayList;
+import java.util.List;

 import org.apache.hadoop.conf.Configuration;
 import org.apache.hadoop.fs.FSDataInputStream;
@ -272,4 +274,76 @@ public class HdfsService {
        return true;
    }

+	public List<List<String>> getCsvColumnData(String formatedPath) {
+		List<List<String>> results = new ArrayList<List<String>>();
+		try {
+			FileSystem fs = this.getFileSystem();
+			FSDataInputStream hdfsInStream = fs.open(new Path(formatedPath));
+			BufferedReader d = new BufferedReader(new InputStreamReader(
+					hdfsInStream));			
+			String line;
+			if ((line = d.readLine()) != null) {
+				List<String> header = new ArrayList<String>();
+				String[] value = line.split(",");
+				int columnNumber = value.length;
+				for (int i = 0; i < columnNumber; i++) {
+					header.add(value[i]);
+				}
+				results.add(header);
+				for (int lineCount = 0; ((line = d.readLine()) != null) && (lineCount <= 9); lineCount++) {
+					List<String> result = new ArrayList<String>();
+					value = line.split(",");
+					for (int j = 0; j < columnNumber; j++) {
+						result.add(value[j]);
+					}
+					results.add(result);
+				}
+				d.close();
+			}
+		} catch (Exception e) {
+			e.printStackTrace();
+		}
+		return results;
+//		try {
+//			FileSystem fs = this.getFileSystem();
+//			FSDataInputStream hdfsInStream = fs.open(new Path(formatedPath));
+//			BufferedReader d = new BufferedReader(new InputStreamReader(
+//					hdfsInStream));
+//			String line;
+//			JSONArray arr = new JSONArray();
+//			JSONObject obj = new JSONObject();
+//
+//			arr.put(obj);
+//			if ((line = d.readLine()) != null) {
+//				String[] value = line.split(",");
+//				int columnNumber = value.length;
+//				String[] col = new String[columnNumber];
+//				obj.put("length", columnNumber);
+//				JSONObject jobj = new JSONObject();
+//				for (int i = 0; i < columnNumber; i++) {
+//					col[i] = value[i];
+//					String s1 = "" + i;
+//					jobj.put(s1, col[i]);
+//				}
+//				arr.put(jobj);
+//				int lineCount = 0;
+//				while (((line = d.readLine()) != null) && (lineCount <= 9)) {
+//					lineCount++;
+//					value = line.split(",");
+//					JSONObject jobj1 = new JSONObject();
+//					for (int j = 0; j < columnNumber; j++) {
+//						jobj1.put(col[j], value[j]);
+//					}
+//					arr.put(jobj1);
+//				}
+//				d.close();
+//				System.out.println(arr.toString());
+//			}
+//			return arr.toString();
+//		} catch (Exception e) {
+//			e.printStackTrace();
+//			return null;
+//		}
+	}
+
 }
--- a/src/main/java/haflow/service/ReportService.java
+++ b/src/main/java/haflow/service/ReportService.java
@ -53,7 +53,7 @@ public class ReportService {
 		}
 	}
 	
-	public boolean saveReport(UUID reportId, String name, boolean isDirectory, UUID parentId, Set<Portlet> portlets,
+	public boolean saveReport(UUID reportId, String name, boolean isDirectory, Integer nbZones, String panelType, UUID parentId, Set<Portlet> portlets,
 			int userid) {
 		Session session = this.getSessionHelper().openSession();
 		Transaction transaction = session.beginTransaction();
@ -73,6 +73,8 @@ public class ReportService {
 			
 			report.setName(name);
 			report.setDirectory(isDirectory);
+			report.setNbZones(nbZones);
+			report.setPanelType(panelType);
 			report.setParent(parentReport);
 			report.getPortlets().clear();

--- a/src/main/java/haflow/ui/controller/HdfsController.java
+++ b/src/main/java/haflow/ui/controller/HdfsController.java
@ -312,4 +312,5 @@ public class HdfsController {
 		return this.getHdfsHelper().movefile(out_frompath, out_topath,
 				out_filename);
 	}
+	
 }
--- a/src/main/java/haflow/ui/controller/ReportController.java
+++ b/src/main/java/haflow/ui/controller/ReportController.java
@ -1,10 +1,17 @@
 package haflow.ui.controller;

+import haflow.ui.helper.HdfsHelper;
 import haflow.ui.helper.ReportHelper;
+import haflow.ui.model.ChartSerieModel;
+import haflow.ui.model.CsvColumnModel;
+import haflow.ui.model.CsvColumnsModel;
 import haflow.ui.model.ReportListModel;
 import haflow.ui.model.ReportResultModel;
 import haflow.ui.model.SaveReportModel;

+import java.io.UnsupportedEncodingException;
+import java.util.ArrayList;
+import java.util.List;
 import java.util.UUID;

 import javax.servlet.http.HttpServletRequest;
@ -15,19 +22,27 @@ import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("/report")
 public class ReportController {

 	private ReportHelper reportHelper;
+	private HdfsHelper hdfsHelper;
 		
 	@Autowired
 	private void setReportHelper(ReportHelper reportHelper) {
 		this.reportHelper = reportHelper;
 	}
 	
+	@Autowired
+	private void setHdfsHelper(HdfsHelper hdfsHelper) {
+		this.hdfsHelper = hdfsHelper;
+	}
+
 	@RequestMapping(value = "/{reportId}", method = RequestMethod.PUT)
 	@ResponseBody
 	public ReportResultModel put(@PathVariable UUID reportId,
@ -46,6 +61,8 @@ public class ReportController {
 			model.setId(UUID.randomUUID());
 			model.setIsdirectory(true);
 			model.setName("Reports");
+			model.setNbZones(-1);
+			model.setPanelType("none");
 			model.setParentid(null);
 			model.setPortlets(null);
 			this.reportHelper.saveReport(model.getId(), model, userid);
@ -60,4 +77,57 @@ public class ReportController {
 		return this.reportHelper.removeReport(reportId,
 				(Integer) request.getSession().getAttribute("userid"));
 	}
+	
+	@RequestMapping(value = "/getcsvcolumndata", method = RequestMethod.GET)
+	@ResponseBody
+	public CsvColumnModel getCsvColumnData(
+			@RequestParam(value = "file_path", required = true) String file_path,
+			@RequestParam(value = "column_index", required = true) String column_index) {
+//		String in_path=file_path;
+		int columnIndex = Integer.valueOf(column_index);
+		try {
+			String formatedPath = new String(file_path.getBytes("iso-8859-1"),"UTF-8");
+			return this.hdfsHelper.getCsvColumnData(formatedPath, columnIndex);
+		} catch (UnsupportedEncodingException e) {
+			e.printStackTrace();
+			return null;
+		}
+
+	}
+	
+	@RequestMapping(value = "/getchartseries", method = RequestMethod.POST)
+	@ResponseBody
+	public CsvColumnsModel getChartSeries(@RequestBody List<ChartSerieModel> chartSerieProfileModelList, HttpServletRequest request) {
+		CsvColumnsModel ccsm = new CsvColumnsModel();
+		List<CsvColumnModel> series = new ArrayList<CsvColumnModel>();
+		for(int i = 0; i < chartSerieProfileModelList.size(); i++){
+			ChartSerieModel cspm = chartSerieProfileModelList.get(i);
+			CsvColumnModel ccm = this.getCsvColumnData(cspm.getFile_path(), cspm.getColumn_index());
+			series.add(ccm);
+		}
+		ccsm.setSeries(series);
+		return ccsm;
+//		return this.reportHelper.getChartSeries(chartSerieProfilesModel);
+	}
+	
+	@RequestMapping(value = "/test", method = RequestMethod.POST)
+	@ResponseBody
+	public CsvColumnsModel test(HttpServletRequest request) {
+		CsvColumnsModel ccsm = new CsvColumnsModel();
+		List<CsvColumnModel> ccms = new ArrayList<CsvColumnModel>();
+		CsvColumnModel ccm = new CsvColumnModel();
+		List<Double> data = new ArrayList<Double>();
+		data.add(1.2);data.add(1.5);
+		ccm.setData(data);
+		ccm.setColumnname("test");
+		ccms.add(ccm);
+		ccsm.setSeries(ccms);
+		return ccsm;
+//		return this.reportHelper.getChartSeries(chartSerieProfilesModel);
+	}
+	
+	@RequestMapping({ "/grid" })
+	public ModelAndView oozie() {
+		return new ModelAndView("grid");
+	}
 }
--- a/src/main/java/haflow/ui/helper/HdfsHelper.java
+++ b/src/main/java/haflow/ui/helper/HdfsHelper.java
@ -1,16 +1,18 @@
 package haflow.ui.helper;


-import java.sql.Timestamp;
-import java.util.ArrayList;
-
 import haflow.service.HdfsService;
+import haflow.ui.model.CsvColumnModel;
 import haflow.ui.model.HdfsFileListItemModel;
 import haflow.ui.model.HdfsFileListModel;
 import haflow.ui.model.HdfsFileModel;

-import org.apache.hadoop.fs.FileStatus;
+import java.sql.Timestamp;
+import java.util.ArrayList;
+import java.util.List;
+
 import org.apache.hadoop.fs.FSDataInputStream;
+import org.apache.hadoop.fs.FileStatus;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Component;

@ -105,4 +107,28 @@ public class HdfsHelper {
 		System.out.println("movefile:"+ret);
 		return ret;
 	}
+
+	public CsvColumnModel getCsvColumnData(String formatedPath, int column_index) {
+		List<List<String>> table = this.getHdfsService().getCsvColumnData(formatedPath);
+		CsvColumnModel ccm = new CsvColumnModel();
+		List<Double> columnData = new ArrayList<Double>();
+		for( int i = 0; i < table.size(); i++){
+			List<String> lineData = table.get(i);
+			if( lineData.size() > column_index && column_index >= 0){
+				if( i == 0){
+					ccm.setColumnname(lineData.get(column_index));
+				}else{
+					columnData.add(Double.valueOf(lineData.get(column_index)));
+				}
+			}else{
+				ccm.setMessage("Wrong Column Index!");
+				ccm.setSuccess(false);
+				return ccm;
+			}				
+		}
+		ccm.setData(columnData);
+		ccm.setMessage("Load successfully!");
+		ccm.setSuccess(true);
+		return ccm;
+	}
 }
--- a/src/main/java/haflow/ui/helper/ReportHelper.java
+++ b/src/main/java/haflow/ui/helper/ReportHelper.java
@ -1,9 +1,11 @@
 package haflow.ui.helper;

+import haflow.dto.entity.ChartSerie;
 import haflow.dto.entity.Portlet;
 import haflow.dto.entity.PortletConfiguration;
 import haflow.dto.entity.Report;
 import haflow.service.ReportService;
+import haflow.ui.model.ChartSerieModel;
 import haflow.ui.model.PortletConfigurationItemModel;
 import haflow.ui.model.PortletModel;
 import haflow.ui.model.ReportListModel;
@ -29,7 +31,7 @@ public class ReportHelper {
 	}

 	@Autowired
-	public void setReportService(ReportService reportService) {
+	private void setReportService(ReportService reportService) {
 		this.reportService = reportService;
 	}

@ -42,6 +44,8 @@ public class ReportHelper {
 			reportModel.setId(report.getId());
 			reportModel.setIsdirectory(report.isDirectory());
 			reportModel.setName(report.getName());
+			reportModel.setNbZones(report.getNbZones());
+			reportModel.setPanelType(report.getPanelType());
 			if( report.getParent() != null){
 				reportModel.setParentid(report.getParent().getId());
 			}else{
@ -56,15 +60,35 @@ public class ReportHelper {
 				portletModel.setReportId(portlet.getReport().getId());
 				portletModel.setTitle(portlet.getTitle());
 				portletModel.setType(portlet.getType());
+				portletModel.setColumn(portlet.getColumn_number());
+				portletModel.setZone(portlet.getZone());
+				portletModel.setWidth(portlet.getWidth());
+				portletModel.setHeight(portlet.getHeight());
+				portletModel.setLeft(portlet.getLeft_pos());
+				portletModel.setTop(portlet.getTop_pos());
+				
 				Set<PortletConfigurationItemModel> configurations = new HashSet<PortletConfigurationItemModel>();
 				for( PortletConfiguration pc : portlet.getConfigurations() ){
 					PortletConfigurationItemModel pcim = new PortletConfigurationItemModel();
 					pcim.setId(pc.getId());
 					pcim.setKey(pc.getKey());
 					pcim.setValue(pc.getValue());
+					pcim.setValue_type(pc.getValue_type());
 					configurations.add(pcim);
 				}
 				portletModel.setConfigurations(configurations);
+				
+				Set<ChartSerieModel> chartSeries = new HashSet<ChartSerieModel>();
+				for( ChartSerie cs : portlet.getChartSeries()){
+					ChartSerieModel csm = new ChartSerieModel();
+					csm.setId(cs.getId());
+					csm.setName(cs.getName());
+					csm.setColumn_index(cs.getColumn_index());
+					csm.setFile_path(cs.getFile_path());
+					chartSeries.add(csm);
+				}
+				portletModel.setChartSeries(chartSeries);
+				
 				portletModels.add(portletModel);
 			}
 			reportModel.setPortlets(portletModels);
@ -99,6 +123,12 @@ public class ReportHelper {
 				portlet.setPosition(portletModel.getPosition());
 				portlet.setTitle(portletModel.getTitle());
 				portlet.setType(portletModel.getType());
+				portlet.setZone(portletModel.getZone());
+				portlet.setColumn_number(portletModel.getColumn());
+				portlet.setWidth(portletModel.getWidth());
+				portlet.setHeight(portletModel.getHeight());
+				portlet.setLeft_pos(portletModel.getLeft());
+				portlet.setTop_pos(portletModel.getTop());
 				
 				Set<PortletConfiguration> portletConfigurations = new HashSet<PortletConfiguration>();
 				for( PortletConfigurationItemModel cim : portletModel.getConfigurations()){
@ -106,16 +136,30 @@ public class ReportHelper {
 					pc.setId(cim.getId());
 					pc.setKey(cim.getKey());
 					pc.setValue(cim.getValue());
+					pc.setValue_type(cim.getValue_type());
 					pc.setPortlet(portlet);
 					portletConfigurations.add(pc);
 				}
 				portlet.setConfigurations(portletConfigurations);
+				
+				Set<ChartSerie> chartSeries = new HashSet<ChartSerie>();
+				for( ChartSerieModel csm : portletModel.getChartSeries()){
+					ChartSerie cs = new ChartSerie();
+					cs.setId(csm.getId());
+					cs.setName(csm.getName());
+					cs.setFile_path(csm.getFile_path());
+					cs.setColumn_index(csm.getColumn_index());
+					cs.setPortlet(portlet);
+					chartSeries.add(cs);
+				}
+				portlet.setChartSeries(chartSeries);
+				
 				portlets.add(portlet);
 			}
 		}
 		boolean result = true;
 		result = result
-				&& this.getReportService().saveReport(reportId, model.getName(), model.getIsdirectory(), model.getParentid(), portlets, userid);
+				&& this.getReportService().saveReport(reportId, model.getName(), model.getIsdirectory(), model.getNbZones(), model.getPanelType(), model.getParentid(), portlets, userid);
 		
 		return result;
 	}
--- a/src/main/java/haflow/ui/model/ChartSerieModel.java
+++ b/src/main/java/haflow/ui/model/ChartSerieModel.java
@ -0,0 +1,48 @@
+package haflow.ui.model;
+
+import java.util.UUID;
+
+import javax.xml.bind.annotation.XmlElement;
+import javax.xml.bind.annotation.XmlRootElement;
+
+@XmlRootElement(name="chartserie")
+public class ChartSerieModel {
+	private UUID id;
+	private String column_index;
+	private String file_path;
+	private String name;
+	
+	@XmlElement
+	public UUID getId() {
+		return id;
+	}
+	public void setId(UUID id) {
+		this.id = id;
+	}
+	
+	@XmlElement
+	public String getColumn_index() {
+		return column_index;
+	}
+	public void setColumn_index(String column_index) {
+		this.column_index = column_index;
+	}
+	
+	@XmlElement
+	public String getFile_path() {
+		return file_path;
+	}
+	public void setFile_path(String file_path) {
+		this.file_path = file_path;
+	}
+	
+	@XmlElement
+	public String getName() {
+		return name;
+	}
+	public void setName(String name) {
+		this.name = name;
+	}
+	
+	
+}
--- a/src/main/java/haflow/ui/model/CsvColumnModel.java
+++ b/src/main/java/haflow/ui/model/CsvColumnModel.java
@ -0,0 +1,52 @@
+package haflow.ui.model;
+
+import java.util.List;
+
+import javax.xml.bind.annotation.XmlElement;
+import javax.xml.bind.annotation.XmlElementWrapper;
+import javax.xml.bind.annotation.XmlRootElement;
+
+@XmlRootElement(name="csvcolumnmodel")
+public class CsvColumnModel {
+	private String columnname;
+	private List<Double> data;
+	private String message;
+	private boolean success;
+	
+	@XmlElement(name="columnname")
+	public String getColumnname() {
+		return columnname;
+	}
+
+	public void setColumnname(String columnname) {
+		this.columnname = columnname;
+	}
+
+	@XmlElementWrapper(name = "data")
+	@XmlElement(name = "dataItem")
+	public List<Double> getData() {
+		return data;
+	}
+
+	public void setData(List<Double> data) {
+		this.data = data;
+	}
+
+	@XmlElement(name="message")
+	public String getMessage() {
+		return message;
+	}
+
+	public void setMessage(String message) {
+		this.message = message;
+	}
+
+	@XmlElement(name="success")
+	public boolean isSuccess() {
+		return success;
+	}
+
+	public void setSuccess(boolean success) {
+		this.success = success;
+	}
+}
--- a/src/main/java/haflow/ui/model/CsvColumnsModel.java
+++ b/src/main/java/haflow/ui/model/CsvColumnsModel.java
@ -0,0 +1,43 @@
+package haflow.ui.model;
+
+import java.util.List;
+
+import javax.xml.bind.annotation.XmlElement;
+import javax.xml.bind.annotation.XmlElementWrapper;
+import javax.xml.bind.annotation.XmlRootElement;
+
+@XmlRootElement(name="csvcolumnsmodel")
+public class CsvColumnsModel {
+
+	private List<CsvColumnModel> series;
+	private boolean success;
+	private String message;
+	
+	@XmlElementWrapper(name="series")
+	@XmlElement(name="serie")
+	public List<CsvColumnModel> getSeries() {
+		return series;
+	}
+
+	public void setSeries(List<CsvColumnModel> series) {
+		this.series = series;
+	}
+
+	@XmlElement(name="message")
+	public String getMessage() {
+		return message;
+	}
+
+	public void setMessage(String message) {
+		this.message = message;
+	}
+
+	@XmlElement(name="success")
+	public boolean isSuccess() {
+		return success;
+	}
+
+	public void setSuccess(boolean success) {
+		this.success = success;
+	}
+}
--- a/src/main/java/haflow/ui/model/PortletConfigurationItemModel.java
+++ b/src/main/java/haflow/ui/model/PortletConfigurationItemModel.java
@ -10,6 +10,7 @@ public class PortletConfigurationItemModel {
 	private UUID id;
 	private String key;
 	private String value;
+	private String value_type;
 	
 	@XmlElement
 	public UUID getId() {
@ -38,4 +39,13 @@ public class PortletConfigurationItemModel {
 		this.value = value;
 	}

+	@XmlElement
+	public String getValue_type() {
+		return value_type;
+	}
+
+	public void setValue_type(String value_type) {
+		this.value_type = value_type;
+	}
+	
 }
--- a/src/main/java/haflow/ui/model/PortletModel.java
+++ b/src/main/java/haflow/ui/model/PortletModel.java
@ -13,10 +13,18 @@ public class PortletModel {
 	private String title;
 	private String type;
 	private int position;
+	private int zone;
+	private int column;
+	private int width;
+	private int height;
+	private int left;
+	private int top;
 	
 	private UUID reportId;
 	private Set<PortletConfigurationItemModel> configurations;
 	
+	private Set<ChartSerieModel> chartSeries;
+
 	@XmlElement
 	public UUID getId() {
 		return id;
@ -65,4 +73,64 @@ public class PortletModel {
 	public void setConfigurations(Set<PortletConfigurationItemModel> configurations) {
 		this.configurations = configurations;
 	}
+	
+	@XmlElement
+	public int getZone() {
+		return zone;
+	}
+	public void setZone(int zone) {
+		this.zone = zone;
+	}
+	
+	@XmlElement
+	public int getColumn() {
+		return column;
+	}
+	public void setColumn(int column) {
+		this.column = column;
+	}
+	
+	@XmlElement
+	public int getWidth() {
+		return width;
+	}
+	public void setWidth(int width) {
+		this.width = width;
+	}
+	
+	@XmlElement
+	public int getHeight() {
+		return height;
+	}
+	public void setHeight(int height) {
+		this.height = height;
+	}
+	
+	@XmlElement
+	public int getLeft() {
+		return left;
+	}
+	public void setLeft(int left) {
+		this.left = left;
+	}
+	
+	@XmlElement
+	public int getTop() {
+		return top;
+	}
+	public void setTop(int top) {
+		this.top = top;
+	}
+	
+	@XmlElementWrapper(name="chartSeries")
+	@XmlElement(name="chartSerie")
+	public Set<ChartSerieModel> getChartSeries() {
+		return chartSeries;
+	}
+	
+	public void setChartSeries(Set<ChartSerieModel> chartSeries) {
+		this.chartSeries = chartSeries;
+	}
+	
+	
 }
--- a/src/main/java/haflow/ui/model/SaveReportModel.java
+++ b/src/main/java/haflow/ui/model/SaveReportModel.java
@ -15,6 +15,8 @@ public class SaveReportModel {
 	
 	private UUID parentid;
 	private Set<PortletModel> portlets;
+	private Integer nbZones;
+	private String panelType;
 	
 	@XmlElement
 	public UUID getId() {
@ -57,4 +59,22 @@ public class SaveReportModel {
 	public void setPortlets(Set<PortletModel> portlets) {
 		this.portlets = portlets;
 	}
+	
+	@XmlElement
+	public Integer getNbZones() {
+		return nbZones;
+	}
+	public void setNbZones(Integer nbZones) {
+		this.nbZones = nbZones;
+	}
+	
+	@XmlElement
+	public String getPanelType() {
+		return panelType;
+	}
+	public void setPanelType(String panelType) {
+		this.panelType = panelType;
+	}
+	
+	
 }
--- a/src/main/resources/hibernate.cfg.xml
+++ b/src/main/resources/hibernate.cfg.xml
@ -24,6 +24,7 @@
        <mapping class="haflow.dto.entity.Report" />
        <mapping class="haflow.dto.entity.Portlet" />
        <mapping class="haflow.dto.entity.PortletConfiguration" />
+        <mapping class="haflow.dto.entity.ChartSerie" />
        
 		<mapping class="haflow.dto.profile.NodeAppearance" />
 		<mapping class="haflow.dto.profile.NodeConfiguration" />
--- a/src/main/webapp/WEB-INF/views/hive.jsp
+++ b/src/main/webapp/WEB-INF/views/hive.jsp
@ -10,6 +10,6 @@
 <title>ozzie</title>
 </head>
 <body>
-<iframe src="http://133.133.133.89:8011/javaHiveAdimin/" height="100%" width="100%" frameborder="0" align="middle" ></iframe>
+<iframe src="http://133.133.133.73:8011/javaHiveAdimin/" height="100%" width="100%" frameborder="0" align="middle" ></iframe>
 </body>
 </html>
--- a/src/main/webapp/script/haflow.main.js
+++ b/src/main/webapp/script/haflow.main.js
@ -53,6 +53,8 @@ HAFlow.Main.prototype.init = function() {
    this.flows = {};
    this.jsPlumb = {};
    this.reports = {};
+    this.chartMap = {};
+    this.reportPortletClipboard = null;//TODO
    this.initUserInterface();
    this.initData();
 };
@ -133,7 +135,6 @@ HAFlow.Main.prototype.initFlowContainer = function() {
            var reportId = targetContainerPaneId.replace(reportContainerPaneString, "");
            _currentInstance.currentReportId = reportId;
            _currentInstance.setupReportDroppable(reportId); 
-//            _currentInstance.paintReport(reportId);    
        }else if(targetContainerPaneId.substring(0, flowContainerPaneString.length) 
                === flowContainerPaneString){ //flow opened
            
@ -156,7 +157,7 @@ HAFlow.Main.prototype.initFlowContainer = function() {
                || targetContainerPaneId == "hive"){//oozie or hive opened
                
            }else {
-                alert("not known target container!");
+            	_currentInstance.addToConsole("not known target container!", true);
            }
        }

@ -276,7 +277,7 @@ HAFlow.Main.prototype.addToConsole = function(message, isError) {
 	var consoleContainer = dijit.registry
 			.byId(_currentInstance.consoleContainerId);
 	
-	var text = "</br> &gt;&gt;&gt;</br> ";
+	var text = " &gt;&gt;&gt; ";
 	if( isError){
 		text += "<div style=\"color:red\">" + message + "</div>";
 	}else{
--- a/src/main/webapp/script/haflow.report.js
+++ b/src/main/webapp/script/haflow.report.js
@ -2,21 +2,64 @@ dojo.require("dojox.widget.Portlet");
 dojo.require("dojox.charting.Chart");
 dojo.require("dojox.charting.plot2d.StackedAreas");
 dojo.require("dojox.charting.themes.Wetland");
-dojo.require("dojox/charting/themes/Claro");
+dojo.require("dojox.charting.themes.Julie");
+dojo.require("dojox.charting.themes.Claro");
 dojo.require("dojox.charting.axis2d.Default");
 dojo.require("dojox.charting.plot2d.Columns");
 dojo.require("dojo.fx.easing");
 dojo.require("dojox.fx.scroll");
 dojo.require("dijit.registry");
 dojo.require("dojo.window");
+dojo.require("dojox.charting.plot2d.Lines");
+dojo.require("dojox.charting.plot2d.Markers");
+dojo.require("dojox.charting.plot2d.Stacked");
+dojo.require("dojox.charting.plot2d.Bars");
+dojo.require("dojox.charting.plot2d.Columns");
 dojo.require("dojox.charting.plot2d.Pie");
 dojo.require("dojox.charting.axis2d.Default");
 dojo.require("dojox/charting/action2d/Tooltip");	
+dojo.require("dojox.layout.GridContainer");
+dojo.require("dojox.charting.widget.Legend");
+dojo.require("dojo.topic");
+dojo.require("dojo.dnd.Source");
+dojo.require("dojo.dnd.Mover");
+dojo.require("dojox.layout.FloatingPane");
+dojo.require("dojo.dnd.Source");
+dojo.require("dojo.dnd.Moveable");
+dojo.require("dojo.dom");
+dojo.require("dojo.on");
+dojo.require("dojox.layout.ResizeHandle");

 HAFlow.Main.prototype.newReport = function(parentId) {
+	var _currentInstance = this;
+	var columnSelectDialog = new dijit.Dialog(
+			{
+				id : "chooseZonesNumberDialog",
+				title : "Choose Number of Zones",
+				content : "<html><body>"
+						+ "<form id=\"chooseZonesNumberForm\">"
+						+ "Zone Numbers:<input type=\"text\" id=\"chooseZonesNumberInput\"> </input>"
+						+ "<button type=\"button\" id=\"chooseZonesNumberButton\">submit</button></form></body></html>"
+			});
+	columnSelectDialog.show();
+	dojo.connect(dojo.byId("chooseZonesNumberButton"), "onclick", function() {
+		var nbZones = document.getElementById("chooseZonesNumberInput").value;
+		var newReportId = HAFlow.generateUUID();
+		_currentInstance.newReportItem(newReportId, parentId, false,
+				parseInt(nbZones), "grid");
+		_currentInstance.openReport(newReportId);
+
+		columnSelectDialog.destroy();
+	});
+};
+
+HAFlow.Main.prototype.newFloatReport = function(parentId) {
+	var _currentInstance = this;
+
 	var newReportId = HAFlow.generateUUID();
-	this.newReportItem(newReportId, parentId, false);
-	this.openReport(newReportId);
+	_currentInstance.newReportItem(newReportId, parentId, false, -1, "float");
+	_currentInstance.openReport(newReportId);
+
 };

 HAFlow.Main.prototype.newReportDirectory = function(parentId) {
@ -24,13 +67,16 @@ HAFlow.Main.prototype.newReportDirectory = function(parentId) {
 	this.newReportItem(newReportId, parentId, true);
 };

-HAFlow.Main.prototype.newReportItem = function(newReportId, parentId, isdirectory){	
+HAFlow.Main.prototype.newReportItem = function(newReportId, parentId, isdirectory, nbZones, type){	
 	this.reports[newReportId] = {};
 	this.reports[newReportId].id = newReportId;
 	this.reports[newReportId].name = "NewReport" + (isdirectory ? "Dir" : "");
 	this.reports[newReportId].isdirectory = isdirectory;
 	this.reports[newReportId].parentid = parentId;
 	this.reports[newReportId].portlets = new Array();
+	this.reports[newReportId].nbZones = nbZones;
+	
+	this.reports[newReportId].panelType = type;//float or grid //TODO
 	
 	this.reportListStore.put({
 		id : newReportId,
@ -42,30 +88,91 @@ HAFlow.Main.prototype.newReportItem = function(newReportId, parentId, isdirector
 	this.saveReport(newReportId);//save this.reports[newReportId]
 };

-//private
+HAFlow.Main.prototype.addGridPanel = function(reportId, reportContainerDivId, currentReport) {
+	var gridContainer = new dojox.layout.GridContainer({
+		id : "reportContainer_" + reportId,
+		class : "reportcontainer",
+        nbZones: currentReport.nbZones,
+        opacity: .5,
+        hasResizableColumns: false,
+        allowAutoScroll: false,//important
+        withHandles: true,
+        dragHandleClass: 'dijitTitlePaneTitle',
+//        style: {width:'100%'},
+        acceptTypes: ['Portlet'],
+        isOffset: true
+    }, reportContainerDivId);
+
+	var dummyPortletId = "dummy_portlet_id_" + reportId;
+    var dummyPortlet = [
+        dojo.create('div', {innerHTML: "<div style='color:gray; margin-top:50px; margin-bottom:50px; " 
+        	+ "margin-left:auto; margin-right:auto;'>Drag reports into the grids!</div>"})
+    ];
+
+    var portlet1 = dojox.widget.Portlet({
+    	id: dummyPortletId,
+        closable: false,
+        dndType: 'Portlet',
+        title: 'Sample portlet',
+        content: dummyPortlet,
+        style: 'height:300px;'
+    });
+
+    gridContainer.addChild(portlet1);
+    gridContainer.startup();
+    gridContainer.resize();//important!!
+};
+
+HAFlow.Main.prototype.addFloatPanel = function(reportId, reportContainerDivId) {
+//	var reportContainer = dijit.byId("reportContainer_" + reportId);
+	var innerContentPane = new dijit.layout.ContentPane({
+		id : "reportContainer_" + reportId,
+		class : "reportcontainer",
+		style : ' width:100%; height:100%; background-color: blue;',//
+	}, reportContainerDivId);
+
+};
+
+// private
 HAFlow.Main.prototype.openReport = function(reportId){
 	var contentPane = dijit.byId("reportContainerPane_" + reportId);//mush be dijit.byId
 	if( contentPane == null){
 		var currentReport = this.reports[reportId];
-		var reportContainer = new dijit.layout.ContentPane({
-			id : "reportContainer_" + reportId,
-			class : "reportcontainer",
-			content : "<div style='visibility: hidden'>abc</div>"
-		});
-		contentPane = new dijit.layout.ContentPane({
+		
+		var reportContainerDivId = "reportContainer_div_"+ reportId;
+		contentPane = new dijit.layout.ContentPane({//stable
 			id : "reportContainerPane_" + reportId,
 			title : currentReport.name,
-			content : reportContainer,
+			content : "<div class='reportcontainerdiv'>" + //width: 900px;height: 978px;
+						"<div id='"+ reportContainerDivId + "'></div>" +
+								"</div>",
 			closable : true,
 		});
+		contentPane.startup();
 		this.ui.centerContainer.addChild(contentPane);
-		this.paintReport(reportId);
+		this.ui.centerContainer.selectChild(contentPane);	//todo
+		
+		//todtooo
+		var panelType = this.reports[reportId].panelType;
+		if( panelType == "grid"){
+			this.addGridPanel(reportId, reportContainerDivId, currentReport);
+		}else if( panelType == "float" ){
+			this.addFloatPanel(reportId, reportContainerDivId);
+		}
+	    
+		this.paintReports(reportId);		
+	}else{
+		//dijit.byId("reportContainer_" + reportId).resize();//important!!
+		this.ui.centerContainer.selectChild(contentPane);	//todo
 	}
-	this.ui.centerContainer.selectChild(contentPane);		
+//	var tt  = dijit.byId("reportContainer_" + reportId);
+//	tt.resize();//important!!
+	this.setupReportDroppable(reportId);
 };


 HAFlow.Main.prototype.saveReport = function(reportId){
+	this.updatePosition(reportId);
 	var _currentInstance = this;
 	$.ajax({
 		url : _currentInstance.basePath + "report/" + reportId,
@ -77,8 +184,7 @@ HAFlow.Main.prototype.saveReport = function(reportId){
 			if( data.success ){
 				_currentInstance.addToConsole("Report Saved!", false);
 			}else{
-				_currentInstance.addToConsole("Report Save Failed!", true);
-				_currentInstance.addToConsole(data.message, true);
+				_currentInstance.addToConsole("Report Save Failed!" + data.message, true);
 			}
 		},
 		error : function(request, status, error) {
@ -189,82 +295,39 @@ HAFlow.Main.prototype.paintReportList = function() {
 	});
 	this.ui.secondTrailingContainer.addChild(reportListPane);
 	text = "<div class=\"reportmodule\" id=\"reportmodule_" + "text"
-			+ "\"><div>" + "text portlet" + "</div></div>";
+			+ "\"><div>" + "text portlet" + "</div></div>"; // data-dojo-type='dojo/dnd/Moveable' 
 	$("#" + this.simpleReportListPaneId).append(text);

-	text = "<div class=\"reportmodule\" id=\"reportmodule_" + "curve"
-			+ "\"><div>" + "curve portlet" + "</div></div>";
+	text = "<div class=\"reportmodule\" id=\"reportmodule_" + "lines"
+			+ "\"><div>" + "lines portlet" + "</div></div>";// data-dojo-type='dojo.dnd.Source' type='reportmodule4'
+	$("#" + this.simpleReportListPaneId).append(text);
+	
+	text = "<div class=\"reportmodule\" id=\"reportmodule_" + "stacked"
+			+ "\"><div>" + "stacked portlet" + "</div></div>";
+	$("#" + this.simpleReportListPaneId).append(text);
+	
+	text = "<div class=\"reportmodule\" id=\"reportmodule_" + "bars"
+	+ "\"><div>" + "bars portlet" + "</div></div>";
+	$("#" + this.simpleReportListPaneId).append(text);
+	
+	text = "<div class=\"reportmodule\" id=\"reportmodule_" + "columns"
+	+ "\"><div>" + "columns portlet" + "</div></div>";
+	$("#" + this.simpleReportListPaneId).append(text);
+	
+	text = "<div class=\"reportmodule\" id=\"reportmodule_" + "pie"
+	+ "\"><div>" + "pie portlet" + "</div></div>";
 	$("#" + this.simpleReportListPaneId).append(text);

 	this.ui.refresh();
-
 };

-HAFlow.Main.prototype.addReport = function(reportId, currentPortlet){
-	var reportContainer = dijit.byId("reportContainer_" + reportId);
-	var portlet = new dojox.widget.Portlet({
-		title : currentPortlet.type,
-		id : "portlet_" + currentPortlet.id,
-	});
-	if (currentPortlet.type == "text") {
-//		portlet.set("content", currentPortlet.text_content);
-		portlet.startup();
-		reportContainer.addChild(portlet);//, currentPortlet.index
-	} else if (currentPortlet.type == "curve") {
-		var chartId = currentPortlet.id;
-		var chartDivId = "chart_" + chartId + "_div_id";
-		portlet.set("content", "<div id=\"" + chartDivId
-				+ "\" style=\"height:180px; width:480px;\"></div>");
-		portlet.startup();
-		reportContainer.addChild(portlet);//, currentPortlet.index
-
-		var chart = new dojox.charting.Chart(chartDivId, {
-//			id : "chart_" + chartId,
-			title : currentPortlet.title,// "Production(Quantity)",
-			titlePos : "bottom",
-			titleGap : 25,
-			titleFont : "normal normal normal 15pt Arial",
-			titleFontColor : "orange"
-		});
-					 
-		var chart_series = [ 1, 2, 0.5, 1.5, 1, 2.8, 0.4 ];
-//		var chart_series2 = [ 2, 4, 1, 3, 2, 5.6, 0.8 ];
-		chart.addPlot("default", {
-			type : dojox.charting.plot2d.StackedAreas,//dojox.charting.plot2d.PiePlot,//StackedAreas,
-//			tension : 3,
-			markers: true,
-		}).addAxis("x", {
-			fixLower : "major",
-			fixUpper : "major"
-		}).addAxis("y", {
-			vertical : true,
-			fixLower : "major",
-			fixUpper : "major",
-			min : 0
-		}).setTheme(dojox.charting.themes.Wetland).addSeries("Series A",
-				chart_series).render();
-		chart.render();
-//		chart.title = "newTitle";
-//		chart.fullRender();
-//		chart.addSeries("Series B", chart_series2).render();
-//		chart.render();
-	} else {
-		alert("unknown report");
-	}
-	
-	dojo.connect(portlet, "onClick", function(event){
-		var portletId = event.currentTarget.id;
-		portletId = portletId.replace("portlet_", "");
-		_currentInstance.onReportPortletClicked(portletId, chart);
-	});
-};
-
-HAFlow.Main.prototype.onReportPortletClicked = function(portletId, chart) {
+HAFlow.Main.prototype.onReportPortletClicked = function(portletId, chart, portlet) {
 	var instance = this;
 	var reportInfo = instance.reports[this.currentReportId];
 	var text = "";
 	text += "<table border=\"0\">";
 	text += "<tr style=\"tr\"><th align=\"left\">Portlet Info</th>" + "<td>" + portletId + "</td></tr>";
+	//find current protlet
 	var portlets = reportInfo.portlets;
 	var portlet;
 	for( var i = 0; i < portlets.length; i++ ){
@ -273,6 +336,7 @@ HAFlow.Main.prototype.onReportPortletClicked = function(portletId, chart) {
 			break;
 		}
 	}
+	
 	var configurations = portlet.configurations;
 	for( var i = 0; i < configurations.length; i++ ){
 		var configuration = configurations[i];
@ -280,6 +344,24 @@ HAFlow.Main.prototype.onReportPortletClicked = function(portletId, chart) {
 		text += "<tr style=\"tr\"><th align=\"left\">" + configuration.key + "</th>" 
 		+ "<td><span id=" + configurationTextBoxSpanId + ">" +  "</span></td></tr>";
 	}
+	
+	var series = portlet.chartSeries;
+	for ( var i = 0; i < series.length; i++) {
+		var serie = series[i];
+		text += "<tr style=\"tr\"><th align=\"left\">" + "series.name"
+				+ "</th>" + "<td>" + serie.name + "</td></tr>";
+		var serieFilePathTextBoxSpanId = serie.name + "_file_path_text_pane";
+		text += "<tr style=\"tr\"><th align=\"left\">" + "file path" + "</th>"
+				+ "<td><span id=" + serieFilePathTextBoxSpanId + ">"
+				+ "</span></td></tr>";
+		var serieColumnIndexTextBoxSpanId = serie.name
+				+ "_column_index_text_pane";
+		text += "<tr style=\"tr\"><th align=\"left\">" + "column index"
+				+ "</th>" + "<td><span id=" + serieColumnIndexTextBoxSpanId
+				+ ">" + "</span></td></tr>";
+	}
+	
+	//save button
 	text += "<tr style=\"tr\"><td align=\"left\">" +
 			"<div id=\"save_portlet_configurations_button_pane\" class=\"configuration-content\"></div>" +
 			"</td></tr>";	
@ -302,6 +384,36 @@ HAFlow.Main.prototype.onReportPortletClicked = function(portletId, chart) {
 		configurationTextBox.startup();
 	}
 	
+	for( var i = 0; i < series.length; i++ ){
+		var serie = series[i];
+		var serieFilePathTextBoxId = serie.name + "_file_path_text";	
+		var serieFilePathTextBoxSpanId = serie.name + "_file_path_text_pane";
+		
+		if (dijit.byId(serieFilePathTextBoxId) != null) {
+			dijit.registry.remove(serieFilePathTextBoxId);
+		}
+		var filePathTextBox = new dijit.form.TextBox({
+			id : serieFilePathTextBoxId,
+			value : serie.file_path,
+			style : "width:300px;"
+		});
+		filePathTextBox.placeAt(dojo.byId(serieFilePathTextBoxSpanId));
+		filePathTextBox.startup();
+		
+		var serieColumnIndexTextBoxId = serie.name + "_column_index_text";
+		var serieColumnIndexTextBoxSpanId = serie.name + "_column_index_text_pane";
+		if (dijit.byId(serieColumnIndexTextBoxId) != null) {
+			dijit.registry.remove(serieColumnIndexTextBoxId);
+		}
+		var columnIndexTextBox = new dijit.form.TextBox({
+			id : serieColumnIndexTextBoxId,
+			value : serie.column_index,
+			style : "width:300px;"
+		});
+		columnIndexTextBox.placeAt(dojo.byId(serieColumnIndexTextBoxSpanId));
+		columnIndexTextBox.startup();
+	}
+	
 	var button = new dijit.form.Button({
 		label : "Save",
 		onClick : function() {
@ -316,8 +428,7 @@ HAFlow.Main.prototype.onReportPortletClicked = function(portletId, chart) {
 };

 HAFlow.Main.prototype.savePortletConfiguration = function(portletId, chart){
-	
-	this.addToConsole("something", false);
+	var _currentInstance = this;
 	var reportInfo = this.reports[this.currentReportId];
 	var portlets = reportInfo.portlets;
 	var portlet;
@ -333,23 +444,26 @@ HAFlow.Main.prototype.savePortletConfiguration = function(portletId, chart){
 		var configuration = configurations[i];
 		var configurationTextBoxId = "portlet_configuration_" + configuration.id + "_text_box";
 		var newValue = dijit.byId(configurationTextBoxId).value;
-		if( portlet.type == "text"){
-			var portletWidget = dijit.byId("portlet_" + portletId);
-			portletWidget.set(configuration.key, newValue);
-		}else{
-			//var chartDivId = "chart_" + portletId;
-			var chartWidget = chart;//dijit.byId(chartDivId);
-//			var chartWidget2 = dijit.byId(chartDivId);
-			var plot = chart.getPlot("default");
-			chartWidget.set(configuration.key, newValue);
-			chart.render();	
-		}
-//		alert(newValue);
+		configuration.value = newValue;
 	}
+	
+	var series = portlet.chartSeries;
+	for( var i = 0; i < series.length; i++ ){
+		var serie = series[i];
+		var serieFilePathTextBoxId = serie.name + "_file_path_text";	
+		var newFilePath = dijit.byId(serieFilePathTextBoxId).value;
+		serie.file_path = newFilePath;
+		
+		var serieColumnIndexTextBoxId = serie.name + "_column_index_text";
+		var newColumnIndex = dijit.byId(serieColumnIndexTextBoxId).value;
+		serie.column_index = newColumnIndex;
+	}
+	
+	this.paintReports(this.currentReportId);
 };

-//private
-HAFlow.Main.prototype.paintReport = function(reportId) {
+// private
+HAFlow.Main.prototype.paintReports = function(reportId) {
 	var currentReport = this.reports[reportId];
 	var reportContainer = dijit.byId("reportContainer_" + reportId);
 	var ps = currentReport.portlets;
@ -364,33 +478,418 @@ HAFlow.Main.prototype.onReportModuleAdded = function(currentInstance, reportId,
 		event, ui) {
 	var reportModuleId = ui.draggable[0].id.replace("reportmodule_", "");
 	var newPortletId = HAFlow.generateUUID();
+	var portletConfigurations;
+	var chartSeries;
 	if (reportModuleId == "text") {
-		var currentPortlet = {
-			id: newPortletId, 
-			title: reportModuleId, 
-			type: "text",
-			position: 1,
-			
-			reportId: reportId,
-			configurations : [{id: HAFlow.generateUUID(), key:"content", value:"hello world!"}]
-		};
-		this.reports[reportId].portlets.push(currentPortlet);
-		this.addReport(reportId, currentPortlet);
-	} else if (reportModuleId == "curve") {
-		var currentPortlet = {
-				id: newPortletId, 
-				title: reportModuleId, 
-				type: "curve",
-				position: 1,
-				
-				reportId: reportId,
-				configurations : [{id: HAFlow.generateUUID(), key: 'type', value : "Pie"}, 
-				       {id: HAFlow.generateUUID(), key: 'markers', value: 'true'}]
-			};
-		this.reports[reportId].portlets.push(currentPortlet);
-		this.addReport(reportId, currentPortlet);
-	} else {
+		portletConfigurations = [ {
+			id : HAFlow.generateUUID(),
+			key : "content",
+			value : "hello world!",
+			value_type : "string"
+		} ];
+		chartSeries = [];
+	} else if (reportModuleId == "lines" || reportModuleId == "stacked") {
+		portletConfigurations = [ {
+			id : HAFlow.generateUUID(),
+			key : 'type',
+			value : (reportModuleId == "lines") ? "Lines" : "Markers",
+			value_type : "string"
+		}, {
+			id : HAFlow.generateUUID(),
+			key : 'lines',
+			value : false,
+			value_type : "boolean"
+		}, {
+			id : HAFlow.generateUUID(),
+			key : 'areas',
+			value : false,
+			value_type : "boolean"
+		}, {
+			id : HAFlow.generateUUID(),
+			key : 'markers',
+			value : true,
+			value_type : "boolean"
+		}, {
+			id : HAFlow.generateUUID(),
+			key : 'hAxis',
+			value : "hx",
+			value_type : "string"
+		}, {
+			id : HAFlow.generateUUID(),
+			key : 'vAxis',
+			value : "hy",
+			value_type : "string"
+		}];
+		chartSeries = [ {
+			id : HAFlow.generateUUID(),
+			name : "Sa",
+			file_path : 'hdfs://133.133.2.150:9000/user/root/new/source/donut.csv',
+			column_index : '0'
+		}, {
+			id : HAFlow.generateUUID(),
+			name : "Sb",
+			file_path : 'hdfs://133.133.2.150:9000/user/root/new/source/donut.csv',
+			column_index : '1'
+		}];
+	} else if (reportModuleId == "bars" || reportModuleId == "columns"){
+		portletConfigurations = [ {
+			id : HAFlow.generateUUID(),
+			key : 'type',
+			value : (reportModuleId == "bars") ? "Bars" : "Columns",
+			value_type : "string"
+		}, {
+			id : HAFlow.generateUUID(),
+			key : 'gap',
+			value : 5,
+			value_type : "int"
+		} , {
+			id : HAFlow.generateUUID(),
+			key : 'minBarSize',
+			value : 5,
+			value_type : "int"
+		}, {
+			id : HAFlow.generateUUID(),
+			key : 'maxBarSize',
+			value : 5,
+			value_type : "int"
+		}, {
+			id : HAFlow.generateUUID(),
+			key : 'hAxis',
+			value : "hx",
+			value_type : "string"
+		}, {
+			id : HAFlow.generateUUID(),
+			key : 'vAxis',
+			value : "hy",
+			value_type : "string"
+		}];
+		chartSeries = [ {
+			id : HAFlow.generateUUID(),
+			name : "Sa",
+			file_path : 'hdfs://133.133.2.150:9000/user/root/new/source/donut.csv',
+			column_index : '0'
+		}];
+	} else if (reportModuleId == "pie"){
+		portletConfigurations = [ {
+			id : HAFlow.generateUUID(),
+			key : 'type',
+			value : "Pie",
+			value_type : "string"
+		}, {
+			id : HAFlow.generateUUID(),
+			key : 'labels',
+			value : true,
+			value_type : "boolean"
+		} , {
+			id : HAFlow.generateUUID(),
+			key : 'ticks',
+			value : false,
+			value_type : "boolean"
+		} , {
+			id : HAFlow.generateUUID(),
+			key : 'fixed',
+			value : true,
+			value_type : "boolean"
+		} , {
+			id : HAFlow.generateUUID(),
+			key : 'precision',
+			value : 1,
+			value_type : "int"
+		} , {
+			id : HAFlow.generateUUID(),
+			key : 'labelOffset',
+			value : 20,
+			value_type : "int"
+		} , {
+			id : HAFlow.generateUUID(),
+			key : 'labelStyle',
+			value : 'default', //// default/columns/rows/auto
+			value_type : "select"
+		}, {
+			id : HAFlow.generateUUID(),
+			key : 'htmlLabels',
+			value : true,
+			value_type : "boolean"
+		}, {
+			id : HAFlow.generateUUID(),
+			key : 'hAxis',
+			value : "hx",
+			value_type : "string"
+		}, {
+			id : HAFlow.generateUUID(),
+			key : 'vAxis',
+			value : "hy",
+			value_type : "string"
+		}];
+		chartSeries = [ {
+			id : HAFlow.generateUUID(),
+			name : "Sa",
+			file_path : 'hdfs://133.133.2.150:9000/user/root/new/source/donut.csv',
+			column_index : '0'
+		}];
+	}else {
 		alert("unknown report");
 	}
+	var column = 0;
+	var eachColumnWidth = 880/this.reports[reportId].nbZones;
+	for( var i = 0; i < this.reports[reportId].nbZones; i++ ){
+		var left = ui.position.left;
+		if( left >= eachColumnWidth * i && left < eachColumnWidth * (i+1)){
+			column = i;
+			break;
+		}
+	}
+	var currentPortlet = {
+			id: newPortletId, 
+			title: reportModuleId, 
+			type: reportModuleId,
+			reportId: reportId,
+			configurations : portletConfigurations,
+			chartSeries : chartSeries,
+			
+			//for float pane
+			height: 200,//TODO
+			width: 200,//TODO
+			left: 10,
+			top: 10,
+			
+			//for grid pane
+			column: column,
+			zone: -1,
+		};
+	this.reports[reportId].portlets.push(currentPortlet);
+	this.addReport(reportId, currentPortlet);
 	
 };
+
+HAFlow.Main.prototype.addReport = function(reportId, currentPortlet){
+	this.updatePosition(reportId);
+	
+	var reportContainer = dijit.byId("reportContainer_" + reportId);
+	var dummyPortletId = "dummy_portlet_id_" + reportId;
+	if( dijit.byId(dummyPortletId)){
+		reportContainer.removeChild(dijit.byId(dummyPortletId));
+	}
+	if( dijit.byId("portlet_" + currentPortlet.id) != null){
+		reportContainer.removeChild(dijit.byId("portlet_" + currentPortlet.id));
+		dijit.registry.remove("portlet_" + currentPortlet.id);
+	}
+	var portlet = new dojox.widget.Portlet({
+		title : currentPortlet.type,
+		id : "portlet_" + currentPortlet.id,
+		closable: false,
+        dndType: 'Portlet',
+        style: (this.reports[reportId].panelType == "grid" ? '' : "width:" + currentPortlet.width + "px;"),//TODO
+	});
+	
+	if (currentPortlet.type == "text") {
+		for( var i = 0; i < currentPortlet.configurations.length; i++ ){
+			var textConfiguration = currentPortlet.configurations[i];
+			portlet.set(textConfiguration.key, textConfiguration.value);
+		}
+		
+		portlet.startup();
+		this.addPortletToReportContainer(reportId, portlet, currentPortlet, reportContainer);
+	} else {
+		var chartId = currentPortlet.id;
+		var chartDivId = "chart_" + chartId + "_div_id";
+		var legendDivId = "legend_" + chartId + "_div_id";
+		
+		var chartDivSize = {
+			width: 200,
+			height: 200,
+		};
+		this.calculateChartDivSize(reportId, currentPortlet, chartDivSize);
+		
+		
+		portlet.set("content", "<div id=\"" + chartDivId
+				+ "\" style=\"height:" + (chartDivSize.height * 0.9-40) + "px; width:"+ chartDivSize.width*0.9 +"px;\"></div>" 
+				+ "<div id=\"" + legendDivId
+				+ "\" style=\"height:18px; width:"+ chartDivSize.width*0.9+"px;\"></div>");
+		portlet.startup();
+		
+		this.addPortletToReportContainer(reportId, portlet, currentPortlet, reportContainer);//diff
+
+		var chart = new dojox.charting.Chart(chartDivId);
+//		this.addResizeHandler(chart);
+		this.initChart(chart, currentPortlet, legendDivId);//TODO
+	}
+	
+	this.updatePosition(reportId);
+
+	dojo.connect(portlet, "onClick", function(event){
+		var portletId = event.currentTarget.id;
+		portletId = portletId.replace("portlet_", "");
+		_currentInstance.onReportPortletClicked(portletId, chart, portlet);
+	});
+	
+//	dojo.on(portlet._resizeHandle, "resize", function(e) {
+//		_currentInstance.addToConsole("resize of portlet", false);
+//	});
+//	
+};
+
+HAFlow.Main.prototype.addPortletToReportContainer = function(reportId, portlet, currentPortlet, reportContainer){
+	//TODO
+	// different panel type.
+	//column zone vs left top
+	var panelType = this.reports[reportId].panelType;
+	if( panelType == "grid"){
+		if( currentPortlet.zone >= 0 ){
+			reportContainer.addChild(portlet, currentPortlet.column, currentPortlet.zone);//
+		}else{
+			reportContainer.addChild(portlet, currentPortlet.column);//
+		}
+	}else if( panelType == "float"){
+//		portlet.resize()
+		reportContainer.addChild(portlet);
+		
+		var portletId = "portlet_" + currentPortlet.id;
+		var dnd = new dojo.dnd.Moveable(dojo.byId(portletId));//dnd
+		var handle = new dojox.layout.ResizeHandle({
+			targetId : portletId,
+		}).placeAt(portletId);
+		handle.startup();		
+		dojo.subscribe("/dojo/resize/stop", function(inst) {
+			var newHeight = inst.targetDomNode.offsetHeight;
+			var newWidth = inst.targetDomNode.offsetWidth;
+//			chart.resize(newWidth * 0.9, newHeight * 0.9 - 10);
+			_currentInstance.addToConsole("123456~~" + inst.targetDomNode.id, false);
+			var chartId = inst.targetDomNode.id.replace("portlet_", "");
+			var chart = _currentInstance.chartMap[chartId];
+			
+			currentPortlet.width = newWidth;
+			currentPortlet.height = newHeight;
+			
+			chart.resize(newWidth * 0.9, newHeight * 0.9 - 40);
+			_currentInstance.addToConsole("newWidth:" + newWidth
+					+ " newHeight:" + newHeight, false);// the original size
+		});
+	}
+};
+
+//diff 
+HAFlow.Main.prototype.calculateChartDivSize = function(reportId, currentPortlet, chartDivSize){
+	var panelType = this.reports[reportId].panelType;
+	var chartDivWidth = 200;
+	var chartDivHeight = 200;
+	if( panelType == "float"){
+		if( currentPortlet.width > 0){
+			chartDivWidth = currentPortlet.width;
+		}		
+		if( currentPortlet.height > 0){
+			chartDivHeight = currentPortlet.height;
+		}
+	}else if( panelType == "grid"){
+		chartDivWidth = 880/this.reports[reportId].nbZones - 40;
+	}
+	
+	chartDivSize.width = chartDivWidth;
+	chartDivSize.height = chartDivHeight;
+};
+
+//common
+HAFlow.Main.prototype.initChart = function(chart, currentPortlet, legendDivId){
+	this.chartMap[currentPortlet.id] = chart;
+	//var configurations
+	chart["title"] = currentPortlet.title;
+	chart.titlePos = "bottom";
+	chart.titleGap = 25;
+	chart.titleFont = "normal normal normal 15pt Arial";
+	chart.titleFontColor = "black";
+
+	// stable configurations
+	chart.addAxis("hx", {
+		fixLower : "major",
+		fixUpper : "major",
+//		title : 'hx'
+	}).addAxis("hy", {
+		vertical : true,
+		fixLower : "major",
+		fixUpper : "major",
+		min : 0,
+//		title : 'hy'
+	});
+	chart.setTheme(dojox.charting.themes.Julie);
+
+	var obj = {};
+	for( var i = 0; i < currentPortlet.configurations.length; i++ ){
+		var configuration = currentPortlet.configurations[i];
+		var realValue = configuration.value;
+		if( configuration.value_type == "boolean"){
+			if( realValue == "true" || realValue == "on" || realValue == "1" || realValue == true)
+				realValue = true;
+			else 
+				realValue = false;
+		}else if(configuration.value_type == "int"){
+			realValue = parseInt(realValue);
+		}
+		obj[configuration.key] = realValue;
+	}
+	chart.addPlot("default", obj);//TODO
+	var legend;
+
+	$.ajax({
+		url : "http://localhost:8080/haflow/report/getchartseries",
+		type : "POST",
+		dataType : "json",
+		data : JSON.stringify(currentPortlet.chartSeries),
+		contentType : "application/json",
+		success : function(model, status) {
+			var ccmList = model.series;
+			for ( var i = 0; i < ccmList.length; i++) {
+				var ccm = ccmList[i];
+//				_currentInstance.addToConsole(ccm.columnname + ": " + ccm.data, false);
+				var series_data = new Array();
+				for( var j = 0; j < ccm.data.length; j++ ){
+					series_data.push({x:Math.floor((Math.random()*10)+1), y:ccm.data[j], text: 'a', tooltip: 'b'});
+				}
+				chart.addSeries(ccm.columnname, series_data);
+			}
+			chart.render();
+			if( dijit.byId(legendDivId) != null){
+				dijit.registry.remove(legendDivId);
+			}
+
+			legend = new dojox.charting.widget.Legend({chart: chart}, legendDivId);
+			legend.refresh();
+		},
+		error : function(error) {
+			_currentInstance.addToConsole(
+					"An error occurred while loading csv column data: "
+							+ error, true);
+		},
+	});
+	chart.render();
+};
+
+HAFlow.Main.prototype.updatePosition = function(reportId){
+	var reportContainer = dijit.byId("reportContainer_" + reportId);
+	if( reportContainer == null) return;
+	var children = reportContainer.getChildren();
+	var currentZone = -1;
+	var currentColumn = 0;
+	//update column
+	for( var x = 0; x < children.length; x++ ){
+		var child = children[x];
+		var childId = child.id;
+		childId = childId.replace("portlet_", "");
+		
+		if( child.column != currentColumn){
+			currentColumn = child.column;
+			currentZone = 0;
+		}else{
+			currentZone++;
+		}
+		
+		var portlets = this.reports[reportId].portlets;
+		for( var y = 0; y < portlets.length; y++ ){
+			var tmp_portlet = portlets[y];
+			if( tmp_portlet.id == childId){
+				tmp_portlet.column = child.column;
+				tmp_portlet.zone = currentZone;
+				break;
+			}
+		}
+	}
+};
--- a/src/main/webapp/script/haflow.report_float.js
+++ b/src/main/webapp/script/haflow.report_float.js
@ -0,0 +1,148 @@
+dojo.require("dojox.widget.Portlet");
+dojo.require("dojox.charting.Chart");
+dojo.require("dojox.charting.plot2d.StackedAreas");
+dojo.require("dojox.charting.themes.Wetland");
+dojo.require("dojox.charting.themes.Julie");
+dojo.require("dojox.charting.themes.Claro");
+dojo.require("dojox.charting.axis2d.Default");
+dojo.require("dojox.charting.plot2d.Columns");
+dojo.require("dojo.fx.easing");
+dojo.require("dojox.fx.scroll");
+dojo.require("dijit.registry");
+dojo.require("dojo.window");
+dojo.require("dojox.charting.plot2d.Lines");
+dojo.require("dojox.charting.plot2d.Markers");
+dojo.require("dojox.charting.plot2d.Stacked");
+dojo.require("dojox.charting.plot2d.Bars");
+dojo.require("dojox.charting.plot2d.Columns");
+dojo.require("dojox.charting.plot2d.Pie");
+dojo.require("dojox.charting.plot2d.ClusteredBars"); 
+dojo.require("dojox.charting.axis2d.Default");
+dojo.require("dojox/charting/action2d/Tooltip");	
+dojo.require("dojox.layout.GridContainer");
+dojo.require("dojox.charting.widget.Legend");
+dojo.require("dojo.topic");
+dojo.require("dojo.dnd.Source");
+dojo.require("dojo.dnd.Mover");
+dojo.require("dojox.layout.FloatingPane");
+dojo.require("dojo.dnd.Source");
+dojo.require("dojo.dnd.Moveable");
+dojo.require("dojo.dom");
+dojo.require("dojo.on");
+dojo.require("dojox.layout.ResizeHandle");
+//dojo.require("dojo.resize.stop");
+
+HAFlow.Main.prototype.newFloatReport5 = function(parentId) {
+	var _currentInstance = this;
+	var reportId = HAFlow.generateUUID();
+	var contentPane = dijit.byId("reportFloatContainerPane_" + reportId);//mush be dijit.byId
+	if( contentPane == null){  
+		
+		var reportFloatContainerInnerPaneId = "reportFloatContainerInnerPane_"+ reportId;
+		
+		
+		contentPane = new dijit.layout.ContentPane({//stable
+			id : "reportFloatContainerPane_" + reportId,
+			title : "test",
+			content : "<div class='reportcontainerdiv'>" + "<div id='tttt' style='width:400px; height:700px;background-color: red;'></div>" + "</div>",
+//			content : "<div  class='reportfloatcontainerdiv' style='width: 900px;height: 978px;'>" + //width: 900px;height: 978px;
+//						"<div id='"+ reportFloatContainerDivId + "'></div>" +
+//								"</div>",
+			closable : true,
+		});
+		contentPane.startup();
+		this.ui.centerContainer.addChild(contentPane);
+		
+		var innerContentPane = new dijit.layout.ContentPane({
+			id: reportFloatContainerInnerPaneId,
+			style: 'width:100%; height:100%; background-color: blue;',
+		}, "tttt");
+
+		//start test portlet
+		var dummyPortletId = "dummy_portlet_id_" + reportId;
+	    var portlet1 = dojox.widget.Portlet({
+	    	id: dummyPortletId,
+	        closable: false,
+	        dndType: 'Portlet',
+	        title: 'Sample portlet',
+	        content: "<div id='chartchart'></div>",//dummyPortlet,
+	        style: 'width:200px;',//height is auto fit
+	    });
+		var handle = new dojox.layout.ResizeHandle({
+			id: "ddddd",
+			targetId : dummyPortletId
+		}).placeAt(dummyPortletId);
+//		dojo.place("ddddd", dummyPortletId);
+		handle.startup();		
+	    portlet1.startup();
+	    innerContentPane.addChild(portlet1);
+	    var dnd = new dojo.dnd.Moveable(dojo.byId(dummyPortletId));//dnd
+	    
+	    var dummyPortletId2 = "dummy_portlet_id2_" + reportId;
+	    var portlet2 = dojox.widget.Portlet({
+	    	id: dummyPortletId2,
+	        closable: false,
+	        dndType: 'Portlet',
+	        title: 'Sample portlet',
+	        content: "<div id='chartchart2' style='width:180px; height:140px; background-color: red;'>abc</div>",//dummyPortlet,
+	        style: 'width:200px;',
+	    });	    
+	    portlet2.startup();
+		 innerContentPane.addChild(portlet2);
+	    
+	    var handleDiv = document.createElement('div');
+//		dojo.byId(dummyPortletId2).appendChild(handleDiv);
+	    var handle2 = new dojox.layout.ResizeHandle({
+			targetId : dummyPortletId2,
+			activeResize: true,
+//			style: "bottom:4px; right:4px;",
+		}).placeAt('chartchart2',"after"); //, handleDiv
+		handle2.startup();
+//		handle2.buildRendering();
+		//portlet2.addChild(handle2);
+		 
+	    
+	    var dnd2 = new dojo.dnd.Moveable(dojo.byId(dummyPortletId2));//dnd
+//	    dojo.connect(dnd2, "onMoveStop", function(e){ });
+
+		var chart = new dojox.charting.Chart("chartchart").
+		addAxis("y", {fixLower: "minor", fixUpper: "minor", natural: true}).
+		addAxis("x", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}).
+		addPlot("default", {type: "ClusteredBars", gap: 5}).
+		addSeries("Series A", [0.53, 0.51]).
+		addSeries("Series B", [0.84, 0.79]).
+		addSeries("Series C", [0.68, 0.95]).
+		addSeries("Series D", [0.77, 0.66]);
+		chart.render();
+		chart.resize(180, 140);
+
+		dojo.subscribe("/dojo/resize/stop", function(inst) {
+			// inst.targetDomNode is the node resized.
+			// sometimes there will be a inst.targetWidget. inst is the
+			// ResizeHandle instance.
+			// var pp = portlet1;
+			_currentInstance.addToConsole("portlet2.domNode.offsetWidth:"
+					+ portlet1.domNode.offsetWidth
+					+ " portlet2.domNode.offsetHeight:"
+					+ portlet1.domNode.offsetHeight, false); // the new size
+			_currentInstance.addToConsole("inst.targetDomNode.offsetWidth:"
+					+ inst.targetDomNode.offsetWidth
+					+ " inst.targetDomNode.offsetHeight:"
+					+ inst.targetDomNode.offsetHeight, false);// the new size
+//			_currentInstance.addToConsole("portlet2.size.w:" + portlet1._size.w
+//					+ " portlet2.size.h:" + portlet1._size.h, false);// the original size
+			_currentInstance.addToConsole("inst.startSize.w:"
+					+ inst.startSize.w + " inst.startSize.h:"
+					+ inst.startSize.h, false);// the original size
+			var newHeight = inst.targetDomNode.offsetHeight;
+			var newWidth = inst.targetDomNode.offsetWidth;
+			// portlet2.resize({w:newWidth, h:newHeight});// not work
+			chart.resize(newWidth * 0.9, newHeight * 0.9 - 10);
+			_currentInstance.addToConsole("newWidth:" + newWidth
+					+ " newHeight:" + newHeight, false);// the original size
+		});
+	}else{
+//		this.ui.centerContainer.selectChild(contentPane);	//todo
+	}
+	this.ui.centerContainer.selectChild(contentPane);	//todo
+};
--- a/src/main/webapp/script/haflow.report_list.js
+++ b/src/main/webapp/script/haflow.report_list.js
@ -56,8 +56,11 @@ HAFlow.Main.prototype.fillReportsData = function(data) {
    	this.reports[reportItemId].id = reportItemId;
    	this.reports[reportItemId].name = reportItem.name;
    	this.reports[reportItemId].isdirectory = reportItem.isdirectory;
+    	this.reports[reportItemId].nbZones = reportItem.nbZones;
+    	this.reports[reportItemId].panelType = reportItem.panelType;//TODO
    	this.reports[reportItemId].parentid = reportItem.parentid;
    	this.reports[reportItemId].portlets = new Array();
+    	
    	var portlets = reportItem.portlets;
    	for( var j = 0; j < portlets.length; j++){
    		var currentPortlet = {
@ -67,13 +70,27 @@ HAFlow.Main.prototype.fillReportsData = function(data) {
    				position: portlets[j].position,
    				
    				reportId: portlets[j].reportId, 
-    				configurations:[]
+    				configurations:[],
+    				chartSeries:[],
+    				column: portlets[j].column,
+    				zone: portlets[j].zone,
+    				width: portlets[j].width,
+    				height: portlets[j].height,
+    				left: portlets[j].left,
+    				right: portlets[j].right,
    			};
    		var configurations = portlets[j].configurations;
    		for( var x = 0; x < configurations.length; x++){
    			var configuration = configurations[x];
    			currentPortlet.configurations.push(configuration);
    		}
+    		var chartSeries = portlets[j].chartSeries;
+    		if(chartSeries != null){
+	    		for( var x = 0; x < chartSeries.length; x++){
+	    			var chartSerie = chartSeries[x];
+	    			currentPortlet.chartSeries.push(chartSerie);
+	    		}
+    		}
    		this.reports[reportItemId].portlets.push(currentPortlet);
    	}
    }
@ -135,6 +152,10 @@ HAFlow.Main.prototype.initReportListTree = function() {
        id: "newReportMenuItem",
        label: myfile.newReport
    });
+    this.menu.reportTreeMenu.newFloatReportMenuItem = new dijit.MenuItem({
+        id: "newFloatReportMenuItem",
+        label: myfile.newReport
+    });
    this.menu.reportTreeMenu.newReportDirectoryMenuItem = new dijit.MenuItem({
        id: "newReportDirectoryMenuItem",
        label: myfile.newReportDirectory
@ -153,6 +174,7 @@ HAFlow.Main.prototype.initReportListTree = function() {
    });

    this.menu.reportTreeMenu.addChild(this.menu.reportTreeMenu.newReportMenuItem);
+    this.menu.reportTreeMenu.addChild(this.menu.reportTreeMenu.newFloatReportMenuItem);
    this.menu.reportTreeMenu.addChild(this.menu.reportTreeMenu.newReportDirectoryMenuItem);
    this.menu.reportTreeMenu.addChild(this.menu.reportTreeMenu.deleteReportMenuItem);
    this.menu.reportTreeMenu.addChild(this.menu.reportTreeMenu.renameReportMenuItem);
@ -166,6 +188,14 @@ HAFlow.Main.prototype.initReportListTree = function() {
 	       _currentInstance.newReport(tn.item.id);
    	}
    });
+    dojo.connect(this.menu.reportTreeMenu.newFloatReportMenuItem, "onClick",
+    	    function() {
+        	var tn = dijit.byNode(this.getParent().currentTarget);
+        	var checkResult = _currentInstance.checkReportItem(tn.item.isdirectory, true);
+        	if( checkResult ){    		
+    	       _currentInstance.newFloatReport(tn.item.id);
+        	}
+        });
    dojo.connect(this.menu.reportTreeMenu.newReportDirectoryMenuItem, "onClick",
 	    function() {
    	var tn = dijit.byNode(this.getParent().currentTarget);
--- a/src/main/webapp/style/haflow.report.css
+++ b/src/main/webapp/style/haflow.report.css
@ -21,6 +21,37 @@

 .reportcontainer {
 	position: relative;
-	width: 2000px;
-	height: 1500px;
+/* 	width: 900px; */
+/* 	height: 978px; */
+	background-color: #ECF5FF;
+}
+
+.reportcontainerdiv {
+	position: relative;
+	width: 900px;
+	height: 978px;
+	background-color: #FFF4C1;
+}
+
+ .gridContainerTable{
+	width: 880px;	
+	height:100%;
+	margin:5px 5px 25px 5px;
+} 
+
+.gridContainerTable tbody, .gridContainerTable tr{
+
+}
+
+.gridContainerTable th, .gridContainerTable td{
+	border: 1px dashed #BEBEBE;
+	vertical-align:top;
+	padding: 3px 3px 3px 3px;
+	margin: 3px 3px 3px 3px;
+}
+
+.testFixedSize {
+	width: 300px;
+	height: 200px;
+	padding: 7px;
 }