JSFiddle - React, Tailwind, and code Playground

by _kdts

HTML

<div class="gewinner-verlierer"></div>

CSS

.winner-loser-bar-groups{
	
}
.winner-loser-bar-groups .wl-title{
	font-weight: bold;
}
.winner-loser-bar-groups .wl-group{
	margin-bottom: 15px;
}
.winner-loser-bar-groups .wl-group:last-child{
	margin-bottom: 0;
}
.winner-loser-bar-groups .wl-group > div{
	width: 100%;
	height: 30px;
	line-height: 30px;
	padding-top: 3px;
	padding-bottom: 3px;
	/*margin-bottom: 0px;
	margin-top: 2px;*/
	border-bottom: 1px solid #ddd;
	
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.winner-loser-bar-groups .wl-group > div:last-child{
	border-bottom: 0;
}

.winner-loser-bar-groups .wl-group .wl-winner,
.winner-loser-bar-groups .wl-group .wl-loser{
	
}

.winner-loser-bar-groups .wl-group .wl-title-wrapper{
	width: 20%;
	display: inline-block;
	float: left;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
    text-overflow: ellipsis;
}

.winner-loser-bar-groups .wl-group .wl-bar-wrapper{
	width: 80%;
	display: inline-block;
	float: left;
	position: relative;
	margin: 0;
}

.winner-loser-bar-groups .wl-group .wl-bar-wrapper .wl-content{
  color: #fff;
  font-weight: 1.3rem;
}



.winner-loser-bar-groups .wl-group .wl-bar-wrapper .wl-content.inverted{
  color: inherit;
  font-weight: inherit;
  position: relative;
}

.winner-loser-bar-groups .wl-group .wl-winner .wl-bar{
	background-color: #007e33;
	display: block;
	position: absolute;
}

.winner-loser-bar-groups .wl-group .wl-loser .wl-bar{
	background-color: #c00;
	display: block;
	position: absolute;
}

JavaScript

(function($, window, document){ 

	var defaults = {
		title_winner: 'Gewinner',
		title_loser: 'Verlierer',
		animate: false,
		animation_duration: 1,
		show_title: true,
		data: [],
		centering: 'dynamic', // fixed
		error_message: 'Keine Daten'
	}
	
	function vogelToolWinnerLoserDiagram(aElement, aOptions){
		this.element = aElement;
		var $el = $(aElement);
		var _this = this;
		
		// options, keep defaults from been overriden
		this.options = $.extend({}, defaults, aOptions);
		this._defaults = defaults;
		
		if(this.options.data.length == 0)
		{
			return $el.html(this.options.error_message);
		}
		
		// ensure the sizes are floting point numbers
		this.options.data.map(function(obj, index){
			_this.options.data[index].size = parseFloat(obj.size)
		})

		// separete winner and loser data and sort both
		var sortedData_winner = this.options.data.filter(function(obj){ return obj.type == 'winner'; });
		var sortedData_loser = this.options.data.filter(function(obj){ return obj.type == 'loser'; }); 
		sortedData_winner.sort(this.sortData_winner)
		sortedData_loser.sort(this.sortData_loser)
		
		var bar_total_width;
		
		if ( this.options.centering == 'dynamic' )
		{
			bar_total_width = sortedData_winner[0].size + sortedData_loser[sortedData_loser.length-1].size;
		}
		else if ( this.options.centering == 'fixed' )
		{
		
		}
		
		var max_winner_width = sortedData_winner[0].size/bar_total_width * 100;
		var max_loser_width = sortedData_loser[sortedData_loser.length-1].size/bar_total_width * 100;
		var html_content = '', html_winner_title = '', html_loser_title = '';
		if (this.options.show_title) 
		{
			html_winner_title = '<div class="wl-title winner">'+this.options.title_winner+'</div>'; 
			html_loser_title = '<div class="wl-title loser">'+this.options.title_loser+'</div>'; 
			
		}
		
		// html content start
		html_content += '<div class="winner-loser-bar-groups">'
		html_content += html_winner_title;
		html_content += '<div...