tango-app-ui-analyse-zone 3.3.1-beta.49 → 3.3.1-beta.50

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 (7) hide show
  1. package/esm2022/lib/components/segmentation/segmentation.component.mjs +247 -4
  2. package/esm2022/lib/components/tango-analyse-zone/tango-analyse-zone.component.mjs +8 -6
  3. package/fesm2022/tango-app-ui-analyse-zone.mjs +422 -177
  4. package/fesm2022/tango-app-ui-analyse-zone.mjs.map +1 -1
  5. package/lib/components/segmentation/segmentation.component.d.ts +23 -2
  6. package/lib/components/tango-analyse-zone/tango-analyse-zone.component.d.ts +2 -0
  7. package/package.json +1 -1
package/fesm2022/tango-app-ui-analyse-zone.mjs CHANGED
@@ -1288,6 +1288,10 @@ class SegmentationComponent {
1288
1288
  cardData = {};
1289
1289
  cardDataLoading = true;
1290
1290
  cardNoData = false;
1291
+ cardDataLoading1 = true;
1292
+ cardNoData1 = false;
1293
+ cardDataLoading3 = true;
1294
+ cardNoData3 = false;
1291
1295
  headerData;
1292
1296
  isExport = false;
1293
1297
  destroy$ = new Subject();
@@ -1303,10 +1307,21 @@ class SegmentationComponent {
1303
1307
  .pipe(takeUntil(this.destroy$), debounceTime(300))
1304
1308
  .subscribe((data) => {
1305
1309
  this.headerData = data;
1306
- this.getCardData();
1310
+ if (this.headerData?.client === '430') {
1311
+ this.getCardData1();
1312
+ this.getCardData3();
1313
+ this.getCardData();
1314
+ }
1315
+ else if (this.headerData?.client === '463') {
1316
+ this.getCardData();
1317
+ }
1307
1318
  });
1308
1319
  }
1320
+ root;
1309
1321
  ngOnDestroy() {
1322
+ if (this.root) {
1323
+ this.root.dispose();
1324
+ }
1310
1325
  this.destroy$.next();
1311
1326
  this.destroy$.complete();
1312
1327
  }
@@ -1359,56 +1374,10 @@ class SegmentationComponent {
1359
1374
  }
1360
1375
  });
1361
1376
  }
