Vaadin gantt diagram

Gantt diagram for Vaadin

View larger

Close

Vaadin flexible gantt diagram:

• Tasks treetable
• Customizable table
• Column formatter
• Customizable task representation
• Completion percent
• Tasks dependencies
• Customizable scale (year, month, day, hour)
• Milestones at diagram
• Tasks filtering

• You also should add link to repository and dependencies to project's pom.xml

  bazon.public http://developer.bazon.ru/maven/bazon.public/ true true

    <dependency>
        <groupId>org.vaadin.addons</groupId>
        <artifactId>gwt-graphics</artifactId>
        <version>1.0.0</version>
    </dependency>
    <dependency>
        <groupId>org.vaadin.addons</groupId>
        <artifactId>contextmenu</artifactId>
        <version>3.1.0</version>
    </dependency>
  
    <dependency>
        <groupId>joda-time</groupId>
        <artifactId>joda-time</artifactId>
        <version>2.0</version>
    </dependency>
  
    <dependency>
        <groupId>ru.bazon</groupId>
        <artifactId>pstring</artifactId>
        <version>0.0.1.0</version>
    </dependency>
  

• This version doesn' t use vaadin Container interface. It uses GanttDiagramModel instead. At first you should describe model and then call diagram setModel() method.

Sample code

package ru.bazon.vaadin.ganttdiagram.demo;

import java.text.DecimalFormat;

@SuppressWarnings("serial")
public class GanttDiagramDemoApplication extends Application
{

	public static DateTimeFormatter dateTimeFormat = DateTimeFormat.forPattern("dd.MM.yyyy HH:mm:ss");
	public static DateTimeFormatter dateFormat = DateTimeFormat.forPattern("dd.MM.yyyy");
	
	@Override
	public void init()
	{
		setTheme("vaadin-gantttheme");
		
		Window mainWindow = new Window("????????? ?????");
		mainWindow.setSizeFull();
		
		GanttDiagramModel gdata = new GanttDiagramModel();
		
		gdata.setGanttColumnVisible(GANTTCOLUMN.STARTTIME, "????? ??????", null, null);
		gdata.setGanttColumnVisible(GANTTCOLUMN.ENDTIME, "????? ?????????", null, null);		
		gdata.setGanttColumnVisible(GANTTCOLUMN.DURATION, "?????????????????", null, null);
		gdata.setGanttColumnVisible(GANTTCOLUMN.COMPLETE, "?????????", null, null);
		
		gdata.setTaskTooltipTemplate("<b>Name :</b> ${name}<br><b>Start time:</b> ${startTime}<br><b>End time:</b> ${endTime}");
		gdata.addParametersDescription(new GanttTaskParameterDescription("name", String.class, "", "????????????"));
		gdata.addParametersDescription(new GanttTaskParameterDescription("additionalParam", Double.class, "", true));
		gdata.addParametersDescription(new GanttTaskParameterDescription("stringParam", String.class, "", "??????"));
		
		gdata.setColumnFormatter(GANTTCOLUMN.COMPLETE.getId(), new GanttColumnFormatter<Double>()
		{
			@Override
			public String formatValue(String columnName, Double value)
			{			
				DecimalFormat df = new DecimalFormat("###");
				return df.format(value);
			}
		});
		
		gdata.setColumnFieldEditor("stringParam", new ComboBoxGanttFieldEditor(Arrays.asList(new String[] { "???", "???", "?????????", "?? ??" })));
		
		gdata.addGanttGeneratedColumn(new GanttTaskGeneratedColumnDescription(
			"generatedColumn", 
			new GanttGeneratedColumn()
			{
				@Override
				public Object generateCell(GanttTreeTable source, GanttTask task, String columnId)
				{
					return task.getCompleteState() - 12;
				}
			}, 
			"??????????????? ???????"));
		
		gdata.addGanttGeneratedColumn(new GanttTaskGeneratedColumnDescription(
				"overflow", 
				new GanttGeneratedColumn()
				{
					@Override
					public Object generateCell(GanttTreeTable treeTable, GanttTask task, String columnId)
					{
						DateTime now = new DateTime();
						String value;
						if (now.isAfter(task.getEndTime()))
						{
							value = String.valueOf(GJodaUtils.unitBetween(task.getEndTime(), now, treeTable.getDiagram().getScale().getGanttDiagramPeriod()));
						}
						else
						{
							value = "-";
						}
						
						return new Label(value);
					}
				}, 
				"??????????"));

		gdata.setColumnsOrder(Arrays.asList(new Object[] {"name", "overflow", "generatedColumn", GANTTCOLUMN.COMPLETE, GANTTCOLUMN.STARTTIME, GANTTCOLUMN.ENDTIME, "stringParam" }));

		GanttTask task2 = new GanttTask(dateFormat.parseDateTime("10.07.2011"), dateFormat.parseDateTime("20.12.2011"), 4);		
		task2.addParameter("name", "task with very long name. long name long name long name long name");
		task2.setAutoCalculation(false);

		GanttTask task3 = new GanttTask(dateFormat.parseDateTime("10.07.2011"), dateFormat.parseDateTime("25.12.2011"), 60, task2);		
		task3.addParameter("name", "?????? ? ?????");		
		task3.addParameter("stringParam", "?????????");
		task3.addControlPoint(new GanttTaskControlPoint(
				dateTimeFormat.parseDateTime("12.10.2011 8:00:00"),
				"???? ???????: \"${value, 'dd.MM.yyyy'}\""));

		gdata.addTask(task2);

		addWeekTasks(gdata);
		addMonthTasks(gdata);

		GanttDiagram diagram = new GanttDiagram(gdata);
		
		diagram.setGanttDiagramCellStyleGenerator(new GanttDiagramDemoCellStyleGenerator());
		
		diagram.addAvailableScale(GANTTDIAGRAMSCALE.DAY, "???? ??????");
		diagram.addAvailableScale(GANTTDIAGRAMSCALE.DAY_MONTH, "???? ??????");
		diagram.addAvailableScale(GANTTDIAGRAMSCALE.WEEK, "??????");
		diagram.addAvailableScale(GANTTDIAGRAMSCALE.MONTH, "?????");
		diagram.addAvailableScale(GANTTDIAGRAMSCALE.YEAR, "???");
		
		//diagram.setFilterColumn("name");
		
		diagram.setTaskEditWindowCaption("?????????????? ??????");
		diagram.setTaskEditSaveChangeButtonCaption("?????????");
		
		diagram.setWidth("100%");
		diagram.setHeight("100%");
		
		diagram.setScale(GANTTDIAGRAMSCALE.MONTH);
		
		VerticalLayout vt = new VerticalLayout(); 
		vt.addComponent(diagram);        
                vt.addComponent(new Label("test"));
        
                vt.setHeight("100%");
                vt.setExpandRatio(diagram, 10000);
        
                mainWindow.setContent(vt);
        
                setMainWindow(mainWindow);
		setTheme("vaadin-gantttheme");
	}
	
