sf-i-events 1.0.733 → 1.0.734

package/sf-i-events.js

@@ -473,6 +473,9 @@ let SfIEvents = 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">
@@ -1105,6 +1108,8 @@ let SfIEvents = class SfIEvents extends LitElement {
         this.triggers = null;
         this.monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
         this.events = null;
+        this.statistics = null;
+        this.statisticsMeta = null;
         this.streamIndex = null;
         this.eventsInWindow = null;
         this.eventHideFields = null;
@@ -1146,6 +1151,7 @@ let SfIEvents = class SfIEvents extends LitElement {
         this.htmlDataCompliances = "";
         this.htmlDataStats = "";
         this.htmlDataSummary = "";
+        this.htmlStatsFilter = "";
         this.period = "";
         this.flowRcmNotification = 0;
         this.flowGraph = "";
@@ -2136,6 +2142,22 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += '</div>';
             return html;
         };
+        this.renderCalendarStatisticsGraphs = (showGraph, parametersTitle) => {
+            //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;
+        };
         this.renderCalendarContainerDivStart = (index) => {
             var html = '';
             html += '<div id="stream-event-' + index + '" part="stream-event-list" class="stream-event-list">';
@@ -2236,7 +2258,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 }
             }
             let lastUpdated = '';
-            console.log('lastUpdated', event.lastupdated);
+            // console.log('lastUpdated', event.lastupdated);
             if (event.lastupdated != null && event.lastupdated.length > 0) {
                 lastUpdated = event.lastupdated;
             }
@@ -2314,7 +2336,7 @@ let SfIEvents = 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';
@@ -2495,7 +2517,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             let reporterStr = this.getReporterStringFromEvent(event);
             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;
         };
@@ -2700,6 +2722,62 @@ let SfIEvents = class SfIEvents extends LitElement {
             this.htmlDataStats += '<tr><td class="w-14 text-center td-odd">' + total + '</td><td class="w-14 text-center td-odd">' + scheduled + '</td><td class="w-14 text-center td-odd">' + notComplied + '</td><td class="w-14 text-center td-odd">' + partiallyComplied + '</td><td class="w-14 text-center td-odd">' + complied + '</td><tr></table>';
             return html;
         };