1362
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SegmentationComponent, deps: [{ token: ZoneService }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
1363
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SegmentationComponent, selector: "lib-segmentation", outputs: { dataEmitter: "dataEmitter" }, ngImport: i0, template: "<div class=\"row\">\r\n\r\n<div class=\"col-12 pe-0\" *ngIf=\"!cardNoData\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-4\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Traffic Segmentation</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n \r\n\r\n <div class=\"card-body mb-8 p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" 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 cardData\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{ item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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\r\n</div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;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:241px;margin-bottom:6%}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);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:scroll;overflow-x:hidden;height:275px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}\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"] }] });
1364
- }
1365
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SegmentationComponent, decorators: [{
1366
- type: Component,
1367
- args: [{ selector: 'lib-segmentation', template: "<div class=\"row\">\r\n\r\n<div class=\"col-12 pe-0\" *ngIf=\"!cardNoData\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-4\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Traffic Segmentation</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n \r\n\r\n <div class=\"card-body mb-8 p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" 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 cardData\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{ item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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\r\n</div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;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:241px;margin-bottom:6%}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);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:scroll;overflow-x:hidden;height:275px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}\n"] }]
1368
- }], ctorParameters: () => [{ type: ZoneService }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i3.ToastService }], propDecorators: { dataEmitter: [{
1369
- type: Output
1370
- }] } });
1371
-
1372
- class InterationTableClient430Component {
1373
- ZoneService;
1374
- changeDetector;
1375
- gs;
1376
- toast;
1377
- el;
1378
- cardData = {};
1379
- cardDataLoading = true;
1380
- cardNoData = false;
1381
- headerData;
1382
- isExport = false;
1383
- root;
1384
- destroy$ = new Subject();
1385
- constructor(ZoneService, changeDetector, gs, toast, el) {
1386
- this.ZoneService = ZoneService;
1387
- this.changeDetector = changeDetector;
1388
- this.gs = gs;
1389
- this.toast = toast;
1390
- this.el = el;
1391
- }
1392
- ngOnInit() {
1393
- this.gs.dataRangeValue
1394
- .pipe(takeUntil(this.destroy$), debounceTime(300))
1395
- .subscribe((data) => {
1396
- this.headerData = data;
1397
- this.getCardData();
1398
- });
1399
- }
1400
- ngOnDestroy() {
1401
- // this.zone.runOutsideAngular(() => {
1402
- if (this.root) {
1403
- this.root.dispose();
1404
- }
1405
- // });
1406
- this.destroy$.next();
1407
- this.destroy$.complete();
1408
- }
1409
- getCardData() {
1410
- this.cardDataLoading = true;
1411
- this.cardNoData = true;
1377
+ cardData1 = [];
1378
+ getCardData1() {
1379
+ this.cardDataLoading1 = true;
1380
+ this.cardNoData1 = true;
1412
1381
  const requestData = {
1413
1382
  fromDate: this.headerData.date.startDate,
1414
1383
  toDate: this.headerData.date.endDate,
@@ -1417,27 +1386,26 @@ class InterationTableClient430Component {
1417
1386
  export: false,
1418
1387
  };
1419
1388
  this.ZoneService.getInterationTable430Data(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
1420
- this.cardDataLoading = false;
1389
+ this.cardDataLoading1 = false;
1421
1390
  if (response?.code === 200 && response?.status === "success") {
1422
- console.log(this.cardData);
1423
- this.cardData = response.data.data;
1424
- this.cardNoData = this.cardData.length === 0;
1391
+ this.cardData1 = response.data.data;
1392
+ this.cardNoData1 = this.cardData1.length === 0;
1425
1393
  setTimeout(() => {
1426
- this.createChart(this.cardData); // Call this method after data is set
1394
+ this.createChart(this.cardData1); // Call this method after data is set
1427
1395
  }, 200);
1428
1396
  // this.createChart(this.cardData);
1429
1397
  }
1430
1398
  else {
1431
- this.cardData = [];
1432
- this.cardNoData = true;
1399
+ this.cardData1 = [];
1400
+ this.cardNoData1 = true;
1433
1401
  }
1434
1402
  }, error => {
1435
- this.cardData = [];
1436
- this.cardNoData = true;
1403
+ this.cardData1 = [];
1404
+ this.cardNoData1 = true;
1437
1405
  this.changeDetector.detectChanges();
1438
1406
  });
1439
1407
  }
1440
- createChart(cardData) {
1408
+ createChart(cardData1) {
1441
1409
  setTimeout(() => {
1442
1410
  const chartDiv = document.getElementById("chartdiv");
1443
1411
  if (!chartDiv) {
@@ -1460,7 +1428,7 @@ class InterationTableClient430Component {
1460
1428
  centerX: am5.p50,
1461
1429
  x: am5.p50
1462
1430
  }));
1463
- const data = cardData.map((item) => ({
1431
+ const data = cardData1.map((item) => ({
1464
1432
  year: item.store_name,
1465
1433
  customerCountOver10Min: item.customer_count_over10min,
1466
1434
  customerCountLessThanMin: item.customer_count_lessthanamin
@@ -1523,7 +1491,7 @@ class InterationTableClient430Component {
1523
1491
  chart.appear(1000, 100);
1524
1492
  }, 100);
1525
1493
  }
1526
- onExport() {
1494
+ onExport1() {
1527
1495
  const requestData = {
1528
1496
  fromDate: this.headerData.date.startDate,
1529
1497
  toDate: this.headerData.date.endDate,
@@ -1557,95 +1525,92 @@ class InterationTableClient430Component {
1557
1525
  }
1558
1526
  });
1559
1527
  }
1560
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InterationTableClient430Component, deps: [{ token: ZoneService }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i3.ToastService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
1561
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InterationTableClient430Component, selector: "lib-interation-table-client430", ngImport: i0, template: "\r\n<div class=\"row\">\r\n\r\n<div class=\"col-6 ps-5 pe-0\" *ngIf=\"!cardNoData\" >\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-2\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Customer Funnel</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n <!-- overflowfunnel -->\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"body me-4\">\r\n <div *ngFor=\"let item of cardData\" class=\"m-4\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Passer By\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.passer_by || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.footfall || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Drop In Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.drop_in_rate || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Customer Attended\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.customer_attended || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Interaction Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <span class=\"table-title\">{{ roundof(overallStoreData?.concentrationRate) || '0' }} %</span> -->\r\n <span class=\"table-title\">{{ item.interaction_rate || '--' }} %</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Billing Conversion\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.footfall_overamin_inzone || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Billing Conversion Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.billing_conversion_rate || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Greetings Count\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.greeting_count || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Avg Interaction Time\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.avg_interaction_time || '--' }} Mins\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div>\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 Interation Table Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n \r\n\r\n <!-- <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n \r\n <th>Interaction Rate</th>\r\n <th>Customer Attended</th>\r\n <th>Passer By</th>\r\n \r\n <th>Drop In Rate</th>\r\n <th>Billing Conversion</th>\r\n <th>Footfall</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData\">\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.interaction_rate }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.customer_attended }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.passer_by }}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.zonename }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.drop_in_rate }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.footfall_overamin_inzone }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.footfall }}</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 Interation Table 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\r\n<div class=\"col-6 ps-7 pe-0\" *ngIf=\"!cardNoData\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-2\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Interaction vs Conversion</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 <!-- [disabled]=\"!cardData.length\" -->\r\n <button type=\"button\" (click)=\"onRateExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" >\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>\r\n </div>\r\n <div class=\"card-body mb-14 p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"chartdiv\"></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 <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\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n \r\n</div>\r\n", styles: [".table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.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}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.exportwidth{width:40%}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:70px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-4%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:350px}.form-control:disabled{background-color:#f9fafb!important}.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}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:10%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}#chartdiv{width:100%;height:272px}.overflowfunnel{overflow-y:scroll;max-height:286px}\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"] }] });
1562
- }
1563
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InterationTableClient430Component, decorators: [{
1564
- type: Component,
1565
- args: [{ selector: 'lib-interation-table-client430', template: "\r\n<div class=\"row\">\r\n\r\n<div class=\"col-6 ps-5 pe-0\" *ngIf=\"!cardNoData\" >\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-2\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Customer Funnel</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n <!-- overflowfunnel -->\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"body me-4\">\r\n <div *ngFor=\"let item of cardData\" class=\"m-4\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Passer By\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.passer_by || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.footfall || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Drop In Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.drop_in_rate || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Customer Attended\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.customer_attended || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Interaction Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <span class=\"table-title\">{{ roundof(overallStoreData?.concentrationRate) || '0' }} %</span> -->\r\n <span class=\"table-title\">{{ item.interaction_rate || '--' }} %</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Billing Conversion\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.footfall_overamin_inzone || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Billing Conversion Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.billing_conversion_rate || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Greetings Count\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.greeting_count || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Avg Interaction Time\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.avg_interaction_time || '--' }} Mins\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div>\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 Interation Table Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n \r\n\r\n <!-- <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n \r\n <th>Interaction Rate</th>\r\n <th>Customer Attended</th>\r\n <th>Passer By</th>\r\n \r\n <th>Drop In Rate</th>\r\n <th>Billing Conversion</th>\r\n <th>Footfall</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData\">\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.interaction_rate }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.customer_attended }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.passer_by }}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.zonename }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.drop_in_rate }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.footfall_overamin_inzone }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.footfall }}</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 Interation Table 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\r\n<div class=\"col-6 ps-7 pe-0\" *ngIf=\"!cardNoData\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-2\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Interaction vs Conversion</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 <!-- [disabled]=\"!cardData.length\" -->\r\n <button type=\"button\" (click)=\"onRateExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" >\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>\r\n </div>\r\n <div class=\"card-body mb-14 p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"chartdiv\"></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 <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\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n \r\n</div>\r\n", styles: [".table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.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}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.exportwidth{width:40%}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:70px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-4%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:350px}.form-control:disabled{background-color:#f9fafb!important}.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}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:10%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}#chartdiv{width:100%;height:272px}.overflowfunnel{overflow-y:scroll;max-height:286px}\n"] }]
1566
- }], ctorParameters: () => [{ type: ZoneService }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i3.ToastService }, { type: i0.ElementRef }] });
1567
-
1568
- class InterationTableClient459Component {
1569
- ZoneService;
1570
- changeDetector;
1571
- gs;
1572
- toast;
1573
- cardData = {};
1574
- cardDataLoading = true;
1575
- cardNoData = false;
1576
- headerData;
1577
- isExport = false;
1578
- destroy$ = new Subject();
1579
- constructor(ZoneService, changeDetector, gs, toast) {
1580
- this.ZoneService = ZoneService;
1581
- this.changeDetector = changeDetector;
1582
- this.gs = gs;
1583
- this.toast = toast;
1584
- }
1585
- ngOnInit() {
1586
- this.gs.dataRangeValue
1587
- .pipe(takeUntil(this.destroy$), debounceTime(300))
1588
- .subscribe((data) => {
1589
- this.headerData = data;
1590
- this.getCardData();
1591
- });
1592
- }
1593
- ngOnDestroy() {
1594
- this.destroy$.next();
1595
- this.destroy$.complete();
1596
- }
1597
- getCardData() {
1598
- this.cardDataLoading = true;
1599
- this.cardNoData = true;
1528
+ cardData3 = [];
1529
+ getCardData3() {
1530
+ this.cardDataLoading3 = true;
1531
+ this.cardNoData3 = true;
1600
1532
  const requestData = {
1601
- fromDate: this.headerData.date.startDate,
1602
- toDate: this.headerData.date.endDate,
1603
- storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
1604
- clientId: this.headerData.client,
1533
+ search: this.searchInput3,
1534
+ sort: this.sortColumName,
1535
+ sortBy: this.sortDirection,
1536
+ limit: this.itemsPerPage3,
1537
+ offset: this.currentPage3,
1538
+ fromDate: this.headerData?.date?.startDate,
1539
+ toDate: this.headerData?.date?.endDate,
1540
+ storeId: this.headerData?.stores
1541
+ .filter((store) => store?.checked)
1542
+ .map((store) => store?.storeId),
1543
+ clientId: this.headerData?.client,
1605
1544
  export: false,
1606
1545
  };
1607
- this.ZoneService.getInterationTable459Data(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
1608
- this.cardDataLoading = false;
1546
+ this.ZoneService.getPasserByTable430Data(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
1547
+ this.cardDataLoading3 = false;
1609
1548
  if (response?.code === 200 && response?.status === "success") {
1610
- this.cardData = response.data.data;
1611
- this.cardNoData = this.cardData.length === 0;
1549
+ this.cardData3 = response?.data?.passerByData;
1550
+ this.cardNoData3 = this.cardData3.length === 0;
1612
1551
  }
1613
1552
  else {
1614
- this.cardData = [];
1615
- this.cardNoData = true;
1553
+ this.cardData3 = [];
1554
+ this.cardNoData3 = true;
1616
1555
  }
1617
1556
  }, error => {
1618
- this.cardData = [];
1619
- this.cardNoData = true;
1557
+ this.cardData3 = [];
1558
+ this.cardNoData3 = true;
1620
1559
  this.changeDetector.detectChanges();
1621
1560
  });
1622
1561
  }
1623
- onExport() {
1562
+ onExport3() {
1624
1563
  const requestData = {
1625
- fromDate: this.headerData.date.startDate,
1626
- toDate: this.headerData.date.endDate,
1627
- storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
1628
- clientId: this.headerData.client,
1564
+ search: this.searchInput3,
1565
+ // sort: this.sortColumName,
1566
+ // sortBy: this.sortDirection,
1567
+ limit: this.itemsPerPage3,
1568
+ offset: this.currentPage3,
1569
+ fromDate: this.headerData?.date?.startDate,
1570
+ toDate: this.headerData?.date?.endDate,
1571
+ storeId: this.headerData?.stores
1572
+ .filter((store) => store.checked)
1573
+ .map((store) => store.storeId),
1574
+ clientId: this.headerData?.client,
1629
1575
  export: true,
1630
1576
  };
1631
- this.ZoneService.getInterationTable459DataExport(requestData).pipe(takeUntil(this.destroy$)).subscribe({
1577
+ this.ZoneService.getPasserByTable430DataExport(requestData).pipe(takeUntil(this.destroy$)).subscribe({
1632
1578
  next: (res) => {
1633
- this.ZoneService.saveAsExcelFile(res, 'QueueManagement');
1579
+ this.ZoneService.saveAsExcelFile(res, 'Passer-by Analysis ');
1634
1580
  },
1635
1581
  error: (e) => {
1636
1582
  this.toast.getErrorToast('Something went Wrong..');
1637
1583
  }
1638
1584
  });
1639
1585
  }
1640
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InterationTableClient459Component, deps: [{ token: ZoneService }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
1641
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InterationTableClient459Component, selector: "lib-interation-table-client459", ngImport: i0, template: "<div *ngIf=\"!cardNoData\" class=\"col-12\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-4\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Queue Management</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Store ID</th>\r\n <th>Date</th>\r\n <th>Zone Name</th>\r\n <th>Hour</th>\r\n <th>Footfall</th>\r\n <th>Avg Time Spent (Mins)</th>\r\n <!-- <th>Min Time Spent</th>\r\n <th>Max Time Spent</th> -->\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.store_id || '--'}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.date || '--'}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.zone_name || '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.hour || '0' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.Footfall.toFixed(0)}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.avg_time_spent || '--'}}</div>\r\n </td>\r\n \r\n <!-- <td>\r\n <div class=\"table-title subscribedtext\">{{ item.min_time_spent || '--' }}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.max_time_spent || '--' }}</div>\r\n </td> -->\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 Interation Table 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>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;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:241px;margin-bottom:6%}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);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:scroll;overflow-x:hidden;height:275px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}\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"] }] });
1586
+ sortColumName = '';
1587
+ sortBy = '';
1588
+ sortDirection = '';
1589
+ itemsPerPage3 = 10000;
1590
+ currentPage3 = 0;
1591
+ totalItems3 = 0;
1592
+ searchInput3 = '';
1593
+ sortData(column) {
1594
+ if (this.sortColumName === column) {
1595
+ this.sortDirection = this.sortDirection === 1 ? -1 : 1;
1596
+ }
1597
+ else {
1598
+ this.sortColumName = column;
1599
+ this.sortDirection = 1;
1600
+ }
1601
+ this.getCardData3();
1602
+ }
1603
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SegmentationComponent, deps: [{ token: ZoneService }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
1604
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SegmentationComponent, selector: "lib-segmentation", outputs: { dataEmitter: "dataEmitter" }, ngImport: i0, template: "<div class=\"row\" >\r\n\r\n<div class=\"col-md-4 mt-2\" *ngIf=\"!cardNoData && (headerData?.client === '430') || (!cardNoData && headerData?.client === '463')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Traffic Segmentation</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n \r\n\r\n <div class=\"card-body mb-8 p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" 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 cardData\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{ item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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\r\n<div class=\"col-md-4 mt-2\" *ngIf=\"!cardNoData1 && headerData?.client === '430'\" >\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-2\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Customer Funnel</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)=\"onExport1()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData1.length\">\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>\r\n </div>\r\n <!-- overflowfunnel -->\r\n <div *ngIf=\"!cardDataLoading1 && !cardNoData1\" class=\"body me-4\">\r\n <div *ngFor=\"let item of cardData1\" class=\"m-4\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Passer By\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.passer_by || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.footfall || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Drop In Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.drop_in_rate || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Customer Attended\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.customer_attended || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Interaction Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <span class=\"table-title\">{{ roundof(overallStoreData?.concentrationRate) || '0' }} %</span> -->\r\n <span class=\"table-title\">{{ item.interaction_rate || '--' }} %</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Billing Conversion\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.footfall_overamin_inzone || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Billing Conversion Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.billing_conversion_rate || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Greetings Count\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.greeting_count || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Avg Interaction Time\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.avg_interaction_time || '--' }} Mins\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div>\r\n <ng-container *ngIf=\"cardDataLoading1\">\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=\"cardNoData1 && !cardDataLoading1\">\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 Interation Table Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n \r\n\r\n <!-- <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n \r\n <th>Interaction Rate</th>\r\n <th>Customer Attended</th>\r\n <th>Passer By</th>\r\n \r\n <th>Drop In Rate</th>\r\n <th>Billing Conversion</th>\r\n <th>Footfall</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData\">\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.interaction_rate }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.customer_attended }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.passer_by }}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.zonename }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.drop_in_rate }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.footfall_overamin_inzone }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.footfall }}</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 Interation Table 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\r\n<div class=\"col-md-4 mt-2\" *ngIf=\"!cardNoData1 && headerData?.client === '430'\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-2\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Interaction vs Conversion</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 <!-- [disabled]=\"!cardData.length\" -->\r\n <button type=\"button\" (click)=\"onRateExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" >\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>\r\n </div>\r\n <div class=\"card-body mb-14 p-0\">\r\n <div *ngIf=\"!cardDataLoading1 && !cardNoData1\" id=\"chartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading1\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData1 && !cardDataLoading1\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"col-md-4 mt-2\" *ngIf=\"!cardNoData3 && headerData?.client === '430'\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start flex-column headtext px-3\">Passer-by Analysis</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)=\"onExport3()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData3.length\">\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>\r\n </div>\r\n \r\n\r\n <div class=\"card-body mb-8 p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading3 && !cardNoData3\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('streamName')\">\r\n Camera Name\r\n <svg [ngClass]=\"sortColumName === 'streamName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'streamName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('passerby_count')\">\r\n Passer-by Count\r\n <svg [ngClass]=\"sortColumName === 'passerby_count' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'passerby_count' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData3\">\r\n <td class=\"text-capitalize\">{{ item.streamName ? item.streamName :'--'}}</td>\r\n <td>{{ item.passerby_count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading3\">\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=\"cardNoData3 && !cardDataLoading3\">\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 PasserBy 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\r\n</div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;font-weight:500;line-height:20px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:241px;margin-bottom:6%}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;align-self:stretch}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:scroll;overflow-x:hidden;height:297px}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.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}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.exportwidth{width:40%}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-4%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:350px}.form-control:disabled{background-color:#f9fafb!important}.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}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:10%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}#chartdiv{width:100%;height:272px}.overflowfunnel{overflow-y:scroll;max-height:286px}\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"] }] });
1642
1605
  }
