JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  venky1234</title>
  
  <link rel="stylesheet" href="css/style.css">  
</head>

<body>

<div id="container1"></div>




<!-- <div id="container2"></div>
<div id="container3"></div>
<div id="container4"></div> -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js'></script>
<!-- <script  src="js/index.js"></script> -->
<script  src="js/legend.js"></script>
<script  src="js/app.js"></script>

</body>

</html>

CSS

#container1 {
  width:1240px;  
  box-sizing:border-box;
  border:1px solid #000;
  margin:10px auto;
  padding:30px;
}
/* #container2 {
  width:1240px;  
  box-sizing:border-box;
  border:1px solid #000;
  margin:10px auto;
  padding:30px;
}
#container3 {
  width:1240px;  
  box-sizing:border-box;
  border:1px solid #000;
  margin:10px auto;
  padding:30px;
}
#container4 {
  width:1240px;  
  box-sizing:border-box;
  border:1px solid #000;
  margin:10px auto;
  padding:30px;
} */

.legend-container{
  display:flex;
  flex-direction:column;  
  border:1px solid #000;
  padding:5px 10px;
  
}
.legend-container > div{
  display:flex;
  flex-direction:row;  
//flex-wrap:wrap;
}
.legend-group{
  display:flex;
  flex-direction:row;
  align-items:center;
  margin-right:20px;
  overflow:hidden;
  
}
.legend-group:last-child{
  margin-right:0px
}
.legend-dot{
  width:16px;
  height:16px;
  margin-right:10px;
  flex-shrink:0
}
.legend-text{
  /* flex-grow:1; */
  min-width: 0px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.legend-text > p{
  margin:0;
  min-width: 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


.gridContainer{
  width:1180px;
  display:grid;
  grid-template-columns: repeat(15,minmax(auto,1fr));
 grid-gap: 10px 10px
}

JavaScript

function Legend() {
	var data = [];
	var rows = [];
	var itemCount = 5;
	var multiline = false;
	var justify = "flex-start";
  var lines = 2;
  var labelLengths = [];
  var labelRatios = [];

	function createLegend() {}

	function chunkArray(myArray, chunk_size) {
		var index = 0;
		var arrayLength = myArray.length;
		var tempArray = [];

		for (index = 0; index < arrayLength; index += chunk_size) {
			myChunk = myArray.slice(index, index + chunk_size);
			// Do something if you want with the group
			tempArray.push(myChunk);
		} 

		return tempArray;
	}
[{},{},{},{},{}]


  createLegend.data = function (val) {

    val.forEach((value) => {
      labelLengths.push(value.label.length)
    })

    var min = Math.min(...labelLengths);
    var max = Math.max(...labelLengths);

    labelLengths.forEach(function(label){
      labelRatios.push(Math.round(label/min));
    })

    data = val
		return createLegend;
  }
  var maxWidth;

	createLegend.renderTo = function (selector) {

		var container = $("<div></div>").appendTo(selector);
		container.addClass("legend-container");

	//	data.forEach((rowdata, index) => {

			var row = $("<div></div>").appendTo(container);
			row.addClass("legend-row-" + ( 1));
			row.css("justify-content", justify);

			createLegenditems(row, data);

	//	})

		function createLegenditems(row, rowdata) {
			var widths = [];
      var legendGroups = [];
			 maxWidth = 1180 / rowdata.length;

				rowdata.forEach(function (value, index) {
			  var	legendGroup = $("<div></div>").appendTo(row);
				legendGroup.addClass("legend-group");

			var legendDot = $("<div><img src="+value.imageurl+" height=16 width=16></div>").appendTo(legendGroup);
          legendDot.addClass("legend-dot");

				var legendText = $("<div></div>").appendTo(legendGroup);
				legendText.addClass("legend-text");

				var textPara = $("<p></p>").appendTo(legendText);
				textPara.addClass("text-para");
				textPara.text(value.label);			        
        
       ...