legend 111

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>

</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;  
}
.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;
}

JavaScript

function Legend(){
   var data = [];
   var rows = 1;
   var itemCount = 5;
   var multiline = false;
   var justify = "flex-start";
  
   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){
      data = chunkArray(val,itemCount);
     return createLegend;
   }
   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-"+(index+1));
      row.css("justify-content",justify);

      createLegenditems(row,rowdata);

    })

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

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

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

        labelLengths.forEach((value)=>{
          labelRatios.push(value/labelMinLength);
        })

        rowdata.forEach(function(value,index){
          var legendGroup = $("<div></div>").appendTo(row);
          legendGroup.addClass("legend-group");
          
          var legendDot = $("<div></div>").appendTo(legendGroup);
          legendDot.addClass("legend-dot");
          legendDot.css("background",value.color)      ;
          
          var legendText = $("<div></div>").appendTo(legendGroup);
          legendText.addClass("legend-text");
          
         ...