tango-app-ui-analyse-zone 3.7.1-beta.4-demo1 → 3.7.1-beta.4-demo2
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.
- package/esm2022/lib/components/zone-v2/store-heatmap/store-heatmap.component.mjs +3 -3
- package/esm2022/lib/components/zone-v2/summary-table/summary-table.component.mjs +3 -3
- package/fesm2022/tango-app-ui-analyse-zone.mjs +4 -4
- package/fesm2022/tango-app-ui-analyse-zone.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -3067,11 +3067,11 @@ class StoreHeatmapComponent {
|
|
|
3067
3067
|
});
|
|
3068
3068
|
}
|
|
3069
3069
|
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 });
|
|
3070
|
-
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 p-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 \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-5\">\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-7\">\r\n <div class=\"mt-14\">\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-20\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\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:60px!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:450px}.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:190px}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"] }] });
|
|
3070
|
+
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 p-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 \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 mb-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-5\">\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-7\">\r\n <div class=\"mt-14\">\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-20\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\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:60px!important;align-items:center;gap:12px;align-self:stretch}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:21px;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:400px}.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:190px}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"] }] });
|
|
3071
3071
|
}
|
|
3072
3072
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreHeatmapComponent, decorators: [{
|
|
3073
3073
|
type: Component,
|
|
3074
|
-
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 p-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 \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-5\">\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-7\">\r\n <div class=\"mt-14\">\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-20\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\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:60px!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:450px}.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:190px}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"] }]
|
|
3074
|
+
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 p-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 \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 mb-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-5\">\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-7\">\r\n <div class=\"mt-14\">\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-20\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\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:60px!important;align-items:center;gap:12px;align-self:stretch}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:21px;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:400px}.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:190px}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"] }]
|
|
3075
3075
|
}], 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: [{
|
|
3076
3076
|
type: ViewChild,
|
|
3077
3077
|
args: ['carousel', { static: true }]
|
|
@@ -3931,11 +3931,11 @@ class SummaryTableComponent {
|
|
|
3931
3931
|
this.pageSize = this.paginationSizes[0];
|
|
3932
3932
|
}
|
|
3933
3933
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SummaryTableComponent, deps: [{ token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i1$1.NgbModal }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3934
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SummaryTableComponent, selector: "lib-summary-table", ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Zone Summary Table</span>\r\n <span class=\"text-sub mb-2\"> From {{ headerData?.date?.startDate | date: 'MMM d' }} to {{ headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('storeId')\">\r\n Store ID\r\n <svg [ngClass]=\"sortColumName === 'storeId' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('date')\">\r\n Date\r\n <svg [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Zone Conc.Rate\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('bouncedCount')\">\r\n Zone Bounced\r\n <svg [ngClass]=\"sortColumName === 'bouncedCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'bouncedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('engagersCount')\">\r\n Zone Engagers\r\n <svg [ngClass]=\"sortColumName === 'engagersCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'engagersCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('below12')\">\r\n Age Below 12\r\n <svg [ngClass]=\"sortColumName === 'below12' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'below12' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('13-19')\">\r\n Age 13-19\r\n <svg [ngClass]=\"sortColumName === '13-19' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '13-19' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('20-30')\">\r\n Age 20-30\r\n <svg [ngClass]=\"sortColumName === '20-30' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '20-30' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('31-45')\">\r\n Age 31-45\r\n <svg [ngClass]=\"sortColumName === '31-45' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '31-45' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('46-59')\">\r\n Age 46-59\r\n <svg [ngClass]=\"sortColumName === '46-59' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '46-59' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('60 above')\">\r\n Age 60+\r\n <svg [ngClass]=\"sortColumName === '60 above' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '60 above' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('maleCount')\">\r\n Male\r\n <svg [ngClass]=\"sortColumName === 'maleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'maleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('femaleCount')\">\r\n Female\r\n <svg [ngClass]=\"sortColumName === 'femaleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'femaleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td><a class=\"table-title-primary cursor-pointer\" (click)=\"storeView(store.storeId)\">{{ store.storeName || '--' }}</a></td>\r\n <td><div class=\"table-title\">{{ store.storeId || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store?.date | date: 'd MMM, y' || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.concentrationRate?.toFixed(0) || '0' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.avgDwellTime || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.footfallCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bouncedCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.engagersCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bellow12 || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['13-19'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['20-30'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['31-45'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['46-59'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['60 above'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.maleCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.femaleCount || '0' }}</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Summary Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;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%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.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}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration-line:underline}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
|
|
3934
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SummaryTableComponent, selector: "lib-summary-table", ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Zone Summary Table</span>\r\n <span class=\"text-sub mb-2\"> From {{ headerData?.date?.startDate | date: 'MMM d' }} to {{ headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <!-- <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n \r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button> -->\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('storeId')\">\r\n Store ID\r\n <svg [ngClass]=\"sortColumName === 'storeId' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('date')\">\r\n Date\r\n <svg [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Zone Conc.Rate\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('bouncedCount')\">\r\n Zone Bounced\r\n <svg [ngClass]=\"sortColumName === 'bouncedCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'bouncedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('engagersCount')\">\r\n Zone Engagers\r\n <svg [ngClass]=\"sortColumName === 'engagersCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'engagersCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <!-- <th><div class=\"cursor-pointer\" (click)=\"sortData('below12')\">\r\n Age Below 12\r\n <svg [ngClass]=\"sortColumName === 'below12' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'below12' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('13-19')\">\r\n Age 13-19\r\n <svg [ngClass]=\"sortColumName === '13-19' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '13-19' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('20-30')\">\r\n Age 20-30\r\n <svg [ngClass]=\"sortColumName === '20-30' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '20-30' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('31-45')\">\r\n Age 31-45\r\n <svg [ngClass]=\"sortColumName === '31-45' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '31-45' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('46-59')\">\r\n Age 46-59\r\n <svg [ngClass]=\"sortColumName === '46-59' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '46-59' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('60 above')\">\r\n Age 60+\r\n <svg [ngClass]=\"sortColumName === '60 above' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '60 above' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('maleCount')\">\r\n Male\r\n <svg [ngClass]=\"sortColumName === 'maleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'maleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('femaleCount')\">\r\n Female\r\n <svg [ngClass]=\"sortColumName === 'femaleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'femaleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th> -->\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td><a class=\"table-title-primary cursor-pointer\" (click)=\"storeView(store.storeId)\">{{ store.storeName || '--' }}</a></td>\r\n <td><div class=\"table-title\">{{ store.storeId || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store?.date | date: 'd MMM, y' || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.concentrationRate?.toFixed(0) || '0' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.avgDwellTime || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.footfallCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bouncedCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.engagersCount || '0' }}</div></td>\r\n <!-- <td><div class=\"table-title\">{{ store.bellow12 || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['13-19'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['20-30'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['31-45'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['46-59'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['60 above'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.maleCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.femaleCount || '0' }}</div></td> -->\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Summary Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;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%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.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}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration-line:underline}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
|
|
3935
3935
|
}
|
|
3936
3936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SummaryTableComponent, decorators: [{
|
|
3937
3937
|
type: Component,
|
|
3938
|
-
args: [{ selector: 'lib-summary-table', template: "<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Zone Summary Table</span>\r\n <span class=\"text-sub mb-2\"> From {{ headerData?.date?.startDate | date: 'MMM d' }} to {{ headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('storeId')\">\r\n Store ID\r\n <svg [ngClass]=\"sortColumName === 'storeId' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('date')\">\r\n Date\r\n <svg [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Zone Conc.Rate\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('bouncedCount')\">\r\n Zone Bounced\r\n <svg [ngClass]=\"sortColumName === 'bouncedCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'bouncedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('engagersCount')\">\r\n Zone Engagers\r\n <svg [ngClass]=\"sortColumName === 'engagersCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'engagersCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('below12')\">\r\n Age Below 12\r\n <svg [ngClass]=\"sortColumName === 'below12' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'below12' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('13-19')\">\r\n Age 13-19\r\n <svg [ngClass]=\"sortColumName === '13-19' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '13-19' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('20-30')\">\r\n Age 20-30\r\n <svg [ngClass]=\"sortColumName === '20-30' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '20-30' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('31-45')\">\r\n Age 31-45\r\n <svg [ngClass]=\"sortColumName === '31-45' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '31-45' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('46-59')\">\r\n Age 46-59\r\n <svg [ngClass]=\"sortColumName === '46-59' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '46-59' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('60 above')\">\r\n Age 60+\r\n <svg [ngClass]=\"sortColumName === '60 above' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '60 above' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('maleCount')\">\r\n Male\r\n <svg [ngClass]=\"sortColumName === 'maleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'maleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('femaleCount')\">\r\n Female\r\n <svg [ngClass]=\"sortColumName === 'femaleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'femaleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td><a class=\"table-title-primary cursor-pointer\" (click)=\"storeView(store.storeId)\">{{ store.storeName || '--' }}</a></td>\r\n <td><div class=\"table-title\">{{ store.storeId || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store?.date | date: 'd MMM, y' || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.concentrationRate?.toFixed(0) || '0' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.avgDwellTime || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.footfallCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bouncedCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.engagersCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bellow12 || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['13-19'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['20-30'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['31-45'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['46-59'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['60 above'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.maleCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.femaleCount || '0' }}</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Summary Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;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%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.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}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration-line:underline}\n"] }]
|
|
3938
|
+
args: [{ selector: 'lib-summary-table', template: "<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Zone Summary Table</span>\r\n <span class=\"text-sub mb-2\"> From {{ headerData?.date?.startDate | date: 'MMM d' }} to {{ headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <!-- <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n \r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button> -->\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('storeId')\">\r\n Store ID\r\n <svg [ngClass]=\"sortColumName === 'storeId' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('date')\">\r\n Date\r\n <svg [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Zone Conc.Rate\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('bouncedCount')\">\r\n Zone Bounced\r\n <svg [ngClass]=\"sortColumName === 'bouncedCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'bouncedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('engagersCount')\">\r\n Zone Engagers\r\n <svg [ngClass]=\"sortColumName === 'engagersCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'engagersCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <!-- <th><div class=\"cursor-pointer\" (click)=\"sortData('below12')\">\r\n Age Below 12\r\n <svg [ngClass]=\"sortColumName === 'below12' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'below12' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('13-19')\">\r\n Age 13-19\r\n <svg [ngClass]=\"sortColumName === '13-19' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '13-19' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('20-30')\">\r\n Age 20-30\r\n <svg [ngClass]=\"sortColumName === '20-30' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '20-30' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('31-45')\">\r\n Age 31-45\r\n <svg [ngClass]=\"sortColumName === '31-45' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '31-45' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('46-59')\">\r\n Age 46-59\r\n <svg [ngClass]=\"sortColumName === '46-59' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '46-59' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('60 above')\">\r\n Age 60+\r\n <svg [ngClass]=\"sortColumName === '60 above' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '60 above' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('maleCount')\">\r\n Male\r\n <svg [ngClass]=\"sortColumName === 'maleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'maleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('femaleCount')\">\r\n Female\r\n <svg [ngClass]=\"sortColumName === 'femaleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'femaleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th> -->\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td><a class=\"table-title-primary cursor-pointer\" (click)=\"storeView(store.storeId)\">{{ store.storeName || '--' }}</a></td>\r\n <td><div class=\"table-title\">{{ store.storeId || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store?.date | date: 'd MMM, y' || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.concentrationRate?.toFixed(0) || '0' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.avgDwellTime || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.footfallCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bouncedCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.engagersCount || '0' }}</div></td>\r\n <!-- <td><div class=\"table-title\">{{ store.bellow12 || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['13-19'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['20-30'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['31-45'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['46-59'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['60 above'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.maleCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.femaleCount || '0' }}</div></td> -->\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Summary Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;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%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.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}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration-line:underline}\n"] }]
|
|
3939
3939
|
}], ctorParameters: () => [{ type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i1$1.NgbModal }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: i3.ToastService }] });
|
|
3940
3940
|
|
|
3941
3941
|
class ZoneV2Component {
|