sf-i-events 1.0.739 → 1.0.741

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sf-i-events",
   "private": false,
-  "version": "1.0.739",
+  "version": "1.0.741",
   "description": "Superflows Navigation Component",
   "main": "sf-i-events.js",
   "module": "sf-i-events.js",

package/sf-i-events.d.ts

@@ -186,6 +186,7 @@ export declare class SfIEvents extends LitElement {
     events: any;
     statistics: any;
     statisticsMeta: any;
+    statisticsFiltersData: any;
     streamIndex: any;
     eventsInWindow: any;
     eventHideFields: any;
@@ -268,6 +269,7 @@ export declare class SfIEvents extends LitElement {
     nextTabStatus: string;
     sdate: string;
     edate: string;
+    lastupdated: string;
     changedOnboardingItemIds: string[];
     selectallblock: string;
     static styles: import("lit").CSSResult;
@@ -451,6 +453,9 @@ export declare class SfIEvents extends LitElement {
     renderCalendarContainerDivStart: (index: number) => string;
     renderCalendarContainerDivEnd: () => string;
     renderCalendarEventSummary: () => string;
+    renderStatisticsFiltersTableStart: () => string;
+    renderStatisticsFiltersTableRow: () => string;
+    renderStatisticsFiltersTableEnd: () => string;
     getCalendarRowHide: (events: any, i: number, lastDay: number, month: number, firstDate?: any, currDate?: any) => boolean;
     renderCalendarRowDivStart: (i: number, firstDate?: any, ddmm?: string) => string;
     renderCalendarRowDivEnd: () => string;

package/sf-i-events.js

@@ -1110,6 +1110,7 @@ let SfIEvents = class SfIEvents extends LitElement {
         this.events = null;
         this.statistics = null;
         this.statisticsMeta = null;
+        this.statisticsFiltersData = null;
         this.streamIndex = null;
         this.eventsInWindow = null;
         this.eventHideFields = null;
@@ -1209,6 +1210,7 @@ let SfIEvents = class SfIEvents extends LitElement {
         this.nextTabStatus = "";
         this.sdate = "";
         this.edate = "";
+        this.lastupdated = "";
         this.changedOnboardingItemIds = [];
         this.selectallblock = "100";
         this.isSelectedLegend = (value) => {
@@ -2103,6 +2105,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             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>';
+            html += '<div class="align-center d-flex flex-wrap mb-10 w-100-m-0" part="last-update-title-container"><h6 part="last-update-title">Last Updated on ' + this.lastupdated + '</h6></div>';
             if (showGraph) {
                 html += '<div part="stream-event-chart-selection" class="mb-20">';
                 html += '<div part="td-head" class="mb-5">Select Chart</div>';
@@ -2147,6 +2150,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             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>';
+            html += '<div class="align-center d-flex flex-wrap mb-10 w-100-m-0" part="last-update-title-container"><h6 part="last-update-title">Last Updated on ' + this.lastupdated + '</h6></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>';
@@ -2189,6 +2193,30 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += '<div id="stream-event-filter" part="stream-event-total" class="d-flex flex-wrap"></div>';
             return html;
         };
+        this.renderStatisticsFiltersTableStart = () => {
+            var html = '';
+            html += '<table id="statistics-table" part="statistics-table" class="statistics-table w-100"><tbody>';
+            // html += '<table id="stream-filters-table" part="stream-filters-table" class="stream-filters-table"><thead><tr><td><div class="d-flex align-center justify-center"> </div></td><td><div class="d-flex align-center justify-center">Total</div></td><td><div class="d-flex align-center justify-center"><span class="material-icons color-not-started">schedule</span>&nbsp;&nbsp;Not Started</div></td><td><div class="d-flex align-center justify-center"><span class="material-symbols-outlined color-pending">pending</span>&nbsp;&nbsp;Pending Approval</div></td><td><div class="d-flex align-center justify-center"><span class="material-symbols-outlined color-rejected">block</span>&nbsp;&nbsp;Rejected</div></td><td><div class="d-flex align-center justify-center"><span class="material-symbols-outlined color-done">check_circle</span>&nbsp;&nbsp;Approved</div></td></tr></thead><tbody>';
+            return html;
+        };
+        this.renderStatisticsFiltersTableRow = () => {
+            var html = '';
+            html += '<tr class="tablerow">';
+            html += '<td part="td-body" class="td-body"><div class="d-flex align-center flex-wrap"><div part="td-head" class="pl-0-imp w-100 d-flex align-center">FILTER_CRITERIA_NAME</div><div>DASHBOARD_FILTER_NAME</div></div></td>';
+            html += '<td part="td-body" class="td-body"><div class="d-flex align-center flex-wrap"><div part="td-head" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-icons color-not-started">schedule</span>&nbsp;&nbsp;Not Started</div><div>DASHBOARD_NOT_STARTED</div></div></td>';
+            html += '<td part="td-body" class="td-body"><div class="d-flex align-center flex-wrap"><div part="td-head" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-symbols-outlined color-pending">pending</span>&nbsp;&nbsp;Pending Approval</div><div>DASHBOARD_PENDING_APPROVAL</div></div></td>';
+            html += '<td part="td-body" class="td-body"><div class="d-flex align-center flex-wrap"><div part="td-head" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-symbols-outlined color-rejected">block</span>&nbsp;&nbsp;Rejected</div><div>DASHBOARD_REJECTED</div></div></td>';
+            html += '<td part="td-body" class="td-body"><div class="d-flex align-center flex-wrap"><div part="td-head" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-symbols-outlined color-done">check_circle</span>&nbsp;&nbsp;Approved</div><div>DASHBOARD_APPROVED</div></div></td>';
+            html += '<td part="td-body" class="td-body"><div class="d-flex align-center flex-wrap"><div part="td-head" class="pl-0-imp w-100 d-flex align-center">Total</div><div>DASHBOARD_TOTAL</div></div></td>';
+            html += '</tr>';
+            // html += '<tr class="tablerow"><td part="td-body" class="td-body"><span>DASHBOARD_FILTER_NAME</span></td><td><span>DASHBOARD_TOTAL</span></td><td><span>DASHBOARD_NOT_STARTED</span></td><td><span>DASHBOARD_PENDING_APPROVAL</span></td><td><span>DASHBOARD_REJECTED</span></td><td><span>DASHBOARD_APPROVED</span></td></tr>';
+            return html;
+        };
+        this.renderStatisticsFiltersTableEnd = () => {
+            var html = '';
+            html += '</tbody></table>';
+            return html;
+        };
         this.getCalendarRowHide = (events, i, lastDay, month, firstDate = null, currDate = null) => {
             var hide = true;
             if (events != null) {
@@ -2723,7 +2751,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             return html;
         };
         this.renderStatistics = (_firstDay, _endDay, iInit, iLast, showGraph, index, month, period, firstDate = null, parametersTitle) => {
-            var _a, _b, _c, _f;
+            var _a, _b, _c, _f, _g, _h, _j, _k;
             var total = 0, notStarted = 0, approved = 0, pendingApproval = 0, rejected = 0;
             var html = '';
             // var lastDay = iLast;
@@ -2734,6 +2762,10 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += this.renderCalendarStatisticsGraphs(showGraph, parametersTitle);
             html += this.renderCalendarContainerDivStart(index);
             html += this.renderCalendarEventSummary();
+            let filtersTableHtml = "";
+            if (Object.keys(this.statisticsFiltersData).length > 0) {
+                filtersTableHtml += this.renderStatisticsFiltersTableStart();
+            }
             for (var i = iInit; i <= iLast; i++) {
                 let mmdd = "";
                 if (firstDate == null) {
@@ -2763,6 +2795,50 @@ let SfIEvents = class SfIEvents extends LitElement {
                     approved += (_f = this.statistics[mmdd]["approved"]) !== null && _f !== void 0 ? _f : 0;
                 }
             }
+            for (let filtercriteria of Object.keys(this.statisticsFiltersData)) {
+                for (let filterid of Object.keys(this.statisticsFiltersData[filtercriteria])) {
+                    let filtername = "";
+                    for (let filterval of this.statisticsMeta[filtercriteria]) {
+                        if (filterval.indexOf(filterid) >= 0) {
+                            filtername = filterval.split(';')[0];
+                            break;
+                        }
+                    }
+                    let filterTotal = 0, filterNotStarted = 0, filterPendingApproval = 0, filterRejected = 0, filterApproved = 0;
+                    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);
+                        }
+                        if (this.statisticsFiltersData[filtercriteria][filterid] != null) {
+                            if (this.statisticsFiltersData[filtercriteria][filterid][mmdd] != null) {
+                                filterTotal += this.statisticsFiltersData[filtercriteria][filterid][mmdd].count;
+                                filterNotStarted += (_g = this.statisticsFiltersData[filtercriteria][filterid][mmdd]['not-started']) !== null && _g !== void 0 ? _g : 0;
+                                filterPendingApproval += (_h = this.statisticsFiltersData[filtercriteria][filterid][mmdd]['pending-approval']) !== null && _h !== void 0 ? _h : 0;
+                                filterRejected += (_j = this.statisticsFiltersData[filtercriteria][filterid][mmdd]['rejected']) !== null && _j !== void 0 ? _j : 0;
+                                filterApproved += (_k = this.statisticsFiltersData[filtercriteria][filterid][mmdd]['approved']) !== null && _k !== void 0 ? _k : 0;
+                            }
+                        }
+                    }
+                    filtersTableHtml += this.renderStatisticsFiltersTableRow();
+                    filtersTableHtml = filtersTableHtml.replace("FILTER_CRITERIA_NAME", filtercriteria + "");
+                    filtersTableHtml = filtersTableHtml.replace("DASHBOARD_FILTER_NAME", (filtername + "").replace(/\([^)]*\)/g, ""));
+                    filtersTableHtml = filtersTableHtml.replace("DASHBOARD_TOTAL", filterTotal + "");
+                    filtersTableHtml = filtersTableHtml.replace("DASHBOARD_NOT_STARTED", filterNotStarted + " (" + Util.percentageString(filterNotStarted, filterTotal) + ")");
+                    filtersTableHtml = filtersTableHtml.replace("DASHBOARD_APPROVED", filterApproved + " (" + Util.percentageString(filterApproved, filterTotal) + ")");
+                    filtersTableHtml = filtersTableHtml.replace("DASHBOARD_PENDING_APPROVAL", filterPendingApproval + " (" + Util.percentageString(filterPendingApproval, filterTotal) + ")");
+                    filtersTableHtml = filtersTableHtml.replace("DASHBOARD_REJECTED", filterRejected + " (" + Util.percentageString(filterRejected, filterTotal) + ")");
+                }
+            }
+            if (Object.keys(this.statisticsFiltersData).length > 0) {
+                filtersTableHtml += this.renderStatisticsFiltersTableEnd();
+            }
+            html += filtersTableHtml;
             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();
@@ -4096,6 +4172,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             });
         };
         this.renderStatisticsFilters = (eventsContainer) => {
+            var _a;
             let selectFilterCriteria = eventsContainer.querySelector('#select-filter-criteria');
             let inputLabelFilter = eventsContainer.querySelector('#input-label-filter');
             let selectFilterCriteriaMobile = eventsContainer.querySelector('#select-filter-criteria-mobile');
@@ -4114,10 +4191,15 @@ let SfIEvents = class SfIEvents extends LitElement {
             option.value = "";
             option.innerHTML = "all";
             selectFilterCriteriaMobile.add(option);
-            console.log('adding', option, selectFilterCriteria.options);
+            let filterscriteria = "";
+            if (Object.keys((_a = this.statisticsFiltersData) !== null && _a !== void 0 ? _a : {}).length > 0) {
+                filterscriteria = Object.keys(this.statisticsFiltersData)[0];
+            }
             for (let criteria of Object.keys(this.statisticsMeta)) {
                 let option = new Option();
                 option.value = criteria;
+                console.log('statistics filters criteria', criteria, filterscriteria, criteria == filterscriteria);
+                option.selected = (criteria == filterscriteria);
                 if (criteria == "reporter" || criteria == "approver" || criteria == "functionhead") {
                     option.innerHTML = "user:" + criteria;
                 }
@@ -4127,6 +4209,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 selectFilterCriteria.add(option);
                 option = new Option();
                 option.value = criteria;
+                option.selected = (criteria == filterscriteria);
                 if (criteria == "reporter" || criteria == "approver" || criteria == "functionhead") {
                     option.innerHTML = "user:" + criteria;
                 }
@@ -4140,10 +4223,10 @@ let SfIEvents = class SfIEvents extends LitElement {
                 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);
-                }
+                // if(target.value == ""){
+                selectFilterValues.value = "";
+                this.processDateSelectionViewer(eventsContainer);
+                // }
                 selectFilterValues.innerHTML = "";
                 let option = new Option();
                 option.value = "";
@@ -4207,14 +4290,24 @@ let SfIEvents = class SfIEvents extends LitElement {
                     inputLabelCriteriaMobile.style.display = 'none';
                 }
             });
+            selectFilterCriteriaNew.value = filterscriteria;
+            selectFilterCriteriaMobileNew.value = filterscriteria;
             let selectFilterValues = eventsContainer.querySelector('#select-filter-values');
             let inputLabelCriteria = eventsContainer.querySelector('#input-label-criteria');
             let selectFilterValuesMobile = eventsContainer.querySelector('#select-filter-values-mobile');
             let inputLabelCriteriaMobile = eventsContainer.querySelector('#input-label-criteria-mobile');
-            selectFilterValues.style.display = 'none';
-            inputLabelCriteria.style.display = 'none';
-            selectFilterValuesMobile.style.display = 'none';
-            inputLabelCriteriaMobile.style.display = 'none';
+            if (filterscriteria == "") {
+                selectFilterValues.style.display = 'none';
+                inputLabelCriteria.style.display = 'none';
+                selectFilterValuesMobile.style.display = 'none';
+                inputLabelCriteriaMobile.style.display = 'none';
+            }
+            else {
+                selectFilterValues.style.display = 'block';
+                inputLabelCriteria.style.display = 'block';
+                selectFilterValuesMobile.style.display = 'block';
+                inputLabelCriteriaMobile.style.display = 'block';
+            }
         };
         this.renderSelectAllButtons = () => {
             let selectAllHtml = '<div class="d-flex justify-end w-100" style="position: fixed; bottom: 70px; left: 0px;" part="button-select-all-container">';
@@ -16367,6 +16460,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 console.log('jsonRespose', jsonRespose);
                 this.events = (await this.fetchPresignedUrl(jsonRespose.signedUrlGet));
                 await this.fetchPresignedUrlDelete(jsonRespose.signedUrlDelete);
+                this.lastupdated = new Date().toLocaleDateString('en-IN') + " - " + new Date().toLocaleTimeString('en-IN');
                 this.renderAppropriateStream(startDate, endDate, list == "no");
                 this.fetchBulkReportingData();
                 // this.events = {}
@@ -16417,6 +16511,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
         };
         this.fetchStatistics = async (startDate = "", endDate = "", filtercriteria, filterid) => {
+            var _a;
             let path = "";
             this.sdate = startDate;
             this.edate = endDate;
@@ -16434,7 +16529,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
             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 };
+            let urlBody = { "projectid": this.projectId, "userid": this.userProfileId, "role": this.myRole, "sdate": sDate, "edate": eDate, "filtercriteria": filtercriteria };
             if (filtercriteria == 'function') {
                 urlBody["functionid"] = filterid;
                 urlBody["locationid"] = '';
@@ -16461,6 +16556,9 @@ let SfIEvents = class SfIEvents extends LitElement {
                 const jsonRespose = JSON.parse(xhr.responseText);
                 console.log('jsonRespose Statistics', jsonRespose);
                 this.statistics = jsonRespose.data;
+                this.lastupdated = new Date(jsonRespose.lastupdated).toLocaleDateString('en-IN') + " - " + new Date(jsonRespose.lastupdated).toLocaleTimeString('en-IN');
+                console.log('statistics date', this.lastupdated);
+                this.statisticsFiltersData = (_a = jsonRespose.filtersdata) !== null && _a !== void 0 ? _a : {};
                 if (jsonRespose.meta != null)
                     this.statisticsMeta = jsonRespose.meta;
                 return jsonRespose.meta;
@@ -19305,10 +19403,12 @@ SfIEvents.styles = css `
       display: none;
       position: fixed;
       bottom: 10px;
-      right: 10px
+      left: 10px
     }
     
-
+    .small-icon {
+      font-size: 98%
+    }
   `;
 __decorate([
     query('#decrypt-container')
@@ -19523,6 +19623,9 @@ __decorate([
 __decorate([
     property()
 ], SfIEvents.prototype, "statisticsMeta", void 0);
+__decorate([
+    property()
+], SfIEvents.prototype, "statisticsFiltersData", void 0);
 __decorate([
     property()
 ], SfIEvents.prototype, "streamIndex", void 0);

package/src/sf-i-events.ts

@@ -1346,6 +1346,9 @@ export class SfIEvents extends LitElement {
   @property()
   statisticsMeta: any = null;
 
+  @property()
+  statisticsFiltersData: any = null;
+
   @property()
   streamIndex: any = null;
 
@@ -1600,6 +1603,8 @@ export class SfIEvents extends LitElement {
 
   edate: string = "";
 
+  lastupdated: string = "";
+
   changedOnboardingItemIds: string[] = []
   
   @property()
@@ -2634,10 +2639,12 @@ export class SfIEvents extends LitElement {
       display: none;
       position: fixed;
       bottom: 10px;
-      right: 10px
+      left: 10px
     }
     
-
+    .small-icon {
+      font-size: 98%
+    }
   `;
   
   @query('.SfIEventsC')
@@ -4171,6 +4178,7 @@ export class SfIEvents extends LitElement {
 
     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>';
+      html += '<div class="align-center d-flex flex-wrap mb-10 w-100-m-0" part="last-update-title-container"><h6 part="last-update-title">Last Updated on ' + this.lastupdated + '</h6></div>';
       if(showGraph) {
         html += '<div part="stream-event-chart-selection" class="mb-20">';
           html += '<div part="td-head" class="mb-5">Select Chart</div>';
@@ -4222,6 +4230,7 @@ export class SfIEvents extends LitElement {
 
     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>';
+      html += '<div class="align-center d-flex flex-wrap mb-10 w-100-m-0" part="last-update-title-container"><h6 part="last-update-title">Last Updated on ' + this.lastupdated + '</h6></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>'
@@ -4282,6 +4291,43 @@ export class SfIEvents extends LitElement {
 
   }
 
+  renderStatisticsFiltersTableStart = () => {
+
+    var html = '';
+
+    html += '<table id="statistics-table" part="statistics-table" class="statistics-table w-100"><tbody>';
+    // html += '<table id="stream-filters-table" part="stream-filters-table" class="stream-filters-table"><thead><tr><td><div class="d-flex align-center justify-center"> </div></td><td><div class="d-flex align-center justify-center">Total</div></td><td><div class="d-flex align-center justify-center"><span class="material-icons color-not-started">schedule</span>&nbsp;&nbsp;Not Started</div></td><td><div class="d-flex align-center justify-center"><span class="material-symbols-outlined color-pending">pending</span>&nbsp;&nbsp;Pending Approval</div></td><td><div class="d-flex align-center justify-center"><span class="material-symbols-outlined color-rejected">block</span>&nbsp;&nbsp;Rejected</div></td><td><div class="d-flex align-center justify-center"><span class="material-symbols-outlined color-done">check_circle</span>&nbsp;&nbsp;Approved</div></td></tr></thead><tbody>';
+
+    return html;
+
+  }
+
+  renderStatisticsFiltersTableRow = () => {
+
+    var html = '';
+    html += '<tr class="tablerow">'
+    html +='<td part="td-body" class="td-body"><div class="d-flex align-center flex-wrap"><div part="td-head" class="pl-0-imp w-100 d-flex align-center">FILTER_CRITERIA_NAME</div><div>DASHBOARD_FILTER_NAME</div></div></td>'
+    html +='<td part="td-body" class="td-body"><div class="d-flex align-center flex-wrap"><div part="td-head" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-icons color-not-started">schedule</span>&nbsp;&nbsp;Not Started</div><div>DASHBOARD_NOT_STARTED</div></div></td>'
+    html +='<td part="td-body" class="td-body"><div class="d-flex align-center flex-wrap"><div part="td-head" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-symbols-outlined color-pending">pending</span>&nbsp;&nbsp;Pending Approval</div><div>DASHBOARD_PENDING_APPROVAL</div></div></td>'
+    html +='<td part="td-body" class="td-body"><div class="d-flex align-center flex-wrap"><div part="td-head" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-symbols-outlined color-rejected">block</span>&nbsp;&nbsp;Rejected</div><div>DASHBOARD_REJECTED</div></div></td>'
+    html +='<td part="td-body" class="td-body"><div class="d-flex align-center flex-wrap"><div part="td-head" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-symbols-outlined color-done">check_circle</span>&nbsp;&nbsp;Approved</div><div>DASHBOARD_APPROVED</div></div></td>'
+    html +='<td part="td-body" class="td-body"><div class="d-flex align-center flex-wrap"><div part="td-head" class="pl-0-imp w-100 d-flex align-center">Total</div><div>DASHBOARD_TOTAL</div></div></td>'
+    html += '</tr>';
+    // html += '<tr class="tablerow"><td part="td-body" class="td-body"><span>DASHBOARD_FILTER_NAME</span></td><td><span>DASHBOARD_TOTAL</span></td><td><span>DASHBOARD_NOT_STARTED</span></td><td><span>DASHBOARD_PENDING_APPROVAL</span></td><td><span>DASHBOARD_REJECTED</span></td><td><span>DASHBOARD_APPROVED</span></td></tr>';
+
+    return html;
+
+  }
+
+  renderStatisticsFiltersTableEnd = () => {
+
+    var html = '';
+    html += '</tbody></table>';
+
+    return html;
+
+  }
+
   getCalendarRowHide = (events: any, i: number, lastDay: number, month: number, firstDate: any = null, currDate: any = null) => {
 
     var hide = true;
@@ -4952,8 +4998,10 @@ export class SfIEvents extends LitElement {
     html += this.renderCalendarStatisticsGraphs(showGraph, parametersTitle);
     html += this.renderCalendarContainerDivStart(index)
     html += this.renderCalendarEventSummary();
-
-    
+    let filtersTableHtml = ""
+    if(Object.keys(this.statisticsFiltersData).length > 0){
+      filtersTableHtml += this.renderStatisticsFiltersTableStart()
+    }
     for(var i = iInit; i <= iLast; i++) {
 
       let mmdd : string = "";
@@ -4989,10 +5037,60 @@ export class SfIEvents extends LitElement {
         approved += this.statistics[mmdd]["approved"] ?? 0;
           
       } 
+      
+      
     }
 
-    html += this.renderCalendarContainerDivEnd();
+    for(let filtercriteria of Object.keys(this.statisticsFiltersData)){
+      for(let filterid of Object.keys(this.statisticsFiltersData[filtercriteria])){
+        let filtername = ""
+        for(let filterval of this.statisticsMeta[filtercriteria]){
+          if(filterval.indexOf(filterid) >= 0){
+            filtername = filterval.split(';')[0]
+            break;
+          }
+        }
+        let filterTotal = 0, filterNotStarted = 0, filterPendingApproval = 0, filterRejected = 0, filterApproved = 0;
+        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);
+          }
+          if(this.statisticsFiltersData[filtercriteria][filterid] != null){
+            if(this.statisticsFiltersData[filtercriteria][filterid][mmdd] != null){
+              filterTotal += this.statisticsFiltersData[filtercriteria][filterid][mmdd].count
+              filterNotStarted += this.statisticsFiltersData[filtercriteria][filterid][mmdd]['not-started'] ?? 0
+              filterPendingApproval += this.statisticsFiltersData[filtercriteria][filterid][mmdd]['pending-approval'] ?? 0
+              filterRejected += this.statisticsFiltersData[filtercriteria][filterid][mmdd]['rejected'] ?? 0
+              filterApproved += this.statisticsFiltersData[filtercriteria][filterid][mmdd]['approved'] ?? 0
+            }
+          }
+        }
+
+        filtersTableHtml += this.renderStatisticsFiltersTableRow()
+        filtersTableHtml = filtersTableHtml.replace("FILTER_CRITERIA_NAME", filtercriteria+"");
+        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_FILTER_NAME", (filtername+"").replace(/\([^)]*\)/g,""));
+        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_TOTAL", filterTotal+"");
+        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_NOT_STARTED", filterNotStarted+" (" + Util.percentageString(filterNotStarted, filterTotal) + ")");
+        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_APPROVED", filterApproved+" (" + Util.percentageString(filterApproved, filterTotal) + ")");
+        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_PENDING_APPROVAL", filterPendingApproval+" (" + Util.percentageString(filterPendingApproval, filterTotal) + ")");
+        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_REJECTED", filterRejected+" (" + Util.percentageString(filterRejected, filterTotal) + ")");
+      }
+    }
+
+    if(Object.keys(this.statisticsFiltersData).length > 0){
+      filtersTableHtml += this.renderStatisticsFiltersTableEnd()
+    }
+    
 
+    html += filtersTableHtml
+    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();
@@ -6586,10 +6684,16 @@ export class SfIEvents extends LitElement {
     option.value = "";
     option.innerHTML = "all"
     selectFilterCriteriaMobile.add(option)
-    console.log('adding', option, selectFilterCriteria.options);
+    let filterscriteria = ""
+    if(Object.keys(this.statisticsFiltersData ?? {}).length > 0){
+      filterscriteria = Object.keys(this.statisticsFiltersData)[0]
+    }
+    
     for(let criteria of Object.keys(this.statisticsMeta)){
       let option = new Option()
       option.value = criteria;
+      console.log('statistics filters criteria',criteria, filterscriteria, criteria == filterscriteria)
+      option.selected = (criteria == filterscriteria)
       if(criteria == "reporter" || criteria == "approver" || criteria == "functionhead"){
         option.innerHTML = "user:" + criteria
       }else{
@@ -6598,6 +6702,7 @@ export class SfIEvents extends LitElement {
       selectFilterCriteria.add(option)
       option = new Option()
       option.value = criteria;
+      option.selected = (criteria == filterscriteria)
       if(criteria == "reporter" || criteria == "approver" || criteria == "functionhead"){
         option.innerHTML = "user:" + criteria
       }else{
@@ -6605,15 +6710,16 @@ export class SfIEvents extends LitElement {
       }
       selectFilterCriteriaMobile.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 == ""){
+      // if(target.value == ""){
         selectFilterValues.value = ""
         this.processDateSelectionViewer(eventsContainer)
-      }
+      // }
       
       selectFilterValues.innerHTML = ""
       let option = new Option()
@@ -6676,15 +6782,24 @@ export class SfIEvents extends LitElement {
         selectFilterValuesMobile.style.display = 'none'
         inputLabelCriteriaMobile.style.display = 'none'
       }
-    })
+    });
+    (selectFilterCriteriaNew as HTMLSelectElement).value = filterscriteria;
+    (selectFilterCriteriaMobileNew as HTMLSelectElement).value = filterscriteria;
     let selectFilterValues = eventsContainer.querySelector('#select-filter-values') as HTMLSelectElement
     let inputLabelCriteria = eventsContainer.querySelector('#input-label-criteria') as HTMLLabelElement
     let selectFilterValuesMobile = eventsContainer.querySelector('#select-filter-values-mobile') as HTMLSelectElement
     let inputLabelCriteriaMobile = eventsContainer.querySelector('#input-label-criteria-mobile') as HTMLLabelElement
-    selectFilterValues.style.display = 'none'
-    inputLabelCriteria.style.display = 'none'
-    selectFilterValuesMobile.style.display = 'none'
-    inputLabelCriteriaMobile.style.display = 'none'
+    if(filterscriteria == ""){
+      selectFilterValues.style.display = 'none'
+      inputLabelCriteria.style.display = 'none'
+      selectFilterValuesMobile.style.display = 'none'
+      inputLabelCriteriaMobile.style.display = 'none'
+    }else{
+      selectFilterValues.style.display = 'block'
+      inputLabelCriteria.style.display = 'block'
+      selectFilterValuesMobile.style.display = 'block'
+      inputLabelCriteriaMobile.style.display = 'block'
+    }
   }
   renderSelectAllButtons = () => {
     let selectAllHtml = '<div class="d-flex justify-end w-100" style="position: fixed; bottom: 70px; left: 0px;" part="button-select-all-container">';
@@ -22224,7 +22339,7 @@ export class SfIEvents extends LitElement {
       console.log('jsonRespose', jsonRespose);
       this.events = (await this.fetchPresignedUrl(jsonRespose.signedUrlGet));
       await this.fetchPresignedUrlDelete(jsonRespose.signedUrlDelete)
-
+      this.lastupdated = new Date().toLocaleDateString('en-IN') + " - " + new Date().toLocaleTimeString('en-IN')
         this.renderAppropriateStream(startDate, endDate, list == "no");
         this.fetchBulkReportingData();
         // this.events = {}
@@ -22328,7 +22443,7 @@ export class SfIEvents extends LitElement {
     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};
+    let urlBody :any = {"projectid": this.projectId, "userid": this.userProfileId, "role": this.myRole, "sdate": sDate, "edate": eDate,"filtercriteria": filtercriteria};
 
     if(filtercriteria == 'function') {
       urlBody["functionid"] = filterid;
@@ -22357,6 +22472,9 @@ export class SfIEvents extends LitElement {
       const jsonRespose = JSON.parse(xhr.responseText);
       console.log('jsonRespose Statistics', jsonRespose);
       this.statistics = jsonRespose.data
+      this.lastupdated = new Date(jsonRespose.lastupdated).toLocaleDateString('en-IN') + " - " + new Date(jsonRespose.lastupdated).toLocaleTimeString('en-IN')
+      console.log('statistics date', this.lastupdated);
+      this.statisticsFiltersData = jsonRespose.filtersdata ?? {} 
       if(jsonRespose.meta != null) 
       this.statisticsMeta = jsonRespose.meta 
       return jsonRespose.meta

package/src/util.ts

@@ -445,8 +445,13 @@ function alphabeticalSort(arr:string[]){
   return arrSorted
 }
 
+function percentageString(val: number, valTotal: number){
+  let num = (100 * val) / valTotal
+  return (Math.round((num + Number.EPSILON) * 100) / 100) + "%"
+}
+
 const exportFunctions = {
-  callApiPresignedDelete, callApiPresignedGet, callApiPresigned, jsonObjectToHtml, clearListeners, isInteger, callApi, validateName, readCookie, timeSince, createDiagonalPattern1, createDiagonalPattern2, createDiagonalPattern3, getRandomColor, convertToCSV, parseCsv, titleCase, alphabeticalSort
+  callApiPresignedDelete, callApiPresignedGet, callApiPresigned, jsonObjectToHtml, clearListeners, isInteger, callApi, validateName, readCookie, timeSince, createDiagonalPattern1, createDiagonalPattern2, createDiagonalPattern3, getRandomColor, convertToCSV, parseCsv, titleCase, alphabeticalSort, percentageString
 };
 
 export default exportFunctions;

package/util.d.ts

@@ -14,6 +14,7 @@ declare function convertToCSV(arr: any[]): string;
 declare function parseCsv(csv: string): any;
 declare function titleCase(str: string): string;
 declare function alphabeticalSort(arr: string[]): string[];
+declare function percentageString(val: number, valTotal: number): string;
 declare const exportFunctions: {
     callApiPresignedDelete: typeof callApiPresignedDelete;
     callApiPresignedGet: typeof callApiPresignedGet;
@@ -33,6 +34,7 @@ declare const exportFunctions: {
     parseCsv: typeof parseCsv;
     titleCase: typeof titleCase;
     alphabeticalSort: typeof alphabeticalSort;
+    percentageString: typeof percentageString;
 };
 export default exportFunctions;
 //# sourceMappingURL=util.d.ts.map

package/util.js

@@ -372,8 +372,12 @@ function alphabeticalSort(arr) {
     });
     return arrSorted;
 }
+function percentageString(val, valTotal) {
+    let num = (100 * val) / valTotal;
+    return (Math.round((num + Number.EPSILON) * 100) / 100) + "%";
+}
 const exportFunctions = {
-    callApiPresignedDelete, callApiPresignedGet, callApiPresigned, jsonObjectToHtml, clearListeners, isInteger, callApi, validateName, readCookie, timeSince, createDiagonalPattern1, createDiagonalPattern2, createDiagonalPattern3, getRandomColor, convertToCSV, parseCsv, titleCase, alphabeticalSort
+    callApiPresignedDelete, callApiPresignedGet, callApiPresigned, jsonObjectToHtml, clearListeners, isInteger, callApi, validateName, readCookie, timeSince, createDiagonalPattern1, createDiagonalPattern2, createDiagonalPattern3, getRandomColor, convertToCSV, parseCsv, titleCase, alphabeticalSort, percentageString
 };
 export default exportFunctions;
 //# sourceMappingURL=util.js.map