tango-app-ui-analyse-zone 3.7.1-beta.20 → 3.7.1-beta.21

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 (9) hide show
  1. package/esm2022/lib/components/customer-journey-chart/customer-journey-chart.component.mjs +33 -3
  2. package/esm2022/lib/components/overallcards/overallcards.component.mjs +27 -68
  3. package/esm2022/lib/components/zone-journey/zone-journey.component.mjs +85 -29
  4. package/fesm2022/tango-app-ui-analyse-zone.mjs +142 -97
  5. package/fesm2022/tango-app-ui-analyse-zone.mjs.map +1 -1
  6. package/lib/components/customer-journey-chart/customer-journey-chart.component.d.ts +6 -0
  7. package/lib/components/overallcards/overallcards.component.d.ts +2 -6
  8. package/lib/components/zone-journey/zone-journey.component.d.ts +2 -0
  9. 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, startWith as startWith$1, skip as skip$1 } from 'rxjs';
3
+ import { BehaviorSubject, takeUntil, Subject, throwError, debounceTime, interval, 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';
@@ -466,8 +466,8 @@ class OverallcardsComponent {
466
466
  if (this.genderroot) {
467
467
  this.genderroot.dispose();
468
468
  }
469
- this.pathApiCancel$.next();
470
- this.pathApiCancel$.complete();
469
+ this.autoSlideStop$.next();
470
+ this.autoSlideStop$.complete();
471
471
  this.destroy$.next();
472
472
  this.destroy$.complete();
473
473
  }
@@ -476,23 +476,15 @@ class OverallcardsComponent {
476
476
  const chartDiv = document.getElementById("genderchartdiv");
477
477
  if (!chartDiv)
478
478
  return;
479
- // Dispose old chart
480
479
  if (this.genderroot) {
481
480
  this.genderroot.dispose();
482
481
  }
483
- // Root
484
482
  this.genderroot = am5.Root.new("genderchartdiv");
485
- // =============================
486
- // MAIN HORIZONTAL WRAPPER
487
- // =============================
488
483
  const wrapper = this.genderroot.container.children.push(am5.Container.new(this.genderroot, {
489
484
  width: am5.percent(100),
490
485
  height: am5.percent(100),
491
486
  layout: this.genderroot.horizontalLayout
492
487
  }));
493
- // =============================
494
- // LEFT : PIE / DONUT CHART
495
- // =============================
496
488
  const chart = wrapper.children.push(am5percent.PieChart.new(this.genderroot, {
497
489
  endAngle: 270,
498
490
  innerRadius: am5.percent(60),
@@ -505,19 +497,13 @@ class OverallcardsComponent {
505
497
  endAngle: 270,
506
498
  alignLabels: false
507
499
  }));
508
- // Hide slice labels
509
500
  series.labels.template.setAll({
510
501
  visible: false
511
502
  });
512
- // Hide ticks
513
503
  series.ticks.template.setAll({
514
504
  visible: false
515
505
  });
516
- // Data
517
506
  series.data.setAll(this.genderAnalysis);
518
- // =============================
519
- // RIGHT : LEGEND
520
- // =============================
521
507
  const legend = wrapper.children.push(am5.Legend.new(this.genderroot, {
522
508
  width: am5.percent(50),
523
509
  paddingTop: 20,
@@ -544,9 +530,6 @@ class OverallcardsComponent {
544
530
  width: am5.percent(100)
545
531
  });
546
532
  legend.data.setAll(series.dataItems);
547
- // =============================
548
- // ANIMATION
549
- // =============================
550
533
  series.appear(1000, 100);
551
534
  }, 100);
552
535
  }
@@ -805,97 +788,73 @@ class OverallcardsComponent {
805
788
  customerTravelPath = [];
806
789
  paths = [];
807
790
  activePathIndex = 0;
808
- autoSlideInterval;
809
791
  pathLoading = true;
810
792
  pathNoData = false;
811
- pathApiCancel$ = new Subject();
793
+ autoSlideStop$ = new Subject();
794
+ /* ---------------- API ---------------- */
812
795
  getCustomPath() {
813
796
  this.pathLoading = true;
814
797
  this.pathNoData = false;
815
- this.pathApiCancel$.next();
816
- // 🔥 ALWAYS stop old interval first
817
- this.stopAutoSlide();
798
+ this.autoSlideStop$.next();
818
799
  const obj = {
819
800
  fromDate: this.headerData.date.startDate,
820
801
  toDate: this.headerData.date.endDate,
821
802
  storeId: this.headerData.stores
822
- .filter((store) => store.checked)
823
- .map((store) => store.storeId),
803
+ .filter((s) => s.checked)
804
+ .map((s) => s.storeId),
824
805
  clietId: this.headerData.client,
825
- nPaths: 5,
806
+ nPaths: 5
826
807
  };
827
808
  this.ZoneService.getNewCustomerTravelZoneeApi(obj)
828
- .pipe(takeUntil$1(this.pathApiCancel$))
809
+ .pipe(takeUntil$1(this.destroy$))
829
810
  .subscribe({
830
811
  next: (res) => {
831
812
  this.pathLoading = false;
832
- if (!res ||
833
- res.code !== 200 ||
834
- !res.data?.customer_travel_path?.length) {
813
+ if (!res?.data?.customer_travel_path?.length) {
835
814
  this.paths = [];
836
815
  this.pathNoData = true;
837
- this.stopAutoSlide();
838
- this.cd.detectChanges();
839
816
  return;
840
817
  }
841
- // ✅ DATA EXISTS
842
818
  const travelPathObj = res.data.customer_travel_path[0];
843
- this.paths = Object.keys(travelPathObj).map((key) => ({
819
+ this.paths = Object.keys(travelPathObj).map(key => ({
844
820
  label: key,
845
821
  percent: travelPathObj[key].percent,
846
- path: travelPathObj[key].path,
822
+ path: travelPathObj[key].path
847
823
  }));
848
824
  this.activePathIndex = 0;
849
825
  this.pathNoData = false;
850
- this.cd.detectChanges();
851
- // 🔥 START AUTO SLIDE ONLY HERE
852
- this.startAutoSlide();
826
+ // 🔥 START AUTO CAROUSEL (ONLY HERE)
827
+ this.startAutoCarousel();
853
828
  },
854
829
  error: () => {
855
830
  this.paths = [];
856
831
  this.pathNoData = true;
857
832
  this.pathLoading = false;
858
- this.stopAutoSlide();
859
- },
833
+ }
860
834
  });
861
835
  }
862
836
  next() {
863
837
  this.activePathIndex =
864
838
  (this.activePathIndex + 1) % this.paths.length;
865
- this.startAutoSlide();
866
839
  }
867
840
  prev() {
868
841
  this.activePathIndex =
869
842
  (this.activePathIndex - 1 + this.paths.length) % this.paths.length;
870
- this.startAutoSlide();
871
843
  }
872
844
  goTo(index) {
873
845
  this.activePathIndex = index;
874
- this.startAutoSlide();
875
846
  }
876
- /* ---------- AUTO SLIDE ---------- */
877
- autoSlideTimer = null;
878
- startAutoSlide() {
879
- if (!this.paths || this.paths.length <= 1)
847
+ startAutoCarousel() {
848
+ if (this.paths.length <= 1)
880
849
  return;
881
- this.stopAutoSlide();
882
- this.zone.run(() => {
883
- this.autoSlideTimer = setInterval(() => {
884
- this.activePathIndex =
885
- (this.activePathIndex + 1) % this.paths.length;
886
- this.startAutoSlide(); // 🔁 recursive
887
- }, 300);
850
+ interval(3000) // ⏱ 3 seconds
851
+ .pipe(takeUntil$1(this.autoSlideStop$), takeUntil$1(this.destroy$))
852
+ .subscribe(() => {
853
+ this.activePathIndex =
854
+ (this.activePathIndex + 1) % this.paths.length;
855
+ this.cd.detectChanges();
888
856
  });
889
857
  }
890
- stopAutoSlide() {
891
- if (this.autoSlideTimer) {
892
- clearTimeout(this.autoSlideTimer);
893
- this.autoSlideTimer = null;
894
- }
895
- }
896
- restartAutoSlide() {
897
- this.startAutoSlide();
898
- }
899
858
  availableZones = [];
900
859
  selectedZone = '';
901
860
  getAvailableZones() {
@@ -958,11 +917,11 @@ class OverallcardsComponent {
958
917
  });
959
918
  }
960
919
  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 });
961
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverallcardsComponent, selector: "lib-overallcards", ngImport: i0, template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4 h-auto\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.overallFootfall?.count !== null &&\r\n overallStoreCards?.overallFootfall?.count !== undefined\r\n ? overallStoreCards?.overallFootfall?.count\r\n : '--'\r\n }}</div>\r\n\r\n <div class=\"subtext\">Overall Store Footfall</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.overallFootfall?.PreviousData}}%</span> vs\r\n previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='daily' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('daily')\">1D\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='weekly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('weekly')\">1W\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='monthly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('monthly')\">\r\n 1M</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getBouncedCardData?.card?.bounced?.rate !== null &&\r\n getBouncedCardData?.card?.bounced?.rate !== undefined\r\n ? getBouncedCardData?.card?.bounced?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Bounced Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{getBouncedCardData?.data?.bounced?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getEngagersCardData?.card?.engagers?.rate !== null &&\r\n getEngagersCardData?.card?.engagers?.rate !== undefined\r\n ? getEngagersCardData?.card?.engagers?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Engagers Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\">\r\n <span class=\"percent-value\">{{getEngagersCardData?.data?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"col-3 h-auto\">\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n\r\n\r\n <div class=\"headtext px-3 pt-3\">Demographics</div>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n <select class=\"form-select analysis-select\" [(ngModel)]=\"selectedZone\" (change)=\"onZoneChange($event)\">\r\n <option *ngFor=\"let zone of availableZones\" [value]=\"zone.zoneName\">\r\n {{ zone.zoneName | titlecase }}\r\n </option>\r\n </select>\r\n <h4 class=\"analysis-title\">Analysis</h4>\r\n </div>\r\n <div class=\"ellipse1 border-0 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.zoneTotal ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.zonePercentage}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial Zone Footfall</div>\r\n </div>\r\n <div class=\"gender-cards py-3 mt-1\">\r\n <!-- Male -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.male ?? '--'}} <span>({{getAnalyseZoneData?.malePercentage ?? '--'}}%)</span></h3>\r\n <p>Male</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n<path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n<path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n<circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n</svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.female ?? '--'}} <span>({{getAnalyseZoneData?.femalePercentage ?? '--'}}%)</span></h3>\r\n <p>Female</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n<path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n<path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n<circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n</svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 mb-3 mt-1\">\r\n <div class=\"ellipse1 border-0 mb-3 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.conversionCount ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.conversionCountPercentage ?? '--'}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> Footfall</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-auto\">\r\n <div class=\"card h-400px 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 flex-column\">\r\n <img class=\"img-src2\" 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 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 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 </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 Peer 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\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 </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 Peer Zones</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\"\r\n (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\"\r\n class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Trolley' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Basket' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> -->\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"col-md-4 mt-2\"\r\n *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\" placement=\"right\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path\r\n d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"onExportTraffic()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{\r\n item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:121px}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:240px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-border{gap:8px;opacity:1;border-radius:12px;border-width:1px;padding:8px;border:1px solid #D0D5DD!important}.week-font{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.text-font{font-weight:600;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.path-wrapper{opacity:1;padding:8px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.percent-value{color:var(--Gray-500, #667085)!important;text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.text-normal{font-weight:500;font-size:12px;line-height:18px;letter-spacing:0%;text-align:center;color:#667085}.analysis-header{margin-bottom:16px}.analysis-select{width:200px;border-radius:10px}.analysis-title{font-weight:600;color:#1d2939}.highlight-card{background:linear-gradient(180deg,#e9f6ff,#f4fbff);border-radius:14px;padding:20px;margin-bottom:20px}.highlight-card h2{font-size:28px;margin:0}.highlight-card h2 span{font-size:16px;color:#667085}.highlight-card p{margin:6px 0 0;color:#344054}.gender-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.gender-card{border-width:1px;opacity:1;gap:6px;border-radius:12px;padding:8px 8px 8px 16px;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}\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" }] });
920
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverallcardsComponent, selector: "lib-overallcards", ngImport: i0, template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4 h-auto\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.overallFootfall?.count !== null &&\r\n overallStoreCards?.overallFootfall?.count !== undefined\r\n ? overallStoreCards?.overallFootfall?.count\r\n : '--'\r\n }}</div>\r\n\r\n <div class=\"subtext\">Overall Store Footfall</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.overallFootfall?.PreviousData}}%</span> vs\r\n previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='daily' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('daily')\">1D\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='weekly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('weekly')\">1W\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='monthly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('monthly')\">\r\n 1M</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getBouncedCardData?.card?.bounced?.rate !== null &&\r\n getBouncedCardData?.card?.bounced?.rate !== undefined\r\n ? getBouncedCardData?.card?.bounced?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Bounced Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{getBouncedCardData?.data?.bounced?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getEngagersCardData?.card?.engagers?.rate !== null &&\r\n getEngagersCardData?.card?.engagers?.rate !== undefined\r\n ? getEngagersCardData?.card?.engagers?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Engagers Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\">\r\n <span class=\"percent-value\">{{getEngagersCardData?.data?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"col-3 h-auto\">\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n\r\n\r\n <div class=\"headtext px-3 pt-3\">Demographics</div>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n <select class=\"form-select analysis-select\" [(ngModel)]=\"selectedZone\" (change)=\"onZoneChange($event)\">\r\n <option *ngFor=\"let zone of availableZones\" [value]=\"zone.zoneName\">\r\n {{ zone.zoneName | titlecase }}\r\n </option>\r\n </select>\r\n <h4 class=\"analysis-title\">Analysis</h4>\r\n </div>\r\n <div class=\"ellipse1 border-0 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.zoneTotal ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.zonePercentage}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial Zone Footfall</div>\r\n </div>\r\n <div class=\"gender-cards py-3 mt-1\">\r\n <!-- Male -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.male ?? '--'}} <span>({{getAnalyseZoneData?.malePercentage ?? '--'}}%)</span></h3>\r\n <p>Male</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n<path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n<path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n<circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n</svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.female ?? '--'}} <span>({{getAnalyseZoneData?.femalePercentage ?? '--'}}%)</span></h3>\r\n <p>Female</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n<path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n<path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n<circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n</svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 mb-3 mt-1\">\r\n <div class=\"ellipse1 border-0 mb-3 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.conversionCount ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.conversionCountPercentage ?? '--'}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> Footfall</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-auto\">\r\n <div class=\"card min-h-400px max-h-auto px-3\">\r\n <div class=\"my-3\">\r\n <h3 class=\"title pt-3\">Most Travelled Path</h3>\r\n <div *ngIf=\"!pathLoading && !pathNoData\" class=\"path-wrapper border border-1\">\r\n <div class=\"ellipse1 border-0 p-3\">\r\n <!-- SLIDE -->\r\n <div class=\"path-slide\">\r\n <span class=\"badge\">\r\n {{ paths[activePathIndex]?.label }}\r\n </span>\r\n\r\n <span class=\"percent\">\r\n {{ paths[activePathIndex]?.percent }}% of Customers Travel Path\r\n </span>\r\n\r\n <div class=\"path-text\">\r\n <ng-container *ngFor=\"let step of paths[activePathIndex]?.path; let last = last\">\r\n <span class=\"step\">{{ step | titlecase}}</span>\r\n <span class=\"arrowpath\" *ngIf=\"!last\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n\r\n\r\n <!-- DOTS -->\r\n <div class=\"dots col-6 mt-7\">\r\n <span *ngFor=\"let _ of paths; let i = index\" [class.active]=\"activePathIndex === i\"\r\n (click)=\"goTo(i)\">\r\n </span>\r\n </div>\r\n\r\n <!-- ARROWS -->\r\n <div class=\"mt-1 col-6 text-end\">\r\n <span class=\"cursor-pointer\" (click)=\"prev()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157019)\">\r\n <path\r\n d=\"M26.832 21.0003H15.1654M15.1654 21.0003L20.9987 15.167M15.1654 21.0003L20.9987 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157019\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157019\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157019\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"cursor-pointer\" (click)=\"next()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157023)\">\r\n <path\r\n d=\"M15.168 21.0003H26.8346M26.8346 21.0003L21.0013 15.167M26.8346 21.0003L21.0013 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157023\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157023\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157023\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n<ng-container *ngIf=\"pathLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"pathNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center p-5 flex-column\">\r\n <img class=\"img-src2\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Travelled Paths</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"my-3\">\r\n <div class=\"row\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.hotZone | titlecase}}</div>\r\n\r\n <div class=\"subtext\">Hot Zone <span class=\"mx-2\"><svg placement=\"top\"\r\n [ngbTooltip]=\"hotZoneTooltip\"\r\n container=\"body\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #hotZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Hot Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the highest dwell time compared to all other zones\r\n </div>\r\n</ng-template>\r\n </div>\r\n\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.hotZoneDwell ?? '--'}} mins\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.coldZone | titlecase}}</div>\r\n\r\n <div class=\"subtext\">Cold Zone <span class=\"mx-2\"><svg placement=\"top\" \r\n [ngbTooltip]=\"coldZoneTooltip\"\r\n container=\"body\" \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #coldZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Cold Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the lowest dwell time compared to all other zones\r\n </div>\r\n</ng-template>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.coldZoneDwell ?? '--'}} Sec\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\"\r\n (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\"\r\n class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Trolley' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Basket' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> -->\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"col-md-4 mt-2\"\r\n *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\" placement=\"right\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path\r\n d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"onExportTraffic()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{\r\n item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:121px}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:240px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-border{gap:8px;opacity:1;border-radius:12px;border-width:1px;padding:8px;border:1px solid #D0D5DD!important}.week-font{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.text-font{font-weight:600;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.path-wrapper{opacity:1;padding:8px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.percent-value{color:var(--Gray-500, #667085)!important;text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.text-normal{font-weight:500;font-size:12px;line-height:18px;letter-spacing:0%;text-align:center;color:#667085}.analysis-header{margin-bottom:16px}.analysis-select{width:200px;border-radius:10px}.analysis-title{font-weight:600;color:#1d2939}.highlight-card{background:linear-gradient(180deg,#e9f6ff,#f4fbff);border-radius:14px;padding:20px;margin-bottom:20px}.highlight-card h2{font-size:28px;margin:0}.highlight-card h2 span{font-size:16px;color:#667085}.highlight-card p{margin:6px 0 0;color:#344054}.gender-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.gender-card{border-width:1px;opacity:1;gap:6px;border-radius:12px;padding:8px;border:1px solid #EAECF0}.gender-card h3{font-size:24px;margin:0}.gender-card h3 span{font-size:14px;color:#667085}.gender-card p{margin:6px 0;font-weight:500}.age-pill{display:inline-block;background:#e6f4ff;color:#009bf3;padding:4px;border-radius:20px;font-size:12px;font-weight:500}.age-value{font-weight:600}.tooltip-title{font-weight:600;margin-bottom:4px}.tooltip-desc{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;color:#667085}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
962
921
  }
963
922
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverallcardsComponent, decorators: [{
964
923
  type: Component,
965
- args: [{ selector: "lib-overallcards", template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4 h-auto\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.overallFootfall?.count !== null &&\r\n overallStoreCards?.overallFootfall?.count !== undefined\r\n ? overallStoreCards?.overallFootfall?.count\r\n : '--'\r\n }}</div>\r\n\r\n <div class=\"subtext\">Overall Store Footfall</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.overallFootfall?.PreviousData}}%</span> vs\r\n previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='daily' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('daily')\">1D\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='weekly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('weekly')\">1W\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='monthly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('monthly')\">\r\n 1M</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getBouncedCardData?.card?.bounced?.rate !== null &&\r\n getBouncedCardData?.card?.bounced?.rate !== undefined\r\n ? getBouncedCardData?.card?.bounced?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Bounced Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{getBouncedCardData?.data?.bounced?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getEngagersCardData?.card?.engagers?.rate !== null &&\r\n getEngagersCardData?.card?.engagers?.rate !== undefined\r\n ? getEngagersCardData?.card?.engagers?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Engagers Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\">\r\n <span class=\"percent-value\">{{getEngagersCardData?.data?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"col-3 h-auto\">\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n\r\n\r\n <div class=\"headtext px-3 pt-3\">Demographics</div>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n <select class=\"form-select analysis-select\" [(ngModel)]=\"selectedZone\" (change)=\"onZoneChange($event)\">\r\n <option *ngFor=\"let zone of availableZones\" [value]=\"zone.zoneName\">\r\n {{ zone.zoneName | titlecase }}\r\n </option>\r\n </select>\r\n <h4 class=\"analysis-title\">Analysis</h4>\r\n </div>\r\n <div class=\"ellipse1 border-0 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.zoneTotal ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.zonePercentage}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial Zone Footfall</div>\r\n </div>\r\n <div class=\"gender-cards py-3 mt-1\">\r\n <!-- Male -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.male ?? '--'}} <span>({{getAnalyseZoneData?.malePercentage ?? '--'}}%)</span></h3>\r\n <p>Male</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n<path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n<path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n<circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n</svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.female ?? '--'}} <span>({{getAnalyseZoneData?.femalePercentage ?? '--'}}%)</span></h3>\r\n <p>Female</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n<path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n<path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n<circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n</svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 mb-3 mt-1\">\r\n <div class=\"ellipse1 border-0 mb-3 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.conversionCount ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.conversionCountPercentage ?? '--'}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> Footfall</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-auto\">\r\n <div class=\"card h-400px 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 flex-column\">\r\n <img class=\"img-src2\" 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 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 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 </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 Peer 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\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 </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 Peer Zones</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\"\r\n (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\"\r\n class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Trolley' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Basket' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> -->\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"col-md-4 mt-2\"\r\n *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\" placement=\"right\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path\r\n d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"onExportTraffic()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{\r\n item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:121px}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:240px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-border{gap:8px;opacity:1;border-radius:12px;border-width:1px;padding:8px;border:1px solid #D0D5DD!important}.week-font{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.text-font{font-weight:600;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.path-wrapper{opacity:1;padding:8px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.percent-value{color:var(--Gray-500, #667085)!important;text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.text-normal{font-weight:500;font-size:12px;line-height:18px;letter-spacing:0%;text-align:center;color:#667085}.analysis-header{margin-bottom:16px}.analysis-select{width:200px;border-radius:10px}.analysis-title{font-weight:600;color:#1d2939}.highlight-card{background:linear-gradient(180deg,#e9f6ff,#f4fbff);border-radius:14px;padding:20px;margin-bottom:20px}.highlight-card h2{font-size:28px;margin:0}.highlight-card h2 span{font-size:16px;color:#667085}.highlight-card p{margin:6px 0 0;color:#344054}.gender-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.gender-card{border-width:1px;opacity:1;gap:6px;border-radius:12px;padding:8px 8px 8px 16px;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}\n"] }]
924
+ args: [{ selector: "lib-overallcards", template: "<div class=\"row\">\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"col-lg-4 h-auto\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.overallFootfall?.count !== null &&\r\n overallStoreCards?.overallFootfall?.count !== undefined\r\n ? overallStoreCards?.overallFootfall?.count\r\n : '--'\r\n }}</div>\r\n\r\n <div class=\"subtext\">Overall Store Footfall</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.overallFootfall?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.overallFootfall?.PreviousData}}%</span> vs\r\n previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='daily' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('daily')\">1D\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='weekly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('weekly')\">1W\r\n </div>\r\n <div class=\"mt-1 cursor-pointer fs-5 mx-1\"\r\n [ngClass]=\"dateType ==='monthly' ? 'text-primary' :'text-normal'\" (click)=\"dateValue('monthly')\">\r\n 1M</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getBouncedCardData?.card?.bounced?.rate !== null &&\r\n getBouncedCardData?.card?.bounced?.rate !== undefined\r\n ? getBouncedCardData?.card?.bounced?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Bounced Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getBouncedCardData?.data?.bounced?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{getBouncedCardData?.data?.bounced?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ getEngagersCardData?.card?.engagers?.rate !== null &&\r\n getEngagersCardData?.card?.engagers?.rate !== undefined\r\n ? getEngagersCardData?.card?.engagers?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n })\r\n : '--'\r\n }}\r\n %</div>\r\n\r\n <div class=\"subtext\">Engagers Rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!getEngagersCardData?.data?.engagers?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\">\r\n <span class=\"percent-value\">{{getEngagersCardData?.data?.engagers?.PreviousData}}%</span> vs previous\r\n {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.avgDwellTime?.count !== null && overallStoreCards?.avgDwellTime?.count !== undefined ? overallStoreCards?.avgDwellTime?.count : '--' }} Mins</div>\r\n\r\n <div class=\"subtext\">Average Dwell Time</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.avgDwellTime?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.avgDwellTime?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card card-border\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{ overallStoreCards?.impressionRate?.rate !== null && overallStoreCards?.impressionRate?.rate !== undefined ? overallStoreCards?.impressionRate?.rate.toLocaleString('en-US', {\r\n minimumFractionDigits: 0\r\n }) : '--' }}%</div>\r\n\r\n <div class=\"subtext\">Impression rate</div>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title my-0 align-items-start flex-column\">\r\n <span><svg *ngIf=\"overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\" stroke=\"#039855\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><svg *ngIf=\"!overallStoreCards?.impressionRate?.PreviousVariation\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146444)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\" stroke=\"#D92D20\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146444\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"week-font ms-2\"><span class=\"percent-value\">{{ overallStoreCards?.impressionRate?.PreviousData}}%</span>\r\n vs previous {{dateType ==='weekly' ? 'week' : dateType === 'monthly' ? 'month' : 'daily'}}</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <!-- <div class=\"card\">\r\n <div class=\"card-header py-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"subtext\">Overall Store Footfall <span\r\n ngbTooltip=\"Unique Store Footfall Walk-ins\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span> \r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"headcount\">{{ cardData.oveallZoneFootfall?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.bounced?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Bounced Footfall Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent less than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value :clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.engagers?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Engagers Rate <span\r\n [ngbTooltip]=\"'Percentage of walk-ins who spent more than ' + (clientData?.bouncedLimit?.value ? clientData?.bouncedLimit?.value : clientData?.bouncedLimitValue || '') + ' mins'\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div>\r\n <div class=\"row my-2 justify-content-evenly\">\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} Mins</div>\r\n <div class=\"subtext mt-3\">Average Dwell Time <span\r\n ngbTooltip=\"Avg time spent by the engagers inside the store\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-6 ratecards\">\r\n <div class=\"headcount\">{{ cardData.concentration?.rate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</div>\r\n <div class=\"subtext mt-3\">Concentration Rate <span\r\n ngbTooltip=\"The proportion of walk-ins remaining in key areas\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"col-3 h-auto\">\r\n <div *ngIf=\"storeIdarray?.length === 1\" class=\"card\">\r\n\r\n\r\n <div class=\"headtext px-3 pt-3\">Demographics</div>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-18\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Demographics Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Age Range</th>\r\n <th>Percentage of FF</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of ageAnalysis\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.category }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"10px\" type=\"primary\"\r\n [value]=\"item.value\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--'}}%\r\n\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray?.length > 1\" class=\"card px-3 py-2\">\r\n <div class=\"analysis-header d-flex align-items-center gap-2\">\r\n <select class=\"form-select analysis-select\" [(ngModel)]=\"selectedZone\" (change)=\"onZoneChange($event)\">\r\n <option *ngFor=\"let zone of availableZones\" [value]=\"zone.zoneName\">\r\n {{ zone.zoneName | titlecase }}\r\n </option>\r\n </select>\r\n <h4 class=\"analysis-title\">Analysis</h4>\r\n </div>\r\n <div class=\"ellipse1 border-0 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.zoneTotal ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.zonePercentage}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial Zone Footfall</div>\r\n </div>\r\n <div class=\"gender-cards py-3 mt-1\">\r\n <!-- Male -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.male ?? '--'}} <span>({{getAnalyseZoneData?.malePercentage ?? '--'}}%)</span></h3>\r\n <p>Male</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n<path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n<path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n<circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n</svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n \r\n <!-- Female -->\r\n <div class=\"gender-card\">\r\n <h3>{{getAnalyseZoneData?.female ?? '--'}} <span>({{getAnalyseZoneData?.femalePercentage ?? '--'}}%)</span></h3>\r\n <p>Female</p>\r\n <span class=\"age-pill me-2\">{{getAnalyseZoneData?.age}} <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"8\" viewBox=\"0 0 10 8\" fill=\"none\">\r\n<path d=\"M1.38203 3.4875L1.06953 2.8125L0.394531 2.5L1.06953 2.1875L1.38203 1.5125L1.69453 2.1875L2.36953 2.5L1.69453 2.8125L1.38203 3.4875ZM6.88203 3L6.40703 1.975L5.38203 1.5L6.40703 1.025L6.88203 0L7.35703 1.025L8.38203 1.5L7.35703 1.975L6.88203 3Z\" fill=\"#009BF3\"/>\r\n<path d=\"M0.507812 7.125L2.3867 5.15377C2.76593 4.7559 3.39518 4.73868 3.7956 5.11522L4.51482 5.79154C4.88735 6.14184 5.46413 6.15466 5.85186 5.82126L9.13281 3\" stroke=\"#009BF3\" stroke-width=\"1.4\"/>\r\n<circle cx=\"2.94531\" cy=\"4.3125\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"5.19531\" cy=\"6.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"0.695312\" cy=\"6.9375\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n<circle cx=\"8.94531\" cy=\"3.1875\" r=\"0.5625\" fill=\"#33B5FF\"/>\r\n</svg></span>\r\n <span class=\"age-value\">{{getAnalyseZoneData?.agePercentage ?? '--'}}%</span>\r\n </div>\r\n </div>\r\n <div class=\"card-border h-100 py-2 mb-3 mt-1\">\r\n <div class=\"ellipse1 border-0 mb-3 p-3 py-5\">\r\n <div class=\"headcount\">{{getAnalyseZoneData?.conversionCount ?? '--'}} <span class=\"text-normal fs-5\">({{getAnalyseZoneData?.conversionCountPercentage ?? '--'}}%)</span></div>\r\n \r\n <div class=\"subtext\">Trial <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> Footfall</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-auto\">\r\n <div class=\"card min-h-400px max-h-auto px-3\">\r\n <div class=\"my-3\">\r\n <h3 class=\"title pt-3\">Most Travelled Path</h3>\r\n <div *ngIf=\"!pathLoading && !pathNoData\" class=\"path-wrapper border border-1\">\r\n <div class=\"ellipse1 border-0 p-3\">\r\n <!-- SLIDE -->\r\n <div class=\"path-slide\">\r\n <span class=\"badge\">\r\n {{ paths[activePathIndex]?.label }}\r\n </span>\r\n\r\n <span class=\"percent\">\r\n {{ paths[activePathIndex]?.percent }}% of Customers Travel Path\r\n </span>\r\n\r\n <div class=\"path-text\">\r\n <ng-container *ngFor=\"let step of paths[activePathIndex]?.path; let last = last\">\r\n <span class=\"step\">{{ step | titlecase}}</span>\r\n <span class=\"arrowpath\" *ngIf=\"!last\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33203 7.99967H12.6654M12.6654 7.99967L7.9987 3.33301M12.6654 7.99967L7.9987 12.6663\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n\r\n\r\n <!-- DOTS -->\r\n <div class=\"dots col-6 mt-7\">\r\n <span *ngFor=\"let _ of paths; let i = index\" [class.active]=\"activePathIndex === i\"\r\n (click)=\"goTo(i)\">\r\n </span>\r\n </div>\r\n\r\n <!-- ARROWS -->\r\n <div class=\"mt-1 col-6 text-end\">\r\n <span class=\"cursor-pointer\" (click)=\"prev()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157019)\">\r\n <path\r\n d=\"M26.832 21.0003H15.1654M15.1654 21.0003L20.9987 15.167M15.1654 21.0003L20.9987 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157019\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157019\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157019\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"cursor-pointer\" (click)=\"next()\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"42\" height=\"42\" viewBox=\"0 0 42 42\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15064_157023)\">\r\n <path\r\n d=\"M15.168 21.0003H26.8346M26.8346 21.0003L21.0013 15.167M26.8346 21.0003L21.0013 26.8337\"\r\n stroke=\"#344054\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15064_157023\" x=\"-2\" y=\"-1\" width=\"46\" height=\"46\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15064_157023\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_15064_157023\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n<ng-container *ngIf=\"pathLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"pathNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center p-5 flex-column\">\r\n <img class=\"img-src2\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Travelled Paths</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"my-3\">\r\n <div class=\"row\">\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.hotZone | titlecase}}</div>\r\n\r\n <div class=\"subtext\">Hot Zone <span class=\"mx-2\"><svg placement=\"top\"\r\n [ngbTooltip]=\"hotZoneTooltip\"\r\n container=\"body\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #hotZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Hot Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the highest dwell time compared to all other zones\r\n </div>\r\n</ng-template>\r\n </div>\r\n\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.hotZoneDwell ?? '--'}} mins\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-6 px-2\">\r\n <div class=\"card-border h-100\">\r\n <div class=\"ellipse1 px-5 py-3\">\r\n <div class=\"headcount\">{{getHotColdZoneData?.coldZone | titlecase}}</div>\r\n\r\n <div class=\"subtext\">Cold Zone <span class=\"mx-2\"><svg placement=\"top\" \r\n [ngbTooltip]=\"coldZoneTooltip\"\r\n container=\"body\" \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#344054\" stroke-width=\"1.3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <ng-template #coldZoneTooltip>\r\n <div class=\"tooltip-title text-start ms-3\">Cold Zone</div>\r\n <div class=\"tooltip-desc\">\r\n Zone with the lowest dwell time compared to all other zones\r\n </div>\r\n</ng-template>\r\n </div>\r\n <div class=\"card-header min-h-30px border-0 px-3\">\r\n <div class=\"card-title align-items-start flex-column\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15147_146424)\">\r\n <path d=\"M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15147_146424\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"text-font ms-2\">{{getHotColdZoneData?.coldZoneDwell ?? '--'}} Sec\r\n higher </span><span class=\"week-font ms-2\">vs Other Zones</span> </span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"getZoneSegmentionData?.length > 0\" class=\"col-4 h-auto\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 ps-3 pe-0 min-h-50px\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div class=\"headtext\">Zone Segmentation</div>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button *ngIf=\"!segmentationNoData && !segmentationDataLoading\" type=\"button\"\r\n (click)=\"onExport()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!getZoneSegmentionData.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"headtext p-3\">Zone Segmentation</div> -->\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-1 table-responsive agerangescroll1\">\r\n <table *ngIf=\"!segmentationDataLoading && !segmentationNoData\"\r\n class=\"table bottom-border text-nowrap\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg.Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Trolley')\">\r\n Trolley\r\n <svg [ngClass]=\"sortColumName === 'Trolley' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Trolley' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('Basket')\">\r\n Basket\r\n <svg [ngClass]=\"sortColumName === 'Basket' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'Basket' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"h-45px\">\r\n <tr *ngFor=\"let item of getZoneSegmentionData\">\r\n <td>\r\n <div class=\"table-title-primary\">{{ item.zoneName }}</div>\r\n </td>\r\n <td>\r\n {{ item.footfallCount }}\r\n </td>\r\n <td>\r\n {{ item.avgDwellTime }} mins\r\n </td>\r\n <td>\r\n {{ item.Trolley }}%\r\n </td>\r\n <td>\r\n {{ item.Basket }}%\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"segmentationDataLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> -->\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"segmentationNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Segmentation</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"col-md-4 mt-2\"\r\n *ngIf=\"!cardNoTrafficData && headerData?.client === '459' && (storeIdarray[0] ==='459-4' || storeIdarray[0] ==='459-2')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start headtext p-3\">Traffic Segmentation <span class=\"ms-1\"\r\n ngbTooltip=\"Entrance level traffic segmentation\" placement=\"right\"\r\n triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path\r\n d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span></div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <button type=\"button\" (click)=\"onExportTraffic()\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\"\r\n [disabled]=\"!cardDataTraffic?.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"card-body mb-18 p-0\">\r\n <div class=\"mx-3 h-188px\">\r\n <table *ngIf=\"!cardDataTrafficLoading && !cardNoTrafficData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Entrance</th>\r\n <th>Entrance wise footfall</th>\r\n <th *ngIf=\"headerData?.client === '463'\">Concentration Rate</th>\r\n\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardDataTraffic\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{\r\n item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||\r\n '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <ng-container *ngIf=\"cardDataTrafficLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center mb-15\">\r\n <div class=\"shimmer my-17\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoTrafficData && !cardDataTrafficLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mb-10\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Age Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:121px}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);color:var(--Gray-700, #344054);text-align:start;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:240px}.agerangescroll1{overflow:auto;height:260px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.rotate{transform:rotate(180deg)}.h-188px{height:188px!important}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-border{gap:8px;opacity:1;border-radius:12px;border-width:1px;padding:8px;border:1px solid #D0D5DD!important}.week-font{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.text-font{font-weight:600;font-size:12px;line-height:18px;letter-spacing:0%;vertical-align:middle;color:#1d2939}.path-wrapper{opacity:1;padding:8px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.percent-value{color:var(--Gray-500, #667085)!important;text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.text-normal{font-weight:500;font-size:12px;line-height:18px;letter-spacing:0%;text-align:center;color:#667085}.analysis-header{margin-bottom:16px}.analysis-select{width:200px;border-radius:10px}.analysis-title{font-weight:600;color:#1d2939}.highlight-card{background:linear-gradient(180deg,#e9f6ff,#f4fbff);border-radius:14px;padding:20px;margin-bottom:20px}.highlight-card h2{font-size:28px;margin:0}.highlight-card h2 span{font-size:16px;color:#667085}.highlight-card p{margin:6px 0 0;color:#344054}.gender-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.gender-card{border-width:1px;opacity:1;gap:6px;border-radius:12px;padding:8px;border:1px solid #EAECF0}.gender-card h3{font-size:24px;margin:0}.gender-card h3 span{font-size:14px;color:#667085}.gender-card p{margin:6px 0;font-weight:500}.age-pill{display:inline-block;background:#e6f4ff;color:#009bf3;padding:4px;border-radius:20px;font-size:12px;font-weight:500}.age-value{font-weight:600}.tooltip-title{font-weight:600;margin-bottom:4px}.tooltip-desc{font-weight:400;font-size:12px;line-height:18px;letter-spacing:0%;color:#667085}\n"] }]
966
925
  }], ctorParameters: () => [{ type: i0.NgZone }, { type: ZoneService }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i4.ToastService }] });
