DistributionBar

Widget to be used to present distribution of values with a single bar

View larger

Close

View larger

Close

Note: I had to rename this add on from "VaadinDistributionBar" to "DistributionBar" to follow the Vaadin naming guidelines (this is NOT official Vaadin add on). Technically 0.3.2 is identical to old VaadinDistributionBar 0.3.1. My mistake, sorry.

Distribution bar is simple UI component that can be used to present distribution between different groups (e.g. distribution of votes). Please check screenshot and online demo.

Transitions are done with CSS3 and tested with Firefox, Webkit and Opera browsers. IE 8 and 9 are also supported, but transitions are simple not shown with these browsers (lacking CSS support). Transitions and look is done totally with CSS so you can easily modify the look of distribution bar.

Sample code

// This is simplified example version. It will generate distribution bar that
// will present the split of senate seats between two parties. CSS is used to
// select suitable colors and to add hover effect when tooltip is shown.
// Tooltip is used to tell what selected part of distribution bar is actually
// presenting.
//
// Please check the source repository for the whole source code of the
// the online demo.

// -----------------------------------------------------------------------------
// Java file
// -----------------------------------------------------------------------------

DistributionBar barOne = new DistributionBar(1);
barOne.setCaption("Senate:");
barOne.setWidth("100%");
barOne.addStyleName("my-bar-one");
layout.addComponent(barOne);
layout.setComponentAlignment(barOne, Alignment.MIDDLE_CENTER);

//...
// Updating the values (vote results) with random numbers
//...

Random random = new Random();
int seats = 100;
int groupA = random.nextInt(seats);
barOne.setPartSize(0, groupA);
barOne.setPartTooltip(0, "<b>Republican Party: " + groupA + " seats</b><br/>"
    + "More information can be also shown here!");
barOne.setPartSize(1, seats - groupA);
barOne.setPartTooltip(1, "<b>Democratic Party: " + (seats - groupA)
    + " seats</b><br/>More information can be also shown here!");

// -----------------------------------------------------------------------------
// CSS file
// -----------------------------------------------------------------------------

.my-bar-one {
	max-width: 800px;
}

.my-bar-one .alump-dbar-part-1 {
	background-image: none;
    background-color: rgb(50%,0%,0%);
	color: white;
	text-shadow: 1px 1px 1px #000000, -0.5px -0.5px 0.5px #000000;
}

.my-bar-one .alump-dbar-part-1:hover {
	background-color: rgb(75%,0%,0%);
	font-weight: bold;
}

.my-bar-one .alump-dbar-part-2 {
    background-image: none;
    background-color: rgb(0%,0%,50%);
    color: white;
    text-shadow: 1px 1px 1px #000000, -0.5px -0.5px 0.5px #000000;
}

.my-bar-one .alump-dbar-part-2:hover {
    background-color: rgb(0%,0%,75%);
    font-weight: bold;
}

Links

• Online Demo
• Source Code
• Issue Tracker
• Author Homepage

Compatibility