+        this.renderStatistics = (_firstDay, _endDay, iInit, iLast, showGraph, index, month, period, firstDate = null, parametersTitle) => {
+            var _a, _b, _c, _f;
+            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 = "";
+                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 += (_a = this.statistics[mmdd]["not-started"]) !== null && _a !== void 0 ? _a : 0;
+                    pendingApproval += (_b = this.statistics[mmdd]["pending-approval"]) !== null && _b !== void 0 ? _b : 0;
+                    rejected += (_c = this.statistics[mmdd]["rejected"]) !== null && _c !== void 0 ? _c : 0;
+                    approved += (_f = this.statistics[mmdd]["approved"]) !== null && _f !== void 0 ? _f : 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;
+        };
         this.renderReporting = (event, mmddyyyy) => {
             let html = '';
             let completeness = this.getCompletenessStatus(event);
@@ -3985,6 +4063,112 @@ let SfIEvents = class SfIEvents extends LitElement {
             // this.htmlDataStats = '<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">In Progress</th><th class="w-14">Past Due Date</th><th class="w-14">Late Executed</th><th class="w-14">Late Approved</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">'+inProgress+'</td><td class="w-14 text-center td-odd">'+pastDueDate+'</td><td class="w-14 text-center td-odd">'+lateExecuted+'</td><td class="w-14 text-center td-odd">'+lateApproved+'</td><tr></table>';
         };
+        this.renderRangeStatistics = (firstDate, count, eventsContainer) => {
+            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 === null || endDay === void 0 ? void 0 : 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');
+            buttonRefresh.addEventListener('click', async () => {
+                this.processDateSelectionViewer(eventsContainer);
+            });
+        };
+        this.renderStatisticsFilters = (eventsContainer) => {
+            let selectFilterCriteria = eventsContainer.querySelector('#select-filter-criteria');
+            let inputLabelFilter = eventsContainer.querySelector('#input-label-filter');
+            selectFilterCriteria.style.display = 'block';
+            inputLabelFilter.style.display = 'block';
+            // let selectedCriteria = ""
+            selectFilterCriteria.innerHTML = "";
+            let option = new Option();
+            option.value = "";
+            option.innerHTML = "All";
+            selectFilterCriteria.add(option);
+            for (let criteria of Object.keys(this.statisticsMeta)) {
+                // if(i == 0){
+                //   selectedCriteria = criteria
+                // }
+                let option = new Option();
+                option.value = criteria;
+                option.innerHTML = Util.titleCase(criteria);
+                selectFilterCriteria.add(option);
+            }
+            selectFilterCriteria.addEventListener('change', (ev) => {
+                let target = ev.target;
+                let inputLabelCriteria = eventsContainer.querySelector('#input-label-criteria');
+                let selectFilterValues = eventsContainer.querySelector('#select-filter-values');
+                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) {
+                    selectFilterValues.style.display = 'block';
+                    inputLabelCriteria.style.display = 'block';
+                    inputLabelCriteria.innerHTML = Util.titleCase(target.value);
+                    for (let filter of this.statisticsMeta[target.value]) {
+                        let option = new Option();
+                        option.value = filter.split(';')[1];
+                        option.innerHTML = Util.titleCase(filter.split(';')[0]).replace(/\([^)]*\)/g, "");
+                        selectFilterValues.add(option);
+                    }
+                    selectFilterValues.addEventListener('change', () => {
+                        console.log('changed');
+                        this.processDateSelectionViewer(eventsContainer);
+                    });
+                }
+                else {
+                    selectFilterValues.style.display = 'none';
+                    inputLabelCriteria.style.display = 'none';
+                }
+            });
+            let selectFilterValues = eventsContainer.querySelector('#select-filter-values');
+            let inputLabelCriteria = eventsContainer.querySelector('#input-label-criteria');
+            selectFilterValues.style.display = 'none';
+            inputLabelCriteria.style.display = 'none';
+            // inputLabelCriteria.innerHTML = selectedCriteria
+            // selectFilterValues.innerHTML = ""
+            // option = new Option()
+            // option.value = "";
+            // option.innerHTML = "All"
+            // selectFilterValues.add(option)
+            // if(this.statisticsMeta[selectedCriteria] != null){
+            //   for(let filter of this.statisticsMeta[selectedCriteria]){
+            //     let option = new Option()
+            //     option.value = filter.split(';')[1];
+            //     option.innerHTML = Util.titleCase(filter.split(';')[0]).replace(/\([^)]*\)/g,"")
+            //     selectFilterValues.add(option)
+            //   }
+            // }
+            // selectFilterValues.addEventListener('change',() => {
+            //   console.log('changed')
+            //   this.processDateSelectionViewer(eventsContainer);
+            // })
+        };
         this.renderSelectAllButtons = () => {
             let selectAllHtml = '<div class="d-flex justify-end w-100" style="position: fixed; bottom: 70px; left: 0px;" part="button-select-all-container">';
             selectAllHtml += '<button part="button-select-all" id="button-select-all" class="d-flex align-center mt-10 mr-10 ml-10"><span class="material-symbols-outlined">select_all</span>&nbsp;<h4>Select All</h4><span>&nbsp;(Max ' + this.selectallblock + ')</span></button>';
@@ -4321,6 +4505,96 @@ let SfIEvents = class SfIEvents extends LitElement {
                 this.renderCompletenessGraph(eventContainer);
             }
         };
