sf-i-events 1.0.740 → 1.0.742

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sf-i-events",
   "private": false,
-  "version": "1.0.740",
+  "version": "1.0.742",
   "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;
@@ -452,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

@@ -339,6 +339,9 @@ let SfIEvents = class SfIEvents extends LitElement {
         .align-center {
           align-items: center;
         }
+        .flex-wrap {
+          flex-wrap: wrap;
+        }
         .mt-10 {
           margin-top: 10px;
         }
@@ -382,6 +385,14 @@ let SfIEvents = class SfIEvents extends LitElement {
         .td-wide {
           min-width: 300px;
         }
+        .td-head {
+          font-weight: 400;
+          padding-left: 5px;
+          vertical-align: middle;
+          font-size: 80%;
+          text-transform: capitalize;
+          text-align: left;
+        }
         td {
           padding: 5px;
           font-size: 70%;
@@ -393,7 +404,6 @@ let SfIEvents = class SfIEvents extends LitElement {
         }
         .td-odd {
           background-color: #efefef;
-          
         }
         .td-even {
           background-color: #dedede;
@@ -1110,6 +1120,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;
@@ -2103,8 +2114,8 @@ let SfIEvents = class SfIEvents extends LitElement {
             //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>';
-            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>';
+            html += '<div class="align-center d-flex flex-wrap align-center 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 align-center mb-10 w-100-m-0" part="last-update-title-container"><h6 part="last-update-title" class="align-center d-flex"><span class="material-symbols-outlined">update</span>&nbsp;&nbsp;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>';
@@ -2149,7 +2160,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>';
+            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" class="align-center d-flex"><span class="material-symbols-outlined">update</span>&nbsp;&nbsp;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>';
@@ -2192,6 +2203,29 @@ 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 += '<div class="w-100 scroll-x">';
+            html += '<table id="statistics-table" part="statistics-table" class="statistics-table w-100"><tbody>';
+            return html;
+        };
+        this.renderStatisticsFiltersTableRow = () => {
+            var html = '';
+            html += '<tr class="tablerow">';
+            html += '<td part="td-body" class="td-body TD_BODY_CLASS"><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 TD_BODY_CLASS"><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 TD_BODY_CLASS"><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 TD_BODY_CLASS"><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 TD_BODY_CLASS"><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 TD_BODY_CLASS"><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>';
+            return html;
+        };
+        this.renderStatisticsFiltersTableEnd = () => {
+            var html = '';
+            html += '</tbody></table><div>';
+            return html;
+        };
         this.getCalendarRowHide = (events, i, lastDay, month, firstDate = null, currDate = null) => {
             var hide = true;
             if (events != null) {
@@ -2726,7 +2760,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;
@@ -2737,6 +2771,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) {
@@ -2766,6 +2804,51 @@ let SfIEvents = class SfIEvents extends LitElement {
                     approved += (_f = this.statistics[mmdd]["approved"]) !== null && _f !== void 0 ? _f : 0;
                 }
             }
+            if (Object.keys(this.statisticsFiltersData).length > 0) {
+                let filtercriteria = Object.keys(this.statisticsFiltersData)[0];
+                let sortedFilters = Util.alphabeticalSort(this.statisticsMeta[filtercriteria]);
+                for (let [filterindex, filterval] of sortedFilters.entries()) {
+                    let filtername = filterval.split(';')[0];
+                    let filterid = filterval.split(';')[1];
+                    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();
+                    if (filterindex % 2 == 0) {
+                        filtersTableHtml = filtersTableHtml.replace(/TD_BODY_CLASS/g, "td-light");
+                    }
+                    else {
+                        filtersTableHtml = filtersTableHtml.replace(/TD_BODY_CLASS/g, "td-dark");
+                    }
+                    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) + ")");
+                }
+                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();
@@ -2779,6 +2862,10 @@ let SfIEvents = class SfIEvents extends LitElement {
             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>';
+            if (Object.keys(this.statisticsFiltersData).length > 0) {
+                this.htmlDataStats += '<br /><br />Report<br /><br />';
+                this.htmlDataStats += filtersTableHtml;
+            }
             return html;
         };
         this.renderReporting = (event, mmddyyyy) => {
@@ -4099,6 +4186,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');
@@ -4117,10 +4205,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;
                 }
@@ -4130,6 +4223,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;
                 }
@@ -4143,10 +4237,8 @@ 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);
-                }
+                selectFilterValues.value = "";
+                this.processDateSelectionViewer(eventsContainer);
                 selectFilterValues.innerHTML = "";
                 let option = new Option();
                 option.value = "";
@@ -4179,10 +4271,8 @@ let SfIEvents = class SfIEvents extends LitElement {
                 let target = ev.target;
                 let inputLabelCriteriaMobile = eventsContainer.querySelector('#input-label-criteria-mobile');
                 let selectFilterValuesMobile = eventsContainer.querySelector('#select-filter-values-mobile');
-                if (target.value == "") {
-                    selectFilterValuesMobile.value = "";
-                    this.processDateSelectionViewer(eventsContainer);
-                }
+                selectFilterValuesMobile.value = "";
+                this.processDateSelectionViewer(eventsContainer);
                 selectFilterValuesMobile.innerHTML = "";
                 let option = new Option();
                 option.value = "";
@@ -4210,14 +4300,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">';
@@ -6307,11 +6407,11 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += '</div>';
             html += '<div class="d-flex w-100">';
             html += '<div class="calendar-left-col desktop-only flex-col justify-start align-end">';
-            html += '<div class="title-item-date d-flex flex-col align-end">';
+            html += '<div class="title-item-date d-flex flex-col align-start">';
             html += '<label part="input-label">Start Date</label>';
             html += '<input id="stream-start-date" part="date-range-preselected" type="date" />';
             html += '</div>';
-            html += '<div class="title-item-date d-flex flex-col align-end">';
+            html += '<div class="title-item-date d-flex flex-col align-start">';
             html += '<label part="input-label">End Date</label>';
             html += '<input id="stream-end-date" part="date-range-preselected" type="date" />';
             html += '</div>';
@@ -6324,11 +6424,11 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += '<div class="title-item-date">';
             html += '<button id="button-this-year" part="button-range-preselected">This Year</button>';
             html += '</div>';
-            html += '<div class="title-item-date d-flex flex-col align-end">';
+            html += '<div class="title-item-date d-flex flex-col align-start">';
             html += '<label part="input-label-filter-criteria" id="input-label-filter">Filter Criteria</label>';
             html += '<select part="input-select-calendar-filter" id="select-filter-criteria"></select>';
             html += '</div>';
-            html += '<div class="title-item-date d-flex flex-col align-end">';
+            html += '<div class="title-item-date d-flex flex-col align-start">';
             html += '<label part="input-label-filter-value" id="input-label-criteria"></label>';
             html += '<select part="input-select-calendar-filter" id="select-filter-values"></select>';
             html += '</div>';
@@ -16421,6 +16521,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
         };
         this.fetchStatistics = async (startDate = "", endDate = "", filtercriteria, filterid) => {
+            var _a;
             let path = "";
             this.sdate = startDate;
             this.edate = endDate;
@@ -16438,7 +16539,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"] = '';
@@ -16467,6 +16568,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 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;
@@ -19314,7 +19416,9 @@ SfIEvents.styles = css `
       right: 10px
     }
     
-
+    .small-icon {
+      font-size: 98%
+    }
   `;
 __decorate([
     query('#decrypt-container')
@@ -19529,6 +19633,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

@@ -343,6 +343,9 @@ export class SfIEvents extends LitElement {
         .align-center {
           align-items: center;
         }
+        .flex-wrap {
+          flex-wrap: wrap;
+        }
         .mt-10 {
           margin-top: 10px;
         }
@@ -386,6 +389,14 @@ export class SfIEvents extends LitElement {
         .td-wide {
           min-width: 300px;
         }
+        .td-head {
+          font-weight: 400;
+          padding-left: 5px;
+          vertical-align: middle;
+          font-size: 80%;
+          text-transform: capitalize;
+          text-align: left;
+        }
         td {
           padding: 5px;
           font-size: 70%;
@@ -397,7 +408,6 @@ export class SfIEvents extends LitElement {
         }
         .td-odd {
           background-color: #efefef;
-          
         }
         .td-even {
           background-color: #dedede;
@@ -1346,6 +1356,9 @@ export class SfIEvents extends LitElement {
   @property()
   statisticsMeta: any = null;
 
+  @property()
+  statisticsFiltersData: any = null;
+
   @property()
   streamIndex: any = null;
 
@@ -2639,7 +2652,9 @@ export class SfIEvents extends LitElement {
       right: 10px
     }
     
-
+    .small-icon {
+      font-size: 98%
+    }
   `;
   
   @query('.SfIEventsC')
@@ -4172,8 +4187,8 @@ export 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>';
+      html += '<div class="align-center d-flex flex-wrap align-center 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 align-center mb-10 w-100-m-0" part="last-update-title-container"><h6 part="last-update-title" class="align-center d-flex"><span class="material-symbols-outlined">update</span>&nbsp;&nbsp;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>';
@@ -4225,7 +4240,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>';
+      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" class="align-center d-flex"><span class="material-symbols-outlined">update</span>&nbsp;&nbsp;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>'
@@ -4286,6 +4301,41 @@ export class SfIEvents extends LitElement {
 
   }
 
+  renderStatisticsFiltersTableStart = () => {
+
+    var html = '';
+    html += '<div class="w-100 scroll-x">'
+    html += '<table id="statistics-table" part="statistics-table" class="statistics-table w-100"><tbody>';
+
+    return html;
+
+  }
+
+  renderStatisticsFiltersTableRow = () => {
+
+    var html = '';
+    html += '<tr class="tablerow">'
+    html +='<td part="td-body" class="td-body TD_BODY_CLASS"><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 TD_BODY_CLASS"><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 TD_BODY_CLASS"><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 TD_BODY_CLASS"><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 TD_BODY_CLASS"><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 TD_BODY_CLASS"><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>';
+
+    return html;
+
+  }
+
+  renderStatisticsFiltersTableEnd = () => {
+
+    var html = '';
+    html += '</tbody></table><div>';
+
+    return html;
+
+  }
+
   getCalendarRowHide = (events: any, i: number, lastDay: number, month: number, firstDate: any = null, currDate: any = null) => {
 
     var hide = true;
@@ -4956,8 +5006,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 = "";
@@ -4993,10 +5045,58 @@ export class SfIEvents extends LitElement {
         approved += this.statistics[mmdd]["approved"] ?? 0;
           
       } 
+      
+      
     }
 
-    html += this.renderCalendarContainerDivEnd();
+    if(Object.keys(this.statisticsFiltersData).length > 0){
+      let filtercriteria = Object.keys(this.statisticsFiltersData)[0]
+      let sortedFilters = Util.alphabeticalSort(this.statisticsMeta[filtercriteria])
+      for(let [filterindex, filterval] of sortedFilters.entries()){
+        let filtername = filterval.split(';')[0]
+        let filterid = filterval.split(';')[1]
+        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()
+        if(filterindex % 2 == 0){
+          filtersTableHtml = filtersTableHtml.replace(/TD_BODY_CLASS/g, "td-light");  
+        }else{
+          filtersTableHtml = filtersTableHtml.replace(/TD_BODY_CLASS/g, "td-dark");  
+        }
+        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) + ")");
+      }
+      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();
@@ -5013,6 +5113,10 @@ export class SfIEvents extends LitElement {
 
     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>'
+    if(Object.keys(this.statisticsFiltersData).length > 0){
+      this.htmlDataStats += '<br /><br />Report<br /><br />'
+      this.htmlDataStats += filtersTableHtml
+    }
 
     return html;
   }
@@ -6590,10 +6694,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{
@@ -6602,6 +6712,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{
@@ -6609,15 +6720,14 @@ 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 == ""){
-        selectFilterValues.value = ""
-        this.processDateSelectionViewer(eventsContainer)
-      }
+      selectFilterValues.value = ""
+      this.processDateSelectionViewer(eventsContainer)
       
       selectFilterValues.innerHTML = ""
       let option = new Option()
@@ -6650,10 +6760,8 @@ export class SfIEvents extends LitElement {
       let target = ev.target as HTMLSelectElement
       let inputLabelCriteriaMobile = eventsContainer.querySelector('#input-label-criteria-mobile') as HTMLLabelElement
       let selectFilterValuesMobile = eventsContainer.querySelector('#select-filter-values-mobile') as HTMLSelectElement
-      if(target.value == ""){
-        selectFilterValuesMobile.value = ""
-        this.processDateSelectionViewer(eventsContainer)
-      }
+      selectFilterValuesMobile.value = ""
+      this.processDateSelectionViewer(eventsContainer)
       
       selectFilterValuesMobile.innerHTML = ""
       let option = new Option()
@@ -6680,15 +6788,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">';
@@ -9283,11 +9400,11 @@ export class SfIEvents extends LitElement {
     html += '<div class="d-flex w-100">';
       html += '<div class="calendar-left-col desktop-only flex-col justify-start align-end">';
 
-        html += '<div class="title-item-date d-flex flex-col align-end">';
+        html += '<div class="title-item-date d-flex flex-col align-start">';
         html += '<label part="input-label">Start Date</label>'
         html += '<input id="stream-start-date" part="date-range-preselected" type="date" />'
         html += '</div>';
-        html += '<div class="title-item-date d-flex flex-col align-end">';
+        html += '<div class="title-item-date d-flex flex-col align-start">';
         html += '<label part="input-label">End Date</label>'
         html += '<input id="stream-end-date" part="date-range-preselected" type="date" />'
         html += '</div>';
@@ -9300,11 +9417,11 @@ export class SfIEvents extends LitElement {
         html += '<div class="title-item-date">';
         html += '<button id="button-this-year" part="button-range-preselected">This Year</button>'
         html += '</div>';
-        html += '<div class="title-item-date d-flex flex-col align-end">';
+        html += '<div class="title-item-date d-flex flex-col align-start">';
         html += '<label part="input-label-filter-criteria" id="input-label-filter">Filter Criteria</label>'
         html += '<select part="input-select-calendar-filter" id="select-filter-criteria"></select>'
         html += '</div>';
-        html += '<div class="title-item-date d-flex flex-col align-end">';
+        html += '<div class="title-item-date d-flex flex-col align-start">';
         html += '<label part="input-label-filter-value" id="input-label-criteria"></label>'
         html += '<select part="input-select-calendar-filter" id="select-filter-values"></select>'
         html += '</div>';
@@ -22332,7 +22449,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;
@@ -22363,6 +22480,7 @@ export class SfIEvents extends LitElement {
       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