<h4>Overview of total number of emails during a whole year</h5>
<div id='chart'></div>

let csv = (url) => new Promise((ok, ko) => d3.csv(url, (err, data) => err ? ko(err) : ok(data))); //check url 

let calendarData = csv('https://raw.githubusercontent.com/Geervesh/sift-ediscovery/patch-1/Datasets/Calendar/cal.csv'); //get data from doc in csv format

calendarData.then(data => {   //if url is ok proceed
  let allCalendarData = d3.nest()   //nest the data
  .entries(data)                    //use entries  
  .map(theData => {                 //map the data
    const date = new Date(theData.Date);    //change int into time format
    return{                 //assign the values               
      d: date,                    
      v: theData.totalEmails       
    };
  })
  
let chart = d3_rs_squares.html()
                         .type('calendar.days') //calendar type
                         .width(700)            //chage width 
                         .height(500)           //change height     
                         .color('brown')        //chart colour
                         .starting('utcMonday');  //starting week
                         
                              
                       
d3.select('#chart')
  .datum(allCalendarData)
  .call(chart);  
  

//this get the information of the position being hovered
let rstip = d3_rs_tip.body()
        .attr('class', 'd3-tip')
        .direction('n')
        .html(d => {
          let r = '';
          if(d.y){
           r = d.x+','+d.y
          }else{
            if(d.x.indexOf('@') > -1){
              r = d.x;
            }else{
              r = d3.timeFormat('%d %b')(new Date(d.x))
            }
            r += ',' + 'Emails:' + d.z  
          }
          return r;
        });  
  
  //display the infomation
d3.select('svg').call(rstip)
    d3.selectAll('.square')
      .on('mouseover', rstip.show)
      .on('mouseout', rstip.hide);
});