+        this.processDateSelectionViewer = async (eventContainer) => {
+            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.querySelector('#stream-start-date').value;
+            if (valueStart == "") {
+                valueStart = this._SfCustomContainer.querySelector('#stream-start-date-mobile').value;
+            }
+            var valueEnd = this._SfCustomContainer.querySelector('#stream-end-date').value;
+            if (valueEnd == "") {
+                valueEnd = this._SfCustomContainer.querySelector('#stream-end-date-mobile').value;
+            }
+            //console.log('valuestart', valueStart);
+            //console.log('valueend', valueEnd);
+            let filtercriteria = this._SfCustomContainer.querySelector('#select-filter-criteria').value;
+            let filtercriterianame = "";
+            console.log('criteria', this._SfCustomContainer.querySelector('#select-filter-criteria').options[this._SfCustomContainer.querySelector('#select-filter-criteria').selectedIndex]);
+            if (this._SfCustomContainer.querySelector('#select-filter-criteria').options[this._SfCustomContainer.querySelector('#select-filter-criteria').selectedIndex] != null) {
+                filtercriterianame = this._SfCustomContainer.querySelector('#select-filter-criteria').options[this._SfCustomContainer.querySelector('#select-filter-criteria').selectedIndex].innerHTML;
+            }
+            if (filtercriteria == "") {
+                filtercriteria = this._SfCustomContainer.querySelector('#select-filter-criteria-mobile').value;
+                if (this._SfCustomContainer.querySelector('#select-filter-criteria-mobile').options[this._SfCustomContainer.querySelector('#select-filter-criteria-mobile').selectedIndex] != null) {
+                    filtercriterianame = this._SfCustomContainer.querySelector('#select-filter-criteria-mobile').options[this._SfCustomContainer.querySelector('#select-filter-criteria-mobile').selectedIndex].innerHTML;
+                }
+            }
+            let filtervalue = this._SfCustomContainer.querySelector('#select-filter-values').value;
+            let filtervaluename = "";
+            if (this._SfCustomContainer.querySelector('#select-filter-values').options[this._SfCustomContainer.querySelector('#select-filter-values').selectedIndex] != null) {
+                filtervaluename = this._SfCustomContainer.querySelector('#select-filter-values').options[this._SfCustomContainer.querySelector('#select-filter-values').selectedIndex].innerHTML;
+            }
+            if (filtervalue == "") {
+                filtervalue = this._SfCustomContainer.querySelector('#select-filter-values-mobile').value;
+                if (this._SfCustomContainer.querySelector('#select-filter-values-mobile').options[this._SfCustomContainer.querySelector('#select-filter-values-mobile').selectedIndex] != null) {
+                    filtervaluename = this._SfCustomContainer.querySelector('#select-filter-values-mobile').options[this._SfCustomContainer.querySelector('#select-filter-values-mobile').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.innerHTML = "Chosen Start Date cannot be earlier than " + startDateCalendar;
+                    return;
+                }
+                if (!this.checkEndDateLateness(valueEnd)) {
+                    this._SfStreamEventStatus.innerHTML = "Chosen End Date cannot be later than " + endDateCalendar;
+                    return;
+                }
+                if (new Date(valueStart).getTime() > new Date(valueEnd).getTime()) {
+                    this._SfStreamEventStatus.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.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);
+                if (meta != null)
+                    this.renderStatisticsFilters(this._SfCustomContainer);
+            }
+            else if (valueStart != "" && valueEnd == "") {
+                this._SfStreamEventStatus.innerHTML = "Please select End Date";
+            }
+            else if (valueStart == "" && valueEnd != "") {
+                this._SfStreamEventStatus.innerHTML = "Please select Start Date";
+            }
+            else if (valueStart == "" && valueEnd == "") {
+                this._SfStreamEventStatus.innerHTML = "Please select Start Date and End Date";
+            }
+            this.attachHandlers(eventContainer, valueStart, valueEnd);
+            if (eventContainer.innerHTML.indexOf('myChart') >= 0) {
+                this.renderCompletenessGraph(eventContainer, -1, 2);
+            }
+        };
         this.initFindRightCol = () => {
             var html = "";
             html += '<div id="stream-event-0" part="stream-event-list" class="stream-event-list">';
@@ -4339,6 +4613,15 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += '</div>';
             this._SfCustomContainer.querySelector('.calendar-right-data').innerHTML = html;
         };
+        this.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.querySelector('.calendar-right-data').innerHTML = html;
+        };
         this.checkAndShowBulk = () => {
             const inputArr = this._SfMappingContainer.querySelectorAll('.input-checkbox');
             var checked = 0;
@@ -5942,6 +6225,189 @@ let SfIEvents = class SfIEvents extends LitElement {
             //   })
             // }
         };
+        this.renderCustomViewer = () => {
+            var _a, _b, _c, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            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">';
+            html += '<label part="input-label">Start Date</label><br />';
+            html += '<input id="stream-start-date" 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" 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><br />';
+            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><br />';
+            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.innerHTML = html;
+            this.initCustomRightColViewer();
+            (_a = this._SfCustomContainer.querySelector('#stream-start-date')) === null || _a === void 0 ? void 0 : _a.addEventListener('change', (_ev) => {
+                //console.log('start-date', ev);
+                this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+                this.processDateSelectionViewer(this._SfCustomContainer);
+            });
+            (_b = this._SfCustomContainer.querySelector('#stream-end-date')) === null || _b === void 0 ? void 0 : _b.addEventListener('change', (_ev) => {
+                //console.log('end-date', ev);
+                this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+                this.processDateSelectionViewer(this._SfCustomContainer);
+            });
+            (_c = this._SfCustomContainer.querySelector('#stream-start-date-mobile')) === null || _c === void 0 ? void 0 : _c.addEventListener('change', (_ev) => {
+                //console.log('start-date', ev);
+                this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+                this.processDateSelectionViewer(this._SfCustomContainer);
+            });
+            (_f = this._SfCustomContainer.querySelector('#stream-end-date-mobile')) === null || _f === void 0 ? void 0 : _f.addEventListener('change', (_ev) => {
+                //console.log('end-date', ev);
+                this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+                this.processDateSelectionViewer(this._SfCustomContainer);
+            });
+            (_g = this._SfCustomContainer.querySelector('#button-year-to-date')) === null || _g === void 0 ? void 0 : _g.addEventListener('click', () => {
+                this._SfCustomContainer.querySelector('#stream-start-date-mobile').value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+                this._SfCustomContainer.querySelector('#stream-start-date').value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+                this._SfCustomContainer.querySelector('#stream-end-date-mobile').value = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate());
+                this._SfCustomContainer.querySelector('#stream-end-date').value = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate());
+                this.processDateSelectionViewer(this._SfCustomContainer);
+            });
+            (_h = this._SfCustomContainer.querySelector('#button-year-to-date-mobile')) === null || _h === void 0 ? void 0 : _h.addEventListener('click', () => {
+                this._SfCustomContainer.querySelector('#stream-start-date-mobile').value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+                this._SfCustomContainer.querySelector('#stream-start-date').value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+                this._SfCustomContainer.querySelector('#stream-end-date-mobile').value = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate());
+                this._SfCustomContainer.querySelector('#stream-end-date').value = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate());
+                this.processDateSelectionViewer(this._SfCustomContainer);
+            });
+            (_j = this._SfCustomContainer.querySelector('#button-this-year-mobile')) === null || _j === void 0 ? void 0 : _j.addEventListener('click', () => {
+                this._SfCustomContainer.querySelector('#stream-start-date-mobile').value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+                this._SfCustomContainer.querySelector('#stream-start-date').value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+                this._SfCustomContainer.querySelector('#stream-end-date-mobile').value = (parseInt(this.calendarStartYYYY) + 1) + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+                this._SfCustomContainer.querySelector('#stream-end-date').value = (parseInt(this.calendarStartYYYY) + 1) + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+                this.processDateSelectionViewer(this._SfCustomContainer);
+            });
+            (_k = this._SfCustomContainer.querySelector('#button-this-year')) === null || _k === void 0 ? void 0 : _k.addEventListener('click', () => {
+                this._SfCustomContainer.querySelector('#stream-start-date-mobile').value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+                this._SfCustomContainer.querySelector('#stream-start-date').value = this.calendarStartYYYY + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+                this._SfCustomContainer.querySelector('#stream-end-date-mobile').value = (parseInt(this.calendarStartYYYY) + 1) + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+                this._SfCustomContainer.querySelector('#stream-end-date').value = (parseInt(this.calendarStartYYYY) + 1) + '-' + this.calendarStartMM + '-' + this.calendarStartDD;
+                this.processDateSelectionViewer(this._SfCustomContainer);
+            });
+            (_l = this._SfCustomContainer.querySelector('#button-this-quarter-mobile')) === null || _l === void 0 ? void 0 : _l.addEventListener('click', () => {
+                const mmCurrent = ((new Date().getMonth() + 1));
+                let startDate = "";
+                let endDate = "";
+                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.querySelector('#stream-start-date').value = startDate;
+                this._SfCustomContainer.querySelector('#stream-start-date-mobile').value = startDate;
+                this._SfCustomContainer.querySelector('#stream-end-date').value = endDate;
+                this._SfCustomContainer.querySelector('#stream-end-date-mobile').value = endDate;
+                this.processDateSelectionViewer(this._SfCustomContainer);
+            });
+            (_m = this._SfCustomContainer.querySelector('#button-this-quarter')) === null || _m === void 0 ? void 0 : _m.addEventListener('click', () => {
+                const mmCurrent = ((new Date().getMonth() + 1));
+                let startDate = "";
+                let endDate = "";
+                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.querySelector('#stream-start-date').value = startDate;
+                this._SfCustomContainer.querySelector('#stream-start-date-mobile').value = startDate;
+                this._SfCustomContainer.querySelector('#stream-end-date').value = endDate;
+                this._SfCustomContainer.querySelector('#stream-end-date-mobile').value = endDate;
+                this.processDateSelectionViewer(this._SfCustomContainer);
+            });
+            let selectFileterCriteria = this._SfCustomContainer.querySelector('#select-filter-criteria');
+            selectFileterCriteria.style.display = 'none';
+            let selectFileterValues = this._SfCustomContainer.querySelector('#select-filter-values');
+            selectFileterValues.style.display = 'none';
+            let inputLabelFilter = this._SfCustomContainer.querySelector('#input-label-filter');
+            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);
+            //   })
+            // }
+            (_o = this._SfCustomContainer.querySelector('#button-year-to-date')) === null || _o === void 0 ? void 0 : _o.click();
+            (_p = this._SfCustomContainer.querySelector('#button-year-to-date-mobile')) === null || _p === void 0 ? void 0 : _p.click();
+        };
         this.renderThis = (index = 1, showGraph = true) => {
             var _a, _b;
             this.clearGraphData();
@@ -6259,18 +6725,20 @@ let SfIEvents = class SfIEvents extends LitElement {
             document.addEventListener('scroll', () => {
                 // console.log('scroll',window.scrollY)
                 let buttonRefresh = eventsContainer.querySelector('#button-refresh');
-                if (window.scrollY > 720) {
-                    if (buttonRefresh.style.display == "flex") {
-                    }
-                    else {
-                        buttonRefresh.style.display = 'flex';
-                    }
-                }
-                else {
-                    if (buttonRefresh.style.display == "none") {
+                if (buttonRefresh != null) {
+                    if (window.scrollY > 720) {
+                        if (buttonRefresh.style.display == "flex") {
+                        }
+                        else {
+                            buttonRefresh.style.display = 'flex';
+                        }
                     }
                     else {
-                        buttonRefresh.style.display = 'none';
+                        if (buttonRefresh.style.display == "none") {
+                        }
+                        else {
+                            buttonRefresh.style.display = 'none';
+                        }
                     }
                 }
             });
@@ -6753,7 +7221,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
             //console.log('rendering csv csvComplianceStats', this.csvComplianceStats);
         };
-        this.renderCompletenessGraph = (divContainer) => {
+        this.renderCompletenessGraph = (divContainer, selectedTab = -1, selectedSummary = -1) => {
             this.clearSelectedGraphParam();
             // this.clearSelectedLegend();
             this.csvGraphStats = "";
@@ -6786,7 +7254,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                             ]
                         }]
                 };
-                this.renderChartSettings(divContainer, -1, -1, ctx);
+                this.renderChartSettings(divContainer, selectedTab, selectedSummary, ctx);
                 this.renderChart(ctx, 'doughnut', data, "Completeness");
             }
             const data = {
@@ -6817,7 +7285,7 @@ let SfIEvents = 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");
         };
         this.renderComplianceGraph = (divContainer) => {
@@ -8423,7 +8891,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             const selectedIndex = e.currentTarget.id.split('-')[1];
             // taggingArray.data.mappings.mappings = [];
             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];
                 //taggingArray.data.mappings.mappings.push(sourceArray.data.mappings.mappings[count]);
