tango-app-ui-analyse-zone 3.7.1-beta.27 → 3.7.1-beta.29

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.
Files changed (8) hide show
  1. package/esm2022/lib/components/customer-journey-chart/customer-journey-chart.component.mjs +3 -3
  2. package/esm2022/lib/components/overallcards/overallcards.component.mjs +18 -20
  3. package/esm2022/lib/components/zone-journey/zone-journey.component.mjs +3 -3
  4. package/fesm2022/tango-app-ui-analyse-zone.mjs +21 -23
  5. package/fesm2022/tango-app-ui-analyse-zone.mjs.map +1 -1
  6. package/lib/components/overallcards/overallcards.component.d.ts +0 -1
  7. package/lib/components/zone-journey/zone-journey.component.d.ts +1 -1
  8. package/package.json +1 -1
package/fesm2022/tango-app-ui-analyse-zone.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Injectable, Component, HostListener, ViewChild, Input, ElementRef, EventEmitter, Output, forwardRef, NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
3
- import { BehaviorSubject, takeUntil, Subject, throwError, debounceTime, interval, startWith as startWith$1, skip as skip$1 } from 'rxjs';
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';
6
6
  import * as XLSX from 'xlsx';
@@ -880,7 +880,7 @@ class OverallcardsComponent {
880
880
  this.activePathIndex = 0;
881
881
  this.pathNoData = false;
882
882
  // 🔥 START AUTO CAROUSEL (ONLY HERE)
883
- this.startAutoCarousel();
883
+ // this.startAutoCarousel();
884
884
  },
885
885
  error: () => {
886
886
  this.paths = [];
@@ -900,17 +900,16 @@ class OverallcardsComponent {
900
900
  goTo(index) {
901
901
  this.activePathIndex = index;
902
902
  }
903
- startAutoCarousel() {
904
- if (this.paths.length <= 1)
905
- return;
906
- interval(3000) // ⏱ 3 seconds
907
- .pipe(takeUntil$1(this.autoSlideStop$), takeUntil$1(this.destroy$))
908
- .subscribe(() => {
909
- this.activePathIndex =
910
- (this.activePathIndex + 1) % this.paths.length;
911
- this.cd.detectChanges();
912
- });
913
- }
903
+ // startAutoCarousel() {
904
+ // if (this.paths.length <= 1) return;
905
+ // interval(3000) // ⏱ 3 seconds
906
+ // .pipe(takeUntil(this.autoSlideStop$), takeUntil(this.destroy$))
907
+ // .subscribe(() => {
908
+ // this.activePathIndex =
909
+ // (this.activePathIndex + 1) % this.paths.length;
910
+ // this.cd.detectChanges();
911
+ // });
912
+ // }
914
913
  availableZones = [];
915
914
  selectedZone = '';
916
915
  getAvailableZones() {
@@ -925,11 +924,11 @@ class OverallcardsComponent {
925
924
  if (res && res?.code === 200) {
926
925
  this.availableZones = (res.data.availableZoneData || []).filter((zone) => zone.zoneName?.toLowerCase() !== 'overall store');
927
926
  // this.zoneV2Service.setZones(this.availableZones);
928
- this.cd.detectChanges();
929
- if (this.availableZones.length) {
927
+ if (this.availableZones?.length) {
930
928
  this.selectedZone = this.availableZones[0].zoneName;
931
- this.getAnalyseZone();
932
929
  }
930
+ this.getAnalyseZone();
931
+ this.cd.detectChanges();
933
932
  }
934
933
  else {
935
934
  this.availableZones = [];
@@ -962,7 +961,6 @@ class OverallcardsComponent {
962
961
  next: (res) => {
963
962
  if (res && res?.code === 200) {
964
963
  this.getAnalyseZoneData = res?.data?.analysisData;
965
- console.log("Analyse Zone Data:", this.getAnalyseZoneData);
966
964
  }
967
965
  else {
968
966
  this.getAnalyseZoneData = [];
@@ -974,11 +972,11 @@ class OverallcardsComponent {
974
972
  });
975
973
  }
976
974
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverallcardsComponent, deps: [{ token: i0.NgZone }, { token: ZoneService }, { token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
977
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverallcardsComponent, selector: "lib-overallcards", ngImport: i0, template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4 h-auto\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.overallFootfall?.count !== null &&\r\n overallStoreCards?.overallFootfall?.count !== undefined\r\n ? overallStoreCards?.overallFootfall?.count\r\n : '--'\r\n }}</div>\r\n\r\n <div class=\"subtext\">Overall Store Footfall</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.overallFootfall?.PreviousData}}%</span> vs\r\n previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='daily' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('daily')\">1D\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='weekly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('weekly')\">1W\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='monthly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('monthly')\">\r\n 1M</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getBouncedCardData?.card?.bounced?.rate !== null &&\r\n getBouncedCardData?.card?.bounced?.rate !== undefined\r\n ? getBouncedCardData?.card?.bounced?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Bounced Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{getBouncedCardData?.data?.bounced?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getEngagersCardData?.card?.engagers?.rate !== null &&\r\n getEngagersCardData?.card?.engagers?.rate !== undefined\r\n ? getEngagersCardData?.card?.engagers?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Engagers Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\">\r\n <span class=\"percent-value\">{{getEngagersCardData?.data?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-3':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n \r\n \r\n <div class=\"headtext px-3 pt-3\">Demographics</div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n <select class=\"form-select analysis-select\" [(ngModel)]=\"selectedZone\" (change)=\"onZoneChange($event)\">\r\n <option *ngFor=\"let zone of availableZones\" [value]=\"zone.zoneName\">\r\n {{ zone.zoneName | titlecase }}\r\n </option>\r\n </select>\r\n <h4 class=\"analysis-title\">Analysis</h4>\r\n </div>\r\n <div class=\"ellipse1 border-0 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.zoneTotal ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.zonePercentage}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial Zone Footfall</div>\r\n </div>\r\n <div class=\"gender-cards py-3 mt-1\">\r\n <!-- Male -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.male ?? '--'}} <span>({{getAnalyseZoneData?.malePercentage ?? '--'}}%)</span></h3>\r\n <p>Male</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.female ?? '--'}} <span>({{getAnalyseZoneData?.femalePercentage ?? '--'}}%)</span></h3>\r\n <p>Female</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 mb-3 mt-1\">\r\n <div class=\"ellipse1 border-0 mb-3 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.conversionCount ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.conversionCountPercentage ?? '--'}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> Conversion </div>\r\n\r\n <div *ngIf=\"clientData?.isNOB\" class=\"mt-3\">\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> NoB Conversion is displayed\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <section *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Gender Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv1\"></div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-5':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <div *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Age Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll2\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div class=\"card min-h-400px max-h-auto px-3\">\r\n <div class=\"my-3\">\r\n <h3 class=\"title pt-3\">Most Travelled Path</h3>\r\n <div *ngIf=\"!pathLoading && !pathNoData\" class=\"path-wrapper border border-1\">\r\n <div class=\"ellipse1 border-0 p-3\">\r\n <!-- SLIDE -->\r\n <div class=\"path-slide\">\r\n <span class=\"badge\">\r\n {{ paths[activePathIndex]?.label }}\r\n </span>\r\n \r\n <span class=\"percent\">\r\n {{ paths[activePathIndex]?.percent }}% of Customers Travel Path\r\n </span>\r\n \r\n <div class=\"path-text\">\r\n <ng-container *ngFor=\"let step of paths[activePathIndex]?.path; let last = last\">\r\n <span class=\"step\">{{ step | titlecase}}</span>\r\n <span class=\"arrowpath\" *ngIf=\"!last\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n \r\n \r\n <!-- DOTS -->\r\n <div class=\"dots col-6 mt-7\">\r\n <span *ngFor=\"let _ of paths; let i = index\" [class.active]=\"activePathIndex === i\"\r\n (click)=\"goTo(i)\">\r\n </span>\r\n </div>\r\n \r\n <!-- ARROWS -->\r\n <div class=\"mt-1 col-6 text-end\">\r\n <span class=\"cursor-pointer\" (click)=\"prev()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157019)\">\r\n <path\r\n d=\"M26.832 21.0003H15.1654M15.1654 21.0003L20.9987 15.167M15.1654 21.0003L20.9987 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157019\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157019\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157019\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"cursor-pointer\" (click)=\"next()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157023)\">\r\n <path\r\n d=\"M15.168 21.0003H26.8346M26.8346 21.0003L21.0013 15.167M26.8346 21.0003L21.0013 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157023\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157023\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157023\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n <ng-container *ngIf=\"pathLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"pathNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center p-5 flex-column\">\r\n <img class=\"img-src2\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Travelled Paths</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"my-3\">\r\n <div class=\"row\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.hotZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Hot Zone <span class=\"mx-2\"><svg placement=\"top\"\r\n [ngbTooltip]=\"hotZoneTooltip\"\r\n container=\"body\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #hotZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Hot Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the highest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n \r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.hotZoneDwell ?? '--'}} mins\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.coldZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Cold Zone <span class=\"mx-2\"><svg placement=\"top\" \r\n [ngbTooltip]=\"coldZoneTooltip\"\r\n container=\"body\" \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #coldZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Cold Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the lowest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.coldZoneDwell ?? '--'}} Sec\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\"\r\n (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\"\r\n class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Trolley' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Basket' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> -->\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col-md-4 mt-2\"\r\n *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\" placement=\"right\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path\r\n d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"onExportTraffic()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n \r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{\r\n item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n </div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:121px}#genderchartdiv1{width:100%;height:300px;margin-bottom:12%}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:240px}.agerangescroll2{overflow-y:auto;overflow-x:hidden;height:350px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-border{gap:8px;opacity:1;border-radius:12px;border-width:1px;padding:8px;border:1px solid #D0D5DD!important}.week-font{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.text-font{font-weight:600;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.path-wrapper{opacity:1;padding:8px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.percent-value{color:var(--Gray-500, #667085)!important;text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.text-normal{font-weight:500;font-size:12px;line-height:18px;letter-spacing:0%;text-align:center;color:#667085}.analysis-header{margin-bottom:16px}.analysis-select{width:200px;border-radius:10px}.analysis-title{font-weight:600;color:#1d2939}.highlight-card{background:linear-gradient(180deg,#e9f6ff,#f4fbff);border-radius:14px;padding:20px;margin-bottom:20px}.highlight-card h2{font-size:28px;margin:0}.highlight-card h2 span{font-size:16px;color:#667085}.highlight-card p{margin:6px 0 0;color:#344054}.gender-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.gender-card{border-width:1px;opacity:1;gap:6px;border-radius:12px;padding:8px;border:1px solid #EAECF0}.gender-card h3{font-size:24px;margin:0}.gender-card h3 span{font-size:14px;color:#667085}.gender-card p{margin:6px 0;font-weight:500}.age-pill{display:inline-block;background:#e6f4ff;color:#009bf3;padding:4px;border-radius:20px;font-size:12px;font-weight:500}.age-value{font-weight:600}.tooltip-title{font-weight:600;margin-bottom:4px}.tooltip-desc{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;color:#667085}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
975
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverallcardsComponent, selector: "lib-overallcards", ngImport: i0, template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4 h-auto\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.overallFootfall?.count !== null &&\r\n overallStoreCards?.overallFootfall?.count !== undefined\r\n ? overallStoreCards?.overallFootfall?.count\r\n : '--'\r\n }}</div>\r\n\r\n <div class=\"subtext\">Overall Store Footfall</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.overallFootfall?.PreviousData}}%</span> vs\r\n previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='daily' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('daily')\">1D\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='weekly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('weekly')\">1W\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='monthly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('monthly')\">\r\n 1M</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getBouncedCardData?.card?.bounced?.rate !== null &&\r\n getBouncedCardData?.card?.bounced?.rate !== undefined\r\n ? getBouncedCardData?.card?.bounced?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Bounced Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{getBouncedCardData?.data?.bounced?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getEngagersCardData?.card?.engagers?.rate !== null &&\r\n getEngagersCardData?.card?.engagers?.rate !== undefined\r\n ? getEngagersCardData?.card?.engagers?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Engagers Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\">\r\n <span class=\"percent-value\">{{getEngagersCardData?.data?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-3':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n \r\n \r\n <div class=\"headtext px-3 pt-3\">Demographics</div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n <select class=\"form-select analysis-select\" [(ngModel)]=\"selectedZone\" (change)=\"onZoneChange($event)\">\r\n <option *ngFor=\"let zone of availableZones\" [value]=\"zone.zoneName\">\r\n {{ zone.zoneName | titlecase }}\r\n </option>\r\n </select>\r\n <h4 class=\"analysis-title\">Analysis</h4>\r\n </div>\r\n <div class=\"ellipse1 border-0 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.zoneTotal ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.zonePercentage}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial Zone Footfall</div>\r\n </div>\r\n <div class=\"gender-cards py-3 mt-1\">\r\n <!-- Male -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.male ?? '--'}} <span>({{getAnalyseZoneData?.malePercentage ?? '--'}}%)</span></h3>\r\n <p>Male</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.female ?? '--'}} <span>({{getAnalyseZoneData?.femalePercentage ?? '--'}}%)</span></h3>\r\n <p>Female</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 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\">Trial <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> 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}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
978
976
  }
979
977
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverallcardsComponent, decorators: [{
980
978
  type: Component,
981
- args: [{ selector: "lib-overallcards", template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4 h-auto\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.overallFootfall?.count !== null &&\r\n overallStoreCards?.overallFootfall?.count !== undefined\r\n ? overallStoreCards?.overallFootfall?.count\r\n : '--'\r\n }}</div>\r\n\r\n <div class=\"subtext\">Overall Store Footfall</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.overallFootfall?.PreviousData}}%</span> vs\r\n previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='daily' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('daily')\">1D\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='weekly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('weekly')\">1W\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='monthly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('monthly')\">\r\n 1M</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getBouncedCardData?.card?.bounced?.rate !== null &&\r\n getBouncedCardData?.card?.bounced?.rate !== undefined\r\n ? getBouncedCardData?.card?.bounced?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Bounced Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{getBouncedCardData?.data?.bounced?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getEngagersCardData?.card?.engagers?.rate !== null &&\r\n getEngagersCardData?.card?.engagers?.rate !== undefined\r\n ? getEngagersCardData?.card?.engagers?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Engagers Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\">\r\n <span class=\"percent-value\">{{getEngagersCardData?.data?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-3':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n \r\n \r\n <div class=\"headtext px-3 pt-3\">Demographics</div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n <select class=\"form-select analysis-select\" [(ngModel)]=\"selectedZone\" (change)=\"onZoneChange($event)\">\r\n <option *ngFor=\"let zone of availableZones\" [value]=\"zone.zoneName\">\r\n {{ zone.zoneName | titlecase }}\r\n </option>\r\n </select>\r\n <h4 class=\"analysis-title\">Analysis</h4>\r\n </div>\r\n <div class=\"ellipse1 border-0 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.zoneTotal ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.zonePercentage}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial Zone Footfall</div>\r\n </div>\r\n <div class=\"gender-cards py-3 mt-1\">\r\n <!-- Male -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.male ?? '--'}} <span>({{getAnalyseZoneData?.malePercentage ?? '--'}}%)</span></h3>\r\n <p>Male</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.female ?? '--'}} <span>({{getAnalyseZoneData?.femalePercentage ?? '--'}}%)</span></h3>\r\n <p>Female</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 mb-3 mt-1\">\r\n <div class=\"ellipse1 border-0 mb-3 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.conversionCount ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.conversionCountPercentage ?? '--'}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> Conversion </div>\r\n\r\n <div *ngIf=\"clientData?.isNOB\" class=\"mt-3\">\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> NoB Conversion is displayed\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n <section *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Gender Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv1\"></div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-5':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <div *ngIf=\"headerData?.client !== '478'\">\r\n <div class=\"card\">\r\n <div class=\"headtext p-3\">Age Analysis</div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll2\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\"> \r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div class=\"card min-h-400px max-h-auto px-3\">\r\n <div class=\"my-3\">\r\n <h3 class=\"title pt-3\">Most Travelled Path</h3>\r\n <div *ngIf=\"!pathLoading && !pathNoData\" class=\"path-wrapper border border-1\">\r\n <div class=\"ellipse1 border-0 p-3\">\r\n <!-- SLIDE -->\r\n <div class=\"path-slide\">\r\n <span class=\"badge\">\r\n {{ paths[activePathIndex]?.label }}\r\n </span>\r\n \r\n <span class=\"percent\">\r\n {{ paths[activePathIndex]?.percent }}% of Customers Travel Path\r\n </span>\r\n \r\n <div class=\"path-text\">\r\n <ng-container *ngFor=\"let step of paths[activePathIndex]?.path; let last = last\">\r\n <span class=\"step\">{{ step | titlecase}}</span>\r\n <span class=\"arrowpath\" *ngIf=\"!last\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n \r\n \r\n <!-- DOTS -->\r\n <div class=\"dots col-6 mt-7\">\r\n <span *ngFor=\"let _ of paths; let i = index\" [class.active]=\"activePathIndex === i\"\r\n (click)=\"goTo(i)\">\r\n </span>\r\n </div>\r\n \r\n <!-- ARROWS -->\r\n <div class=\"mt-1 col-6 text-end\">\r\n <span class=\"cursor-pointer\" (click)=\"prev()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157019)\">\r\n <path\r\n d=\"M26.832 21.0003H15.1654M15.1654 21.0003L20.9987 15.167M15.1654 21.0003L20.9987 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157019\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157019\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157019\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"cursor-pointer\" (click)=\"next()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157023)\">\r\n <path\r\n d=\"M15.168 21.0003H26.8346M26.8346 21.0003L21.0013 15.167M26.8346 21.0003L21.0013 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157023\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157023\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157023\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n <ng-container *ngIf=\"pathLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"pathNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center p-5 flex-column\">\r\n <img class=\"img-src2\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Travelled Paths</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"my-3\">\r\n <div class=\"row\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.hotZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Hot Zone <span class=\"mx-2\"><svg placement=\"top\"\r\n [ngbTooltip]=\"hotZoneTooltip\"\r\n container=\"body\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #hotZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Hot Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the highest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n \r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.hotZoneDwell ?? '--'}} mins\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.coldZone | titlecase}}</div>\r\n \r\n <div class=\"subtext\">Cold Zone <span class=\"mx-2\"><svg placement=\"top\" \r\n [ngbTooltip]=\"coldZoneTooltip\"\r\n container=\"body\" \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #coldZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Cold Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the lowest dwell time compared to all other zones\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.coldZoneDwell ?? '--'}} Sec\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\"\r\n (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\"\r\n class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Trolley' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Basket' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> -->\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col-md-4 mt-2\"\r\n *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\" placement=\"right\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path\r\n d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"onExportTraffic()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n \r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{\r\n item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n </div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:121px}#genderchartdiv1{width:100%;height:300px;margin-bottom:12%}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:240px}.agerangescroll2{overflow-y:auto;overflow-x:hidden;height:350px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-border{gap:8px;opacity:1;border-radius:12px;border-width:1px;padding:8px;border:1px solid #D0D5DD!important}.week-font{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.text-font{font-weight:600;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.path-wrapper{opacity:1;padding:8px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.percent-value{color:var(--Gray-500, #667085)!important;text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.text-normal{font-weight:500;font-size:12px;line-height:18px;letter-spacing:0%;text-align:center;color:#667085}.analysis-header{margin-bottom:16px}.analysis-select{width:200px;border-radius:10px}.analysis-title{font-weight:600;color:#1d2939}.highlight-card{background:linear-gradient(180deg,#e9f6ff,#f4fbff);border-radius:14px;padding:20px;margin-bottom:20px}.highlight-card h2{font-size:28px;margin:0}.highlight-card h2 span{font-size:16px;color:#667085}.highlight-card p{margin:6px 0 0;color:#344054}.gender-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.gender-card{border-width:1px;opacity:1;gap:6px;border-radius:12px;padding:8px;border:1px solid #EAECF0}.gender-card h3{font-size:24px;margin:0}.gender-card h3 span{font-size:14px;color:#667085}.gender-card p{margin:6px 0;font-weight:500}.age-pill{display:inline-block;background:#e6f4ff;color:#009bf3;padding:4px;border-radius:20px;font-size:12px;font-weight:500}.age-value{font-weight:600}.tooltip-title{font-weight:600;margin-bottom:4px}.tooltip-desc{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;color:#667085}\n"] }]
979
+ args: [{ selector: "lib-overallcards", template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4 h-auto\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.overallFootfall?.count !== null &&\r\n overallStoreCards?.overallFootfall?.count !== undefined\r\n ? overallStoreCards?.overallFootfall?.count\r\n : '--'\r\n }}</div>\r\n\r\n <div class=\"subtext\">Overall Store Footfall</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.overallFootfall?.PreviousData}}%</span> vs\r\n previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='daily' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('daily')\">1D\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='weekly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('weekly')\">1W\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='monthly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('monthly')\">\r\n 1M</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getBouncedCardData?.card?.bounced?.rate !== null &&\r\n getBouncedCardData?.card?.bounced?.rate !== undefined\r\n ? getBouncedCardData?.card?.bounced?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Bounced Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{getBouncedCardData?.data?.bounced?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getEngagersCardData?.card?.engagers?.rate !== null &&\r\n getEngagersCardData?.card?.engagers?.rate !== undefined\r\n ? getEngagersCardData?.card?.engagers?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Engagers Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\">\r\n <span class=\"percent-value\">{{getEngagersCardData?.data?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div [ngClass]=\"headerData?.client === '478' ? 'col-3':'col-4'\" class=\"h-300px\">\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n <section *ngIf=\"headerData?.client === '478'\">\r\n\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n \r\n \r\n <div class=\"headtext px-3 pt-3\">Demographics</div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n <select class=\"form-select analysis-select\" [(ngModel)]=\"selectedZone\" (change)=\"onZoneChange($event)\">\r\n <option *ngFor=\"let zone of availableZones\" [value]=\"zone.zoneName\">\r\n {{ zone.zoneName | titlecase }}\r\n </option>\r\n </select>\r\n <h4 class=\"analysis-title\">Analysis</h4>\r\n </div>\r\n <div class=\"ellipse1 border-0 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.zoneTotal ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.zonePercentage}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial Zone Footfall</div>\r\n </div>\r\n <div class=\"gender-cards py-3 mt-1\">\r\n <!-- Male -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.male ?? '--'}} <span>({{getAnalyseZoneData?.malePercentage ?? '--'}}%)</span></h3>\r\n <p>Male</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.female ?? '--'}} <span>({{getAnalyseZoneData?.femalePercentage ?? '--'}}%)</span></h3>\r\n <p>Female</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age | titlecase}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n <path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n <path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n <circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n <circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n </svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 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\">Trial <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> 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}\n"] }]
982
980
  }], ctorParameters: () => [{ type: i0.NgZone }, { type: ZoneService }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i4.ToastService }] });
