D3 Examples - grab-v2-withoutcap

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #err {
      color:red;
    }
  
  </style>
</head>
​
<body>
  
  <table>
    <tr>
      <td>
            <input type="text" id="beforeDiscount" placeholder="subTotal before discount" autofocus/>
      </td>
    </tr>
    <tr>
      <td>
            <input type="text" id="afterDiscount" placeholder="subTotal after discount">
      </td>
    </tr>
    <tr>
      <td>
            <input type="text" id="discountPercent" placeholder="%" readonly disabled style="display:none;">
      </td>
    </tr>
    <tr>
      <td>
        <span id="err"></span>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <textarea id="prices" rows="8"></textarea>
      </td>
    </tr>
    <tr>
      <td style="display:none;">
        Separate by : 
        <input type="radio" name="separatedBy" value="comma" onclick="runCalculation()"> Comma 
            <input type="radio" name="separatedBy" value="enter" onclick="runCalculation()" checked> Enter
      </td>
    </tr>
    <tr>
      <td style="display:none;">
        <input type="checkbox" id="sst" value="sst"> with service charge
        <br>
        <input type="checkbox" id="delivery" value="delivery"> with delivery charge
      </td>
    </tr>
    <tr>
      <td>
        <div id="chart"></div>
      </td>
    </tr>
  </table>
  <script>
    console.clear();
    var defaultSst = 6;
    var defaultDelivery = 5;
    defaultSst = defaultSst/100;
    var textAreaPlaceholder = "Prices of each item. \n14\n25\n15\n20/2 (2 of 10)"
    document.getElementById("prices").placeholder = textAreaPlaceholder;
    
    function sel(id){
      return document.getElementById(id);
    }
    
    allInputIds = []
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            allInputIds.push(inputs[i].id);
        }
​
        for (var i = 0; i < allInputIds.length; i++) {
            if(allInputIds[i] != ""){
                thisEl = sel(allInputIds[i])
                thisEl.onchange = function(){
                    runCalculation();
                }
            }
        }
    
    sel("prices").onchange = function(){
      runCalculation();
    }
    
    /*
    function drawChart(data){
      var widthRatio = 0.8;
      var heightRatio = 0.8;
      var margin = {top: 20, right:20, bottom:20, left:20};
      var width = window.innerWidth * widthRatio - margin.left - margin.right;
      var height = window.innerHeight * heightRatio - margin.top - margin.bottom;
      
      var svg = d3.select("#chart").append("svg")
                            .attr("height", height + margin.top + margin.bottom)
                            .attr("width", width + margin.left + margin.right)
                            .append("g")
                            .attr("transform","translate("+margin.left+","+margin.right+")");
      
      
    }*/
    
    function appendListing(data, extra){
      // console.log("length "+data.length)
      
      function nanChecker(value){
        return isNaN(value);
      }
      
      sel("chart").innerHTML = ""
      
      data.forEach(function(d,i){
        d3.select("#chart").append("text").html((nanChecker(d.oriPrice) == true ? "" : "Item"+(i+1)+" : "+d.oriPrice)+(nanChecker(d.discPrice) == true ? "" : " >> <b>"+d3.format(".2f")(d.discPrice + (0||extra)))+"</b><br/>")
      })
      
      /*
      if(!isNaN(extra))
        d3.select("#chart").append("text").html("Extra charges (each) : <b>"+ extra +"</b>");
       */
    }
    
    function runCalculation(){
      sel("err").innerHTML = ""
      beforeDiscount = +sel("beforeDiscount").value
      afterDiscount = +sel("afterDiscount").value
      tobePaid = beforeDiscount - afterDiscount
      
      sel("discountPercent").value = d3.format(".2f")(100-((afterDiscount / beforeDiscount) * 100)) + "%"
      // console.log(tobePaid)
      if((tobePaid) < 0)
        sel("err").innerHTML="After discount shouldn't be greater than Before."
      
      var tempPrices = document.getElementById("prices").value;
      
      var separatedBy = document.querySelector('input[name="separatedBy"]:checked').value;
      
      if(separatedBy == "comma")
        tempPrices = tempPrices.split(",")
      else if(separatedBy == "enter")
        tempPrices = tempPrices.split(/\n/)
      
      prices = []
      
      tempPrices.forEach(function(d,i){
        if((d.split("/")).length>1){
          temp = d.split("/")
          
          for(j=0;j<(+temp[1]);j++){
            prices.push(+temp[0]/+temp[1])
          }
        } else {
          prices.push(+d)
        }
      })
      
        dataToBe = []
    
      for(i=0; i<prices.length; i++){
        dataToBe.push({"id":"item"+(i+1),
                       "oriPrice":prices[i],
                       "discPrice":prices[i]/beforeDiscount*afterDiscount
                      })
      }
      
      sumOfDiscItems = d3.sum(dataToBe,function(d){return +d["discPrice"]})
      
      var sstState = document.getElementById("sst").checked;
      var deliveryState = document.getElementById("delivery").checked;
      
      var sstPrice = 0;
      var deliveryPrice = 0;
      
      if(sstState)
        sstPrice = (beforeDiscount * defaultSst);
      if(deliveryState)
        deliveryPrice = defaultDelivery;
        
      var deliveryAndSst = (sstPrice + deliveryPrice)
      
      sumOfDiscItems = sumOfDiscItems + (deliveryAndSst/beforeDiscount*afterDiscount)
      
      if(afterDiscount < sumOfDiscItems)
        sel("err").innerHTML = "Maybe there's wrong input at the item price lists"
      else if(afterDiscount > sumOfDiscItems)
        sel("err").innerHTML = "Remaining to be paid : " + (afterDiscount - sumOfDiscItems)
        
      var deliveryAndSst = deliveryAndSst / dataToBe.length
      
      appendListing(dataToBe,deliveryAndSst)
    }
​
  </script>
</body>
​
    