@@ -8579,9 +9047,7 @@ let SfIEvents = class SfIEvents extends LitElement {
         };
         this.saveTagging = async (mapping, uploadFunction, refreshFunction, saveInBackground) => {
             async function process() {
-                console.log = function () {
-                    console.log('Saving...', mapping);
-                };
+                //console.log('Saving...', mapping);
                 await uploadFunction(mapping);
                 if (!saveInBackground)
                     refreshFunction();
@@ -8916,7 +9382,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                         for (k = 0; k < taggingArray.data.mappings.mappings.length; k++) {
                             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]);
                                 }
@@ -9963,10 +10429,10 @@ let SfIEvents = 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);
                 }
             });
             // More button handlers
@@ -10092,9 +10558,9 @@ let SfIEvents = class SfIEvents extends LitElement {
                 arrCheckBoxes[i].addEventListener('change', async (_e) => {
                     //console.log(e.currentTarget, (e.currentTarget as HTMLInputElement).checked);
                     divElement.querySelector('.button-save').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);
+                    }
                 });
             }
             (_a = divElement.querySelector('.checkbox-all')) === null || _a === void 0 ? void 0 : _a.addEventListener('change', (e) => {
@@ -10446,7 +10912,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += '<div id="approvers-list-container" class="d-flex flex-col w-100 scroll-x">';
             html += '</div>';
             this._SfOnboardingApproversContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingApproversListContainer, 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, mappedSerializedReporters, mappedApprovers, [], this.uploadApproversMapping, this.loadOnboardingApprovers, "approvers", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["approvers"], approversJobs, null, ["Client remarks", "FlaggGRC response"], null, "Guidelines", "");
         };
         this.renderOnboardingFunctionHeads = (mappedFunctionHeads, mappedSerializedApprovers, functionHeadsJobs, _arrFeedbackReference) => {
             var html = '';
@@ -10502,7 +10968,6 @@ let SfIEvents = class SfIEvents extends LitElement {
                 }
             }
             this._SfOnboardingFunctionsContainer.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, mappedSerializedLocations, mappedFunctions, [], this.uploadFunctionsMapping, this.loadOnboardingFunctions, "functions", ["id", "countryname", "entityname", "locationname"], this.apiIdTags, "&Function", ["functions"], functionsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
         };
         this.renderOnboardingLocations = (mappedLocations, mappedSerializedEntities, locationsJobs) => {
@@ -11612,83 +12077,121 @@ let SfIEvents = class SfIEvents extends LitElement {
                 container.dispatchEvent(new CustomEvent('canceled', { bubbles: true }));
             });
         };