	private void addWeekTasks(GanttDiagramModel gdata)
	{
		GanttTask parentTask = new GanttTask();
		parentTask.addParameter("name", "???????????? ??????");

		GanttTask task1 = new GanttTask(parentTask);
		task1.addParameter("name", "??????1");
		task1.addParameter("additionalParam", 40d);

		GanttTask task11 = new GanttTask(dateTimeFormat.parseDateTime("24.01.2011 8:01:33"), dateTimeFormat.parseDateTime("31.1.2011 20:01:33"), 40, task1);
		task11.addParameter("name", "??????11");
		
		GanttTask task2 = new GanttTask(dateFormat.parseDateTime("10.10.2011"), dateFormat.parseDateTime("23.10.2011"), 30, parentTask);
		task2.addParameter("name", "??????2");
		task2.addParameter("additionalParam", 20d);

		GanttTask task21 = new GanttTask(dateFormat.parseDateTime("13.10.2011"), dateFormat.parseDateTime("16.10.2011"), 100, parentTask);		
		task21.addParameter("name", "??????22");

		GanttTask task3 = new GanttTask(parentTask);		
		task3.addParameter("name", "??????3");

		GanttTask task4 = new GanttTask(parentTask);		
		task4.addParameter("name", "??????4");

		gdata.addTask(parentTask);
		
		gdata.addDependency(GanttDependencyType.END_BEGIN, task11, task2);
	}

	private void addMonthTasks(GanttDiagramModel gdata)
	{
		GanttTask parentTask = new GanttTask();
		parentTask.addParameter("name", "ParentTask");

		GanttTask task1 = new GanttTask(parentTask);
		task1.addParameter("name", "task1");
		task1.addParameter("additionalParam", 40d);


		GanttTask task11 = new GanttTask(dateTimeFormat.parseDateTime("01.09.2011 8:01:33"), dateTimeFormat.parseDateTime("01.09.2011 20:01:33"), 40, task1);
		task11.addParameter("name", "task11");
		
		GanttTask task12 = new GanttTask(dateFormat.parseDateTime("15.8.2011"), dateFormat.parseDateTime("15.9.2011"), 30, task1);
		task12.addParameter("name", "task12");
		task12.addParameter("additionalParam", 15d);

		GanttTask task2 = new GanttTask(dateFormat.parseDateTime("10.07.2011"), dateFormat.parseDateTime("20.12.2011"), 100, parentTask);		
		task2.addParameter("name", "task2");
		
		gdata.addTask(parentTask);
		
		gdata.addDependency(GanttDependencyType.END_BEGIN, task11, task2);
	}
	
}


public class GanttDiagramDemoCellStyleGenerator extends GanttDiagramCellStyleGeneratorAdapter 
{

	@Override
	public String getRowStyle(GanttDiagram diagram, GanttTask task)
	{
		if (task.getParameter("name").equals("???????"))
		{
			return "color-green";
		}
		else if (task.getParameter("name").equals("task12"))
		{
			return "background-pink";
		}
		
		return super.getRowStyle(diagram, task);
	}
	
	@Override
	public String getCellStyle(GanttDiagram diagram, GanttTask task, GANTTCOLUMN column)
	{
		if (column == GANTTCOLUMN.COMPLETE)
		{
			return "background-red v-table-cell-content-font-bold";
		}
		
		return super.getCellStyle(diagram, task, column);
	}

	@Override
	public String getCellStyle(GanttDiagram diagram, GanttTask task, String column)
	{
		if (column.equals("overflow") && task.getCompleteState() == 100)
		{
			return "font-bold";
		}

		return super.getCellStyle(diagram, task, column);
	}

}

Links

• Online Demo

Compatibility