1643
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InterationTableClient459Component, decorators: [{
1606
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SegmentationComponent, decorators: [{
1644
1607
  type: Component,
1645
- args: [{ selector: 'lib-interation-table-client459', template: "<div *ngIf=\"!cardNoData\" class=\"col-12\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-4\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Queue Management</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Store ID</th>\r\n <th>Date</th>\r\n <th>Zone Name</th>\r\n <th>Hour</th>\r\n <th>Footfall</th>\r\n <th>Avg Time Spent (Mins)</th>\r\n <!-- <th>Min Time Spent</th>\r\n <th>Max Time Spent</th> -->\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.store_id || '--'}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.date || '--'}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.zone_name || '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.hour || '0' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.Footfall.toFixed(0)}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.avg_time_spent || '--'}}</div>\r\n </td>\r\n \r\n <!-- <td>\r\n <div class=\"table-title subscribedtext\">{{ item.min_time_spent || '--' }}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.max_time_spent || '--' }}</div>\r\n </td> -->\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 Interation Table 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>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;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:241px;margin-bottom:6%}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);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:scroll;overflow-x:hidden;height:275px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}\n"] }]
1646
- }], ctorParameters: () => [{ type: ZoneService }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i3.ToastService }] });
1608
+ args: [{ selector: 'lib-segmentation', template: "<div class=\"row\" >\r\n\r\n<div class=\"col-md-4 mt-2\" *ngIf=\"!cardNoData && (headerData?.client === '430') || (!cardNoData && headerData?.client === '463')\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Traffic Segmentation</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n \r\n\r\n <div class=\"card-body mb-8 p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" 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 cardData\">\r\n <td>{{ item.category }}</td>\r\n <td>{{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</td>\r\n <td *ngIf=\"headerData?.client === '463'\">{{ item.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} %</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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\r\n<div class=\"col-md-4 mt-2\" *ngIf=\"!cardNoData1 && headerData?.client === '430'\" >\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-2\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Customer Funnel</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)=\"onExport1()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData1.length\">\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>\r\n </div>\r\n <!-- overflowfunnel -->\r\n <div *ngIf=\"!cardDataLoading1 && !cardNoData1\" class=\"body me-4\">\r\n <div *ngFor=\"let item of cardData1\" class=\"m-4\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Passer By\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.passer_by || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.footfall || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Drop In Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.drop_in_rate || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Customer Attended\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.customer_attended || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Interaction Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <span class=\"table-title\">{{ roundof(overallStoreData?.concentrationRate) || '0' }} %</span> -->\r\n <span class=\"table-title\">{{ item.interaction_rate || '--' }} %</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Billing Conversion\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.footfall_overamin_inzone || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Billing Conversion Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.billing_conversion_rate || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Greetings Count\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.greeting_count || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Avg Interaction Time\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.avg_interaction_time || '--' }} Mins\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div>\r\n <ng-container *ngIf=\"cardDataLoading1\">\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=\"cardNoData1 && !cardDataLoading1\">\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 Interation Table Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n \r\n\r\n <!-- <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n \r\n <th>Interaction Rate</th>\r\n <th>Customer Attended</th>\r\n <th>Passer By</th>\r\n \r\n <th>Drop In Rate</th>\r\n <th>Billing Conversion</th>\r\n <th>Footfall</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData\">\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.interaction_rate }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.customer_attended }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.passer_by }}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.zonename }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.drop_in_rate }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.footfall_overamin_inzone }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.footfall }}</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 Interation Table 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\r\n<div class=\"col-md-4 mt-2\" *ngIf=\"!cardNoData1 && headerData?.client === '430'\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-2\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Interaction vs Conversion</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 <!-- [disabled]=\"!cardData.length\" -->\r\n <button type=\"button\" (click)=\"onRateExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" >\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>\r\n </div>\r\n <div class=\"card-body mb-14 p-0\">\r\n <div *ngIf=\"!cardDataLoading1 && !cardNoData1\" id=\"chartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading1\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData1 && !cardDataLoading1\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"col-md-4 mt-2\" *ngIf=\"!cardNoData3 && headerData?.client === '430'\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start flex-column headtext px-3\">Passer-by Analysis</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)=\"onExport3()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData3.length\">\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>\r\n </div>\r\n \r\n\r\n <div class=\"card-body mb-8 p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading3 && !cardNoData3\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('streamName')\">\r\n Camera Name\r\n <svg [ngClass]=\"sortColumName === 'streamName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'streamName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('passerby_count')\">\r\n Passer-by Count\r\n <svg [ngClass]=\"sortColumName === 'passerby_count' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'passerby_count' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData3\">\r\n <td class=\"text-capitalize\">{{ item.streamName ? item.streamName :'--'}}</td>\r\n <td>{{ item.passerby_count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading3\">\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=\"cardNoData3 && !cardDataLoading3\">\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 PasserBy 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\r\n</div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;font-weight:500;line-height:20px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}.card{border-radius:12px}#genderchartdiv{width:100%;height:241px;margin-bottom:6%}table th,table td{height:37.5px!important;padding:0 22px!important;align-items:center;gap:12px;align-self:stretch}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:scroll;overflow-x:hidden;height:297px}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.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}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.exportwidth{width:40%}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-4%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:350px}.form-control:disabled{background-color:#f9fafb!important}.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}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:10%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}#chartdiv{width:100%;height:272px}.overflowfunnel{overflow-y:scroll;max-height:286px}\n"] }]
1609
+ }], ctorParameters: () => [{ type: ZoneService }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i3.ToastService }], propDecorators: { dataEmitter: [{
1610
+ type: Output
1611
+ }] } });
1647
1612
 
