D3 Examples - Calculate

xxxxxxxxxx
 
<!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; }
    .fit-image{
      width: 100%;
      object-fit: cover;
      height: 40vh; /* only if you want fixed height */
    }
  </style>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
​
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  
  <div class="container-fluid p-3">
    <div class="row">
      <div class="col-sm-9" id="ice_cream_list"></div>
      <div class="col-sm-3">
        <h1>
          <span id="currency">Rp.</span>
          <b><span id="totalPrice">0</span></b>
        </h1>
        Breakdown Price : 
        <div id="breakDownPrice"></div>
        <div id="reset" onclick="resetCount()">
            <img src="https://cdn0.iconfinder.com/data/icons/media-player/100/player-08-512.png" alt="reset" style="width:100%; height: 100%;">
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  console.clear();
  
  maxItemPerRow = 4;
  
  d3.csv("ice_cream.csv",function(data){
    
    var toAppend = "";
    var openTagFlag = false;
    data.forEach(function(d,i){
      if(i%maxItemPerRow == 0){
        toAppend += '<div class="row"><div class="col-md-'+Math.floor(12/maxItemPerRow)+'" onclick="countTotal('+"'"+d.name+"',"+"'"+d.price+"'"+')">';
        openTagFlag = true;
      } else {
        toAppend += '<div class="col-md-'+Math.floor(12/maxItemPerRow)+'" onclick="countTotal('+"'"+d.name+"',"+"'"+d.price+"'"+')">';
      }
      
      toAppend += '<div id="'+d.name+'"><img class="fit-image" src="'+d.image+'" alt="'+d.name+'"/><div class="text-center">'+d.name + '</div><div class="text-center">(' + d3.format(',')(+d.price) +')</div></div>'
      
      if(i%maxItemPerRow == maxItemPerRow-1 && openTagFlag){
        toAppend += '</div></div>';
        openTagFlag = false;
      } else {
        toAppend += '</div>';
      }
      
    })
    
    if(openTagFlag){
      toAppend += '</div>'
    }
    
//     console.log(toAppend)
    
    document.getElementById("ice_cream_list").innerHTML = toAppend;
    })
  
  var totalValue = 0;
  var breakdownList = [];
  
  function resetCount(){
    totalValue = 0;
    breakdownList = []
    printValue(totalValue, "");
  }
  
  function printValue(totalValue, toAppendBreakdown){
    document.getElementById("totalPrice").innerHTML = d3.format(',')(totalValue);
    document.getElementById("breakDownPrice").innerHTML = toAppendBreakdown;
  }
  
  function countItem(array,name){
    var count = 0;
    for(var i = 0; i < array.length; ++i){
        if(array[i] == name)
            count++;
    }
    return count;
  }
  
  function countTotal(name, value){
    totalValue += +value || 0;
    var toAppendBreakdown = "";
    breakdownList.push(name+"#"+value);
    
    var breakdown = {};
    for (var i = 0; i < breakdownList.length; i++) {
        breakdown[breakdownList[i]] = 1 + (breakdown[breakdownList[i]] || 0);
    }
    
//     console.log(totalValue);
//     console.log(breakdown);
    
    for (var key in breakdown) {
      var keyDetail = key.split("#");
      toAppendBreakdown += breakdown[key] +" "+ keyDetail[0] + " (@" + keyDetail[1] + ") :: " + (breakdown[key] * +keyDetail[1]) + "<br>";
    }
    
    printValue(totalValue, toAppendBreakdown);
//     document.getElementById("totalPrice").innerHTML = d3.format(',')(totalValue);
//     document.getElementById("breakDownPrice").innerHTML = toAppendBreakdown;
    
  }
  
</script>
    