-        this.renderChartSettingsSettings = (container) => {
+        this.renderChartSettingsSettings = (container, selectedTab = 1) => {
             var _a, _b, _c, _f;
-            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;
             (_a = container.querySelector('#chart-control-cancel')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
                 container.innerHTML = '';
                 container.dispatchEvent(new CustomEvent('canceled', { bubbles: true }));
             });
             (_b = container.querySelector('#button-download-stats')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', async () => {
-                await this.fetchAndYearlyRenderUserCalendar_2(this.sdate, this.edate, "", "no");
+                if (selectedTab === -1)
+                    await this.fetchAndYearlyRenderUserCalendar_2(this.sdate, this.edate, "", "no");
                 const radioCsv = container.querySelector('#radio-csv');
                 const radioImage = container.querySelector('#radio-image');
                 const radioStats = container.querySelector('#radio-stats');
@@ -11734,8 +12237,20 @@ let SfIEvents = 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 = "";
                     tempHtml += this.htmlDataStats;
@@ -11753,10 +12268,11 @@ let SfIEvents = class SfIEvents extends LitElement {
                     a.setAttribute('download', 'report_' + ts + '.html');
                     a.click();
                 }
-                if (radioList.checked) {
+                if (radioList === null || radioList === void 0 ? void 0 : 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 = "";
                     tempHtml += this.getFilteredString();
@@ -11768,7 +12284,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     a.setAttribute('download', 'report_' + ts + '.html');
                     a.click();
                 }
-                if (radioListCsv.checked) {
+                if (radioListCsv === null || radioListCsv === void 0 ? void 0 : radioListCsv.checked) {
                     const ts = new Date();
                     console.log(this.csvDataCompliances);
                     const blob = new Blob([this.csvDataCompliances], { type: 'text/csv' });
@@ -11778,10 +12294,11 @@ let SfIEvents = class SfIEvents extends LitElement {
                     a.setAttribute('download', 'report_' + ts + '.csv');
                     a.click();
                 }
-                if (radioConsolidated.checked) {
+                if (radioConsolidated === null || radioConsolidated === void 0 ? void 0 : 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 = "";
                     tempHtml += this.htmlDataStats;
@@ -11800,7 +12317,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     a.setAttribute('download', 'report_' + ts + '.html');
                     a.click();
                 }
-                if (radioCertificate.checked) {
+                if (radioCertificate === null || radioCertificate === void 0 ? void 0 : radioCertificate.checked) {
                     var html = this.CERTIFICATE_HTML;
                     html = html.replace(/PERSON_NAME/g, this.userName);
                     html = html.replace(/PERSON_DESIGNATION/g, this.myRole);
@@ -11841,6 +12358,7 @@ let SfIEvents = class SfIEvents extends LitElement {
         };
         this.renderChartSettings = (container, selectedTab = -1, selectedSummary = -1, ctx) => {
             var _a, _b;
+            console.log('rendering chart settings', selectedSummary);
             var html = '';
             html += '<div class="d-flex justify-end align-start">';
             if (selectedTab === 0) {
@@ -11858,13 +12376,13 @@ let SfIEvents = 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>';
             container.querySelector('#chart-settings-controls').innerHTML = html;
             (_a = container.querySelector('#chart-settings-controls').querySelector('#chart-control-settings')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
-                this.renderChartSettings(container, 1, -1, ctx);
+                this.renderChartSettings(container, 1, selectedSummary, ctx);
             });
             (_b = container.querySelector('#chart-settings-controls').querySelector('#chart-control-summary')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => {
                 console.log('summary clicked');
@@ -11881,7 +12399,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             if (selectedTab === 1) {
                 // const radioCompleteness = container.querySelector('#radio-completeness') as HTMLButtonElement;
                 // radioCompleteness.click();
-                this.renderChartSettingsSettings(container.querySelector('#chart-settings'));
+                this.renderChartSettingsSettings(container.querySelector('#chart-settings'), selectedSummary);
             }
             container.querySelector('#chart-settings').addEventListener('canceled', () => {
                 //console.log('canceled');
@@ -11902,7 +12420,12 @@ let SfIEvents = 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);
+                    }
                 }
             });
             // (container.querySelector('#chart-settings-controls') as HTMLDivElement).querySelector('#chart-control-settings-cancel')?.addEventListener('click', () => {
@@ -13501,7 +14024,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
             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>';
@@ -13594,7 +14117,12 @@ let SfIEvents = class SfIEvents extends LitElement {
             (_g = this._SfTabContainer.querySelector('#calendar-tab-custom')) === null || _g === void 0 ? void 0 : _g.addEventListener('click', () => {
                 this.enableCustom();
                 this.renderTabs(this.TAB_CUSTOM);
-                this.renderCustom();
+                if (this.myRole == this.TAB_VIEWER) {
+                    this.renderCustomViewer();
+                }
+                else {
+                    this.renderCustom();
+                }
             });
             (_h = this._SfTabContainer.querySelector('#calendar-tab-find')) === null || _h === void 0 ? void 0 : _h.addEventListener('click', () => {
                 this.enableFind();
@@ -15838,6 +16366,60 @@ let SfIEvents = class SfIEvents extends LitElement {
                 }
             }
         };
+        this.fetchStatistics = async (startDate = "", endDate = "", filtercriteria, filterid) => {
+            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 = { "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 = (await this.prepareXhr(urlBody, url, this._SfLoader, authorization, 'Preparing'));
+            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);
+            }
+        };
         this.fetchBulkReportingData = async () => {
             let path = "getbulkreportjobs";
             let urlBody = { "projectid": this.projectId };
@@ -18883,6 +19465,12 @@ __decorate([
 __decorate([
     property()
 ], SfIEvents.prototype, "events", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "statistics", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "statisticsMeta", void 0);
 __decorate([
     property()
 ], SfIEvents.prototype, "streamIndex", void 0);
@@ -18934,6 +19522,9 @@ __decorate([
 __decorate([
     property()
 ], SfIEvents.prototype, "htmlDataSummary", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "htmlStatsFilter", void 0);
 __decorate([
     property()
 ], SfIEvents.prototype, "period", void 0);