1648
- class PasserbyTableComponent {
1613
+ class InterationTableClient459Component {
1649
1614
  ZoneService;
1650
1615
  changeDetector;
1651
1616
  gs;
@@ -1674,34 +1639,20 @@ class PasserbyTableComponent {
1674
1639
  this.destroy$.next();
1675
1640
  this.destroy$.complete();
1676
1641
  }
1677
- itemsPerPage = 10000;
1678
- currentPage = 0;
1679
- totalItems = 0;
1680
- sortColumName = '';
1681
- sortBy = '';
1682
- sortDirection = '';
1683
- searchInput = "";
1684
1642
  getCardData() {
1685
1643
  this.cardDataLoading = true;
1686
1644
  this.cardNoData = true;
1687
1645
  const requestData = {
1688
- search: this.searchInput,
1689
- sort: this.sortColumName,
1690
- sortBy: this.sortDirection,
1691
- limit: this.itemsPerPage,
1692
- offset: this.currentPage,
1693
- fromDate: this.headerData?.date?.startDate,
1694
- toDate: this.headerData?.date?.endDate,
1695
- storeId: this.headerData?.stores
1696
- .filter((store) => store?.checked)
1697
- .map((store) => store?.storeId),
1698
- clientId: this.headerData?.client,
1646
+ fromDate: this.headerData.date.startDate,
1647
+ toDate: this.headerData.date.endDate,
1648
+ storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
1649
+ clientId: this.headerData.client,
1699
1650
  export: false,
1700
1651
  };
1701
- this.ZoneService.getPasserByTable430Data(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
1652
+ this.ZoneService.getInterationTable459Data(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
1702
1653
  this.cardDataLoading = false;
1703
1654
  if (response?.code === 200 && response?.status === "success") {
1704
- this.cardData = response?.data?.passerByData;
1655
+ this.cardData = response.data.data;
1705
1656
  this.cardNoData = this.cardData.length === 0;
1706
1657
  }
1707
1658
  else {
@@ -1716,44 +1667,27 @@ class PasserbyTableComponent {
1716
1667
  }
1717
1668
  onExport() {
1718
1669
  const requestData = {
1719
- search: this.searchInput,
1720
- // sort: this.sortColumName,
1721
- // sortBy: this.sortDirection,
1722
- limit: this.itemsPerPage,
1723
- offset: this.currentPage,
1724
- fromDate: this.headerData?.date?.startDate,
1725
- toDate: this.headerData?.date?.endDate,
1726
- storeId: this.headerData?.stores
1727
- .filter((store) => store.checked)
1728
- .map((store) => store.storeId),
1729
- clientId: this.headerData?.client,
1670
+ fromDate: this.headerData.date.startDate,
1671
+ toDate: this.headerData.date.endDate,
1672
+ storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
1673
+ clientId: this.headerData.client,
1730
1674
  export: true,
1731
1675
  };
1732
- this.ZoneService.getPasserByTable430DataExport(requestData).pipe(takeUntil(this.destroy$)).subscribe({
1676
+ this.ZoneService.getInterationTable459DataExport(requestData).pipe(takeUntil(this.destroy$)).subscribe({
1733
1677
  next: (res) => {
1734
- this.ZoneService.saveAsExcelFile(res, 'Passer-by Analysis ');
1678
+ this.ZoneService.saveAsExcelFile(res, 'QueueManagement');
1735
1679
  },
1736
1680
  error: (e) => {
1737
1681
  this.toast.getErrorToast('Something went Wrong..');
1738
1682
  }
1739
1683
  });
1740
1684
  }
1741
- sortData(column) {
1742
- if (this.sortColumName === column) {
1743
- this.sortDirection = this.sortDirection === 1 ? -1 : 1;
1744
- }
1745
- else {
1746
- this.sortColumName = column;
1747
- this.sortDirection = 1;
1748
- }
1749
- this.getCardData();
1750
- }
1751
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PasserbyTableComponent, deps: [{ token: ZoneService }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
1752
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PasserbyTableComponent, selector: "lib-passerby-table", ngImport: i0, template: "<div class=\"row mt-2\">\r\n <div class=\"col-12 pe-0\" *ngIf=\"!cardNoData\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start flex-column headtext px-3\">Passer-by Analysis</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n \r\n \r\n <div class=\"card-body mb-8 p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('streamName')\">\r\n Camera Name\r\n <svg [ngClass]=\"sortColumName === 'streamName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'streamName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('passerby_count')\">\r\n Passer-by Count\r\n <svg [ngClass]=\"sortColumName === 'passerby_count' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'passerby_count' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData\">\r\n <td class=\"text-capitalize\">{{ item.streamName ? item.streamName :'--'}}</td>\r\n <td>{{ item.passerby_count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 PasserBy 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 \r\n </div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;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:241px;margin-bottom:6%}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);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:275px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.rotate{transform:rotate(180deg)}\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"] }] });
1685
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InterationTableClient459Component, deps: [{ token: ZoneService }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
1686
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InterationTableClient459Component, selector: "lib-interation-table-client459", ngImport: i0, template: "<div *ngIf=\"!cardNoData\" class=\"col-12\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-4\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Queue Management</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Store ID</th>\r\n <th>Date</th>\r\n <th>Zone Name</th>\r\n <th>Hour</th>\r\n <th>Footfall</th>\r\n <th>Avg Time Spent (Mins)</th>\r\n <!-- <th>Min Time Spent</th>\r\n <th>Max Time Spent</th> -->\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.store_id || '--'}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.date || '--'}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.zone_name || '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.hour || '0' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.Footfall.toFixed(0)}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.avg_time_spent || '--'}}</div>\r\n </td>\r\n \r\n <!-- <td>\r\n <div class=\"table-title subscribedtext\">{{ item.min_time_spent || '--' }}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.max_time_spent || '--' }}</div>\r\n </td> -->\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 Interation Table 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>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;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:241px;margin-bottom:6%}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);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:scroll;overflow-x:hidden;height:275px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}\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"] }] });
1753
1687
  }
