sf-i-events 1.0.741 → 1.0.743

package/package.json

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

package/sf-i-events.d.ts

@@ -565,7 +565,7 @@ export declare class SfIEvents extends LitElement {
     renderCompletenessCsvForGraph: (dataBar: any, parameter: string) => void;
     renderTimelinessCsvForGraph: (dataBar: any, parameter: string) => void;
     renderComplianceCsvForGraph: (dataBar: any, parameter: string) => void;
-    renderCompletenessGraph: (divContainer: HTMLDivElement, selectedTab?: number, selectedSummary?: number) => void;
+    renderCompletenessGraph: (divContainer: HTMLDivElement, selectedTab?: number, selectedSummary?: number, title?: string) => void;
     renderComplianceGraph: (divContainer: HTMLDivElement) => void;
     renderTimelinessGraph: (divContainer: HTMLDivElement) => void;
     renderRiskSeverityGraph: (divContainer: HTMLDivElement) => void;

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;
@@ -2104,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>';
@@ -2150,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>';
@@ -2195,26 +2205,25 @@ let SfIEvents = class SfIEvents extends LitElement {
         };
         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>';
-            // 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 += '<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>';
-            // 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>';
+            html += '</tbody></table><div>';
             return html;
         };
         this.getCalendarRowHide = (events, i, lastDay, month, firstDate = null, currDate = null) => {
@@ -2795,15 +2804,12 @@ 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;
-                        }
-                    }
+            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 = "";
@@ -2826,16 +2832,20 @@ let SfIEvents = class SfIEvents extends LitElement {
                         }
                     }
                     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 = 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;
@@ -2852,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) => {
@@ -4223,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.innerHTML = "";
                 let option = new Option();
                 option.value = "";
@@ -4259,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 = "";
@@ -4729,7 +4739,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
             this.attachHandlers(eventContainer, valueStart, valueEnd);
             if (eventContainer.innerHTML.indexOf('myChart') >= 0) {
-                this.renderCompletenessGraph(eventContainer, -1, 2);
+                this.renderCompletenessGraph(eventContainer, -1, 2, "Completeness - " + "From " + new Date(valueStart).toLocaleDateString('en-IN') + " To " + new Date(valueEnd).toLocaleDateString('en-IN') + " " + this.htmlStatsFilter.replace(/Filters Selected /g, ""));
             }
         };
         this.initFindRightCol = () => {
@@ -6397,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>';
@@ -6414,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>';
@@ -7356,7 +7366,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
             //console.log('rendering csv csvComplianceStats', this.csvComplianceStats);
         };
-        this.renderCompletenessGraph = (divContainer, selectedTab = -1, selectedSummary = -1) => {
+        this.renderCompletenessGraph = (divContainer, selectedTab = -1, selectedSummary = -1, title = "Completeness") => {
             this.clearSelectedGraphParam();
             // this.clearSelectedLegend();
             this.csvGraphStats = "";
@@ -7390,7 +7400,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                         }]
                 };
                 this.renderChartSettings(divContainer, selectedTab, selectedSummary, ctx);
-                this.renderChart(ctx, 'doughnut', data, "Completeness");
+                this.renderChart(ctx, 'doughnut', data, title);
             }
             const data = {
                 labels: ['Approved', 'Not Started', 'Pending Approval', 'Rejected'],
@@ -7421,7 +7431,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 itemsCompliance[i].style.display = 'none';
             }
             this.renderChartSettings(divContainer, selectedTab, selectedSummary, ctx);
