sets_combinator

forked from ocarneiro's block: combinator

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    div {display:inline-block; padding-left:30}
    svg {display:inline; padding-left:0;}
    rect { fill:white;stroke-width:6;stroke:#606060}    
  </style>
</head>

<body>
  <div><img src="https://openclipart.org/download/181315/1375181451.svg" width="50" /><img src="https://openclipart.org/download/13664/ericlemerdy-laptop-1.svg" width="50" /></div>
<div><img src="https://openclipart.org/download/181315/1375181451.svg" width="50" /><img src="https://openclipart.org/download/13664/ericlemerdy-laptop-1.svg" width="50" /></div>
  <svg width="30" height="50"><rect width="30" height="50" /></svg>
  <form>
    <p>Monitores: <input id="monitores" value="3"> &nbsp; Desktops: <input id="desktops" value="3"> &nbsp; Notebooks: <input id="laptops" value="0"></p>
  </form>
  <div id="somas"></div>
  <script>
    var data = {
      	    monitors: 3,
      		  laptops: 3,
      		  desktops: 3
        }
    
    var sets = [{m:1, l:0, d:1}, {m:1, l:0, d:1}, {m:1, l:1, d:1}]

update();
    
    function draw() {
      
        killAll();
      
        var setsDiv = d3.select("body")
    				.append("div").attr("id", "outer_sets");

setsDiv.selectAll("img")
            .data(sets)
            .enter()
            .append("div")
            .each(function(d) {
          			//console.log(d);
          			currentDiv = d3.select(this);
          			currentDiv.selectAll(".mon")
                	.data(d3.range(0,d.m)).enter()
                	.append("img")
                	.attr("class", "mon")
                  .attr("src", 
     "https://openclipart.org/download/181315/1375181451.svg")
                  .attr("width", 80);
/*
								currentDiv.selectAll(".lap")
                	.data(d3.range(0,d.l)).enter()
                	.append("img")
                	.attr("class", "lap")
                  .attr("src", 
     "https://openclipart.org/download/13664/ericlemerdy-laptop-1.svg")
                  .attr("width", 80);
*/
								currentDiv.selectAll(".dsk")
                	.data(d3.range(0,d.d)).enter()
                  .append("img")
                	.attr("class", "dsk")
                  .attr("src", "data:image/svg+xml;utf8,<svg xmlns='https://www.w3.org/2000/svg' width='52' height='84'><rect x='5' y='5' width='42' height='76' style='fill:white;stroke:grey;stroke-width:6;fill-opacity:0.1;stroke-opacity:0.9'/></svg>")
          				.attr("style", "fill:white")

/* 
        <svg width="30" height="50"><rect width="30" height="50" style= "fill:white;stroke-width:6;stroke:#606060" /></svg>
        */
        });
    }

function update() {
      sets = combinar(data.monitors,data.desktops);
      draw();
      var soma = somar(sets);
      console.log(soma);
      d3.select("#somas").selectAll("p").remove();
      d3.select("#somas").append("p")
        .text(JSON.stringify(somar(sets)));
    }
    
		function combinar(mon, dsk) {
      var sets = [];
      var monitorPorDesktop = 1;

for (var i=0; i < dsk; i++) {
        var monitoresUtilizados = d3.sum(sets, function(d) {return d.m});
        var monitoresRestantes = mon - monitoresUtilizados;
        var desktopsUtilizados = d3.sum(sets, function(d) {return d.d});
        var desktopsRestantes = dsk - desktopsUtilizados;
        
        if (mon > dsk && monitoresRestantes > desktopsRestantes) {
            monitorPorDesktop = 2;
        } else {
            monitorPorDesktop = 1;
        }
        while (monitoresUtilizados + monitorPorDesktop > mon) {
            monitorPorDesktop -= 1;
        }
       	sets.push({m:monitorPorDesktop, d:1});
      }
      return sets;
    }

function somar(sets) { 
      var soma = d3.nest()
      							.key(function(d) { return nomear(d);})
      							.rollup(function(d) { 
   																				return d.length})
      							.entries(sets);

function killAll() {
        d3.select("#outer_sets").remove();
    }
   
    // atualiza quantidade de monitores
    d3.select("#monitores").on("input", function() {
        //console.log(+this.value);
     	  data.monitors = + this.value;
     	  update();
	  });

// atualiza quantidade de monitores
    d3.select("#laptops").on("input", function() {
        //console.log(+this.value);
      	data.laptops = + this.value;
        update();
	 });
    
    // atualiza quantidade de desktops
    d3.select("#desktops").on("input", function() {
        //console.log(+this.value);
      	data.desktops = + this.value;
        update();
	 });

</script>
</body>

https://d3js.org/d3.v4.min.js