tango-app-ui-analyse-zone 3.7.1-beta.25 → 3.7.1-beta.26
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.
|
@@ -953,7 +953,8 @@ class OverallcardsComponent {
|
|
|
953
953
|
.filter((store) => store.checked)
|
|
954
954
|
.map((store) => store.storeId),
|
|
955
955
|
clientId: this.headerData.client,
|
|
956
|
-
zone: this.selectedZone
|
|
956
|
+
zone: this.selectedZone,
|
|
957
|
+
nob: this.clientData?.isNOB
|
|
957
958
|
};
|
|
958
959
|
this.ZoneService.getNewAnalysisZoneApi(obj)
|
|
959
960
|
.pipe(takeUntil$1(this.destroy$))
|
|
@@ -973,11 +974,11 @@ class OverallcardsComponent {
|
|
|
973
974
|
});
|
|
974
975
|
}
|
|
975
976
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverallcardsComponent, deps: [{ token: i0.NgZone }, { token: ZoneService }, { token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
976
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverallcardsComponent, selector: "lib-overallcards", ngImport: i0, template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4 h-auto\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.overallFootfall?.count !== null &&\r\n overallStoreCards?.overallFootfall?.count !== undefined\r\n ? overallStoreCards?.overallFootfall?.count\r\n : '--'\r\n }}</div>\r\n\r\n <div class=\"subtext\">Overall Store Footfall</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.overallFootfall?.PreviousData}}%</span> vs\r\n previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='daily' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('daily')\">1D\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='weekly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('weekly')\">1W\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='monthly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('monthly')\">\r\n 1M</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getBouncedCardData?.card?.bounced?.rate !== null &&\r\n getBouncedCardData?.card?.bounced?.rate !== undefined\r\n ? getBouncedCardData?.card?.bounced?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Bounced Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{getBouncedCardData?.data?.bounced?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getEngagersCardData?.card?.engagers?.rate !== null &&\r\n getEngagersCardData?.card?.engagers?.rate !== undefined\r\n ? getEngagersCardData?.card?.engagers?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Engagers Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\">\r\n <span class=\"percent-value\">{{getEngagersCardData?.data?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-3':'col-4'\" class=\"h-300px\">\r\n \r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n \r\n \r\n <div class=\"headtext px-3 pt-3\">Demographics</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 \r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div 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 Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n <select class=\"form-select analysis-select\" [(ngModel)]=\"selectedZone\" (change)=\"onZoneChange($event)\">\r\n <option *ngFor=\"let zone of availableZones\" [value]=\"zone.zoneName\">\r\n {{ zone.zoneName | titlecase }}\r\n </option>\r\n </select>\r\n <h4 class=\"analysis-title\">Analysis</h4>\r\n </div>\r\n <div class=\"ellipse1 border-0 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.zoneTotal ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.zonePercentage}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial Zone Footfall</div>\r\n </div>\r\n <div class=\"gender-cards py-3 mt-1\">\r\n <!-- Male -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.male ?? '--'}} <span>({{getAnalyseZoneData?.malePercentage ?? '--'}}%)</span></h3>\r\n <p>Male</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.female ?? '--'}} <span>({{getAnalyseZoneData?.femalePercentage ?? '--'}}%)</span></h3>\r\n <p>Female</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 mb-3 mt-1\">\r\n <div class=\"ellipse1 border-0 mb-3 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.conversionCount ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.conversionCountPercentage ?? '--'}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> Footfall</div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <section *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Gender Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 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 \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv1\"></div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-5':'col-4'\" class=\"h-300px\">\r\n <div *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Age Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll2\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"cardDataLoading\">\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 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 \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div 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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div class=\"card min-h-400px max-h-auto px-3\">\r\n <div class=\"my-3\">\r\n <h3 class=\"title pt-3\">Most Travelled Path</h3>\r\n <div *ngIf=\"!pathLoading && !pathNoData\" class=\"path-wrapper border border-1\">\r\n <div class=\"ellipse1 border-0 p-3\">\r\n <!-- SLIDE -->\r\n <div class=\"path-slide\">\r\n <span class=\"badge\">\r\n {{ paths[activePathIndex]?.label }}\r\n </span>\r\n \r\n <span class=\"percent\">\r\n {{ paths[activePathIndex]?.percent }}% of Customers Travel Path\r\n </span>\r\n \r\n <div class=\"path-text\">\r\n <ng-container *ngFor=\"let step of paths[activePathIndex]?.path; let last = last\">\r\n <span class=\"step\">{{ step | titlecase}}</span>\r\n <span class=\"arrowpath\" *ngIf=\"!last\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n \r\n \r\n <!-- DOTS -->\r\n <div class=\"dots col-6 mt-7\">\r\n <span *ngFor=\"let _ of paths; let i = index\" [class.active]=\"activePathIndex === i\"\r\n (click)=\"goTo(i)\">\r\n </span>\r\n </div>\r\n \r\n <!-- ARROWS -->\r\n <div class=\"mt-1 col-6 text-end\">\r\n <span class=\"cursor-pointer\" (click)=\"prev()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157019)\">\r\n <path\r\n d=\"M26.832 21.0003H15.1654M15.1654 21.0003L20.9987 15.167M15.1654 21.0003L20.9987 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157019\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\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\" 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_15064_157019\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157019\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"cursor-pointer\" (click)=\"next()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157023)\">\r\n <path\r\n d=\"M15.168 21.0003H26.8346M26.8346 21.0003L21.0013 15.167M26.8346 21.0003L21.0013 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157023\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\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\" 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_15064_157023\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157023\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n <ng-container *ngIf=\"pathLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"pathNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center p-5 flex-column\">\r\n <img class=\"img-src2\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Travelled Paths</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"my-3\">\r\n <div class=\"row\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.hotZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Hot Zone <span class=\"mx-2\"><svg placement=\"top\"\r\n [ngbTooltip]=\"hotZoneTooltip\"\r\n container=\"body\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #hotZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Hot Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the highest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n \r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.hotZoneDwell ?? '--'}} mins\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.coldZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Cold Zone <span class=\"mx-2\"><svg placement=\"top\" \r\n [ngbTooltip]=\"coldZoneTooltip\"\r\n container=\"body\" \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #coldZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Cold Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the lowest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.coldZoneDwell ?? '--'}} Sec\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\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 <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\"\r\n (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\"\r\n class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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 === 'Trolley' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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 === 'Basket' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col-md-4 mt-2\"\r\n *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\" placement=\"right\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path\r\n d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\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 <button type=\"button\" (click)=\"onExportTraffic()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n \r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{\r\n item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n </div>", styles: [".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}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:121px}#genderchartdiv1{width:100%;height:300px;margin-bottom:12%}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;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);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:240px}.agerangescroll2{overflow-y:auto;overflow-x:hidden;height:350px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-border{gap:8px;opacity:1;border-radius:12px;border-width:1px;padding:8px;border:1px solid #D0D5DD!important}.week-font{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.text-font{font-weight:600;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.path-wrapper{opacity:1;padding:8px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.percent-value{color:var(--Gray-500, #667085)!important;text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.text-normal{font-weight:500;font-size:12px;line-height:18px;letter-spacing:0%;text-align:center;color:#667085}.analysis-header{margin-bottom:16px}.analysis-select{width:200px;border-radius:10px}.analysis-title{font-weight:600;color:#1d2939}.highlight-card{background:linear-gradient(180deg,#e9f6ff,#f4fbff);border-radius:14px;padding:20px;margin-bottom:20px}.highlight-card h2{font-size:28px;margin:0}.highlight-card h2 span{font-size:16px;color:#667085}.highlight-card p{margin:6px 0 0;color:#344054}.gender-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.gender-card{border-width:1px;opacity:1;gap:6px;border-radius:12px;padding:8px;border:1px solid #EAECF0}.gender-card h3{font-size:24px;margin:0}.gender-card h3 span{font-size:14px;color:#667085}.gender-card p{margin:6px 0;font-weight:500}.age-pill{display:inline-block;background:#e6f4ff;color:#009bf3;padding:4px;border-radius:20px;font-size:12px;font-weight:500}.age-value{font-weight:600}.tooltip-title{font-weight:600;margin-bottom:4px}.tooltip-desc{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;color:#667085}\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.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
|
|
977
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverallcardsComponent, selector: "lib-overallcards", ngImport: i0, template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4 h-auto\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.overallFootfall?.count !== null &&\r\n overallStoreCards?.overallFootfall?.count !== undefined\r\n ? overallStoreCards?.overallFootfall?.count\r\n : '--'\r\n }}</div>\r\n\r\n <div class=\"subtext\">Overall Store Footfall</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.overallFootfall?.PreviousData}}%</span> vs\r\n previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='daily' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('daily')\">1D\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='weekly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('weekly')\">1W\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='monthly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('monthly')\">\r\n 1M</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getBouncedCardData?.card?.bounced?.rate !== null &&\r\n getBouncedCardData?.card?.bounced?.rate !== undefined\r\n ? getBouncedCardData?.card?.bounced?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Bounced Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{getBouncedCardData?.data?.bounced?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getEngagersCardData?.card?.engagers?.rate !== null &&\r\n getEngagersCardData?.card?.engagers?.rate !== undefined\r\n ? getEngagersCardData?.card?.engagers?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Engagers Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\">\r\n <span class=\"percent-value\">{{getEngagersCardData?.data?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-3':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 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 \r\n </ng-container>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n \r\n \r\n <div class=\"headtext px-3 pt-3\">Demographics</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 \r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div 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 Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n <select class=\"form-select analysis-select\" [(ngModel)]=\"selectedZone\" (change)=\"onZoneChange($event)\">\r\n <option *ngFor=\"let zone of availableZones\" [value]=\"zone.zoneName\">\r\n {{ zone.zoneName | titlecase }}\r\n </option>\r\n </select>\r\n <h4 class=\"analysis-title\">Analysis</h4>\r\n </div>\r\n <div class=\"ellipse1 border-0 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.zoneTotal ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.zonePercentage}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial Zone Footfall</div>\r\n </div>\r\n <div class=\"gender-cards py-3 mt-1\">\r\n <!-- Male -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.male ?? '--'}} <span>({{getAnalyseZoneData?.malePercentage ?? '--'}}%)</span></h3>\r\n <p>Male</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.female ?? '--'}} <span>({{getAnalyseZoneData?.femalePercentage ?? '--'}}%)</span></h3>\r\n <p>Female</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 mb-3 mt-1\">\r\n <div class=\"ellipse1 border-0 mb-3 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.conversionCount ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.conversionCountPercentage ?? '--'}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> Footfall</div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <section *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Gender Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 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 \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv1\"></div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-5':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 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 \r\n </ng-container>\r\n <div *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Age Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll2\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"cardDataLoading\">\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 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 \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div 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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div class=\"card min-h-400px max-h-auto px-3\">\r\n <div class=\"my-3\">\r\n <h3 class=\"title pt-3\">Most Travelled Path</h3>\r\n <div *ngIf=\"!pathLoading && !pathNoData\" class=\"path-wrapper border border-1\">\r\n <div class=\"ellipse1 border-0 p-3\">\r\n <!-- SLIDE -->\r\n <div class=\"path-slide\">\r\n <span class=\"badge\">\r\n {{ paths[activePathIndex]?.label }}\r\n </span>\r\n \r\n <span class=\"percent\">\r\n {{ paths[activePathIndex]?.percent }}% of Customers Travel Path\r\n </span>\r\n \r\n <div class=\"path-text\">\r\n <ng-container *ngFor=\"let step of paths[activePathIndex]?.path; let last = last\">\r\n <span class=\"step\">{{ step | titlecase}}</span>\r\n <span class=\"arrowpath\" *ngIf=\"!last\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n \r\n \r\n <!-- DOTS -->\r\n <div class=\"dots col-6 mt-7\">\r\n <span *ngFor=\"let _ of paths; let i = index\" [class.active]=\"activePathIndex === i\"\r\n (click)=\"goTo(i)\">\r\n </span>\r\n </div>\r\n \r\n <!-- ARROWS -->\r\n <div class=\"mt-1 col-6 text-end\">\r\n <span class=\"cursor-pointer\" (click)=\"prev()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157019)\">\r\n <path\r\n d=\"M26.832 21.0003H15.1654M15.1654 21.0003L20.9987 15.167M15.1654 21.0003L20.9987 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157019\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\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\" 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_15064_157019\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157019\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"cursor-pointer\" (click)=\"next()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157023)\">\r\n <path\r\n d=\"M15.168 21.0003H26.8346M26.8346 21.0003L21.0013 15.167M26.8346 21.0003L21.0013 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157023\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\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\" 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_15064_157023\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157023\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n <ng-container *ngIf=\"pathLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"pathNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center p-5 flex-column\">\r\n <img class=\"img-src2\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Travelled Paths</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"my-3\">\r\n <div class=\"row\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.hotZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Hot Zone <span class=\"mx-2\"><svg placement=\"top\"\r\n [ngbTooltip]=\"hotZoneTooltip\"\r\n container=\"body\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #hotZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Hot Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the highest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n \r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.hotZoneDwell ?? '--'}} mins\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.coldZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Cold Zone <span class=\"mx-2\"><svg placement=\"top\" \r\n [ngbTooltip]=\"coldZoneTooltip\"\r\n container=\"body\" \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #coldZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Cold Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the lowest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.coldZoneDwell ?? '--'}} Sec\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\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 <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\"\r\n (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\"\r\n class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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 === 'Trolley' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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 === 'Basket' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col-md-4 mt-2\"\r\n *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\" placement=\"right\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path\r\n d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\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 <button type=\"button\" (click)=\"onExportTraffic()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n \r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{\r\n item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n </div>", styles: [".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}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:121px}#genderchartdiv1{width:100%;height:300px;margin-bottom:12%}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;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);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:240px}.agerangescroll2{overflow-y:auto;overflow-x:hidden;height:350px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-border{gap:8px;opacity:1;border-radius:12px;border-width:1px;padding:8px;border:1px solid #D0D5DD!important}.week-font{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.text-font{font-weight:600;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.path-wrapper{opacity:1;padding:8px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.percent-value{color:var(--Gray-500, #667085)!important;text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.text-normal{font-weight:500;font-size:12px;line-height:18px;letter-spacing:0%;text-align:center;color:#667085}.analysis-header{margin-bottom:16px}.analysis-select{width:200px;border-radius:10px}.analysis-title{font-weight:600;color:#1d2939}.highlight-card{background:linear-gradient(180deg,#e9f6ff,#f4fbff);border-radius:14px;padding:20px;margin-bottom:20px}.highlight-card h2{font-size:28px;margin:0}.highlight-card h2 span{font-size:16px;color:#667085}.highlight-card p{margin:6px 0 0;color:#344054}.gender-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.gender-card{border-width:1px;opacity:1;gap:6px;border-radius:12px;padding:8px;border:1px solid #EAECF0}.gender-card h3{font-size:24px;margin:0}.gender-card h3 span{font-size:14px;color:#667085}.gender-card p{margin:6px 0;font-weight:500}.age-pill{display:inline-block;background:#e6f4ff;color:#009bf3;padding:4px;border-radius:20px;font-size:12px;font-weight:500}.age-value{font-weight:600}.tooltip-title{font-weight:600;margin-bottom:4px}.tooltip-desc{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;color:#667085}\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.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
|
|
977
978
|
}
|
|
978
979
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverallcardsComponent, decorators: [{
|
|
979
980
|
type: Component,
|
|
980
|
-
args: [{ selector: "lib-overallcards", template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4 h-auto\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.overallFootfall?.count !== null &&\r\n overallStoreCards?.overallFootfall?.count !== undefined\r\n ? overallStoreCards?.overallFootfall?.count\r\n : '--'\r\n }}</div>\r\n\r\n <div class=\"subtext\">Overall Store Footfall</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.overallFootfall?.PreviousData}}%</span> vs\r\n previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='daily' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('daily')\">1D\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='weekly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('weekly')\">1W\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='monthly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('monthly')\">\r\n 1M</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getBouncedCardData?.card?.bounced?.rate !== null &&\r\n getBouncedCardData?.card?.bounced?.rate !== undefined\r\n ? getBouncedCardData?.card?.bounced?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Bounced Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{getBouncedCardData?.data?.bounced?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getEngagersCardData?.card?.engagers?.rate !== null &&\r\n getEngagersCardData?.card?.engagers?.rate !== undefined\r\n ? getEngagersCardData?.card?.engagers?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Engagers Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\">\r\n <span class=\"percent-value\">{{getEngagersCardData?.data?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-3':'col-4'\" class=\"h-300px\">\r\n \r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n \r\n \r\n <div class=\"headtext px-3 pt-3\">Demographics</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 \r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div 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 Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n <select class=\"form-select analysis-select\" [(ngModel)]=\"selectedZone\" (change)=\"onZoneChange($event)\">\r\n <option *ngFor=\"let zone of availableZones\" [value]=\"zone.zoneName\">\r\n {{ zone.zoneName | titlecase }}\r\n </option>\r\n </select>\r\n <h4 class=\"analysis-title\">Analysis</h4>\r\n </div>\r\n <div class=\"ellipse1 border-0 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.zoneTotal ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.zonePercentage}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial Zone Footfall</div>\r\n </div>\r\n <div class=\"gender-cards py-3 mt-1\">\r\n <!-- Male -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.male ?? '--'}} <span>({{getAnalyseZoneData?.malePercentage ?? '--'}}%)</span></h3>\r\n <p>Male</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.female ?? '--'}} <span>({{getAnalyseZoneData?.femalePercentage ?? '--'}}%)</span></h3>\r\n <p>Female</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 mb-3 mt-1\">\r\n <div class=\"ellipse1 border-0 mb-3 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.conversionCount ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.conversionCountPercentage ?? '--'}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> Footfall</div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <section *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Gender Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 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 \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv1\"></div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-5':'col-4'\" class=\"h-300px\">\r\n <div *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Age Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll2\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"cardDataLoading\">\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 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 \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div 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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div class=\"card min-h-400px max-h-auto px-3\">\r\n <div class=\"my-3\">\r\n <h3 class=\"title pt-3\">Most Travelled Path</h3>\r\n <div *ngIf=\"!pathLoading && !pathNoData\" class=\"path-wrapper border border-1\">\r\n <div class=\"ellipse1 border-0 p-3\">\r\n <!-- SLIDE -->\r\n <div class=\"path-slide\">\r\n <span class=\"badge\">\r\n {{ paths[activePathIndex]?.label }}\r\n </span>\r\n \r\n <span class=\"percent\">\r\n {{ paths[activePathIndex]?.percent }}% of Customers Travel Path\r\n </span>\r\n \r\n <div class=\"path-text\">\r\n <ng-container *ngFor=\"let step of paths[activePathIndex]?.path; let last = last\">\r\n <span class=\"step\">{{ step | titlecase}}</span>\r\n <span class=\"arrowpath\" *ngIf=\"!last\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n \r\n \r\n <!-- DOTS -->\r\n <div class=\"dots col-6 mt-7\">\r\n <span *ngFor=\"let _ of paths; let i = index\" [class.active]=\"activePathIndex === i\"\r\n (click)=\"goTo(i)\">\r\n </span>\r\n </div>\r\n \r\n <!-- ARROWS -->\r\n <div class=\"mt-1 col-6 text-end\">\r\n <span class=\"cursor-pointer\" (click)=\"prev()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157019)\">\r\n <path\r\n d=\"M26.832 21.0003H15.1654M15.1654 21.0003L20.9987 15.167M15.1654 21.0003L20.9987 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157019\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\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\" 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_15064_157019\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157019\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"cursor-pointer\" (click)=\"next()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157023)\">\r\n <path\r\n d=\"M15.168 21.0003H26.8346M26.8346 21.0003L21.0013 15.167M26.8346 21.0003L21.0013 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157023\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\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\" 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_15064_157023\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157023\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n <ng-container *ngIf=\"pathLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"pathNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center p-5 flex-column\">\r\n <img class=\"img-src2\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Travelled Paths</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"my-3\">\r\n <div class=\"row\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.hotZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Hot Zone <span class=\"mx-2\"><svg placement=\"top\"\r\n [ngbTooltip]=\"hotZoneTooltip\"\r\n container=\"body\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #hotZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Hot Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the highest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n \r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.hotZoneDwell ?? '--'}} mins\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.coldZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Cold Zone <span class=\"mx-2\"><svg placement=\"top\" \r\n [ngbTooltip]=\"coldZoneTooltip\"\r\n container=\"body\" \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #coldZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Cold Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the lowest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.coldZoneDwell ?? '--'}} Sec\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\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 <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\"\r\n (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\"\r\n class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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 === 'Trolley' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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 === 'Basket' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col-md-4 mt-2\"\r\n *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\" placement=\"right\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path\r\n d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\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 <button type=\"button\" (click)=\"onExportTraffic()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n \r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{\r\n item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n </div>", styles: [".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}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:121px}#genderchartdiv1{width:100%;height:300px;margin-bottom:12%}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;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);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:240px}.agerangescroll2{overflow-y:auto;overflow-x:hidden;height:350px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-border{gap:8px;opacity:1;border-radius:12px;border-width:1px;padding:8px;border:1px solid #D0D5DD!important}.week-font{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.text-font{font-weight:600;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.path-wrapper{opacity:1;padding:8px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.percent-value{color:var(--Gray-500, #667085)!important;text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.text-normal{font-weight:500;font-size:12px;line-height:18px;letter-spacing:0%;text-align:center;color:#667085}.analysis-header{margin-bottom:16px}.analysis-select{width:200px;border-radius:10px}.analysis-title{font-weight:600;color:#1d2939}.highlight-card{background:linear-gradient(180deg,#e9f6ff,#f4fbff);border-radius:14px;padding:20px;margin-bottom:20px}.highlight-card h2{font-size:28px;margin:0}.highlight-card h2 span{font-size:16px;color:#667085}.highlight-card p{margin:6px 0 0;color:#344054}.gender-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.gender-card{border-width:1px;opacity:1;gap:6px;border-radius:12px;padding:8px;border:1px solid #EAECF0}.gender-card h3{font-size:24px;margin:0}.gender-card h3 span{font-size:14px;color:#667085}.gender-card p{margin:6px 0;font-weight:500}.age-pill{display:inline-block;background:#e6f4ff;color:#009bf3;padding:4px;border-radius:20px;font-size:12px;font-weight:500}.age-value{font-weight:600}.tooltip-title{font-weight:600;margin-bottom:4px}.tooltip-desc{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;color:#667085}\n"] }]
|
|
981
|
+
args: [{ selector: "lib-overallcards", template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4 h-auto\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.overallFootfall?.count !== null &&\r\n overallStoreCards?.overallFootfall?.count !== undefined\r\n ? overallStoreCards?.overallFootfall?.count\r\n : '--'\r\n }}</div>\r\n\r\n <div class=\"subtext\">Overall Store Footfall</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.overallFootfall?.PreviousData}}%</span> vs\r\n previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='daily' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('daily')\">1D\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='weekly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('weekly')\">1W\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='monthly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('monthly')\">\r\n 1M</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getBouncedCardData?.card?.bounced?.rate !== null &&\r\n getBouncedCardData?.card?.bounced?.rate !== undefined\r\n ? getBouncedCardData?.card?.bounced?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Bounced Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{getBouncedCardData?.data?.bounced?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getEngagersCardData?.card?.engagers?.rate !== null &&\r\n getEngagersCardData?.card?.engagers?.rate !== undefined\r\n ? getEngagersCardData?.card?.engagers?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Engagers Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\">\r\n <span class=\"percent-value\">{{getEngagersCardData?.data?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-3':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 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 \r\n </ng-container>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n \r\n \r\n <div class=\"headtext px-3 pt-3\">Demographics</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 \r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div 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 Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n <select class=\"form-select analysis-select\" [(ngModel)]=\"selectedZone\" (change)=\"onZoneChange($event)\">\r\n <option *ngFor=\"let zone of availableZones\" [value]=\"zone.zoneName\">\r\n {{ zone.zoneName | titlecase }}\r\n </option>\r\n </select>\r\n <h4 class=\"analysis-title\">Analysis</h4>\r\n </div>\r\n <div class=\"ellipse1 border-0 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.zoneTotal ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.zonePercentage}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial Zone Footfall</div>\r\n </div>\r\n <div class=\"gender-cards py-3 mt-1\">\r\n <!-- Male -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.male ?? '--'}} <span>({{getAnalyseZoneData?.malePercentage ?? '--'}}%)</span></h3>\r\n <p>Male</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.female ?? '--'}} <span>({{getAnalyseZoneData?.femalePercentage ?? '--'}}%)</span></h3>\r\n <p>Female</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 mb-3 mt-1\">\r\n <div class=\"ellipse1 border-0 mb-3 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.conversionCount ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.conversionCountPercentage ?? '--'}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> Footfall</div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <section *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Gender Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 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 \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div 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 Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv1\"></div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-5':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 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 \r\n </ng-container>\r\n <div *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Age Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll2\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"cardDataLoading\">\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 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 \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div 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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div class=\"card min-h-400px max-h-auto px-3\">\r\n <div class=\"my-3\">\r\n <h3 class=\"title pt-3\">Most Travelled Path</h3>\r\n <div *ngIf=\"!pathLoading && !pathNoData\" class=\"path-wrapper border border-1\">\r\n <div class=\"ellipse1 border-0 p-3\">\r\n <!-- SLIDE -->\r\n <div class=\"path-slide\">\r\n <span class=\"badge\">\r\n {{ paths[activePathIndex]?.label }}\r\n </span>\r\n \r\n <span class=\"percent\">\r\n {{ paths[activePathIndex]?.percent }}% of Customers Travel Path\r\n </span>\r\n \r\n <div class=\"path-text\">\r\n <ng-container *ngFor=\"let step of paths[activePathIndex]?.path; let last = last\">\r\n <span class=\"step\">{{ step | titlecase}}</span>\r\n <span class=\"arrowpath\" *ngIf=\"!last\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n \r\n \r\n <!-- DOTS -->\r\n <div class=\"dots col-6 mt-7\">\r\n <span *ngFor=\"let _ of paths; let i = index\" [class.active]=\"activePathIndex === i\"\r\n (click)=\"goTo(i)\">\r\n </span>\r\n </div>\r\n \r\n <!-- ARROWS -->\r\n <div class=\"mt-1 col-6 text-end\">\r\n <span class=\"cursor-pointer\" (click)=\"prev()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157019)\">\r\n <path\r\n d=\"M26.832 21.0003H15.1654M15.1654 21.0003L20.9987 15.167M15.1654 21.0003L20.9987 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157019\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\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\" 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_15064_157019\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157019\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"cursor-pointer\" (click)=\"next()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157023)\">\r\n <path\r\n d=\"M15.168 21.0003H26.8346M26.8346 21.0003L21.0013 15.167M26.8346 21.0003L21.0013 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157023\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\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\" 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_15064_157023\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157023\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n <ng-container *ngIf=\"pathLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"pathNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center p-5 flex-column\">\r\n <img class=\"img-src2\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Travelled Paths</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"my-3\">\r\n <div class=\"row\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.hotZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Hot Zone <span class=\"mx-2\"><svg placement=\"top\"\r\n [ngbTooltip]=\"hotZoneTooltip\"\r\n container=\"body\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #hotZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Hot Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the highest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n \r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.hotZoneDwell ?? '--'}} mins\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.coldZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Cold Zone <span class=\"mx-2\"><svg placement=\"top\" \r\n [ngbTooltip]=\"coldZoneTooltip\"\r\n container=\"body\" \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #coldZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Cold Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the lowest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.coldZoneDwell ?? '--'}} Sec\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\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 <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\"\r\n (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\"\r\n class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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 === 'Trolley' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" 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 === 'Basket' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col-md-4 mt-2\"\r\n *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\" placement=\"right\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path\r\n d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\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 <button type=\"button\" (click)=\"onExportTraffic()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n \r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{\r\n item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\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>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\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 Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n </div>", styles: [".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}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:121px}#genderchartdiv1{width:100%;height:300px;margin-bottom:12%}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;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);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:240px}.agerangescroll2{overflow-y:auto;overflow-x:hidden;height:350px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-border{gap:8px;opacity:1;border-radius:12px;border-width:1px;padding:8px;border:1px solid #D0D5DD!important}.week-font{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.text-font{font-weight:600;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.path-wrapper{opacity:1;padding:8px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.percent-value{color:var(--Gray-500, #667085)!important;text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.text-normal{font-weight:500;font-size:12px;line-height:18px;letter-spacing:0%;text-align:center;color:#667085}.analysis-header{margin-bottom:16px}.analysis-select{width:200px;border-radius:10px}.analysis-title{font-weight:600;color:#1d2939}.highlight-card{background:linear-gradient(180deg,#e9f6ff,#f4fbff);border-radius:14px;padding:20px;margin-bottom:20px}.highlight-card h2{font-size:28px;margin:0}.highlight-card h2 span{font-size:16px;color:#667085}.highlight-card p{margin:6px 0 0;color:#344054}.gender-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.gender-card{border-width:1px;opacity:1;gap:6px;border-radius:12px;padding:8px;border:1px solid #EAECF0}.gender-card h3{font-size:24px;margin:0}.gender-card h3 span{font-size:14px;color:#667085}.gender-card p{margin:6px 0;font-weight:500}.age-pill{display:inline-block;background:#e6f4ff;color:#009bf3;padding:4px;border-radius:20px;font-size:12px;font-weight:500}.age-value{font-weight:600}.tooltip-title{font-weight:600;margin-bottom:4px}.tooltip-desc{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;color:#667085}\n"] }]
|
|
981
982
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: ZoneService }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i4.ToastService }] });
|
|
982
983
|
|
|
983
984
|
class ZoneJourneyComponent {
|
|
@@ -1201,10 +1202,17 @@ class ZoneJourneyComponent {
|
|
|
1201
1202
|
this.service.getNewZoneShopperAnalysisApi(this.object1).subscribe({
|
|
1202
1203
|
next: (res) => {
|
|
1203
1204
|
if (res && res.code === 200) {
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1205
|
+
if (res.data?.zoneShopperAnalysis?.length) {
|
|
1206
|
+
this.zoneShopperAnalysis = res.data;
|
|
1207
|
+
this.zones = this.zoneShopperAnalysis?.zoneShopperAnalysis || [];
|
|
1208
|
+
this.zoneCardNoData = false;
|
|
1209
|
+
this.zoneCardLoading = false;
|
|
1210
|
+
}
|
|
1211
|
+
else {
|
|
1212
|
+
this.zoneShopperAnalysis = null;
|
|
1213
|
+
this.zoneCardNoData = true;
|
|
1214
|
+
this.zoneCardLoading = false;
|
|
1215
|
+
}
|
|
1208
1216
|
this.cd.detectChanges();
|
|
1209
1217
|
}
|
|
1210
1218
|
else {
|
|
@@ -1236,10 +1244,17 @@ class ZoneJourneyComponent {
|
|
|
1236
1244
|
this.service.getNewZoneShopperBubbleChartApi(this.object).subscribe({
|
|
1237
1245
|
next: (res) => {
|
|
1238
1246
|
if (res && res.code === 200) {
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1247
|
+
if (res?.data?.zoneBubbleChartMetrics?.length) {
|
|
1248
|
+
this.bubbleChartData = res.data;
|
|
1249
|
+
this.createChart();
|
|
1250
|
+
this.zoneChartNoData = false;
|
|
1251
|
+
this.zoneChartLoading = false;
|
|
1252
|
+
}
|
|
1253
|
+
else {
|
|
1254
|
+
this.bubbleChartData = null;
|
|
1255
|
+
this.zoneChartNoData = true;
|
|
1256
|
+
this.zoneChartLoading = false;
|
|
1257
|
+
}
|
|
1243
1258
|
this.cd.detectChanges();
|
|
1244
1259
|
}
|
|
1245
1260
|
else {
|
|
@@ -1432,11 +1447,11 @@ class ZoneJourneyComponent {
|
|
|
1432
1447
|
this.router.navigate(["/manage/traffic/nob"]);
|
|
1433
1448
|
}
|
|
1434
1449
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneJourneyComponent, deps: [{ token: ZoneService }, { token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i4$1.Router }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1435
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneJourneyComponent, selector: "lib-zone-journey", inputs: { headerData: "headerData", clientData: "clientData" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "zoneDropdown", first: true, predicate: ["zoneDropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- zone-journey.component.html -->\r\n<div class=\"card my-card mx-1 my-2\">\r\n <div class=\"card-header px-0 mx-5 border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-1\">Zone-Based Shopper Analysis </span>\r\n <span class=\"text-sub mb-1\">Understand your Shoppers journey from one zone to another\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<div class=\"zone-dropdown me-2\" #zoneDropdown\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- BUTTON -->\r\n <button [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn btn-outline w-100 me-2 d-flex justify-content-between\"\r\n (click)=\"toggleDropdown($event)\"\r\n >\r\n Show / Hide Zone\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n<path d=\"M1 1L6 6L11 1\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </button>\r\n\r\n <!-- DROPDOWN -->\r\n <div *ngIf=\"showDropdown\" class=\"dropdown-panel h-300px d-flex flex-column\">\r\n\r\n <!-- HEADER (fixed) -->\r\n <div class=\"dropdown-header px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"dropdownSearchText\"\r\n (input)=\"filterZones()\"\r\n />\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 mb-2 px-2\">\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected()\"\r\n (change)=\"toggleSelectAll($event)\"\r\n /></span>\r\n <span class=\"ms-2\">Select All</span>\r\n </div>\r\n <!-- BODY (scrollable list) -->\r\n <div class=\"dropdown-body flex-grow-1 overflow-auto px-2\">\r\n <div\r\n class=\"zone-item\"\r\n *ngFor=\"let zone of tempFilteredZones\"\r\n >\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"zone.checked\"\r\n /></span>\r\n <span class=\"ms-2\">{{ zone.name }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- FOOTER (fixed) -->\r\n <div class=\"dropdown-footer d-flex justify-content-end gap-2 p-2 border-top\">\r\n <button class=\"btn btn-sm btn-outline w-50\" (click)=\"resetZones()\">\r\n Reset\r\n </button>\r\n <button class=\"btn btn-sm btn-primary w-50\" (click)=\"applyZones()\">\r\n Apply\r\n </button>\r\n </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n\r\n <button type=\"button\" (click)=\"getZoneJourneyExport()\" [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\">\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\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </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=\"d-flex justify-content-between mt-3 mx-3\">\r\n <div class=\"bordered-box w-50 me-2 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n height=\"21\" viewBox=\"0 0 19 21\" fill=\"none\">\r\n <path\r\n d=\"M0.5 16.3258H6V17.5758C6 18.3051 5.71027 19.0046 5.19454 19.5203C4.67882 20.036 3.97935 20.3258 3.25 20.3258C2.52065 20.3258 1.82118 20.036 1.30546 19.5203C0.789731 19.0046 0.5 18.3051 0.5 17.5758V16.3258ZM4.5 4.44576C6.5 4.44576 7.5 7.32576 7.5 9.32576C7.5 10.3258 7 11.3258 6.5 12.8258L6 14.3258H0.5C0.5 13.3258 0 11.8258 0 9.32576C0 6.82576 1.998 4.44576 4.5 4.44576ZM16.554 12.4238L16.337 13.6548C16.2023 14.3654 15.7931 14.9943 15.198 15.4054C14.6029 15.8165 13.8698 15.9765 13.1576 15.8509C12.4453 15.7254 11.8111 15.3242 11.3925 14.7344C10.9739 14.1446 10.8045 13.4136 10.921 12.6998L11.137 11.4698L16.554 12.4238ZM14.678 0.0307624C17.142 0.464762 18.696 3.15576 18.262 5.61776C17.828 8.07976 17.075 9.46976 16.902 10.4548L11.485 9.49976L11.253 7.93576C11.021 6.37176 10.703 5.29976 10.876 4.31576C11.223 2.34576 12.708 -0.316238 14.678 0.0307624Z\"\r\n fill=\"#1D2939\" />\r\n </svg>Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{zoneShopperAnalysis?.OverallFootfall ?? '--'}}</span> <span class=\"text-perc ms-1\">({{zoneShopperAnalysis?.ConversionPercent ?? '--'}} %)</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"text-title py-2\">\r\n<svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> NoB :</span>\r\n <span *ngIf=\"!this.clientData?.isNOB\" class=\"text-title py-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n<path d=\"M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M17 11L19 13L23 9M12.5 7C12.5 9.20914 10.7091 11 8.5 11C6.29086 11 4.5 9.20914 4.5 7C4.5 4.79086 6.29086 3 8.5 3C10.7091 3 12.5 4.79086 12.5 7Z\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\">\r\n <svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\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\" 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_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row gx-0 p-3\">\r\n <div [ngClass]=\"isMinimized ? 'col-12' : 'col-8'\"\r\n [style.height.px]=\"zoneChartNoData ? 300 : (isMinimized ? 650 : 550)\">\r\n <ng-container *ngIf=\"zoneChartLoading\">\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 </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneChartNoData\">\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 Based Shopper Analysis Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!zoneChartNoData && !zoneChartLoading\" id=\"chartdiv\" style=\"width: 100%; height: 100%;\"></div>\r\n </div>\r\n\r\n <div [ngClass]=\"isMinimized ? 'zone-floating' : 'col-4'\" [style.top.px]=\"isMinimized ? floatingPos.top : null\"\r\n [style.left.px]=\"isMinimized ? floatingPos.left : null\" (mousedown)=\"startDrag($event)\">\r\n <!-- (mousedown)=\"startDrag($event)\" -->\r\n <ng-container *ngIf=\"zoneCardLoading\">\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 </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneCardNoData\">\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 Based Shopper Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-conatiner *ngIf=\"!zoneCardNoData && !zoneCardLoading\" class=\"card \">\r\n <div class=\"card-header border-0 px-4\"\r\n [ngClass]=\"isMinimized ?'bg-secondary min-h-30px': 'bg-light-primary min-h-45px mb-2'\">\r\n <div class=\"card-title align-items-start\"><span *ngIf=\"isMinimized\" class=\"me-2 mb-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9 20C8.45 20 7.97917 19.8042 7.5875 19.4125C7.19583 19.0208 7 18.55 7 18C7 17.45 7.19583 16.9792 7.5875 16.5875C7.97917 16.1958 8.45 16 9 16C9.55 16 10.0208 16.1958 10.4125 16.5875C10.8042 16.9792 11 17.45 11 18C11 18.55 10.8042 19.0208 10.4125 19.4125C10.0208 19.8042 9.55 20 9 20ZM15 20C14.45 20 13.9792 19.8042 13.5875 19.4125C13.1958 19.0208 13 18.55 13 18C13 17.45 13.1958 16.9792 13.5875 16.5875C13.9792 16.1958 14.45 16 15 16C15.55 16 16.0208 16.1958 16.4125 16.5875C16.8042 16.9792 17 17.45 17 18C17 18.55 16.8042 19.0208 16.4125 19.4125C16.0208 19.8042 15.55 20 15 20ZM9 14C8.45 14 7.97917 13.8042 7.5875 13.4125C7.19583 13.0208 7 12.55 7 12C7 11.45 7.19583 10.9792 7.5875 10.5875C7.97917 10.1958 8.45 10 9 10C9.55 10 10.0208 10.1958 10.4125 10.5875C10.8042 10.9792 11 11.45 11 12C11 12.55 10.8042 13.0208 10.4125 13.4125C10.0208 13.8042 9.55 14 9 14ZM15 14C14.45 14 13.9792 13.8042 13.5875 13.4125C13.1958 13.0208 13 12.55 13 12C13 11.45 13.1958 10.9792 13.5875 10.5875C13.9792 10.1958 14.45 10 15 10C15.55 10 16.0208 10.1958 16.4125 10.5875C16.8042 10.9792 17 11.45 17 12C17 12.55 16.8042 13.0208 16.4125 13.4125C16.0208 13.8042 15.55 14 15 14ZM9 8C8.45 8 7.97917 7.80417 7.5875 7.4125C7.19583 7.02083 7 6.55 7 6C7 5.45 7.19583 4.97917 7.5875 4.5875C7.97917 4.19583 8.45 4 9 4C9.55 4 10.0208 4.19583 10.4125 4.5875C10.8042 4.97917 11 5.45 11 6C11 6.55 10.8042 7.02083 10.4125 7.4125C10.0208 7.80417 9.55 8 9 8ZM15 8C14.45 8 13.9792 7.80417 13.5875 7.4125C13.1958 7.02083 13 6.55 13 6C13 5.45 13.1958 4.97917 13.5875 4.5875C13.9792 4.19583 14.45 4 15 4C15.55 4 16.0208 4.19583 16.4125 4.5875C16.8042 4.97917 17 5.45 17 6C17 6.55 16.8042 7.02083 16.4125 7.4125C16.0208 7.80417 15.55 8 15 8Z\"\r\n fill=\"#667085\" />\r\n </svg></span> Zone Journey </div>\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 *ngIf=\"!isMinimized\" (click)=\"searchOpen()\" class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19 19L14.65 14.65M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"cursor-pointer\" *ngIf=\"!isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M5 12H19\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M15 3H21M21 3V9M21 3L14 10M9 21H3M3 21V15M3 21L10 14\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"searchNewOpen && !isMinimized\" class=\"px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"searchZoneText\"\r\n (change)=\"SearchZones()\"\r\n />\r\n </div>\r\n <div *ngIf=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n <div class=\"zone-card mx-3 \" *ngFor=\"let zone of zones;let i = index\">\r\n\r\n <!-- HEADER -->\r\n <div [ngClass]=\"activeIndex === i ? 'zone-header':'zone-default'\" (click)=\"toggle(i)\">\r\n <div [ngClass]=\"activeIndex === i ? 'zone-title':'zone-notitle'\">{{ zone.fromZone |\r\n titlecase}}\r\n </div>\r\n\r\n <div class=\"zone-metrics\">\r\n <span class=\"badge badge-light-primary px-2\" placement=\"top\" ngbTooltip=\"Footfall (Engagers)\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\"\r\n viewBox=\"0 0 10 11\" fill=\"none\">\r\n <path\r\n d=\"M0.25 8.16288H3V8.78788C3 9.15255 2.85513 9.50229 2.59727 9.76015C2.33941 10.018 1.98967 10.1629 1.625 10.1629C1.26033 10.1629 0.910591 10.018 0.652728 9.76015C0.394866 9.50229 0.25 9.15255 0.25 8.78788V8.16288ZM2.25 2.22288C3.25 2.22288 3.75 3.66288 3.75 4.66288C3.75 5.16288 3.5 5.66288 3.25 6.41288L3 7.16288H0.25C0.25 6.66288 0 5.91288 0 4.66288C0 3.41288 0.999 2.22288 2.25 2.22288ZM8.277 6.21188L8.1685 6.82738C8.10117 7.18269 7.89656 7.49717 7.59901 7.70271C7.30146 7.90824 6.93492 7.98827 6.57878 7.92547C6.22263 7.86268 5.90557 7.6621 5.69626 7.3672C5.48695 7.07229 5.40225 6.7068 5.4605 6.34988L5.5685 5.73488L8.277 6.21188ZM7.339 0.0153812C8.571 0.232381 9.348 1.57788 9.131 2.80888C8.914 4.03988 8.5375 4.73488 8.451 5.22738L5.7425 4.74988L5.6265 3.96788C5.5105 3.18588 5.3515 2.64988 5.438 2.15788C5.6115 1.17288 6.354 -0.158119 7.339 0.0153812Z\"\r\n fill=\"#009BF3\" />\r\n </svg></span> {{ zone.fromZoneFootfallCount ?? '--' }}\r\n </span>\r\n <span class=\"badge badge-light-default px-2\" placement=\"top\"\r\n[ngbTooltip]=\"clientData?.isNOB ? 'NoB' : 'Conversion'\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> {{ zone.fromZoneNobCount ?? '--' }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body max-h-200px min-h-auto overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Engagers)</th>\r\n <th ><span class=\"me-2\" *ngIf=\"this.clientData?.isNOB\">NoB</span> <span class=\"me-2\" *ngIf=\"!this.clientData?.isNOB\">Conversion</span> \r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15320_82488)\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15320_82488\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> -->\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone | titlecase}}</td>\r\n <td>{{ row.footfall ?? '--' }} ({{ row.engagerPercent }}%)</td>\r\n <td>{{ row.nob ?? '--' }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n </ng-conatiner>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</div>", styles: [".zone-card{border:1px solid #e6f0ff;border-radius:10px;margin-bottom:12px;background:#fff}.zone-header{display:flex;justify-content:space-between;align-items:center;padding:12px 30px 12px 12px;cursor:pointer;background:#f6fcff;border-radius:10px}.zone-default{border-width:1px;display:flex;justify-content:space-between;align-items:center;opacity:1;border-radius:8px;padding:12px 30px 12px 12px;border:1px solid #D0D5DD;background:#fff}.zone-title{font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;color:#33b5ff}.zone-metrics{display:flex;align-items:center;gap:8px}.pill{padding:4px 10px;border-radius:16px;font-size:12px}.arrow{transition:transform .3s ease}.arrow.rotate{transform:rotate(180deg)}.zone-body{padding:10px 12px}.table-head,.table-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:6px 0}.table-head{font-weight:600;font-size:12px;opacity:1;padding:11px 16px;border-bottom-width:1px;background-color:#fcfcfd;color:#667085;border-bottom:1px solid #EAECF0;display:flex;justify-content:space-between}.table-row{opacity:1;padding:11px 16px;border-bottom-width:1px;display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid #EAECF0}.zone-floating{position:sticky;width:330px;height:75px;top:0;z-index:9999;cursor:move}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.bordered-box{border:1px solid #EAECF0;border-radius:8px}.path-wrapper{opacity:1;padding:8px 16px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.zone-dropdown{position:relative}.dropdown-panel{position:absolute;background:#fff;border-radius:8px;padding:10px;width:100%;box-shadow:0 6px 20px #0000001a;z-index:1000}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.dropdown-panel{width:260px;background:#fff;border-radius:8px;box-shadow:0 6px 20px #0000001f}.dropdown-body{max-height:220px}.zone-item{display:flex;align-items:center;gap:8px;padding:6px 0}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.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 .am-tooltip{font-size:12px;border-width:1px;opacity:1;border-radius:12px;padding:8px}::ng-deep .am-tooltip-header{margin-bottom:6px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}::ng-deep .am-tooltip-table{width:100%;border-collapse:collapse}::ng-deep .am-tooltip-table .value{font-weight:600}::ng-deep .am-tooltip-table .text-primary{font-weight:700;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#00a3ff}::ng-deep .am-tooltip-table .text-value{font-weight:500;font-size:16px;line-height:20px;letter-spacing:0%;margin-left:5px;padding-top:5px;color:#667085}\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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
|
|
1450
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneJourneyComponent, selector: "lib-zone-journey", inputs: { headerData: "headerData", clientData: "clientData" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "zoneDropdown", first: true, predicate: ["zoneDropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- zone-journey.component.html -->\r\n<div class=\"card my-card mx-1 my-2\">\r\n <div class=\"card-header px-0 mx-5 border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-1\">Zone-Based Shopper Analysis </span>\r\n <span class=\"text-sub mb-1\">Understand your Shoppers journey from one zone to another\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<div class=\"zone-dropdown me-2\" #zoneDropdown\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- BUTTON -->\r\n <button [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn btn-outline w-100 me-2 d-flex justify-content-between\"\r\n (click)=\"toggleDropdown($event)\"\r\n >\r\n Show / Hide Zone\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n<path d=\"M1 1L6 6L11 1\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </button>\r\n\r\n <!-- DROPDOWN -->\r\n <div *ngIf=\"showDropdown\" class=\"dropdown-panel h-300px d-flex flex-column\">\r\n\r\n <!-- HEADER (fixed) -->\r\n <div class=\"dropdown-header px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"dropdownSearchText\"\r\n (input)=\"filterZones()\"\r\n />\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 mb-2 px-2\">\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected()\"\r\n (change)=\"toggleSelectAll($event)\"\r\n /></span>\r\n <span class=\"ms-2\">Select All</span>\r\n </div>\r\n <!-- BODY (scrollable list) -->\r\n <div class=\"dropdown-body flex-grow-1 overflow-auto px-2\">\r\n <div\r\n class=\"zone-item\"\r\n *ngFor=\"let zone of tempFilteredZones\"\r\n >\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"zone.checked\"\r\n /></span>\r\n <span class=\"ms-2\">{{ zone.name }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- FOOTER (fixed) -->\r\n <div class=\"dropdown-footer d-flex justify-content-end gap-2 p-2 border-top\">\r\n <button class=\"btn btn-sm btn-outline w-50\" (click)=\"resetZones()\">\r\n Reset\r\n </button>\r\n <button class=\"btn btn-sm btn-primary w-50\" (click)=\"applyZones()\">\r\n Apply\r\n </button>\r\n </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n\r\n <button type=\"button\" (click)=\"getZoneJourneyExport()\" [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\">\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\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </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=\"d-flex justify-content-between mt-3 mx-3\">\r\n <div class=\"bordered-box w-50 me-2 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n height=\"21\" viewBox=\"0 0 19 21\" fill=\"none\">\r\n <path\r\n d=\"M0.5 16.3258H6V17.5758C6 18.3051 5.71027 19.0046 5.19454 19.5203C4.67882 20.036 3.97935 20.3258 3.25 20.3258C2.52065 20.3258 1.82118 20.036 1.30546 19.5203C0.789731 19.0046 0.5 18.3051 0.5 17.5758V16.3258ZM4.5 4.44576C6.5 4.44576 7.5 7.32576 7.5 9.32576C7.5 10.3258 7 11.3258 6.5 12.8258L6 14.3258H0.5C0.5 13.3258 0 11.8258 0 9.32576C0 6.82576 1.998 4.44576 4.5 4.44576ZM16.554 12.4238L16.337 13.6548C16.2023 14.3654 15.7931 14.9943 15.198 15.4054C14.6029 15.8165 13.8698 15.9765 13.1576 15.8509C12.4453 15.7254 11.8111 15.3242 11.3925 14.7344C10.9739 14.1446 10.8045 13.4136 10.921 12.6998L11.137 11.4698L16.554 12.4238ZM14.678 0.0307624C17.142 0.464762 18.696 3.15576 18.262 5.61776C17.828 8.07976 17.075 9.46976 16.902 10.4548L11.485 9.49976L11.253 7.93576C11.021 6.37176 10.703 5.29976 10.876 4.31576C11.223 2.34576 12.708 -0.316238 14.678 0.0307624Z\"\r\n fill=\"#1D2939\" />\r\n </svg>Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{zoneShopperAnalysis?.OverallFootfall ?? '--'}}</span> <span class=\"text-perc ms-1\">({{zoneShopperAnalysis?.ConversionPercent ?? '--'}} %)</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"text-title py-2\">\r\n<svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> NoB :</span>\r\n <span *ngIf=\"!this.clientData?.isNOB\" class=\"text-title py-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n<path d=\"M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M17 11L19 13L23 9M12.5 7C12.5 9.20914 10.7091 11 8.5 11C6.29086 11 4.5 9.20914 4.5 7C4.5 4.79086 6.29086 3 8.5 3C10.7091 3 12.5 4.79086 12.5 7Z\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\">\r\n <svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\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\" 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_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row gx-0 p-3\">\r\n <div [ngClass]=\"isMinimized ? 'col-12' : 'col-8'\"\r\n [style.height.px]=\"zoneChartNoData ? 300 : (isMinimized ? 650 : 550)\">\r\n <ng-container *ngIf=\"zoneChartLoading\">\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 </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneChartNoData\">\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 Based Shopper Analysis Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!zoneChartNoData && !zoneChartLoading\" id=\"chartdiv\" style=\"width: 100%; height: 100%;\"></div>\r\n </div>\r\n\r\n <div [ngClass]=\"isMinimized ? 'zone-floating' : 'col-4'\" [style.top.px]=\"isMinimized ? floatingPos.top : null\"\r\n [style.left.px]=\"isMinimized ? floatingPos.left : null\" (mousedown)=\"startDrag($event)\">\r\n <!-- (mousedown)=\"startDrag($event)\" -->\r\n <ng-container *ngIf=\"zoneCardLoading\">\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 </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneCardNoData\">\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 Based Shopper Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-conatiner *ngIf=\"!zoneCardNoData && !zoneCardLoading\" class=\"card \">\r\n <div class=\"card-header border-0 px-4\"\r\n [ngClass]=\"isMinimized ?'bg-secondary min-h-30px': 'bg-light-primary min-h-45px mb-2'\">\r\n <div class=\"card-title align-items-start\"><span *ngIf=\"isMinimized\" class=\"me-2 mb-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9 20C8.45 20 7.97917 19.8042 7.5875 19.4125C7.19583 19.0208 7 18.55 7 18C7 17.45 7.19583 16.9792 7.5875 16.5875C7.97917 16.1958 8.45 16 9 16C9.55 16 10.0208 16.1958 10.4125 16.5875C10.8042 16.9792 11 17.45 11 18C11 18.55 10.8042 19.0208 10.4125 19.4125C10.0208 19.8042 9.55 20 9 20ZM15 20C14.45 20 13.9792 19.8042 13.5875 19.4125C13.1958 19.0208 13 18.55 13 18C13 17.45 13.1958 16.9792 13.5875 16.5875C13.9792 16.1958 14.45 16 15 16C15.55 16 16.0208 16.1958 16.4125 16.5875C16.8042 16.9792 17 17.45 17 18C17 18.55 16.8042 19.0208 16.4125 19.4125C16.0208 19.8042 15.55 20 15 20ZM9 14C8.45 14 7.97917 13.8042 7.5875 13.4125C7.19583 13.0208 7 12.55 7 12C7 11.45 7.19583 10.9792 7.5875 10.5875C7.97917 10.1958 8.45 10 9 10C9.55 10 10.0208 10.1958 10.4125 10.5875C10.8042 10.9792 11 11.45 11 12C11 12.55 10.8042 13.0208 10.4125 13.4125C10.0208 13.8042 9.55 14 9 14ZM15 14C14.45 14 13.9792 13.8042 13.5875 13.4125C13.1958 13.0208 13 12.55 13 12C13 11.45 13.1958 10.9792 13.5875 10.5875C13.9792 10.1958 14.45 10 15 10C15.55 10 16.0208 10.1958 16.4125 10.5875C16.8042 10.9792 17 11.45 17 12C17 12.55 16.8042 13.0208 16.4125 13.4125C16.0208 13.8042 15.55 14 15 14ZM9 8C8.45 8 7.97917 7.80417 7.5875 7.4125C7.19583 7.02083 7 6.55 7 6C7 5.45 7.19583 4.97917 7.5875 4.5875C7.97917 4.19583 8.45 4 9 4C9.55 4 10.0208 4.19583 10.4125 4.5875C10.8042 4.97917 11 5.45 11 6C11 6.55 10.8042 7.02083 10.4125 7.4125C10.0208 7.80417 9.55 8 9 8ZM15 8C14.45 8 13.9792 7.80417 13.5875 7.4125C13.1958 7.02083 13 6.55 13 6C13 5.45 13.1958 4.97917 13.5875 4.5875C13.9792 4.19583 14.45 4 15 4C15.55 4 16.0208 4.19583 16.4125 4.5875C16.8042 4.97917 17 5.45 17 6C17 6.55 16.8042 7.02083 16.4125 7.4125C16.0208 7.80417 15.55 8 15 8Z\"\r\n fill=\"#667085\" />\r\n </svg></span> Zone Journey </div>\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 *ngIf=\"!isMinimized\" (click)=\"searchOpen()\" class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19 19L14.65 14.65M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"cursor-pointer\" *ngIf=\"!isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M5 12H19\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M15 3H21M21 3V9M21 3L14 10M9 21H3M3 21V15M3 21L10 14\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"searchNewOpen && !isMinimized\" class=\"px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"searchZoneText\"\r\n (change)=\"SearchZones()\"\r\n />\r\n </div>\r\n <div *ngIf=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n <div class=\"zone-card mx-3 \" *ngFor=\"let zone of zones;let i = index\">\r\n\r\n <!-- HEADER -->\r\n <div [ngClass]=\"activeIndex === i ? 'zone-header':'zone-default'\" (click)=\"toggle(i)\">\r\n <div [ngClass]=\"activeIndex === i ? 'zone-title':'zone-notitle'\">{{ zone.fromZone |\r\n titlecase}}\r\n </div>\r\n\r\n <div class=\"zone-metrics\">\r\n <span class=\"badge badge-light-primary px-2\" placement=\"top\" ngbTooltip=\"Footfall (Concentration)\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\"\r\n viewBox=\"0 0 10 11\" fill=\"none\">\r\n <path\r\n d=\"M0.25 8.16288H3V8.78788C3 9.15255 2.85513 9.50229 2.59727 9.76015C2.33941 10.018 1.98967 10.1629 1.625 10.1629C1.26033 10.1629 0.910591 10.018 0.652728 9.76015C0.394866 9.50229 0.25 9.15255 0.25 8.78788V8.16288ZM2.25 2.22288C3.25 2.22288 3.75 3.66288 3.75 4.66288C3.75 5.16288 3.5 5.66288 3.25 6.41288L3 7.16288H0.25C0.25 6.66288 0 5.91288 0 4.66288C0 3.41288 0.999 2.22288 2.25 2.22288ZM8.277 6.21188L8.1685 6.82738C8.10117 7.18269 7.89656 7.49717 7.59901 7.70271C7.30146 7.90824 6.93492 7.98827 6.57878 7.92547C6.22263 7.86268 5.90557 7.6621 5.69626 7.3672C5.48695 7.07229 5.40225 6.7068 5.4605 6.34988L5.5685 5.73488L8.277 6.21188ZM7.339 0.0153812C8.571 0.232381 9.348 1.57788 9.131 2.80888C8.914 4.03988 8.5375 4.73488 8.451 5.22738L5.7425 4.74988L5.6265 3.96788C5.5105 3.18588 5.3515 2.64988 5.438 2.15788C5.6115 1.17288 6.354 -0.158119 7.339 0.0153812Z\"\r\n fill=\"#009BF3\" />\r\n </svg></span> {{ zone.fromZoneFootfallCount ?? '--' }}\r\n </span>\r\n <span class=\"badge badge-light-default px-2\" placement=\"top\"\r\n[ngbTooltip]=\"clientData?.isNOB ? 'NoB' : 'Conversion'\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> <span *ngIf=\"!this.clientData?.isNOB\" class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n<path d=\"M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M17 11L19 13L23 9M12.5 7C12.5 9.20914 10.7091 11 8.5 11C6.29086 11 4.5 9.20914 4.5 7C4.5 4.79086 6.29086 3 8.5 3C10.7091 3 12.5 4.79086 12.5 7Z\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span> {{ zone.fromZoneNobCount ?? '--' }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body max-h-200px min-h-auto overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Concentration)</th>\r\n <th ><span class=\"me-2\" *ngIf=\"this.clientData?.isNOB\">NoB</span> <span class=\"me-2\" *ngIf=\"!this.clientData?.isNOB\">Conversion</span> \r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15320_82488)\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15320_82488\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> -->\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone | titlecase}}</td>\r\n <td>{{ row.footfall ?? '--' }} ({{ row.concPercent }}%)</td>\r\n <td>{{ row.nob ?? '--' }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n </ng-conatiner>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</div>", styles: [".zone-card{border:1px solid #e6f0ff;border-radius:10px;margin-bottom:12px;background:#fff}.zone-header{display:flex;justify-content:space-between;align-items:center;padding:12px 30px 12px 12px;cursor:pointer;background:#f6fcff;border-radius:10px}.zone-default{border-width:1px;display:flex;justify-content:space-between;align-items:center;opacity:1;border-radius:8px;padding:12px 30px 12px 12px;border:1px solid #D0D5DD;background:#fff}.zone-title{font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;color:#33b5ff}.zone-metrics{display:flex;align-items:center;gap:8px}.pill{padding:4px 10px;border-radius:16px;font-size:12px}.arrow{transition:transform .3s ease}.arrow.rotate{transform:rotate(180deg)}.zone-body{padding:10px 12px}.table-head,.table-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:6px 0}.table-head{font-weight:600;font-size:12px;opacity:1;padding:11px 16px;border-bottom-width:1px;background-color:#fcfcfd;color:#667085;border-bottom:1px solid #EAECF0;display:flex;justify-content:space-between}.table-row{opacity:1;padding:11px 16px;border-bottom-width:1px;display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid #EAECF0}.zone-floating{position:sticky;width:330px;height:75px;top:0;z-index:9999;cursor:move}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.bordered-box{border:1px solid #EAECF0;border-radius:8px}.path-wrapper{opacity:1;padding:8px 16px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.zone-dropdown{position:relative}.dropdown-panel{position:absolute;background:#fff;border-radius:8px;padding:10px;width:100%;box-shadow:0 6px 20px #0000001a;z-index:1000}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.dropdown-panel{width:260px;background:#fff;border-radius:8px;box-shadow:0 6px 20px #0000001f}.dropdown-body{max-height:220px}.zone-item{display:flex;align-items:center;gap:8px;padding:6px 0}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.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 .am-tooltip{font-size:12px;border-width:1px;opacity:1;border-radius:12px;padding:8px}::ng-deep .am-tooltip-header{margin-bottom:6px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}::ng-deep .am-tooltip-table{width:100%;border-collapse:collapse}::ng-deep .am-tooltip-table .value{font-weight:600}::ng-deep .am-tooltip-table .text-primary{font-weight:700;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#00a3ff}::ng-deep .am-tooltip-table .text-value{font-weight:500;font-size:16px;line-height:20px;letter-spacing:0%;margin-left:5px;padding-top:5px;color:#667085}\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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
|
|
1436
1451
|
}
|
|
1437
1452
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneJourneyComponent, decorators: [{
|
|
1438
1453
|
type: Component,
|
|
1439
|
-
args: [{ selector: 'lib-zone-journey', template: "<!-- zone-journey.component.html -->\r\n<div class=\"card my-card mx-1 my-2\">\r\n <div class=\"card-header px-0 mx-5 border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-1\">Zone-Based Shopper Analysis </span>\r\n <span class=\"text-sub mb-1\">Understand your Shoppers journey from one zone to another\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<div class=\"zone-dropdown me-2\" #zoneDropdown\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- BUTTON -->\r\n <button [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn btn-outline w-100 me-2 d-flex justify-content-between\"\r\n (click)=\"toggleDropdown($event)\"\r\n >\r\n Show / Hide Zone\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n<path d=\"M1 1L6 6L11 1\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </button>\r\n\r\n <!-- DROPDOWN -->\r\n <div *ngIf=\"showDropdown\" class=\"dropdown-panel h-300px d-flex flex-column\">\r\n\r\n <!-- HEADER (fixed) -->\r\n <div class=\"dropdown-header px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"dropdownSearchText\"\r\n (input)=\"filterZones()\"\r\n />\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 mb-2 px-2\">\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected()\"\r\n (change)=\"toggleSelectAll($event)\"\r\n /></span>\r\n <span class=\"ms-2\">Select All</span>\r\n </div>\r\n <!-- BODY (scrollable list) -->\r\n <div class=\"dropdown-body flex-grow-1 overflow-auto px-2\">\r\n <div\r\n class=\"zone-item\"\r\n *ngFor=\"let zone of tempFilteredZones\"\r\n >\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"zone.checked\"\r\n /></span>\r\n <span class=\"ms-2\">{{ zone.name }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- FOOTER (fixed) -->\r\n <div class=\"dropdown-footer d-flex justify-content-end gap-2 p-2 border-top\">\r\n <button class=\"btn btn-sm btn-outline w-50\" (click)=\"resetZones()\">\r\n Reset\r\n </button>\r\n <button class=\"btn btn-sm btn-primary w-50\" (click)=\"applyZones()\">\r\n Apply\r\n </button>\r\n </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n\r\n <button type=\"button\" (click)=\"getZoneJourneyExport()\" [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\">\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\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </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=\"d-flex justify-content-between mt-3 mx-3\">\r\n <div class=\"bordered-box w-50 me-2 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n height=\"21\" viewBox=\"0 0 19 21\" fill=\"none\">\r\n <path\r\n d=\"M0.5 16.3258H6V17.5758C6 18.3051 5.71027 19.0046 5.19454 19.5203C4.67882 20.036 3.97935 20.3258 3.25 20.3258C2.52065 20.3258 1.82118 20.036 1.30546 19.5203C0.789731 19.0046 0.5 18.3051 0.5 17.5758V16.3258ZM4.5 4.44576C6.5 4.44576 7.5 7.32576 7.5 9.32576C7.5 10.3258 7 11.3258 6.5 12.8258L6 14.3258H0.5C0.5 13.3258 0 11.8258 0 9.32576C0 6.82576 1.998 4.44576 4.5 4.44576ZM16.554 12.4238L16.337 13.6548C16.2023 14.3654 15.7931 14.9943 15.198 15.4054C14.6029 15.8165 13.8698 15.9765 13.1576 15.8509C12.4453 15.7254 11.8111 15.3242 11.3925 14.7344C10.9739 14.1446 10.8045 13.4136 10.921 12.6998L11.137 11.4698L16.554 12.4238ZM14.678 0.0307624C17.142 0.464762 18.696 3.15576 18.262 5.61776C17.828 8.07976 17.075 9.46976 16.902 10.4548L11.485 9.49976L11.253 7.93576C11.021 6.37176 10.703 5.29976 10.876 4.31576C11.223 2.34576 12.708 -0.316238 14.678 0.0307624Z\"\r\n fill=\"#1D2939\" />\r\n </svg>Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{zoneShopperAnalysis?.OverallFootfall ?? '--'}}</span> <span class=\"text-perc ms-1\">({{zoneShopperAnalysis?.ConversionPercent ?? '--'}} %)</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"text-title py-2\">\r\n<svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> NoB :</span>\r\n <span *ngIf=\"!this.clientData?.isNOB\" class=\"text-title py-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n<path d=\"M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M17 11L19 13L23 9M12.5 7C12.5 9.20914 10.7091 11 8.5 11C6.29086 11 4.5 9.20914 4.5 7C4.5 4.79086 6.29086 3 8.5 3C10.7091 3 12.5 4.79086 12.5 7Z\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\">\r\n <svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\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\" 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_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row gx-0 p-3\">\r\n <div [ngClass]=\"isMinimized ? 'col-12' : 'col-8'\"\r\n [style.height.px]=\"zoneChartNoData ? 300 : (isMinimized ? 650 : 550)\">\r\n <ng-container *ngIf=\"zoneChartLoading\">\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 </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneChartNoData\">\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 Based Shopper Analysis Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!zoneChartNoData && !zoneChartLoading\" id=\"chartdiv\" style=\"width: 100%; height: 100%;\"></div>\r\n </div>\r\n\r\n <div [ngClass]=\"isMinimized ? 'zone-floating' : 'col-4'\" [style.top.px]=\"isMinimized ? floatingPos.top : null\"\r\n [style.left.px]=\"isMinimized ? floatingPos.left : null\" (mousedown)=\"startDrag($event)\">\r\n <!-- (mousedown)=\"startDrag($event)\" -->\r\n <ng-container *ngIf=\"zoneCardLoading\">\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 </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneCardNoData\">\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 Based Shopper Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-conatiner *ngIf=\"!zoneCardNoData && !zoneCardLoading\" class=\"card \">\r\n <div class=\"card-header border-0 px-4\"\r\n [ngClass]=\"isMinimized ?'bg-secondary min-h-30px': 'bg-light-primary min-h-45px mb-2'\">\r\n <div class=\"card-title align-items-start\"><span *ngIf=\"isMinimized\" class=\"me-2 mb-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9 20C8.45 20 7.97917 19.8042 7.5875 19.4125C7.19583 19.0208 7 18.55 7 18C7 17.45 7.19583 16.9792 7.5875 16.5875C7.97917 16.1958 8.45 16 9 16C9.55 16 10.0208 16.1958 10.4125 16.5875C10.8042 16.9792 11 17.45 11 18C11 18.55 10.8042 19.0208 10.4125 19.4125C10.0208 19.8042 9.55 20 9 20ZM15 20C14.45 20 13.9792 19.8042 13.5875 19.4125C13.1958 19.0208 13 18.55 13 18C13 17.45 13.1958 16.9792 13.5875 16.5875C13.9792 16.1958 14.45 16 15 16C15.55 16 16.0208 16.1958 16.4125 16.5875C16.8042 16.9792 17 17.45 17 18C17 18.55 16.8042 19.0208 16.4125 19.4125C16.0208 19.8042 15.55 20 15 20ZM9 14C8.45 14 7.97917 13.8042 7.5875 13.4125C7.19583 13.0208 7 12.55 7 12C7 11.45 7.19583 10.9792 7.5875 10.5875C7.97917 10.1958 8.45 10 9 10C9.55 10 10.0208 10.1958 10.4125 10.5875C10.8042 10.9792 11 11.45 11 12C11 12.55 10.8042 13.0208 10.4125 13.4125C10.0208 13.8042 9.55 14 9 14ZM15 14C14.45 14 13.9792 13.8042 13.5875 13.4125C13.1958 13.0208 13 12.55 13 12C13 11.45 13.1958 10.9792 13.5875 10.5875C13.9792 10.1958 14.45 10 15 10C15.55 10 16.0208 10.1958 16.4125 10.5875C16.8042 10.9792 17 11.45 17 12C17 12.55 16.8042 13.0208 16.4125 13.4125C16.0208 13.8042 15.55 14 15 14ZM9 8C8.45 8 7.97917 7.80417 7.5875 7.4125C7.19583 7.02083 7 6.55 7 6C7 5.45 7.19583 4.97917 7.5875 4.5875C7.97917 4.19583 8.45 4 9 4C9.55 4 10.0208 4.19583 10.4125 4.5875C10.8042 4.97917 11 5.45 11 6C11 6.55 10.8042 7.02083 10.4125 7.4125C10.0208 7.80417 9.55 8 9 8ZM15 8C14.45 8 13.9792 7.80417 13.5875 7.4125C13.1958 7.02083 13 6.55 13 6C13 5.45 13.1958 4.97917 13.5875 4.5875C13.9792 4.19583 14.45 4 15 4C15.55 4 16.0208 4.19583 16.4125 4.5875C16.8042 4.97917 17 5.45 17 6C17 6.55 16.8042 7.02083 16.4125 7.4125C16.0208 7.80417 15.55 8 15 8Z\"\r\n fill=\"#667085\" />\r\n </svg></span> Zone Journey </div>\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 *ngIf=\"!isMinimized\" (click)=\"searchOpen()\" class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19 19L14.65 14.65M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"cursor-pointer\" *ngIf=\"!isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M5 12H19\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M15 3H21M21 3V9M21 3L14 10M9 21H3M3 21V15M3 21L10 14\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"searchNewOpen && !isMinimized\" class=\"px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"searchZoneText\"\r\n (change)=\"SearchZones()\"\r\n />\r\n </div>\r\n <div *ngIf=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n <div class=\"zone-card mx-3 \" *ngFor=\"let zone of zones;let i = index\">\r\n\r\n <!-- HEADER -->\r\n <div [ngClass]=\"activeIndex === i ? 'zone-header':'zone-default'\" (click)=\"toggle(i)\">\r\n <div [ngClass]=\"activeIndex === i ? 'zone-title':'zone-notitle'\">{{ zone.fromZone |\r\n titlecase}}\r\n </div>\r\n\r\n <div class=\"zone-metrics\">\r\n <span class=\"badge badge-light-primary px-2\" placement=\"top\" ngbTooltip=\"Footfall (Engagers)\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\"\r\n viewBox=\"0 0 10 11\" fill=\"none\">\r\n <path\r\n d=\"M0.25 8.16288H3V8.78788C3 9.15255 2.85513 9.50229 2.59727 9.76015C2.33941 10.018 1.98967 10.1629 1.625 10.1629C1.26033 10.1629 0.910591 10.018 0.652728 9.76015C0.394866 9.50229 0.25 9.15255 0.25 8.78788V8.16288ZM2.25 2.22288C3.25 2.22288 3.75 3.66288 3.75 4.66288C3.75 5.16288 3.5 5.66288 3.25 6.41288L3 7.16288H0.25C0.25 6.66288 0 5.91288 0 4.66288C0 3.41288 0.999 2.22288 2.25 2.22288ZM8.277 6.21188L8.1685 6.82738C8.10117 7.18269 7.89656 7.49717 7.59901 7.70271C7.30146 7.90824 6.93492 7.98827 6.57878 7.92547C6.22263 7.86268 5.90557 7.6621 5.69626 7.3672C5.48695 7.07229 5.40225 6.7068 5.4605 6.34988L5.5685 5.73488L8.277 6.21188ZM7.339 0.0153812C8.571 0.232381 9.348 1.57788 9.131 2.80888C8.914 4.03988 8.5375 4.73488 8.451 5.22738L5.7425 4.74988L5.6265 3.96788C5.5105 3.18588 5.3515 2.64988 5.438 2.15788C5.6115 1.17288 6.354 -0.158119 7.339 0.0153812Z\"\r\n fill=\"#009BF3\" />\r\n </svg></span> {{ zone.fromZoneFootfallCount ?? '--' }}\r\n </span>\r\n <span class=\"badge badge-light-default px-2\" placement=\"top\"\r\n[ngbTooltip]=\"clientData?.isNOB ? 'NoB' : 'Conversion'\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> {{ zone.fromZoneNobCount ?? '--' }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body max-h-200px min-h-auto overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Engagers)</th>\r\n <th ><span class=\"me-2\" *ngIf=\"this.clientData?.isNOB\">NoB</span> <span class=\"me-2\" *ngIf=\"!this.clientData?.isNOB\">Conversion</span> \r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15320_82488)\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15320_82488\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> -->\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone | titlecase}}</td>\r\n <td>{{ row.footfall ?? '--' }} ({{ row.engagerPercent }}%)</td>\r\n <td>{{ row.nob ?? '--' }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n </ng-conatiner>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</div>", styles: [".zone-card{border:1px solid #e6f0ff;border-radius:10px;margin-bottom:12px;background:#fff}.zone-header{display:flex;justify-content:space-between;align-items:center;padding:12px 30px 12px 12px;cursor:pointer;background:#f6fcff;border-radius:10px}.zone-default{border-width:1px;display:flex;justify-content:space-between;align-items:center;opacity:1;border-radius:8px;padding:12px 30px 12px 12px;border:1px solid #D0D5DD;background:#fff}.zone-title{font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;color:#33b5ff}.zone-metrics{display:flex;align-items:center;gap:8px}.pill{padding:4px 10px;border-radius:16px;font-size:12px}.arrow{transition:transform .3s ease}.arrow.rotate{transform:rotate(180deg)}.zone-body{padding:10px 12px}.table-head,.table-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:6px 0}.table-head{font-weight:600;font-size:12px;opacity:1;padding:11px 16px;border-bottom-width:1px;background-color:#fcfcfd;color:#667085;border-bottom:1px solid #EAECF0;display:flex;justify-content:space-between}.table-row{opacity:1;padding:11px 16px;border-bottom-width:1px;display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid #EAECF0}.zone-floating{position:sticky;width:330px;height:75px;top:0;z-index:9999;cursor:move}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.bordered-box{border:1px solid #EAECF0;border-radius:8px}.path-wrapper{opacity:1;padding:8px 16px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.zone-dropdown{position:relative}.dropdown-panel{position:absolute;background:#fff;border-radius:8px;padding:10px;width:100%;box-shadow:0 6px 20px #0000001a;z-index:1000}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.dropdown-panel{width:260px;background:#fff;border-radius:8px;box-shadow:0 6px 20px #0000001f}.dropdown-body{max-height:220px}.zone-item{display:flex;align-items:center;gap:8px;padding:6px 0}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.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 .am-tooltip{font-size:12px;border-width:1px;opacity:1;border-radius:12px;padding:8px}::ng-deep .am-tooltip-header{margin-bottom:6px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}::ng-deep .am-tooltip-table{width:100%;border-collapse:collapse}::ng-deep .am-tooltip-table .value{font-weight:600}::ng-deep .am-tooltip-table .text-primary{font-weight:700;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#00a3ff}::ng-deep .am-tooltip-table .text-value{font-weight:500;font-size:16px;line-height:20px;letter-spacing:0%;margin-left:5px;padding-top:5px;color:#667085}\n"] }]
|
|
1454
|
+
args: [{ selector: 'lib-zone-journey', template: "<!-- zone-journey.component.html -->\r\n<div class=\"card my-card mx-1 my-2\">\r\n <div class=\"card-header px-0 mx-5 border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-1\">Zone-Based Shopper Analysis </span>\r\n <span class=\"text-sub mb-1\">Understand your Shoppers journey from one zone to another\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<div class=\"zone-dropdown me-2\" #zoneDropdown\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- BUTTON -->\r\n <button [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn btn-outline w-100 me-2 d-flex justify-content-between\"\r\n (click)=\"toggleDropdown($event)\"\r\n >\r\n Show / Hide Zone\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n<path d=\"M1 1L6 6L11 1\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </button>\r\n\r\n <!-- DROPDOWN -->\r\n <div *ngIf=\"showDropdown\" class=\"dropdown-panel h-300px d-flex flex-column\">\r\n\r\n <!-- HEADER (fixed) -->\r\n <div class=\"dropdown-header px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"dropdownSearchText\"\r\n (input)=\"filterZones()\"\r\n />\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 mb-2 px-2\">\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected()\"\r\n (change)=\"toggleSelectAll($event)\"\r\n /></span>\r\n <span class=\"ms-2\">Select All</span>\r\n </div>\r\n <!-- BODY (scrollable list) -->\r\n <div class=\"dropdown-body flex-grow-1 overflow-auto px-2\">\r\n <div\r\n class=\"zone-item\"\r\n *ngFor=\"let zone of tempFilteredZones\"\r\n >\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"zone.checked\"\r\n /></span>\r\n <span class=\"ms-2\">{{ zone.name }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- FOOTER (fixed) -->\r\n <div class=\"dropdown-footer d-flex justify-content-end gap-2 p-2 border-top\">\r\n <button class=\"btn btn-sm btn-outline w-50\" (click)=\"resetZones()\">\r\n Reset\r\n </button>\r\n <button class=\"btn btn-sm btn-primary w-50\" (click)=\"applyZones()\">\r\n Apply\r\n </button>\r\n </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n\r\n <button type=\"button\" (click)=\"getZoneJourneyExport()\" [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\">\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\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </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=\"d-flex justify-content-between mt-3 mx-3\">\r\n <div class=\"bordered-box w-50 me-2 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n height=\"21\" viewBox=\"0 0 19 21\" fill=\"none\">\r\n <path\r\n d=\"M0.5 16.3258H6V17.5758C6 18.3051 5.71027 19.0046 5.19454 19.5203C4.67882 20.036 3.97935 20.3258 3.25 20.3258C2.52065 20.3258 1.82118 20.036 1.30546 19.5203C0.789731 19.0046 0.5 18.3051 0.5 17.5758V16.3258ZM4.5 4.44576C6.5 4.44576 7.5 7.32576 7.5 9.32576C7.5 10.3258 7 11.3258 6.5 12.8258L6 14.3258H0.5C0.5 13.3258 0 11.8258 0 9.32576C0 6.82576 1.998 4.44576 4.5 4.44576ZM16.554 12.4238L16.337 13.6548C16.2023 14.3654 15.7931 14.9943 15.198 15.4054C14.6029 15.8165 13.8698 15.9765 13.1576 15.8509C12.4453 15.7254 11.8111 15.3242 11.3925 14.7344C10.9739 14.1446 10.8045 13.4136 10.921 12.6998L11.137 11.4698L16.554 12.4238ZM14.678 0.0307624C17.142 0.464762 18.696 3.15576 18.262 5.61776C17.828 8.07976 17.075 9.46976 16.902 10.4548L11.485 9.49976L11.253 7.93576C11.021 6.37176 10.703 5.29976 10.876 4.31576C11.223 2.34576 12.708 -0.316238 14.678 0.0307624Z\"\r\n fill=\"#1D2939\" />\r\n </svg>Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{zoneShopperAnalysis?.OverallFootfall ?? '--'}}</span> <span class=\"text-perc ms-1\">({{zoneShopperAnalysis?.ConversionPercent ?? '--'}} %)</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"text-title py-2\">\r\n<svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> NoB :</span>\r\n <span *ngIf=\"!this.clientData?.isNOB\" class=\"text-title py-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n<path d=\"M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M17 11L19 13L23 9M12.5 7C12.5 9.20914 10.7091 11 8.5 11C6.29086 11 4.5 9.20914 4.5 7C4.5 4.79086 6.29086 3 8.5 3C10.7091 3 12.5 4.79086 12.5 7Z\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\">\r\n <svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\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\" 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_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row gx-0 p-3\">\r\n <div [ngClass]=\"isMinimized ? 'col-12' : 'col-8'\"\r\n [style.height.px]=\"zoneChartNoData ? 300 : (isMinimized ? 650 : 550)\">\r\n <ng-container *ngIf=\"zoneChartLoading\">\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 </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneChartNoData\">\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 Based Shopper Analysis Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!zoneChartNoData && !zoneChartLoading\" id=\"chartdiv\" style=\"width: 100%; height: 100%;\"></div>\r\n </div>\r\n\r\n <div [ngClass]=\"isMinimized ? 'zone-floating' : 'col-4'\" [style.top.px]=\"isMinimized ? floatingPos.top : null\"\r\n [style.left.px]=\"isMinimized ? floatingPos.left : null\" (mousedown)=\"startDrag($event)\">\r\n <!-- (mousedown)=\"startDrag($event)\" -->\r\n <ng-container *ngIf=\"zoneCardLoading\">\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 </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneCardNoData\">\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 Based Shopper Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-conatiner *ngIf=\"!zoneCardNoData && !zoneCardLoading\" class=\"card \">\r\n <div class=\"card-header border-0 px-4\"\r\n [ngClass]=\"isMinimized ?'bg-secondary min-h-30px': 'bg-light-primary min-h-45px mb-2'\">\r\n <div class=\"card-title align-items-start\"><span *ngIf=\"isMinimized\" class=\"me-2 mb-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9 20C8.45 20 7.97917 19.8042 7.5875 19.4125C7.19583 19.0208 7 18.55 7 18C7 17.45 7.19583 16.9792 7.5875 16.5875C7.97917 16.1958 8.45 16 9 16C9.55 16 10.0208 16.1958 10.4125 16.5875C10.8042 16.9792 11 17.45 11 18C11 18.55 10.8042 19.0208 10.4125 19.4125C10.0208 19.8042 9.55 20 9 20ZM15 20C14.45 20 13.9792 19.8042 13.5875 19.4125C13.1958 19.0208 13 18.55 13 18C13 17.45 13.1958 16.9792 13.5875 16.5875C13.9792 16.1958 14.45 16 15 16C15.55 16 16.0208 16.1958 16.4125 16.5875C16.8042 16.9792 17 17.45 17 18C17 18.55 16.8042 19.0208 16.4125 19.4125C16.0208 19.8042 15.55 20 15 20ZM9 14C8.45 14 7.97917 13.8042 7.5875 13.4125C7.19583 13.0208 7 12.55 7 12C7 11.45 7.19583 10.9792 7.5875 10.5875C7.97917 10.1958 8.45 10 9 10C9.55 10 10.0208 10.1958 10.4125 10.5875C10.8042 10.9792 11 11.45 11 12C11 12.55 10.8042 13.0208 10.4125 13.4125C10.0208 13.8042 9.55 14 9 14ZM15 14C14.45 14 13.9792 13.8042 13.5875 13.4125C13.1958 13.0208 13 12.55 13 12C13 11.45 13.1958 10.9792 13.5875 10.5875C13.9792 10.1958 14.45 10 15 10C15.55 10 16.0208 10.1958 16.4125 10.5875C16.8042 10.9792 17 11.45 17 12C17 12.55 16.8042 13.0208 16.4125 13.4125C16.0208 13.8042 15.55 14 15 14ZM9 8C8.45 8 7.97917 7.80417 7.5875 7.4125C7.19583 7.02083 7 6.55 7 6C7 5.45 7.19583 4.97917 7.5875 4.5875C7.97917 4.19583 8.45 4 9 4C9.55 4 10.0208 4.19583 10.4125 4.5875C10.8042 4.97917 11 5.45 11 6C11 6.55 10.8042 7.02083 10.4125 7.4125C10.0208 7.80417 9.55 8 9 8ZM15 8C14.45 8 13.9792 7.80417 13.5875 7.4125C13.1958 7.02083 13 6.55 13 6C13 5.45 13.1958 4.97917 13.5875 4.5875C13.9792 4.19583 14.45 4 15 4C15.55 4 16.0208 4.19583 16.4125 4.5875C16.8042 4.97917 17 5.45 17 6C17 6.55 16.8042 7.02083 16.4125 7.4125C16.0208 7.80417 15.55 8 15 8Z\"\r\n fill=\"#667085\" />\r\n </svg></span> Zone Journey </div>\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 *ngIf=\"!isMinimized\" (click)=\"searchOpen()\" class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19 19L14.65 14.65M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"cursor-pointer\" *ngIf=\"!isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M5 12H19\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M15 3H21M21 3V9M21 3L14 10M9 21H3M3 21V15M3 21L10 14\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"searchNewOpen && !isMinimized\" class=\"px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"searchZoneText\"\r\n (change)=\"SearchZones()\"\r\n />\r\n </div>\r\n <div *ngIf=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n <div class=\"zone-card mx-3 \" *ngFor=\"let zone of zones;let i = index\">\r\n\r\n <!-- HEADER -->\r\n <div [ngClass]=\"activeIndex === i ? 'zone-header':'zone-default'\" (click)=\"toggle(i)\">\r\n <div [ngClass]=\"activeIndex === i ? 'zone-title':'zone-notitle'\">{{ zone.fromZone |\r\n titlecase}}\r\n </div>\r\n\r\n <div class=\"zone-metrics\">\r\n <span class=\"badge badge-light-primary px-2\" placement=\"top\" ngbTooltip=\"Footfall (Concentration)\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\"\r\n viewBox=\"0 0 10 11\" fill=\"none\">\r\n <path\r\n d=\"M0.25 8.16288H3V8.78788C3 9.15255 2.85513 9.50229 2.59727 9.76015C2.33941 10.018 1.98967 10.1629 1.625 10.1629C1.26033 10.1629 0.910591 10.018 0.652728 9.76015C0.394866 9.50229 0.25 9.15255 0.25 8.78788V8.16288ZM2.25 2.22288C3.25 2.22288 3.75 3.66288 3.75 4.66288C3.75 5.16288 3.5 5.66288 3.25 6.41288L3 7.16288H0.25C0.25 6.66288 0 5.91288 0 4.66288C0 3.41288 0.999 2.22288 2.25 2.22288ZM8.277 6.21188L8.1685 6.82738C8.10117 7.18269 7.89656 7.49717 7.59901 7.70271C7.30146 7.90824 6.93492 7.98827 6.57878 7.92547C6.22263 7.86268 5.90557 7.6621 5.69626 7.3672C5.48695 7.07229 5.40225 6.7068 5.4605 6.34988L5.5685 5.73488L8.277 6.21188ZM7.339 0.0153812C8.571 0.232381 9.348 1.57788 9.131 2.80888C8.914 4.03988 8.5375 4.73488 8.451 5.22738L5.7425 4.74988L5.6265 3.96788C5.5105 3.18588 5.3515 2.64988 5.438 2.15788C5.6115 1.17288 6.354 -0.158119 7.339 0.0153812Z\"\r\n fill=\"#009BF3\" />\r\n </svg></span> {{ zone.fromZoneFootfallCount ?? '--' }}\r\n </span>\r\n <span class=\"badge badge-light-default px-2\" placement=\"top\"\r\n[ngbTooltip]=\"clientData?.isNOB ? 'NoB' : 'Conversion'\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> <span *ngIf=\"!this.clientData?.isNOB\" class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n<path d=\"M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M17 11L19 13L23 9M12.5 7C12.5 9.20914 10.7091 11 8.5 11C6.29086 11 4.5 9.20914 4.5 7C4.5 4.79086 6.29086 3 8.5 3C10.7091 3 12.5 4.79086 12.5 7Z\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span> {{ zone.fromZoneNobCount ?? '--' }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body max-h-200px min-h-auto overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Concentration)</th>\r\n <th ><span class=\"me-2\" *ngIf=\"this.clientData?.isNOB\">NoB</span> <span class=\"me-2\" *ngIf=\"!this.clientData?.isNOB\">Conversion</span> \r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15320_82488)\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15320_82488\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> -->\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone | titlecase}}</td>\r\n <td>{{ row.footfall ?? '--' }} ({{ row.concPercent }}%)</td>\r\n <td>{{ row.nob ?? '--' }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n </ng-conatiner>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</div>", styles: [".zone-card{border:1px solid #e6f0ff;border-radius:10px;margin-bottom:12px;background:#fff}.zone-header{display:flex;justify-content:space-between;align-items:center;padding:12px 30px 12px 12px;cursor:pointer;background:#f6fcff;border-radius:10px}.zone-default{border-width:1px;display:flex;justify-content:space-between;align-items:center;opacity:1;border-radius:8px;padding:12px 30px 12px 12px;border:1px solid #D0D5DD;background:#fff}.zone-title{font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;color:#33b5ff}.zone-metrics{display:flex;align-items:center;gap:8px}.pill{padding:4px 10px;border-radius:16px;font-size:12px}.arrow{transition:transform .3s ease}.arrow.rotate{transform:rotate(180deg)}.zone-body{padding:10px 12px}.table-head,.table-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:6px 0}.table-head{font-weight:600;font-size:12px;opacity:1;padding:11px 16px;border-bottom-width:1px;background-color:#fcfcfd;color:#667085;border-bottom:1px solid #EAECF0;display:flex;justify-content:space-between}.table-row{opacity:1;padding:11px 16px;border-bottom-width:1px;display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid #EAECF0}.zone-floating{position:sticky;width:330px;height:75px;top:0;z-index:9999;cursor:move}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.bordered-box{border:1px solid #EAECF0;border-radius:8px}.path-wrapper{opacity:1;padding:8px 16px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.zone-dropdown{position:relative}.dropdown-panel{position:absolute;background:#fff;border-radius:8px;padding:10px;width:100%;box-shadow:0 6px 20px #0000001a;z-index:1000}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.dropdown-panel{width:260px;background:#fff;border-radius:8px;box-shadow:0 6px 20px #0000001f}.dropdown-body{max-height:220px}.zone-item{display:flex;align-items:center;gap:8px;padding:6px 0}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.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 .am-tooltip{font-size:12px;border-width:1px;opacity:1;border-radius:12px;padding:8px}::ng-deep .am-tooltip-header{margin-bottom:6px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}::ng-deep .am-tooltip-table{width:100%;border-collapse:collapse}::ng-deep .am-tooltip-table .value{font-weight:600}::ng-deep .am-tooltip-table .text-primary{font-weight:700;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#00a3ff}::ng-deep .am-tooltip-table .text-value{font-weight:500;font-size:16px;line-height:20px;letter-spacing:0%;margin-left:5px;padding-top:5px;color:#667085}\n"] }]
|
|
1440
1455
|
}], ctorParameters: () => [{ type: ZoneService }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i4$1.Router }, { type: i4.ToastService }], propDecorators: { headerData: [{
|
|
1441
1456
|
type: Input
|
|
1442
1457
|
}], clientData: [{
|