DistributionBar
Widget to be used to present distribution of values with a single bar
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
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Improve behaviour with Valo based themes. Uses now SCSS style theming. Min width of parts is overridden if is too small compared to width of component.
- Released
- 2015-07-04
- Maturity
- STABLE
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 7.4+
- Vaadin 6.7+ in 0.3.2
- Vaadin 7.0+ in 1.0.0.alpha1
- Vaadin 7.1+ in 1.0.0
- Vaadin 8.0+ in 3.0.0
- Browser
- Internet Explorer
- Internet Explorer
- Internet Explorer
- Firefox
- Opera
- Safari
- Google Chrome
- Internet Explorer
- iOS Browser
- Android Browser
- Internet Explorer
- Internet Explorer
- Windows Phone
DistributionBar - Vaadin Add-on Directory
Widget to be used to present distribution of values with a single barSource Code
Issue Tracker
Author Homepage
DistributionBar version 0.3.2
= 0.3.2 changes ===
- Renamed add on from "VaadinDistirbutionBar" to "DistributionBar". As this is NOT official Vaadin add on.
= 0.3.1 changes ===
- IE8 issues of 0.3.0 fixed
= 0.3.0 changes ===
- Now with XHTML tooltips. See online demo.
= 0.2.0 changes ===
- CSS naming changed (update your CSS references)
- Split implementation to allow user agent specific implementations
- Widget is now disabled in IE6 and IE7 (allowed by split implementation)
- Opera transitions added
- Small CSS fixes/cleanups
DistributionBar version 0.3.3
= 0.3.3 changes ===
- IE6 and IE7 now works. It might not look perfect, but I hope this is enough,
- Serialization errors fixed
= 0.3.2 changes ===
- Renamed add on from "VaadinDistirbutionBar" to "DistributionBar". As this is NOT official Vaadin add on.
= 0.3.1 changes ===
- IE8 issues of 0.3.0 fixed
= 0.3.0 changes ===
- Now with XHTML tooltips. See online demo.
= 0.2.0 changes ===
- CSS naming changed (update your CSS references)
- Split implementation to allow user agent specific implementations
- Widget is now disabled in IE6 and IE7 (allowed by split implementation)
- Opera transitions added
- Small CSS fixes/cleanups
DistributionBar version 1.0.0.alpha1
First version for Vaadin 7
DistributionBar version 1.0.0.beta1
Click listener interface added.
DistributionBar version 1.0.0.beta2
Removes misplaced code 1.0.0 beta1 (and bug it caused).
DistributionBar version 1.0.0
API that allows to define style names for parts of distribution bar
DistributionBar version 1.0.1
Fixing sizing issues when used insize horizontal layouts (width defined by other components)
DistributionBar version 1.1.0
Adds option to totally hide parts with zero values (when other parts have some values)
DistributionBar version 1.2.0
Improve behaviour with Valo based themes. Uses now SCSS style theming.
Min width of parts is overridden if is too small compared to width of component.
DistributionBar version 2.0.0
- Version jumped to 2.x as some API changes
- OSGi bundled
- Click listener interface improved (API change)
- Uses now doubles as item sizes (API change)
- Add method to read current size of items
- Number presentation inside bar element can be now replaced with custom String
DistributionBar version 3.0.0
3.0.0 adds Vaadin 8 support, Vaadin 7 users use 2.0.0
DistributionBar version 3.0.1
Removed wrong import from client side code