mpilone/timeline-vaadin

A Vaadin component for the vis.js Timeline visualization component.

Download

Step 1. Add the JitPack repository to your build file

Add it in your root settings.gradle at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

Add it in your settings.gradle.kts at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url = uri("https://jitpack.io") }
		}
	}

Add to pom.xml

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add it in your build.sbt at the end of resolvers:

 
    resolvers += "jitpack" at "https://jitpack.io"

Add it in your project.clj at the end of repositories:

 
    :repositories [["jitpack" "https://jitpack.io"]]

Step 2. Add the dependency

	dependencies {
		implementation 'com.github.mpilone:timeline-vaadin:v2.5.0'
	}
	dependencies {
		implementation("com.github.mpilone:timeline-vaadin:v2.5.0")
	}
	<dependency>
	    <groupId>com.github.mpilone</groupId>
	    <artifactId>timeline-vaadin</artifactId>
	    <version>v2.5.0</version>
	</dependency>

                            
    libraryDependencies += "com.github.mpilone" % "timeline-vaadin" % "v2.5.0"
        
        

                            
    :dependencies [[com.github.mpilone/timeline-vaadin "v2.5.0"]]

Readme

Timeline for Vaadin

A Vaadin component for the vis.js Timeline visualization component.

The timeline is easy to use and follows similar patterns to Vaadin's Calendar component.

// Create item groups (if using groups).
List<TimelineGroup> groups = new ArrayList<>();
// ...

// Create the item provider. A basic item provider can be used with a 
// static list of items or a more advanced provider could be implemented for 
// direct DB access of timeline events.
BasicItemProvider provider = new BasicItemProvider();

// Create the timeline.
Timeline t = new Timeline();
t.getOptions().setOrientation(TimelineOptions.TimeAxisOrientation.TOP);
t.getOptions().setType(TimelineOptions.ItemType.RANGEOVERFLOW);
t.setItemProvider(provider);
t.setGroups(groups);

// Add it to the UI.
layout.addComponent(t);

Demo

The demo can be executed with the following commands:

  • git clone repo_url
  • cd timeline-vaadin
  • mvn clean install
  • mvn -pl :timeline-vaadin-demo jetty:run

You can then view the demo by going to http://localhost:8090/timeline-vaadin-demo/app/.

Demo Screenshot

Demo Screenshot

Not Implemented Yet

  • Events on item move, update, add, remove