tango-app-ui-analyse-zone 3.7.1-beta.41 → 3.7.1-beta.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/overallcards/overallcards.component.mjs +153 -12
- package/esm2022/lib/components/services/zone.service.mjs +4 -1
- package/fesm2022/tango-app-ui-analyse-zone.mjs +153 -11
- package/fesm2022/tango-app-ui-analyse-zone.mjs.map +1 -1
- package/lib/components/overallcards/overallcards.component.d.ts +15 -1
- package/lib/components/services/zone.service.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable,
|
|
2
|
+
import { Injectable, ViewChild, HostListener, Component, Input, ElementRef, EventEmitter, Output, forwardRef, NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject, takeUntil, Subject, throwError, debounceTime, startWith as startWith$1, skip as skip$1 } from 'rxjs';
|
|
4
4
|
import * as i2 from 'tango-app-ui-global';
|
|
5
5
|
import * as FileSaver from 'file-saver';
|
|
@@ -8,19 +8,19 @@ import * as i1 from '@angular/common/http';
|
|
|
8
8
|
import * as i6 from '@angular/common';
|
|
9
9
|
import { CommonModule } from '@angular/common';
|
|
10
10
|
import * as am5 from '@amcharts/amcharts5';
|
|
11
|
+
import * as am5xy from '@amcharts/amcharts5/xy';
|
|
11
12
|
import * as am5percent from '@amcharts/amcharts5/percent';
|
|
13
|
+
import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
|
|
12
14
|
import { takeUntil as takeUntil$1, startWith, skip, debounceTime as debounceTime$1 } from 'rxjs/operators';
|
|
15
|
+
import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
|
|
16
|
+
import { NgbCarouselConfig, NgbProgressbarModule, NgbTooltipModule, NgbModule, NgbAccordionModule, NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';
|
|
13
17
|
import * as i4 from '@angular/router';
|
|
14
18
|
import { RouterModule } from '@angular/router';
|
|
15
19
|
import * as i4$1 from 'tango-app-ui-shared';
|
|
16
20
|
import { CommonSharedModule } from 'tango-app-ui-shared';
|
|
17
|
-
import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
|
|
18
|
-
import { NgbCarouselConfig, NgbProgressbarModule, NgbTooltipModule, NgbModule, NgbAccordionModule, NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';
|
|
19
|
-
import * as am5xy from '@amcharts/amcharts5/xy';
|
|
20
21
|
import * as i2$1 from '@angular/forms';
|
|
21
22
|
import { NG_VALUE_ACCESSOR, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
22
23
|
import * as am5flow from '@amcharts/amcharts5/flow';
|
|
23
|
-
import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
|
|
24
24
|
import dayjs from 'dayjs';
|
|
25
25
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
26
26
|
|
|
@@ -210,6 +210,9 @@ class ZoneService {
|
|
|
210
210
|
getEngagersCardList(params) {
|
|
211
211
|
return this.http.post(`${this.trafficApiUrl}/engagersCards_v3`, params);
|
|
212
212
|
}
|
|
213
|
+
getDemoGraphicsChart(params) {
|
|
214
|
+
return this.http.post(`${this.trafficApiUrl}/demographicChart_v3`, params);
|
|
215
|
+
}
|
|
213
216
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneService, deps: [{ token: i1.HttpClient }, { token: i2.GlobalStateService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
214
217
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneService, providedIn: 'root' });
|
|
215
218
|
}
|
|
@@ -348,6 +351,7 @@ class OverallcardsComponent {
|
|
|
348
351
|
ZoneService;
|
|
349
352
|
zoneV2Service;
|
|
350
353
|
cd;
|
|
354
|
+
modalService;
|
|
351
355
|
gs;
|
|
352
356
|
router;
|
|
353
357
|
toast;
|
|
@@ -374,11 +378,12 @@ class OverallcardsComponent {
|
|
|
374
378
|
cardDataTraffic = [];
|
|
375
379
|
cardNoTrafficData = false;
|
|
376
380
|
cardDataTrafficLoading = true;
|
|
377
|
-
constructor(zone, ZoneService, zoneV2Service, cd, gs, router, toast) {
|
|
381
|
+
constructor(zone, ZoneService, zoneV2Service, cd, modalService, gs, router, toast) {
|
|
378
382
|
this.zone = zone;
|
|
379
383
|
this.ZoneService = ZoneService;
|
|
380
384
|
this.zoneV2Service = zoneV2Service;
|
|
381
385
|
this.cd = cd;
|
|
386
|
+
this.modalService = modalService;
|
|
382
387
|
this.gs = gs;
|
|
383
388
|
this.router = router;
|
|
384
389
|
this.toast = toast;
|
|
@@ -1004,18 +1009,152 @@ class OverallcardsComponent {
|
|
|
1004
1009
|
this.showPopup = false;
|
|
1005
1010
|
}
|
|
1006
1011
|
}
|
|
1012
|
+
zoomPopup;
|
|
1007
1013
|
goToDemographicPage(event) {
|
|
1008
1014
|
event.stopPropagation();
|
|
1009
1015
|
this.showPopup = false;
|
|
1010
|
-
this.
|
|
1016
|
+
const modalRef = this.modalService.open(this.zoomPopup, {
|
|
1017
|
+
centered: true,
|
|
1018
|
+
size: "xl",
|
|
1019
|
+
keyboard: false, // Prevent closing on ESC key
|
|
1020
|
+
});
|
|
1021
|
+
this.getDemoGraphics();
|
|
1022
|
+
// this.router.navigate(['/manage/traffic']);
|
|
1023
|
+
}
|
|
1024
|
+
objDataTraffic;
|
|
1025
|
+
demoNoData = false;
|
|
1026
|
+
demoloading = true;
|
|
1027
|
+
valueType = "actual";
|
|
1028
|
+
demoGraphicsData;
|
|
1029
|
+
demoGraphicsroot;
|
|
1030
|
+
demoGraphicsChartInstance;
|
|
1031
|
+
getDemoGraphics() {
|
|
1032
|
+
this.demoNoData = false;
|
|
1033
|
+
this.demoloading = true;
|
|
1034
|
+
this.objDataTraffic = {
|
|
1035
|
+
fromDate: this.headerData?.date?.startDate,
|
|
1036
|
+
toDate: this.headerData?.date?.endDate,
|
|
1037
|
+
storeId: this.headerData?.stores.filter((store) => store.checked).map((store) => store.storeId),
|
|
1038
|
+
clientId: this.headerData?.client,
|
|
1039
|
+
processType: 'footfall',
|
|
1040
|
+
valueType: this.valueType,
|
|
1041
|
+
nob: this.clientData?.isNOB,
|
|
1042
|
+
normalize: false
|
|
1043
|
+
};
|
|
1044
|
+
this.ZoneService
|
|
1045
|
+
.getDemoGraphicsChart(this.objDataTraffic)
|
|
1046
|
+
.pipe(takeUntil$1(this.destroy$))
|
|
1047
|
+
?.subscribe({
|
|
1048
|
+
next: (res) => {
|
|
1049
|
+
if (res && res.code === 200) {
|
|
1050
|
+
this.demoGraphicsData = res?.data.demographicData;
|
|
1051
|
+
this.demoGraphicsChart();
|
|
1052
|
+
this.cd.detectChanges();
|
|
1053
|
+
// Call with a delay to ensure the element is in the DOM
|
|
1054
|
+
this.demoNoData = false;
|
|
1055
|
+
this.demoloading = false;
|
|
1056
|
+
}
|
|
1057
|
+
else {
|
|
1058
|
+
this.demoNoData = true;
|
|
1059
|
+
this.demoloading = false;
|
|
1060
|
+
}
|
|
1061
|
+
},
|
|
1062
|
+
error: (err) => {
|
|
1063
|
+
this.cd.detectChanges();
|
|
1064
|
+
this.demoNoData = true;
|
|
1065
|
+
this.demoloading = false;
|
|
1066
|
+
},
|
|
1067
|
+
complete: () => { },
|
|
1068
|
+
});
|
|
1069
|
+
}
|
|
1070
|
+
demoGraphicsChart() {
|
|
1071
|
+
this.demoNoData = false;
|
|
1072
|
+
this.demoloading = false;
|
|
1073
|
+
setTimeout(() => {
|
|
1074
|
+
const demoGraphicsDiv = document.getElementById("demoGraphics");
|
|
1075
|
+
if (!demoGraphicsDiv) {
|
|
1076
|
+
return;
|
|
1077
|
+
}
|
|
1078
|
+
// Dispose of previous chart if it exists
|
|
1079
|
+
if (this.demoGraphicsroot) {
|
|
1080
|
+
this.demoGraphicsroot.dispose();
|
|
1081
|
+
}
|
|
1082
|
+
// Create a new chart
|
|
1083
|
+
this.demoGraphicsroot = am5.Root.new(demoGraphicsDiv);
|
|
1084
|
+
this.demoGraphicsroot.setThemes([
|
|
1085
|
+
am5themes_Animated.new(this.demoGraphicsroot),
|
|
1086
|
+
]);
|
|
1087
|
+
this.demoGraphicsChartInstance =
|
|
1088
|
+
this.demoGraphicsroot.container.children.push(am5xy.XYChart.new(this.demoGraphicsroot, {
|
|
1089
|
+
panX: false,
|
|
1090
|
+
panY: false,
|
|
1091
|
+
paddingLeft: 0,
|
|
1092
|
+
wheelX: "panX",
|
|
1093
|
+
wheelY: "zoomX",
|
|
1094
|
+
layout: this.demoGraphicsroot.verticalLayout,
|
|
1095
|
+
}));
|
|
1096
|
+
let xRenderer = am5xy.AxisRendererX.new(this.demoGraphicsroot, {
|
|
1097
|
+
cellStartLocation: 0.1,
|
|
1098
|
+
cellEndLocation: 0.9,
|
|
1099
|
+
minorGridEnabled: true,
|
|
1100
|
+
});
|
|
1101
|
+
let xAxis = this.demoGraphicsChartInstance.xAxes.push(am5xy.CategoryAxis.new(this.demoGraphicsroot, {
|
|
1102
|
+
categoryField: "age",
|
|
1103
|
+
renderer: xRenderer,
|
|
1104
|
+
tooltip: am5.Tooltip.new(this.demoGraphicsroot, {}),
|
|
1105
|
+
}));
|
|
1106
|
+
this.demoGraphicsData = this.demoGraphicsData?.map((item) => ({
|
|
1107
|
+
age: item.age,
|
|
1108
|
+
count: Number(item.count),
|
|
1109
|
+
maleCount: Number(item.maleCount),
|
|
1110
|
+
femaleCount: Number(item.femaleCount),
|
|
1111
|
+
}));
|
|
1112
|
+
xRenderer.grid.template.setAll({ location: 1 });
|
|
1113
|
+
xAxis.data.setAll(this.demoGraphicsData);
|
|
1114
|
+
let yAxis = this.demoGraphicsChartInstance.yAxes.push(am5xy.ValueAxis.new(this.demoGraphicsroot, {
|
|
1115
|
+
renderer: am5xy.AxisRendererY.new(this.demoGraphicsroot, {
|
|
1116
|
+
strokeOpacity: 0.1,
|
|
1117
|
+
}),
|
|
1118
|
+
}));
|
|
1119
|
+
// Add legend
|
|
1120
|
+
let legend = this.demoGraphicsChartInstance.children.push(am5.Legend.new(this.demoGraphicsroot, {
|
|
1121
|
+
x: am5.p100,
|
|
1122
|
+
y: am5.p0,
|
|
1123
|
+
centerX: am5.p100,
|
|
1124
|
+
centerY: am5.p0, // Align the top of the legend to the top of the chart
|
|
1125
|
+
}));
|
|
1126
|
+
// Create the series and add each to the legend
|
|
1127
|
+
const maleSeries = this.makeSeries("Male", "maleCount", xAxis, yAxis);
|
|
1128
|
+
const femaleSeries = this.makeSeries("Female", "femaleCount", xAxis, yAxis);
|
|
1129
|
+
legend.data.setAll([maleSeries, femaleSeries]);
|
|
1130
|
+
this.demoGraphicsChartInstance.appear(1000, 100);
|
|
1131
|
+
}, 0);
|
|
1132
|
+
}
|
|
1133
|
+
makeSeries(name, fieldName, xAxis, yAxis) {
|
|
1134
|
+
let series = this.demoGraphicsChartInstance.series.push(am5xy.ColumnSeries.new(this.demoGraphicsroot, {
|
|
1135
|
+
name: name,
|
|
1136
|
+
xAxis: xAxis,
|
|
1137
|
+
yAxis: yAxis,
|
|
1138
|
+
valueYField: fieldName,
|
|
1139
|
+
categoryXField: "age",
|
|
1140
|
+
}));
|
|
1141
|
+
series.columns.template.setAll({
|
|
1142
|
+
tooltipText: "{name}, {categoryX}: {valueY}",
|
|
1143
|
+
width: am5.percent(90),
|
|
1144
|
+
tooltipY: 0,
|
|
1145
|
+
strokeOpacity: 0,
|
|
1146
|
+
});
|
|
1147
|
+
series.data.setAll(this.demoGraphicsData);
|
|
1148
|
+
series.appear();
|
|
1149
|
+
return series; // Return the series to add it to the legend
|
|
1011
1150
|
}
|
|
1012
|
-
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.Router }, { token: i4$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1013
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverallcardsComponent, selector: "lib-overallcards", host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "analysisDropdown", first: true, predicate: ["analysisDropdown"], descendants: true }, { propertyName: "genderPopup", first: true, predicate: ["genderPopup"], descendants: true }], 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\">{{ overallStoreCards?.bounced?.count !== null &&\r\n overallStoreCards?.bounced?.count !== undefined\r\n ? overallStoreCards?.bounced?.count.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=\"overallStoreCards?.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=\"!overallStoreCards?.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\">{{overallStoreCards?.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\">{{ overallStoreCards?.engagers?.count !== null &&\r\n overallStoreCards?.engagers?.count !== undefined\r\n ? overallStoreCards?.engagers?.count.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=\"overallStoreCards?.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=\"!overallStoreCards?.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\">{{overallStoreCards?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-3':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n \r\n \r\n <div class=\"headtext px-3 pt-3\">Demographics</div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n \r\n <div class=\"analysis-dropdown-wrapper\" #analysisDropdown>\r\n\r\n <!-- Selected box -->\r\n <div\r\n class=\"analysis-selected\"\r\n (click)=\"toggleAnalysisDropdown($event)\"\r\n >\r\n <span>{{ selectedZone | titlecase | slice:0:20 }}\r\n <ng-container *ngIf=\"selectedZone?.length > 20\">...</ng-container></span>\r\n <span class=\"arrow\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n<path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </div>\r\n\r\n <!-- Dropdown list -->\r\n <div\r\n class=\"analysis-dropdown\"\r\n *ngIf=\"showAnalysisDropdown\"\r\n >\r\n <div\r\n class=\"analysis-option\"\r\n *ngFor=\"let option of availableZones\"\r\n (click)=\"selectAnalysis(option)\"\r\n >\r\n {{ option.zoneName | titlecase}}\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\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 placement=\"top\"\r\n [ngbTooltip]=\"selectedZone?.length > 20 ? selectedZone : null\" class=\"subtext\">{{ selectedZone | titlecase | slice:0:20 }}\r\n <ng-container *ngIf=\"selectedZone?.length > 20\">...</ng-container> 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\" #genderPopup (click)=\"popupShow($event)\">\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\r\n \r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\" #genderPopup (click)=\"popupShow($event)\">\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 class=\"demo-popup\"\r\n *ngIf=\"showPopup\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <div class=\"popup-header\">\r\n <span>Demographic Analysis</span>\r\n <span class=\"close\" (click)=\"closePopup($event)\">\u2715</span>\r\n </div>\r\n\r\n <p class=\"popup-text\">\r\n Proceeding will redirect you to the Traffic Demographic Analysis\r\n page to view the full age-group distribution\r\n </p>\r\n\r\n <a class=\"view-link\" (click)=\"goToDemographicPage($event)\">\r\n View All\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 mt-1\" [ngClass]=\"clientData?.isNOB ? 'mb-0':'mb-3'\">\r\n <div class=\"ellipse1 border-0 mb-3 px-3\" [ngClass]=\"clientData?.isNOB ? 'py-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\" placement=\"top\"\r\n [ngbTooltip]=\"selectedZone?.length > 20 ? selectedZone : null\"> {{ selectedZone | titlecase | slice:0:20 }}\r\n <ng-container *ngIf=\"selectedZone?.length > 20\">...</ng-container> <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> Conversion </div>\r\n\r\n\r\n </div>\r\n <div *ngIf=\"clientData?.isNOB\" class=\" mt-1 badge badge-light-default mx-2\">\r\n <span><svg 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_16370_109671)\">\r\n<path d=\"M6 8V6M6 4H6.005M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<clipPath id=\"clip0_16370_109671\">\r\n<rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n</clipPath>\r\n</defs>\r\n</svg></span> <span class=\"mx-2\">NoB Conversion is displayed</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <section *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Gender Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv1\"></div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-5':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <div *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Age Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll2\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div class=\"card min-h-400px max-h-auto px-3\">\r\n <div class=\"my-3\">\r\n <h3 class=\"title pt-3\">Most Travelled Path</h3>\r\n <div *ngIf=\"!pathLoading && !pathNoData\" class=\"path-wrapper border border-1\">\r\n <div class=\"ellipse1 border-0 p-3\">\r\n <!-- SLIDE -->\r\n <div class=\"path-slide\">\r\n <span class=\"badge\">\r\n {{ paths[activePathIndex]?.label }}\r\n </span>\r\n \r\n <span class=\"percent\">\r\n {{ paths[activePathIndex]?.percent }}% of Customers Travel Path\r\n </span>\r\n \r\n <div class=\"path-text\">\r\n <ng-container *ngFor=\"let step of paths[activePathIndex]?.path; let last = last\">\r\n <span class=\"step\">{{ step | titlecase}}</span>\r\n <span class=\"arrowpath\" *ngIf=\"!last\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n \r\n \r\n <!-- DOTS -->\r\n <div class=\"dots col-6 mt-7\">\r\n <span *ngFor=\"let _ of paths; let i = index\" [class.active]=\"activePathIndex === i\"\r\n (click)=\"goTo(i)\">\r\n </span>\r\n </div>\r\n \r\n <!-- ARROWS -->\r\n <div class=\"mt-1 col-6 text-end\">\r\n <span class=\"cursor-pointer\" (click)=\"prev()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157019)\">\r\n <path\r\n d=\"M26.832 21.0003H15.1654M15.1654 21.0003L20.9987 15.167M15.1654 21.0003L20.9987 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157019\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157019\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157019\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"cursor-pointer\" (click)=\"next()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157023)\">\r\n <path\r\n d=\"M15.168 21.0003H26.8346M26.8346 21.0003L21.0013 15.167M26.8346 21.0003L21.0013 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157023\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157023\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157023\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n <ng-container *ngIf=\"pathLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"pathNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center p-5 flex-column\">\r\n <img class=\"img-src2\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Travelled Paths</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"my-3\">\r\n <div class=\"row\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.hotZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Hot Zone <span class=\"mx-2\"><svg placement=\"top\"\r\n [ngbTooltip]=\"hotZoneTooltip\"\r\n container=\"body\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #hotZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Hot Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the highest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n \r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.hotZoneDwell ?? '--'}} mins\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.coldZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Cold Zone <span class=\"mx-2\"><svg placement=\"top\" \r\n [ngbTooltip]=\"coldZoneTooltip\"\r\n container=\"body\" \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #coldZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Cold Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the lowest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.coldZoneDwell ?? '--'}} Sec\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\"\r\n (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\"\r\n class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Trolley' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Basket' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> -->\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col-md-4 mt-2\"\r\n *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\" placement=\"right\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path\r\n d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"onExportTraffic()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n \r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{\r\n item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n </div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:121px}#genderchartdiv1{width:100%;height:300px;margin-bottom:12%}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:240px}.agerangescroll2{overflow-y:auto;overflow-x:hidden;height:350px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-border{gap:8px;opacity:1;border-radius:12px;border-width:1px;padding:8px;border:1px solid #D0D5DD!important}.week-font{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.text-font{font-weight:600;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.path-wrapper{opacity:1;padding:8px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.percent-value{color:var(--Gray-500, #667085)!important;text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.text-normal{font-weight:500;font-size:12px;line-height:18px;letter-spacing:0%;text-align:center;color:#667085}.analysis-header{margin-bottom:16px}.analysis-select{width:200px;border-radius:10px}.analysis-title{font-weight:600;color:#1d2939}.highlight-card{background:linear-gradient(180deg,#e9f6ff,#f4fbff);border-radius:14px;padding:20px;margin-bottom:20px}.highlight-card h2{font-size:28px;margin:0}.highlight-card h2 span{font-size:16px;color:#667085}.highlight-card p{margin:6px 0 0;color:#344054}.gender-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.gender-card{border-width:1px;opacity:1;gap:6px;border-radius:12px;padding:8px;border:1px solid #EAECF0}.gender-card h3{font-size:24px;margin:0}.gender-card h3 span{font-size:14px;color:#667085}.gender-card p{margin:6px 0;font-weight:500}.age-pill{display:inline-block;background:#e6f4ff;color:#009bf3;padding:4px;border-radius:20px;font-size:12px;font-weight:500}.age-value{font-weight:600}.tooltip-title{font-weight:600;margin-bottom:4px}.tooltip-desc{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;color:#667085}.analysis-dropdown-wrapper{position:relative;width:230px}.analysis-selected{height:42px;padding:10px 14px;border-radius:12px;border:1px solid #D0D5DD;background:#fff;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:500}.analysis-selected:hover{border-color:#cbd5e1}.arrow{font-size:12px}.analysis-dropdown{position:absolute;top:48px;width:100%;height:300px;background:#fff;border-radius:12px;box-shadow:0 10px 25px #00000014;z-index:1000;overflow-x:hidden;overflow-y:auto}.analysis-option{padding:12px 14px;cursor:pointer;font-size:14px}.analysis-option:hover{background-color:#c4dffa}.gender-card{position:relative;cursor:pointer}.demo-popup{position:absolute;top:50px;right:0;width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 25px #00000026;padding:14px;z-index:1000}.popup-header{display:flex;justify-content:space-between;align-items:center;font-weight:600}.close{cursor:pointer;font-size:14px}.popup-text{font-size:13px;margin:10px 0;color:#6b7280}.view-link{color:#009bf3;font-weight:500;cursor:pointer;text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { 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.SlicePipe, name: "slice" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
|
|
1151
|
+
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: i1$1.NgbModal }, { token: i2.GlobalStateService }, { token: i4.Router }, { token: i4$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1152
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverallcardsComponent, selector: "lib-overallcards", host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "analysisDropdown", first: true, predicate: ["analysisDropdown"], descendants: true }, { propertyName: "genderPopup", first: true, predicate: ["genderPopup"], descendants: true }, { propertyName: "zoomPopup", first: true, predicate: ["zoomPopup"], descendants: true }], 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\">{{ overallStoreCards?.bounced?.count !== null &&\r\n overallStoreCards?.bounced?.count !== undefined\r\n ? overallStoreCards?.bounced?.count.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=\"overallStoreCards?.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=\"!overallStoreCards?.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\">{{overallStoreCards?.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\">{{ overallStoreCards?.engagers?.count !== null &&\r\n overallStoreCards?.engagers?.count !== undefined\r\n ? overallStoreCards?.engagers?.count.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=\"overallStoreCards?.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=\"!overallStoreCards?.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\">{{overallStoreCards?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-3':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n \r\n \r\n <div class=\"headtext px-3 pt-3\">Demographics</div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n \r\n <div class=\"analysis-dropdown-wrapper\" #analysisDropdown>\r\n\r\n <!-- Selected box -->\r\n <div\r\n class=\"analysis-selected\"\r\n (click)=\"toggleAnalysisDropdown($event)\"\r\n >\r\n <span>{{ selectedZone | titlecase | slice:0:20 }}\r\n <ng-container *ngIf=\"selectedZone?.length > 20\">...</ng-container></span>\r\n <span class=\"arrow\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n<path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </div>\r\n\r\n <!-- Dropdown list -->\r\n <div\r\n class=\"analysis-dropdown\"\r\n *ngIf=\"showAnalysisDropdown\"\r\n >\r\n <div\r\n class=\"analysis-option\"\r\n *ngFor=\"let option of availableZones\"\r\n (click)=\"selectAnalysis(option)\"\r\n >\r\n {{ option.zoneName | titlecase}}\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\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 placement=\"top\"\r\n [ngbTooltip]=\"selectedZone?.length > 20 ? selectedZone : null\" class=\"subtext\">{{ selectedZone | titlecase | slice:0:20 }}\r\n <ng-container *ngIf=\"selectedZone?.length > 20\">...</ng-container> 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\" #genderPopup (click)=\"popupShow($event)\">\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\r\n \r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\" #genderPopup (click)=\"popupShow($event)\">\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 class=\"demo-popup\"\r\n *ngIf=\"showPopup\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <div class=\"popup-header\">\r\n <span>Demographic Analysis</span>\r\n <span class=\"close\" (click)=\"closePopup($event)\">\u2715</span>\r\n </div>\r\n\r\n <p class=\"popup-text\">\r\n Proceeding will redirect you to the Traffic Demographic Analysis\r\n page to view the full age-group distribution\r\n </p>\r\n\r\n <a class=\"view-link\" (click)=\"goToDemographicPage($event)\">\r\n View All\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 mt-1\" [ngClass]=\"clientData?.isNOB ? 'mb-0':'mb-3'\">\r\n <div class=\"ellipse1 border-0 mb-3 px-3\" [ngClass]=\"clientData?.isNOB ? 'py-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\" placement=\"top\"\r\n [ngbTooltip]=\"selectedZone?.length > 20 ? selectedZone : null\"> {{ selectedZone | titlecase | slice:0:20 }}\r\n <ng-container *ngIf=\"selectedZone?.length > 20\">...</ng-container> <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> Conversion </div>\r\n\r\n\r\n </div>\r\n <div *ngIf=\"clientData?.isNOB\" class=\" mt-1 badge badge-light-default mx-2\">\r\n <span><svg 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_16370_109671)\">\r\n<path d=\"M6 8V6M6 4H6.005M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<clipPath id=\"clip0_16370_109671\">\r\n<rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n</clipPath>\r\n</defs>\r\n</svg></span> <span class=\"mx-2\">NoB Conversion is displayed</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <section *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Gender Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv1\"></div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-5':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <div *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Age Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll2\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div class=\"card min-h-400px max-h-auto px-3\">\r\n <div class=\"my-3\">\r\n <h3 class=\"title pt-3\">Most Travelled Path</h3>\r\n <div *ngIf=\"!pathLoading && !pathNoData\" class=\"path-wrapper border border-1\">\r\n <div class=\"ellipse1 border-0 p-3\">\r\n <!-- SLIDE -->\r\n <div class=\"path-slide\">\r\n <span class=\"badge\">\r\n {{ paths[activePathIndex]?.label }}\r\n </span>\r\n \r\n <span class=\"percent\">\r\n {{ paths[activePathIndex]?.percent }}% of Customers Travel Path\r\n </span>\r\n \r\n <div class=\"path-text\">\r\n <ng-container *ngFor=\"let step of paths[activePathIndex]?.path; let last = last\">\r\n <span class=\"step\">{{ step | titlecase}}</span>\r\n <span class=\"arrowpath\" *ngIf=\"!last\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n \r\n \r\n <!-- DOTS -->\r\n <div class=\"dots col-6 mt-7\">\r\n <span *ngFor=\"let _ of paths; let i = index\" [class.active]=\"activePathIndex === i\"\r\n (click)=\"goTo(i)\">\r\n </span>\r\n </div>\r\n \r\n <!-- ARROWS -->\r\n <div class=\"mt-1 col-6 text-end\">\r\n <span class=\"cursor-pointer\" (click)=\"prev()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157019)\">\r\n <path\r\n d=\"M26.832 21.0003H15.1654M15.1654 21.0003L20.9987 15.167M15.1654 21.0003L20.9987 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157019\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157019\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157019\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"cursor-pointer\" (click)=\"next()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157023)\">\r\n <path\r\n d=\"M15.168 21.0003H26.8346M26.8346 21.0003L21.0013 15.167M26.8346 21.0003L21.0013 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157023\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157023\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157023\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n <ng-container *ngIf=\"pathLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"pathNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center p-5 flex-column\">\r\n <img class=\"img-src2\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Travelled Paths</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"my-3\">\r\n <div class=\"row\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.hotZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Hot Zone <span class=\"mx-2\"><svg placement=\"top\"\r\n [ngbTooltip]=\"hotZoneTooltip\"\r\n container=\"body\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #hotZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Hot Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the highest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n \r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.hotZoneDwell ?? '--'}} mins\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.coldZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Cold Zone <span class=\"mx-2\"><svg placement=\"top\" \r\n [ngbTooltip]=\"coldZoneTooltip\"\r\n container=\"body\" \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #coldZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Cold Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the lowest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.coldZoneDwell ?? '--'}} Sec\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\"\r\n (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\"\r\n class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Trolley' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Basket' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> -->\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col-md-4 mt-2\"\r\n *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\" placement=\"right\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path\r\n d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"onExportTraffic()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n \r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{\r\n item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n<ng-template #zoomPopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n <h5 class=\"modal-title mb-2\">\r\n <span>Demographic Analysis </span>\r\n </h5>\r\n <div class=\"my-1\">\r\n\r\n <span class=\"text-muted\">Based on {{headerData?.date?.startDate | date:'dd MMM, yyyy'}} \u2013 {{headerData?.date?.endDate | date:'dd MMM, yyyy'}} </span>\r\n </div>\r\n <div *ngIf=\"demoloading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"demoNoData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"demo-img-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this Demographic Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"text-center\" id=\"demoGraphics\"></div>\r\n </div>\r\n\r\n \r\n </div>\r\n</ng-template>\r\n\r\n ", 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}.analysis-dropdown-wrapper{position:relative;width:230px}.analysis-selected{height:42px;padding:10px 14px;border-radius:12px;border:1px solid #D0D5DD;background:#fff;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:500}.analysis-selected:hover{border-color:#cbd5e1}.arrow{font-size:12px}.analysis-dropdown{position:absolute;top:48px;width:100%;height:300px;background:#fff;border-radius:12px;box-shadow:0 10px 25px #00000014;z-index:1000;overflow-x:hidden;overflow-y:auto}.analysis-option{padding:12px 14px;cursor:pointer;font-size:14px}.analysis-option:hover{background-color:#c4dffa}.gender-card{position:relative;cursor:pointer}.demo-popup{position:absolute;top:50px;right:0;width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 25px #00000026;padding:14px;z-index:1000}.popup-header{display:flex;justify-content:space-between;align-items:center;font-weight:600}.close{cursor:pointer;font-size:14px}.popup-text{font-size:13px;margin:10px 0;color:#6b7280}.view-link{color:#009bf3;font-weight:500;cursor:pointer;text-decoration:underline}#demoGraphics{width:100%;height:450px}\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: 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.SlicePipe, name: "slice" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
|
|
1014
1153
|
}
|
|
1015
1154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverallcardsComponent, decorators: [{
|
|
1016
1155
|
type: Component,
|
|
1017
|
-
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\">{{ overallStoreCards?.bounced?.count !== null &&\r\n overallStoreCards?.bounced?.count !== undefined\r\n ? overallStoreCards?.bounced?.count.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=\"overallStoreCards?.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=\"!overallStoreCards?.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\">{{overallStoreCards?.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\">{{ overallStoreCards?.engagers?.count !== null &&\r\n overallStoreCards?.engagers?.count !== undefined\r\n ? overallStoreCards?.engagers?.count.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=\"overallStoreCards?.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=\"!overallStoreCards?.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\">{{overallStoreCards?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-3':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n \r\n \r\n <div class=\"headtext px-3 pt-3\">Demographics</div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n \r\n <div class=\"analysis-dropdown-wrapper\" #analysisDropdown>\r\n\r\n <!-- Selected box -->\r\n <div\r\n class=\"analysis-selected\"\r\n (click)=\"toggleAnalysisDropdown($event)\"\r\n >\r\n <span>{{ selectedZone | titlecase | slice:0:20 }}\r\n <ng-container *ngIf=\"selectedZone?.length > 20\">...</ng-container></span>\r\n <span class=\"arrow\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n<path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </div>\r\n\r\n <!-- Dropdown list -->\r\n <div\r\n class=\"analysis-dropdown\"\r\n *ngIf=\"showAnalysisDropdown\"\r\n >\r\n <div\r\n class=\"analysis-option\"\r\n *ngFor=\"let option of availableZones\"\r\n (click)=\"selectAnalysis(option)\"\r\n >\r\n {{ option.zoneName | titlecase}}\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\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 placement=\"top\"\r\n [ngbTooltip]=\"selectedZone?.length > 20 ? selectedZone : null\" class=\"subtext\">{{ selectedZone | titlecase | slice:0:20 }}\r\n <ng-container *ngIf=\"selectedZone?.length > 20\">...</ng-container> 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\" #genderPopup (click)=\"popupShow($event)\">\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\r\n \r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\" #genderPopup (click)=\"popupShow($event)\">\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 class=\"demo-popup\"\r\n *ngIf=\"showPopup\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <div class=\"popup-header\">\r\n <span>Demographic Analysis</span>\r\n <span class=\"close\" (click)=\"closePopup($event)\">\u2715</span>\r\n </div>\r\n\r\n <p class=\"popup-text\">\r\n Proceeding will redirect you to the Traffic Demographic Analysis\r\n page to view the full age-group distribution\r\n </p>\r\n\r\n <a class=\"view-link\" (click)=\"goToDemographicPage($event)\">\r\n View All\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 mt-1\" [ngClass]=\"clientData?.isNOB ? 'mb-0':'mb-3'\">\r\n <div class=\"ellipse1 border-0 mb-3 px-3\" [ngClass]=\"clientData?.isNOB ? 'py-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\" placement=\"top\"\r\n [ngbTooltip]=\"selectedZone?.length > 20 ? selectedZone : null\"> {{ selectedZone | titlecase | slice:0:20 }}\r\n <ng-container *ngIf=\"selectedZone?.length > 20\">...</ng-container> <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> Conversion </div>\r\n\r\n\r\n </div>\r\n <div *ngIf=\"clientData?.isNOB\" class=\" mt-1 badge badge-light-default mx-2\">\r\n <span><svg 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_16370_109671)\">\r\n<path d=\"M6 8V6M6 4H6.005M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<clipPath id=\"clip0_16370_109671\">\r\n<rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n</clipPath>\r\n</defs>\r\n</svg></span> <span class=\"mx-2\">NoB Conversion is displayed</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <section *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Gender Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv1\"></div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-5':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <div *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Age Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll2\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div class=\"card min-h-400px max-h-auto px-3\">\r\n <div class=\"my-3\">\r\n <h3 class=\"title pt-3\">Most Travelled Path</h3>\r\n <div *ngIf=\"!pathLoading && !pathNoData\" class=\"path-wrapper border border-1\">\r\n <div class=\"ellipse1 border-0 p-3\">\r\n <!-- SLIDE -->\r\n <div class=\"path-slide\">\r\n <span class=\"badge\">\r\n {{ paths[activePathIndex]?.label }}\r\n </span>\r\n \r\n <span class=\"percent\">\r\n {{ paths[activePathIndex]?.percent }}% of Customers Travel Path\r\n </span>\r\n \r\n <div class=\"path-text\">\r\n <ng-container *ngFor=\"let step of paths[activePathIndex]?.path; let last = last\">\r\n <span class=\"step\">{{ step | titlecase}}</span>\r\n <span class=\"arrowpath\" *ngIf=\"!last\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n \r\n \r\n <!-- DOTS -->\r\n <div class=\"dots col-6 mt-7\">\r\n <span *ngFor=\"let _ of paths; let i = index\" [class.active]=\"activePathIndex === i\"\r\n (click)=\"goTo(i)\">\r\n </span>\r\n </div>\r\n \r\n <!-- ARROWS -->\r\n <div class=\"mt-1 col-6 text-end\">\r\n <span class=\"cursor-pointer\" (click)=\"prev()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157019)\">\r\n <path\r\n d=\"M26.832 21.0003H15.1654M15.1654 21.0003L20.9987 15.167M15.1654 21.0003L20.9987 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157019\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157019\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157019\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"cursor-pointer\" (click)=\"next()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157023)\">\r\n <path\r\n d=\"M15.168 21.0003H26.8346M26.8346 21.0003L21.0013 15.167M26.8346 21.0003L21.0013 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157023\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157023\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157023\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n <ng-container *ngIf=\"pathLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"pathNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center p-5 flex-column\">\r\n <img class=\"img-src2\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Travelled Paths</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"my-3\">\r\n <div class=\"row\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.hotZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Hot Zone <span class=\"mx-2\"><svg placement=\"top\"\r\n [ngbTooltip]=\"hotZoneTooltip\"\r\n container=\"body\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #hotZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Hot Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the highest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n \r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.hotZoneDwell ?? '--'}} mins\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.coldZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Cold Zone <span class=\"mx-2\"><svg placement=\"top\" \r\n [ngbTooltip]=\"coldZoneTooltip\"\r\n container=\"body\" \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #coldZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Cold Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the lowest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.coldZoneDwell ?? '--'}} Sec\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\"\r\n (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\"\r\n class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Trolley' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Basket' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> -->\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col-md-4 mt-2\"\r\n *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\" placement=\"right\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path\r\n d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"onExportTraffic()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n \r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{\r\n item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n </div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:121px}#genderchartdiv1{width:100%;height:300px;margin-bottom:12%}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:240px}.agerangescroll2{overflow-y:auto;overflow-x:hidden;height:350px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-border{gap:8px;opacity:1;border-radius:12px;border-width:1px;padding:8px;border:1px solid #D0D5DD!important}.week-font{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.text-font{font-weight:600;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.path-wrapper{opacity:1;padding:8px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.percent-value{color:var(--Gray-500, #667085)!important;text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.text-normal{font-weight:500;font-size:12px;line-height:18px;letter-spacing:0%;text-align:center;color:#667085}.analysis-header{margin-bottom:16px}.analysis-select{width:200px;border-radius:10px}.analysis-title{font-weight:600;color:#1d2939}.highlight-card{background:linear-gradient(180deg,#e9f6ff,#f4fbff);border-radius:14px;padding:20px;margin-bottom:20px}.highlight-card h2{font-size:28px;margin:0}.highlight-card h2 span{font-size:16px;color:#667085}.highlight-card p{margin:6px 0 0;color:#344054}.gender-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.gender-card{border-width:1px;opacity:1;gap:6px;border-radius:12px;padding:8px;border:1px solid #EAECF0}.gender-card h3{font-size:24px;margin:0}.gender-card h3 span{font-size:14px;color:#667085}.gender-card p{margin:6px 0;font-weight:500}.age-pill{display:inline-block;background:#e6f4ff;color:#009bf3;padding:4px;border-radius:20px;font-size:12px;font-weight:500}.age-value{font-weight:600}.tooltip-title{font-weight:600;margin-bottom:4px}.tooltip-desc{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;color:#667085}.analysis-dropdown-wrapper{position:relative;width:230px}.analysis-selected{height:42px;padding:10px 14px;border-radius:12px;border:1px solid #D0D5DD;background:#fff;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:500}.analysis-selected:hover{border-color:#cbd5e1}.arrow{font-size:12px}.analysis-dropdown{position:absolute;top:48px;width:100%;height:300px;background:#fff;border-radius:12px;box-shadow:0 10px 25px #00000014;z-index:1000;overflow-x:hidden;overflow-y:auto}.analysis-option{padding:12px 14px;cursor:pointer;font-size:14px}.analysis-option:hover{background-color:#c4dffa}.gender-card{position:relative;cursor:pointer}.demo-popup{position:absolute;top:50px;right:0;width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 25px #00000026;padding:14px;z-index:1000}.popup-header{display:flex;justify-content:space-between;align-items:center;font-weight:600}.close{cursor:pointer;font-size:14px}.popup-text{font-size:13px;margin:10px 0;color:#6b7280}.view-link{color:#009bf3;font-weight:500;cursor:pointer;text-decoration:underline}\n"] }]
|
|
1018
|
-
}], ctorParameters: () => [{ type: i0.NgZone }, { type: ZoneService }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i4.Router }, { type: i4$1.ToastService }], propDecorators: { analysisDropdown: [{
|
|
1156
|
+
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\">{{ overallStoreCards?.bounced?.count !== null &&\r\n overallStoreCards?.bounced?.count !== undefined\r\n ? overallStoreCards?.bounced?.count.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=\"overallStoreCards?.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=\"!overallStoreCards?.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\">{{overallStoreCards?.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\">{{ overallStoreCards?.engagers?.count !== null &&\r\n overallStoreCards?.engagers?.count !== undefined\r\n ? overallStoreCards?.engagers?.count.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=\"overallStoreCards?.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=\"!overallStoreCards?.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\">{{overallStoreCards?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-3':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n \r\n \r\n <div class=\"headtext px-3 pt-3\">Demographics</div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n \r\n <div class=\"analysis-dropdown-wrapper\" #analysisDropdown>\r\n\r\n <!-- Selected box -->\r\n <div\r\n class=\"analysis-selected\"\r\n (click)=\"toggleAnalysisDropdown($event)\"\r\n >\r\n <span>{{ selectedZone | titlecase | slice:0:20 }}\r\n <ng-container *ngIf=\"selectedZone?.length > 20\">...</ng-container></span>\r\n <span class=\"arrow\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n<path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </div>\r\n\r\n <!-- Dropdown list -->\r\n <div\r\n class=\"analysis-dropdown\"\r\n *ngIf=\"showAnalysisDropdown\"\r\n >\r\n <div\r\n class=\"analysis-option\"\r\n *ngFor=\"let option of availableZones\"\r\n (click)=\"selectAnalysis(option)\"\r\n >\r\n {{ option.zoneName | titlecase}}\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\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 placement=\"top\"\r\n [ngbTooltip]=\"selectedZone?.length > 20 ? selectedZone : null\" class=\"subtext\">{{ selectedZone | titlecase | slice:0:20 }}\r\n <ng-container *ngIf=\"selectedZone?.length > 20\">...</ng-container> 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\" #genderPopup (click)=\"popupShow($event)\">\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\r\n \r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\" #genderPopup (click)=\"popupShow($event)\">\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 class=\"demo-popup\"\r\n *ngIf=\"showPopup\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <div class=\"popup-header\">\r\n <span>Demographic Analysis</span>\r\n <span class=\"close\" (click)=\"closePopup($event)\">\u2715</span>\r\n </div>\r\n\r\n <p class=\"popup-text\">\r\n Proceeding will redirect you to the Traffic Demographic Analysis\r\n page to view the full age-group distribution\r\n </p>\r\n\r\n <a class=\"view-link\" (click)=\"goToDemographicPage($event)\">\r\n View All\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 mt-1\" [ngClass]=\"clientData?.isNOB ? 'mb-0':'mb-3'\">\r\n <div class=\"ellipse1 border-0 mb-3 px-3\" [ngClass]=\"clientData?.isNOB ? 'py-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\" placement=\"top\"\r\n [ngbTooltip]=\"selectedZone?.length > 20 ? selectedZone : null\"> {{ selectedZone | titlecase | slice:0:20 }}\r\n <ng-container *ngIf=\"selectedZone?.length > 20\">...</ng-container> <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> Conversion </div>\r\n\r\n\r\n </div>\r\n <div *ngIf=\"clientData?.isNOB\" class=\" mt-1 badge badge-light-default mx-2\">\r\n <span><svg 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_16370_109671)\">\r\n<path d=\"M6 8V6M6 4H6.005M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<clipPath id=\"clip0_16370_109671\">\r\n<rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n</clipPath>\r\n</defs>\r\n</svg></span> <span class=\"mx-2\">NoB Conversion is displayed</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <section *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Gender Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv1\"></div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-5':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <div *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Age Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll2\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div class=\"card min-h-400px max-h-auto px-3\">\r\n <div class=\"my-3\">\r\n <h3 class=\"title pt-3\">Most Travelled Path</h3>\r\n <div *ngIf=\"!pathLoading && !pathNoData\" class=\"path-wrapper border border-1\">\r\n <div class=\"ellipse1 border-0 p-3\">\r\n <!-- SLIDE -->\r\n <div class=\"path-slide\">\r\n <span class=\"badge\">\r\n {{ paths[activePathIndex]?.label }}\r\n </span>\r\n \r\n <span class=\"percent\">\r\n {{ paths[activePathIndex]?.percent }}% of Customers Travel Path\r\n </span>\r\n \r\n <div class=\"path-text\">\r\n <ng-container *ngFor=\"let step of paths[activePathIndex]?.path; let last = last\">\r\n <span class=\"step\">{{ step | titlecase}}</span>\r\n <span class=\"arrowpath\" *ngIf=\"!last\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n \r\n \r\n <!-- DOTS -->\r\n <div class=\"dots col-6 mt-7\">\r\n <span *ngFor=\"let _ of paths; let i = index\" [class.active]=\"activePathIndex === i\"\r\n (click)=\"goTo(i)\">\r\n </span>\r\n </div>\r\n \r\n <!-- ARROWS -->\r\n <div class=\"mt-1 col-6 text-end\">\r\n <span class=\"cursor-pointer\" (click)=\"prev()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157019)\">\r\n <path\r\n d=\"M26.832 21.0003H15.1654M15.1654 21.0003L20.9987 15.167M15.1654 21.0003L20.9987 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157019\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157019\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157019\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"cursor-pointer\" (click)=\"next()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157023)\">\r\n <path\r\n d=\"M15.168 21.0003H26.8346M26.8346 21.0003L21.0013 15.167M26.8346 21.0003L21.0013 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157023\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157023\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157023\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n <ng-container *ngIf=\"pathLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"pathNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center p-5 flex-column\">\r\n <img class=\"img-src2\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Travelled Paths</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"my-3\">\r\n <div class=\"row\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.hotZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Hot Zone <span class=\"mx-2\"><svg placement=\"top\"\r\n [ngbTooltip]=\"hotZoneTooltip\"\r\n container=\"body\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #hotZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Hot Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the highest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n \r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.hotZoneDwell ?? '--'}} mins\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.coldZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Cold Zone <span class=\"mx-2\"><svg placement=\"top\" \r\n [ngbTooltip]=\"coldZoneTooltip\"\r\n container=\"body\" \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #coldZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Cold Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the lowest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.coldZoneDwell ?? '--'}} Sec\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\"\r\n (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\"\r\n class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Trolley' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Basket' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> -->\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col-md-4 mt-2\"\r\n *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\" placement=\"right\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path\r\n d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"onExportTraffic()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n \r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{\r\n item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n<ng-template #zoomPopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n <h5 class=\"modal-title mb-2\">\r\n <span>Demographic Analysis </span>\r\n </h5>\r\n <div class=\"my-1\">\r\n\r\n <span class=\"text-muted\">Based on {{headerData?.date?.startDate | date:'dd MMM, yyyy'}} \u2013 {{headerData?.date?.endDate | date:'dd MMM, yyyy'}} </span>\r\n </div>\r\n <div *ngIf=\"demoloading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"demoNoData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"demo-img-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this Demographic Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"text-center\" id=\"demoGraphics\"></div>\r\n </div>\r\n\r\n \r\n </div>\r\n</ng-template>\r\n\r\n ", 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}.analysis-dropdown-wrapper{position:relative;width:230px}.analysis-selected{height:42px;padding:10px 14px;border-radius:12px;border:1px solid #D0D5DD;background:#fff;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:500}.analysis-selected:hover{border-color:#cbd5e1}.arrow{font-size:12px}.analysis-dropdown{position:absolute;top:48px;width:100%;height:300px;background:#fff;border-radius:12px;box-shadow:0 10px 25px #00000014;z-index:1000;overflow-x:hidden;overflow-y:auto}.analysis-option{padding:12px 14px;cursor:pointer;font-size:14px}.analysis-option:hover{background-color:#c4dffa}.gender-card{position:relative;cursor:pointer}.demo-popup{position:absolute;top:50px;right:0;width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 25px #00000026;padding:14px;z-index:1000}.popup-header{display:flex;justify-content:space-between;align-items:center;font-weight:600}.close{cursor:pointer;font-size:14px}.popup-text{font-size:13px;margin:10px 0;color:#6b7280}.view-link{color:#009bf3;font-weight:500;cursor:pointer;text-decoration:underline}#demoGraphics{width:100%;height:450px}\n"] }]
|
|
1157
|
+
}], ctorParameters: () => [{ type: i0.NgZone }, { type: ZoneService }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }, { type: i2.GlobalStateService }, { type: i4.Router }, { type: i4$1.ToastService }], propDecorators: { analysisDropdown: [{
|
|
1019
1158
|
type: ViewChild,
|
|
1020
1159
|
args: ['analysisDropdown']
|
|
1021
1160
|
}], genderPopup: [{
|
|
@@ -1024,6 +1163,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1024
1163
|
}], onDocumentClick: [{
|
|
1025
1164
|
type: HostListener,
|
|
1026
1165
|
args: ['document:click', ['$event']]
|
|
1166
|
+
}], zoomPopup: [{
|
|
1167
|
+
type: ViewChild,
|
|
1168
|
+
args: ["zoomPopup"]
|
|
1027
1169
|
}] } });
|
|
1028
1170
|
|
|
1029
1171
|
class ZoneJourneyComponent {
|