1754
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PasserbyTableComponent, decorators: [{
1688
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InterationTableClient459Component, decorators: [{
1755
1689
  type: Component,
1756
- args: [{ selector: 'lib-passerby-table', template: "<div class=\"row mt-2\">\r\n <div class=\"col-12 pe-0\" *ngIf=\"!cardNoData\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start flex-column headtext px-3\">Passer-by Analysis</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n \r\n \r\n <div class=\"card-body mb-8 p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('streamName')\">\r\n Camera Name\r\n <svg [ngClass]=\"sortColumName === 'streamName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'streamName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('passerby_count')\">\r\n Passer-by Count\r\n <svg [ngClass]=\"sortColumName === 'passerby_count' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'passerby_count' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData\">\r\n <td class=\"text-capitalize\">{{ item.streamName ? item.streamName :'--'}}</td>\r\n <td>{{ item.passerby_count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 PasserBy 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 \r\n </div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;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:241px;margin-bottom:6%}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);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:275px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.rotate{transform:rotate(180deg)}\n"] }]
1690
+ args: [{ selector: 'lib-interation-table-client459', template: "<div *ngIf=\"!cardNoData\" class=\"col-12\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-4\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Queue Management</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n\r\n <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>Store ID</th>\r\n <th>Date</th>\r\n <th>Zone Name</th>\r\n <th>Hour</th>\r\n <th>Footfall</th>\r\n <th>Avg Time Spent (Mins)</th>\r\n <!-- <th>Min Time Spent</th>\r\n <th>Max Time Spent</th> -->\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.store_id || '--'}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.date || '--'}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.zone_name || '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.hour || '0' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.Footfall.toFixed(0)}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.avg_time_spent || '--'}}</div>\r\n </td>\r\n \r\n <!-- <td>\r\n <div class=\"table-title subscribedtext\">{{ item.min_time_spent || '--' }}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.max_time_spent || '--' }}</div>\r\n </td> -->\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 Interation Table 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>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;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:241px;margin-bottom:6%}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);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:scroll;overflow-x:hidden;height:275px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}\n"] }]
1757
1691
  }], ctorParameters: () => [{ type: ZoneService }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i3.ToastService }] });
1758
1692
 
1759
1693
  class TangoAnalyseZoneComponent {
@@ -1785,6 +1719,10 @@ class TangoAnalyseZoneComponent {
1785
1719
  this.updateStoreId();
1786
1720
  });
1787
1721
  }
1722
+ hasSegmentationData = false;
1723
+ updateSegmentationStatus(hasData) {
1724
+ this.hasSegmentationData = hasData;
1725
+ }
1788
1726
  // receiveData(data: any) {
1789
1727
  // this.receivedData = data;
1790
1728
  // console.log(data)
@@ -1802,11 +1740,11 @@ class TangoAnalyseZoneComponent {
1802
1740
  this.storeId = this.headerData.stores.filter((store) => store.checked).length;
1803
1741
  }
