tango-app-ui-analyse-zone 3.7.1-beta.21 → 3.7.1-beta.22
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.
|
@@ -397,15 +397,11 @@ class OverallcardsComponent {
|
|
|
397
397
|
.subscribe((res) => {
|
|
398
398
|
if (res) {
|
|
399
399
|
this.zoneName = res;
|
|
400
|
-
|
|
401
|
-
this.getCardData();
|
|
402
|
-
}
|
|
400
|
+
this.getCardData();
|
|
403
401
|
}
|
|
404
402
|
else {
|
|
405
403
|
// fallback if no emission
|
|
406
|
-
|
|
407
|
-
this.getCardData();
|
|
408
|
-
}
|
|
404
|
+
this.getCardData();
|
|
409
405
|
this.getAvailableZones();
|
|
410
406
|
this.getNewHotClodZone();
|
|
411
407
|
this.getCustomPath();
|
|
@@ -533,6 +529,63 @@ class OverallcardsComponent {
|
|
|
533
529
|
series.appear(1000, 100);
|
|
534
530
|
}, 100);
|
|
535
531
|
}
|
|
532
|
+
genderchart1() {
|
|
533
|
+
setTimeout(() => {
|
|
534
|
+
const chartDiv = document.getElementById("genderchartdiv1");
|
|
535
|
+
if (!chartDiv) {
|
|
536
|
+
// console.error("Could not find HTML element with id `genderchartdiv`");
|
|
537
|
+
return;
|
|
538
|
+
}
|
|
539
|
+
if (this.genderroot) {
|
|
540
|
+
this.genderroot.dispose();
|
|
541
|
+
}
|
|
542
|
+
this.genderroot = am5.Root.new('genderchartdiv1');
|
|
543
|
+
const chart = this.genderroot.container.children.push(am5percent.PieChart.new(this.genderroot, {
|
|
544
|
+
endAngle: 270,
|
|
545
|
+
innerRadius: am5.percent(60)
|
|
546
|
+
}));
|
|
547
|
+
const series = chart.series.push(am5percent.PieSeries.new(this.genderroot, {
|
|
548
|
+
valueField: 'value',
|
|
549
|
+
categoryField: 'category',
|
|
550
|
+
endAngle: 270,
|
|
551
|
+
alignLabels: false
|
|
552
|
+
}));
|
|
553
|
+
series.states.create('hidden', {
|
|
554
|
+
endAngle: -90
|
|
555
|
+
});
|
|
556
|
+
series.labels.template.setAll({
|
|
557
|
+
textType: 'circular',
|
|
558
|
+
visible: false,
|
|
559
|
+
centerX: 0,
|
|
560
|
+
centerY: 0
|
|
561
|
+
});
|
|
562
|
+
series.data.setAll(this.genderAnalysis);
|
|
563
|
+
const legend = this.genderroot.container.children.push(am5.Legend.new(this.genderroot, {
|
|
564
|
+
x: am5.percent(50),
|
|
565
|
+
centerX: am5.percent(50),
|
|
566
|
+
y: am5.percent(95),
|
|
567
|
+
layout: this.genderroot.horizontalLayout,
|
|
568
|
+
}));
|
|
569
|
+
legend.labels.template.setAll({
|
|
570
|
+
text: "{category}: {value}%",
|
|
571
|
+
fill: am5.color("#464E5F"),
|
|
572
|
+
fontFamily: "Inter",
|
|
573
|
+
fontSize: "16px",
|
|
574
|
+
fontWeight: "400",
|
|
575
|
+
});
|
|
576
|
+
legend.valueLabels.template.setAll({
|
|
577
|
+
text: "{value}%",
|
|
578
|
+
fontWeight: "700",
|
|
579
|
+
fontFamily: "Inter",
|
|
580
|
+
fontSize: "14px",
|
|
581
|
+
fill: am5.color("#464E5F"),
|
|
582
|
+
});
|
|
583
|
+
legend.itemContainers.template.events.on("click", (ev) => { ev.stopPropagation(); });
|
|
584
|
+
legend.data.setAll(series.dataItems);
|
|
585
|
+
// Animation
|
|
586
|
+
series.appear(1000, 100);
|
|
587
|
+
}, 100);
|
|
588
|
+
}
|
|
536
589
|
getCardData() {
|
|
537
590
|
this.cardDataLoading = true;
|
|
538
591
|
this.cardNoData = true;
|
|
@@ -557,7 +610,10 @@ class OverallcardsComponent {
|
|
|
557
610
|
});
|
|
558
611
|
this.ageAnalysis = response.data.ageAnalysis;
|
|
559
612
|
setTimeout(() => {
|
|
560
|
-
this.
|
|
613
|
+
if (this.headerData?.client === '478')
|
|
614
|
+
this.genderchart(); // Call this method after data is set
|
|
615
|
+
else
|
|
616
|
+
this.genderchart1();
|
|
561
617
|
}, 200);
|
|
562
618
|
this.cardDataLoading = false;
|
|
563
619
|
this.cardNoData = false;
|
|
@@ -917,11 +973,11 @@ class OverallcardsComponent {
|
|
|
917
973
|
});
|
|
918
974
|
}
|
|
919
975
|
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 });
|
|
920
|
-
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 class=\"col-3 h-auto\">\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 <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 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}} <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}} <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 </div>\r\n <div class=\"col-5 h-auto\">\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 </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}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}.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" }] });
|
|
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" }] });
|
|
921
977
|
}
|
|
922
978
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverallcardsComponent, decorators: [{
|
|
923
979
|
type: Component,
|
|
924
|
-
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 class=\"col-3 h-auto\">\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 <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 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}} <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}} <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 </div>\r\n <div class=\"col-5 h-auto\">\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 </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}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}.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"] }]
|
|
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"] }]
|
|
925
981
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: ZoneService }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i4.ToastService }] });
|
|
926
982
|
|
|
927
983
|
class ZoneJourneyComponent {
|