967
926
 
968
927
  class ZoneJourneyComponent {
@@ -1089,6 +1048,20 @@ class ZoneJourneyComponent {
1089
1048
  this.showDropdown = false;
1090
1049
  }
1091
1050
  }
1051
+ toggleSelectAll(event) {
1052
+ const checked = event.target.checked;
1053
+ // Apply to full temp list
1054
+ this.tempZoneList = this.tempZoneList.map(z => ({
1055
+ ...z,
1056
+ checked
1057
+ }));
1058
+ // Re-apply search filter so UI updates correctly
1059
+ this.filterZones();
1060
+ }
1061
+ isAllSelected() {
1062
+ return (this.tempZoneList.length > 0 &&
1063
+ this.tempZoneList.every(z => z.checked));
1064
+ }
1092
1065
  filterZones() {
1093
1066
  const text = this.dropdownSearchText.toLowerCase();
1094
1067
  this.tempFilteredZones = this.tempZoneList.filter(z => z.name.toLowerCase().includes(text));
@@ -1130,11 +1103,18 @@ class ZoneJourneyComponent {
1130
1103
  nob: this.clientData?.isNOB,
1131
1104
  hideZones: this.zoneList.filter((z) => !z.checked).map((z) => z.name),
1132
1105
  search: this.searchZoneText || '',
1133
- isExport: true
1106
+ export: true
1134
1107
  };
1135
1108
  this.service.getNewZoneShopperAnalysisExportApi(this.object1).subscribe({
1136
1109
  next: (res) => {
1137
- this.service.saveAsExcelFile(res, 'ZoneShopperAnalysis ');
1110
+ if (this.headerData.date.startDate == this.headerData.date.endDate) {
1111
+ let fileName = 'Shopper Journey_Export_' + this.headerData.date.startDate;
1112
+ this.service.saveAsExcelFile1(res, fileName);
1113
+ }
1114
+ else {
1115
+ let fileName = 'Shopper Journey_Export_' + this.headerData.date.startDate + '_' + this.headerData.date.endDate;
1116
+ this.service.saveAsExcelFile1(res, fileName);
1117
+ }
1138
1118
  },
1139
1119
  error: ((e) => {
1140
1120
  let errorMsg = 'Something went Wrong..';
@@ -1160,7 +1140,7 @@ class ZoneJourneyComponent {
1160
1140
  nob: this.clientData?.isNOB,
1161
1141
  hideZones: hiddenZones,
1162
1142
  search: this.searchZoneText || '',
1163
- isExport: false
1143
+ export: false
1164
1144
  };
1165
1145
  this.service.getNewZoneShopperAnalysisApi(this.object1).subscribe({
1166
1146
  next: (res) => {
@@ -1222,46 +1202,76 @@ class ZoneJourneyComponent {
1222
1202
  }
1223
1203
  createChart() {
1224
1204
  setTimeout(() => {
1205
+ // Dispose old chart
1225
1206
  if (this.root) {
1226
1207
  this.root.dispose();
1227
1208
  }
1209
+ // Root
1228
1210
  this.root = am5.Root.new('chartdiv');
1229
- this.root.setThemes([
1230
- am5themes_Animated.new(this.root)
1231
- ]);
1211
+ this.root.setThemes([am5themes_Animated.new(this.root)]);
1212
+ // Arc Diagram Series
1232
1213
  const series = this.root.container.children.push(am5flow.ArcDiagram.new(this.root, {
1233
1214
  sourceIdField: 'from',
1234
1215
  targetIdField: 'to',
1235
1216
  valueField: 'value',
1236
1217
  orientation: 'horizontal'
1237
1218
  }));
1219
+ // --------------------------------------------------
1220
+ // TOOLTIP (HTML)
1221
+ // --------------------------------------------------
1238
1222
  const tooltip = am5.Tooltip.new(this.root, {
1239
1223
  getFillFromSprite: false,
1240
1224
  getStrokeFromSprite: false,
1241
1225
  autoTextColor: false,
1242
- labelText: "[fontSize:13px]{sourceId} → {targetId}\n" +
1243
- "[#2979FF]● {value} Footfall[/]\n" +
1244
- "[#111827]● {NoB} NoB[/]"
1226
+ keepTargetHover: true,
1227
+ pointerOrientation: 'horizontal'
1245
1228
  });
1246
1229
  tooltip.get('background')?.setAll({
1247
1230
  fill: am5.color(0xffffff),
1248
1231
  stroke: am5.color(0xe5e7eb),
1249
- shadowColor: am5.color(0x000000),
1232
+ shadowColor: am5.color(0xf7f7f7),
1250
1233
  shadowBlur: 10,
1251
- shadowOffsetX: 0,
1252
1234
  shadowOffsetY: 4
1253
1235
  });
1254
- tooltip.label.setAll({
1255
- paddingTop: 8,
1256
- paddingBottom: 8,
1257
- paddingLeft: 12,
1258
- paddingRight: 12
1259
- });
1260
- tooltip.set('pointerOrientation', 'horizontal');
1236
+ // Attach tooltip to links
1237
+ series.links.template.set('tooltip', tooltip);
1238
+ series.links.template.set('tooltipHTML', '');
1261
1239
  series.links.template.setAll({
1262
- tooltip: tooltip,
1263
- tooltipText: ''
1240
+ strokeWidth: 2,
1241
+ interactive: true,
1242
+ tooltip: tooltip
1243
+ });
1244
+ // Add a larger invisible hit area
1245
+ series.links.template.states.create("hover", {
1246
+ strokeWidth: 3
1247
+ });
1248
+ // Adapter for HTML content
1249
+ series.links.template.adapters.add('tooltipHTML', (_html, target) => {
1250
+ const dataItem = target.dataItem;
1251
+ if (!dataItem)
1252
+ return '';
1253
+ const dc = dataItem.dataContext;
1254
+ return `
1255
+ <div class="am-tooltip">
1256
+ <div class="am-tooltip-header">
1257
+ ${dc.from} → ${dc.to}
1258
+ </div>
1259
+ <table class="am-tooltip-table">
1260
+ <tr>
1261
+ <td>Footfall</td>
1262
+ <td class="value">${dc.value ?? '--'}</td>
1263
+ </tr>
1264
+ <tr>
1265
+ <td>NoB</td>
1266
+ <td class="value">${dc.NoB ?? '--'}</td>
1267
+ </tr>
1268
+ </table>
1269
+ </div>
1270
+ `;
1264
1271
  });
1272
+ // --------------------------------------------------
1273
+ // NODE LABELS
1274
+ // --------------------------------------------------
1265
1275
  series.nodes.labels.template.setAll({
1266
1276
  text: '{id}\n{total}',
1267
1277
  centerX: am5.percent(50),
@@ -1269,9 +1279,11 @@ class ZoneJourneyComponent {
1269
1279
  textAlign: 'center',
1270
1280
  fontSize: 11,
1271
1281
  fill: am5.color(0x000000),
1272
- // oversizedBehavior: 'wrap',
1273
1282
  maxWidth: 90
1274
1283
  });
1284
+ // --------------------------------------------------
1285
+ // FLOW BULLETS
1286
+ // --------------------------------------------------
1275
1287
  series.bullets.push((_root, _series, dataItem) => {
1276
1288
  const bullet = am5.Bullet.new(this.root, {
1277
1289
  locationY: Math.random(),
@@ -1284,21 +1296,24 @@ class ZoneJourneyComponent {
1284
1296
  key: 'locationY',
1285
1297
  from: 0,
1286
1298
  to: 1,
1287
- duration: Math.random() * 1000 + 2000,
1288
- // loops: Infinity
1299
+ duration: Math.random() * 1000 + 2000
1289
1300
  });
1290
1301
  return bullet;
1291
1302
  });
1303
+ // --------------------------------------------------
1304
+ // DATA + ORDERING
1305
+ // --------------------------------------------------
1292
1306
  const nodeOrder = (name) => {
1293
- if (name === "Entry")
1307
+ if (name === 'Entry')
1294
1308
  return 0;
1295
- if (name === "Exit")
1309
+ if (name === 'Exit')
1296
1310
  return 999;
1297
1311
  return 1;
1298
1312
  };
1299
1313
  series.data.setAll(this.bubbleChartData?.zoneBubbleChartMetrics);
1300
1314
  Array.from(series.nodes.children).sort((a, b) => {
1301
- return nodeOrder(a.dataItem?.dataContext?.id) - nodeOrder(b.dataItem?.dataContext?.id);
1315
+ return (nodeOrder(a.dataItem?.dataContext?.id) -
1316
+ nodeOrder(b.dataItem?.dataContext?.id));
1302
1317
  });
1303
1318
  series.appear(1000, 100);
1304
1319
  }, 500);
@@ -1364,11 +1379,11 @@ class ZoneJourneyComponent {
1364
1379
  this.router.navigate(["/manage/traffic/nob"]);
1365
1380
  }
1366
1381
  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 });
1367
- 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 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n 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\" stroke-linejoin=\"round\" />\r\n </svg></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 <!-- 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 <input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"zone.checked\"\r\n />\r\n <span>{{ 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\"><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 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> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <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 <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=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n<div *ngIf=\"searchNewOpen\" 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 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\">\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\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> {{ zone.fromZoneNobCount }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body h-200px overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Engagers)</th>\r\n <th class=\"me-2\"><span *ngIf=\"this.clientData?.isNOB\">NoB</span> <span *ngIf=\"!this.clientData?.isNOB\">Conversion</span> <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></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone }}</td>\r\n <td>{{ row.footfall }} ({{ row.engagerPercent }}%)</td>\r\n <td>{{ row.nob }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n \r\n </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}\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" }] });
1382
+ 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\"><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 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> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <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 <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=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n<div *ngIf=\"searchNewOpen\" 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 class=\"zone-card mx-3 \" *ngFor=\"let zone of zones;let i = index\">\r\n\r\n <!-- HEADER -->\r\n <div [ngClass]=\"activeIndex === i ? 'zone-header':'zone-default'\" (click)=\"toggle(i)\">\r\n <div [ngClass]=\"activeIndex === i ? 'zone-title':'zone-notitle'\">{{ zone.fromZone |\r\n titlecase}}\r\n </div>\r\n\r\n <div class=\"zone-metrics\">\r\n <span class=\"badge badge-light-primary px-2\" placement=\"top\" ngbTooltip=\"Footfall (Engagers)\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\"\r\n viewBox=\"0 0 10 11\" fill=\"none\">\r\n <path\r\n d=\"M0.25 8.16288H3V8.78788C3 9.15255 2.85513 9.50229 2.59727 9.76015C2.33941 10.018 1.98967 10.1629 1.625 10.1629C1.26033 10.1629 0.910591 10.018 0.652728 9.76015C0.394866 9.50229 0.25 9.15255 0.25 8.78788V8.16288ZM2.25 2.22288C3.25 2.22288 3.75 3.66288 3.75 4.66288C3.75 5.16288 3.5 5.66288 3.25 6.41288L3 7.16288H0.25C0.25 6.66288 0 5.91288 0 4.66288C0 3.41288 0.999 2.22288 2.25 2.22288ZM8.277 6.21188L8.1685 6.82738C8.10117 7.18269 7.89656 7.49717 7.59901 7.70271C7.30146 7.90824 6.93492 7.98827 6.57878 7.92547C6.22263 7.86268 5.90557 7.6621 5.69626 7.3672C5.48695 7.07229 5.40225 6.7068 5.4605 6.34988L5.5685 5.73488L8.277 6.21188ZM7.339 0.0153812C8.571 0.232381 9.348 1.57788 9.131 2.80888C8.914 4.03988 8.5375 4.73488 8.451 5.22738L5.7425 4.74988L5.6265 3.96788C5.5105 3.18588 5.3515 2.64988 5.438 2.15788C5.6115 1.17288 6.354 -0.158119 7.339 0.0153812Z\"\r\n fill=\"#009BF3\" />\r\n </svg></span> {{ zone.fromZoneFootfallCount ?? '--' }}\r\n </span>\r\n <span class=\"badge badge-light-default px-2\" placement=\"top\"\r\n [ngbTooltip]=\"clientData?.isNOB ? 'NoB' : 'Conversion'\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> {{ zone.fromZoneNobCount ?? '--' }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body max-h-200px min-h-auto overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Engagers)</th>\r\n <th ><span class=\"me-2\" *ngIf=\"this.clientData?.isNOB\">NoB</span> <span class=\"me-2\" *ngIf=\"!this.clientData?.isNOB\">Conversion</span> <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></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone | titlecase}}</td>\r\n <td>{{ row.footfall ?? '--' }} ({{ row.engagerPercent }}%)</td>\r\n <td>{{ row.nob ?? '--' }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n \r\n </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}.am-tooltip{font-size:12px}.am-tooltip-header{font-weight:600;margin-bottom:6px}.am-tooltip-table{width:100%;border-collapse:collapse}.am-tooltip-table .value{text-align:right;font-weight:600}\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" }] });
1368
1383
  }