983
981
 
984
982
  class ZoneJourneyComponent {
@@ -1447,11 +1445,11 @@ class ZoneJourneyComponent {
1447
1445
  this.router.navigate(["/manage/traffic/nob"]);
1448
1446
  }
1449
1447
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneJourneyComponent, deps: [{ token: ZoneService }, { token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i4$1.Router }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
1450
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneJourneyComponent, selector: "lib-zone-journey", inputs: { headerData: "headerData", clientData: "clientData" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "zoneDropdown", first: true, predicate: ["zoneDropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- zone-journey.component.html -->\r\n<div class=\"card my-card mx-1 my-2\">\r\n <div class=\"card-header px-0 mx-5 border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-1\">Zone-Based Shopper Analysis </span>\r\n <span class=\"text-sub mb-1\">Understand your Shoppers journey from one zone to another\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n<div class=\"zone-dropdown me-2\" #zoneDropdown\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- BUTTON -->\r\n <button [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn btn-outline w-100 me-2 d-flex justify-content-between\"\r\n (click)=\"toggleDropdown($event)\"\r\n >\r\n Show / Hide Zone\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n<path d=\"M1 1L6 6L11 1\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </button>\r\n\r\n <!-- DROPDOWN -->\r\n <div *ngIf=\"showDropdown\" class=\"dropdown-panel h-300px d-flex flex-column\">\r\n\r\n <!-- HEADER (fixed) -->\r\n <div class=\"dropdown-header px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"dropdownSearchText\"\r\n (input)=\"filterZones()\"\r\n />\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 mb-2 px-2\">\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected()\"\r\n (change)=\"toggleSelectAll($event)\"\r\n /></span>\r\n <span class=\"ms-2\">Select All</span>\r\n </div>\r\n <!-- BODY (scrollable list) -->\r\n <div class=\"dropdown-body flex-grow-1 overflow-auto px-2\">\r\n <div\r\n class=\"zone-item\"\r\n *ngFor=\"let zone of tempFilteredZones\"\r\n >\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"zone.checked\"\r\n /></span>\r\n <span class=\"ms-2\">{{ zone.name }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- FOOTER (fixed) -->\r\n <div class=\"dropdown-footer d-flex justify-content-end gap-2 p-2 border-top\">\r\n <button class=\"btn btn-sm btn-outline w-50\" (click)=\"resetZones()\">\r\n Reset\r\n </button>\r\n <button class=\"btn btn-sm btn-primary w-50\" (click)=\"applyZones()\">\r\n Apply\r\n </button>\r\n </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n\r\n <button type=\"button\" (click)=\"getZoneJourneyExport()\" [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-3 mx-3\">\r\n <div class=\"bordered-box w-50 me-2 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n height=\"21\" viewBox=\"0 0 19 21\" fill=\"none\">\r\n <path\r\n d=\"M0.5 16.3258H6V17.5758C6 18.3051 5.71027 19.0046 5.19454 19.5203C4.67882 20.036 3.97935 20.3258 3.25 20.3258C2.52065 20.3258 1.82118 20.036 1.30546 19.5203C0.789731 19.0046 0.5 18.3051 0.5 17.5758V16.3258ZM4.5 4.44576C6.5 4.44576 7.5 7.32576 7.5 9.32576C7.5 10.3258 7 11.3258 6.5 12.8258L6 14.3258H0.5C0.5 13.3258 0 11.8258 0 9.32576C0 6.82576 1.998 4.44576 4.5 4.44576ZM16.554 12.4238L16.337 13.6548C16.2023 14.3654 15.7931 14.9943 15.198 15.4054C14.6029 15.8165 13.8698 15.9765 13.1576 15.8509C12.4453 15.7254 11.8111 15.3242 11.3925 14.7344C10.9739 14.1446 10.8045 13.4136 10.921 12.6998L11.137 11.4698L16.554 12.4238ZM14.678 0.0307624C17.142 0.464762 18.696 3.15576 18.262 5.61776C17.828 8.07976 17.075 9.46976 16.902 10.4548L11.485 9.49976L11.253 7.93576C11.021 6.37176 10.703 5.29976 10.876 4.31576C11.223 2.34576 12.708 -0.316238 14.678 0.0307624Z\"\r\n fill=\"#1D2939\" />\r\n </svg>Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{zoneShopperAnalysis?.OverallFootfall ?? '--'}}</span> <span class=\"text-perc ms-1\">({{zoneShopperAnalysis?.ConversionPercent ?? '--'}} %)</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"text-title py-2\">\r\n<svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> NoB :</span>\r\n <span *ngIf=\"!this.clientData?.isNOB\" class=\"text-title py-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n<path d=\"M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M17 11L19 13L23 9M12.5 7C12.5 9.20914 10.7091 11 8.5 11C6.29086 11 4.5 9.20914 4.5 7C4.5 4.79086 6.29086 3 8.5 3C10.7091 3 12.5 4.79086 12.5 7Z\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\">\r\n <svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row gx-0 p-3\">\r\n <div [ngClass]=\"isMinimized ? 'col-12' : 'col-8'\"\r\n [style.height.px]=\"zoneChartNoData ? 300 : (isMinimized ? 650 : 550)\">\r\n <ng-container *ngIf=\"zoneChartLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneChartNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!zoneChartNoData && !zoneChartLoading\" id=\"chartdiv\" style=\"width: 100%; height: 100%;\"></div>\r\n </div>\r\n\r\n <div [ngClass]=\"isMinimized ? 'zone-floating' : 'col-4'\" [style.top.px]=\"isMinimized ? floatingPos.top : null\"\r\n [style.left.px]=\"isMinimized ? floatingPos.left : null\" (mousedown)=\"startDrag($event)\">\r\n <!-- (mousedown)=\"startDrag($event)\" -->\r\n <ng-container *ngIf=\"zoneCardLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneCardNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-conatiner *ngIf=\"!zoneCardNoData && !zoneCardLoading\" class=\"card \">\r\n <div class=\"card-header border-0 px-4\"\r\n [ngClass]=\"isMinimized ?'bg-secondary min-h-30px': 'bg-light-primary min-h-45px mb-2'\">\r\n <div class=\"card-title align-items-start\"><span *ngIf=\"isMinimized\" class=\"me-2 mb-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9 20C8.45 20 7.97917 19.8042 7.5875 19.4125C7.19583 19.0208 7 18.55 7 18C7 17.45 7.19583 16.9792 7.5875 16.5875C7.97917 16.1958 8.45 16 9 16C9.55 16 10.0208 16.1958 10.4125 16.5875C10.8042 16.9792 11 17.45 11 18C11 18.55 10.8042 19.0208 10.4125 19.4125C10.0208 19.8042 9.55 20 9 20ZM15 20C14.45 20 13.9792 19.8042 13.5875 19.4125C13.1958 19.0208 13 18.55 13 18C13 17.45 13.1958 16.9792 13.5875 16.5875C13.9792 16.1958 14.45 16 15 16C15.55 16 16.0208 16.1958 16.4125 16.5875C16.8042 16.9792 17 17.45 17 18C17 18.55 16.8042 19.0208 16.4125 19.4125C16.0208 19.8042 15.55 20 15 20ZM9 14C8.45 14 7.97917 13.8042 7.5875 13.4125C7.19583 13.0208 7 12.55 7 12C7 11.45 7.19583 10.9792 7.5875 10.5875C7.97917 10.1958 8.45 10 9 10C9.55 10 10.0208 10.1958 10.4125 10.5875C10.8042 10.9792 11 11.45 11 12C11 12.55 10.8042 13.0208 10.4125 13.4125C10.0208 13.8042 9.55 14 9 14ZM15 14C14.45 14 13.9792 13.8042 13.5875 13.4125C13.1958 13.0208 13 12.55 13 12C13 11.45 13.1958 10.9792 13.5875 10.5875C13.9792 10.1958 14.45 10 15 10C15.55 10 16.0208 10.1958 16.4125 10.5875C16.8042 10.9792 17 11.45 17 12C17 12.55 16.8042 13.0208 16.4125 13.4125C16.0208 13.8042 15.55 14 15 14ZM9 8C8.45 8 7.97917 7.80417 7.5875 7.4125C7.19583 7.02083 7 6.55 7 6C7 5.45 7.19583 4.97917 7.5875 4.5875C7.97917 4.19583 8.45 4 9 4C9.55 4 10.0208 4.19583 10.4125 4.5875C10.8042 4.97917 11 5.45 11 6C11 6.55 10.8042 7.02083 10.4125 7.4125C10.0208 7.80417 9.55 8 9 8ZM15 8C14.45 8 13.9792 7.80417 13.5875 7.4125C13.1958 7.02083 13 6.55 13 6C13 5.45 13.1958 4.97917 13.5875 4.5875C13.9792 4.19583 14.45 4 15 4C15.55 4 16.0208 4.19583 16.4125 4.5875C16.8042 4.97917 17 5.45 17 6C17 6.55 16.8042 7.02083 16.4125 7.4125C16.0208 7.80417 15.55 8 15 8Z\"\r\n fill=\"#667085\" />\r\n </svg></span> Zone Journey </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span *ngIf=\"!isMinimized\" (click)=\"searchOpen()\" class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19 19L14.65 14.65M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"cursor-pointer\" *ngIf=\"!isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M5 12H19\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M15 3H21M21 3V9M21 3L14 10M9 21H3M3 21V15M3 21L10 14\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"searchNewOpen && !isMinimized\" class=\"px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"searchZoneText\"\r\n (change)=\"SearchZones()\"\r\n />\r\n </div>\r\n <div *ngIf=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n <div class=\"zone-card mx-3 \" *ngFor=\"let zone of zones;let i = index\">\r\n\r\n <!-- HEADER -->\r\n <div [ngClass]=\"activeIndex === i ? 'zone-header':'zone-default'\" (click)=\"toggle(i)\">\r\n <div [ngClass]=\"activeIndex === i ? 'zone-title':'zone-notitle'\">{{ zone.fromZone |\r\n titlecase}}\r\n </div>\r\n\r\n <div class=\"zone-metrics\">\r\n <span class=\"badge badge-light-primary px-2\" placement=\"top\" ngbTooltip=\"Footfall (Concentration)\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\"\r\n viewBox=\"0 0 10 11\" fill=\"none\">\r\n <path\r\n d=\"M0.25 8.16288H3V8.78788C3 9.15255 2.85513 9.50229 2.59727 9.76015C2.33941 10.018 1.98967 10.1629 1.625 10.1629C1.26033 10.1629 0.910591 10.018 0.652728 9.76015C0.394866 9.50229 0.25 9.15255 0.25 8.78788V8.16288ZM2.25 2.22288C3.25 2.22288 3.75 3.66288 3.75 4.66288C3.75 5.16288 3.5 5.66288 3.25 6.41288L3 7.16288H0.25C0.25 6.66288 0 5.91288 0 4.66288C0 3.41288 0.999 2.22288 2.25 2.22288ZM8.277 6.21188L8.1685 6.82738C8.10117 7.18269 7.89656 7.49717 7.59901 7.70271C7.30146 7.90824 6.93492 7.98827 6.57878 7.92547C6.22263 7.86268 5.90557 7.6621 5.69626 7.3672C5.48695 7.07229 5.40225 6.7068 5.4605 6.34988L5.5685 5.73488L8.277 6.21188ZM7.339 0.0153812C8.571 0.232381 9.348 1.57788 9.131 2.80888C8.914 4.03988 8.5375 4.73488 8.451 5.22738L5.7425 4.74988L5.6265 3.96788C5.5105 3.18588 5.3515 2.64988 5.438 2.15788C5.6115 1.17288 6.354 -0.158119 7.339 0.0153812Z\"\r\n fill=\"#009BF3\" />\r\n </svg></span> {{ zone.fromZoneFootfallCount ?? '--' }}\r\n </span>\r\n <span class=\"badge badge-light-default px-2\" placement=\"top\"\r\n[ngbTooltip]=\"clientData?.isNOB ? 'NoB' : 'Conversion'\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> <span *ngIf=\"!this.clientData?.isNOB\" class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n<path d=\"M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M17 11L19 13L23 9M12.5 7C12.5 9.20914 10.7091 11 8.5 11C6.29086 11 4.5 9.20914 4.5 7C4.5 4.79086 6.29086 3 8.5 3C10.7091 3 12.5 4.79086 12.5 7Z\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span> {{ zone.fromZoneNobCount ?? '--' }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body max-h-200px min-h-auto overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Concentration)</th>\r\n <th ><span class=\"me-2\" *ngIf=\"this.clientData?.isNOB\">NoB</span> <span class=\"me-2\" *ngIf=\"!this.clientData?.isNOB\">Conversion</span> \r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15320_82488)\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15320_82488\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> -->\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone | titlecase}}</td>\r\n <td>{{ row.footfall ?? '--' }} ({{ row.concPercent }}%)</td>\r\n <td>{{ row.nob ?? '--' }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n </ng-conatiner>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</div>", styles: [".zone-card{border:1px solid #e6f0ff;border-radius:10px;margin-bottom:12px;background:#fff}.zone-header{display:flex;justify-content:space-between;align-items:center;padding:12px 30px 12px 12px;cursor:pointer;background:#f6fcff;border-radius:10px}.zone-default{border-width:1px;display:flex;justify-content:space-between;align-items:center;opacity:1;border-radius:8px;padding:12px 30px 12px 12px;border:1px solid #D0D5DD;background:#fff}.zone-title{font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;color:#33b5ff}.zone-metrics{display:flex;align-items:center;gap:8px}.pill{padding:4px 10px;border-radius:16px;font-size:12px}.arrow{transition:transform .3s ease}.arrow.rotate{transform:rotate(180deg)}.zone-body{padding:10px 12px}.table-head,.table-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:6px 0}.table-head{font-weight:600;font-size:12px;opacity:1;padding:11px 16px;border-bottom-width:1px;background-color:#fcfcfd;color:#667085;border-bottom:1px solid #EAECF0;display:flex;justify-content:space-between}.table-row{opacity:1;padding:11px 16px;border-bottom-width:1px;display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid #EAECF0}.zone-floating{position:sticky;width:330px;height:75px;top:0;z-index:9999;cursor:move}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.bordered-box{border:1px solid #EAECF0;border-radius:8px}.path-wrapper{opacity:1;padding:8px 16px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.zone-dropdown{position:relative}.dropdown-panel{position:absolute;background:#fff;border-radius:8px;padding:10px;width:100%;box-shadow:0 6px 20px #0000001a;z-index:1000}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.dropdown-panel{width:260px;background:#fff;border-radius:8px;box-shadow:0 6px 20px #0000001f}.dropdown-body{max-height:220px}.zone-item{display:flex;align-items:center;gap:8px;padding:6px 0}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .am-tooltip{font-size:12px;border-width:1px;opacity:1;border-radius:12px;padding:8px}::ng-deep .am-tooltip-header{margin-bottom:6px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}::ng-deep .am-tooltip-table{width:100%;border-collapse:collapse}::ng-deep .am-tooltip-table .value{font-weight:600}::ng-deep .am-tooltip-table .text-primary{font-weight:700;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#00a3ff}::ng-deep .am-tooltip-table .text-value{font-weight:500;font-size:16px;line-height:20px;letter-spacing:0%;margin-left:5px;padding-top:5px;color:#667085}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
1448
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneJourneyComponent, selector: "lib-zone-journey", inputs: { headerData: "headerData", clientData: "clientData" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "zoneDropdown", first: true, predicate: ["zoneDropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- zone-journey.component.html -->\r\n<div class=\"card my-card mx-1 my-2\">\r\n <div class=\"card-header px-0 mx-5 border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-1\">Zone-Based Shopper Analysis </span>\r\n <span class=\"text-sub mb-1\">Understand your Shoppers journey from one zone to another\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n<div class=\"zone-dropdown me-2\" #zoneDropdown\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- BUTTON -->\r\n <button [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn btn-outline w-100 me-2 d-flex justify-content-between\"\r\n (click)=\"toggleDropdown($event)\"\r\n >\r\n Show / Hide Zone\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n<path d=\"M1 1L6 6L11 1\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </button>\r\n\r\n <!-- DROPDOWN -->\r\n <div *ngIf=\"showDropdown\" class=\"dropdown-panel h-300px d-flex flex-column\">\r\n \r\n <!-- HEADER (fixed) -->\r\n <div class=\"dropdown-header px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"dropdownSearchText\"\r\n (input)=\"filterZones()\"\r\n />\r\n </div>\r\n \r\n <div *ngIf=\"tempFilteredZones?.length\" class=\"d-flex align-items-center gap-2 mb-2 px-2\">\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected()\"\r\n (change)=\"toggleSelectAll($event)\"\r\n /></span>\r\n <span class=\"ms-2\">Select All</span>\r\n </div>\r\n <!-- BODY (scrollable list) -->\r\n <div *ngIf=\"tempFilteredZones?.length\" class=\"dropdown-body flex-grow-1 overflow-auto px-2\">\r\n <div\r\n class=\"zone-item\"\r\n *ngFor=\"let zone of tempFilteredZones\"\r\n >\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"zone.checked\"\r\n /></span>\r\n <span class=\"ms-2\">{{ zone.name }}</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"!tempFilteredZones?.length\" >\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- FOOTER (fixed) -->\r\n <div *ngIf=\"tempFilteredZones?.length\" class=\"dropdown-footer d-flex justify-content-end gap-2 p-2 border-top\">\r\n <button class=\"btn btn-sm btn-outline w-50\" (click)=\"resetZones()\">\r\n Reset\r\n </button>\r\n <button class=\"btn btn-sm btn-primary w-50\" (click)=\"applyZones()\">\r\n Apply\r\n </button>\r\n </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n\r\n <button type=\"button\" (click)=\"getZoneJourneyExport()\" [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-3 mx-3\">\r\n <div class=\"bordered-box w-50 me-2 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n height=\"21\" viewBox=\"0 0 19 21\" fill=\"none\">\r\n <path\r\n d=\"M0.5 16.3258H6V17.5758C6 18.3051 5.71027 19.0046 5.19454 19.5203C4.67882 20.036 3.97935 20.3258 3.25 20.3258C2.52065 20.3258 1.82118 20.036 1.30546 19.5203C0.789731 19.0046 0.5 18.3051 0.5 17.5758V16.3258ZM4.5 4.44576C6.5 4.44576 7.5 7.32576 7.5 9.32576C7.5 10.3258 7 11.3258 6.5 12.8258L6 14.3258H0.5C0.5 13.3258 0 11.8258 0 9.32576C0 6.82576 1.998 4.44576 4.5 4.44576ZM16.554 12.4238L16.337 13.6548C16.2023 14.3654 15.7931 14.9943 15.198 15.4054C14.6029 15.8165 13.8698 15.9765 13.1576 15.8509C12.4453 15.7254 11.8111 15.3242 11.3925 14.7344C10.9739 14.1446 10.8045 13.4136 10.921 12.6998L11.137 11.4698L16.554 12.4238ZM14.678 0.0307624C17.142 0.464762 18.696 3.15576 18.262 5.61776C17.828 8.07976 17.075 9.46976 16.902 10.4548L11.485 9.49976L11.253 7.93576C11.021 6.37176 10.703 5.29976 10.876 4.31576C11.223 2.34576 12.708 -0.316238 14.678 0.0307624Z\"\r\n fill=\"#1D2939\" />\r\n </svg>Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{zoneShopperAnalysis?.OverallFootfall ?? '--'}}</span> <span class=\"text-perc ms-1\">({{zoneShopperAnalysis?.ConversionPercent ?? '--'}} %)</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"text-title py-2\">\r\n<svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> NoB :</span>\r\n <span *ngIf=\"!this.clientData?.isNOB\" class=\"text-title py-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n<path d=\"M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M17 11L19 13L23 9M12.5 7C12.5 9.20914 10.7091 11 8.5 11C6.29086 11 4.5 9.20914 4.5 7C4.5 4.79086 6.29086 3 8.5 3C10.7091 3 12.5 4.79086 12.5 7Z\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\">\r\n <svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row gx-0 p-3\">\r\n <div [ngClass]=\"isMinimized ? 'col-12' : 'col-8'\"\r\n [style.height.px]=\"zoneChartNoData ? 300 : (isMinimized ? 650 : 550)\">\r\n <ng-container *ngIf=\"zoneChartLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneChartNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!zoneChartNoData && !zoneChartLoading\" id=\"chartdiv\" style=\"width: 100%; height: 100%;\"></div>\r\n </div>\r\n\r\n <div [ngClass]=\"isMinimized ? 'zone-floating' : 'col-4'\" [style.top.px]=\"isMinimized ? floatingPos.top : null\"\r\n [style.left.px]=\"isMinimized ? floatingPos.left : null\" (mousedown)=\"startDrag($event)\">\r\n <!-- (mousedown)=\"startDrag($event)\" -->\r\n <ng-container *ngIf=\"zoneCardLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneCardNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-conatiner *ngIf=\"!zoneCardNoData && !zoneCardLoading\" class=\"card \">\r\n <div class=\"card-header border-0 px-4\"\r\n [ngClass]=\"isMinimized ?'bg-secondary min-h-30px': 'bg-light-primary min-h-45px mb-2'\">\r\n <div class=\"card-title align-items-start\"><span *ngIf=\"isMinimized\" class=\"me-2 mb-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9 20C8.45 20 7.97917 19.8042 7.5875 19.4125C7.19583 19.0208 7 18.55 7 18C7 17.45 7.19583 16.9792 7.5875 16.5875C7.97917 16.1958 8.45 16 9 16C9.55 16 10.0208 16.1958 10.4125 16.5875C10.8042 16.9792 11 17.45 11 18C11 18.55 10.8042 19.0208 10.4125 19.4125C10.0208 19.8042 9.55 20 9 20ZM15 20C14.45 20 13.9792 19.8042 13.5875 19.4125C13.1958 19.0208 13 18.55 13 18C13 17.45 13.1958 16.9792 13.5875 16.5875C13.9792 16.1958 14.45 16 15 16C15.55 16 16.0208 16.1958 16.4125 16.5875C16.8042 16.9792 17 17.45 17 18C17 18.55 16.8042 19.0208 16.4125 19.4125C16.0208 19.8042 15.55 20 15 20ZM9 14C8.45 14 7.97917 13.8042 7.5875 13.4125C7.19583 13.0208 7 12.55 7 12C7 11.45 7.19583 10.9792 7.5875 10.5875C7.97917 10.1958 8.45 10 9 10C9.55 10 10.0208 10.1958 10.4125 10.5875C10.8042 10.9792 11 11.45 11 12C11 12.55 10.8042 13.0208 10.4125 13.4125C10.0208 13.8042 9.55 14 9 14ZM15 14C14.45 14 13.9792 13.8042 13.5875 13.4125C13.1958 13.0208 13 12.55 13 12C13 11.45 13.1958 10.9792 13.5875 10.5875C13.9792 10.1958 14.45 10 15 10C15.55 10 16.0208 10.1958 16.4125 10.5875C16.8042 10.9792 17 11.45 17 12C17 12.55 16.8042 13.0208 16.4125 13.4125C16.0208 13.8042 15.55 14 15 14ZM9 8C8.45 8 7.97917 7.80417 7.5875 7.4125C7.19583 7.02083 7 6.55 7 6C7 5.45 7.19583 4.97917 7.5875 4.5875C7.97917 4.19583 8.45 4 9 4C9.55 4 10.0208 4.19583 10.4125 4.5875C10.8042 4.97917 11 5.45 11 6C11 6.55 10.8042 7.02083 10.4125 7.4125C10.0208 7.80417 9.55 8 9 8ZM15 8C14.45 8 13.9792 7.80417 13.5875 7.4125C13.1958 7.02083 13 6.55 13 6C13 5.45 13.1958 4.97917 13.5875 4.5875C13.9792 4.19583 14.45 4 15 4C15.55 4 16.0208 4.19583 16.4125 4.5875C16.8042 4.97917 17 5.45 17 6C17 6.55 16.8042 7.02083 16.4125 7.4125C16.0208 7.80417 15.55 8 15 8Z\"\r\n fill=\"#667085\" />\r\n </svg></span> Zone Journey </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span *ngIf=\"!isMinimized\" (click)=\"searchOpen()\" class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19 19L14.65 14.65M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"cursor-pointer\" *ngIf=\"!isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M5 12H19\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M15 3H21M21 3V9M21 3L14 10M9 21H3M3 21V15M3 21L10 14\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"searchNewOpen && !isMinimized\" class=\"px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"searchZoneText\"\r\n (change)=\"SearchZones()\"\r\n />\r\n </div>\r\n <div *ngIf=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n <div class=\"zone-card mx-3 \" *ngFor=\"let zone of zones;let i = index\">\r\n\r\n <!-- HEADER -->\r\n <div [ngClass]=\"activeIndex === i ? 'zone-header':'zone-default'\" (click)=\"toggle(i)\">\r\n <div [ngClass]=\"activeIndex === i ? 'zone-title':'zone-notitle'\">{{ zone.fromZone |\r\n titlecase}}\r\n </div>\r\n\r\n <div class=\"zone-metrics\">\r\n <span class=\"badge badge-light-primary px-2\" placement=\"top\" ngbTooltip=\"Footfall (Concentration)\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\"\r\n viewBox=\"0 0 10 11\" fill=\"none\">\r\n <path\r\n d=\"M0.25 8.16288H3V8.78788C3 9.15255 2.85513 9.50229 2.59727 9.76015C2.33941 10.018 1.98967 10.1629 1.625 10.1629C1.26033 10.1629 0.910591 10.018 0.652728 9.76015C0.394866 9.50229 0.25 9.15255 0.25 8.78788V8.16288ZM2.25 2.22288C3.25 2.22288 3.75 3.66288 3.75 4.66288C3.75 5.16288 3.5 5.66288 3.25 6.41288L3 7.16288H0.25C0.25 6.66288 0 5.91288 0 4.66288C0 3.41288 0.999 2.22288 2.25 2.22288ZM8.277 6.21188L8.1685 6.82738C8.10117 7.18269 7.89656 7.49717 7.59901 7.70271C7.30146 7.90824 6.93492 7.98827 6.57878 7.92547C6.22263 7.86268 5.90557 7.6621 5.69626 7.3672C5.48695 7.07229 5.40225 6.7068 5.4605 6.34988L5.5685 5.73488L8.277 6.21188ZM7.339 0.0153812C8.571 0.232381 9.348 1.57788 9.131 2.80888C8.914 4.03988 8.5375 4.73488 8.451 5.22738L5.7425 4.74988L5.6265 3.96788C5.5105 3.18588 5.3515 2.64988 5.438 2.15788C5.6115 1.17288 6.354 -0.158119 7.339 0.0153812Z\"\r\n fill=\"#009BF3\" />\r\n </svg></span> {{ zone.fromZoneFootfallCount ?? '--' }}\r\n </span>\r\n <span class=\"badge badge-light-default px-2\" placement=\"top\"\r\n[ngbTooltip]=\"clientData?.isNOB ? 'NoB' : 'Conversion'\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> <span *ngIf=\"!this.clientData?.isNOB\" class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n<path d=\"M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M17 11L19 13L23 9M12.5 7C12.5 9.20914 10.7091 11 8.5 11C6.29086 11 4.5 9.20914 4.5 7C4.5 4.79086 6.29086 3 8.5 3C10.7091 3 12.5 4.79086 12.5 7Z\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span> {{ zone.fromZoneNobCount ?? '--' }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body max-h-200px min-h-auto overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Concentration)</th>\r\n <th ><span class=\"me-2\" *ngIf=\"this.clientData?.isNOB\">NoB</span> <span class=\"me-2\" *ngIf=\"!this.clientData?.isNOB\">Conversion</span> \r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15320_82488)\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15320_82488\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> -->\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone | titlecase}}</td>\r\n <td>{{ row.footfall ?? '--' }} ({{ row.concPercent }}%)</td>\r\n <td>{{ row.nob ?? '--' }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n </ng-conatiner>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</div>", styles: [".zone-card{border:1px solid #e6f0ff;border-radius:10px;margin-bottom:12px;background:#fff}.zone-header{display:flex;justify-content:space-between;align-items:center;padding:12px 30px 12px 12px;cursor:pointer;background:#f6fcff;border-radius:10px}.zone-default{border-width:1px;display:flex;justify-content:space-between;align-items:center;opacity:1;border-radius:8px;padding:12px 30px 12px 12px;border:1px solid #D0D5DD;background:#fff}.zone-title{font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;color:#33b5ff}.zone-metrics{display:flex;align-items:center;gap:8px}.pill{padding:4px 10px;border-radius:16px;font-size:12px}.arrow{transition:transform .3s ease}.arrow.rotate{transform:rotate(180deg)}.zone-body{padding:10px 12px}.table-head,.table-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:6px 0}.table-head{font-weight:600;font-size:12px;opacity:1;padding:11px 16px;border-bottom-width:1px;background-color:#fcfcfd;color:#667085;border-bottom:1px solid #EAECF0;display:flex;justify-content:space-between}.table-row{opacity:1;padding:11px 16px;border-bottom-width:1px;display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid #EAECF0}.zone-floating{position:sticky;width:330px;height:75px;top:0;z-index:9999;cursor:move}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.bordered-box{border:1px solid #EAECF0;border-radius:8px}.path-wrapper{opacity:1;padding:8px 16px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.zone-dropdown{position:relative}.dropdown-panel{position:absolute;background:#fff;border-radius:8px;padding:10px;width:100%;box-shadow:0 6px 20px #0000001a;z-index:1000}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.dropdown-panel{width:260px;background:#fff;border-radius:8px;box-shadow:0 6px 20px #0000001f}.dropdown-body{max-height:220px}.zone-item{display:flex;align-items:center;gap:8px;padding:6px 0}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .am-tooltip{font-size:12px;border-width:1px;opacity:1;border-radius:12px;padding:8px}::ng-deep .am-tooltip-header{margin-bottom:6px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}::ng-deep .am-tooltip-table{width:100%;border-collapse:collapse}::ng-deep .am-tooltip-table .value{font-weight:600}::ng-deep .am-tooltip-table .text-primary{font-weight:700;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#00a3ff}::ng-deep .am-tooltip-table .text-value{font-weight:500;font-size:16px;line-height:20px;letter-spacing:0%;margin-left:5px;padding-top:5px;color:#667085}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
1451
1449
  }
1452
1450
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneJourneyComponent, decorators: [{
1453
1451
  type: Component,
1454
- args: [{ selector: 'lib-zone-journey', template: "<!-- zone-journey.component.html -->\r\n<div class=\"card my-card mx-1 my-2\">\r\n <div class=\"card-header px-0 mx-5 border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-1\">Zone-Based Shopper Analysis </span>\r\n <span class=\"text-sub mb-1\">Understand your Shoppers journey from one zone to another\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n<div class=\"zone-dropdown me-2\" #zoneDropdown\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- BUTTON -->\r\n <button [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn btn-outline w-100 me-2 d-flex justify-content-between\"\r\n (click)=\"toggleDropdown($event)\"\r\n >\r\n Show / Hide Zone\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n<path d=\"M1 1L6 6L11 1\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </button>\r\n\r\n <!-- DROPDOWN -->\r\n <div *ngIf=\"showDropdown\" class=\"dropdown-panel h-300px d-flex flex-column\">\r\n\r\n <!-- HEADER (fixed) -->\r\n <div class=\"dropdown-header px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"dropdownSearchText\"\r\n (input)=\"filterZones()\"\r\n />\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 mb-2 px-2\">\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected()\"\r\n (change)=\"toggleSelectAll($event)\"\r\n /></span>\r\n <span class=\"ms-2\">Select All</span>\r\n </div>\r\n <!-- BODY (scrollable list) -->\r\n <div class=\"dropdown-body flex-grow-1 overflow-auto px-2\">\r\n <div\r\n class=\"zone-item\"\r\n *ngFor=\"let zone of tempFilteredZones\"\r\n >\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"zone.checked\"\r\n /></span>\r\n <span class=\"ms-2\">{{ zone.name }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- FOOTER (fixed) -->\r\n <div class=\"dropdown-footer d-flex justify-content-end gap-2 p-2 border-top\">\r\n <button class=\"btn btn-sm btn-outline w-50\" (click)=\"resetZones()\">\r\n Reset\r\n </button>\r\n <button class=\"btn btn-sm btn-primary w-50\" (click)=\"applyZones()\">\r\n Apply\r\n </button>\r\n </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n\r\n <button type=\"button\" (click)=\"getZoneJourneyExport()\" [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-3 mx-3\">\r\n <div class=\"bordered-box w-50 me-2 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n height=\"21\" viewBox=\"0 0 19 21\" fill=\"none\">\r\n <path\r\n d=\"M0.5 16.3258H6V17.5758C6 18.3051 5.71027 19.0046 5.19454 19.5203C4.67882 20.036 3.97935 20.3258 3.25 20.3258C2.52065 20.3258 1.82118 20.036 1.30546 19.5203C0.789731 19.0046 0.5 18.3051 0.5 17.5758V16.3258ZM4.5 4.44576C6.5 4.44576 7.5 7.32576 7.5 9.32576C7.5 10.3258 7 11.3258 6.5 12.8258L6 14.3258H0.5C0.5 13.3258 0 11.8258 0 9.32576C0 6.82576 1.998 4.44576 4.5 4.44576ZM16.554 12.4238L16.337 13.6548C16.2023 14.3654 15.7931 14.9943 15.198 15.4054C14.6029 15.8165 13.8698 15.9765 13.1576 15.8509C12.4453 15.7254 11.8111 15.3242 11.3925 14.7344C10.9739 14.1446 10.8045 13.4136 10.921 12.6998L11.137 11.4698L16.554 12.4238ZM14.678 0.0307624C17.142 0.464762 18.696 3.15576 18.262 5.61776C17.828 8.07976 17.075 9.46976 16.902 10.4548L11.485 9.49976L11.253 7.93576C11.021 6.37176 10.703 5.29976 10.876 4.31576C11.223 2.34576 12.708 -0.316238 14.678 0.0307624Z\"\r\n fill=\"#1D2939\" />\r\n </svg>Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{zoneShopperAnalysis?.OverallFootfall ?? '--'}}</span> <span class=\"text-perc ms-1\">({{zoneShopperAnalysis?.ConversionPercent ?? '--'}} %)</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"text-title py-2\">\r\n<svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> NoB :</span>\r\n <span *ngIf=\"!this.clientData?.isNOB\" class=\"text-title py-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n<path d=\"M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M17 11L19 13L23 9M12.5 7C12.5 9.20914 10.7091 11 8.5 11C6.29086 11 4.5 9.20914 4.5 7C4.5 4.79086 6.29086 3 8.5 3C10.7091 3 12.5 4.79086 12.5 7Z\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\">\r\n <svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row gx-0 p-3\">\r\n <div [ngClass]=\"isMinimized ? 'col-12' : 'col-8'\"\r\n [style.height.px]=\"zoneChartNoData ? 300 : (isMinimized ? 650 : 550)\">\r\n <ng-container *ngIf=\"zoneChartLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneChartNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!zoneChartNoData && !zoneChartLoading\" id=\"chartdiv\" style=\"width: 100%; height: 100%;\"></div>\r\n </div>\r\n\r\n <div [ngClass]=\"isMinimized ? 'zone-floating' : 'col-4'\" [style.top.px]=\"isMinimized ? floatingPos.top : null\"\r\n [style.left.px]=\"isMinimized ? floatingPos.left : null\" (mousedown)=\"startDrag($event)\">\r\n <!-- (mousedown)=\"startDrag($event)\" -->\r\n <ng-container *ngIf=\"zoneCardLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneCardNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-conatiner *ngIf=\"!zoneCardNoData && !zoneCardLoading\" class=\"card \">\r\n <div class=\"card-header border-0 px-4\"\r\n [ngClass]=\"isMinimized ?'bg-secondary min-h-30px': 'bg-light-primary min-h-45px mb-2'\">\r\n <div class=\"card-title align-items-start\"><span *ngIf=\"isMinimized\" class=\"me-2 mb-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9 20C8.45 20 7.97917 19.8042 7.5875 19.4125C7.19583 19.0208 7 18.55 7 18C7 17.45 7.19583 16.9792 7.5875 16.5875C7.97917 16.1958 8.45 16 9 16C9.55 16 10.0208 16.1958 10.4125 16.5875C10.8042 16.9792 11 17.45 11 18C11 18.55 10.8042 19.0208 10.4125 19.4125C10.0208 19.8042 9.55 20 9 20ZM15 20C14.45 20 13.9792 19.8042 13.5875 19.4125C13.1958 19.0208 13 18.55 13 18C13 17.45 13.1958 16.9792 13.5875 16.5875C13.9792 16.1958 14.45 16 15 16C15.55 16 16.0208 16.1958 16.4125 16.5875C16.8042 16.9792 17 17.45 17 18C17 18.55 16.8042 19.0208 16.4125 19.4125C16.0208 19.8042 15.55 20 15 20ZM9 14C8.45 14 7.97917 13.8042 7.5875 13.4125C7.19583 13.0208 7 12.55 7 12C7 11.45 7.19583 10.9792 7.5875 10.5875C7.97917 10.1958 8.45 10 9 10C9.55 10 10.0208 10.1958 10.4125 10.5875C10.8042 10.9792 11 11.45 11 12C11 12.55 10.8042 13.0208 10.4125 13.4125C10.0208 13.8042 9.55 14 9 14ZM15 14C14.45 14 13.9792 13.8042 13.5875 13.4125C13.1958 13.0208 13 12.55 13 12C13 11.45 13.1958 10.9792 13.5875 10.5875C13.9792 10.1958 14.45 10 15 10C15.55 10 16.0208 10.1958 16.4125 10.5875C16.8042 10.9792 17 11.45 17 12C17 12.55 16.8042 13.0208 16.4125 13.4125C16.0208 13.8042 15.55 14 15 14ZM9 8C8.45 8 7.97917 7.80417 7.5875 7.4125C7.19583 7.02083 7 6.55 7 6C7 5.45 7.19583 4.97917 7.5875 4.5875C7.97917 4.19583 8.45 4 9 4C9.55 4 10.0208 4.19583 10.4125 4.5875C10.8042 4.97917 11 5.45 11 6C11 6.55 10.8042 7.02083 10.4125 7.4125C10.0208 7.80417 9.55 8 9 8ZM15 8C14.45 8 13.9792 7.80417 13.5875 7.4125C13.1958 7.02083 13 6.55 13 6C13 5.45 13.1958 4.97917 13.5875 4.5875C13.9792 4.19583 14.45 4 15 4C15.55 4 16.0208 4.19583 16.4125 4.5875C16.8042 4.97917 17 5.45 17 6C17 6.55 16.8042 7.02083 16.4125 7.4125C16.0208 7.80417 15.55 8 15 8Z\"\r\n fill=\"#667085\" />\r\n </svg></span> Zone Journey </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span *ngIf=\"!isMinimized\" (click)=\"searchOpen()\" class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19 19L14.65 14.65M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"cursor-pointer\" *ngIf=\"!isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M5 12H19\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M15 3H21M21 3V9M21 3L14 10M9 21H3M3 21V15M3 21L10 14\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"searchNewOpen && !isMinimized\" class=\"px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"searchZoneText\"\r\n (change)=\"SearchZones()\"\r\n />\r\n </div>\r\n <div *ngIf=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n <div class=\"zone-card mx-3 \" *ngFor=\"let zone of zones;let i = index\">\r\n\r\n <!-- HEADER -->\r\n <div [ngClass]=\"activeIndex === i ? 'zone-header':'zone-default'\" (click)=\"toggle(i)\">\r\n <div [ngClass]=\"activeIndex === i ? 'zone-title':'zone-notitle'\">{{ zone.fromZone |\r\n titlecase}}\r\n </div>\r\n\r\n <div class=\"zone-metrics\">\r\n <span class=\"badge badge-light-primary px-2\" placement=\"top\" ngbTooltip=\"Footfall (Concentration)\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\"\r\n viewBox=\"0 0 10 11\" fill=\"none\">\r\n <path\r\n d=\"M0.25 8.16288H3V8.78788C3 9.15255 2.85513 9.50229 2.59727 9.76015C2.33941 10.018 1.98967 10.1629 1.625 10.1629C1.26033 10.1629 0.910591 10.018 0.652728 9.76015C0.394866 9.50229 0.25 9.15255 0.25 8.78788V8.16288ZM2.25 2.22288C3.25 2.22288 3.75 3.66288 3.75 4.66288C3.75 5.16288 3.5 5.66288 3.25 6.41288L3 7.16288H0.25C0.25 6.66288 0 5.91288 0 4.66288C0 3.41288 0.999 2.22288 2.25 2.22288ZM8.277 6.21188L8.1685 6.82738C8.10117 7.18269 7.89656 7.49717 7.59901 7.70271C7.30146 7.90824 6.93492 7.98827 6.57878 7.92547C6.22263 7.86268 5.90557 7.6621 5.69626 7.3672C5.48695 7.07229 5.40225 6.7068 5.4605 6.34988L5.5685 5.73488L8.277 6.21188ZM7.339 0.0153812C8.571 0.232381 9.348 1.57788 9.131 2.80888C8.914 4.03988 8.5375 4.73488 8.451 5.22738L5.7425 4.74988L5.6265 3.96788C5.5105 3.18588 5.3515 2.64988 5.438 2.15788C5.6115 1.17288 6.354 -0.158119 7.339 0.0153812Z\"\r\n fill=\"#009BF3\" />\r\n </svg></span> {{ zone.fromZoneFootfallCount ?? '--' }}\r\n </span>\r\n <span class=\"badge badge-light-default px-2\" placement=\"top\"\r\n[ngbTooltip]=\"clientData?.isNOB ? 'NoB' : 'Conversion'\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> <span *ngIf=\"!this.clientData?.isNOB\" class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n<path d=\"M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M17 11L19 13L23 9M12.5 7C12.5 9.20914 10.7091 11 8.5 11C6.29086 11 4.5 9.20914 4.5 7C4.5 4.79086 6.29086 3 8.5 3C10.7091 3 12.5 4.79086 12.5 7Z\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span> {{ zone.fromZoneNobCount ?? '--' }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body max-h-200px min-h-auto overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Concentration)</th>\r\n <th ><span class=\"me-2\" *ngIf=\"this.clientData?.isNOB\">NoB</span> <span class=\"me-2\" *ngIf=\"!this.clientData?.isNOB\">Conversion</span> \r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15320_82488)\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15320_82488\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> -->\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone | titlecase}}</td>\r\n <td>{{ row.footfall ?? '--' }} ({{ row.concPercent }}%)</td>\r\n <td>{{ row.nob ?? '--' }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n </ng-conatiner>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</div>", styles: [".zone-card{border:1px solid #e6f0ff;border-radius:10px;margin-bottom:12px;background:#fff}.zone-header{display:flex;justify-content:space-between;align-items:center;padding:12px 30px 12px 12px;cursor:pointer;background:#f6fcff;border-radius:10px}.zone-default{border-width:1px;display:flex;justify-content:space-between;align-items:center;opacity:1;border-radius:8px;padding:12px 30px 12px 12px;border:1px solid #D0D5DD;background:#fff}.zone-title{font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;color:#33b5ff}.zone-metrics{display:flex;align-items:center;gap:8px}.pill{padding:4px 10px;border-radius:16px;font-size:12px}.arrow{transition:transform .3s ease}.arrow.rotate{transform:rotate(180deg)}.zone-body{padding:10px 12px}.table-head,.table-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:6px 0}.table-head{font-weight:600;font-size:12px;opacity:1;padding:11px 16px;border-bottom-width:1px;background-color:#fcfcfd;color:#667085;border-bottom:1px solid #EAECF0;display:flex;justify-content:space-between}.table-row{opacity:1;padding:11px 16px;border-bottom-width:1px;display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid #EAECF0}.zone-floating{position:sticky;width:330px;height:75px;top:0;z-index:9999;cursor:move}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.bordered-box{border:1px solid #EAECF0;border-radius:8px}.path-wrapper{opacity:1;padding:8px 16px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.zone-dropdown{position:relative}.dropdown-panel{position:absolute;background:#fff;border-radius:8px;padding:10px;width:100%;box-shadow:0 6px 20px #0000001a;z-index:1000}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.dropdown-panel{width:260px;background:#fff;border-radius:8px;box-shadow:0 6px 20px #0000001f}.dropdown-body{max-height:220px}.zone-item{display:flex;align-items:center;gap:8px;padding:6px 0}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .am-tooltip{font-size:12px;border-width:1px;opacity:1;border-radius:12px;padding:8px}::ng-deep .am-tooltip-header{margin-bottom:6px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}::ng-deep .am-tooltip-table{width:100%;border-collapse:collapse}::ng-deep .am-tooltip-table .value{font-weight:600}::ng-deep .am-tooltip-table .text-primary{font-weight:700;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#00a3ff}::ng-deep .am-tooltip-table .text-value{font-weight:500;font-size:16px;line-height:20px;letter-spacing:0%;margin-left:5px;padding-top:5px;color:#667085}\n"] }]
1452
+ args: [{ selector: 'lib-zone-journey', template: "<!-- zone-journey.component.html -->\r\n<div class=\"card my-card mx-1 my-2\">\r\n <div class=\"card-header px-0 mx-5 border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-1\">Zone-Based Shopper Analysis </span>\r\n <span class=\"text-sub mb-1\">Understand your Shoppers journey from one zone to another\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n<div class=\"zone-dropdown me-2\" #zoneDropdown\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- BUTTON -->\r\n <button [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn btn-outline w-100 me-2 d-flex justify-content-between\"\r\n (click)=\"toggleDropdown($event)\"\r\n >\r\n Show / Hide Zone\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n<path d=\"M1 1L6 6L11 1\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </button>\r\n\r\n <!-- DROPDOWN -->\r\n <div *ngIf=\"showDropdown\" class=\"dropdown-panel h-300px d-flex flex-column\">\r\n \r\n <!-- HEADER (fixed) -->\r\n <div class=\"dropdown-header px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"dropdownSearchText\"\r\n (input)=\"filterZones()\"\r\n />\r\n </div>\r\n \r\n <div *ngIf=\"tempFilteredZones?.length\" class=\"d-flex align-items-center gap-2 mb-2 px-2\">\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected()\"\r\n (change)=\"toggleSelectAll($event)\"\r\n /></span>\r\n <span class=\"ms-2\">Select All</span>\r\n </div>\r\n <!-- BODY (scrollable list) -->\r\n <div *ngIf=\"tempFilteredZones?.length\" class=\"dropdown-body flex-grow-1 overflow-auto px-2\">\r\n <div\r\n class=\"zone-item\"\r\n *ngFor=\"let zone of tempFilteredZones\"\r\n >\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"zone.checked\"\r\n /></span>\r\n <span class=\"ms-2\">{{ zone.name }}</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"!tempFilteredZones?.length\" >\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- FOOTER (fixed) -->\r\n <div *ngIf=\"tempFilteredZones?.length\" class=\"dropdown-footer d-flex justify-content-end gap-2 p-2 border-top\">\r\n <button class=\"btn btn-sm btn-outline w-50\" (click)=\"resetZones()\">\r\n Reset\r\n </button>\r\n <button class=\"btn btn-sm btn-primary w-50\" (click)=\"applyZones()\">\r\n Apply\r\n </button>\r\n </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n\r\n <button type=\"button\" (click)=\"getZoneJourneyExport()\" [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-3 mx-3\">\r\n <div class=\"bordered-box w-50 me-2 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n height=\"21\" viewBox=\"0 0 19 21\" fill=\"none\">\r\n <path\r\n d=\"M0.5 16.3258H6V17.5758C6 18.3051 5.71027 19.0046 5.19454 19.5203C4.67882 20.036 3.97935 20.3258 3.25 20.3258C2.52065 20.3258 1.82118 20.036 1.30546 19.5203C0.789731 19.0046 0.5 18.3051 0.5 17.5758V16.3258ZM4.5 4.44576C6.5 4.44576 7.5 7.32576 7.5 9.32576C7.5 10.3258 7 11.3258 6.5 12.8258L6 14.3258H0.5C0.5 13.3258 0 11.8258 0 9.32576C0 6.82576 1.998 4.44576 4.5 4.44576ZM16.554 12.4238L16.337 13.6548C16.2023 14.3654 15.7931 14.9943 15.198 15.4054C14.6029 15.8165 13.8698 15.9765 13.1576 15.8509C12.4453 15.7254 11.8111 15.3242 11.3925 14.7344C10.9739 14.1446 10.8045 13.4136 10.921 12.6998L11.137 11.4698L16.554 12.4238ZM14.678 0.0307624C17.142 0.464762 18.696 3.15576 18.262 5.61776C17.828 8.07976 17.075 9.46976 16.902 10.4548L11.485 9.49976L11.253 7.93576C11.021 6.37176 10.703 5.29976 10.876 4.31576C11.223 2.34576 12.708 -0.316238 14.678 0.0307624Z\"\r\n fill=\"#1D2939\" />\r\n </svg>Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{zoneShopperAnalysis?.OverallFootfall ?? '--'}}</span> <span class=\"text-perc ms-1\">({{zoneShopperAnalysis?.ConversionPercent ?? '--'}} %)</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"text-title py-2\">\r\n<svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> NoB :</span>\r\n <span *ngIf=\"!this.clientData?.isNOB\" class=\"text-title py-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n<path d=\"M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M17 11L19 13L23 9M12.5 7C12.5 9.20914 10.7091 11 8.5 11C6.29086 11 4.5 9.20914 4.5 7C4.5 4.79086 6.29086 3 8.5 3C10.7091 3 12.5 4.79086 12.5 7Z\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\">\r\n <svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row gx-0 p-3\">\r\n <div [ngClass]=\"isMinimized ? 'col-12' : 'col-8'\"\r\n [style.height.px]=\"zoneChartNoData ? 300 : (isMinimized ? 650 : 550)\">\r\n <ng-container *ngIf=\"zoneChartLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneChartNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!zoneChartNoData && !zoneChartLoading\" id=\"chartdiv\" style=\"width: 100%; height: 100%;\"></div>\r\n </div>\r\n\r\n <div [ngClass]=\"isMinimized ? 'zone-floating' : 'col-4'\" [style.top.px]=\"isMinimized ? floatingPos.top : null\"\r\n [style.left.px]=\"isMinimized ? floatingPos.left : null\" (mousedown)=\"startDrag($event)\">\r\n <!-- (mousedown)=\"startDrag($event)\" -->\r\n <ng-container *ngIf=\"zoneCardLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneCardNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-conatiner *ngIf=\"!zoneCardNoData && !zoneCardLoading\" class=\"card \">\r\n <div class=\"card-header border-0 px-4\"\r\n [ngClass]=\"isMinimized ?'bg-secondary min-h-30px': 'bg-light-primary min-h-45px mb-2'\">\r\n <div class=\"card-title align-items-start\"><span *ngIf=\"isMinimized\" class=\"me-2 mb-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9 20C8.45 20 7.97917 19.8042 7.5875 19.4125C7.19583 19.0208 7 18.55 7 18C7 17.45 7.19583 16.9792 7.5875 16.5875C7.97917 16.1958 8.45 16 9 16C9.55 16 10.0208 16.1958 10.4125 16.5875C10.8042 16.9792 11 17.45 11 18C11 18.55 10.8042 19.0208 10.4125 19.4125C10.0208 19.8042 9.55 20 9 20ZM15 20C14.45 20 13.9792 19.8042 13.5875 19.4125C13.1958 19.0208 13 18.55 13 18C13 17.45 13.1958 16.9792 13.5875 16.5875C13.9792 16.1958 14.45 16 15 16C15.55 16 16.0208 16.1958 16.4125 16.5875C16.8042 16.9792 17 17.45 17 18C17 18.55 16.8042 19.0208 16.4125 19.4125C16.0208 19.8042 15.55 20 15 20ZM9 14C8.45 14 7.97917 13.8042 7.5875 13.4125C7.19583 13.0208 7 12.55 7 12C7 11.45 7.19583 10.9792 7.5875 10.5875C7.97917 10.1958 8.45 10 9 10C9.55 10 10.0208 10.1958 10.4125 10.5875C10.8042 10.9792 11 11.45 11 12C11 12.55 10.8042 13.0208 10.4125 13.4125C10.0208 13.8042 9.55 14 9 14ZM15 14C14.45 14 13.9792 13.8042 13.5875 13.4125C13.1958 13.0208 13 12.55 13 12C13 11.45 13.1958 10.9792 13.5875 10.5875C13.9792 10.1958 14.45 10 15 10C15.55 10 16.0208 10.1958 16.4125 10.5875C16.8042 10.9792 17 11.45 17 12C17 12.55 16.8042 13.0208 16.4125 13.4125C16.0208 13.8042 15.55 14 15 14ZM9 8C8.45 8 7.97917 7.80417 7.5875 7.4125C7.19583 7.02083 7 6.55 7 6C7 5.45 7.19583 4.97917 7.5875 4.5875C7.97917 4.19583 8.45 4 9 4C9.55 4 10.0208 4.19583 10.4125 4.5875C10.8042 4.97917 11 5.45 11 6C11 6.55 10.8042 7.02083 10.4125 7.4125C10.0208 7.80417 9.55 8 9 8ZM15 8C14.45 8 13.9792 7.80417 13.5875 7.4125C13.1958 7.02083 13 6.55 13 6C13 5.45 13.1958 4.97917 13.5875 4.5875C13.9792 4.19583 14.45 4 15 4C15.55 4 16.0208 4.19583 16.4125 4.5875C16.8042 4.97917 17 5.45 17 6C17 6.55 16.8042 7.02083 16.4125 7.4125C16.0208 7.80417 15.55 8 15 8Z\"\r\n fill=\"#667085\" />\r\n </svg></span> Zone Journey </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span *ngIf=\"!isMinimized\" (click)=\"searchOpen()\" class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19 19L14.65 14.65M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"cursor-pointer\" *ngIf=\"!isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M5 12H19\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M15 3H21M21 3V9M21 3L14 10M9 21H3M3 21V15M3 21L10 14\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"searchNewOpen && !isMinimized\" class=\"px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"searchZoneText\"\r\n (change)=\"SearchZones()\"\r\n />\r\n </div>\r\n <div *ngIf=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n <div class=\"zone-card mx-3 \" *ngFor=\"let zone of zones;let i = index\">\r\n\r\n <!-- HEADER -->\r\n <div [ngClass]=\"activeIndex === i ? 'zone-header':'zone-default'\" (click)=\"toggle(i)\">\r\n <div [ngClass]=\"activeIndex === i ? 'zone-title':'zone-notitle'\">{{ zone.fromZone |\r\n titlecase}}\r\n </div>\r\n\r\n <div class=\"zone-metrics\">\r\n <span class=\"badge badge-light-primary px-2\" placement=\"top\" ngbTooltip=\"Footfall (Concentration)\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\"\r\n viewBox=\"0 0 10 11\" fill=\"none\">\r\n <path\r\n d=\"M0.25 8.16288H3V8.78788C3 9.15255 2.85513 9.50229 2.59727 9.76015C2.33941 10.018 1.98967 10.1629 1.625 10.1629C1.26033 10.1629 0.910591 10.018 0.652728 9.76015C0.394866 9.50229 0.25 9.15255 0.25 8.78788V8.16288ZM2.25 2.22288C3.25 2.22288 3.75 3.66288 3.75 4.66288C3.75 5.16288 3.5 5.66288 3.25 6.41288L3 7.16288H0.25C0.25 6.66288 0 5.91288 0 4.66288C0 3.41288 0.999 2.22288 2.25 2.22288ZM8.277 6.21188L8.1685 6.82738C8.10117 7.18269 7.89656 7.49717 7.59901 7.70271C7.30146 7.90824 6.93492 7.98827 6.57878 7.92547C6.22263 7.86268 5.90557 7.6621 5.69626 7.3672C5.48695 7.07229 5.40225 6.7068 5.4605 6.34988L5.5685 5.73488L8.277 6.21188ZM7.339 0.0153812C8.571 0.232381 9.348 1.57788 9.131 2.80888C8.914 4.03988 8.5375 4.73488 8.451 5.22738L5.7425 4.74988L5.6265 3.96788C5.5105 3.18588 5.3515 2.64988 5.438 2.15788C5.6115 1.17288 6.354 -0.158119 7.339 0.0153812Z\"\r\n fill=\"#009BF3\" />\r\n </svg></span> {{ zone.fromZoneFootfallCount ?? '--' }}\r\n </span>\r\n <span class=\"badge badge-light-default px-2\" placement=\"top\"\r\n[ngbTooltip]=\"clientData?.isNOB ? 'NoB' : 'Conversion'\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> <span *ngIf=\"!this.clientData?.isNOB\" class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n<path d=\"M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M17 11L19 13L23 9M12.5 7C12.5 9.20914 10.7091 11 8.5 11C6.29086 11 4.5 9.20914 4.5 7C4.5 4.79086 6.29086 3 8.5 3C10.7091 3 12.5 4.79086 12.5 7Z\" stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span> {{ zone.fromZoneNobCount ?? '--' }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body max-h-200px min-h-auto overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Concentration)</th>\r\n <th ><span class=\"me-2\" *ngIf=\"this.clientData?.isNOB\">NoB</span> <span class=\"me-2\" *ngIf=\"!this.clientData?.isNOB\">Conversion</span> \r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15320_82488)\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15320_82488\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> -->\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone | titlecase}}</td>\r\n <td>{{ row.footfall ?? '--' }} ({{ row.concPercent }}%)</td>\r\n <td>{{ row.nob ?? '--' }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n </ng-conatiner>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</div>", styles: [".zone-card{border:1px solid #e6f0ff;border-radius:10px;margin-bottom:12px;background:#fff}.zone-header{display:flex;justify-content:space-between;align-items:center;padding:12px 30px 12px 12px;cursor:pointer;background:#f6fcff;border-radius:10px}.zone-default{border-width:1px;display:flex;justify-content:space-between;align-items:center;opacity:1;border-radius:8px;padding:12px 30px 12px 12px;border:1px solid #D0D5DD;background:#fff}.zone-title{font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;color:#33b5ff}.zone-metrics{display:flex;align-items:center;gap:8px}.pill{padding:4px 10px;border-radius:16px;font-size:12px}.arrow{transition:transform .3s ease}.arrow.rotate{transform:rotate(180deg)}.zone-body{padding:10px 12px}.table-head,.table-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:6px 0}.table-head{font-weight:600;font-size:12px;opacity:1;padding:11px 16px;border-bottom-width:1px;background-color:#fcfcfd;color:#667085;border-bottom:1px solid #EAECF0;display:flex;justify-content:space-between}.table-row{opacity:1;padding:11px 16px;border-bottom-width:1px;display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid #EAECF0}.zone-floating{position:sticky;width:330px;height:75px;top:0;z-index:9999;cursor:move}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.bordered-box{border:1px solid #EAECF0;border-radius:8px}.path-wrapper{opacity:1;padding:8px 16px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.zone-dropdown{position:relative}.dropdown-panel{position:absolute;background:#fff;border-radius:8px;padding:10px;width:100%;box-shadow:0 6px 20px #0000001a;z-index:1000}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.dropdown-panel{width:260px;background:#fff;border-radius:8px;box-shadow:0 6px 20px #0000001f}.dropdown-body{max-height:220px}.zone-item{display:flex;align-items:center;gap:8px;padding:6px 0}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .am-tooltip{font-size:12px;border-width:1px;opacity:1;border-radius:12px;padding:8px}::ng-deep .am-tooltip-header{margin-bottom:6px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}::ng-deep .am-tooltip-table{width:100%;border-collapse:collapse}::ng-deep .am-tooltip-table .value{font-weight:600}::ng-deep .am-tooltip-table .text-primary{font-weight:700;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#00a3ff}::ng-deep .am-tooltip-table .text-value{font-weight:500;font-size:16px;line-height:20px;letter-spacing:0%;margin-left:5px;padding-top:5px;color:#667085}\n"] }]
1455
1453
  }], ctorParameters: () => [{ type: ZoneService }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i4$1.Router }, { type: i4.ToastService }], propDecorators: { headerData: [{
1456
1454
  type: Input
1457
1455
  }], clientData: [{
@@ -3436,11 +3434,11 @@ class CustomerJourneyChartComponent {
3436
3434
  }
3437
3435
  }
3438
3436
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerJourneyChartComponent, deps: [{ token: i4$1.Router }, { token: i4.ToastService }, { token: i2.GlobalStateService }, { token: ZoneService }, { token: Zonev2Service }], target: i0.ɵɵFactoryTarget.Component });
3439
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomerJourneyChartComponent, selector: "lib-customer-journey-chart", inputs: { clientData: "clientData" }, ngImport: i0, template: "<!-- <section id=\"customer-journey-chart\" class=\"card p-5\"> -->\r\n <!-- ---------HEADER---------- -->\r\n <!-- <div class=\"d-flex justify-content-between mb-3\">\r\n <div class=\"d-flex align-items-center justify-content-center gap-3\">\r\n <h3>Customer Journey</h3>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_13146_67458)\">\r\n <path\r\n d=\"M6.06065 6.91667C6.21739 6.47111 6.52675 6.0954 6.93395 5.85609C7.34116 5.61677 7.81991 5.52929 8.28544 5.60914C8.75096 5.68899 9.1732 5.93102 9.47737 6.29235C9.78154 6.65369 9.94802 7.11101 9.94732 7.58333C9.94732 8.91667 7.94732 9.58333 7.94732 9.58333M8.00065 12.25H8.00732M14.6673 8.91667C14.6673 12.5986 11.6826 15.5833 8.00065 15.5833C4.31875 15.5833 1.33398 12.5986 1.33398 8.91667C1.33398 5.23477 4.31875 2.25 8.00065 2.25C11.6826 2.25 14.6673 5.23477 14.6673 8.91667Z\"\r\n stroke=\"#98A2B3\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_13146_67458\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0 0.916016)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-5\">\r\n <div style=\"position: relative\" [hidden]=\"viewMode === 'chart'\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding: 0.68rem 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div id=\"segment-btn\">\r\n <div [class.active]=\"viewMode === 'chart'\" class=\"segment chart-btn\" (click)=\"toggleView('chart')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M15 17.5833V9.25M10 17.5833V4.25M5 17.5833V12.5833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n\r\n <div [class.active]=\"viewMode === 'table'\" class=\"segment table-btn\" (click)=\"toggleView('table')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M6.66667 5.91602H17.5M6.66667 10.916H17.5M6.66667 15.916H17.5M2.5 5.91602H2.50833M2.5 10.916H2.50833M2.5 15.916H2.50833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\r\n <path\r\n d=\"M12 13.916C12.5523 13.916 13 13.4683 13 12.916C13 12.3637 12.5523 11.916 12 11.916C11.4477 11.916 11 12.3637 11 12.916C11 13.4683 11.4477 13.916 12 13.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 6.91602C12.5523 6.91602 13 6.4683 13 5.91602C13 5.36373 12.5523 4.91602 12 4.91602C11.4477 4.91602 11 5.36373 11 5.91602C11 6.4683 11.4477 6.91602 12 6.91602Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 20.916C12.5523 20.916 13 20.4683 13 19.916C13 19.3637 12.5523 18.916 12 18.916C11.4477 18.916 11 19.3637 11 19.916C11 20.4683 11.4477 20.916 12 20.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li>\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M6.00065 1.33398V10.6673M1.33398 6.00065H10.6673\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"addNewZone()\"> Add New Zone </a>\r\n </span>\r\n </li>\r\n <li [hidden]=\"viewMode === 'chart'\">\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M11.3333 5.33333L8 2M8 2L4.66667 5.33333M8 2V10\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"export()\"> Export </a>\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- <div [hidden]=\"!isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div 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> -->\r\n <!-- <div [hidden]=\"isPageLoading\"> -->\r\n <!-- ---------CHART---------- -->\r\n <!-- <div [hidden]=\"viewMode === 'table'\">\r\n <div [hidden]=\"customerJourneyChartData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\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 Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyChartData.length === 0\">\r\n <div id=\"customerJourneyChart\"></div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- ---------TABLE---------- -->\r\n <!-- <div [hidden]=\"viewMode === 'chart'\">\r\n <div [hidden]=\"customerJourneyTableData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\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 Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyTableData.length === 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneName')\">\r\n Zone Name\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneName' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('noOfStores')\">\r\n No. of stores\r\n <svg\r\n [ngClass]=\"sortedColumn === 'noOfStores' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'noOfStores' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneFF')\">\r\n Zone FF\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneFF' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'zoneFF' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('impressions')\">\r\n Concentration\r\n <svg\r\n [ngClass]=\"sortedColumn === 'impressions' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'impressions' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg\r\n [ngClass]=\"sortedColumn === 'AvgDwellTime' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'AvgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyTableData\">\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneName || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.noOfStores || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneFF || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.impressions || 0 }}%</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.AvgDwellTime || 0 }} Mins</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n \r\n <lib-pagination\r\n class=\"text-start\"\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n ></lib-pagination>\r\n </div>\r\n </div> -->\r\n <!-- </div>\r\n</section> -->\r\n\r\n<div class=\"card mt-3\">\r\n <div class=\"card-header border-bottom-0 d-flex justify-content-between align-items-center\">\r\n <h3 class=\"card-title\">Zone-Based Shopper Journey </h3>\r\n <div class=\"card-toolbar\">\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" *ngIf=\"selectedZones.length >= 1\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n</div>\r\n<div class=\"card-body pt-1\">\r\n <div class=\"row bordered-box\">\r\n <div class=\"col-md-3\">\r\n <div class=\"compare-card\">\r\n <h3>Select Zones to Compare</h3>\r\n\r\n <!-- Selected Zones List -->\r\n <div class=\"selected-zones\">\r\n <div *ngFor=\"let zone of selectedZones; let i = index\" class=\"zone-chip\" draggable=\"true\"\r\n (dragstart)=\"onDragStart(i)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (drop)=\"onDrop(i)\">\r\n <span class=\"drag-icon\" (mousedown)=\"enableDrag($event)\"\r\n (mouseup)=\"disableDrag($event)\">\u2630</span>\r\n <span>{{ zone.zoneName | titlecase}}</span>\r\n <button class=\"remove-btn\" (click)=\"removeZone(i)\">\u2715</button>\r\n </div>\r\n </div>\r\n\r\n <!-- Select Dropdown -->\r\n <div class=\"select-zone\" *ngIf=\"selectedZones.length < 3\">\r\n <div class=\"dropdown-container\" (click)=\"toggleDropdown()\">\r\n <span>+ Select Zone</span>\r\n </div>\r\n\r\n <div class=\"dropdown\" *ngIf=\"dropdownOpen\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Search zones...\"\r\n [(ngModel)]=\"searchText\"\r\n class=\"dropdown-search\"\r\n />\r\n <ul class=\"dropdown-list\">\r\n <li\r\n *ngFor=\"let zone of filteredZones()\"\r\n (click)=\"selectZone(zone)\"\r\n [class.disabled]=\"selectedZones.includes(zone)\"\r\n >\r\n {{ zone?.zoneName | titlecase}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- Info Text -->\r\n <p class=\"hint-text mt-20\">\r\n {{ selectedZones.length < 1\r\n ? 'Choose minimum 2, max 3 Zones to compare'\r\n : 'Maximum 3 Zones to compare' }}\r\n </p>\r\n\r\n <!-- Apply Button -->\r\n <div class=\"button-group\">\r\n <!-- Reset button: show only when 3 zones selected -->\r\n <button\r\n *ngIf=\"selectedZones.length >= 1\"\r\n class=\"btn btn-outline reset-btn w-100\"\r\n (click)=\"clearZones()\"\r\n >\r\n Reset\r\n </button>\r\n\r\n <!-- Apply button: always visible -->\r\n <button\r\n class=\"apply-btn w-100\"\r\n [class.active]=\"selectedZones.length >= 1\"\r\n [disabled]=\"selectedZones.length < 1\"\r\n (click)=\"applyZones()\"\r\n >\r\n Apply\r\n </button>\r\n</div>\r\n\r\n</div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"card-header ellipse1 border-0 px-3 mb-2\">\r\n <h3 class=\"card-title align-items-start flex-column\"><span class=\"card-label header\">Based on Overall\r\n Footfall</span><span class=\"sub-header\">Tells you the percentage of total store footfall attributed to each zone\r\n </span></h3>\r\n </div>\r\n<div class=\"d-flex justify-content-between mt-3\" >\r\n <div class=\"bordered-box w-50 me-2 py-3\">\r\n <div class=\"group d-flex justify-content-between px-3\">\r\n <span class=\"text-title py-2\">Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{getNewZoneFFData?.overallFootfall ? getNewZoneFFData?.overallFootfall :'--'}}</span> <span class=\"text-perc ms-1\">({{getNewZoneFFData?.overallFootfallPercentage ? getNewZoneFFData?.overallFootfallPercentage :'--'}})</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-3\">\r\n <div class=\"group d-flex justify-content-between px-3\">\r\n <span class=\"text-title py-2\"><span *ngIf=\"this.clientData?.isNOB\">NoB :</span> <span *ngIf=\"!this.clientData?.isNOB\">Conversion :</span></span>\r\n <span class=\"text-val\">{{getNewZoneFFData?.nobCount ?? '0'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\"><svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <table *ngIf=\"!noSelectedData\" class=\"table bottom-border mt-3\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th class=\"w-50\">Zones</th>\r\n <th class=\"w-50\">Footfall Count (Concentration %)</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of zones\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.zoneName | titlecase}}\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=\"5px\" type=\"primary\" [value]=\"item.percentage\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.footfall }} ({{ item.percentage }}%)\r\n <!-- {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}}% -->\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n\r\n\r\n <div *ngIf=\"noSelectedData\" class=\"row\">\r\n <div class=\"card-body pb-0 px-0 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"footimg-nodata1\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title mb-3\">Select Zones to Compare</div>\r\n <!-- <div class=\"nodata-sub\">There is no result for this conversion funnel</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n", styles: ["#customerJourneyChart{width:100%;height:500px}#customer-journey-chart .rotate{transform:rotate(180deg)}#customer-journey-chart h3{color:var(--Gray-900, #101828);font-size:20px;font-style:normal;font-weight:600;line-height:30px;margin:0}#customer-journey-chart #segment-btn{display:flex;align-items:center}#customer-journey-chart #segment-btn .segment{background:var(--Gray-50, #f9fafb);cursor:pointer;padding:10px}#customer-journey-chart #segment-btn .segment svg>path{stroke:#344054}#customer-journey-chart #segment-btn .segment.active{background:var(--Primary-50, #eaf8ff)}#customer-journey-chart #segment-btn .segment.active svg>path{stroke:#009bf3}#customer-journey-chart #segment-btn .chart-btn{border-radius:8px 0 0 8px}#customer-journey-chart #segment-btn .table-btn{border-radius:0 8px 8px 0}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.compare-card{width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 10px #0000000d;font-family:Inter,sans-serif}.selected-zones{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.zone-chip{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #d6e4f0;border-radius:8px;padding:6px 10px}.drag-icon{cursor:grab;opacity:.6;margin-right:6px}.remove-btn{border:none;background:transparent;cursor:pointer;font-size:16px;color:#666}.dropdown-container{width:100%;padding:8px;border:1px solid #d0dce8;border-radius:8px;background:#fff;color:#00a3ff;font-weight:500;cursor:pointer;text-align:left}.dropdown{position:relative;margin-top:8px;background:#fff;border:1px solid #d0dce8;border-radius:8px;box-shadow:0 2px 6px #0000001a;padding:8px}.dropdown-search{width:100%;padding:6px;border-radius:6px;border:1px solid #ccc;margin-bottom:6px}.dropdown-list{max-height:150px;overflow-y:auto;list-style:none;margin:0;padding:0}.dropdown-list li{padding:6px 8px;cursor:pointer;border-radius:6px}.dropdown-list li:hover{background:#f0f7ff}.dropdown-list li.disabled{color:#aaa;pointer-events:none}.hint-text{color:#a0a0a0;font-size:12px;margin:8px 0}.button-group{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}.reset-btn{padding:10px 16px;border:1px solid #0b0b0b;color:#0b0b0b;border-radius:8px;background:transparent;font-weight:600;cursor:pointer}.apply-btn{padding:10px 16px;border-radius:8px;background:#bcdcff;color:#fff;border:none;font-weight:600;cursor:not-allowed}.apply-btn.active{background:#00a3ff;cursor:pointer}.bordered-box{border:1px solid #EAECF0;border-radius:8px;padding:10px}.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-header,.header{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-style:normal;font-weight:700;line-height:30px}.sub-header{color:var(--Gray-700, #344054)!important;font-size:13px!important;font-style:normal;font-weight:500;line-height:20px}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
3437
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomerJourneyChartComponent, selector: "lib-customer-journey-chart", inputs: { clientData: "clientData" }, ngImport: i0, template: "<!-- <section id=\"customer-journey-chart\" class=\"card p-5\"> -->\r\n <!-- ---------HEADER---------- -->\r\n <!-- <div class=\"d-flex justify-content-between mb-3\">\r\n <div class=\"d-flex align-items-center justify-content-center gap-3\">\r\n <h3>Customer Journey</h3>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_13146_67458)\">\r\n <path\r\n d=\"M6.06065 6.91667C6.21739 6.47111 6.52675 6.0954 6.93395 5.85609C7.34116 5.61677 7.81991 5.52929 8.28544 5.60914C8.75096 5.68899 9.1732 5.93102 9.47737 6.29235C9.78154 6.65369 9.94802 7.11101 9.94732 7.58333C9.94732 8.91667 7.94732 9.58333 7.94732 9.58333M8.00065 12.25H8.00732M14.6673 8.91667C14.6673 12.5986 11.6826 15.5833 8.00065 15.5833C4.31875 15.5833 1.33398 12.5986 1.33398 8.91667C1.33398 5.23477 4.31875 2.25 8.00065 2.25C11.6826 2.25 14.6673 5.23477 14.6673 8.91667Z\"\r\n stroke=\"#98A2B3\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_13146_67458\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0 0.916016)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-5\">\r\n <div style=\"position: relative\" [hidden]=\"viewMode === 'chart'\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding: 0.68rem 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div id=\"segment-btn\">\r\n <div [class.active]=\"viewMode === 'chart'\" class=\"segment chart-btn\" (click)=\"toggleView('chart')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M15 17.5833V9.25M10 17.5833V4.25M5 17.5833V12.5833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n\r\n <div [class.active]=\"viewMode === 'table'\" class=\"segment table-btn\" (click)=\"toggleView('table')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M6.66667 5.91602H17.5M6.66667 10.916H17.5M6.66667 15.916H17.5M2.5 5.91602H2.50833M2.5 10.916H2.50833M2.5 15.916H2.50833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\r\n <path\r\n d=\"M12 13.916C12.5523 13.916 13 13.4683 13 12.916C13 12.3637 12.5523 11.916 12 11.916C11.4477 11.916 11 12.3637 11 12.916C11 13.4683 11.4477 13.916 12 13.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 6.91602C12.5523 6.91602 13 6.4683 13 5.91602C13 5.36373 12.5523 4.91602 12 4.91602C11.4477 4.91602 11 5.36373 11 5.91602C11 6.4683 11.4477 6.91602 12 6.91602Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 20.916C12.5523 20.916 13 20.4683 13 19.916C13 19.3637 12.5523 18.916 12 18.916C11.4477 18.916 11 19.3637 11 19.916C11 20.4683 11.4477 20.916 12 20.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li>\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M6.00065 1.33398V10.6673M1.33398 6.00065H10.6673\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"addNewZone()\"> Add New Zone </a>\r\n </span>\r\n </li>\r\n <li [hidden]=\"viewMode === 'chart'\">\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M11.3333 5.33333L8 2M8 2L4.66667 5.33333M8 2V10\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"export()\"> Export </a>\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- <div [hidden]=\"!isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div 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> -->\r\n <!-- <div [hidden]=\"isPageLoading\"> -->\r\n <!-- ---------CHART---------- -->\r\n <!-- <div [hidden]=\"viewMode === 'table'\">\r\n <div [hidden]=\"customerJourneyChartData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\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 Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyChartData.length === 0\">\r\n <div id=\"customerJourneyChart\"></div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- ---------TABLE---------- -->\r\n <!-- <div [hidden]=\"viewMode === 'chart'\">\r\n <div [hidden]=\"customerJourneyTableData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\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 Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyTableData.length === 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneName')\">\r\n Zone Name\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneName' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('noOfStores')\">\r\n No. of stores\r\n <svg\r\n [ngClass]=\"sortedColumn === 'noOfStores' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'noOfStores' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneFF')\">\r\n Zone FF\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneFF' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'zoneFF' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('impressions')\">\r\n Concentration\r\n <svg\r\n [ngClass]=\"sortedColumn === 'impressions' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'impressions' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg\r\n [ngClass]=\"sortedColumn === 'AvgDwellTime' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'AvgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyTableData\">\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneName || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.noOfStores || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneFF || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.impressions || 0 }}%</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.AvgDwellTime || 0 }} Mins</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n \r\n <lib-pagination\r\n class=\"text-start\"\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n ></lib-pagination>\r\n </div>\r\n </div> -->\r\n <!-- </div>\r\n</section> -->\r\n\r\n<div class=\"card mt-3\">\r\n <div class=\"card-header border-bottom-0 d-flex justify-content-between align-items-center\">\r\n <h3 class=\"card-title\">Zone-Based Shopper Journey </h3>\r\n <div class=\"card-toolbar\">\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" *ngIf=\"selectedZones.length >= 1\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n</div>\r\n<div class=\"card-body pt-1\">\r\n <div class=\"row bordered-box\">\r\n <div class=\"col-md-3\">\r\n <div class=\"compare-card\">\r\n <h3>Select Zones to Compare</h3>\r\n\r\n <!-- Selected Zones List -->\r\n <div class=\"selected-zones\">\r\n <div *ngFor=\"let zone of selectedZones; let i = index\" class=\"zone-chip\" draggable=\"true\"\r\n (dragstart)=\"onDragStart(i)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (drop)=\"onDrop(i)\">\r\n <span class=\"drag-icon\" (mousedown)=\"enableDrag($event)\"\r\n (mouseup)=\"disableDrag($event)\">\u2630</span>\r\n <span>{{ zone.zoneName | titlecase}}</span>\r\n <button class=\"remove-btn\" (click)=\"removeZone(i)\">\u2715</button>\r\n </div>\r\n </div>\r\n\r\n <!-- Select Dropdown -->\r\n <div class=\"select-zone\" *ngIf=\"selectedZones.length < 3\">\r\n <div class=\"dropdown-container\" (click)=\"toggleDropdown()\">\r\n <span>+ Select Zone</span>\r\n </div>\r\n\r\n <div class=\"dropdown\" *ngIf=\"dropdownOpen\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Search zones...\"\r\n [(ngModel)]=\"searchText\"\r\n class=\"dropdown-search\"\r\n />\r\n <ul class=\"dropdown-list\">\r\n <li\r\n *ngFor=\"let zone of filteredZones()\"\r\n (click)=\"selectZone(zone)\"\r\n [class.disabled]=\"selectedZones.includes(zone)\"\r\n >\r\n {{ zone?.zoneName | titlecase}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- Info Text -->\r\n <p class=\"hint-text mt-20\">\r\n {{ selectedZones.length < 1\r\n ? 'Choose minimum 2, max 3 Zones to compare'\r\n : 'Maximum 3 Zones to compare' }}\r\n </p>\r\n\r\n <!-- Apply Button -->\r\n <div class=\"button-group\">\r\n <!-- Reset button: show only when 3 zones selected -->\r\n <button\r\n *ngIf=\"selectedZones.length >= 1\"\r\n class=\"btn btn-outline reset-btn w-100\"\r\n (click)=\"clearZones()\"\r\n >\r\n Reset\r\n </button>\r\n\r\n <!-- Apply button: always visible -->\r\n <button\r\n class=\"apply-btn w-100\"\r\n [class.active]=\"selectedZones.length >= 1\"\r\n [disabled]=\"selectedZones.length < 1\"\r\n (click)=\"applyZones()\"\r\n >\r\n Apply\r\n </button>\r\n</div>\r\n\r\n</div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"card-header ellipse1 border-0 px-3 mb-2\">\r\n <h3 class=\"card-title align-items-start flex-column\"><span class=\"card-label header\">Based on Overall\r\n Footfall</span><span class=\"sub-header\">Tells you the percentage of total store footfall attributed to each zone\r\n </span></h3>\r\n </div>\r\n<div class=\"d-flex justify-content-between mt-3\" >\r\n <div class=\"bordered-box w-50 me-2 py-3\">\r\n <div class=\"group d-flex justify-content-between px-3\">\r\n <span class=\"text-title py-2\">Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{getNewZoneFFData?.overallFootfall ? getNewZoneFFData?.overallFootfall :'--'}}</span> <span class=\"text-perc ms-1\">({{getNewZoneFFData?.overallFootfallPercentage ? getNewZoneFFData?.overallFootfallPercentage :'--'}})</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-3\">\r\n <div class=\"group d-flex justify-content-between px-3\">\r\n <span class=\"text-title py-2\"><span *ngIf=\"this.clientData?.isNOB\">NoB :</span> <span *ngIf=\"!this.clientData?.isNOB\">Conversion :</span></span>\r\n <span class=\"text-val\">{{getNewZoneFFData?.nobCount ?? '0'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\"><svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <table *ngIf=\"!noSelectedData\" class=\"table bottom-border mt-3\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th class=\"w-50\">Zones</th>\r\n <th class=\"w-25\">Footfall Count (Concentration %)</th>\r\n <th class=\"w-25\">NoB (%)<span class=\"ms-1\"><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_16456_114211)\">\r\n<path d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6825 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6825 1.33301 14.6673 4.31778 14.6673 7.99967Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<clipPath id=\"clip0_16456_114211\">\r\n<rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n</clipPath>\r\n</defs>\r\n</svg></span></th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of zones\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.zoneName | titlecase}}\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=\"5px\" type=\"primary\" [value]=\"item.percentage\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.footfall }} ({{ item.percentage }}%)\r\n <!-- {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}}% -->\r\n \r\n </div>\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=\"5px\" type=\"primary\" [value]=\"item.noBPercentage\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.noB }} ({{ item.noBPercentage }}%)\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n\r\n\r\n <div *ngIf=\"noSelectedData\" class=\"row\">\r\n <div class=\"card-body pb-0 px-0 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"footimg-nodata1\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title mb-3\">Select Zones to Compare</div>\r\n <!-- <div class=\"nodata-sub\">There is no result for this conversion funnel</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n", styles: ["#customerJourneyChart{width:100%;height:500px}#customer-journey-chart .rotate{transform:rotate(180deg)}#customer-journey-chart h3{color:var(--Gray-900, #101828);font-size:20px;font-style:normal;font-weight:600;line-height:30px;margin:0}#customer-journey-chart #segment-btn{display:flex;align-items:center}#customer-journey-chart #segment-btn .segment{background:var(--Gray-50, #f9fafb);cursor:pointer;padding:10px}#customer-journey-chart #segment-btn .segment svg>path{stroke:#344054}#customer-journey-chart #segment-btn .segment.active{background:var(--Primary-50, #eaf8ff)}#customer-journey-chart #segment-btn .segment.active svg>path{stroke:#009bf3}#customer-journey-chart #segment-btn .chart-btn{border-radius:8px 0 0 8px}#customer-journey-chart #segment-btn .table-btn{border-radius:0 8px 8px 0}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.compare-card{width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 10px #0000000d;font-family:Inter,sans-serif}.selected-zones{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.zone-chip{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #d6e4f0;border-radius:8px;padding:6px 10px}.drag-icon{cursor:grab;opacity:.6;margin-right:6px}.remove-btn{border:none;background:transparent;cursor:pointer;font-size:16px;color:#666}.dropdown-container{width:100%;padding:8px;border:1px solid #d0dce8;border-radius:8px;background:#fff;color:#00a3ff;font-weight:500;cursor:pointer;text-align:left}.dropdown{position:relative;margin-top:8px;background:#fff;border:1px solid #d0dce8;border-radius:8px;box-shadow:0 2px 6px #0000001a;padding:8px}.dropdown-search{width:100%;padding:6px;border-radius:6px;border:1px solid #ccc;margin-bottom:6px}.dropdown-list{max-height:150px;overflow-y:auto;list-style:none;margin:0;padding:0}.dropdown-list li{padding:6px 8px;cursor:pointer;border-radius:6px}.dropdown-list li:hover{background:#f0f7ff}.dropdown-list li.disabled{color:#aaa;pointer-events:none}.hint-text{color:#a0a0a0;font-size:12px;margin:8px 0}.button-group{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}.reset-btn{padding:10px 16px;border:1px solid #0b0b0b;color:#0b0b0b;border-radius:8px;background:transparent;font-weight:600;cursor:pointer}.apply-btn{padding:10px 16px;border-radius:8px;background:#bcdcff;color:#fff;border:none;font-weight:600;cursor:not-allowed}.apply-btn.active{background:#00a3ff;cursor:pointer}.bordered-box{border:1px solid #EAECF0;border-radius:8px;padding:10px}.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-header,.header{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-style:normal;font-weight:700;line-height:30px}.sub-header{color:var(--Gray-700, #344054)!important;font-size:13px!important;font-style:normal;font-weight:500;line-height:20px}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
3440
3438
  }
3441
3439
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerJourneyChartComponent, decorators: [{
3442
3440
  type: Component,
3443
- args: [{ selector: 'lib-customer-journey-chart', template: "<!-- <section id=\"customer-journey-chart\" class=\"card p-5\"> -->\r\n <!-- ---------HEADER---------- -->\r\n <!-- <div class=\"d-flex justify-content-between mb-3\">\r\n <div class=\"d-flex align-items-center justify-content-center gap-3\">\r\n <h3>Customer Journey</h3>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_13146_67458)\">\r\n <path\r\n d=\"M6.06065 6.91667C6.21739 6.47111 6.52675 6.0954 6.93395 5.85609C7.34116 5.61677 7.81991 5.52929 8.28544 5.60914C8.75096 5.68899 9.1732 5.93102 9.47737 6.29235C9.78154 6.65369 9.94802 7.11101 9.94732 7.58333C9.94732 8.91667 7.94732 9.58333 7.94732 9.58333M8.00065 12.25H8.00732M14.6673 8.91667C14.6673 12.5986 11.6826 15.5833 8.00065 15.5833C4.31875 15.5833 1.33398 12.5986 1.33398 8.91667C1.33398 5.23477 4.31875 2.25 8.00065 2.25C11.6826 2.25 14.6673 5.23477 14.6673 8.91667Z\"\r\n stroke=\"#98A2B3\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_13146_67458\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0 0.916016)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-5\">\r\n <div style=\"position: relative\" [hidden]=\"viewMode === 'chart'\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding: 0.68rem 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div id=\"segment-btn\">\r\n <div [class.active]=\"viewMode === 'chart'\" class=\"segment chart-btn\" (click)=\"toggleView('chart')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M15 17.5833V9.25M10 17.5833V4.25M5 17.5833V12.5833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n\r\n <div [class.active]=\"viewMode === 'table'\" class=\"segment table-btn\" (click)=\"toggleView('table')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M6.66667 5.91602H17.5M6.66667 10.916H17.5M6.66667 15.916H17.5M2.5 5.91602H2.50833M2.5 10.916H2.50833M2.5 15.916H2.50833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\r\n <path\r\n d=\"M12 13.916C12.5523 13.916 13 13.4683 13 12.916C13 12.3637 12.5523 11.916 12 11.916C11.4477 11.916 11 12.3637 11 12.916C11 13.4683 11.4477 13.916 12 13.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 6.91602C12.5523 6.91602 13 6.4683 13 5.91602C13 5.36373 12.5523 4.91602 12 4.91602C11.4477 4.91602 11 5.36373 11 5.91602C11 6.4683 11.4477 6.91602 12 6.91602Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 20.916C12.5523 20.916 13 20.4683 13 19.916C13 19.3637 12.5523 18.916 12 18.916C11.4477 18.916 11 19.3637 11 19.916C11 20.4683 11.4477 20.916 12 20.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li>\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M6.00065 1.33398V10.6673M1.33398 6.00065H10.6673\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"addNewZone()\"> Add New Zone </a>\r\n </span>\r\n </li>\r\n <li [hidden]=\"viewMode === 'chart'\">\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M11.3333 5.33333L8 2M8 2L4.66667 5.33333M8 2V10\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"export()\"> Export </a>\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- <div [hidden]=\"!isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div 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> -->\r\n <!-- <div [hidden]=\"isPageLoading\"> -->\r\n <!-- ---------CHART---------- -->\r\n <!-- <div [hidden]=\"viewMode === 'table'\">\r\n <div [hidden]=\"customerJourneyChartData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\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 Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyChartData.length === 0\">\r\n <div id=\"customerJourneyChart\"></div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- ---------TABLE---------- -->\r\n <!-- <div [hidden]=\"viewMode === 'chart'\">\r\n <div [hidden]=\"customerJourneyTableData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\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 Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyTableData.length === 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneName')\">\r\n Zone Name\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneName' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('noOfStores')\">\r\n No. of stores\r\n <svg\r\n [ngClass]=\"sortedColumn === 'noOfStores' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'noOfStores' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneFF')\">\r\n Zone FF\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneFF' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'zoneFF' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('impressions')\">\r\n Concentration\r\n <svg\r\n [ngClass]=\"sortedColumn === 'impressions' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'impressions' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg\r\n [ngClass]=\"sortedColumn === 'AvgDwellTime' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'AvgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyTableData\">\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneName || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.noOfStores || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneFF || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.impressions || 0 }}%</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.AvgDwellTime || 0 }} Mins</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n \r\n <lib-pagination\r\n class=\"text-start\"\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n ></lib-pagination>\r\n </div>\r\n </div> -->\r\n <!-- </div>\r\n</section> -->\r\n\r\n<div class=\"card mt-3\">\r\n <div class=\"card-header border-bottom-0 d-flex justify-content-between align-items-center\">\r\n <h3 class=\"card-title\">Zone-Based Shopper Journey </h3>\r\n <div class=\"card-toolbar\">\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" *ngIf=\"selectedZones.length >= 1\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n</div>\r\n<div class=\"card-body pt-1\">\r\n <div class=\"row bordered-box\">\r\n <div class=\"col-md-3\">\r\n <div class=\"compare-card\">\r\n <h3>Select Zones to Compare</h3>\r\n\r\n <!-- Selected Zones List -->\r\n <div class=\"selected-zones\">\r\n <div *ngFor=\"let zone of selectedZones; let i = index\" class=\"zone-chip\" draggable=\"true\"\r\n (dragstart)=\"onDragStart(i)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (drop)=\"onDrop(i)\">\r\n <span class=\"drag-icon\" (mousedown)=\"enableDrag($event)\"\r\n (mouseup)=\"disableDrag($event)\">\u2630</span>\r\n <span>{{ zone.zoneName | titlecase}}</span>\r\n <button class=\"remove-btn\" (click)=\"removeZone(i)\">\u2715</button>\r\n </div>\r\n </div>\r\n\r\n <!-- Select Dropdown -->\r\n <div class=\"select-zone\" *ngIf=\"selectedZones.length < 3\">\r\n <div class=\"dropdown-container\" (click)=\"toggleDropdown()\">\r\n <span>+ Select Zone</span>\r\n </div>\r\n\r\n <div class=\"dropdown\" *ngIf=\"dropdownOpen\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Search zones...\"\r\n [(ngModel)]=\"searchText\"\r\n class=\"dropdown-search\"\r\n />\r\n <ul class=\"dropdown-list\">\r\n <li\r\n *ngFor=\"let zone of filteredZones()\"\r\n (click)=\"selectZone(zone)\"\r\n [class.disabled]=\"selectedZones.includes(zone)\"\r\n >\r\n {{ zone?.zoneName | titlecase}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- Info Text -->\r\n <p class=\"hint-text mt-20\">\r\n {{ selectedZones.length < 1\r\n ? 'Choose minimum 2, max 3 Zones to compare'\r\n : 'Maximum 3 Zones to compare' }}\r\n </p>\r\n\r\n <!-- Apply Button -->\r\n <div class=\"button-group\">\r\n <!-- Reset button: show only when 3 zones selected -->\r\n <button\r\n *ngIf=\"selectedZones.length >= 1\"\r\n class=\"btn btn-outline reset-btn w-100\"\r\n (click)=\"clearZones()\"\r\n >\r\n Reset\r\n </button>\r\n\r\n <!-- Apply button: always visible -->\r\n <button\r\n class=\"apply-btn w-100\"\r\n [class.active]=\"selectedZones.length >= 1\"\r\n [disabled]=\"selectedZones.length < 1\"\r\n (click)=\"applyZones()\"\r\n >\r\n Apply\r\n </button>\r\n</div>\r\n\r\n</div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"card-header ellipse1 border-0 px-3 mb-2\">\r\n <h3 class=\"card-title align-items-start flex-column\"><span class=\"card-label header\">Based on Overall\r\n Footfall</span><span class=\"sub-header\">Tells you the percentage of total store footfall attributed to each zone\r\n </span></h3>\r\n </div>\r\n<div class=\"d-flex justify-content-between mt-3\" >\r\n <div class=\"bordered-box w-50 me-2 py-3\">\r\n <div class=\"group d-flex justify-content-between px-3\">\r\n <span class=\"text-title py-2\">Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{getNewZoneFFData?.overallFootfall ? getNewZoneFFData?.overallFootfall :'--'}}</span> <span class=\"text-perc ms-1\">({{getNewZoneFFData?.overallFootfallPercentage ? getNewZoneFFData?.overallFootfallPercentage :'--'}})</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-3\">\r\n <div class=\"group d-flex justify-content-between px-3\">\r\n <span class=\"text-title py-2\"><span *ngIf=\"this.clientData?.isNOB\">NoB :</span> <span *ngIf=\"!this.clientData?.isNOB\">Conversion :</span></span>\r\n <span class=\"text-val\">{{getNewZoneFFData?.nobCount ?? '0'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\"><svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <table *ngIf=\"!noSelectedData\" class=\"table bottom-border mt-3\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th class=\"w-50\">Zones</th>\r\n <th class=\"w-50\">Footfall Count (Concentration %)</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of zones\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.zoneName | titlecase}}\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=\"5px\" type=\"primary\" [value]=\"item.percentage\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.footfall }} ({{ item.percentage }}%)\r\n <!-- {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}}% -->\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n\r\n\r\n <div *ngIf=\"noSelectedData\" class=\"row\">\r\n <div class=\"card-body pb-0 px-0 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"footimg-nodata1\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title mb-3\">Select Zones to Compare</div>\r\n <!-- <div class=\"nodata-sub\">There is no result for this conversion funnel</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n", styles: ["#customerJourneyChart{width:100%;height:500px}#customer-journey-chart .rotate{transform:rotate(180deg)}#customer-journey-chart h3{color:var(--Gray-900, #101828);font-size:20px;font-style:normal;font-weight:600;line-height:30px;margin:0}#customer-journey-chart #segment-btn{display:flex;align-items:center}#customer-journey-chart #segment-btn .segment{background:var(--Gray-50, #f9fafb);cursor:pointer;padding:10px}#customer-journey-chart #segment-btn .segment svg>path{stroke:#344054}#customer-journey-chart #segment-btn .segment.active{background:var(--Primary-50, #eaf8ff)}#customer-journey-chart #segment-btn .segment.active svg>path{stroke:#009bf3}#customer-journey-chart #segment-btn .chart-btn{border-radius:8px 0 0 8px}#customer-journey-chart #segment-btn .table-btn{border-radius:0 8px 8px 0}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.compare-card{width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 10px #0000000d;font-family:Inter,sans-serif}.selected-zones{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.zone-chip{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #d6e4f0;border-radius:8px;padding:6px 10px}.drag-icon{cursor:grab;opacity:.6;margin-right:6px}.remove-btn{border:none;background:transparent;cursor:pointer;font-size:16px;color:#666}.dropdown-container{width:100%;padding:8px;border:1px solid #d0dce8;border-radius:8px;background:#fff;color:#00a3ff;font-weight:500;cursor:pointer;text-align:left}.dropdown{position:relative;margin-top:8px;background:#fff;border:1px solid #d0dce8;border-radius:8px;box-shadow:0 2px 6px #0000001a;padding:8px}.dropdown-search{width:100%;padding:6px;border-radius:6px;border:1px solid #ccc;margin-bottom:6px}.dropdown-list{max-height:150px;overflow-y:auto;list-style:none;margin:0;padding:0}.dropdown-list li{padding:6px 8px;cursor:pointer;border-radius:6px}.dropdown-list li:hover{background:#f0f7ff}.dropdown-list li.disabled{color:#aaa;pointer-events:none}.hint-text{color:#a0a0a0;font-size:12px;margin:8px 0}.button-group{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}.reset-btn{padding:10px 16px;border:1px solid #0b0b0b;color:#0b0b0b;border-radius:8px;background:transparent;font-weight:600;cursor:pointer}.apply-btn{padding:10px 16px;border-radius:8px;background:#bcdcff;color:#fff;border:none;font-weight:600;cursor:not-allowed}.apply-btn.active{background:#00a3ff;cursor:pointer}.bordered-box{border:1px solid #EAECF0;border-radius:8px;padding:10px}.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-header,.header{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-style:normal;font-weight:700;line-height:30px}.sub-header{color:var(--Gray-700, #344054)!important;font-size:13px!important;font-style:normal;font-weight:500;line-height:20px}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}\n"] }]
3441
+ args: [{ selector: 'lib-customer-journey-chart', template: "<!-- <section id=\"customer-journey-chart\" class=\"card p-5\"> -->\r\n <!-- ---------HEADER---------- -->\r\n <!-- <div class=\"d-flex justify-content-between mb-3\">\r\n <div class=\"d-flex align-items-center justify-content-center gap-3\">\r\n <h3>Customer Journey</h3>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_13146_67458)\">\r\n <path\r\n d=\"M6.06065 6.91667C6.21739 6.47111 6.52675 6.0954 6.93395 5.85609C7.34116 5.61677 7.81991 5.52929 8.28544 5.60914C8.75096 5.68899 9.1732 5.93102 9.47737 6.29235C9.78154 6.65369 9.94802 7.11101 9.94732 7.58333C9.94732 8.91667 7.94732 9.58333 7.94732 9.58333M8.00065 12.25H8.00732M14.6673 8.91667C14.6673 12.5986 11.6826 15.5833 8.00065 15.5833C4.31875 15.5833 1.33398 12.5986 1.33398 8.91667C1.33398 5.23477 4.31875 2.25 8.00065 2.25C11.6826 2.25 14.6673 5.23477 14.6673 8.91667Z\"\r\n stroke=\"#98A2B3\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_13146_67458\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0 0.916016)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-5\">\r\n <div style=\"position: relative\" [hidden]=\"viewMode === 'chart'\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding: 0.68rem 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div id=\"segment-btn\">\r\n <div [class.active]=\"viewMode === 'chart'\" class=\"segment chart-btn\" (click)=\"toggleView('chart')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M15 17.5833V9.25M10 17.5833V4.25M5 17.5833V12.5833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n\r\n <div [class.active]=\"viewMode === 'table'\" class=\"segment table-btn\" (click)=\"toggleView('table')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M6.66667 5.91602H17.5M6.66667 10.916H17.5M6.66667 15.916H17.5M2.5 5.91602H2.50833M2.5 10.916H2.50833M2.5 15.916H2.50833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\r\n <path\r\n d=\"M12 13.916C12.5523 13.916 13 13.4683 13 12.916C13 12.3637 12.5523 11.916 12 11.916C11.4477 11.916 11 12.3637 11 12.916C11 13.4683 11.4477 13.916 12 13.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 6.91602C12.5523 6.91602 13 6.4683 13 5.91602C13 5.36373 12.5523 4.91602 12 4.91602C11.4477 4.91602 11 5.36373 11 5.91602C11 6.4683 11.4477 6.91602 12 6.91602Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 20.916C12.5523 20.916 13 20.4683 13 19.916C13 19.3637 12.5523 18.916 12 18.916C11.4477 18.916 11 19.3637 11 19.916C11 20.4683 11.4477 20.916 12 20.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li>\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M6.00065 1.33398V10.6673M1.33398 6.00065H10.6673\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"addNewZone()\"> Add New Zone </a>\r\n </span>\r\n </li>\r\n <li [hidden]=\"viewMode === 'chart'\">\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M11.3333 5.33333L8 2M8 2L4.66667 5.33333M8 2V10\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"export()\"> Export </a>\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- <div [hidden]=\"!isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div 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> -->\r\n <!-- <div [hidden]=\"isPageLoading\"> -->\r\n <!-- ---------CHART---------- -->\r\n <!-- <div [hidden]=\"viewMode === 'table'\">\r\n <div [hidden]=\"customerJourneyChartData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\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 Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyChartData.length === 0\">\r\n <div id=\"customerJourneyChart\"></div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- ---------TABLE---------- -->\r\n <!-- <div [hidden]=\"viewMode === 'chart'\">\r\n <div [hidden]=\"customerJourneyTableData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\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 Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyTableData.length === 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneName')\">\r\n Zone Name\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneName' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('noOfStores')\">\r\n No. of stores\r\n <svg\r\n [ngClass]=\"sortedColumn === 'noOfStores' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'noOfStores' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneFF')\">\r\n Zone FF\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneFF' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'zoneFF' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('impressions')\">\r\n Concentration\r\n <svg\r\n [ngClass]=\"sortedColumn === 'impressions' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'impressions' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg\r\n [ngClass]=\"sortedColumn === 'AvgDwellTime' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\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]=\"sortedColumn === 'AvgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyTableData\">\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneName || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.noOfStores || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneFF || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.impressions || 0 }}%</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.AvgDwellTime || 0 }} Mins</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n \r\n <lib-pagination\r\n class=\"text-start\"\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n ></lib-pagination>\r\n </div>\r\n </div> -->\r\n <!-- </div>\r\n</section> -->\r\n\r\n<div class=\"card mt-3\">\r\n <div class=\"card-header border-bottom-0 d-flex justify-content-between align-items-center\">\r\n <h3 class=\"card-title\">Zone-Based Shopper Journey </h3>\r\n <div class=\"card-toolbar\">\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" *ngIf=\"selectedZones.length >= 1\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n</div>\r\n<div class=\"card-body pt-1\">\r\n <div class=\"row bordered-box\">\r\n <div class=\"col-md-3\">\r\n <div class=\"compare-card\">\r\n <h3>Select Zones to Compare</h3>\r\n\r\n <!-- Selected Zones List -->\r\n <div class=\"selected-zones\">\r\n <div *ngFor=\"let zone of selectedZones; let i = index\" class=\"zone-chip\" draggable=\"true\"\r\n (dragstart)=\"onDragStart(i)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (drop)=\"onDrop(i)\">\r\n <span class=\"drag-icon\" (mousedown)=\"enableDrag($event)\"\r\n (mouseup)=\"disableDrag($event)\">\u2630</span>\r\n <span>{{ zone.zoneName | titlecase}}</span>\r\n <button class=\"remove-btn\" (click)=\"removeZone(i)\">\u2715</button>\r\n </div>\r\n </div>\r\n\r\n <!-- Select Dropdown -->\r\n <div class=\"select-zone\" *ngIf=\"selectedZones.length < 3\">\r\n <div class=\"dropdown-container\" (click)=\"toggleDropdown()\">\r\n <span>+ Select Zone</span>\r\n </div>\r\n\r\n <div class=\"dropdown\" *ngIf=\"dropdownOpen\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Search zones...\"\r\n [(ngModel)]=\"searchText\"\r\n class=\"dropdown-search\"\r\n />\r\n <ul class=\"dropdown-list\">\r\n <li\r\n *ngFor=\"let zone of filteredZones()\"\r\n (click)=\"selectZone(zone)\"\r\n [class.disabled]=\"selectedZones.includes(zone)\"\r\n >\r\n {{ zone?.zoneName | titlecase}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- Info Text -->\r\n <p class=\"hint-text mt-20\">\r\n {{ selectedZones.length < 1\r\n ? 'Choose minimum 2, max 3 Zones to compare'\r\n : 'Maximum 3 Zones to compare' }}\r\n </p>\r\n\r\n <!-- Apply Button -->\r\n <div class=\"button-group\">\r\n <!-- Reset button: show only when 3 zones selected -->\r\n <button\r\n *ngIf=\"selectedZones.length >= 1\"\r\n class=\"btn btn-outline reset-btn w-100\"\r\n (click)=\"clearZones()\"\r\n >\r\n Reset\r\n </button>\r\n\r\n <!-- Apply button: always visible -->\r\n <button\r\n class=\"apply-btn w-100\"\r\n [class.active]=\"selectedZones.length >= 1\"\r\n [disabled]=\"selectedZones.length < 1\"\r\n (click)=\"applyZones()\"\r\n >\r\n Apply\r\n </button>\r\n</div>\r\n\r\n</div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"card-header ellipse1 border-0 px-3 mb-2\">\r\n <h3 class=\"card-title align-items-start flex-column\"><span class=\"card-label header\">Based on Overall\r\n Footfall</span><span class=\"sub-header\">Tells you the percentage of total store footfall attributed to each zone\r\n </span></h3>\r\n </div>\r\n<div class=\"d-flex justify-content-between mt-3\" >\r\n <div class=\"bordered-box w-50 me-2 py-3\">\r\n <div class=\"group d-flex justify-content-between px-3\">\r\n <span class=\"text-title py-2\">Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{getNewZoneFFData?.overallFootfall ? getNewZoneFFData?.overallFootfall :'--'}}</span> <span class=\"text-perc ms-1\">({{getNewZoneFFData?.overallFootfallPercentage ? getNewZoneFFData?.overallFootfallPercentage :'--'}})</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-3\">\r\n <div class=\"group d-flex justify-content-between px-3\">\r\n <span class=\"text-title py-2\"><span *ngIf=\"this.clientData?.isNOB\">NoB :</span> <span *ngIf=\"!this.clientData?.isNOB\">Conversion :</span></span>\r\n <span class=\"text-val\">{{getNewZoneFFData?.nobCount ?? '0'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\"><svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <table *ngIf=\"!noSelectedData\" class=\"table bottom-border mt-3\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th class=\"w-50\">Zones</th>\r\n <th class=\"w-25\">Footfall Count (Concentration %)</th>\r\n <th class=\"w-25\">NoB (%)<span class=\"ms-1\"><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_16456_114211)\">\r\n<path d=\"M8.00065 10.6663V7.99967M8.00065 5.33301H8.00732M14.6673 7.99967C14.6673 11.6816 11.6825 14.6663 8.00065 14.6663C4.31875 14.6663 1.33398 11.6816 1.33398 7.99967C1.33398 4.31778 4.31875 1.33301 8.00065 1.33301C11.6825 1.33301 14.6673 4.31778 14.6673 7.99967Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<clipPath id=\"clip0_16456_114211\">\r\n<rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n</clipPath>\r\n</defs>\r\n</svg></span></th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of zones\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.zoneName | titlecase}}\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=\"5px\" type=\"primary\" [value]=\"item.percentage\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.footfall }} ({{ item.percentage }}%)\r\n <!-- {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}}% -->\r\n \r\n </div>\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=\"5px\" type=\"primary\" [value]=\"item.noBPercentage\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.noB }} ({{ item.noBPercentage }}%)\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n\r\n\r\n <div *ngIf=\"noSelectedData\" class=\"row\">\r\n <div class=\"card-body pb-0 px-0 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"footimg-nodata1\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title mb-3\">Select Zones to Compare</div>\r\n <!-- <div class=\"nodata-sub\">There is no result for this conversion funnel</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n", styles: ["#customerJourneyChart{width:100%;height:500px}#customer-journey-chart .rotate{transform:rotate(180deg)}#customer-journey-chart h3{color:var(--Gray-900, #101828);font-size:20px;font-style:normal;font-weight:600;line-height:30px;margin:0}#customer-journey-chart #segment-btn{display:flex;align-items:center}#customer-journey-chart #segment-btn .segment{background:var(--Gray-50, #f9fafb);cursor:pointer;padding:10px}#customer-journey-chart #segment-btn .segment svg>path{stroke:#344054}#customer-journey-chart #segment-btn .segment.active{background:var(--Primary-50, #eaf8ff)}#customer-journey-chart #segment-btn .segment.active svg>path{stroke:#009bf3}#customer-journey-chart #segment-btn .chart-btn{border-radius:8px 0 0 8px}#customer-journey-chart #segment-btn .table-btn{border-radius:0 8px 8px 0}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.compare-card{width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 10px #0000000d;font-family:Inter,sans-serif}.selected-zones{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.zone-chip{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #d6e4f0;border-radius:8px;padding:6px 10px}.drag-icon{cursor:grab;opacity:.6;margin-right:6px}.remove-btn{border:none;background:transparent;cursor:pointer;font-size:16px;color:#666}.dropdown-container{width:100%;padding:8px;border:1px solid #d0dce8;border-radius:8px;background:#fff;color:#00a3ff;font-weight:500;cursor:pointer;text-align:left}.dropdown{position:relative;margin-top:8px;background:#fff;border:1px solid #d0dce8;border-radius:8px;box-shadow:0 2px 6px #0000001a;padding:8px}.dropdown-search{width:100%;padding:6px;border-radius:6px;border:1px solid #ccc;margin-bottom:6px}.dropdown-list{max-height:150px;overflow-y:auto;list-style:none;margin:0;padding:0}.dropdown-list li{padding:6px 8px;cursor:pointer;border-radius:6px}.dropdown-list li:hover{background:#f0f7ff}.dropdown-list li.disabled{color:#aaa;pointer-events:none}.hint-text{color:#a0a0a0;font-size:12px;margin:8px 0}.button-group{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}.reset-btn{padding:10px 16px;border:1px solid #0b0b0b;color:#0b0b0b;border-radius:8px;background:transparent;font-weight:600;cursor:pointer}.apply-btn{padding:10px 16px;border-radius:8px;background:#bcdcff;color:#fff;border:none;font-weight:600;cursor:not-allowed}.apply-btn.active{background:#00a3ff;cursor:pointer}.bordered-box{border:1px solid #EAECF0;border-radius:8px;padding:10px}.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-header,.header{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-style:normal;font-weight:700;line-height:30px}.sub-header{color:var(--Gray-700, #344054)!important;font-size:13px!important;font-style:normal;font-weight:500;line-height:20px}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}\n"] }]
3444
3442
  }], ctorParameters: () => [{ type: i4$1.Router }, { type: i4.ToastService }, { type: i2.GlobalStateService }, { type: ZoneService }, { type: Zonev2Service }], propDecorators: { clientData: [{
3445
3443
  type: Input
3446
3444
  }] } });