tango-app-ui-analyse-zone 3.7.1-beta.7 → 3.7.1-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/esm2022/lib/components/customer-journey-chart/customer-journey-chart.component.mjs +136 -9
  2. package/esm2022/lib/components/interation-table-client459/interation-table-client459.component.mjs +3 -3
  3. package/esm2022/lib/components/services/zone.service.mjs +13 -1
  4. package/fesm2022/tango-app-ui-analyse-zone.mjs +144 -7
  5. package/fesm2022/tango-app-ui-analyse-zone.mjs.map +1 -1
  6. package/lib/components/customer-journey-chart/customer-journey-chart.component.d.ts +21 -1
  7. package/lib/components/services/zone.service.d.ts +4 -0
  8. package/package.json +1 -1
package/fesm2022/tango-app-ui-analyse-zone.mjs CHANGED
@@ -163,6 +163,18 @@ class ZoneService {
163
163
  getData$() {
164
164
  return this.zoneNameSubject.asObservable(); // stream to subscribe
165
165
  }
166
+ getHeaderZone(data) {
167
+ return this.http.post(`${this.trafficApiUrl}/headerZoneV2`, data);
168
+ }
169
+ getNewZoneFF(data) {
170
+ return this.http.post(`${this.zoneAnalysisV1Url}/getNewZoneFF_v2`, data);
171
+ }
172
+ getSelectedZoneFF(data) {
173
+ return this.http.post(`${this.zoneAnalysisV1Url}/getSelectedZoneFF_v2`, data);
174
+ }
175
+ getSelectedZoneFFExport(data) {
176
+ return this.http.post(`${this.zoneAnalysisV1Url}/getSelectedZoneFF_v2`, data, { responseType: 'arraybuffer' });
177
+ }
166
178
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneService, deps: [{ token: i1.HttpClient }, { token: i2.GlobalStateService }], target: i0.ɵɵFactoryTarget.Injectable });
167
179
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneService, providedIn: 'root' });
168
180
  }
@@ -1998,11 +2010,11 @@ class InterationTableClient459Component {
1998
2010
  });
1999
2011
  }
2000
2012
  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 });
2001
- 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"] }] });
2013
+ 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 ? item.store_id :'--'}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.date ? item.date :'--'}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.zone_name ? item.zone_name: '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.hour ? item.hour : '0' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.Footfall && item.Footfall !== 0 ? item.Footfall.toFixed(0) : '--' }}\r\n </div>\r\n</td>\r\n\r\n<td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.avg_time_spent && item.avg_time_spent !== 0 ? item.avg_time_spent : '--' }}\r\n </div>\r\n</td>\r\n\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"] }] });
2002
2014
  }
2003
2015
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InterationTableClient459Component, decorators: [{
2004
2016
  type: Component,
2005
- 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"] }]
2017
+ 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 ? item.store_id :'--'}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.date ? item.date :'--'}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.zone_name ? item.zone_name: '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">{{ item.hour ? item.hour : '0' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.Footfall && item.Footfall !== 0 ? item.Footfall.toFixed(0) : '--' }}\r\n </div>\r\n</td>\r\n\r\n<td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.avg_time_spent && item.avg_time_spent !== 0 ? item.avg_time_spent : '--' }}\r\n </div>\r\n</td>\r\n\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"] }]
2006
2018
  }], ctorParameters: () => [{ type: ZoneService }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i3.ToastService }] });
2007
2019
 
2008
2020
  const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