1804
1742
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneComponent, deps: [{ token: i2.PageInfoService }, { token: i2.GlobalStateService }, { token: ZoneService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1805
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TangoAnalyseZoneComponent, selector: "lib-tango-analyse-zone", ngImport: i0, template: "<div *ngIf=\"storeId === 1\">\r\n<lib-zone-concentration></lib-zone-concentration>\r\n</div>\r\n<div class=\"mt-4\">\r\n <lib-overallcards></lib-overallcards>\r\n</div>\r\n<div class=\"row px-0\">\r\n <div class=\"col-12\">\r\n <div class=\"row w-100\">\r\n <!-- <ng-container *ngIf=\"receiveData\"> -->\r\n <div *ngIf=\"storeId === 1 && (headerData?.client === '430' || headerData?.client === '463')\" class=\"col-4\">\r\n <lib-segmentation></lib-segmentation>\r\n </div>\r\n <!-- </ng-container> -->\r\n <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-8\">\r\n <lib-interation-table-client430></lib-interation-table-client430>\r\n </div>\r\n <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-4\">\r\n <lib-passerby-table></lib-passerby-table>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"mt-4\" *ngIf=\"storeId === 1 && headerData?.client === '459'\">\r\n<lib-interation-table-client459></lib-interation-table-client459>\r\n</div>\r\n<div class=\"mt-2\" *ngIf=\"storeId > 1\">\r\n <lib-top-performing-zones></lib-top-performing-zones>\r\n</div>\r\n<div class=\"mt-4\" *ngIf=\"storeId > 1\">\r\n <lib-zone-summary-table></lib-zone-summary-table>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OverallcardsComponent, selector: "lib-overallcards" }, { kind: "component", type: TopPerformingZonesComponent, selector: "lib-top-performing-zones" }, { kind: "component", type: ZoneSummaryTableComponent, selector: "lib-zone-summary-table" }, { kind: "component", type: ZoneConcentrationComponent, selector: "lib-zone-concentration" }, { kind: "component", type: SegmentationComponent, selector: "lib-segmentation", outputs: ["dataEmitter"] }, { kind: "component", type: InterationTableClient430Component, selector: "lib-interation-table-client430" }, { kind: "component", type: InterationTableClient459Component, selector: "lib-interation-table-client459" }, { kind: "component", type: PasserbyTableComponent, selector: "lib-passerby-table" }] });
1743
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TangoAnalyseZoneComponent, selector: "lib-tango-analyse-zone", ngImport: i0, template: "<div *ngIf=\"storeId === 1\">\r\n<lib-zone-concentration></lib-zone-concentration>\r\n</div>\r\n<div class=\"mt-4\">\r\n <lib-overallcards></lib-overallcards>\r\n</div>\r\n<div *ngIf=\"storeId === 1\">\r\n <lib-segmentation></lib-segmentation>\r\n</div>\r\n <!-- <ng-container *ngIf=\"hasSegmentationData === true\"> -->\r\n \r\n <!-- </ng-container> -->\r\n <!-- <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-8\">\r\n <lib-interation-table-client430></lib-interation-table-client430>\r\n </div>\r\n <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-4\">\r\n <lib-passerby-table></lib-passerby-table>\r\n </div>\r\n </div> -->\r\n\r\n\r\n<div class=\"mt-4\" *ngIf=\"storeId === 1 && headerData?.client === '459'\">\r\n<lib-interation-table-client459></lib-interation-table-client459>\r\n</div>\r\n<div class=\"mt-2\" *ngIf=\"storeId > 1\">\r\n <lib-top-performing-zones></lib-top-performing-zones>\r\n</div>\r\n<div class=\"mt-4\" *ngIf=\"storeId > 1\">\r\n <lib-zone-summary-table></lib-zone-summary-table>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OverallcardsComponent, selector: "lib-overallcards" }, { kind: "component", type: TopPerformingZonesComponent, selector: "lib-top-performing-zones" }, { kind: "component", type: ZoneSummaryTableComponent, selector: "lib-zone-summary-table" }, { kind: "component", type: ZoneConcentrationComponent, selector: "lib-zone-concentration" }, { kind: "component", type: SegmentationComponent, selector: "lib-segmentation", outputs: ["dataEmitter"] }, { kind: "component", type: InterationTableClient459Component, selector: "lib-interation-table-client459" }] });
1806
1744
  }
1807
1745
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneComponent, decorators: [{
1808
1746
  type: Component,
1809
- args: [{ selector: 'lib-tango-analyse-zone', template: "<div *ngIf=\"storeId === 1\">\r\n<lib-zone-concentration></lib-zone-concentration>\r\n</div>\r\n<div class=\"mt-4\">\r\n <lib-overallcards></lib-overallcards>\r\n</div>\r\n<div class=\"row px-0\">\r\n <div class=\"col-12\">\r\n <div class=\"row w-100\">\r\n <!-- <ng-container *ngIf=\"receiveData\"> -->\r\n <div *ngIf=\"storeId === 1 && (headerData?.client === '430' || headerData?.client === '463')\" class=\"col-4\">\r\n <lib-segmentation></lib-segmentation>\r\n </div>\r\n <!-- </ng-container> -->\r\n <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-8\">\r\n <lib-interation-table-client430></lib-interation-table-client430>\r\n </div>\r\n <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-4\">\r\n <lib-passerby-table></lib-passerby-table>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"mt-4\" *ngIf=\"storeId === 1 && headerData?.client === '459'\">\r\n<lib-interation-table-client459></lib-interation-table-client459>\r\n</div>\r\n<div class=\"mt-2\" *ngIf=\"storeId > 1\">\r\n <lib-top-performing-zones></lib-top-performing-zones>\r\n</div>\r\n<div class=\"mt-4\" *ngIf=\"storeId > 1\">\r\n <lib-zone-summary-table></lib-zone-summary-table>\r\n</div>\r\n" }]
1747
+ args: [{ selector: 'lib-tango-analyse-zone', template: "<div *ngIf=\"storeId === 1\">\r\n<lib-zone-concentration></lib-zone-concentration>\r\n</div>\r\n<div class=\"mt-4\">\r\n <lib-overallcards></lib-overallcards>\r\n</div>\r\n<div *ngIf=\"storeId === 1\">\r\n <lib-segmentation></lib-segmentation>\r\n</div>\r\n <!-- <ng-container *ngIf=\"hasSegmentationData === true\"> -->\r\n \r\n <!-- </ng-container> -->\r\n <!-- <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-8\">\r\n <lib-interation-table-client430></lib-interation-table-client430>\r\n </div>\r\n <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-4\">\r\n <lib-passerby-table></lib-passerby-table>\r\n </div>\r\n </div> -->\r\n\r\n\r\n<div class=\"mt-4\" *ngIf=\"storeId === 1 && headerData?.client === '459'\">\r\n<lib-interation-table-client459></lib-interation-table-client459>\r\n</div>\r\n<div class=\"mt-2\" *ngIf=\"storeId > 1\">\r\n <lib-top-performing-zones></lib-top-performing-zones>\r\n</div>\r\n<div class=\"mt-4\" *ngIf=\"storeId > 1\">\r\n <lib-zone-summary-table></lib-zone-summary-table>\r\n</div>\r\n" }]
1810
1748
  }], ctorParameters: () => [{ type: i2.PageInfoService }, { type: i2.GlobalStateService }, { type: ZoneService }, { type: i0.ChangeDetectorRef }] });
1811
1749
 
1812
1750
  const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
@@ -3829,6 +3767,313 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3829
3767
  }]
3830
3768
  }] });
3831
3769
 
