tango-app-ui-analyse-zone 3.7.1-beta.1 → 3.7.1-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/esm2022/lib/components/customer-journey-chart/customer-journey-chart.component.mjs +15 -7
  2. package/esm2022/lib/components/services/zonev2.service.mjs +2 -2
  3. package/esm2022/lib/components/zone-v2/customer-journey/customer-journey.component.mjs +2 -2
  4. package/esm2022/lib/components/zone-v2/summary-table/summary-table.component.mjs +2 -2
  5. package/fesm2022/tango-app-ui-analyse-zone.mjs +17 -9
  6. package/fesm2022/tango-app-ui-analyse-zone.mjs.map +1 -1
  7. package/package.json +1 -1
package/fesm2022/tango-app-ui-analyse-zone.mjs CHANGED
@@ -1921,7 +1921,7 @@ class Zonev2Service {
1921
1921
  const data = new Blob([buffer], {
1922
1922
  type: EXCEL_TYPE
1923
1923
  });
1924
- FileSaver.saveAs(data, fileName + 'list' + EXCEL_EXTENSION);
1924
+ FileSaver.saveAs(data, fileName + EXCEL_EXTENSION);
1925
1925
  }
1926
1926
  saveAsTemplate(buffer, fileName) {
1927
1927
  const data = new Blob([buffer], {
@@ -2063,7 +2063,7 @@ class CustomerJourneyChartComponent {
2063
2063
  toDate: this.headerData.date.endDate,
2064
2064
  storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
2065
2065
  clientId: this.headerData.client,
2066
- search: this.searchTerm,
2066
+ search: this.searchTerm.toLowerCase(),
2067
2067
  sort: this.sortedColumn,
2068
2068
  sortBy: this.sortOrder,
2069
2069
  limit: this.limit,
@@ -2103,7 +2103,7 @@ class CustomerJourneyChartComponent {
2103
2103
  toDate: this.headerData?.date?.endDate,
2104
2104
  storeId: this.headerData?.stores?.filter((store) => store.checked).map((store) => store.storeId),
2105
2105
  clientId: this.headerData?.client,
2106
- search: this.searchTerm,
2106
+ search: this.searchTerm.toLowerCase(),
2107
2107
  sortType: 'bottom',
2108
2108
  limit: this.limit,
2109
2109
  offset: this.offset - 1,
@@ -2179,18 +2179,26 @@ class CustomerJourneyChartComponent {
2179
2179
  toDate: this.headerData.date.endDate,
2180
2180
  storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
2181
2181
  clientId: this.headerData.client,
2182
- search: this.searchTerm,
2182
+ search: this.searchTerm.toLowerCase(),
2183
2183
  sort: this.sortedColumn,
2184
2184
  sortBy: this.sortOrder,
2185
2185
  limit: 10000,
2186
2186
  offset: 0,
2187
2187
  export: true
2188
2188
  };
2189
+ console.log("@@ ~ this.headerData.date.startDate:", this.headerData.date.endDate);
2189
2190
  this.zoneV2Service.getCustomerJourneyTableExport(payload)
2190
2191
  .pipe(takeUntil(this.destroy$))
2191
2192
  .subscribe({
2192
2193
  next: (res) => {
2193
- this.zoneV2Service.saveAsExcelFile(res, 'CustomerJourney');
2194
+ let fileName = 'Customer_Journey_Export';
2195
+ if (this.headerData.date.startDate == this.headerData.date.endDate) {
2196
+ fileName = `${fileName}_${this.headerData.date.startDate}`;
2197
+ }
2198
+ else {
2199
+ fileName = `${fileName}_${this.headerData.date.startDate}_${this.headerData.date.endDate}`;
2200
+ }
2201
+ this.zoneV2Service.saveAsExcelFile(res, fileName);
2194
2202
  },
2195
2203
  error: (e) => {
2196
2204
  this.toast.getErrorToast('Something went Wrong..');
@@ -2263,11 +2271,11 @@ class CustomerJourneyChartComponent {
2263
2271
  this.chartRoot?.dispose();
2264
2272
  }
2265
2273
  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 });
2266
- 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 Impressions\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 || \"--\" }}%</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.AvgDwellTime || \"--\" }} 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 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"] }] });
2274
+ 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"] }] });
2267
2275
  }
2268
2276
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerJourneyChartComponent, decorators: [{
2269
2277
  type: Component,
2270
- 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 Impressions\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 || \"--\" }}%</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store.AvgDwellTime || \"--\" }} 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 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"] }]
2278
+ 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"] }]
2271
2279
  }], ctorParameters: () => [{ type: i4.Router }, { type: i3.ToastService }, { type: i2.GlobalStateService }, { type: Zonev2Service }] });
2272
2280
 
2273
2281
  class TangoAnalyseZoneComponent {
@@ -3724,7 +3732,7 @@ class CustomerJourneyComponent {
3724
3732
  .subscribe({
3725
3733
  next: (res) => {
3726
3734
  // console.log('API Response:', res);
3727
- this.Zonev2Service.saveAsExcelFile(res, 'CustomerJourney');
3735
+ this.Zonev2Service.saveAsExcelFile(res, 'CustomerJourney_list');
3728
3736
  },
3729
3737
  error: (e) => {
3730
3738
  this.toast.getErrorToast('Something went Wrong..');
@@ -4146,7 +4154,7 @@ class SummaryTableComponent {
4146
4154
  .pipe(takeUntil(this.destroy$))
4147
4155
  .subscribe({
4148
4156
  next: (res) => {
4149
- this.Zonev2Service.saveAsExcelFile(res, 'ZoneSummaryTable');
4157
+ this.Zonev2Service.saveAsExcelFile(res, 'ZoneSummaryTable_list');
4150
4158
  },
4151
4159
  error: (e) => {
4152
4160
  this.toast.getErrorToast('Something went Wrong..');