1369
1384
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneJourneyComponent, decorators: [{
1370
1385
  type: Component,
1371
- 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 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n 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\" stroke-linejoin=\"round\" />\r\n </svg></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 <!-- 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 <input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"zone.checked\"\r\n />\r\n <span>{{ 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\"><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 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> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <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 <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=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n<div *ngIf=\"searchNewOpen\" 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 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\">\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\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> {{ zone.fromZoneNobCount }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body h-200px overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Engagers)</th>\r\n <th class=\"me-2\"><span *ngIf=\"this.clientData?.isNOB\">NoB</span> <span *ngIf=\"!this.clientData?.isNOB\">Conversion</span> <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></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone }}</td>\r\n <td>{{ row.footfall }} ({{ row.engagerPercent }}%)</td>\r\n <td>{{ row.nob }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n \r\n </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}\n"] }]
1386
+ 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\"><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 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> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <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 <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=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n<div *ngIf=\"searchNewOpen\" 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 class=\"zone-card mx-3 \" *ngFor=\"let zone of zones;let i = index\">\r\n\r\n <!-- HEADER -->\r\n <div [ngClass]=\"activeIndex === i ? 'zone-header':'zone-default'\" (click)=\"toggle(i)\">\r\n <div [ngClass]=\"activeIndex === i ? 'zone-title':'zone-notitle'\">{{ zone.fromZone |\r\n titlecase}}\r\n </div>\r\n\r\n <div class=\"zone-metrics\">\r\n <span class=\"badge badge-light-primary px-2\" placement=\"top\" ngbTooltip=\"Footfall (Engagers)\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\"\r\n viewBox=\"0 0 10 11\" fill=\"none\">\r\n <path\r\n d=\"M0.25 8.16288H3V8.78788C3 9.15255 2.85513 9.50229 2.59727 9.76015C2.33941 10.018 1.98967 10.1629 1.625 10.1629C1.26033 10.1629 0.910591 10.018 0.652728 9.76015C0.394866 9.50229 0.25 9.15255 0.25 8.78788V8.16288ZM2.25 2.22288C3.25 2.22288 3.75 3.66288 3.75 4.66288C3.75 5.16288 3.5 5.66288 3.25 6.41288L3 7.16288H0.25C0.25 6.66288 0 5.91288 0 4.66288C0 3.41288 0.999 2.22288 2.25 2.22288ZM8.277 6.21188L8.1685 6.82738C8.10117 7.18269 7.89656 7.49717 7.59901 7.70271C7.30146 7.90824 6.93492 7.98827 6.57878 7.92547C6.22263 7.86268 5.90557 7.6621 5.69626 7.3672C5.48695 7.07229 5.40225 6.7068 5.4605 6.34988L5.5685 5.73488L8.277 6.21188ZM7.339 0.0153812C8.571 0.232381 9.348 1.57788 9.131 2.80888C8.914 4.03988 8.5375 4.73488 8.451 5.22738L5.7425 4.74988L5.6265 3.96788C5.5105 3.18588 5.3515 2.64988 5.438 2.15788C5.6115 1.17288 6.354 -0.158119 7.339 0.0153812Z\"\r\n fill=\"#009BF3\" />\r\n </svg></span> {{ zone.fromZoneFootfallCount ?? '--' }}\r\n </span>\r\n <span class=\"badge badge-light-default px-2\" placement=\"top\"\r\n [ngbTooltip]=\"clientData?.isNOB ? 'NoB' : 'Conversion'\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> {{ zone.fromZoneNobCount ?? '--' }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body max-h-200px min-h-auto overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Engagers)</th>\r\n <th ><span class=\"me-2\" *ngIf=\"this.clientData?.isNOB\">NoB</span> <span class=\"me-2\" *ngIf=\"!this.clientData?.isNOB\">Conversion</span> <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></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone | titlecase}}</td>\r\n <td>{{ row.footfall ?? '--' }} ({{ row.engagerPercent }}%)</td>\r\n <td>{{ row.nob ?? '--' }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n \r\n </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}.am-tooltip{font-size:12px}.am-tooltip-header{font-weight:600;margin-bottom:6px}.am-tooltip-table{width:100%;border-collapse:collapse}.am-tooltip-table .value{text-align:right;font-weight:600}\n"] }]
1372
1387
  }], ctorParameters: () => [{ type: ZoneService }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i4$1.Router }, { type: i4.ToastService }], propDecorators: { headerData: [{
1373
1388
  type: Input
1374
1389
  }], clientData: [{
@@ -3315,12 +3330,42 @@ class CustomerJourneyChartComponent {
3315
3330
  nobUpload() {
3316
3331
  this.router.navigate(["/manage/traffic/nob"]);
3317
3332
  }
3333
+ draggedIndex = null;
3334
+ onDragStart(index) {
3335
+ this.draggedIndex = index;
3336
+ }
3337
+ onDragOver(event) {
3338
+ event.preventDefault(); // REQUIRED to allow drop
3339
+ }
3340
+ onDrop(targetIndex) {
3341
+ if (this.draggedIndex === null || this.draggedIndex === targetIndex) {
3342
+ return;
3343
+ }
3344
+ const draggedItem = this.selectedZones[this.draggedIndex];
3345
+ // Remove from old position
3346
+ this.selectedZones.splice(this.draggedIndex, 1);
3347
+ // Insert at new position
3348
+ this.selectedZones.splice(targetIndex, 0, draggedItem);
3349
+ this.draggedIndex = null;
3350
+ }
3351
+ enableDrag(event) {
3352
+ const chip = event.target.closest('.zone-chip');
3353
+ if (chip) {
3354
+ chip.setAttribute('draggable', 'true');
3355
+ }
3356
+ }
3357
+ disableDrag(event) {
3358
+ const chip = event.target.closest('.zone-chip');
3359
+ if (chip) {
3360
+ chip.setAttribute('draggable', 'false');
3361
+ }
3362
+ }
3318
3363
  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 });
3319
- 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\">\r\n <span class=\"drag-icon\">\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\">NoB :</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" }] });
3364
+ 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\">NoB :</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" }] });
3320
3365
  }
3321
3366
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerJourneyChartComponent, decorators: [{
3322
3367
  type: Component,
3323
- 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\">\r\n <span class=\"drag-icon\">\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\">NoB :</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"] }]
3368
+ 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\">NoB :</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"] }]
3324
3369
  }], ctorParameters: () => [{ type: i4$1.Router }, { type: i4.ToastService }, { type: i2.GlobalStateService }, { type: ZoneService }, { type: Zonev2Service }], propDecorators: { clientData: [{
3325
3370
  type: Input
3326
3371
  }] } });