@@ -2127,6 +2139,7 @@ class CustomerJourneyChartComponent {
2127
2139
  router;
2128
2140
  toast;
2129
2141
  gs;
2142
+ zoneService;
2130
2143
  zoneV2Service;
2131
2144
  chartRoot;
2132
2145
  viewMode = 'chart';
@@ -2142,10 +2155,11 @@ class CustomerJourneyChartComponent {
2142
2155
  customerJourneyTableData = [];
2143
2156
  customerJourneyChartData = [];
2144
2157
  destroy$ = new Subject();
2145
- constructor(router, toast, gs, zoneV2Service) {
2158
+ constructor(router, toast, gs, zoneService, zoneV2Service) {
2146
2159
  this.router = router;
2147
2160
  this.toast = toast;
2148
2161
  this.gs = gs;
2162
+ this.zoneService = zoneService;
2149
2163
  this.zoneV2Service = zoneV2Service;
2150
2164
  }
2151
2165
  ngOnInit() {
@@ -2153,6 +2167,8 @@ class CustomerJourneyChartComponent {
2153
2167
  .pipe(takeUntil(this.destroy$), debounceTime(300))
2154
2168
  .subscribe((data) => {
2155
2169
  this.headerData = data;
2170
+ this.getheaderZoneApi();
2171
+ this.getNewZoneData();
2156
2172
  if (this.viewMode === 'chart') {
2157
2173
  this.getCustomerJourneyChartData();
2158
2174
  }
@@ -2391,13 +2407,134 @@ class CustomerJourneyChartComponent {
2391
2407
  ngOnDestroy() {
2392
2408
  this.chartRoot?.dispose();
2393
2409
  }
2394
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerJourneyChartComponent, deps: [{ token: i4.Router }, { token: i3.ToastService }, { token: i2.GlobalStateService }, { token: Zonev2Service }], target: i0.ɵɵFactoryTarget.Component });
2395
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomerJourneyChartComponent, selector: "lib-customer-journey-chart", ngImport: i0, template: "<section id=\"customer-journey-chart\" class=\"card p-5\">\r\n <!-- ---------HEADER---------- -->\r\n <div class=\"d-flex justify-content-between mb-3\">\r\n <div class=\"d-flex align-items-center justify-content-center gap-3\">\r\n <h3>Customer Journey</h3>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_13146_67458)\">\r\n <path\r\n d=\"M6.06065 6.91667C6.21739 6.47111 6.52675 6.0954 6.93395 5.85609C7.34116 5.61677 7.81991 5.52929 8.28544 5.60914C8.75096 5.68899 9.1732 5.93102 9.47737 6.29235C9.78154 6.65369 9.94802 7.11101 9.94732 7.58333C9.94732 8.91667 7.94732 9.58333 7.94732 9.58333M8.00065 12.25H8.00732M14.6673 8.91667C14.6673 12.5986 11.6826 15.5833 8.00065 15.5833C4.31875 15.5833 1.33398 12.5986 1.33398 8.91667C1.33398 5.23477 4.31875 2.25 8.00065 2.25C11.6826 2.25 14.6673 5.23477 14.6673 8.91667Z\"\r\n stroke=\"#98A2B3\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_13146_67458\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0 0.916016)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-5\">\r\n <div style=\"position: relative\" [hidden]=\"viewMode === 'chart'\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding: 0.68rem 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div id=\"segment-btn\">\r\n <div [class.active]=\"viewMode === 'chart'\" class=\"segment chart-btn\" (click)=\"toggleView('chart')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M15 17.5833V9.25M10 17.5833V4.25M5 17.5833V12.5833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n\r\n <div [class.active]=\"viewMode === 'table'\" class=\"segment table-btn\" (click)=\"toggleView('table')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M6.66667 5.91602H17.5M6.66667 10.916H17.5M6.66667 15.916H17.5M2.5 5.91602H2.50833M2.5 10.916H2.50833M2.5 15.916H2.50833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\r\n <path\r\n d=\"M12 13.916C12.5523 13.916 13 13.4683 13 12.916C13 12.3637 12.5523 11.916 12 11.916C11.4477 11.916 11 12.3637 11 12.916C11 13.4683 11.4477 13.916 12 13.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 6.91602C12.5523 6.91602 13 6.4683 13 5.91602C13 5.36373 12.5523 4.91602 12 4.91602C11.4477 4.91602 11 5.36373 11 5.91602C11 6.4683 11.4477 6.91602 12 6.91602Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 20.916C12.5523 20.916 13 20.4683 13 19.916C13 19.3637 12.5523 18.916 12 18.916C11.4477 18.916 11 19.3637 11 19.916C11 20.4683 11.4477 20.916 12 20.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li>\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M6.00065 1.33398V10.6673M1.33398 6.00065H10.6673\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"addNewZone()\"> Add New Zone </a>\r\n </span>\r\n </li>\r\n <li [hidden]=\"viewMode === 'chart'\">\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M11.3333 5.33333L8 2M8 2L4.66667 5.33333M8 2V10\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"export()\"> Export </a>\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [hidden]=\"!isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"isPageLoading\">\r\n <!-- ---------CHART---------- -->\r\n <div [hidden]=\"viewMode === 'table'\">\r\n <div [hidden]=\"customerJourneyChartData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyChartData.length === 0\">\r\n <div id=\"customerJourneyChart\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- ---------TABLE---------- -->\r\n <div [hidden]=\"viewMode === 'chart'\">\r\n <div [hidden]=\"customerJourneyTableData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyTableData.length === 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneName')\">\r\n Zone Name\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneName' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <!-- <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('noOfStores')\">\r\n No. of stores\r\n <svg\r\n [ngClass]=\"sortedColumn === 'noOfStores' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'noOfStores' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th> -->\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneFF')\">\r\n Zone FF\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneFF' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'zoneFF' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('impressions')\">\r\n Concentration\r\n <svg\r\n [ngClass]=\"sortedColumn === 'impressions' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'impressions' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg\r\n [ngClass]=\"sortedColumn === 'AvgDwellTime' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'AvgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyTableData\">\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneName || \"--\" }}</div>\r\n </td>\r\n <!-- <td>\r\n <div class=\"table-title\">{{ store.noOfStores || \"--\" }}</div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneFF || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.impressions || 0 }}%</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.AvgDwellTime || 0 }} Mins</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <!-- Pagination -->\r\n <lib-pagination\r\n class=\"text-start\"\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n ></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: ["#customerJourneyChart{width:100%;height:500px}#customer-journey-chart .rotate{transform:rotate(180deg)}#customer-journey-chart h3{color:var(--Gray-900, #101828);font-size:20px;font-style:normal;font-weight:600;line-height:30px;margin:0}#customer-journey-chart #segment-btn{display:flex;align-items:center}#customer-journey-chart #segment-btn .segment{background:var(--Gray-50, #f9fafb);cursor:pointer;padding:10px}#customer-journey-chart #segment-btn .segment svg>path{stroke:#344054}#customer-journey-chart #segment-btn .segment.active{background:var(--Primary-50, #eaf8ff)}#customer-journey-chart #segment-btn .segment.active svg>path{stroke:#009bf3}#customer-journey-chart #segment-btn .chart-btn{border-radius:8px 0 0 8px}#customer-journey-chart #segment-btn .table-btn{border-radius:0 8px 8px 0}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }] });
2410
+ getNewZoneFFData = [];
2411
+ zones = [];
2412
+ getNewZoneData() {
2413
+ let object = {
2414
+ clientId: this.headerData.client,
2415
+ storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
2416
+ fromDate: this.headerData.date.startDate,
2417
+ toDate: this.headerData.date.endDate,
2418
+ };
2419
+ this.zoneService.getNewZoneFF(object).subscribe({
2420
+ next: (res) => {
2421
+ // console.log('@@ getNewZoneFF ~ res:', res);
2422
+ this.getNewZoneFFData = res.data;
2423
+ },
2424
+ error: (err) => {
2425
+ console.log('@@ getheaderZoneApi ~ err:', err);
2426
+ }
2427
+ });
2428
+ }
2429
+ noSelectedData = true;
2430
+ getSelectedZoneFF() {
2431
+ let object = {
2432
+ clientId: this.headerData.client,
2433
+ storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
2434
+ fromDate: this.headerData.date.startDate,
2435
+ toDate: this.headerData.date.endDate,
2436
+ zoneList: this.selectedZones.map((zone) => zone.tagName),
2437
+ export: false,
2438
+ };
2439
+ this.zoneService.getSelectedZoneFF(object).subscribe({
2440
+ next: (res) => {
2441
+ console.log('Response received:', res);
2442
+ if (res?.data?.data?.zoneData?.length > 0) {
2443
+ this.noSelectedData = false;
2444
+ this.zones = res.data.data.zoneData;
2445
+ }
2446
+ else {
2447
+ this.noSelectedData = true;
2448
+ this.zones = [];
2449
+ }
2450
+ },
2451
+ error: (err) => {
2452
+ console.error('Error from API:', err);
2453
+ },
2454
+ complete: () => {
2455
+ console.log('API call completed');
2456
+ }
2457
+ });
2458
+ }
2459
+ getheaderZoneApi() {
2460
+ let object = {
2461
+ country: [],
2462
+ city: [],
2463
+ clusters: [],
2464
+ clientId: this.headerData.client,
2465
+ storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
2466
+ };
2467
+ this.zoneService.getHeaderZone(object).subscribe({
2468
+ next: (res) => {
2469
+ this.allZones = res.data.zoneData;
2470
+ this.applyZones();
2471
+ },
2472
+ error: (err) => {
2473
+ console.log('@@ getheaderZoneApi ~ err:', err);
2474
+ }
2475
+ });
2476
+ }
2477
+ allZones = [];
2478
+ selectedZones = [];
2479
+ dropdownOpen = false;
2480
+ searchText = '';
2481
+ comparisonData = [];
2482
+ toggleDropdown() {
2483
+ this.dropdownOpen = !this.dropdownOpen;
2484
+ this.searchText = '';
2485
+ }
2486
+ filteredZones() {
2487
+ const filtered = this.allZones.filter((zone) => zone.tagName.toLowerCase().includes(this.searchText.toLowerCase()) &&
2488
+ !this.selectedZones.some((z) => z._id === zone._id));
2489
+ // console.log('@@ ~ filteredZones:', filtered);
2490
+ return filtered;
2491
+ }
2492
+ selectZone(zone) {
2493
+ if (this.selectedZones.length < 3) {
2494
+ this.selectedZones.push(zone);
2495
+ this.dropdownOpen = false;
2496
+ this.searchText = '';
2497
+ }
2498
+ }
2499
+ removeZone(index) {
2500
+ this.selectedZones.splice(index, 1);
2501
+ }
2502
+ clearZones() {
2503
+ this.selectedZones = [];
2504
+ this.dropdownOpen = false;
2505
+ this.searchText = '';
2506
+ }
2507
+ applyZones() {
2508
+ if (this.selectedZones.length >= 1) {
2509
+ this.getSelectedZoneFF();
2510
+ }
2511
+ }
2512
+ onExport() {
2513
+ let object = {
2514
+ clientId: this.headerData.client,
2515
+ storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
2516
+ fromDate: this.headerData.date.startDate,
2517
+ toDate: this.headerData.date.endDate,
2518
+ zoneList: this.selectedZones.map((zone) => zone.tagName),
2519
+ export: true,
2520
+ };
2521
+ this.zoneService.getSelectedZoneFFExport(object).subscribe({
2522
+ next: (res) => {
2523
+ let fileName = 'Zone_Footfall_Export';
2524
+ this.zoneService.saveAsExcelFile(res, fileName);
2525
+ },
2526
+ error: (err) => {
2527
+ this.toast.getErrorToast('Something went Wrong..');
2528
+ }
2529
+ });
2530
+ }
2531
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerJourneyChartComponent, deps: [{ token: i4.Router }, { token: i3.ToastService }, { token: i2.GlobalStateService }, { token: ZoneService }, { token: Zonev2Service }], target: i0.ɵɵFactoryTarget.Component });
2532
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomerJourneyChartComponent, selector: "lib-customer-journey-chart", ngImport: i0, template: "<!-- <section id=\"customer-journey-chart\" class=\"card p-5\"> -->\r\n <!-- ---------HEADER---------- -->\r\n <!-- <div class=\"d-flex justify-content-between mb-3\">\r\n <div class=\"d-flex align-items-center justify-content-center gap-3\">\r\n <h3>Customer Journey</h3>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_13146_67458)\">\r\n <path\r\n d=\"M6.06065 6.91667C6.21739 6.47111 6.52675 6.0954 6.93395 5.85609C7.34116 5.61677 7.81991 5.52929 8.28544 5.60914C8.75096 5.68899 9.1732 5.93102 9.47737 6.29235C9.78154 6.65369 9.94802 7.11101 9.94732 7.58333C9.94732 8.91667 7.94732 9.58333 7.94732 9.58333M8.00065 12.25H8.00732M14.6673 8.91667C14.6673 12.5986 11.6826 15.5833 8.00065 15.5833C4.31875 15.5833 1.33398 12.5986 1.33398 8.91667C1.33398 5.23477 4.31875 2.25 8.00065 2.25C11.6826 2.25 14.6673 5.23477 14.6673 8.91667Z\"\r\n stroke=\"#98A2B3\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_13146_67458\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0 0.916016)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-5\">\r\n <div style=\"position: relative\" [hidden]=\"viewMode === 'chart'\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding: 0.68rem 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div id=\"segment-btn\">\r\n <div [class.active]=\"viewMode === 'chart'\" class=\"segment chart-btn\" (click)=\"toggleView('chart')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M15 17.5833V9.25M10 17.5833V4.25M5 17.5833V12.5833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n\r\n <div [class.active]=\"viewMode === 'table'\" class=\"segment table-btn\" (click)=\"toggleView('table')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M6.66667 5.91602H17.5M6.66667 10.916H17.5M6.66667 15.916H17.5M2.5 5.91602H2.50833M2.5 10.916H2.50833M2.5 15.916H2.50833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\r\n <path\r\n d=\"M12 13.916C12.5523 13.916 13 13.4683 13 12.916C13 12.3637 12.5523 11.916 12 11.916C11.4477 11.916 11 12.3637 11 12.916C11 13.4683 11.4477 13.916 12 13.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 6.91602C12.5523 6.91602 13 6.4683 13 5.91602C13 5.36373 12.5523 4.91602 12 4.91602C11.4477 4.91602 11 5.36373 11 5.91602C11 6.4683 11.4477 6.91602 12 6.91602Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 20.916C12.5523 20.916 13 20.4683 13 19.916C13 19.3637 12.5523 18.916 12 18.916C11.4477 18.916 11 19.3637 11 19.916C11 20.4683 11.4477 20.916 12 20.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li>\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M6.00065 1.33398V10.6673M1.33398 6.00065H10.6673\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"addNewZone()\"> Add New Zone </a>\r\n </span>\r\n </li>\r\n <li [hidden]=\"viewMode === 'chart'\">\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M11.3333 5.33333L8 2M8 2L4.66667 5.33333M8 2V10\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"export()\"> Export </a>\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- <div [hidden]=\"!isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <!-- <div [hidden]=\"isPageLoading\"> -->\r\n <!-- ---------CHART---------- -->\r\n <!-- <div [hidden]=\"viewMode === 'table'\">\r\n <div [hidden]=\"customerJourneyChartData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyChartData.length === 0\">\r\n <div id=\"customerJourneyChart\"></div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- ---------TABLE---------- -->\r\n <!-- <div [hidden]=\"viewMode === 'chart'\">\r\n <div [hidden]=\"customerJourneyTableData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyTableData.length === 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneName')\">\r\n Zone Name\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneName' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('noOfStores')\">\r\n No. of stores\r\n <svg\r\n [ngClass]=\"sortedColumn === 'noOfStores' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'noOfStores' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneFF')\">\r\n Zone FF\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneFF' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'zoneFF' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('impressions')\">\r\n Concentration\r\n <svg\r\n [ngClass]=\"sortedColumn === 'impressions' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'impressions' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg\r\n [ngClass]=\"sortedColumn === 'AvgDwellTime' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'AvgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyTableData\">\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneName || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.noOfStores || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneFF || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.impressions || 0 }}%</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.AvgDwellTime || 0 }} Mins</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n \r\n <lib-pagination\r\n class=\"text-start\"\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n ></lib-pagination>\r\n </div>\r\n </div> -->\r\n <!-- </div>\r\n</section> -->\r\n\r\n<div class=\"card mt-3\">\r\n <div class=\"card-header border-bottom-0 d-flex justify-content-between align-items-center\">\r\n <h3 class=\"card-title\">Zone-Based Shopper Journey </h3>\r\n <div class=\"card-toolbar\">\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" *ngIf=\"selectedZones.length >= 1\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n</div>\r\n<div class=\"card-body pt-1\">\r\n <div class=\"row bordered-box\">\r\n <div class=\"col-md-3\">\r\n <div class=\"compare-card\">\r\n <h3>Select Zones to Compare</h3>\r\n\r\n <!-- Selected Zones List -->\r\n <div class=\"selected-zones\">\r\n <div *ngFor=\"let zone of selectedZones; let i = index\" class=\"zone-chip\">\r\n <span class=\"drag-icon\">\u2630</span>\r\n <span>{{ zone.tagName }}</span>\r\n <button class=\"remove-btn\" (click)=\"removeZone(i)\">\u2715</button>\r\n </div>\r\n </div>\r\n\r\n <!-- Select Dropdown -->\r\n <div class=\"select-zone\" *ngIf=\"selectedZones.length < 3\">\r\n <div class=\"dropdown-container\" (click)=\"toggleDropdown()\">\r\n <span>+ Select Zone</span>\r\n </div>\r\n\r\n <div class=\"dropdown\" *ngIf=\"dropdownOpen\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Search zones...\"\r\n [(ngModel)]=\"searchText\"\r\n class=\"dropdown-search\"\r\n />\r\n <ul class=\"dropdown-list\">\r\n <li\r\n *ngFor=\"let zone of filteredZones()\"\r\n (click)=\"selectZone(zone)\"\r\n [class.disabled]=\"selectedZones.includes(zone)\"\r\n >\r\n {{ zone?.tagName }}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- Info Text -->\r\n <p class=\"hint-text mt-20\">\r\n {{ selectedZones.length < 1\r\n ? 'Choose minimum 2, max 3 Zones to compare'\r\n : 'Maximum 3 Zones to compare' }}\r\n </p>\r\n\r\n <!-- Apply Button -->\r\n <div class=\"button-group\">\r\n <!-- Reset button: show only when 3 zones selected -->\r\n <button\r\n *ngIf=\"selectedZones.length >= 1\"\r\n class=\"btn btn-outline reset-btn w-100\"\r\n (click)=\"clearZones()\"\r\n >\r\n Reset\r\n </button>\r\n\r\n <!-- Apply button: always visible -->\r\n <button\r\n class=\"apply-btn w-100\"\r\n [class.active]=\"selectedZones.length >= 1\"\r\n [disabled]=\"selectedZones.length < 1\"\r\n (click)=\"applyZones()\"\r\n >\r\n Apply\r\n </button>\r\n</div>\r\n\r\n</div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"card-header ellipse1 border-0 px-3 mb-2\">\r\n <h3 class=\"card-title align-items-start flex-column\"><span class=\"card-label header\">Based on Overall\r\n Footfall</span><span class=\"sub-header\">Tells you the percentage of total store footfall attributed to each zone\r\n </span></h3>\r\n </div>\r\n<div class=\"d-flex justify-content-between mt-3\" >\r\n <div class=\"bordered-box w-50 me-2 py-3\">\r\n <div class=\"group d-flex justify-content-between px-3\">\r\n <span class=\"text-title py-2\">Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{getNewZoneFFData?.overallFootfall ? getNewZoneFFData?.overallFootfall :'--'}}</span> <span class=\"text-perc ms-1\">({{getNewZoneFFData?.overallFootfallPercentage ? getNewZoneFFData?.overallFootfallPercentage :'--'}})</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-3\">\r\n <div class=\"group d-flex justify-content-between px-3\">\r\n <span class=\"text-title py-2\">NoB :</span>\r\n <span class=\"text-val\">{{getNewZoneFFData?.nobCount ?? '0'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <table *ngIf=\"!noSelectedData\" class=\"table bottom-border mt-3\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th class=\"w-50\">Zones</th>\r\n <th class=\"w-50\">Footfall Count (Concentration %)</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of zones\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.zoneName }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"5px\" type=\"primary\" [value]=\"item.percentage\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.footfall }} ({{ item.percentage }}%)\r\n <!-- {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}}% -->\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n\r\n\r\n <div *ngIf=\"noSelectedData\" class=\"row\">\r\n <div class=\"card-body pb-0 px-0 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"footimg-nodata1\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title mb-3\">Select Zones to Compare</div>\r\n <!-- <div class=\"nodata-sub\">There is no result for this conversion funnel</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n", styles: ["#customerJourneyChart{width:100%;height:500px}#customer-journey-chart .rotate{transform:rotate(180deg)}#customer-journey-chart h3{color:var(--Gray-900, #101828);font-size:20px;font-style:normal;font-weight:600;line-height:30px;margin:0}#customer-journey-chart #segment-btn{display:flex;align-items:center}#customer-journey-chart #segment-btn .segment{background:var(--Gray-50, #f9fafb);cursor:pointer;padding:10px}#customer-journey-chart #segment-btn .segment svg>path{stroke:#344054}#customer-journey-chart #segment-btn .segment.active{background:var(--Primary-50, #eaf8ff)}#customer-journey-chart #segment-btn .segment.active svg>path{stroke:#009bf3}#customer-journey-chart #segment-btn .chart-btn{border-radius:8px 0 0 8px}#customer-journey-chart #segment-btn .table-btn{border-radius:0 8px 8px 0}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.compare-card{width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 10px #0000000d;font-family:Inter,sans-serif}.selected-zones{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.zone-chip{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #d6e4f0;border-radius:8px;padding:6px 10px}.drag-icon{cursor:grab;opacity:.6;margin-right:6px}.remove-btn{border:none;background:transparent;cursor:pointer;font-size:16px;color:#666}.dropdown-container{width:100%;padding:8px;border:1px solid #d0dce8;border-radius:8px;background:#fff;color:#00a3ff;font-weight:500;cursor:pointer;text-align:left}.dropdown{position:relative;margin-top:8px;background:#fff;border:1px solid #d0dce8;border-radius:8px;box-shadow:0 2px 6px #0000001a;padding:8px}.dropdown-search{width:100%;padding:6px;border-radius:6px;border:1px solid #ccc;margin-bottom:6px}.dropdown-list{max-height:150px;overflow-y:auto;list-style:none;margin:0;padding:0}.dropdown-list li{padding:6px 8px;cursor:pointer;border-radius:6px}.dropdown-list li:hover{background:#f0f7ff}.dropdown-list li.disabled{color:#aaa;pointer-events:none}.hint-text{color:#a0a0a0;font-size:12px;margin:8px 0}.button-group{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}.reset-btn{padding:10px 16px;border:1px solid #0b0b0b;color:#0b0b0b;border-radius:8px;background:transparent;font-weight:600;cursor:pointer}.apply-btn{padding:10px 16px;border-radius:8px;background:#bcdcff;color:#fff;border:none;font-weight:600;cursor:not-allowed}.apply-btn.active{background:#00a3ff;cursor:pointer}.bordered-box{border:1px solid #EAECF0;border-radius:8px;padding:10px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-header,.header{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-style:normal;font-weight:700;line-height:30px}.sub-header{color:var(--Gray-700, #344054)!important;font-size:13px!important;font-style:normal;font-weight:500;line-height:20px}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
2396
2533
  }
2397
2534
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerJourneyChartComponent, decorators: [{
2398
2535
  type: Component,
2399
- args: [{ selector: 'lib-customer-journey-chart', template: "<section id=\"customer-journey-chart\" class=\"card p-5\">\r\n <!-- ---------HEADER---------- -->\r\n <div class=\"d-flex justify-content-between mb-3\">\r\n <div class=\"d-flex align-items-center justify-content-center gap-3\">\r\n <h3>Customer Journey</h3>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_13146_67458)\">\r\n <path\r\n d=\"M6.06065 6.91667C6.21739 6.47111 6.52675 6.0954 6.93395 5.85609C7.34116 5.61677 7.81991 5.52929 8.28544 5.60914C8.75096 5.68899 9.1732 5.93102 9.47737 6.29235C9.78154 6.65369 9.94802 7.11101 9.94732 7.58333C9.94732 8.91667 7.94732 9.58333 7.94732 9.58333M8.00065 12.25H8.00732M14.6673 8.91667C14.6673 12.5986 11.6826 15.5833 8.00065 15.5833C4.31875 15.5833 1.33398 12.5986 1.33398 8.91667C1.33398 5.23477 4.31875 2.25 8.00065 2.25C11.6826 2.25 14.6673 5.23477 14.6673 8.91667Z\"\r\n stroke=\"#98A2B3\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_13146_67458\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0 0.916016)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-5\">\r\n <div style=\"position: relative\" [hidden]=\"viewMode === 'chart'\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding: 0.68rem 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div id=\"segment-btn\">\r\n <div [class.active]=\"viewMode === 'chart'\" class=\"segment chart-btn\" (click)=\"toggleView('chart')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M15 17.5833V9.25M10 17.5833V4.25M5 17.5833V12.5833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n\r\n <div [class.active]=\"viewMode === 'table'\" class=\"segment table-btn\" (click)=\"toggleView('table')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M6.66667 5.91602H17.5M6.66667 10.916H17.5M6.66667 15.916H17.5M2.5 5.91602H2.50833M2.5 10.916H2.50833M2.5 15.916H2.50833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\r\n <path\r\n d=\"M12 13.916C12.5523 13.916 13 13.4683 13 12.916C13 12.3637 12.5523 11.916 12 11.916C11.4477 11.916 11 12.3637 11 12.916C11 13.4683 11.4477 13.916 12 13.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 6.91602C12.5523 6.91602 13 6.4683 13 5.91602C13 5.36373 12.5523 4.91602 12 4.91602C11.4477 4.91602 11 5.36373 11 5.91602C11 6.4683 11.4477 6.91602 12 6.91602Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 20.916C12.5523 20.916 13 20.4683 13 19.916C13 19.3637 12.5523 18.916 12 18.916C11.4477 18.916 11 19.3637 11 19.916C11 20.4683 11.4477 20.916 12 20.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li>\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M6.00065 1.33398V10.6673M1.33398 6.00065H10.6673\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"addNewZone()\"> Add New Zone </a>\r\n </span>\r\n </li>\r\n <li [hidden]=\"viewMode === 'chart'\">\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M11.3333 5.33333L8 2M8 2L4.66667 5.33333M8 2V10\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"export()\"> Export </a>\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [hidden]=\"!isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"isPageLoading\">\r\n <!-- ---------CHART---------- -->\r\n <div [hidden]=\"viewMode === 'table'\">\r\n <div [hidden]=\"customerJourneyChartData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyChartData.length === 0\">\r\n <div id=\"customerJourneyChart\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- ---------TABLE---------- -->\r\n <div [hidden]=\"viewMode === 'chart'\">\r\n <div [hidden]=\"customerJourneyTableData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyTableData.length === 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneName')\">\r\n Zone Name\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneName' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <!-- <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('noOfStores')\">\r\n No. of stores\r\n <svg\r\n [ngClass]=\"sortedColumn === 'noOfStores' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'noOfStores' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th> -->\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneFF')\">\r\n Zone FF\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneFF' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'zoneFF' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('impressions')\">\r\n Concentration\r\n <svg\r\n [ngClass]=\"sortedColumn === 'impressions' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'impressions' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg\r\n [ngClass]=\"sortedColumn === 'AvgDwellTime' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'AvgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyTableData\">\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneName || \"--\" }}</div>\r\n </td>\r\n <!-- <td>\r\n <div class=\"table-title\">{{ store.noOfStores || \"--\" }}</div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneFF || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.impressions || 0 }}%</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.AvgDwellTime || 0 }} Mins</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <!-- Pagination -->\r\n <lib-pagination\r\n class=\"text-start\"\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n ></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: ["#customerJourneyChart{width:100%;height:500px}#customer-journey-chart .rotate{transform:rotate(180deg)}#customer-journey-chart h3{color:var(--Gray-900, #101828);font-size:20px;font-style:normal;font-weight:600;line-height:30px;margin:0}#customer-journey-chart #segment-btn{display:flex;align-items:center}#customer-journey-chart #segment-btn .segment{background:var(--Gray-50, #f9fafb);cursor:pointer;padding:10px}#customer-journey-chart #segment-btn .segment svg>path{stroke:#344054}#customer-journey-chart #segment-btn .segment.active{background:var(--Primary-50, #eaf8ff)}#customer-journey-chart #segment-btn .segment.active svg>path{stroke:#009bf3}#customer-journey-chart #segment-btn .chart-btn{border-radius:8px 0 0 8px}#customer-journey-chart #segment-btn .table-btn{border-radius:0 8px 8px 0}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}\n"] }]
2400
- }], ctorParameters: () => [{ type: i4.Router }, { type: i3.ToastService }, { type: i2.GlobalStateService }, { type: Zonev2Service }] });
2536
+ args: [{ selector: 'lib-customer-journey-chart', template: "<!-- <section id=\"customer-journey-chart\" class=\"card p-5\"> -->\r\n <!-- ---------HEADER---------- -->\r\n <!-- <div class=\"d-flex justify-content-between mb-3\">\r\n <div class=\"d-flex align-items-center justify-content-center gap-3\">\r\n <h3>Customer Journey</h3>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_13146_67458)\">\r\n <path\r\n d=\"M6.06065 6.91667C6.21739 6.47111 6.52675 6.0954 6.93395 5.85609C7.34116 5.61677 7.81991 5.52929 8.28544 5.60914C8.75096 5.68899 9.1732 5.93102 9.47737 6.29235C9.78154 6.65369 9.94802 7.11101 9.94732 7.58333C9.94732 8.91667 7.94732 9.58333 7.94732 9.58333M8.00065 12.25H8.00732M14.6673 8.91667C14.6673 12.5986 11.6826 15.5833 8.00065 15.5833C4.31875 15.5833 1.33398 12.5986 1.33398 8.91667C1.33398 5.23477 4.31875 2.25 8.00065 2.25C11.6826 2.25 14.6673 5.23477 14.6673 8.91667Z\"\r\n stroke=\"#98A2B3\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_13146_67458\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0 0.916016)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-5\">\r\n <div style=\"position: relative\" [hidden]=\"viewMode === 'chart'\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"searchTerm\"\r\n (change)=\"onSearch()\"\r\n style=\"padding: 0.68rem 3rem\"\r\n class=\"form-control\"\r\n name=\"search\"\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n />\r\n\r\n <span class=\"search-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <line x1=\"13\" y1=\"13\" x2=\"16\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n <button *ngIf=\"searchTerm\" type=\"button\" aria-label=\"Clear\" (click)=\"searchTerm = ''; onSearch()\" class=\"clear-search\">\r\n <svg width=\"64px\" height=\"64px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path d=\"M9 9L15 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <path d=\"M15 9L9 15\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n <circle\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"9\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n ></circle>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div id=\"segment-btn\">\r\n <div [class.active]=\"viewMode === 'chart'\" class=\"segment chart-btn\" (click)=\"toggleView('chart')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M15 17.5833V9.25M10 17.5833V4.25M5 17.5833V12.5833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n\r\n <div [class.active]=\"viewMode === 'table'\" class=\"segment table-btn\" (click)=\"toggleView('table')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\r\n <path\r\n d=\"M6.66667 5.91602H17.5M6.66667 10.916H17.5M6.66667 15.916H17.5M2.5 5.91602H2.50833M2.5 10.916H2.50833M2.5 15.916H2.50833\"\r\n stroke=\"#344054\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-link p-0\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\r\n <path\r\n d=\"M12 13.916C12.5523 13.916 13 13.4683 13 12.916C13 12.3637 12.5523 11.916 12 11.916C11.4477 11.916 11 12.3637 11 12.916C11 13.4683 11.4477 13.916 12 13.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 6.91602C12.5523 6.91602 13 6.4683 13 5.91602C13 5.36373 12.5523 4.91602 12 4.91602C11.4477 4.91602 11 5.36373 11 5.91602C11 6.4683 11.4477 6.91602 12 6.91602Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path\r\n d=\"M12 20.916C12.5523 20.916 13 20.4683 13 19.916C13 19.3637 12.5523 18.916 12 18.916C11.4477 18.916 11 19.3637 11 19.916C11 20.4683 11.4477 20.916 12 20.916Z\"\r\n stroke=\"#101828\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li>\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M6.00065 1.33398V10.6673M1.33398 6.00065H10.6673\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"addNewZone()\"> Add New Zone </a>\r\n </span>\r\n </li>\r\n <li [hidden]=\"viewMode === 'chart'\">\r\n <span class=\"dropdown-item cursor-pointer d-flex justify-content-start align-items-center\">\r\n <svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M11.3333 5.33333L8 2M8 2L4.66667 5.33333M8 2V10\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n <a (click)=\"export()\"> Export </a>\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- <div [hidden]=\"!isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <!-- <div [hidden]=\"isPageLoading\"> -->\r\n <!-- ---------CHART---------- -->\r\n <!-- <div [hidden]=\"viewMode === 'table'\">\r\n <div [hidden]=\"customerJourneyChartData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyChartData.length === 0\">\r\n <div id=\"customerJourneyChart\"></div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- ---------TABLE---------- -->\r\n <!-- <div [hidden]=\"viewMode === 'chart'\">\r\n <div [hidden]=\"customerJourneyTableData.length !== 0\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\" />\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [hidden]=\"customerJourneyTableData.length === 0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneName')\">\r\n Zone Name\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneName' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'zoneName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('noOfStores')\">\r\n No. of stores\r\n <svg\r\n [ngClass]=\"sortedColumn === 'noOfStores' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'noOfStores' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('zoneFF')\">\r\n Zone FF\r\n <svg\r\n [ngClass]=\"sortedColumn === 'zoneFF' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'zoneFF' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('impressions')\">\r\n Concentration\r\n <svg\r\n [ngClass]=\"sortedColumn === 'impressions' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'impressions' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"onSortTable('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg\r\n [ngClass]=\"sortedColumn === 'AvgDwellTime' && sortOrder === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n >\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'AvgDwellTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyTableData\">\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneName || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.noOfStores || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.zoneFF || \"--\" }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.impressions || 0 }}%</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.AvgDwellTime || 0 }} Mins</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n \r\n <lib-pagination\r\n class=\"text-start\"\r\n [itemsPerPage]=\"limit\"\r\n [currentPage]=\"offset\"\r\n [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n ></lib-pagination>\r\n </div>\r\n </div> -->\r\n <!-- </div>\r\n</section> -->\r\n\r\n<div class=\"card mt-3\">\r\n <div class=\"card-header border-bottom-0 d-flex justify-content-between align-items-center\">\r\n <h3 class=\"card-title\">Zone-Based Shopper Journey </h3>\r\n <div class=\"card-toolbar\">\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" *ngIf=\"selectedZones.length >= 1\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n</div>\r\n<div class=\"card-body pt-1\">\r\n <div class=\"row bordered-box\">\r\n <div class=\"col-md-3\">\r\n <div class=\"compare-card\">\r\n <h3>Select Zones to Compare</h3>\r\n\r\n <!-- Selected Zones List -->\r\n <div class=\"selected-zones\">\r\n <div *ngFor=\"let zone of selectedZones; let i = index\" class=\"zone-chip\">\r\n <span class=\"drag-icon\">\u2630</span>\r\n <span>{{ zone.tagName }}</span>\r\n <button class=\"remove-btn\" (click)=\"removeZone(i)\">\u2715</button>\r\n </div>\r\n </div>\r\n\r\n <!-- Select Dropdown -->\r\n <div class=\"select-zone\" *ngIf=\"selectedZones.length < 3\">\r\n <div class=\"dropdown-container\" (click)=\"toggleDropdown()\">\r\n <span>+ Select Zone</span>\r\n </div>\r\n\r\n <div class=\"dropdown\" *ngIf=\"dropdownOpen\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Search zones...\"\r\n [(ngModel)]=\"searchText\"\r\n class=\"dropdown-search\"\r\n />\r\n <ul class=\"dropdown-list\">\r\n <li\r\n *ngFor=\"let zone of filteredZones()\"\r\n (click)=\"selectZone(zone)\"\r\n [class.disabled]=\"selectedZones.includes(zone)\"\r\n >\r\n {{ zone?.tagName }}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n <!-- Info Text -->\r\n <p class=\"hint-text mt-20\">\r\n {{ selectedZones.length < 1\r\n ? 'Choose minimum 2, max 3 Zones to compare'\r\n : 'Maximum 3 Zones to compare' }}\r\n </p>\r\n\r\n <!-- Apply Button -->\r\n <div class=\"button-group\">\r\n <!-- Reset button: show only when 3 zones selected -->\r\n <button\r\n *ngIf=\"selectedZones.length >= 1\"\r\n class=\"btn btn-outline reset-btn w-100\"\r\n (click)=\"clearZones()\"\r\n >\r\n Reset\r\n </button>\r\n\r\n <!-- Apply button: always visible -->\r\n <button\r\n class=\"apply-btn w-100\"\r\n [class.active]=\"selectedZones.length >= 1\"\r\n [disabled]=\"selectedZones.length < 1\"\r\n (click)=\"applyZones()\"\r\n >\r\n Apply\r\n </button>\r\n</div>\r\n\r\n</div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"card-header ellipse1 border-0 px-3 mb-2\">\r\n <h3 class=\"card-title align-items-start flex-column\"><span class=\"card-label header\">Based on Overall\r\n Footfall</span><span class=\"sub-header\">Tells you the percentage of total store footfall attributed to each zone\r\n </span></h3>\r\n </div>\r\n<div class=\"d-flex justify-content-between mt-3\" >\r\n <div class=\"bordered-box w-50 me-2 py-3\">\r\n <div class=\"group d-flex justify-content-between px-3\">\r\n <span class=\"text-title py-2\">Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{getNewZoneFFData?.overallFootfall ? getNewZoneFFData?.overallFootfall :'--'}}</span> <span class=\"text-perc ms-1\">({{getNewZoneFFData?.overallFootfallPercentage ? getNewZoneFFData?.overallFootfallPercentage :'--'}})</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-3\">\r\n <div class=\"group d-flex justify-content-between px-3\">\r\n <span class=\"text-title py-2\">NoB :</span>\r\n <span class=\"text-val\">{{getNewZoneFFData?.nobCount ?? '0'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <table *ngIf=\"!noSelectedData\" class=\"table bottom-border mt-3\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th class=\"w-50\">Zones</th>\r\n <th class=\"w-50\">Footfall Count (Concentration %)</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let item of zones\">\r\n <td>\r\n <div class=\"table-title subscribedtext\">\r\n {{ item.zoneName }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"row\">\r\n <div class=\"col-6 mt-2\">\r\n <ngb-progressbar class=\"mb-3\" height=\"5px\" type=\"primary\" [value]=\"item.percentage\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.footfall }} ({{ item.percentage }}%)\r\n <!-- {{ item.value?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}}% -->\r\n \r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n\r\n\r\n <div *ngIf=\"noSelectedData\" class=\"row\">\r\n <div class=\"card-body pb-0 px-0 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"footimg-nodata1\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title mb-3\">Select Zones to Compare</div>\r\n <!-- <div class=\"nodata-sub\">There is no result for this conversion funnel</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n", styles: ["#customerJourneyChart{width:100%;height:500px}#customer-journey-chart .rotate{transform:rotate(180deg)}#customer-journey-chart h3{color:var(--Gray-900, #101828);font-size:20px;font-style:normal;font-weight:600;line-height:30px;margin:0}#customer-journey-chart #segment-btn{display:flex;align-items:center}#customer-journey-chart #segment-btn .segment{background:var(--Gray-50, #f9fafb);cursor:pointer;padding:10px}#customer-journey-chart #segment-btn .segment svg>path{stroke:#344054}#customer-journey-chart #segment-btn .segment.active{background:var(--Primary-50, #eaf8ff)}#customer-journey-chart #segment-btn .segment.active svg>path{stroke:#009bf3}#customer-journey-chart #segment-btn .chart-btn{border-radius:8px 0 0 8px}#customer-journey-chart #segment-btn .table-btn{border-radius:0 8px 8px 0}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}.compare-card{width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 10px #0000000d;font-family:Inter,sans-serif}.selected-zones{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.zone-chip{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #d6e4f0;border-radius:8px;padding:6px 10px}.drag-icon{cursor:grab;opacity:.6;margin-right:6px}.remove-btn{border:none;background:transparent;cursor:pointer;font-size:16px;color:#666}.dropdown-container{width:100%;padding:8px;border:1px solid #d0dce8;border-radius:8px;background:#fff;color:#00a3ff;font-weight:500;cursor:pointer;text-align:left}.dropdown{position:relative;margin-top:8px;background:#fff;border:1px solid #d0dce8;border-radius:8px;box-shadow:0 2px 6px #0000001a;padding:8px}.dropdown-search{width:100%;padding:6px;border-radius:6px;border:1px solid #ccc;margin-bottom:6px}.dropdown-list{max-height:150px;overflow-y:auto;list-style:none;margin:0;padding:0}.dropdown-list li{padding:6px 8px;cursor:pointer;border-radius:6px}.dropdown-list li:hover{background:#f0f7ff}.dropdown-list li.disabled{color:#aaa;pointer-events:none}.hint-text{color:#a0a0a0;font-size:12px;margin:8px 0}.button-group{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}.reset-btn{padding:10px 16px;border:1px solid #0b0b0b;color:#0b0b0b;border-radius:8px;background:transparent;font-weight:600;cursor:pointer}.apply-btn{padding:10px 16px;border-radius:8px;background:#bcdcff;color:#fff;border:none;font-weight:600;cursor:not-allowed}.apply-btn.active{background:#00a3ff;cursor:pointer}.bordered-box{border:1px solid #EAECF0;border-radius:8px;padding:10px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-header,.header{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-style:normal;font-weight:700;line-height:30px}.sub-header{color:var(--Gray-700, #344054)!important;font-size:13px!important;font-style:normal;font-weight:500;line-height:20px}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}\n"] }]
2537
+ }], ctorParameters: () => [{ type: i4.Router }, { type: i3.ToastService }, { type: i2.GlobalStateService }, { type: ZoneService }, { type: Zonev2Service }] });
2401
2538
 
2402
2539
  class TangoAnalyseZoneComponent {
2403
2540
  pageInfo;