tango-app-ui-analyse-zone 3.3.1-beta.8 → 3.3.1-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -70,7 +70,7 @@ class ZoneService {
|
|
|
70
70
|
return this.http.post(`${this.zoneAnalysisV1Url}/zoneConcentrationSummaryTable_v1`, data);
|
|
71
71
|
}
|
|
72
72
|
zoneConcentrationTableDataExport(data) {
|
|
73
|
-
return this.http.post(`${this.zoneAnalysisV1Url}/zoneConcentrationSummaryTable_v1`, data);
|
|
73
|
+
return this.http.post(`${this.zoneAnalysisV1Url}/zoneConcentrationSummaryTable_v1`, data, { responseType: 'arraybuffer' });
|
|
74
74
|
}
|
|
75
75
|
getOverallStoreConcentrationData(data) {
|
|
76
76
|
return this.http.post(`${this.zoneAnalysisV1Url}/zoneHeatmapDatas_v1`, data);
|
|
@@ -846,6 +846,7 @@ class ZoneConcentrationComponent {
|
|
|
846
846
|
this.ZoneService.zoneConcentrationTableData(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
|
|
847
847
|
this.zonesummaryLoading = false;
|
|
848
848
|
if (response?.code === 200 && response?.status === "success") {
|
|
849
|
+
console.log("response.data.zoneConcentrationData", response.data.zoneConcentrationData);
|
|
849
850
|
this.zoneConcentrationData = response.data.zoneConcentrationData;
|
|
850
851
|
// this.zoneName = response.data.zoneConcentrationData[0].zoneName;
|
|
851
852
|
this.zoneName = this.zoneConcentrationData.length ? this.zoneConcentrationData[0].zoneName : '';
|
|
@@ -940,13 +941,13 @@ class ZoneConcentrationComponent {
|
|
|
940
941
|
}
|
|
941
942
|
else {
|
|
942
943
|
this.overallStoreData = [];
|
|
943
|
-
this.zoneConcentrationData = []
|
|
944
|
+
// this.zoneConcentrationData = []
|
|
944
945
|
this.heatmapLoading = false;
|
|
945
946
|
this.heatmapNoData = true;
|
|
946
947
|
}
|
|
947
948
|
}, error => {
|
|
948
949
|
this.overallStoreData = [];
|
|
949
|
-
this.zoneConcentrationData = []
|
|
950
|
+
// this.zoneConcentrationData = []
|
|
950
951
|
console.error('API call failed', error);
|
|
951
952
|
});
|
|
952
953
|
}
|
|
@@ -1030,11 +1031,11 @@ class ZoneConcentrationComponent {
|
|
|
1030
1031
|
element.scrollBy({ left: 200, behavior: 'smooth' });
|
|
1031
1032
|
}
|
|
1032
1033
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ZoneConcentrationComponent, deps: [{ token: i0.NgZone }, { token: i1$1.NgbModal }, { token: i2$1.FormBuilder }, { token: ZoneService }, { token: i0.ChangeDetectorRef }, { token: i4.ToastService }, { token: i2.GlobalStateService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1033
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ZoneConcentrationComponent, selector: "lib-zone-concentration", providers: [NgbCarouselConfig], viewQueries: [{ propertyName: "dateList", first: true, predicate: ["dateList"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-5 right-border my-2\">\r\n <div class=\"h-100\">\r\n <div class=\"card-header p-3\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <!-- Left side: Title -->\r\n <h3 class=\"card-title align-items-start flex-column ms-3\">\r\n <span class=\"headtext\">Zone Concentration Summary</span> \r\n </h3>\r\n \r\n <!-- Right side: Search bar and Export button -->\r\n <div class=\"d-flex align-items-center exportwidth\">\r\n <!-- Search Input -->\r\n <div class=\"position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute mt-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-10 invoicesearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (change)=\"searchField()\"/>\r\n </div>\r\n \r\n <!-- Export Button -->\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader ms-3\" \r\n [disabled]=\"!zoneConcentrationData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"table-container m-4\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall <br>(Actuals)\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Dwell Time <br>(Average)\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"conc cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Concentration\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table-responsive\">\r\n <tr *ngFor=\"let zone of zoneConcentrationData\">\r\n <td>\r\n <div class=\"table-title-primary overallstore mb-2\">\r\n <span\r\n class=\"text-capitalize cursor-pointer\"><a (click)=\"onZoneClick(zone.zoneName)\">{{ zone.zoneName || '--' }}</a>\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.footfallCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ zone.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody> \r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Concentration Summary</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-7\">\r\n <div class=\"card-header border-0 p-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ zoneName || '' }} Concentration Heatmap</span>\r\n </h3>\r\n\r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\"\r\n (click)=\"selectPlan('daily')\"\r\n [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\"\r\n (click)=\"selectPlan('weekly')\" [disabled]=\"disableWeek\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\"\r\n (click)=\"selectPlan('monthly')\" [disabled]=\"disableMonth\">\r\n Month\r\n </button>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-8\">\r\n \r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone == 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"(periodzone == 2 || periodzone == 3) && !customOption\"\r\n \r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel [interval]=\"0\" [pauseOnHover]=\"true\">\r\n <ng-container *ngFor=\"let image of overallStoreData?.ImageURLs\">\r\n <ng-template ngbSlide>\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreData?.ImageURLs)\" [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <a [href]=\"image.URL\" download><svg\r\n id=\"download-icon\"\r\n width=\"44\"\r\n height=\"44\"\r\n viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\"\r\n >\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\"\r\n y=\"0\"\r\n width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\"\r\n >\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\"\r\n />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"\r\n />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"body me-4\">\r\n <div class=\"pt-10 m-6\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Total Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{overallStoreData?.totalFootfall?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Concentration %\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <span class=\"table-title\">{{ roundof(overallStoreData?.concentrationRate) || '0' }} %</span> -->\r\n <span class=\"table-title\">{{ overallStoreData?.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Bounced Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.bouncedCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Engagers\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.engagersCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Avg. Dwell Time\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Age Range\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.ageRange?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Male Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.maleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Female Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.femaleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.exportwidth{width:40%}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:70px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-4%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:350px}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:20%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$1.NgbCarousel, selector: "ngb-carousel", inputs: ["animation", "activeId", "interval", "wrap", "keyboard", "pauseOnHover", "pauseOnFocus", "showNavigationArrows", "showNavigationIndicators"], outputs: ["slide", "slid"], exportAs: ["ngbCarousel"] }, { kind: "directive", type: i1$1.NgbSlide, selector: "ng-template[ngbSlide]", inputs: ["id"], outputs: ["slid"] }] });
|
|
1034
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ZoneConcentrationComponent, selector: "lib-zone-concentration", providers: [NgbCarouselConfig], viewQueries: [{ propertyName: "dateList", first: true, predicate: ["dateList"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-5 right-border my-2\">\r\n <div class=\"h-100\">\r\n <div class=\"card-header p-3\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <!-- Left side: Title -->\r\n <h3 class=\"card-title align-items-start flex-column ms-3\">\r\n <span class=\"headtext\">Zone Concentration Summary</span> \r\n </h3>\r\n \r\n <!-- Right side: Search bar and Export button -->\r\n <div class=\"d-flex align-items-center exportwidth\">\r\n <!-- Search Input -->\r\n <div class=\"position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute mt-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-10 invoicesearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (change)=\"searchField()\"/>\r\n </div>\r\n \r\n <!-- Export Button -->\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader ms-3\" \r\n [disabled]=\"!zoneConcentrationData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"table-container m-4\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall <br>(Actuals)\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Dwell Time <br>(Average)\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"conc cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Concentration\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table-responsive\">\r\n <tr *ngFor=\"let zone of zoneConcentrationData\">\r\n <td>\r\n <div class=\"table-title-primary overallstore mb-2\">\r\n <span\r\n class=\"text-capitalize cursor-pointer\"><a (click)=\"onZoneClick(zone.zoneName)\">{{ zone.zoneName || '--' }}</a>\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.footfallCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ zone.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody> \r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Concentration Summary</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-7\">\r\n <div class=\"card-header border-0 p-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ zoneName || '' }} Concentration Heatmap</span>\r\n </h3>\r\n\r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\"\r\n (click)=\"selectPlan('daily')\"\r\n [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\"\r\n (click)=\"selectPlan('weekly')\" [disabled]=\"disableWeek\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\"\r\n (click)=\"selectPlan('monthly')\" [disabled]=\"disableMonth\">\r\n Month\r\n </button>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-8\">\r\n \r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone == 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"(periodzone == 2 || periodzone == 3) && !customOption\"\r\n \r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel [interval]=\"0\" [pauseOnHover]=\"true\">\r\n <ng-container *ngFor=\"let image of overallStoreData?.ImageURLs\">\r\n <ng-template ngbSlide>\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreData?.ImageURLs)\" [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <a [href]=\"image.URL\" download><svg\r\n id=\"download-icon\"\r\n width=\"44\"\r\n height=\"44\"\r\n viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\"\r\n >\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\"\r\n y=\"0\"\r\n width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\"\r\n >\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\"\r\n />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"\r\n />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"body me-4\">\r\n <div class=\"pt-10 m-6\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Total Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{overallStoreData?.totalFootfall?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Concentration %\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <span class=\"table-title\">{{ roundof(overallStoreData?.concentrationRate) || '0' }} %</span> -->\r\n <span class=\"table-title\">{{ overallStoreData?.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Bounced Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.bouncedCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Engagers\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.engagersCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Avg. Dwell Time\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Age Range\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.ageRange?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Male Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.maleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Female Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.femaleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.exportwidth{width:40%}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:70px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-4%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:350px}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:10%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$1.NgbCarousel, selector: "ngb-carousel", inputs: ["animation", "activeId", "interval", "wrap", "keyboard", "pauseOnHover", "pauseOnFocus", "showNavigationArrows", "showNavigationIndicators"], outputs: ["slide", "slid"], exportAs: ["ngbCarousel"] }, { kind: "directive", type: i1$1.NgbSlide, selector: "ng-template[ngbSlide]", inputs: ["id"], outputs: ["slid"] }] });
|
|
1034
1035
|
}
|
|
1035
1036
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ZoneConcentrationComponent, decorators: [{
|
|
1036
1037
|
type: Component,
|
|
1037
|
-
args: [{ selector: 'lib-zone-concentration', providers: [NgbCarouselConfig], template: "<div class=\"card\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-5 right-border my-2\">\r\n <div class=\"h-100\">\r\n <div class=\"card-header p-3\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <!-- Left side: Title -->\r\n <h3 class=\"card-title align-items-start flex-column ms-3\">\r\n <span class=\"headtext\">Zone Concentration Summary</span> \r\n </h3>\r\n \r\n <!-- Right side: Search bar and Export button -->\r\n <div class=\"d-flex align-items-center exportwidth\">\r\n <!-- Search Input -->\r\n <div class=\"position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute mt-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-10 invoicesearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (change)=\"searchField()\"/>\r\n </div>\r\n \r\n <!-- Export Button -->\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader ms-3\" \r\n [disabled]=\"!zoneConcentrationData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"table-container m-4\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall <br>(Actuals)\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Dwell Time <br>(Average)\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"conc cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Concentration\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table-responsive\">\r\n <tr *ngFor=\"let zone of zoneConcentrationData\">\r\n <td>\r\n <div class=\"table-title-primary overallstore mb-2\">\r\n <span\r\n class=\"text-capitalize cursor-pointer\"><a (click)=\"onZoneClick(zone.zoneName)\">{{ zone.zoneName || '--' }}</a>\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.footfallCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ zone.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody> \r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Concentration Summary</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-7\">\r\n <div class=\"card-header border-0 p-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ zoneName || '' }} Concentration Heatmap</span>\r\n </h3>\r\n\r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\"\r\n (click)=\"selectPlan('daily')\"\r\n [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\"\r\n (click)=\"selectPlan('weekly')\" [disabled]=\"disableWeek\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\"\r\n (click)=\"selectPlan('monthly')\" [disabled]=\"disableMonth\">\r\n Month\r\n </button>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-8\">\r\n \r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone == 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"(periodzone == 2 || periodzone == 3) && !customOption\"\r\n \r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel [interval]=\"0\" [pauseOnHover]=\"true\">\r\n <ng-container *ngFor=\"let image of overallStoreData?.ImageURLs\">\r\n <ng-template ngbSlide>\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreData?.ImageURLs)\" [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <a [href]=\"image.URL\" download><svg\r\n id=\"download-icon\"\r\n width=\"44\"\r\n height=\"44\"\r\n viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\"\r\n >\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\"\r\n y=\"0\"\r\n width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\"\r\n >\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\"\r\n />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"\r\n />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"body me-4\">\r\n <div class=\"pt-10 m-6\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Total Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{overallStoreData?.totalFootfall?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Concentration %\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <span class=\"table-title\">{{ roundof(overallStoreData?.concentrationRate) || '0' }} %</span> -->\r\n <span class=\"table-title\">{{ overallStoreData?.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Bounced Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.bouncedCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Engagers\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.engagersCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Avg. Dwell Time\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Age Range\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.ageRange?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Male Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.maleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Female Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.femaleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.exportwidth{width:40%}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:70px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-4%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:350px}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:20%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}\n"] }]
|
|
1038
|
+
args: [{ selector: 'lib-zone-concentration', providers: [NgbCarouselConfig], template: "<div class=\"card\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-5 right-border my-2\">\r\n <div class=\"h-100\">\r\n <div class=\"card-header p-3\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <!-- Left side: Title -->\r\n <h3 class=\"card-title align-items-start flex-column ms-3\">\r\n <span class=\"headtext\">Zone Concentration Summary</span> \r\n </h3>\r\n \r\n <!-- Right side: Search bar and Export button -->\r\n <div class=\"d-flex align-items-center exportwidth\">\r\n <!-- Search Input -->\r\n <div class=\"position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute mt-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-10 invoicesearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (change)=\"searchField()\"/>\r\n </div>\r\n \r\n <!-- Export Button -->\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader ms-3\" \r\n [disabled]=\"!zoneConcentrationData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"table-container m-4\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall <br>(Actuals)\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Dwell Time <br>(Average)\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"conc cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Concentration\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table-responsive\">\r\n <tr *ngFor=\"let zone of zoneConcentrationData\">\r\n <td>\r\n <div class=\"table-title-primary overallstore mb-2\">\r\n <span\r\n class=\"text-capitalize cursor-pointer\"><a (click)=\"onZoneClick(zone.zoneName)\">{{ zone.zoneName || '--' }}</a>\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.footfallCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ zone.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody> \r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Concentration Summary</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-7\">\r\n <div class=\"card-header border-0 p-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ zoneName || '' }} Concentration Heatmap</span>\r\n </h3>\r\n\r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\"\r\n (click)=\"selectPlan('daily')\"\r\n [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\"\r\n (click)=\"selectPlan('weekly')\" [disabled]=\"disableWeek\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\"\r\n (click)=\"selectPlan('monthly')\" [disabled]=\"disableMonth\">\r\n Month\r\n </button>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-8\">\r\n \r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone == 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"(periodzone == 2 || periodzone == 3) && !customOption\"\r\n \r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel [interval]=\"0\" [pauseOnHover]=\"true\">\r\n <ng-container *ngFor=\"let image of overallStoreData?.ImageURLs\">\r\n <ng-template ngbSlide>\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreData?.ImageURLs)\" [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <a [href]=\"image.URL\" download><svg\r\n id=\"download-icon\"\r\n width=\"44\"\r\n height=\"44\"\r\n viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\"\r\n >\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\"\r\n y=\"0\"\r\n width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\"\r\n >\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\"\r\n />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix\r\n type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"\r\n />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"body me-4\">\r\n <div class=\"pt-10 m-6\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Total Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{overallStoreData?.totalFootfall?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Concentration %\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <span class=\"table-title\">{{ roundof(overallStoreData?.concentrationRate) || '0' }} %</span> -->\r\n <span class=\"table-title\">{{ overallStoreData?.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Bounced Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.bouncedCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Engagers\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.engagersCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Avg. Dwell Time\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Age Range\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.ageRange?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Male Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.maleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Female Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.femaleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.exportwidth{width:40%}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:70px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-4%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:350px}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:10%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}\n"] }]
|
|
1038
1039
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }, { type: ZoneService }, { type: i0.ChangeDetectorRef }, { type: i4.ToastService }, { type: i2.GlobalStateService }, { type: i0.ElementRef }], propDecorators: { dateList: [{
|
|
1039
1040
|
type: ViewChild,
|
|
1040
1041
|
args: ['dateList', { read: ElementRef }]
|