3770
+ class InterationTableClient430Component {
3771
+ ZoneService;
3772
+ changeDetector;
3773
+ gs;
3774
+ toast;
3775
+ el;
3776
+ cardData = {};
3777
+ cardDataLoading = true;
3778
+ cardNoData = false;
3779
+ headerData;
3780
+ isExport = false;
3781
+ root;
3782
+ destroy$ = new Subject();
3783
+ constructor(ZoneService, changeDetector, gs, toast, el) {
3784
+ this.ZoneService = ZoneService;
3785
+ this.changeDetector = changeDetector;
3786
+ this.gs = gs;
3787
+ this.toast = toast;
3788
+ this.el = el;
3789
+ }
3790
+ ngOnInit() {
3791
+ this.gs.dataRangeValue
3792
+ .pipe(takeUntil(this.destroy$), debounceTime(300))
3793
+ .subscribe((data) => {
3794
+ this.headerData = data;
3795
+ this.getCardData();
3796
+ });
3797
+ }
3798
+ ngOnDestroy() {
3799
+ // this.zone.runOutsideAngular(() => {
3800
+ if (this.root) {
3801
+ this.root.dispose();
3802
+ }
3803
+ // });
3804
+ this.destroy$.next();
3805
+ this.destroy$.complete();
3806
+ }
3807
+ getCardData() {
3808
+ this.cardDataLoading = true;
3809
+ this.cardNoData = true;
3810
+ const requestData = {
3811
+ fromDate: this.headerData.date.startDate,
3812
+ toDate: this.headerData.date.endDate,
3813
+ storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
3814
+ clientId: this.headerData.client,
3815
+ export: false,
3816
+ };
3817
+ this.ZoneService.getInterationTable430Data(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
3818
+ this.cardDataLoading = false;
3819
+ if (response?.code === 200 && response?.status === "success") {
3820
+ console.log(this.cardData);
3821
+ this.cardData = response.data.data;
3822
+ this.cardNoData = this.cardData.length === 0;
3823
+ setTimeout(() => {
3824
+ this.createChart(this.cardData); // Call this method after data is set
3825
+ }, 200);
3826
+ // this.createChart(this.cardData);
3827
+ }
3828
+ else {
3829
+ this.cardData = [];
3830
+ this.cardNoData = true;
3831
+ }
3832
+ }, error => {
3833
+ this.cardData = [];
3834
+ this.cardNoData = true;
3835
+ this.changeDetector.detectChanges();
3836
+ });
3837
+ }
3838
+ createChart(cardData) {
3839
+ setTimeout(() => {
3840
+ const chartDiv = document.getElementById("chartdiv");
3841
+ if (!chartDiv) {
3842
+ console.error("Could not find HTML element with id `chartdiv`");
3843
+ return;
3844
+ }
3845
+ if (this.root) {
3846
+ this.root.dispose();
3847
+ }
3848
+ this.root = am5.Root.new('chartdiv');
3849
+ const chart = this.root.container.children.push(am5xy.XYChart.new(this.root, {
3850
+ panX: false,
3851
+ panY: false,
3852
+ paddingLeft: 0,
3853
+ wheelX: "panX",
3854
+ wheelY: "zoomX",
3855
+ layout: this.root.verticalLayout
3856
+ }));
3857
+ const legend = chart.children.push(am5.Legend.new(this.root, {
3858
+ centerX: am5.p50,
3859
+ x: am5.p50
3860
+ }));
3861
+ const data = cardData.map((item) => ({
3862
+ year: item.store_name,
3863
+ customerCountOver10Min: item.customer_count_over10min,
3864
+ customerCountLessThanMin: item.customer_count_lessthanamin
3865
+ }));
3866
+ const xRenderer = am5xy.AxisRendererX.new(this.root, {
3867
+ cellStartLocation: 0.1,
3868
+ cellEndLocation: 0.9,
3869
+ minorGridEnabled: true
3870
+ });
3871
+ const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(this.root, {
3872
+ categoryField: "year",
3873
+ renderer: xRenderer,
3874
+ tooltip: am5.Tooltip.new(this.root, {})
3875
+ }));
3876
+ xRenderer.grid.template.setAll({
3877
+ location: 1
3878
+ });
3879
+ xAxis.data.setAll(data);
3880
+ xAxis.get("renderer").labels.template.setAll({
3881
+ visible: false
3882
+ });
3883
+ const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(this.root, {
3884
+ renderer: am5xy.AxisRendererY.new(this.root, {
3885
+ strokeOpacity: 0.1
3886
+ })
3887
+ }));
3888
+ // Use an arrow function to ensure `this` is bound correctly
3889
+ const makeSeries = (name, fieldName) => {
3890
+ const series = chart.series.push(am5xy.ColumnSeries.new(this.root, {
3891
+ name: name,
3892
+ xAxis: xAxis,
3893
+ yAxis: yAxis,
3894
+ valueYField: fieldName,
3895
+ categoryXField: "year"
3896
+ }));
3897
+ series.columns.template.setAll({
3898
+ tooltipText: "{name}: {valueY}",
3899
+ width: am5.percent(90),
3900
+ tooltipY: 0,
3901
+ strokeOpacity: 0
3902
+ });
3903
+ series.data.setAll(data);
3904
+ series.appear();
3905
+ series.bullets.push(() => {
3906
+ return am5.Bullet.new(this.root, {
3907
+ locationY: 0,
3908
+ sprite: am5.Label.new(this.root, {
3909
+ text: "{valueY}",
3910
+ fill: this.root.interfaceColors.get("alternativeText"),
3911
+ centerY: 0,
3912
+ centerX: am5.p50,
3913
+ populateText: true
3914
+ })
3915
+ });
3916
+ });
3917
+ legend.data.push(series);
3918
+ };
3919
+ makeSeries("Customer spent more than 10 mins", "customerCountOver10Min");
3920
+ makeSeries("Billing Conversion", "customerCountLessThanMin");
3921
+ chart.appear(1000, 100);
3922
+ }, 100);
3923
+ }
3924
+ onExport() {
3925
+ const requestData = {
3926
+ fromDate: this.headerData.date.startDate,
3927
+ toDate: this.headerData.date.endDate,
3928
+ storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
3929
+ clientId: this.headerData.client,
3930
+ export: true,
3931
+ };
3932
+ this.ZoneService.getInterationTable430DataExport(requestData).pipe(takeUntil(this.destroy$)).subscribe({
3933
+ next: (res) => {
3934
+ this.ZoneService.saveAsExcelFile(res, 'CustomerFunnel');
3935
+ },
3936
+ error: (e) => {
3937
+ this.toast.getErrorToast('Something went Wrong..');
3938
+ }
3939
+ });
3940
+ }
3941
+ onRateExport() {
3942
+ const requestData = {
3943
+ fromDate: this.headerData.date.startDate,
3944
+ toDate: this.headerData.date.endDate,
3945
+ storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
3946
+ clientId: this.headerData.client,
3947
+ export: true,
3948
+ };
3949
+ this.ZoneService.zoneInteractionTableExport_430(requestData).pipe(takeUntil(this.destroy$)).subscribe({
3950
+ next: (res) => {
3951
+ this.ZoneService.saveAsExcelFile(res, 'InteractionvsConversion');
3952
+ },
3953
+ error: (e) => {
3954
+ this.toast.getErrorToast('Something went Wrong..');
3955
+ }
3956
+ });
3957
+ }
3958
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InterationTableClient430Component, deps: [{ token: ZoneService }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i3.ToastService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
3959
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InterationTableClient430Component, selector: "lib-interation-table-client430", ngImport: i0, template: "\r\n<div class=\"row\">\r\n\r\n<div class=\"col-6 ps-5 pe-0\" *ngIf=\"!cardNoData\" >\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-2\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Customer Funnel</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n <!-- overflowfunnel -->\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"body me-4\">\r\n <div *ngFor=\"let item of cardData\" class=\"m-4\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Passer By\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.passer_by || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.footfall || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Drop In Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.drop_in_rate || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Customer Attended\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.customer_attended || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Interaction Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <span class=\"table-title\">{{ roundof(overallStoreData?.concentrationRate) || '0' }} %</span> -->\r\n <span class=\"table-title\">{{ item.interaction_rate || '--' }} %</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Billing Conversion\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.footfall_overamin_inzone || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Billing Conversion Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.billing_conversion_rate || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Greetings Count\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.greeting_count || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Avg Interaction Time\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.avg_interaction_time || '--' }} Mins\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div>\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 Interation Table Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n \r\n\r\n <!-- <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n \r\n <th>Interaction Rate</th>\r\n <th>Customer Attended</th>\r\n <th>Passer By</th>\r\n \r\n <th>Drop In Rate</th>\r\n <th>Billing Conversion</th>\r\n <th>Footfall</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData\">\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.interaction_rate }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.customer_attended }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.passer_by }}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.zonename }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.drop_in_rate }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.footfall_overamin_inzone }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.footfall }}</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 Interation Table 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\r\n<div class=\"col-6 ps-7 pe-0\" *ngIf=\"!cardNoData\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-2\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Interaction vs Conversion</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 <!-- [disabled]=\"!cardData.length\" -->\r\n <button type=\"button\" (click)=\"onRateExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" >\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>\r\n </div>\r\n <div class=\"card-body mb-14 p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"chartdiv\"></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 <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\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n \r\n</div>\r\n", styles: [".table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.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}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.exportwidth{width:40%}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:70px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-4%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:350px}.form-control:disabled{background-color:#f9fafb!important}.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}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:10%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}#chartdiv{width:100%;height:272px}.overflowfunnel{overflow-y:scroll;max-height:286px}\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"] }] });
3960
+ }
3961
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InterationTableClient430Component, decorators: [{
3962
+ type: Component,
3963
+ args: [{ selector: 'lib-interation-table-client430', template: "\r\n<div class=\"row\">\r\n\r\n<div class=\"col-6 ps-5 pe-0\" *ngIf=\"!cardNoData\" >\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-2\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Customer Funnel</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n <!-- overflowfunnel -->\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" class=\"body me-4\">\r\n <div *ngFor=\"let item of cardData\" class=\"m-4\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Passer By\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.passer_by || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.footfall || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Drop In Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.drop_in_rate || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Customer Attended\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.customer_attended || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Interaction Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <span class=\"table-title\">{{ roundof(overallStoreData?.concentrationRate) || '0' }} %</span> -->\r\n <span class=\"table-title\">{{ item.interaction_rate || '--' }} %</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Billing Conversion\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.footfall_overamin_inzone || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Billing Conversion Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.billing_conversion_rate || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Greetings Count\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.greeting_count || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-2\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Avg Interaction Time\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ item.avg_interaction_time || '--' }} Mins\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div>\r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 Interation Table Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n \r\n\r\n <!-- <div class=\"card-body p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n \r\n <th>Interaction Rate</th>\r\n <th>Customer Attended</th>\r\n <th>Passer By</th>\r\n \r\n <th>Drop In Rate</th>\r\n <th>Billing Conversion</th>\r\n <th>Footfall</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData\">\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.interaction_rate }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.customer_attended }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.passer_by }}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.zonename }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.drop_in_rate }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.footfall_overamin_inzone }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.footfall }}</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 Interation Table 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\r\n<div class=\"col-6 ps-7 pe-0\" *ngIf=\"!cardNoData\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 p-2\">\r\n <div class=\"card-title align-items-start flex-column headtext p-3\">Interaction vs Conversion</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 <!-- [disabled]=\"!cardData.length\" -->\r\n <button type=\"button\" (click)=\"onRateExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" >\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>\r\n </div>\r\n <div class=\"card-body mb-14 p-0\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"chartdiv\"></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 <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\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n \r\n</div>\r\n", styles: [".table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.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}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.exportwidth{width:40%}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:70px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-4%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:350px}.form-control:disabled{background-color:#f9fafb!important}.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}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:10%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}#chartdiv{width:100%;height:272px}.overflowfunnel{overflow-y:scroll;max-height:286px}\n"] }]
3964
+ }], ctorParameters: () => [{ type: ZoneService }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i3.ToastService }, { type: i0.ElementRef }] });
3965
+
3966
+ class PasserbyTableComponent {
3967
+ ZoneService;
3968
+ changeDetector;
3969
+ gs;
3970
+ toast;
3971
+ cardData = {};
3972
+ cardDataLoading = true;
3973
+ cardNoData = false;
3974
+ headerData;
3975
+ isExport = false;
3976
+ destroy$ = new Subject();
3977
+ constructor(ZoneService, changeDetector, gs, toast) {
3978
+ this.ZoneService = ZoneService;
3979
+ this.changeDetector = changeDetector;
3980
+ this.gs = gs;
3981
+ this.toast = toast;
3982
+ }
3983
+ ngOnInit() {
3984
+ this.gs.dataRangeValue
3985
+ .pipe(takeUntil(this.destroy$), debounceTime(300))
3986
+ .subscribe((data) => {
3987
+ this.headerData = data;
3988
+ this.getCardData();
3989
+ });
3990
+ }
3991
+ ngOnDestroy() {
3992
+ this.destroy$.next();
3993
+ this.destroy$.complete();
3994
+ }
3995
+ itemsPerPage = 10000;
3996
+ currentPage = 0;
3997
+ totalItems = 0;
3998
+ sortColumName = '';
3999
+ sortBy = '';
4000
+ sortDirection = '';
4001
+ searchInput = "";
4002
+ getCardData() {
4003
+ this.cardDataLoading = true;
4004
+ this.cardNoData = true;
4005
+ const requestData = {
4006
+ search: this.searchInput,
4007
+ sort: this.sortColumName,
4008
+ sortBy: this.sortDirection,
4009
+ limit: this.itemsPerPage,
4010
+ offset: this.currentPage,
4011
+ fromDate: this.headerData?.date?.startDate,
4012
+ toDate: this.headerData?.date?.endDate,
4013
+ storeId: this.headerData?.stores
4014
+ .filter((store) => store?.checked)
4015
+ .map((store) => store?.storeId),
4016
+ clientId: this.headerData?.client,
4017
+ export: false,
4018
+ };
4019
+ this.ZoneService.getPasserByTable430Data(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
4020
+ this.cardDataLoading = false;
4021
+ if (response?.code === 200 && response?.status === "success") {
4022
+ this.cardData = response?.data?.passerByData;
4023
+ this.cardNoData = this.cardData.length === 0;
4024
+ }
4025
+ else {
4026
+ this.cardData = [];
4027
+ this.cardNoData = true;
4028
+ }
4029
+ }, error => {
4030
+ this.cardData = [];
4031
+ this.cardNoData = true;
4032
+ this.changeDetector.detectChanges();
4033
+ });
4034
+ }
4035
+ onExport() {
4036
+ const requestData = {
4037
+ search: this.searchInput,
4038
+ // sort: this.sortColumName,
4039
+ // sortBy: this.sortDirection,
4040
+ limit: this.itemsPerPage,
4041
+ offset: this.currentPage,
4042
+ fromDate: this.headerData?.date?.startDate,
4043
+ toDate: this.headerData?.date?.endDate,
4044
+ storeId: this.headerData?.stores
4045
+ .filter((store) => store.checked)
4046
+ .map((store) => store.storeId),
4047
+ clientId: this.headerData?.client,
4048
+ export: true,
4049
+ };
4050
+ this.ZoneService.getPasserByTable430DataExport(requestData).pipe(takeUntil(this.destroy$)).subscribe({
4051
+ next: (res) => {
4052
+ this.ZoneService.saveAsExcelFile(res, 'Passer-by Analysis ');
4053
+ },
4054
+ error: (e) => {
4055
+ this.toast.getErrorToast('Something went Wrong..');
4056
+ }
4057
+ });
4058
+ }
4059
+ sortData(column) {
4060
+ if (this.sortColumName === column) {
4061
+ this.sortDirection = this.sortDirection === 1 ? -1 : 1;
4062
+ }
4063
+ else {
4064
+ this.sortColumName = column;
4065
+ this.sortDirection = 1;
4066
+ }
4067
+ this.getCardData();
4068
+ }
4069
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PasserbyTableComponent, deps: [{ token: ZoneService }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
4070
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PasserbyTableComponent, selector: "lib-passerby-table", ngImport: i0, template: "<div class=\"row mt-2\">\r\n <div class=\"col-12 pe-0\" *ngIf=\"!cardNoData\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start flex-column headtext px-3\">Passer-by Analysis</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n \r\n \r\n <div class=\"card-body mb-8 p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('streamName')\">\r\n Camera Name\r\n <svg [ngClass]=\"sortColumName === 'streamName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'streamName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('passerby_count')\">\r\n Passer-by Count\r\n <svg [ngClass]=\"sortColumName === 'passerby_count' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'passerby_count' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData\">\r\n <td class=\"text-capitalize\">{{ item.streamName ? item.streamName :'--'}}</td>\r\n <td>{{ item.passerby_count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 PasserBy 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 \r\n </div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;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:241px;margin-bottom:6%}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);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:275px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.rotate{transform:rotate(180deg)}\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"] }] });
4071
+ }
4072
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PasserbyTableComponent, decorators: [{
4073
+ type: Component,
4074
+ args: [{ selector: 'lib-passerby-table', template: "<div class=\"row mt-2\">\r\n <div class=\"col-12 pe-0\" *ngIf=\"!cardNoData\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 px-4\">\r\n <div class=\"card-title align-items-start flex-column headtext px-3\">Passer-by Analysis</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)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!cardData.length\">\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>\r\n </div>\r\n \r\n \r\n <div class=\"card-body mb-8 p-0\">\r\n <div class=\"mx-3 agerangescroll\">\r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('streamName')\">\r\n Camera Name\r\n <svg [ngClass]=\"sortColumName === 'streamName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'streamName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('passerby_count')\">\r\n Passer-by Count\r\n <svg [ngClass]=\"sortColumName === 'passerby_count' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n 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 === 'passerby_count' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of cardData\">\r\n <td class=\"text-capitalize\">{{ item.streamName ? item.streamName :'--'}}</td>\r\n <td>{{ item.passerby_count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n <ng-container *ngIf=\"cardDataLoading\">\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=\"cardNoData && !cardDataLoading\">\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 PasserBy 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 \r\n </div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:13px;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:241px;margin-bottom:6%}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);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.agerangescroll{overflow-y:auto;overflow-x:hidden;height:275px}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.rotate{transform:rotate(180deg)}\n"] }]
4075
+ }], ctorParameters: () => [{ type: ZoneService }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i3.ToastService }] });
4076
+
3832
4077
  class TangoAnalyseZoneModule {
3833
4078
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
3834
4079
  static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneModule, declarations: [OverallcardsComponent,