-            this.renderChart(ctx, 'doughnut', data, "Completeness");
+            this.renderChart(ctx, 'doughnut', data, title);
         };
         this.renderComplianceGraph = (divContainer) => {
             //console.log('Rendering compliance graph...');
@@ -19403,7 +19413,7 @@ SfIEvents.styles = css `
       display: none;
       position: fixed;
       bottom: 10px;
-      left: 10px
+      right: 10px
     }
     
     .small-icon {

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;
@@ -2639,7 +2649,7 @@ export class SfIEvents extends LitElement {
       display: none;
       position: fixed;
       bottom: 10px;
-      left: 10px
+      right: 10px
     }
     
     .small-icon {
@@ -4177,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>';
@@ -4230,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>'
@@ -4294,9 +4304,8 @@ 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>';
-    // 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;
 
@@ -4306,14 +4315,13 @@ export class SfIEvents extends LitElement {
 
     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 +='<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>';
-    // 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;
 
@@ -4322,7 +4330,7 @@ export class SfIEvents extends LitElement {
   renderStatisticsFiltersTableEnd = () => {
 
     var html = '';
-    html += '</tbody></table>';
+    html += '</tbody></table><div>';
 
     return html;
 
@@ -5041,15 +5049,12 @@ export class SfIEvents extends LitElement {
       
     }
 
-    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;
-          }
-        }
+    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++) {
 
@@ -5072,19 +5077,20 @@ export class SfIEvents extends LitElement {
             }
           }
         }
-
         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 = 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()
     }
     
@@ -5107,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;
   }
@@ -6716,10 +6726,8 @@ export class SfIEvents extends LitElement {
       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()
@@ -6752,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()
@@ -7323,7 +7329,7 @@ export class SfIEvents extends LitElement {
 
     if(eventContainer.innerHTML.indexOf('myChart') >= 0) {
   
-      this.renderCompletenessGraph(eventContainer, -1, 2);
+      this.renderCompletenessGraph(eventContainer, -1, 2, "Completeness - " + "From " + new Date(valueStart).toLocaleDateString('en-IN') + " To " + new Date(valueEnd).toLocaleDateString('en-IN') + " " + this.htmlStatsFilter.replace(/Filters Selected /g,""));
 
     }
     
@@ -9394,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>';
@@ -9411,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>';
@@ -10642,7 +10648,7 @@ export class SfIEvents extends LitElement {
 
   }
 
-  renderCompletenessGraph = (divContainer: HTMLDivElement, selectedTab: number = -1, selectedSummary: number = -1) => {
+  renderCompletenessGraph = (divContainer: HTMLDivElement, selectedTab: number = -1, selectedSummary: number = -1, title: string = "Completeness") => {
 
     this.clearSelectedGraphParam();
     // this.clearSelectedLegend();
@@ -10683,7 +10689,7 @@ export class SfIEvents extends LitElement {
       }
 
       this.renderChartSettings(divContainer, selectedTab, selectedSummary, ctx);
-      this.renderChart(ctx, 'doughnut', data, "Completeness")
+      this.renderChart(ctx, 'doughnut', data, title)
 
     }
     const data = {
@@ -10700,10 +10706,10 @@ export class SfIEvents extends LitElement {
         ]
       }]
     }
-
+    
     this.csvGraphStats += 'Completeness,Approved,Not Started,Pending Approval,Rejected,Total\n';
     this.csvGraphStats += 'Total,'+dataApproved+','+dataNotStarted+','+dataPendingApproval+','+dataRejected+','+(parseInt(dataApproved)+parseInt(dataNotStarted)+parseInt(dataPendingApproval)+parseInt(dataRejected))+'\n';
-
+    
     const itemsTimeliness = divContainer.querySelectorAll('.stat-timeliness') as NodeListOf<HTMLElement>;
     for(var i = 0; i < itemsTimeliness.length; i++) {
       itemsTimeliness[i].style.display = 'none';
@@ -10717,7 +10723,7 @@ export class SfIEvents extends LitElement {
       itemsCompliance[i].style.display = 'none';
     }
     this.renderChartSettings(divContainer, selectedTab, selectedSummary, ctx);
-    this.renderChart(ctx, 'doughnut', data, "Completeness")
+    this.renderChart(ctx, 'doughnut', data, title)
 
   }
 

package/src/util.ts

@@ -446,8 +446,11 @@ function alphabeticalSort(arr:string[]){
 }
 
 function percentageString(val: number, valTotal: number){
+  if(valTotal == 0){
+    return ""
+  }
   let num = (100 * val) / valTotal
-  return (Math.round((num + Number.EPSILON) * 100) / 100) + "%"
+  return " (" + (Math.round((num + Number.EPSILON) * 100) / 100) + "%)"
 }
 
 const exportFunctions = {

package/util.js

@@ -373,8 +373,11 @@ function alphabeticalSort(arr) {
     return arrSorted;
 }
 function percentageString(val, valTotal) {
+    if (valTotal == 0) {
+        return "";
+    }
     let num = (100 * val) / valTotal;
-    return (Math.round((num + Number.EPSILON) * 100) / 100) + "%";
+    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, percentageString