tango-app-ui-analyse-zone 3.7.1-beta.8 → 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.
|
@@ -2438,9 +2438,10 @@ class CustomerJourneyChartComponent {
|
|
|
2438
2438
|
};
|
|
2439
2439
|
this.zoneService.getSelectedZoneFF(object).subscribe({
|
|
2440
2440
|
next: (res) => {
|
|
2441
|
-
|
|
2441
|
+
console.log('Response received:', res);
|
|
2442
|
+
if (res?.data?.data?.zoneData?.length > 0) {
|
|
2442
2443
|
this.noSelectedData = false;
|
|
2443
|
-
this.zones = res.data.zoneData;
|
|
2444
|
+
this.zones = res.data.data.zoneData;
|
|
2444
2445
|
}
|
|
2445
2446
|
else {
|
|
2446
2447
|
this.noSelectedData = true;
|
|
@@ -2448,8 +2449,10 @@ class CustomerJourneyChartComponent {
|
|
|
2448
2449
|
}
|
|
2449
2450
|
},
|
|
2450
2451
|
error: (err) => {
|
|
2451
|
-
|
|
2452
|
-
|
|
2452
|
+
console.error('Error from API:', err);
|
|
2453
|
+
},
|
|
2454
|
+
complete: () => {
|
|
2455
|
+
console.log('API call completed');
|
|
2453
2456
|
}
|
|
2454
2457
|
});
|
|
2455
2458
|
}
|
|
@@ -2526,11 +2529,11 @@ class CustomerJourneyChartComponent {
|
|
|
2526
2529
|
});
|
|
2527
2530
|
}
|
|
2528
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 });
|
|
2529
|
-
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.name }}\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.concentration\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.footfall }} ({{ item.concentration }}%)\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"] }] });
|
|
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"] }] });
|
|
2530
2533
|
}
|
|
2531
2534
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerJourneyChartComponent, decorators: [{
|
|
2532
2535
|
type: Component,
|
|
2533
|
-
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.name }}\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.concentration\" />\r\n </div>\r\n <div class=\"col-6\">\r\n {{ item.footfall }} ({{ item.concentration }}%)\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"] }]
|
|
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"] }]
|
|
2534
2537
|
}], ctorParameters: () => [{ type: i4.Router }, { type: i3.ToastService }, { type: i2.GlobalStateService }, { type: ZoneService }, { type: Zonev2Service }] });
|
|
2535
2538
|
|
|
2536
2539
|
class TangoAnalyseZoneComponent {
|