sf-i-events 1.0.733 → 1.0.735

package/src/sf-i-events.ts

@@ -477,6 +477,9 @@ export class SfIEvents extends LitElement {
               <div>Report generated for PROJECT_NAME on REPORT_DATE</div>
             </div>
           </div>
+          <div class="d-flex justify-between align-center">
+            FILTERS_DATA
+          </div>
           <br />
           <div class="watermark"></div>
           <div class="report">
@@ -1337,6 +1340,12 @@ export class SfIEvents extends LitElement {
   @property()
   events: any = null;
 
+  @property()
+  statistics: any = null;
+
+  @property()
+  statisticsMeta: any = null;
+
   @property()
   streamIndex: any = null;
 
@@ -1417,6 +1426,9 @@ export class SfIEvents extends LitElement {
   @property()
   htmlDataSummary: string = "";
 
+  @property()
+  htmlStatsFilter: string = "";
+
   @property()
   period: string = "";
 
@@ -4201,6 +4213,26 @@ export class SfIEvents extends LitElement {
 
     return html;
 
+  }
+  renderCalendarStatisticsGraphs = (showGraph: boolean, parametersTitle: string) => {
+
+    //console.log('flowGraph', this.flowGraph);
+
+    var html = '';
+
+    html += '<div class="mb-20 stream-event-list" part="stream-event-list-charts">';
+      html += '<div class="align-center d-flex flex-wrap mb-10 w-100-m-0" part="duration-title-container"><h4 part="duration-title">' + parametersTitle + '</h4><button id="button-refresh" part="button-duration-title" class="align-center d-flex justify-center"><h4 part="duration-title">' + parametersTitle + '</h4><span part="duration-title-icon" class="material-icons ml-10">refresh</span></button></div>';
+      if(showGraph) {
+        html += '<div class="chart-container d-flex scroll-x align-center"><div part="chart-item" class="chart-item"><canvas id="myChart"></canvas></div><div part="chart-item" class="chart-item"><canvas id="myChart4" class="gone"></canvas></div><div part="chart-item chart-item-middle" class="chart-item"><canvas id="myChart2" class="gone"></canvas></div><div part="chart-item" class="chart-item"><canvas id="myChart3" class="gone"></canvas></div></div>';
+        html += '<div id="chart-settings-controls" class="mt-20"></div>'
+        html += '<div id="chart-settings"></div>'
+      } else {
+        html += '<div part="box" class="box"></div>';
+      }
+    html += '</div>';
+
+    return html;
+
   }
 
   renderCalendarContainerDivStart = (index: number) => {
@@ -4340,7 +4372,7 @@ export class SfIEvents extends LitElement {
 
     let lastUpdated : string = '';
 
-    console.log('lastUpdated', event.lastupdated);
+    // console.log('lastUpdated', event.lastupdated);
     if(event.lastupdated != null && event.lastupdated.length > 0) {
       lastUpdated = event.lastupdated;
       
@@ -4438,7 +4470,7 @@ export class SfIEvents extends LitElement {
       html += 'Comments'
       html += '</th>';
     }
-    console.log('rendering last updated', event.lastupdated)
+    // console.log('rendering last updated', event.lastupdated)
     if(event.lastupdated != null && (event.lastupdated).length > 0) {
       html += '<th part="td-head">';
       html += 'Updated'
@@ -4649,7 +4681,7 @@ export class SfIEvents extends LitElement {
     let approverStr = this.getApproverStringFromEvent(event);
 
     let graphParam = this.getGraphParam(event);
-    console.log("graphParam", graphParam.split(';')[0]);
+    // console.log("graphParam", graphParam.split(';')[0]);
     html += '<div class="d-flex align-center event-user-labels-container"><div part="badge-filter-name" class="graphparamname graphparamname1 mb-20">' + graphParam.split(';')[0] + '</div>' + reporterStr + approverStr + '<button id="button-list-reporting-'+mmdd.replace('/', '-')+'-' + j +'" part="button-list-reporting" class="material-icons ml-10 mb-20 button-list-reporting">edit_note</button></div>';
 
     return html;
@@ -4908,6 +4940,78 @@ export class SfIEvents extends LitElement {
 
   }
 
+  renderStatistics = (_firstDay: any, _endDay: any, iInit: number, iLast: number, showGraph: boolean, index: number, month: number, period: string, firstDate: any = null, parametersTitle: string) => {
+    var total = 0, notStarted = 0, approved = 0, pendingApproval = 0, rejected = 0;
+    var html = '';
+    // var lastDay = iLast;
+    // var slice = 2;
+    this.clearGraphData();
+    this.clearSelectedGraphParam();
+    this.clearSelectedLegend();
+  
+    html += this.renderCalendarStatisticsGraphs(showGraph, parametersTitle);
+    html += this.renderCalendarContainerDivStart(index)
+    html += this.renderCalendarEventSummary();
+
+    
+    for(var i = iInit; i <= iLast; i++) {
+
+      let mmdd : string = "";
+
+      if(firstDate == null) {
+        mmdd = ("0" + (month+1)).slice(-2) + "/" + ("0" + i).slice(-2);
+      } else {
+        const currDate = new Date(firstDate.getTime());
+        currDate.setDate(firstDate.getDate() + (i - 1));
+        mmdd = ("0" + (currDate.getMonth()+1)).slice(-2) + "/" + ("0" + currDate.getDate()).slice(-2);
+      }
+
+      
+      //console.log('mmddevent', mmdd,this.events[mmdd]);
+
+      // var hide;
+      // if(firstDate == null) {
+      //   hide = this.getCalendarRowHide(this.events[mmdd], i, lastDay, month, firstDate, null);
+      // } else {
+      //   const currDate = new Date(firstDate.getTime());
+      //   currDate.setDate(firstDate.getDate() + (i - 1));
+      //   hide = this.getCalendarRowHide(this.events[mmdd], i, lastDay, month, firstDate, currDate);
+      // }      
+
+      if(this.statistics[mmdd] != null) {
+
+        console.log('mmdd', mmdd, this.statistics[mmdd]['approved']);  
+        // html += this.renderCalendarRowDivStart(i, firstDate, mmdd.split("/")[1] + "/" + mmdd.split("/")[0]);
+        total += this.statistics[mmdd].count;
+        notStarted += this.statistics[mmdd]["not-started"] ?? 0;
+        pendingApproval += this.statistics[mmdd]["pending-approval"] ?? 0;
+        rejected += this.statistics[mmdd]["rejected"] ?? 0;
+        approved += this.statistics[mmdd]["approved"] ?? 0;
+          
+      } 
+    }
+
+    html += this.renderCalendarContainerDivEnd();
+
+    //console.log('final risk severities', this.riskSeverityData);
+
+    //this.period = firstDay?.getDate() + '/' + (firstDay!.getMonth()+1) + '/' + firstDay?.getFullYear() + " - " + endDay?.getDate() + '/' + (endDay!.getMonth()+1) + '/' + endDay?.getFullYear();
+    this.period = period;
+    //console.log('renderevents htmlcols', this.htmlDataCompliances);
+
+    console.log('progress', this.period, total, notStarted, approved, this.statistics)
+
+    html = html.replace("DASHBOARD_TOTAL", total+"");
+    html = html.replace("DASHBOARD_NOT_STARTED", notStarted+"");
+    html = html.replace("DASHBOARD_APPROVED", approved+"");
+    html = html.replace("DASHBOARD_PENDING_APPROVAL", pendingApproval+"");
+    html = html.replace("DASHBOARD_REJECTED", rejected+"");
+
+    this.htmlDataStats = 'Completeness<br /><br /><table class="w-100"><tr><th class="w-14">Total</th><th class="w-14">Not Started</th><th class="w-14">Approved</th><th class="w-14">Pending Approval</th><th class="w-14">Rejected</th><tr>';
+    this.htmlDataStats += '<tr><td class="w-14 text-center td-odd">'+total+'</td><td class="w-14 text-center td-odd">'+notStarted+'</td><td class="w-14 text-center td-odd">'+approved+'</td><td class="w-14 text-center td-odd">'+pendingApproval+'</td><td class="w-14 text-center td-odd">'+rejected+'</td></table>'
+
+    return html;
+  }
   renderReporting = (event: any, mmddyyyy: any) => {
     let html = '';
     let completeness = this.getCompletenessStatus(event);
@@ -6419,6 +6523,109 @@ export class SfIEvents extends LitElement {
 
     
 
+  }
+
+  renderRangeStatistics = (firstDate: Date, count: number, eventsContainer: HTMLDivElement) => {
+
+
+    var lastDate = new Date(firstDate.getTime());
+    lastDate.setDate(lastDate.getDate() + count - 1)
+
+    const lastDay = count;
+    let firstDay = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate());
+    let endDay = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate());
+    endDay?.setDate(endDay.getDate() + lastDay + 1);
+    var period = ("0" + (firstDate.getMonth()+1)).slice(-2) + "/" + ("0" + firstDate.getDate()).slice(-2) + '/' + firstDate.getFullYear() + ' - ' + ("0" + (lastDate.getMonth()+1)).slice(-2) + "/" + ("0" + lastDate.getDate()).slice(-2) + '/' + lastDate.getFullYear();
+    //console.log('rangeperiod', period)
+
+    var html = this.renderStatistics(firstDay, endDay, 1, lastDay, true, 0, (firstDate.getMonth()), period, firstDate,"From " + firstDay.toLocaleDateString('en-IN') + " To " + endDay.toLocaleDateString('en-IN'));
+
+    eventsContainer.querySelector('.calendar-right-data')!.innerHTML = html;
+    this.renderButtonRefresh(eventsContainer);
+    // let innerhtml = eventsContainer.innerHTML;
+    // innerhtml += this.renderSelectAllButtons();
+    // eventsContainer.innerHTML = innerhtml
+    // this.attachTimelineFilterHandlers(eventsContainer);
+
+    // const radioExpander = eventsContainer.querySelector('#graph-radios-expander') as HTMLButtonElement;
+    // radioExpander?.addEventListener('click', (e: any) => {
+
+    //   const button = (e.currentTarget as HTMLButtonElement);
+    //   button.style.display = 'none';
+
+    //   const arrRadios = eventsContainer.querySelectorAll('.chart-radio-item-secondary') as NodeListOf<HTMLDivElement>;
+    //   arrRadios.forEach(div => {
+    //     div.style.display = 'block';
+    //   });
+    // });
+    
+    const buttonRefresh = eventsContainer.querySelector('#button-refresh') as HTMLButtonElement
+    buttonRefresh.addEventListener('click',async ()=>{
+      this.processDateSelectionViewer(eventsContainer)
+    })
+    
+  }
+
+  renderStatisticsFilters = (eventsContainer: HTMLDivElement) => {
+    let selectFilterCriteria = eventsContainer.querySelector('#select-filter-criteria') as HTMLSelectElement
+    let inputLabelFilter = eventsContainer.querySelector('#input-label-filter') as HTMLLabelElement
+    selectFilterCriteria.style.display = 'block'
+    inputLabelFilter.style.display = 'block'
+    selectFilterCriteria.innerHTML = ""
+    let option = new Option()
+    option.value = "";
+    option.innerHTML = "all"
+    selectFilterCriteria.add(option)
+    for(let criteria of Object.keys(this.statisticsMeta)){
+      let option = new Option()
+      option.value = criteria;
+      if(criteria == "reporter" || criteria == "approver" || criteria == "functionhead"){
+        option.innerHTML = "user:" + criteria
+      }else{
+        option.innerHTML = criteria
+      }
+      selectFilterCriteria.add(option)
+    }
+    let selectFilterCriteriaNew = Util.clearListeners(selectFilterCriteria)
+    selectFilterCriteriaNew.addEventListener('change',(ev: any) => {
+      let target = ev.target as HTMLSelectElement
+      let inputLabelCriteria = eventsContainer.querySelector('#input-label-criteria') as HTMLLabelElement
+      let selectFilterValues = eventsContainer.querySelector('#select-filter-values') as HTMLSelectElement
+      if(target.value == ""){
+        selectFilterValues.value = ""
+        this.processDateSelectionViewer(eventsContainer)
+      }
+      
+      selectFilterValues.innerHTML = ""
+      let option = new Option()
+      option.value = "";
+      option.innerHTML = "All";
+      selectFilterValues.add(option)
+      if(this.statisticsMeta[target.value] != null){
+        let sortedFilters = Util.alphabeticalSort(this.statisticsMeta[target.value])
+        selectFilterValues.style.display = 'block'
+        inputLabelCriteria.style.display = 'block'
+        inputLabelCriteria.innerHTML = target.value
+        for(let filter of sortedFilters){
+          let option = new Option()
+          option.value = filter.split(';')[1];
+          option.innerHTML = filter.split(';')[0].replace(/\([^)]*\)/g,"")
+          selectFilterValues.add(option)
+        }
+        let selectFilterValuesNew = Util.clearListeners(selectFilterValues)
+        selectFilterValuesNew.addEventListener('change',() => {
+          console.log('changed')
+          this.processDateSelectionViewer(eventsContainer);
+        })
+      }else{
+        selectFilterValues.style.display = 'none'
+        inputLabelCriteria.style.display = 'none'
+      }
+    })
+    let selectFilterValues = eventsContainer.querySelector('#select-filter-values') as HTMLSelectElement
+    let inputLabelCriteria = eventsContainer.querySelector('#input-label-criteria') as HTMLLabelElement
+    selectFilterValues.style.display = 'none'
+    inputLabelCriteria.style.display = 'none'
   }
   renderSelectAllButtons = () => {
     let selectAllHtml = '<div class="d-flex justify-end w-100" style="position: fixed; bottom: 70px; left: 0px;" part="button-select-all-container">';
@@ -6856,6 +7063,102 @@ export class SfIEvents extends LitElement {
     
   }
 
+  processDateSelectionViewer = async (eventContainer: HTMLDivElement) => {
+
+    var startDateCalendar = new Date(this.calendarStartMM + '/' + this.calendarStartDD + '/' + this.calendarStartYYYY);
+    var endDateCalendar = new Date(this.calendarStartMM + '/' + this.calendarStartDD + '/' + (parseInt(this.calendarStartYYYY) + 1));
+
+    var valueStart = ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date') as HTMLInputElement).value;
+    if(valueStart == "") {
+      valueStart = ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date-mobile') as HTMLInputElement).value;
+    }
+    var valueEnd = ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date') as HTMLInputElement).value;
+    if(valueEnd == "") {
+      valueEnd = ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date-mobile') as HTMLInputElement).value;
+    }
+
+    //console.log('valuestart', valueStart);
+    //console.log('valueend', valueEnd);
+    let filtercriteria = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement).value 
+    let filtercriterianame = ""
+    console.log('criteria', ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement).selectedIndex]);
+    if(((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement).selectedIndex] != null){
+      filtercriterianame = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement).selectedIndex].innerHTML
+    } 
+    if(filtercriteria == ""){
+      filtercriteria = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria-mobile') as HTMLSelectElement).value
+      if(((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria-mobile') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria-mobile') as HTMLSelectElement).selectedIndex] != null){
+        filtercriterianame = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria-mobile') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria-mobile') as HTMLSelectElement).selectedIndex].innerHTML
+      }
+    }
+    let filtervalue = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-values') as HTMLSelectElement).value
+    let filtervaluename = ""
+    if(((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-values') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-values') as HTMLSelectElement).selectedIndex] != null){
+      filtervaluename = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-values') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-values') as HTMLSelectElement).selectedIndex].innerHTML 
+    }
+    if(filtervalue == ""){
+      filtervalue = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-values-mobile') as HTMLSelectElement).value
+      if(((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-values-mobile') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-values-mobile') as HTMLSelectElement).selectedIndex] != null){
+        filtervaluename = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-values-mobile') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-values-mobile') as HTMLSelectElement).selectedIndex].innerHTML
+      }
+    }
+    if(filtercriteria == ""){
+      this.htmlStatsFilter = "Filters Selected -> All"
+    }else{
+      if(filtervalue == ""){
+        this.htmlStatsFilter = "Filters Selected -> " + Util.titleCase(filtercriterianame) + " -> All"
+      }else{
+        this.htmlStatsFilter = "Filters Selected -> " + Util.titleCase(filtercriterianame) + " -> " + Util.titleCase(filtervaluename)
+      }
+    }
+    if(valueStart != "" && valueEnd != "") {
+      this.initCustomRightColViewer();
+      if(!this.checkStartDateEarliness(valueStart)) {
+        (this._SfStreamEventStatus as HTMLDivElement).innerHTML = "Chosen Start Date cannot be earlier than " + startDateCalendar;
+        return;
+      }
+      if(!this.checkEndDateLateness(valueEnd)) {
+        (this._SfStreamEventStatus as HTMLDivElement).innerHTML = "Chosen End Date cannot be later than " + endDateCalendar;
+        return;
+      }
+      if(new Date(valueStart).getTime() > new Date(valueEnd).getTime()) {
+        (this._SfStreamEventStatus as HTMLDivElement).innerHTML = "Chosen End Date cannot be earlier than chosen Start Date";
+        return;
+      }
+      if((new Date(valueEnd).getTime() - new Date(valueStart).getTime())/(1000*60*60*24) > 400) {
+        (this._SfStreamEventStatus as HTMLDivElement).innerHTML = "Chosen time window cannot be greater than 400 days";
+        return;
+      }
+      const tsStart = new Date(valueStart);
+      const tsEnd = new Date(valueEnd);
+      tsStart.setDate(tsStart.getDate() - 2);
+      tsEnd.setDate(tsEnd.getDate() + 2);
+
+      //console.log('tsstart', tsStart);
+      //console.log('tsend', tsEnd);
+      
+      let meta = await this.fetchStatistics((tsStart.getMonth() + 1) + "/" + tsStart.getDate() + "/" + tsStart.getFullYear(), (tsEnd.getMonth() + 1) + "/" + tsEnd.getDate() + "/" + tsEnd.getFullYear(), filtercriteria, filtervalue);
+      this.renderRangeStatistics(new Date(valueStart), ((new Date(valueEnd).getTime()+24*60*60*1000) - new Date(valueStart).getTime())/(1000*60*60*24), (this._SfCustomContainer as HTMLDivElement));
+      
+      if(meta != null) this.renderStatisticsFilters((this._SfCustomContainer as HTMLDivElement))
+    } else if(valueStart != "" && valueEnd == "") {
+      (this._SfStreamEventStatus as HTMLDivElement).innerHTML = "Please select End Date";
+    } else if(valueStart == "" && valueEnd != "") {
+      (this._SfStreamEventStatus as HTMLDivElement).innerHTML = "Please select Start Date";
+    } else if(valueStart == "" && valueEnd == "") {
+      (this._SfStreamEventStatus as HTMLDivElement).innerHTML = "Please select Start Date and End Date";
+    }
+
+    this.attachHandlers(eventContainer, valueStart, valueEnd);
+
+    if(eventContainer.innerHTML.indexOf('myChart') >= 0) {
+  
+      this.renderCompletenessGraph(eventContainer, -1, 2);
+
+    }
+    
+  }
+
   initFindRightCol = () => {
 
     var html = "";
@@ -6886,6 +7189,21 @@ export class SfIEvents extends LitElement {
 
   }
 
+  initCustomRightColViewer = () => {
+
+    var html = "";
+
+    html += '<div id="stream-event-0" part="stream-event-list" class="stream-event-list">';
+      html += '<div part="stream-event-not-selected" class="d-flex stream-event-not-selected">';
+      html += '<div><h2 id="stream-event-status">Please select Start Date, End Date and Filter Criteria</h2></div>';
+      html += '</div>';
+    html += '</div>';
+
+
+    (this._SfCustomContainer as HTMLDivElement).querySelector('.calendar-right-data')!.innerHTML = html
+
+  }
+
   checkAndShowBulk = () => {
 
     const inputArr = (this._SfMappingContainer as HTMLDivElement).querySelectorAll('.input-checkbox') as NodeListOf<HTMLInputElement>;
@@ -8865,6 +9183,225 @@ export class SfIEvents extends LitElement {
     // }
   }
 
+  renderCustomViewer = () => {
+
+    this.clearGraphData();
+    this.clearSelectedGraphParam();
+    this.clearSelectedLegend();
+
+    var html = '';
+
+    html += '<div class="scroll-x w-100 mobile-only">';
+
+      html += '<div class="title-item-date">';
+        html += '<label part="input-label">Start Date</label><br />'
+        html += '<input id="stream-start-date-mobile" part="input" type="date" />'
+      html += '</div>';
+      html += '<div class="title-item-date">';
+        html += '<label part="input-label">End Date</label><br />'
+        html += '<input id="stream-end-date-mobile" part="input" type="date" />'
+      html += '</div>';
+      html += '<div class="title-item-date">';
+        html += '<button id="button-year-to-date-mobile" part="button-lg-short-secondary">Year To Date</button>'
+      html += '</div>';
+      html += '<div class="title-item-date">';
+        html += '<button id="button-this-quarter-mobile" part="button-lg-short-secondary">This Quarter</button>'
+      html += '</div>';
+      html += '<div class="title-item-date">';
+        html += '<button id="button-this-year-mobile" part="button-lg-short-secondary">This Year</button>'
+      html += '</div>';
+      html += '<div class="title-item-date">';
+        html += '<label part="input-label-filter-criteria" id="input-label-filter-mobile">Filter Criteria</label><br />'
+        html += '<select id="select-filter-criteria-mobile" class="mr-10"></select>'
+      html += '</div>';
+      html += '<div class="title-item-date">';
+        html += '<label part="input-label-filter-value" id="input-label-criteria-mobile"></label><br />'
+        html += '<select id="select-filter-values-mobile" class="mr-10"></select>'
+      html += '</div>';
+
+    html += '</div>';
+
+    html += '<div class="d-flex w-100">';
+      html += '<div class="calendar-left-col desktop-only flex-col justify-start align-end">';
+
+        html += '<div class="title-item-date d-flex flex-col align-end">';
+        html += '<label part="input-label">Start Date</label>'
+        html += '<input id="stream-start-date" part="input" type="date" />'
+        html += '</div>';
+        html += '<div class="title-item-date d-flex flex-col align-end">';
+        html += '<label part="input-label">End Date</label>'
+        html += '<input id="stream-end-date" part="input" type="date" />'
+        html += '</div>';
+        html += '<div class="title-item-date">';
+        html += '<button id="button-year-to-date" part="button-lg-short-secondary">Year To Date</button>'
+        html += '</div>';
+        html += '<div class="title-item-date">';
+        html += '<button id="button-this-quarter" part="button-lg-short-secondary">This Quarter</button>'
+        html += '</div>';
+        html += '<div class="title-item-date">';
+        html += '<button id="button-this-year" part="button-lg-short-secondary">This Year</button>'
+        html += '</div>';
+        html += '<div class="title-item-date d-flex flex-col align-end">';
+        html += '<label part="input-label-filter-criteria" id="input-label-filter" class="mr-10">Filter Criteria</label>'
+        html += '<select id="select-filter-criteria" class="mr-10"></select>'
+        html += '</div>';
+        html += '<div class="title-item-date d-flex flex-col align-end">';
+        html += '<label part="input-label-filter-value" id="input-label-criteria" class="mr-10"></label>'
+        html += '<select id="select-filter-values" class="mr-10"></select>'
+        html += '</div>';
+        
+
+      html += '</div>';
+
+      html += '<div class="calendar-right-data flex-grow">';
+
+      html += '</div>';
+    html += '</div>';
+
+    console.log('html', html);
+    (this._SfCustomContainer as HTMLDivElement).innerHTML = html;
+
+    this.initCustomRightColViewer();
+
+    (this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date')?.addEventListener('change', (_ev: any) => {
+      //console.log('start-date', ev);
+      this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+      this.processDateSelectionViewer((this._SfCustomContainer as HTMLDivElement));
+    });
+
+    (this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date')?.addEventListener('change', (_ev: any) => {
+      //console.log('end-date', ev);
+      this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+      this.processDateSelectionViewer((this._SfCustomContainer as HTMLDivElement));
+    });
+
+    (this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date-mobile')?.addEventListener('change', (_ev: any) => {
+      //console.log('start-date', ev);
+      this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+      this.processDateSelectionViewer((this._SfCustomContainer as HTMLDivElement));
+    });
+
+    (this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date-mobile')?.addEventListener('change', (_ev: any) => {
+      //console.log('end-date', ev);
+      this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+      this.processDateSelectionViewer((this._SfCustomContainer as HTMLDivElement));
+    });
+
+    (this._SfCustomContainer as HTMLDivElement).querySelector('#button-year-to-date')?.addEventListener('click', () => {
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date-mobile') as HTMLInputElement).value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date') as HTMLInputElement).value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date-mobile') as HTMLInputElement).value = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate());
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date') as HTMLInputElement).value = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate());
+      this.processDateSelectionViewer((this._SfCustomContainer as HTMLDivElement));
+    });
+
+    (this._SfCustomContainer as HTMLDivElement).querySelector('#button-year-to-date-mobile')?.addEventListener('click', () => {
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date-mobile') as HTMLInputElement).value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date') as HTMLInputElement).value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date-mobile') as HTMLInputElement).value = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate());
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date') as HTMLInputElement).value = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate());
+      this.processDateSelectionViewer((this._SfCustomContainer as HTMLDivElement));
+    });
+
+    (this._SfCustomContainer as HTMLDivElement).querySelector('#button-this-year-mobile')?.addEventListener('click', () => {
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date-mobile') as HTMLInputElement).value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date') as HTMLInputElement).value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date-mobile') as HTMLInputElement).value = (parseInt(this.calendarStartYYYY) + 1) + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date') as HTMLInputElement).value = (parseInt(this.calendarStartYYYY) + 1) + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+      this.processDateSelectionViewer((this._SfCustomContainer as HTMLDivElement));
+    });
+    (this._SfCustomContainer as HTMLDivElement).querySelector('#button-this-year')?.addEventListener('click', () => {
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date-mobile') as HTMLInputElement).value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date') as HTMLInputElement).value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date-mobile') as HTMLInputElement).value = (parseInt(this.calendarStartYYYY) + 1) + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date') as HTMLInputElement).value = (parseInt(this.calendarStartYYYY) + 1) + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+      this.processDateSelectionViewer((this._SfCustomContainer as HTMLDivElement));
+    });
+
+    (this._SfCustomContainer as HTMLDivElement).querySelector('#button-this-quarter-mobile')?.addEventListener('click', () => {
+
+      const mmCurrent = ((new Date().getMonth() + 1));
+
+      let startDate : string = "";
+      let endDate : string = "";
+
+      if(mmCurrent >=4 && mmCurrent <= 6) {
+
+        startDate = this.calendarStartYYYY + '-' + '04' + '-' + "01";
+        endDate = this.calendarStartYYYY + '-' + '07' + '-' + "01";
+
+      } else if(mmCurrent >=6 && mmCurrent <= 9) {
+
+        startDate = this.calendarStartYYYY + '-' + '07' + '-' + "01";
+        endDate = this.calendarStartYYYY + '-' + '10' + '-' + "01";
+
+      } else if(mmCurrent >=9 && mmCurrent <= 12) {
+
+        startDate = this.calendarStartYYYY + '-' + '10' + '-' + "01";
+        endDate = (parseInt(this.calendarStartYYYY) + 1) + '-' + '01' + '-' + "01";
+
+      } else {
+        startDate = this.calendarStartYYYY + '-' + '01' + '-' + "01";
+        endDate = (parseInt(this.calendarStartYYYY) + 1) + '-' + '04' + '-' + "01";
+      }
+
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date') as HTMLInputElement).value = startDate;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date-mobile') as HTMLInputElement).value = startDate;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date') as HTMLInputElement).value = endDate;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date-mobile') as HTMLInputElement).value = endDate;
+      this.processDateSelectionViewer((this._SfCustomContainer as HTMLDivElement));
+    });
+    (this._SfCustomContainer as HTMLDivElement).querySelector('#button-this-quarter')?.addEventListener('click', () => {
+
+      const mmCurrent = ((new Date().getMonth() + 1));
+
+      let startDate : string = "";
+      let endDate : string = "";
+
+      if(mmCurrent >=4 && mmCurrent <= 6) {
+
+        startDate = this.calendarStartYYYY + '-' + '04' + '-' + "01";
+        endDate = this.calendarStartYYYY + '-' + '07' + '-' + "01";
+
+      } else if(mmCurrent >=6 && mmCurrent <= 9) {
+
+        startDate = this.calendarStartYYYY + '-' + '07' + '-' + "01";
+        endDate = this.calendarStartYYYY + '-' + '10' + '-' + "01";
+
+      } else if(mmCurrent >=9 && mmCurrent <= 12) {
+
+        startDate = this.calendarStartYYYY + '-' + '10' + '-' + "01";
+        endDate = (parseInt(this.calendarStartYYYY) + 1) + '-' + '01' + '-' + "01";
+
+      } else {
+        startDate = this.calendarStartYYYY + '-' + '01' + '-' + "01";
+        endDate = (parseInt(this.calendarStartYYYY) + 1) + '-' + '04' + '-' + "01";
+      }
+
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date') as HTMLInputElement).value = startDate;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-start-date-mobile') as HTMLInputElement).value = startDate;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date') as HTMLInputElement).value = endDate;
+      ((this._SfCustomContainer as HTMLDivElement).querySelector('#stream-end-date-mobile') as HTMLInputElement).value = endDate;
+      this.processDateSelectionViewer((this._SfCustomContainer as HTMLDivElement));
+    });
+    
+    let selectFilterCriteria = (this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement
+    selectFilterCriteria.style.display = 'none'
+    let selectFilterValues = (this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-values') as HTMLSelectElement
+    selectFilterValues.style.display = 'none'
+    let inputLabelFilter = (this._SfCustomContainer as HTMLDivElement).querySelector('#input-label-filter') as HTMLLabelElement
+    inputLabelFilter.style.display = 'none';
+    // for(var i = 0; i < 3; i++) {
+    //   (this._SfCustomContainer as HTMLDivElement).querySelector('#stream-month-' + i)?.addEventListener('click', (ev: any)=> {
+    //     const target = parseInt((ev.target as HTMLDivElement).id.split('-')[2]);
+    //     //console.log('clicked ', target);
+    //     this.renderPast(target);
+    //   })
+    // }
+    
+    ((this._SfCustomContainer as HTMLDivElement).querySelector('#button-year-to-date') as HTMLButtonElement).click();
+  }
+
   renderThis = (index: number = 1, showGraph: boolean = true) => {
     
     this.clearGraphData();
@@ -9275,17 +9812,19 @@ export class SfIEvents extends LitElement {
     document.addEventListener('scroll',() => {
       // console.log('scroll',window.scrollY)
       let buttonRefresh = eventsContainer.querySelector('#button-refresh') as HTMLButtonElement
-      if(window.scrollY > 720){
-        if(buttonRefresh.style.display == "flex"){
+      if(buttonRefresh != null){
+        if(window.scrollY > 720){
+          if(buttonRefresh.style.display == "flex"){
 
+          }else{
+            buttonRefresh.style.display = 'flex'
+          }
         }else{
-          buttonRefresh.style.display = 'flex'
-        }
-      }else{
-        if(buttonRefresh.style.display == "none"){
+          if(buttonRefresh.style.display == "none"){
 
-        }else{
-          buttonRefresh.style.display = 'none'
+          }else{
+            buttonRefresh.style.display = 'none'
+          }
         }
       }
     })
@@ -9933,7 +10472,7 @@ export class SfIEvents extends LitElement {
 
   }
 
-  renderCompletenessGraph = (divContainer: HTMLDivElement) => {
+  renderCompletenessGraph = (divContainer: HTMLDivElement, selectedTab: number = -1, selectedSummary: number = -1) => {
 
     this.clearSelectedGraphParam();
     // this.clearSelectedLegend();
@@ -9973,7 +10512,7 @@ export class SfIEvents extends LitElement {
         }]
       }
 
-      this.renderChartSettings(divContainer, -1, -1, ctx);
+      this.renderChartSettings(divContainer, selectedTab, selectedSummary, ctx);
       this.renderChart(ctx, 'doughnut', data, "Completeness")
 
     }
@@ -10007,7 +10546,7 @@ export class SfIEvents extends LitElement {
     for(var i = 0; i < itemsCompliance.length; i++) {
       itemsCompliance[i].style.display = 'none';
     }
-    this.renderChartSettings(divContainer, -1, -1, ctx);
+    this.renderChartSettings(divContainer, selectedTab, selectedSummary, ctx);
     this.renderChart(ctx, 'doughnut', data, "Completeness")
 
   }
@@ -12010,7 +12549,7 @@ export class SfIEvents extends LitElement {
 
     const tempArray = [];
 
-    for(let count = 0; count < sourceArray.data.mappings.mappings.length; count++) {
+    for(var count = 0; count < sourceArray.data.mappings.mappings.length; count++) {
 
       //console.log('selectedindexchecking', selectedIndex, count, this.selectedCbs.includes(selectedIndex), this.selectedCbs.includes(count));
       //taggingArray.data.mappings.mappings[count] = sourceArray.data.mappings.mappings[count];
@@ -12212,10 +12751,7 @@ export class SfIEvents extends LitElement {
 
     async function process() {
       
-      console.log = function() {
-        console.log('Saving...', mapping);
-      }
-      
+      //console.log('Saving...', mapping);
 
       await uploadFunction(mapping);
       if(!saveInBackground) refreshFunction();
@@ -12658,7 +13194,7 @@ export class SfIEvents extends LitElement {
             if(taggingArray.data.mappings.mappings[k].id == sourceArray.data.mappings.mappings[i].id) {
               if(taggingArray.data.mappings.mappings[k].id == "62330e24-298d-4ef2-9449-c0e400e37cac") {
 
-                // console.log('found', taggingArray.data.mappings.mappings[k]);
+                console.log('found', taggingArray.data.mappings.mappings[k]);
                 //console.log('before before filtermatch',sourceCols[l],JSON.parse(sourceArray.data.mappings.mappings[0].cols)[j], colCountry, (sourceArray.data.mappings.mappings[i]), (sourceArray.data.mappings.mappings[i].data), colState);
                 //console.log('before filtermatch', colCountry, JSON.parse(sourceArray.data.mappings.mappings[i].data)[colCountry], colState, JSON.parse(sourceArray.data.mappings.mappings[i].data)[colState], JSON.parse(sourceArray.data.mappings.mappings[i].data)[colSubcategory]);
 
@@ -14033,10 +14569,10 @@ export class SfIEvents extends LitElement {
           this._SfLoader.innerHTML = '<div class="lds-dual-ring"></div>';
           this._SfLoader.innerHTML += ('<div class="lds-text"><div class="lds-text-c"></div></div>');
         }
-        // setTimeout(() => {
-        //   this.renderMappingTable(divElement, jsonData, cursor, fetchFunction, searchString, mappedArray, found, uploadFunction, refreshFunction, extraFields, uploadBlock, extraFieldPosition, colName, inputFilter.value, statuteColName, extraHintsArr)
-        //   this._SfLoader.innerHTML = '';
-        // }, 1000);
+        setTimeout(() => {
+          this.renderMappingTable(divElement, jsonData, cursor, fetchFunction, searchString, mappedArray, found, uploadFunction, refreshFunction, extraFields, uploadBlock, extraFieldPosition, colName, inputFilter.value, statuteColName, extraHintsArr)
+          this._SfLoader.innerHTML = '';
+        }, 1000);
         
       }
 
@@ -14211,9 +14747,9 @@ export class SfIEvents extends LitElement {
       arrCheckBoxes[i].addEventListener('change', async (_e: any) => {
         //console.log(e.currentTarget, (e.currentTarget as HTMLInputElement).checked);
         ((divElement as HTMLDivElement).querySelector('.button-save') as HTMLButtonElement).disabled = false;
-        // if(extraFieldPosition === 1) {
-        //   await this.saveMapping (divElement, uploadBlock, jsonData, extraFields, searchString, uploadFunction, refreshFunction, true)
-        // }
+        if(extraFieldPosition === 1) {
+          await this.saveMapping (divElement, uploadBlock, jsonData, extraFields, searchString, uploadFunction, refreshFunction, true)
+        }
       });
     }
 
@@ -14615,7 +15151,7 @@ export class SfIEvents extends LitElement {
 
     (this._SfOnboardingActivationsContainer as HTMLDivElement).innerHTML = html;
 
-    this.renderTaggingTable((this._SfOnboardingActivationListContainer as HTMLDivElement),mappedSerializedExtensions, mappedActivations, [ ], this.uploadActivationsMapping, this.loadOnboardingActivations, "activations", ["id", "entityname", "locationname"], '', "", ["activations"], activationsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+    this.renderTaggingTable((this._SfOnboardingActivationListContainer as HTMLDivElement),mappedSerializedExtensions, mappedActivations, [], this.uploadActivationsMapping, this.loadOnboardingActivations, "activations", ["id", "entityname", "locationname"], '', "", ["activations"], activationsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
 
   }
   
@@ -14641,7 +15177,7 @@ export class SfIEvents extends LitElement {
 
     (this._SfOnboardingAlertSchedulesContainer as HTMLDivElement).innerHTML = html;
 
-    this.renderTaggingTable((this._SfOnboardingAlertSchedulesListContainer as HTMLDivElement),mappedSerializedExtensions, mappedAlertSchedules, [ ], this.uploadAlertSchedulesMapping, this.loadOnboardingAlertSchedules, "alertschedules", ["id", "entityname", "locationname"], '', "", ["alertschedules"], alertschedulesJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+    this.renderTaggingTable((this._SfOnboardingAlertSchedulesListContainer as HTMLDivElement),mappedSerializedExtensions, mappedAlertSchedules, [], this.uploadAlertSchedulesMapping, this.loadOnboardingAlertSchedules, "alertschedules", ["id", "entityname", "locationname"], '', "", ["alertschedules"], alertschedulesJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
 
   }
 
@@ -14693,7 +15229,7 @@ export class SfIEvents extends LitElement {
 
     (this._SfOnboardingApproversContainer as HTMLDivElement).innerHTML = html;
 
-    this.renderTaggingTable((this._SfOnboardingApproversListContainer as HTMLDivElement),mappedSerializedReporters, mappedApprovers, ["obligation","firstlineofdefence","secondlineofdefence", "country", "statute", "reference"], this.uploadApproversMapping, this.loadOnboardingApprovers, "approvers", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["approvers"], approversJobs, null, ["Client remarks", "FlaggGRC response"], null, "Guidelines", "");
+    this.renderTaggingTable((this._SfOnboardingApproversListContainer as HTMLDivElement),mappedSerializedReporters, mappedApprovers, [], this.uploadApproversMapping, this.loadOnboardingApprovers, "approvers", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["approvers"], approversJobs, null, ["Client remarks", "FlaggGRC response"], null, "Guidelines", "");
 
   }
 
@@ -14796,7 +15332,6 @@ export class SfIEvents extends LitElement {
 
     (this._SfOnboardingFunctionsContainer as HTMLDivElement).innerHTML = html;
 
-    // this.renderTaggingTable((this._SfOnboardingFunctionsListContainer as HTMLDivElement),mappedSerializedLocations, mappedFunctions, ["obligation","firstlineofdefence", "country", "statute", "reference"], this.uploadFunctionsMapping, this.loadOnboardingFunctions, "functions", ["id", "countryname", "entityname", "locationname"], this.apiIdTags, "&Function", ["functions"], functionsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
     this.renderTaggingTable((this._SfOnboardingFunctionsListContainer as HTMLDivElement),mappedSerializedLocations, mappedFunctions, [], this.uploadFunctionsMapping, this.loadOnboardingFunctions, "functions", ["id", "countryname", "entityname", "locationname"], this.apiIdTags, "&Function", ["functions"], functionsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
 
   }
@@ -16269,76 +16804,112 @@ export class SfIEvents extends LitElement {
 
   }
 
-  renderChartSettingsSettings = (container: HTMLDivElement) => {
+  renderChartSettingsSettings = (container: HTMLDivElement, selectedTab: number = 1) => {
 
-    var html = `
-    
-      <div class="m-10" part="settings-container">
-        <div class="d-flex justify-end">
-          <button id="chart-control-cancel" class="material-icons" part="button-icon-small">close</button>
-        </div>
+    var html = ``
+    if(selectedTab == 1){
+      html = `
+      
+        <div class="m-10" part="settings-container">
+          <div class="d-flex justify-end">
+            <button id="chart-control-cancel" class="material-icons" part="button-icon-small">close</button>
+          </div>
 
-        <div class="d-flex justify-center">
-          <div class="p-10 mr-10 w-100">
-            <div part="td-head">Reports</div>
-            <div part="td-body" class="d-flex align-center mt-10 flex-wrap">
-              <div class="mr-10 d-flex align-center mb-10">
-                <input type="radio" id="radio-csv" class="switch-csv" value="Excel" checked name="radio-report" part="radio-download"/>
-                <label for="radio-csv" part="label-radio-download" class="mr-10">Summary (CSV)</label>
-              </div>
-              <div class="mr-10 d-flex align-center mb-10">
-                <input type="radio" id="radio-image" class="switch-image" value="Image" name="radio-report" part="radio-download"/>
-                <label for="radio-image" part="label-radio-download" class="mr-10">Image (PNG)</label>
+          <div class="d-flex justify-center">
+            <div class="p-10 mr-10 w-100">
+              <div part="td-head">Reports</div>
+              <div part="td-body" class="d-flex align-center mt-10 flex-wrap">
+                <div class="mr-10 d-flex align-center mb-10">
+                  <input type="radio" id="radio-csv" class="switch-csv" value="Excel" checked name="radio-report" part="radio-download"/>
+                  <label for="radio-csv" part="label-radio-download" class="mr-10">Summary (CSV)</label>
+                </div>
+                <div class="mr-10 d-flex align-center mb-10">
+                  <input type="radio" id="radio-image" class="switch-image" value="Image" name="radio-report" part="radio-download"/>
+                  <label for="radio-image" part="label-radio-download" class="mr-10">Image (PNG)</label>
+                </div>
+                <div class="mr-10 d-flex align-center mb-10">
+                  <input type="radio" id="radio-stats" class="switch-image" value="Stats" name="radio-report" part="radio-download"/>
+                  <label for="radio-stats" part="label-radio-download" class="mr-10">Stats (HTML)</label>
+                </div>
+                <div class="mr-10 d-flex align-center mb-10">
+                  <input type="radio" id="radio-list" class="switch-image" value="List" name="radio-report" part="radio-download"/>
+                  <label for="radio-list" part="label-radio-download" class="mr-10">List (HTML)</label>
+                </div>
+                <div class="mr-10 d-flex align-center mb-10">
+                  <input type="radio" id="radio-list-csv" class="switch-image" value="List" name="radio-report" part="radio-download"/>
+                  <label for="radio-list-csv" part="label-radio-download" class="mr-10">List (CSV)</label>
+                </div>
+                <div class="mr-10 d-flex align-center mb-10">
+                  <input type="radio" id="radio-consolidated" class="switch-image" value="Consolidated" name="radio-report" part="radio-download"/>
+                  <label for="radio-consolidated" part="label-radio-download" class="mr-10">Consolidated (HTML)</label>
+                </div>
+                <div class="mr-10 d-flex align-center mb-10">
+                  <input type="radio" id="radio-certificate" class="switch-image" value="Certificate" name="radio-report" part="radio-download"/>
+                  <label for="radio-certificate" part="label-radio-download" class="mr-10">Certificate (HTML)</label>
+                </div>
               </div>
-              <div class="mr-10 d-flex align-center mb-10">
-                <input type="radio" id="radio-stats" class="switch-image" value="Stats" name="radio-report" part="radio-download"/>
-                <label for="radio-stats" part="label-radio-download" class="mr-10">Stats (HTML)</label>
+              <div class="d-flex mt-10">
+                <button id="button-download-stats" part="button" class="mt-5 ml-10">Download</button>
               </div>
-              <div class="mr-10 d-flex align-center mb-10">
-                <input type="radio" id="radio-list" class="switch-image" value="List" name="radio-report" part="radio-download"/>
-                <label for="radio-list" part="label-radio-download" class="mr-10">List (HTML)</label>
+            </div>
+            <!-- <div class="p-10 ml-10 mr-10">
+              <div part="td-head">Compliances</div>
+              <div part="td-body" class="d-flex align-center mt-5">
+                <input type="radio" id="radio-csv" class="switch-csv" value="Excel" checked part="radio-download"/>
+                <label for="radio-html" part="label-radio-download">Html</label>
               </div>
-              <div class="mr-10 d-flex align-center mb-10">
-                <input type="radio" id="radio-list-csv" class="switch-image" value="List" name="radio-report" part="radio-download"/>
-                <label for="radio-list-csv" part="label-radio-download" class="mr-10">List (CSV)</label>
+              <div class="d-flex">
+                <button id="button-download-compliances" part="button" class="mt-5">Download</button>
               </div>
-              <div class="mr-10 d-flex align-center mb-10">
-                <input type="radio" id="radio-consolidated" class="switch-image" value="Consolidated" name="radio-report" part="radio-download"/>
-                <label for="radio-consolidated" part="label-radio-download" class="mr-10">Consolidated (HTML)</label>
+            </div>
+            <div class="p-10 ml-10">
+              <div part="td-head">Certificate</div>
+              <div part="td-body" class="d-flex align-center mt-5">
+                <input type="radio" id="radio-html" class="switch-html" value="Html" checked part="radio-download"/>
+                <label for="radio-html" part="label-radio-download">Html</label>
               </div>
-              <div class="mr-10 d-flex align-center mb-10">
-                <input type="radio" id="radio-certificate" class="switch-image" value="Certificate" name="radio-report" part="radio-download"/>
-                <label for="radio-certificate" part="label-radio-download" class="mr-10">Certificate (HTML)</label>
+              <div class="d-flex">
+                <button id="button-download-certificate" part="button" class="mt-5">Download</button>
               </div>
-            </div>
-            <div class="d-flex mt-10">
-              <button id="button-download-stats" part="button" class="mt-5 ml-10">Download</button>
-            </div>
+            </div> -->
           </div>
-          <!-- <div class="p-10 ml-10 mr-10">
-            <div part="td-head">Compliances</div>
-            <div part="td-body" class="d-flex align-center mt-5">
-              <input type="radio" id="radio-csv" class="switch-csv" value="Excel" checked part="radio-download"/>
-              <label for="radio-html" part="label-radio-download">Html</label>
-            </div>
-            <div class="d-flex">
-              <button id="button-download-compliances" part="button" class="mt-5">Download</button>
-            </div>
+        </div>
+      
+      `;
+    }else{
+      html = `
+      
+        <div class="m-10" part="settings-container">
+          <div class="d-flex justify-end">
+            <button id="chart-control-cancel" class="material-icons" part="button-icon-small">close</button>
           </div>
-          <div class="p-10 ml-10">
-            <div part="td-head">Certificate</div>
-            <div part="td-body" class="d-flex align-center mt-5">
-              <input type="radio" id="radio-html" class="switch-html" value="Html" checked part="radio-download"/>
-              <label for="radio-html" part="label-radio-download">Html</label>
-            </div>
-            <div class="d-flex">
-              <button id="button-download-certificate" part="button" class="mt-5">Download</button>
+
+          <div class="d-flex justify-center">
+            <div class="p-10 mr-10 w-100">
+              <div part="td-head">Reports</div>
+              <div part="td-body" class="d-flex align-center mt-10 flex-wrap">
+                <div class="mr-10 d-flex align-center mb-10">
+                  <input type="radio" id="radio-csv" class="switch-csv" value="Excel" checked name="radio-report" part="radio-download"/>
+                  <label for="radio-csv" part="label-radio-download" class="mr-10">Summary (CSV)</label>
+                </div>
+                <div class="mr-10 d-flex align-center mb-10">
+                  <input type="radio" id="radio-image" class="switch-image" value="Image" name="radio-report" part="radio-download"/>
+                  <label for="radio-image" part="label-radio-download" class="mr-10">Image (PNG)</label>
+                </div>
+                <div class="mr-10 d-flex align-center mb-10">
+                  <input type="radio" id="radio-stats" class="switch-image" value="Stats" name="radio-report" part="radio-download"/>
+                  <label for="radio-stats" part="label-radio-download" class="mr-10">Stats (HTML)</label>
+                </div>
+              </div>
+              <div class="d-flex mt-10">
+                <button id="button-download-stats" part="button" class="mt-5 ml-10">Download</button>
+              </div>
             </div>
-          </div> -->
+          </div>
         </div>
-      </div>
-    
-    `;
+      
+      `;
+    }
 
     container.innerHTML = html;
 
@@ -16350,6 +16921,7 @@ export class SfIEvents extends LitElement {
     });
 
     container.querySelector('#button-download-stats')?.addEventListener('click', async () => {
+      if(selectedTab === -1)
       await this.fetchAndYearlyRenderUserCalendar_2(this.sdate, this.edate,"", "no");
       const radioCsv = (container.querySelector('#radio-csv') as HTMLInputElement);
       const radioImage = (container.querySelector('#radio-image') as HTMLInputElement);
@@ -16404,9 +16976,19 @@ export class SfIEvents extends LitElement {
 
       if(radioStats.checked) {
         const ts = new Date().getTime();
-
+        console.log('htmlstatsfilter', this.htmlStatsFilter, selectedTab);
         var html = this.COMPLIANCES_HTML;
         html = html.replace(/PROJECT_NAME/g, this.projectName);
+        if(selectedTab == -1){
+          html = html.replace(/FILTERS_DATA/g, '');
+        }else{
+          let filtersHtml = `
+            <div>
+              ${this.htmlStatsFilter}
+            </div>
+          `
+          html = html.replace(/FILTERS_DATA/g, filtersHtml);
+        }
         html = html.replace(/REPORT_DATE/g, new Date().getDate() + "/" + (new Date().getMonth()+1) + "/" + new Date().getFullYear() + " " + new Date().getHours() + ":" + new Date().getMinutes() + ' for the period ' + this.period);
 
         let tempHtml: string = "";
@@ -16427,11 +17009,12 @@ export class SfIEvents extends LitElement {
         a.click()
       }
 
-      if(radioList.checked) {
+      if(radioList?.checked) {
         const ts = new Date();
 
         var html = this.COMPLIANCES_HTML;
         html = html.replace(/PROJECT_NAME/g, this.projectName);
+        html = html.replace(/FILTERS_DATA/g, '');
         html = html.replace(/REPORT_DATE/g, new Date().getDate() + "/" + (new Date().getMonth()+1) + "/" + new Date().getFullYear() + " " + new Date().getHours() + ":" + new Date().getMinutes() + ' for the period ' + this.period);
 
         let tempHtml: string = "";
@@ -16446,7 +17029,7 @@ export class SfIEvents extends LitElement {
         a.click()
       }
 
-      if(radioListCsv.checked) {
+      if(radioListCsv?.checked) {
         const ts = new Date();
         console.log(this.csvDataCompliances);
         const blob = new Blob([this.csvDataCompliances], { type: 'text/csv' });
@@ -16457,12 +17040,13 @@ export class SfIEvents extends LitElement {
         a.click()
       }
 
-      if(radioConsolidated.checked) {
+      if(radioConsolidated?.checked) {
 
         const ts = new Date().getTime();
 
         var html = this.COMPLIANCES_HTML;
         html = html.replace(/PROJECT_NAME/g, this.projectName);
+        html = html.replace(/FILTERS_DATA/g, '');
         html = html.replace(/REPORT_DATE/g, new Date().getDate() + "/" + (new Date().getMonth()+1) + "/" + new Date().getFullYear() + " " + new Date().getHours() + ":" + new Date().getMinutes() + ' for the period ' + this.period);
 
         let tempHtml: string = "";
@@ -16485,7 +17069,7 @@ export class SfIEvents extends LitElement {
 
       }
 
-      if(radioCertificate.checked) {
+      if(radioCertificate?.checked) {
 
         var html = this.CERTIFICATE_HTML;
         html = html.replace(/PERSON_NAME/g, this.userName);
@@ -16538,7 +17122,7 @@ export class SfIEvents extends LitElement {
   }
 
   renderChartSettings = (container: HTMLDivElement, selectedTab: number = -1, selectedSummary: number = -1, ctx: any) => {
-
+    console.log('rendering chart settings', selectedSummary);
     var html = '';
 
     html += '<div class="d-flex justify-end align-start">';
@@ -16554,7 +17138,7 @@ export class SfIEvents extends LitElement {
     }
     if (selectedSummary === 1) {
       html += '<button class="tab-button" id="chart-control-summary" part="calendar-tab-button-selected" class="mr-10"><span class="material-icons">summarize</span></button>';
-    } else {
+    } else if(selectedSummary !== 2) {
       html += '<button class="tab-button" id="chart-control-summary" part="calendar-tab-button-not-selected" class="mr-10"><span class="material-icons">summarize</span></button>';
     }
     html += '</div>';
@@ -16563,7 +17147,7 @@ export class SfIEvents extends LitElement {
 
     (container.querySelector('#chart-settings-controls') as HTMLDivElement).querySelector('#chart-control-settings')?.addEventListener('click', () => {
 
-      this.renderChartSettings(container, 1, -1, ctx);
+      this.renderChartSettings(container, 1, selectedSummary, ctx);
 
     });
     (container.querySelector('#chart-settings-controls') as HTMLDivElement).querySelector('#chart-control-summary')?.addEventListener('click', () => {
@@ -16585,10 +17169,10 @@ export class SfIEvents extends LitElement {
       this.renderChartSettingsFilters((container.querySelector('#chart-settings') as HTMLDivElement), ctx);
     }
 
-    if(selectedTab === 1) {
+    if(selectedTab === 1 ) {
       // const radioCompleteness = container.querySelector('#radio-completeness') as HTMLButtonElement;
       // radioCompleteness.click();
-      this.renderChartSettingsSettings((container.querySelector('#chart-settings') as HTMLDivElement));
+      this.renderChartSettingsSettings((container.querySelector('#chart-settings') as HTMLDivElement), selectedSummary);
     }
 
     (container.querySelector('#chart-settings') as HTMLDivElement).addEventListener('canceled', () => {
@@ -16610,7 +17194,11 @@ export class SfIEvents extends LitElement {
       //   this.renderPast(this.streamIndex);
       // }
       if(this.getCurrentTab() == this.TAB_CUSTOM) {
-        this.processDateSelection(container);
+        if(selectedSummary === 2){
+          this.processDateSelectionViewer(container)
+        }else{
+          this.processDateSelection(container);
+        }
       }
     })
 
@@ -17202,7 +17790,9 @@ export class SfIEvents extends LitElement {
 
               
             }
-            this.chart4Base64 = (this.chart4 as Chart).toBase64Image()
+            if(this.chart4 != null){
+              this.chart4Base64 = (this.chart4 as Chart).toBase64Image()
+            }
           }
         },
         scales: {
@@ -17404,7 +17994,9 @@ export class SfIEvents extends LitElement {
 
               
             }
-            this.chart3Base64 = (this.chart3 as Chart).toBase64Image();
+            if(this.chart3 != null){
+              this.chart3Base64 = (this.chart3 as Chart).toBase64Image();
+            }
           }
         },
         scales: {
@@ -17594,7 +18186,9 @@ export class SfIEvents extends LitElement {
               }
 
             }
-            this.chart2Base64 = (this.chart2 as Chart).toBase64Image();
+            if(this.chart2 != null){
+              this.chart2Base64 = (this.chart2 as Chart).toBase64Image();
+            }
           }
         },
         scales: {
@@ -17830,8 +18424,9 @@ export class SfIEvents extends LitElement {
               }
 
             }
-            this.chartBase64 = (this.chart as Chart).toBase64Image();
-            console.log('this.chart onAnimationComplete', this.chart, (this.chart as Chart).toBase64Image())
+            if(this.chart != null){
+              this.chartBase64 = (this.chart as Chart).toBase64Image();
+            }
           }
         },
         scales: {
@@ -18500,7 +19095,7 @@ export class SfIEvents extends LitElement {
     var html = '';
 
     html += '<button class="tab-button mb-10" id="calendar-tab-month" part="'+(selectedTab == this.TAB_STREAM ? 'calendar-tab-button-selected' : 'calendar-tab-button-not-selected')+'">Month</button>';
-    html += '<button class="tab-button mb-10" id="calendar-tab-custom" part="'+(selectedTab == this.TAB_CUSTOM ? 'calendar-tab-button-selected' : 'calendar-tab-button-not-selected')+'">Range</button>';
+    html += '<button class="tab-button mb-10" id="calendar-tab-custom" part="'+(selectedTab == this.TAB_CUSTOM ? 'calendar-tab-button-selected' : 'calendar-tab-button-not-selected')+'">' + (this.myRole == this.TAB_VIEWER ? "Statistics" : "Range")+ '</button>';
     html += '<button class="tab-button mb-10" id="calendar-tab-register" part="'+(selectedTab == this.TAB_REGISTERS ? 'calendar-tab-button-selected' : 'calendar-tab-button-not-selected')+'">Registers</button>';
     html += '<button class="tab-button tab-button-secondary mb-10 '+(selectedTab == this.TAB_FIND ? '' : 'hide')+'" id="calendar-tab-find" part="'+(selectedTab == this.TAB_FIND ? 'calendar-tab-button-selected' : 'calendar-tab-button-not-selected')+'">Search</button>';
     html += '<button class="tab-button tab-button-secondary mb-10 '+(selectedTab == this.TAB_THIS ? '' : 'hide')+'" id="calendar-tab-this" part="'+(selectedTab == this.TAB_THIS ? 'calendar-tab-button-selected' : 'calendar-tab-button-not-selected')+'">Current</button>';
@@ -18611,7 +19206,12 @@ export class SfIEvents extends LitElement {
     (this._SfTabContainer as HTMLDivElement).querySelector('#calendar-tab-custom')?.addEventListener('click', () => {
       this.enableCustom();
       this.renderTabs(this.TAB_CUSTOM);
-      this.renderCustom();
+      console.log('stats clicked');
+      if(this.myRole == this.TAB_VIEWER){
+        this.renderCustomViewer()
+      }else{
+        this.renderCustom();
+      }
     });
 
     (this._SfTabContainer as HTMLDivElement).querySelector('#calendar-tab-find')?.addEventListener('click', () => {
@@ -21647,6 +22247,72 @@ export class SfIEvents extends LitElement {
 
   }
 
+  fetchStatistics = async(startDate: string = "", endDate: string = "", filtercriteria: string, filterid: string) => {
+
+    let path = "";
+    this.sdate = startDate;
+    this.edate = endDate;
+    
+
+    path = "getstatistics";
+
+    let sDate = "";
+    let eDate = "";
+
+    //console.log('currenttab', this.getCurrentTab());
+
+    if(this.getCurrentTab() == this.TAB_YEAR) {
+      sDate = "03/31/" + this.calendarStartYYYY;
+      eDate = "04/01/" + (parseInt(this.calendarStartYYYY) + 1);
+    } else {
+      sDate = startDate;
+      eDate = endDate;
+    }
+
+
+    let url = "https://"+this.apiId+"/"+ path;
+    
+    //console.log('fetch calendar url', url);
+    let urlBody :any = {"projectid": this.projectId, "userid": this.userProfileId, "role": this.myRole, "sdate": sDate, "edate": eDate};
+
+    if(filtercriteria == 'function') {
+      urlBody["functionid"] = filterid;
+      urlBody["locationid"] = '';
+      urlBody["filteruserrole"] = '';
+      urlBody["filteruserid"] = '';
+    }else if(filtercriteria == 'location'){
+      urlBody["functionid"] = '';
+      urlBody["locationid"] = filterid;
+      urlBody["filteruserrole"] = '';
+      urlBody["filteruserid"] = '';
+    }else{
+      urlBody["functionid"] = '';
+      urlBody["locationid"] = '';
+      urlBody["filteruserrole"] = filtercriteria;
+      urlBody["filteruserid"] = filterid;
+    }
+
+    console.log('urlbody', urlBody);
+
+    const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
+    const xhr : any = (await this.prepareXhr(urlBody, url, this._SfLoader, authorization, 'Preparing')) as any;
+    this._SfLoader.innerHTML = '';
+    if(xhr.status == 200) {
+
+      const jsonRespose = JSON.parse(xhr.responseText);
+      console.log('jsonRespose Statistics', jsonRespose);
+      this.statistics = jsonRespose.data
+      if(jsonRespose.meta != null) 
+      this.statisticsMeta = jsonRespose.meta 
+      return jsonRespose.meta
+
+    } else {
+      const jsonRespose = JSON.parse(xhr.responseText);
+      this.setError(jsonRespose.error);
+    }
+
+  }
+
   fetchBulkReportingData = async() => {
     let path = "getbulkreportjobs"
     let urlBody :any = {"projectid": this.projectId}