JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div class="custom-dashboard" data-theme="scifi2">

<div class="dashboard-example-holder"></div>

<!-- 
<div class="dashboard-component" data-type="bar-graph">
  <ul class="dashboard-legend">
    <li>Male 60%</li>
    <li>Female 40%</li>
  </ul>
  <div class="graph">
    <div class="graph-value" data-value="60%" data-label="Male" style="width: 60%;"><span>60%</span></div>
    <div class="graph-value" data-value="40%" data-label="Female" style="width: 40%;"><span>40%</span></div>
  </div>
</div>
-->

</div>

CSS

body{
  margin: 0px;
  font-family: helvetica;
  font-size: 11px;
}

.dashboard-component{
  position: relative;
  display: block;
}
.dashboard-component[data-type="bar-graph"]{
  
}
.dashboard-component[data-type="bar-graph"]>ul.dashboard-legend{
  list-style: square;
  list-style-position: inside;
}
.dashboard-component[data-type="bar-graph"]>ul.dashboard-legend>li{
  
}
.dashboard-component[data-type="bar-graph"]>div.graph{
  background-color: #ccc;
  position: relative;
  padding: 0px;
}
.dashboard-component[data-type="bar-graph"]>div.graph>div.graph-value{
  width: 100%;
  height: 32px;
  margin-top:5px;
  margin-bottom: 5px;
  background-color: rgba(255,0,0,0.5);
  position: relative;
}
.dashboard-component[data-type="bar-graph"]>div.graph>div.graph-value>span{
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}









/* FIRST THEME START */

.custom-dashboard[data-theme="scifi"]>.dashboard-example-holder>.dashboard-component[data-type="bar-graph"]{
  
}
.custom-dashboard[data-theme="scifi"]>.dashboard-example-holder>.dashboard-component[data-type="bar-graph"]>div.graph>div.graph-value{
  background-color: #000 !important;
  border-radius: 16px;
}
.custom-dashboard[data-theme="scifi"]>.dashboard-example-holder>.dashboard-component[data-type="bar-graph"]>div.graph>div.graph-value>span{
  color: pink !important;
}

JavaScript

function DashboardComponent(id,type,options,data,parent){
	
  this.id = id;
  this.type = type;
  this.data = data;
  this.parent = parent;
  this.options = options;
  
  this.ui = null;
  
  this.build = function(){
  
  	this.ui = $('<div class="dashboard-component" data-type="' + this.type + '"><div class="graph"></div></div>');
    
    if(this.options.legend){
    
    	switch(this.options.legendposition){
      
      	case "top":
        this.ui.prepend('<ul class="dashboard-legend"></ul>');
        break;
        
        case "bottom":
        this.ui.append('<ul class="dashboard-legend"></ul>');
        break;
      
      }
    
    }
    
    for(let i=0;i<this.data.length;i++){
    
    	if(this.options.legend){
      
    		this.ui.find('.dashboard-legend').append('<li>' + this.data[i].label + ' ' + this.data[i].value + '%</li>');
        
      }
    
    	this.ui.find('.graph').append('<div class="graph-value" data-value="' + this.data[i].value + '%" data-label="' + this.data[i].label + '" style="width: ' + this.data[i].value + '%; color: ' + this.data[i].color + '; background-color: ' + this.data[i].backgroundcolor + ';"><span>' + this.data[i].value + '%</span></div>');
    }
    
    
    this.parent.append(this.ui);
  
  }
  
   this.build();
  
  
}

let data = [
	{
  	"label": "Male",
    "value": 60,
    "color": "#ffffff",
    "backgroundcolor": "#cc6600"
  },
  {
  	"label": "Female",
    "value": 40,
    "color": "#ffffff",
    "backgroundcolor": "#cc9900"
  }
];

let options = {
	"legend": true,
  "legendposition": 'bottom'
}

let barGraph = new DashboardComponent('myBarGraph','bar-graph',options,data,$('.dashboard-example-holder'));