tango-app-ui-analyse-zone 3.7.1-beta.15 → 3.7.1-beta.16
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.
|
@@ -2821,23 +2821,23 @@ class StoreHeatmapComponent {
|
|
|
2821
2821
|
this.customArrow = false;
|
|
2822
2822
|
this.cardcustomArrow = false;
|
|
2823
2823
|
this.type = 'daily';
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
|
|
2839
|
-
|
|
2840
|
-
|
|
2824
|
+
if (eDate.diff(sDate, 'day') < 6) {
|
|
2825
|
+
this.disableWeek = true;
|
|
2826
|
+
this.disableMonth = true;
|
|
2827
|
+
this.type = 'daily';
|
|
2828
|
+
}
|
|
2829
|
+
else if (eDate.diff(sDate, 'day') < 27) {
|
|
2830
|
+
this.disableMonth = true;
|
|
2831
|
+
this.disableDay = false;
|
|
2832
|
+
this.disableWeek = false;
|
|
2833
|
+
this.type = 'weekly';
|
|
2834
|
+
}
|
|
2835
|
+
else {
|
|
2836
|
+
this.disableDay = false;
|
|
2837
|
+
this.disableWeek = false;
|
|
2838
|
+
this.disableMonth = false;
|
|
2839
|
+
this.type = 'monthly';
|
|
2840
|
+
}
|
|
2841
2841
|
this.route.queryParams.subscribe(params => {
|
|
2842
2842
|
this.zoneName = params['zoneName'];
|
|
2843
2843
|
if (this.zoneName) {
|
|
@@ -2863,7 +2863,7 @@ class StoreHeatmapComponent {
|
|
|
2863
2863
|
changeTab(tabName) {
|
|
2864
2864
|
this.selectedTab = tabName;
|
|
2865
2865
|
this.zoneName = tabName;
|
|
2866
|
-
this.type = 'daily';
|
|
2866
|
+
// this.type = 'daily';
|
|
2867
2867
|
this.getOverallStoreHeatmapDates();
|
|
2868
2868
|
this.getTrajectoryAnalysis();
|
|
2869
2869
|
this.getTrajectoryRateAnalysis();
|
|
@@ -3313,7 +3313,7 @@ class StoreHeatmapComponent {
|
|
|
3313
3313
|
prevElement.setAttribute('style', "display:none");
|
|
3314
3314
|
}
|
|
3315
3315
|
}
|
|
3316
|
-
else if (this.currentSlide === this.overallStoreconcentrationData?.ImageURLs
|
|
3316
|
+
else if (this.currentSlide === this.overallStoreconcentrationData?.ImageURLs?.length - 1) {
|
|
3317
3317
|
prevElement?.removeAttribute('style');
|
|
3318
3318
|
if (nextElement) {
|
|
3319
3319
|
nextElement.setAttribute('style', "display:none");
|
|
@@ -3345,11 +3345,11 @@ class StoreHeatmapComponent {
|
|
|
3345
3345
|
});
|
|
3346
3346
|
}
|
|
3347
3347
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreHeatmapComponent, deps: [{ token: i0.NgZone }, { token: i1$1.NgbModal }, { token: i2$1.FormBuilder }, { token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i3.ToastService }, { token: i2.GlobalStateService }, { token: i0.ElementRef }, { token: i4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
3348
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StoreHeatmapComponent, selector: "lib-store-heatmap", viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, static: true }, { propertyName: "dateList", first: true, predicate: ["dateList"], descendants: true, read: ElementRef }, { propertyName: "zoneNameList", first: true, predicate: ["zoneNameList"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header storecard\">\r\n <div class=\"zone-container position-relative mx-5\">\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-left position-absolute\" (click)=\"zonescrollLeft()\">\r\n <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>\r\n </span>\r\n <div class=\"zone-buttons-container d-flex justify-content-start align-items-center no-wrap-list ms-4 me-10\" #zoneNameList>\r\n <button id=\"heatmapscroll\" *ngFor=\"let zone of availableZones\" \r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary py-3\"\r\n [ngClass]=\"selectedTab === zone.zoneName ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\r\n (click)=\"changeTab(zone.zoneName)\">\r\n {{ zone.zoneName }}\r\n </button>\r\n </div>\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-right position-absolute\" (click)=\"zonescrollRight()\">\r\n <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>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row px-3 pt-3\">\r\n <div class=\"col-lg-6 right-border my-1\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Store 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\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\" (click)=\"selectPlan('daily')\" [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n \r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\" (click)=\"selectPlan('weekly')\" [attr.disabled]=\"disableWeek ? true : null\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\" (click)=\"selectPlan('monthly')\" [attr.disabled]=\"disableMonth ? true : null\">\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 >\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\r\n }}</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 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\r\n }}</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\r\n }}</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 \r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel=\"ngbCarousel\" [interval]=\"0\" (slide)=\"onSlideChange($event)\" [pauseOnHover]=\"true\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreconcentrationData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreconcentrationData?.ImageURLs)\"\r\n [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <a [href]=\"image.URL\" download><svg id=\"download-icon\" width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\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\"\r\n 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\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" 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 <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix 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 <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n 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 </div>\r\n \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\r\n Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Analysis</span>\r\n </h3>\r\n </div>\r\n <div class=\"body me-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n <div class=\"m-4\" *ngIf=\"!cardDataLoading\">\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\">Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-12\">{{ overallStoreData?.footfall?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.footfall?.storeRate || '--' }}%</span> of store footfall\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Impression Rate</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{ overallStoreData?.impression?.zoneRate || '--' }}%</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.impression?.storeRate || '--' }}%</span> Store Impression\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Bounced Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-6\">{{ overallStoreData?.bounced?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.bounced?.storeRate || '--' }}%</span> of total bounced\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Engagers</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-10\">{{ overallStoreData?.engagers?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.engagers?.storeRate || '--' }}%</span> of total engagers\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Avg. Zone Dwell Time</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-12\">{{ overallStoreData?.avgDwellTime?.zoneAvgDwellTime || '--' }} mins</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n Avg. dwell time <span class=\"textprimary mx-1\">{{ overallStoreData?.avgDwellTime?.storeAvgDwellTime || '--' }} mins</span>\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"row\">\r\n <div class=\"col-8\">\r\n <div class=\"headtext p-3\">Age & Gender Analysis</div>\r\n <div class=\"card-body p-0 mb-2\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"mt-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div class=\"card-body p-0 mt-5\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <!-- <table class=\"table table-borderless text-center w-100\"> -->\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"overalltext\">{{ item?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n<!-- </table> -->\r\n\r\n <!-- <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let i of getAgeArray()\">\r\n <td>\r\n <div class=\"overalltext\">{{ ageAnalysis[i]?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ ageAnalysis[i]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"overalltext\">{{ ageAnalysis[i + 1]?.category || '' }}</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"table-title\">{{ ageAnalysis[i + 1]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n </tbody> -->\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"selectedTab !== 'Overall Store'\" class=\"row p-8\">\r\n <div class=\"col-12 trajectorycard\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Trajectory Analysis</span>\r\n </h3> \r\n </div>\r\n <div class=\"card-body\">\r\n \r\n \r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <ng-container *ngIf=\"trajectoryLoading\">\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=\"trajectoryNoData && !trajectoryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryLoading && !trajectoryNoData\" class=\"arcdiagram\">\r\n <div id=\"arcDiagramDiv\"></div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 p-12\">\r\n <ng-container *ngIf=\"trajectoryRateLoading\">\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=\"trajectoryRateNoData && !trajectoryRateLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryRateLoading && !trajectoryRateNoData\" class=\"row ps-15 mt-20\">\r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ currentZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n {{ selectedTab }}\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">Other Zones</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ currentZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ currentZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ currentZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ otherZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n Other Zones\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">{{ selectedTab }}</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ otherZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ otherZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Image Directory<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-image-directory></lib-image-directory>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container> -->\r\n \r\n</div>\r\n\r\n\r\n\r\n", styles: [".activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.storecard{padding:0px .25rem!important;border-bottom:1px solid var(--Gray-300, #D0D5DD)}.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}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.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:55px!important;align-items:center;gap:12px;align-self:stretch}::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:-8%;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:525px}.form-control:disabled{background-color:#f9fafb!important}.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}.blue-badge{border-radius:16px;background:var(--Primary-50, #EAF8FF);display:flex;padding:2px 10px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.textprimary{color:var(--Primary-700, #009BF3);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}#genderchartdiv{width:100%;height:300px}table th,table td{padding:0 20px!important;align-items:center;gap:6px;align-self:stretch}table tr{vertical-align:middle}.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}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.table-row-spacing{padding-bottom:15px}.trajectorycard{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);align-items:center;gap:16px;align-self:stretch}.card-border{padding:12px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.ratetext{color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badgegrey{border-radius:16px;background:var(--Gray-100, #F2F4F7);padding:2px 8px}#arcDiagramDiv{width:600px;height:550px}.zone-container{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;padding:10px 0}.zone-buttons-container{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0 30px;scroll-behavior:smooth;justify-content:flex-start}.no-wrap-list{white-space:nowrap}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-left{left:0}.arrow-right{right:20px}.position-absolute{position:absolute}.arrow-left,.arrow-right{display:block}.zone-buttons-container::-webkit-scrollbar{display:none}\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: "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"] }] });
|
|
3348
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StoreHeatmapComponent, selector: "lib-store-heatmap", viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, static: true }, { propertyName: "dateList", first: true, predicate: ["dateList"], descendants: true, read: ElementRef }, { propertyName: "zoneNameList", first: true, predicate: ["zoneNameList"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header storecard\">\r\n <div class=\"zone-container position-relative mx-5\">\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-left position-absolute\" (click)=\"zonescrollLeft()\">\r\n <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>\r\n </span>\r\n <div class=\"zone-buttons-container d-flex justify-content-start align-items-center no-wrap-list ms-4 me-10\" #zoneNameList>\r\n <button id=\"heatmapscroll\" *ngFor=\"let zone of availableZones\" \r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary py-3\"\r\n [ngClass]=\"selectedTab === zone.zoneName ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\r\n (click)=\"changeTab(zone.zoneName)\">\r\n {{ zone.zoneName }}\r\n </button>\r\n </div>\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-right position-absolute\" (click)=\"zonescrollRight()\">\r\n <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>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row px-3 pt-3\">\r\n <div class=\"col-lg-6 right-border my-1\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Store 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\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\" (click)=\"selectPlan('daily')\" [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n \r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\" (click)=\"selectPlan('weekly')\" [attr.disabled]=\"disableWeek ? true : null\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\" (click)=\"selectPlan('monthly')\" [attr.disabled]=\"disableMonth ? true : null\">\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 >\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\r\n }}</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 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\r\n }}</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\r\n }}</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 \r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel [interval]=\"0\" [pauseOnHover]=\"true\" (slide)=\"onSlideChange($event)\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreconcentrationData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreconcentrationData?.ImageURLs)\"\r\n [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n \r\n <a [href]=\"image.URL\" download><svg id=\"download-icon\" width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\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\"\r\n 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\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" 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 <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix 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 <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n 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 </div>\r\n \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\r\n Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Analysis</span>\r\n </h3>\r\n </div>\r\n <div class=\"body me-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n <div class=\"m-4\" *ngIf=\"!cardDataLoading\">\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\">Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-12\">{{ overallStoreData?.footfall?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.footfall?.storeRate || '--' }}%</span> of store footfall\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Impression Rate</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{ overallStoreData?.impression?.zoneRate || '--' }}%</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.impression?.storeRate || '--' }}%</span> Store Impression\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Bounced Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-6\">{{ overallStoreData?.bounced?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.bounced?.storeRate || '--' }}%</span> of total bounced\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Engagers</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-10\">{{ overallStoreData?.engagers?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.engagers?.storeRate || '--' }}%</span> of total engagers\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Avg. Zone Dwell Time</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-12\">{{ overallStoreData?.avgDwellTime?.zoneAvgDwellTime || '--' }} mins</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n Avg. dwell time <span class=\"textprimary mx-1\">{{ overallStoreData?.avgDwellTime?.storeAvgDwellTime || '--' }} mins</span>\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"row\">\r\n <div class=\"col-8\">\r\n <div class=\"headtext p-3\">Age & Gender Analysis</div>\r\n <div class=\"card-body p-0 mb-2\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"mt-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div class=\"card-body p-0 mt-5\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <!-- <table class=\"table table-borderless text-center w-100\"> -->\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"overalltext\">{{ item?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n<!-- </table> -->\r\n\r\n <!-- <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let i of getAgeArray()\">\r\n <td>\r\n <div class=\"overalltext\">{{ ageAnalysis[i]?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ ageAnalysis[i]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"overalltext\">{{ ageAnalysis[i + 1]?.category || '' }}</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"table-title\">{{ ageAnalysis[i + 1]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n </tbody> -->\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"selectedTab !== 'Overall Store'\" class=\"row p-8\">\r\n <div class=\"col-12 trajectorycard\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Trajectory Analysis</span>\r\n </h3> \r\n </div>\r\n <div class=\"card-body\">\r\n \r\n \r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <ng-container *ngIf=\"trajectoryLoading\">\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=\"trajectoryNoData && !trajectoryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryLoading && !trajectoryNoData\" class=\"arcdiagram\">\r\n <div id=\"arcDiagramDiv\"></div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 p-12\">\r\n <ng-container *ngIf=\"trajectoryRateLoading\">\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=\"trajectoryRateNoData && !trajectoryRateLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryRateLoading && !trajectoryRateNoData\" class=\"row ps-15 mt-20\">\r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ currentZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n {{ selectedTab }}\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">Other Zones</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ currentZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ currentZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ currentZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ otherZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n Other Zones\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">{{ selectedTab }}</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ otherZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ otherZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Image Directory<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-image-directory></lib-image-directory>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container> -->\r\n \r\n</div>\r\n\r\n\r\n\r\n", styles: [".activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.storecard{padding:0px .25rem!important;border-bottom:1px solid var(--Gray-300, #D0D5DD)}.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}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.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:55px!important;align-items:center;gap:12px;align-self:stretch}::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:-8%;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:525px}.form-control:disabled{background-color:#f9fafb!important}.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}.blue-badge{border-radius:16px;background:var(--Primary-50, #EAF8FF);display:flex;padding:2px 10px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.textprimary{color:var(--Primary-700, #009BF3);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}#genderchartdiv{width:100%;height:300px}table th,table td{padding:0 20px!important;align-items:center;gap:6px;align-self:stretch}table tr{vertical-align:middle}.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}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.table-row-spacing{padding-bottom:15px}.trajectorycard{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);align-items:center;gap:16px;align-self:stretch}.card-border{padding:12px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.ratetext{color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badgegrey{border-radius:16px;background:var(--Gray-100, #F2F4F7);padding:2px 8px}#arcDiagramDiv{width:600px;height:550px}.zone-container{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;padding:10px 0}.zone-buttons-container{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0 30px;scroll-behavior:smooth;justify-content:flex-start}.no-wrap-list{white-space:nowrap}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-left{left:0}.arrow-right{right:20px}.position-absolute{position:absolute}.arrow-left,.arrow-right{display:block}.zone-buttons-container::-webkit-scrollbar{display:none}\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: "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"] }] });
|
|
3349
3349
|
}
|
|
3350
3350
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreHeatmapComponent, decorators: [{
|
|
3351
3351
|
type: Component,
|
|
3352
|
-
args: [{ selector: 'lib-store-heatmap', template: "<div class=\"card\">\r\n <div class=\"card-header storecard\">\r\n <div class=\"zone-container position-relative mx-5\">\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-left position-absolute\" (click)=\"zonescrollLeft()\">\r\n <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>\r\n </span>\r\n <div class=\"zone-buttons-container d-flex justify-content-start align-items-center no-wrap-list ms-4 me-10\" #zoneNameList>\r\n <button id=\"heatmapscroll\" *ngFor=\"let zone of availableZones\" \r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary py-3\"\r\n [ngClass]=\"selectedTab === zone.zoneName ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\r\n (click)=\"changeTab(zone.zoneName)\">\r\n {{ zone.zoneName }}\r\n </button>\r\n </div>\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-right position-absolute\" (click)=\"zonescrollRight()\">\r\n <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>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row px-3 pt-3\">\r\n <div class=\"col-lg-6 right-border my-1\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Store 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\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\" (click)=\"selectPlan('daily')\" [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n \r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\" (click)=\"selectPlan('weekly')\" [attr.disabled]=\"disableWeek ? true : null\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\" (click)=\"selectPlan('monthly')\" [attr.disabled]=\"disableMonth ? true : null\">\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 >\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\r\n }}</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 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\r\n }}</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\r\n }}</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 \r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel=\"ngbCarousel\" [interval]=\"0\" (slide)=\"onSlideChange($event)\" [pauseOnHover]=\"true\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreconcentrationData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreconcentrationData?.ImageURLs)\"\r\n [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <a [href]=\"image.URL\" download><svg id=\"download-icon\" width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\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\"\r\n 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\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" 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 <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix 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 <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n 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 </div>\r\n \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\r\n Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Analysis</span>\r\n </h3>\r\n </div>\r\n <div class=\"body me-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n <div class=\"m-4\" *ngIf=\"!cardDataLoading\">\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\">Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-12\">{{ overallStoreData?.footfall?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.footfall?.storeRate || '--' }}%</span> of store footfall\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Impression Rate</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{ overallStoreData?.impression?.zoneRate || '--' }}%</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.impression?.storeRate || '--' }}%</span> Store Impression\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Bounced Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-6\">{{ overallStoreData?.bounced?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.bounced?.storeRate || '--' }}%</span> of total bounced\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Engagers</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-10\">{{ overallStoreData?.engagers?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.engagers?.storeRate || '--' }}%</span> of total engagers\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Avg. Zone Dwell Time</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-12\">{{ overallStoreData?.avgDwellTime?.zoneAvgDwellTime || '--' }} mins</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n Avg. dwell time <span class=\"textprimary mx-1\">{{ overallStoreData?.avgDwellTime?.storeAvgDwellTime || '--' }} mins</span>\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"row\">\r\n <div class=\"col-8\">\r\n <div class=\"headtext p-3\">Age & Gender Analysis</div>\r\n <div class=\"card-body p-0 mb-2\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"mt-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div class=\"card-body p-0 mt-5\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <!-- <table class=\"table table-borderless text-center w-100\"> -->\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"overalltext\">{{ item?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n<!-- </table> -->\r\n\r\n <!-- <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let i of getAgeArray()\">\r\n <td>\r\n <div class=\"overalltext\">{{ ageAnalysis[i]?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ ageAnalysis[i]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"overalltext\">{{ ageAnalysis[i + 1]?.category || '' }}</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"table-title\">{{ ageAnalysis[i + 1]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n </tbody> -->\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"selectedTab !== 'Overall Store'\" class=\"row p-8\">\r\n <div class=\"col-12 trajectorycard\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Trajectory Analysis</span>\r\n </h3> \r\n </div>\r\n <div class=\"card-body\">\r\n \r\n \r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <ng-container *ngIf=\"trajectoryLoading\">\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=\"trajectoryNoData && !trajectoryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryLoading && !trajectoryNoData\" class=\"arcdiagram\">\r\n <div id=\"arcDiagramDiv\"></div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 p-12\">\r\n <ng-container *ngIf=\"trajectoryRateLoading\">\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=\"trajectoryRateNoData && !trajectoryRateLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryRateLoading && !trajectoryRateNoData\" class=\"row ps-15 mt-20\">\r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ currentZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n {{ selectedTab }}\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">Other Zones</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ currentZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ currentZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ currentZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ otherZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n Other Zones\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">{{ selectedTab }}</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ otherZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ otherZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Image Directory<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-image-directory></lib-image-directory>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container> -->\r\n \r\n</div>\r\n\r\n\r\n\r\n", styles: [".activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.storecard{padding:0px .25rem!important;border-bottom:1px solid var(--Gray-300, #D0D5DD)}.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}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.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:55px!important;align-items:center;gap:12px;align-self:stretch}::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:-8%;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:525px}.form-control:disabled{background-color:#f9fafb!important}.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}.blue-badge{border-radius:16px;background:var(--Primary-50, #EAF8FF);display:flex;padding:2px 10px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.textprimary{color:var(--Primary-700, #009BF3);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}#genderchartdiv{width:100%;height:300px}table th,table td{padding:0 20px!important;align-items:center;gap:6px;align-self:stretch}table tr{vertical-align:middle}.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}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.table-row-spacing{padding-bottom:15px}.trajectorycard{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);align-items:center;gap:16px;align-self:stretch}.card-border{padding:12px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.ratetext{color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badgegrey{border-radius:16px;background:var(--Gray-100, #F2F4F7);padding:2px 8px}#arcDiagramDiv{width:600px;height:550px}.zone-container{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;padding:10px 0}.zone-buttons-container{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0 30px;scroll-behavior:smooth;justify-content:flex-start}.no-wrap-list{white-space:nowrap}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-left{left:0}.arrow-right{right:20px}.position-absolute{position:absolute}.arrow-left,.arrow-right{display:block}.zone-buttons-container::-webkit-scrollbar{display:none}\n"] }]
|
|
3352
|
+
args: [{ selector: 'lib-store-heatmap', template: "<div class=\"card\">\r\n <div class=\"card-header storecard\">\r\n <div class=\"zone-container position-relative mx-5\">\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-left position-absolute\" (click)=\"zonescrollLeft()\">\r\n <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>\r\n </span>\r\n <div class=\"zone-buttons-container d-flex justify-content-start align-items-center no-wrap-list ms-4 me-10\" #zoneNameList>\r\n <button id=\"heatmapscroll\" *ngFor=\"let zone of availableZones\" \r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary py-3\"\r\n [ngClass]=\"selectedTab === zone.zoneName ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\r\n (click)=\"changeTab(zone.zoneName)\">\r\n {{ zone.zoneName }}\r\n </button>\r\n </div>\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-right position-absolute\" (click)=\"zonescrollRight()\">\r\n <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>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row px-3 pt-3\">\r\n <div class=\"col-lg-6 right-border my-1\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Store 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\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\" (click)=\"selectPlan('daily')\" [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n \r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\" (click)=\"selectPlan('weekly')\" [attr.disabled]=\"disableWeek ? true : null\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\" (click)=\"selectPlan('monthly')\" [attr.disabled]=\"disableMonth ? true : null\">\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 >\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\r\n }}</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 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\r\n }}</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\r\n }}</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 \r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel [interval]=\"0\" [pauseOnHover]=\"true\" (slide)=\"onSlideChange($event)\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreconcentrationData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreconcentrationData?.ImageURLs)\"\r\n [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n \r\n <a [href]=\"image.URL\" download><svg id=\"download-icon\" width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\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\"\r\n 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\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" 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 <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix 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 <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n 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 </div>\r\n \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\r\n Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Analysis</span>\r\n </h3>\r\n </div>\r\n <div class=\"body me-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n <div class=\"m-4\" *ngIf=\"!cardDataLoading\">\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\">Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-12\">{{ overallStoreData?.footfall?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.footfall?.storeRate || '--' }}%</span> of store footfall\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Impression Rate</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{ overallStoreData?.impression?.zoneRate || '--' }}%</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.impression?.storeRate || '--' }}%</span> Store Impression\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Bounced Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-6\">{{ overallStoreData?.bounced?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.bounced?.storeRate || '--' }}%</span> of total bounced\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Engagers</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-10\">{{ overallStoreData?.engagers?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.engagers?.storeRate || '--' }}%</span> of total engagers\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \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\">Avg. Zone Dwell Time</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-12\">{{ overallStoreData?.avgDwellTime?.zoneAvgDwellTime || '--' }} mins</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n Avg. dwell time <span class=\"textprimary mx-1\">{{ overallStoreData?.avgDwellTime?.storeAvgDwellTime || '--' }} mins</span>\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"row\">\r\n <div class=\"col-8\">\r\n <div class=\"headtext p-3\">Age & Gender Analysis</div>\r\n <div class=\"card-body p-0 mb-2\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"mt-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div class=\"card-body p-0 mt-5\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <!-- <table class=\"table table-borderless text-center w-100\"> -->\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"overalltext\">{{ item?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ item?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n<!-- </table> -->\r\n\r\n <!-- <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let i of getAgeArray()\">\r\n <td>\r\n <div class=\"overalltext\">{{ ageAnalysis[i]?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ ageAnalysis[i]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"overalltext\">{{ ageAnalysis[i + 1]?.category || '' }}</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"table-title\">{{ ageAnalysis[i + 1]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n </tbody> -->\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"selectedTab !== 'Overall Store'\" class=\"row p-8\">\r\n <div class=\"col-12 trajectorycard\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Trajectory Analysis</span>\r\n </h3> \r\n </div>\r\n <div class=\"card-body\">\r\n \r\n \r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <ng-container *ngIf=\"trajectoryLoading\">\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=\"trajectoryNoData && !trajectoryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryLoading && !trajectoryNoData\" class=\"arcdiagram\">\r\n <div id=\"arcDiagramDiv\"></div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 p-12\">\r\n <ng-container *ngIf=\"trajectoryRateLoading\">\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=\"trajectoryRateNoData && !trajectoryRateLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 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 Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryRateLoading && !trajectoryRateNoData\" class=\"row ps-15 mt-20\">\r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ currentZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n {{ selectedTab }}\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">Other Zones</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ currentZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ currentZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ currentZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ otherZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n Other Zones\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">{{ selectedTab }}</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ otherZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ otherZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Image Directory<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-image-directory></lib-image-directory>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container> -->\r\n \r\n</div>\r\n\r\n\r\n\r\n", styles: [".activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.storecard{padding:0px .25rem!important;border-bottom:1px solid var(--Gray-300, #D0D5DD)}.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}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.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:55px!important;align-items:center;gap:12px;align-self:stretch}::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:-8%;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:525px}.form-control:disabled{background-color:#f9fafb!important}.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}.blue-badge{border-radius:16px;background:var(--Primary-50, #EAF8FF);display:flex;padding:2px 10px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.textprimary{color:var(--Primary-700, #009BF3);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}#genderchartdiv{width:100%;height:300px}table th,table td{padding:0 20px!important;align-items:center;gap:6px;align-self:stretch}table tr{vertical-align:middle}.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}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.table-row-spacing{padding-bottom:15px}.trajectorycard{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);align-items:center;gap:16px;align-self:stretch}.card-border{padding:12px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.ratetext{color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badgegrey{border-radius:16px;background:var(--Gray-100, #F2F4F7);padding:2px 8px}#arcDiagramDiv{width:600px;height:550px}.zone-container{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;padding:10px 0}.zone-buttons-container{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0 30px;scroll-behavior:smooth;justify-content:flex-start}.no-wrap-list{white-space:nowrap}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-left{left:0}.arrow-right{right:20px}.position-absolute{position:absolute}.arrow-left,.arrow-right{display:block}.zone-buttons-container::-webkit-scrollbar{display:none}\n"] }]
|
|
3353
3353
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i3.ToastService }, { type: i2.GlobalStateService }, { type: i0.ElementRef }, { type: i4.ActivatedRoute }], propDecorators: { carousel: [{
|
|
3354
3354
|
type: ViewChild,
|
|
3355
3355
|
args: ['carousel', { static: true }]
|