tango-app-ui-analyse-zone 3.7.1-beta.22 → 3.7.1-beta.24
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.
- package/esm2022/lib/components/top-performing-zones/top-performing-zones.component.mjs +3 -3
- package/esm2022/lib/components/zone-journey/zone-journey.component.mjs +10 -13
- package/fesm2022/tango-app-ui-analyse-zone.mjs +11 -14
- package/fesm2022/tango-app-ui-analyse-zone.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1312,16 +1312,13 @@ class ZoneJourneyComponent {
|
|
|
1312
1312
|
<div class="am-tooltip-header">
|
|
1313
1313
|
${dc.from} → ${dc.to}
|
|
1314
1314
|
</div>
|
|
1315
|
-
<
|
|
1316
|
-
|
|
1317
|
-
<
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
<td class="value">${dc.NoB ?? '--'}</td>
|
|
1323
|
-
</tr>
|
|
1324
|
-
</table>
|
|
1315
|
+
<div class="am-tooltip-table">
|
|
1316
|
+
|
|
1317
|
+
<div><span class="text-primary">${dc.value ?? '--'}</span> <span class="text-value">Footfall </span></div>
|
|
1318
|
+
|
|
1319
|
+
<div><span class="text-primary">${dc.NoB ?? '--'}</span><span class="text-value">NoB </span> </div>
|
|
1320
|
+
|
|
1321
|
+
</div>
|
|
1325
1322
|
</div>
|
|
1326
1323
|
`;
|
|
1327
1324
|
});
|
|
@@ -1435,11 +1432,11 @@ class ZoneJourneyComponent {
|
|
|
1435
1432
|
this.router.navigate(["/manage/traffic/nob"]);
|
|
1436
1433
|
}
|
|
1437
1434
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneJourneyComponent, deps: [{ token: ZoneService }, { token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i4$1.Router }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1438
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneJourneyComponent, selector: "lib-zone-journey", inputs: { headerData: "headerData", clientData: "clientData" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "zoneDropdown", first: true, predicate: ["zoneDropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- zone-journey.component.html -->\r\n<div class=\"card my-card mx-1 my-2\">\r\n <div class=\"card-header px-0 mx-5 border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-1\">Zone-Based Shopper Analysis </span>\r\n <span class=\"text-sub mb-1\">Understand your Shoppers journey from one zone to another\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n<div class=\"zone-dropdown me-2\" #zoneDropdown\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- BUTTON -->\r\n <button [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn btn-outline w-100 me-2 d-flex justify-content-between\"\r\n (click)=\"toggleDropdown($event)\"\r\n >\r\n Show / Hide Zone\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n<path d=\"M1 1L6 6L11 1\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </button>\r\n\r\n <!-- DROPDOWN -->\r\n <div *ngIf=\"showDropdown\" class=\"dropdown-panel h-300px d-flex flex-column\">\r\n\r\n <!-- HEADER (fixed) -->\r\n <div class=\"dropdown-header px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"dropdownSearchText\"\r\n (input)=\"filterZones()\"\r\n />\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 mb-2 px-2\">\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected()\"\r\n (change)=\"toggleSelectAll($event)\"\r\n /></span>\r\n <span class=\"ms-2\">Select All</span>\r\n </div>\r\n <!-- BODY (scrollable list) -->\r\n <div class=\"dropdown-body flex-grow-1 overflow-auto px-2\">\r\n <div\r\n class=\"zone-item\"\r\n *ngFor=\"let zone of tempFilteredZones\"\r\n >\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"zone.checked\"\r\n /></span>\r\n <span class=\"ms-2\">{{ zone.name }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- FOOTER (fixed) -->\r\n <div class=\"dropdown-footer d-flex justify-content-end gap-2 p-2 border-top\">\r\n <button class=\"btn btn-sm btn-outline w-50\" (click)=\"resetZones()\">\r\n Reset\r\n </button>\r\n <button class=\"btn btn-sm btn-primary w-50\" (click)=\"applyZones()\">\r\n Apply\r\n </button>\r\n </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n\r\n <button type=\"button\" (click)=\"getZoneJourneyExport()\" [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-3 mx-3\">\r\n <div class=\"bordered-box w-50 me-2 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n height=\"21\" viewBox=\"0 0 19 21\" fill=\"none\">\r\n <path\r\n d=\"M0.5 16.3258H6V17.5758C6 18.3051 5.71027 19.0046 5.19454 19.5203C4.67882 20.036 3.97935 20.3258 3.25 20.3258C2.52065 20.3258 1.82118 20.036 1.30546 19.5203C0.789731 19.0046 0.5 18.3051 0.5 17.5758V16.3258ZM4.5 4.44576C6.5 4.44576 7.5 7.32576 7.5 9.32576C7.5 10.3258 7 11.3258 6.5 12.8258L6 14.3258H0.5C0.5 13.3258 0 11.8258 0 9.32576C0 6.82576 1.998 4.44576 4.5 4.44576ZM16.554 12.4238L16.337 13.6548C16.2023 14.3654 15.7931 14.9943 15.198 15.4054C14.6029 15.8165 13.8698 15.9765 13.1576 15.8509C12.4453 15.7254 11.8111 15.3242 11.3925 14.7344C10.9739 14.1446 10.8045 13.4136 10.921 12.6998L11.137 11.4698L16.554 12.4238ZM14.678 0.0307624C17.142 0.464762 18.696 3.15576 18.262 5.61776C17.828 8.07976 17.075 9.46976 16.902 10.4548L11.485 9.49976L11.253 7.93576C11.021 6.37176 10.703 5.29976 10.876 4.31576C11.223 2.34576 12.708 -0.316238 14.678 0.0307624Z\"\r\n fill=\"#1D2939\" />\r\n </svg>Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{zoneShopperAnalysis?.OverallFootfall ?? '--'}}</span> <span class=\"text-perc ms-1\">({{zoneShopperAnalysis?.ConversionPercent ?? '--'}} %)</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> NoB :</span>\r\n <span *ngIf=\"!this.clientData?.isNOB\" class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\"><svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row gx-0 p-3\">\r\n <div [ngClass]=\"isMinimized ? 'col-12' : 'col-8'\"\r\n [style.height.px]=\"zoneChartNoData ? 300 : (isMinimized ? 650 : 550)\">\r\n <ng-container *ngIf=\"zoneChartLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneChartNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!zoneChartNoData && !zoneChartLoading\" id=\"chartdiv\" style=\"width: 100%; height: 100%;\"></div>\r\n </div>\r\n\r\n <div [ngClass]=\"isMinimized ? 'zone-floating' : 'col-4'\" [style.top.px]=\"isMinimized ? floatingPos.top : null\"\r\n [style.left.px]=\"isMinimized ? floatingPos.left : null\" (mousedown)=\"startDrag($event)\">\r\n <!-- (mousedown)=\"startDrag($event)\" -->\r\n <ng-container *ngIf=\"zoneCardLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneCardNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-conatiner *ngIf=\"!zoneCardNoData && !zoneCardLoading\" class=\"card \">\r\n <div class=\"card-header border-0 px-4\"\r\n [ngClass]=\"isMinimized ?'bg-secondary min-h-30px': 'bg-light-primary min-h-45px mb-2'\">\r\n <div class=\"card-title align-items-start\"><span *ngIf=\"isMinimized\" class=\"me-2 mb-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9 20C8.45 20 7.97917 19.8042 7.5875 19.4125C7.19583 19.0208 7 18.55 7 18C7 17.45 7.19583 16.9792 7.5875 16.5875C7.97917 16.1958 8.45 16 9 16C9.55 16 10.0208 16.1958 10.4125 16.5875C10.8042 16.9792 11 17.45 11 18C11 18.55 10.8042 19.0208 10.4125 19.4125C10.0208 19.8042 9.55 20 9 20ZM15 20C14.45 20 13.9792 19.8042 13.5875 19.4125C13.1958 19.0208 13 18.55 13 18C13 17.45 13.1958 16.9792 13.5875 16.5875C13.9792 16.1958 14.45 16 15 16C15.55 16 16.0208 16.1958 16.4125 16.5875C16.8042 16.9792 17 17.45 17 18C17 18.55 16.8042 19.0208 16.4125 19.4125C16.0208 19.8042 15.55 20 15 20ZM9 14C8.45 14 7.97917 13.8042 7.5875 13.4125C7.19583 13.0208 7 12.55 7 12C7 11.45 7.19583 10.9792 7.5875 10.5875C7.97917 10.1958 8.45 10 9 10C9.55 10 10.0208 10.1958 10.4125 10.5875C10.8042 10.9792 11 11.45 11 12C11 12.55 10.8042 13.0208 10.4125 13.4125C10.0208 13.8042 9.55 14 9 14ZM15 14C14.45 14 13.9792 13.8042 13.5875 13.4125C13.1958 13.0208 13 12.55 13 12C13 11.45 13.1958 10.9792 13.5875 10.5875C13.9792 10.1958 14.45 10 15 10C15.55 10 16.0208 10.1958 16.4125 10.5875C16.8042 10.9792 17 11.45 17 12C17 12.55 16.8042 13.0208 16.4125 13.4125C16.0208 13.8042 15.55 14 15 14ZM9 8C8.45 8 7.97917 7.80417 7.5875 7.4125C7.19583 7.02083 7 6.55 7 6C7 5.45 7.19583 4.97917 7.5875 4.5875C7.97917 4.19583 8.45 4 9 4C9.55 4 10.0208 4.19583 10.4125 4.5875C10.8042 4.97917 11 5.45 11 6C11 6.55 10.8042 7.02083 10.4125 7.4125C10.0208 7.80417 9.55 8 9 8ZM15 8C14.45 8 13.9792 7.80417 13.5875 7.4125C13.1958 7.02083 13 6.55 13 6C13 5.45 13.1958 4.97917 13.5875 4.5875C13.9792 4.19583 14.45 4 15 4C15.55 4 16.0208 4.19583 16.4125 4.5875C16.8042 4.97917 17 5.45 17 6C17 6.55 16.8042 7.02083 16.4125 7.4125C16.0208 7.80417 15.55 8 15 8Z\"\r\n fill=\"#667085\" />\r\n </svg></span> Zone Journey </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span *ngIf=\"!isMinimized\" (click)=\"searchOpen()\" class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19 19L14.65 14.65M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"cursor-pointer\" *ngIf=\"!isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M5 12H19\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M15 3H21M21 3V9M21 3L14 10M9 21H3M3 21V15M3 21L10 14\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n<div *ngIf=\"searchNewOpen\" class=\"px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"searchZoneText\"\r\n (change)=\"SearchZones()\"\r\n />\r\n </div>\r\n <div class=\"zone-card mx-3 \" *ngFor=\"let zone of zones;let i = index\">\r\n\r\n <!-- HEADER -->\r\n <div [ngClass]=\"activeIndex === i ? 'zone-header':'zone-default'\" (click)=\"toggle(i)\">\r\n <div [ngClass]=\"activeIndex === i ? 'zone-title':'zone-notitle'\">{{ zone.fromZone |\r\n titlecase}}\r\n </div>\r\n\r\n <div class=\"zone-metrics\">\r\n <span class=\"badge badge-light-primary px-2\" placement=\"top\" ngbTooltip=\"Footfall (Engagers)\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\"\r\n viewBox=\"0 0 10 11\" fill=\"none\">\r\n <path\r\n d=\"M0.25 8.16288H3V8.78788C3 9.15255 2.85513 9.50229 2.59727 9.76015C2.33941 10.018 1.98967 10.1629 1.625 10.1629C1.26033 10.1629 0.910591 10.018 0.652728 9.76015C0.394866 9.50229 0.25 9.15255 0.25 8.78788V8.16288ZM2.25 2.22288C3.25 2.22288 3.75 3.66288 3.75 4.66288C3.75 5.16288 3.5 5.66288 3.25 6.41288L3 7.16288H0.25C0.25 6.66288 0 5.91288 0 4.66288C0 3.41288 0.999 2.22288 2.25 2.22288ZM8.277 6.21188L8.1685 6.82738C8.10117 7.18269 7.89656 7.49717 7.59901 7.70271C7.30146 7.90824 6.93492 7.98827 6.57878 7.92547C6.22263 7.86268 5.90557 7.6621 5.69626 7.3672C5.48695 7.07229 5.40225 6.7068 5.4605 6.34988L5.5685 5.73488L8.277 6.21188ZM7.339 0.0153812C8.571 0.232381 9.348 1.57788 9.131 2.80888C8.914 4.03988 8.5375 4.73488 8.451 5.22738L5.7425 4.74988L5.6265 3.96788C5.5105 3.18588 5.3515 2.64988 5.438 2.15788C5.6115 1.17288 6.354 -0.158119 7.339 0.0153812Z\"\r\n fill=\"#009BF3\" />\r\n </svg></span> {{ zone.fromZoneFootfallCount ?? '--' }}\r\n </span>\r\n <span class=\"badge badge-light-default px-2\" placement=\"top\"\r\n [ngbTooltip]=\"clientData?.isNOB ? 'NoB' : 'Conversion'\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> {{ zone.fromZoneNobCount ?? '--' }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body max-h-200px min-h-auto overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Engagers)</th>\r\n <th ><span class=\"me-2\" *ngIf=\"this.clientData?.isNOB\">NoB</span> <span class=\"me-2\" *ngIf=\"!this.clientData?.isNOB\">Conversion</span> <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15320_82488)\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15320_82488\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone | titlecase}}</td>\r\n <td>{{ row.footfall ?? '--' }} ({{ row.engagerPercent }}%)</td>\r\n <td>{{ row.nob ?? '--' }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-conatiner>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</div>", styles: [".zone-card{border:1px solid #e6f0ff;border-radius:10px;margin-bottom:12px;background:#fff}.zone-header{display:flex;justify-content:space-between;align-items:center;padding:12px 30px 12px 12px;cursor:pointer;background:#f6fcff;border-radius:10px}.zone-default{border-width:1px;display:flex;justify-content:space-between;align-items:center;opacity:1;border-radius:8px;padding:12px 30px 12px 12px;border:1px solid #D0D5DD;background:#fff}.zone-title{font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;color:#33b5ff}.zone-metrics{display:flex;align-items:center;gap:8px}.pill{padding:4px 10px;border-radius:16px;font-size:12px}.arrow{transition:transform .3s ease}.arrow.rotate{transform:rotate(180deg)}.zone-body{padding:10px 12px}.table-head,.table-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:6px 0}.table-head{font-weight:600;font-size:12px;opacity:1;padding:11px 16px;border-bottom-width:1px;background-color:#fcfcfd;color:#667085;border-bottom:1px solid #EAECF0;display:flex;justify-content:space-between}.table-row{opacity:1;padding:11px 16px;border-bottom-width:1px;display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid #EAECF0}.zone-floating{position:sticky;width:330px;height:75px;top:0;z-index:9999;cursor:move}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.bordered-box{border:1px solid #EAECF0;border-radius:8px}.path-wrapper{opacity:1;padding:8px 16px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.zone-dropdown{position:relative}.dropdown-panel{position:absolute;background:#fff;border-radius:8px;padding:10px;width:100%;box-shadow:0 6px 20px #0000001a;z-index:1000}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.dropdown-panel{width:260px;background:#fff;border-radius:8px;box-shadow:0 6px 20px #0000001f}.dropdown-body{max-height:220px}.zone-item{display:flex;align-items:center;gap:8px;padding:6px 0}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.am-tooltip{font-size:12px}.am-tooltip-header{font-weight:600;margin-bottom:6px}.am-tooltip-table{width:100%;border-collapse:collapse}.am-tooltip-table .value{text-align:right;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
|
|
1435
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneJourneyComponent, selector: "lib-zone-journey", inputs: { headerData: "headerData", clientData: "clientData" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "zoneDropdown", first: true, predicate: ["zoneDropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- zone-journey.component.html -->\r\n<div class=\"card my-card mx-1 my-2\">\r\n <div class=\"card-header px-0 mx-5 border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-1\">Zone-Based Shopper Analysis </span>\r\n <span class=\"text-sub mb-1\">Understand your Shoppers journey from one zone to another\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n<div class=\"zone-dropdown me-2\" #zoneDropdown\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- BUTTON -->\r\n <button [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn btn-outline w-100 me-2 d-flex justify-content-between\"\r\n (click)=\"toggleDropdown($event)\"\r\n >\r\n Show / Hide Zone\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n<path d=\"M1 1L6 6L11 1\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </button>\r\n\r\n <!-- DROPDOWN -->\r\n <div *ngIf=\"showDropdown\" class=\"dropdown-panel h-300px d-flex flex-column\">\r\n\r\n <!-- HEADER (fixed) -->\r\n <div class=\"dropdown-header px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"dropdownSearchText\"\r\n (input)=\"filterZones()\"\r\n />\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 mb-2 px-2\">\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected()\"\r\n (change)=\"toggleSelectAll($event)\"\r\n /></span>\r\n <span class=\"ms-2\">Select All</span>\r\n </div>\r\n <!-- BODY (scrollable list) -->\r\n <div class=\"dropdown-body flex-grow-1 overflow-auto px-2\">\r\n <div\r\n class=\"zone-item\"\r\n *ngFor=\"let zone of tempFilteredZones\"\r\n >\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"zone.checked\"\r\n /></span>\r\n <span class=\"ms-2\">{{ zone.name }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- FOOTER (fixed) -->\r\n <div class=\"dropdown-footer d-flex justify-content-end gap-2 p-2 border-top\">\r\n <button class=\"btn btn-sm btn-outline w-50\" (click)=\"resetZones()\">\r\n Reset\r\n </button>\r\n <button class=\"btn btn-sm btn-primary w-50\" (click)=\"applyZones()\">\r\n Apply\r\n </button>\r\n </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n\r\n <button type=\"button\" (click)=\"getZoneJourneyExport()\" [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-3 mx-3\">\r\n <div class=\"bordered-box w-50 me-2 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n height=\"21\" viewBox=\"0 0 19 21\" fill=\"none\">\r\n <path\r\n d=\"M0.5 16.3258H6V17.5758C6 18.3051 5.71027 19.0046 5.19454 19.5203C4.67882 20.036 3.97935 20.3258 3.25 20.3258C2.52065 20.3258 1.82118 20.036 1.30546 19.5203C0.789731 19.0046 0.5 18.3051 0.5 17.5758V16.3258ZM4.5 4.44576C6.5 4.44576 7.5 7.32576 7.5 9.32576C7.5 10.3258 7 11.3258 6.5 12.8258L6 14.3258H0.5C0.5 13.3258 0 11.8258 0 9.32576C0 6.82576 1.998 4.44576 4.5 4.44576ZM16.554 12.4238L16.337 13.6548C16.2023 14.3654 15.7931 14.9943 15.198 15.4054C14.6029 15.8165 13.8698 15.9765 13.1576 15.8509C12.4453 15.7254 11.8111 15.3242 11.3925 14.7344C10.9739 14.1446 10.8045 13.4136 10.921 12.6998L11.137 11.4698L16.554 12.4238ZM14.678 0.0307624C17.142 0.464762 18.696 3.15576 18.262 5.61776C17.828 8.07976 17.075 9.46976 16.902 10.4548L11.485 9.49976L11.253 7.93576C11.021 6.37176 10.703 5.29976 10.876 4.31576C11.223 2.34576 12.708 -0.316238 14.678 0.0307624Z\"\r\n fill=\"#1D2939\" />\r\n </svg>Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{zoneShopperAnalysis?.OverallFootfall ?? '--'}}</span> <span class=\"text-perc ms-1\">({{zoneShopperAnalysis?.ConversionPercent ?? '--'}} %)</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> NoB :</span>\r\n <span *ngIf=\"!this.clientData?.isNOB\" class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\"><svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row gx-0 p-3\">\r\n <div [ngClass]=\"isMinimized ? 'col-12' : 'col-8'\"\r\n [style.height.px]=\"zoneChartNoData ? 300 : (isMinimized ? 650 : 550)\">\r\n <ng-container *ngIf=\"zoneChartLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneChartNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!zoneChartNoData && !zoneChartLoading\" id=\"chartdiv\" style=\"width: 100%; height: 100%;\"></div>\r\n </div>\r\n\r\n <div [ngClass]=\"isMinimized ? 'zone-floating' : 'col-4'\" [style.top.px]=\"isMinimized ? floatingPos.top : null\"\r\n [style.left.px]=\"isMinimized ? floatingPos.left : null\" (mousedown)=\"startDrag($event)\">\r\n <!-- (mousedown)=\"startDrag($event)\" -->\r\n <ng-container *ngIf=\"zoneCardLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneCardNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-conatiner *ngIf=\"!zoneCardNoData && !zoneCardLoading\" class=\"card \">\r\n <div class=\"card-header border-0 px-4\"\r\n [ngClass]=\"isMinimized ?'bg-secondary min-h-30px': 'bg-light-primary min-h-45px mb-2'\">\r\n <div class=\"card-title align-items-start\"><span *ngIf=\"isMinimized\" class=\"me-2 mb-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9 20C8.45 20 7.97917 19.8042 7.5875 19.4125C7.19583 19.0208 7 18.55 7 18C7 17.45 7.19583 16.9792 7.5875 16.5875C7.97917 16.1958 8.45 16 9 16C9.55 16 10.0208 16.1958 10.4125 16.5875C10.8042 16.9792 11 17.45 11 18C11 18.55 10.8042 19.0208 10.4125 19.4125C10.0208 19.8042 9.55 20 9 20ZM15 20C14.45 20 13.9792 19.8042 13.5875 19.4125C13.1958 19.0208 13 18.55 13 18C13 17.45 13.1958 16.9792 13.5875 16.5875C13.9792 16.1958 14.45 16 15 16C15.55 16 16.0208 16.1958 16.4125 16.5875C16.8042 16.9792 17 17.45 17 18C17 18.55 16.8042 19.0208 16.4125 19.4125C16.0208 19.8042 15.55 20 15 20ZM9 14C8.45 14 7.97917 13.8042 7.5875 13.4125C7.19583 13.0208 7 12.55 7 12C7 11.45 7.19583 10.9792 7.5875 10.5875C7.97917 10.1958 8.45 10 9 10C9.55 10 10.0208 10.1958 10.4125 10.5875C10.8042 10.9792 11 11.45 11 12C11 12.55 10.8042 13.0208 10.4125 13.4125C10.0208 13.8042 9.55 14 9 14ZM15 14C14.45 14 13.9792 13.8042 13.5875 13.4125C13.1958 13.0208 13 12.55 13 12C13 11.45 13.1958 10.9792 13.5875 10.5875C13.9792 10.1958 14.45 10 15 10C15.55 10 16.0208 10.1958 16.4125 10.5875C16.8042 10.9792 17 11.45 17 12C17 12.55 16.8042 13.0208 16.4125 13.4125C16.0208 13.8042 15.55 14 15 14ZM9 8C8.45 8 7.97917 7.80417 7.5875 7.4125C7.19583 7.02083 7 6.55 7 6C7 5.45 7.19583 4.97917 7.5875 4.5875C7.97917 4.19583 8.45 4 9 4C9.55 4 10.0208 4.19583 10.4125 4.5875C10.8042 4.97917 11 5.45 11 6C11 6.55 10.8042 7.02083 10.4125 7.4125C10.0208 7.80417 9.55 8 9 8ZM15 8C14.45 8 13.9792 7.80417 13.5875 7.4125C13.1958 7.02083 13 6.55 13 6C13 5.45 13.1958 4.97917 13.5875 4.5875C13.9792 4.19583 14.45 4 15 4C15.55 4 16.0208 4.19583 16.4125 4.5875C16.8042 4.97917 17 5.45 17 6C17 6.55 16.8042 7.02083 16.4125 7.4125C16.0208 7.80417 15.55 8 15 8Z\"\r\n fill=\"#667085\" />\r\n </svg></span> Zone Journey </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span *ngIf=\"!isMinimized\" (click)=\"searchOpen()\" class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19 19L14.65 14.65M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"cursor-pointer\" *ngIf=\"!isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M5 12H19\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M15 3H21M21 3V9M21 3L14 10M9 21H3M3 21V15M3 21L10 14\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n<div *ngIf=\"searchNewOpen\" class=\"px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"searchZoneText\"\r\n (change)=\"SearchZones()\"\r\n />\r\n </div>\r\n <div class=\"zone-card mx-3 \" *ngFor=\"let zone of zones;let i = index\">\r\n\r\n <!-- HEADER -->\r\n <div [ngClass]=\"activeIndex === i ? 'zone-header':'zone-default'\" (click)=\"toggle(i)\">\r\n <div [ngClass]=\"activeIndex === i ? 'zone-title':'zone-notitle'\">{{ zone.fromZone |\r\n titlecase}}\r\n </div>\r\n\r\n <div class=\"zone-metrics\">\r\n <span class=\"badge badge-light-primary px-2\" placement=\"top\" ngbTooltip=\"Footfall (Engagers)\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\"\r\n viewBox=\"0 0 10 11\" fill=\"none\">\r\n <path\r\n d=\"M0.25 8.16288H3V8.78788C3 9.15255 2.85513 9.50229 2.59727 9.76015C2.33941 10.018 1.98967 10.1629 1.625 10.1629C1.26033 10.1629 0.910591 10.018 0.652728 9.76015C0.394866 9.50229 0.25 9.15255 0.25 8.78788V8.16288ZM2.25 2.22288C3.25 2.22288 3.75 3.66288 3.75 4.66288C3.75 5.16288 3.5 5.66288 3.25 6.41288L3 7.16288H0.25C0.25 6.66288 0 5.91288 0 4.66288C0 3.41288 0.999 2.22288 2.25 2.22288ZM8.277 6.21188L8.1685 6.82738C8.10117 7.18269 7.89656 7.49717 7.59901 7.70271C7.30146 7.90824 6.93492 7.98827 6.57878 7.92547C6.22263 7.86268 5.90557 7.6621 5.69626 7.3672C5.48695 7.07229 5.40225 6.7068 5.4605 6.34988L5.5685 5.73488L8.277 6.21188ZM7.339 0.0153812C8.571 0.232381 9.348 1.57788 9.131 2.80888C8.914 4.03988 8.5375 4.73488 8.451 5.22738L5.7425 4.74988L5.6265 3.96788C5.5105 3.18588 5.3515 2.64988 5.438 2.15788C5.6115 1.17288 6.354 -0.158119 7.339 0.0153812Z\"\r\n fill=\"#009BF3\" />\r\n </svg></span> {{ zone.fromZoneFootfallCount ?? '--' }}\r\n </span>\r\n <span class=\"badge badge-light-default px-2\" placement=\"top\"\r\n [ngbTooltip]=\"clientData?.isNOB ? 'NoB' : 'Conversion'\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> {{ zone.fromZoneNobCount ?? '--' }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body max-h-200px min-h-auto overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Engagers)</th>\r\n <th ><span class=\"me-2\" *ngIf=\"this.clientData?.isNOB\">NoB</span> <span class=\"me-2\" *ngIf=\"!this.clientData?.isNOB\">Conversion</span> \r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15320_82488)\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15320_82488\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> -->\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone | titlecase}}</td>\r\n <td>{{ row.footfall ?? '--' }} ({{ row.engagerPercent }}%)</td>\r\n <td>{{ row.nob ?? '--' }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-conatiner>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</div>", styles: [".zone-card{border:1px solid #e6f0ff;border-radius:10px;margin-bottom:12px;background:#fff}.zone-header{display:flex;justify-content:space-between;align-items:center;padding:12px 30px 12px 12px;cursor:pointer;background:#f6fcff;border-radius:10px}.zone-default{border-width:1px;display:flex;justify-content:space-between;align-items:center;opacity:1;border-radius:8px;padding:12px 30px 12px 12px;border:1px solid #D0D5DD;background:#fff}.zone-title{font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;color:#33b5ff}.zone-metrics{display:flex;align-items:center;gap:8px}.pill{padding:4px 10px;border-radius:16px;font-size:12px}.arrow{transition:transform .3s ease}.arrow.rotate{transform:rotate(180deg)}.zone-body{padding:10px 12px}.table-head,.table-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:6px 0}.table-head{font-weight:600;font-size:12px;opacity:1;padding:11px 16px;border-bottom-width:1px;background-color:#fcfcfd;color:#667085;border-bottom:1px solid #EAECF0;display:flex;justify-content:space-between}.table-row{opacity:1;padding:11px 16px;border-bottom-width:1px;display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid #EAECF0}.zone-floating{position:sticky;width:330px;height:75px;top:0;z-index:9999;cursor:move}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.bordered-box{border:1px solid #EAECF0;border-radius:8px}.path-wrapper{opacity:1;padding:8px 16px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.zone-dropdown{position:relative}.dropdown-panel{position:absolute;background:#fff;border-radius:8px;padding:10px;width:100%;box-shadow:0 6px 20px #0000001a;z-index:1000}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.dropdown-panel{width:260px;background:#fff;border-radius:8px;box-shadow:0 6px 20px #0000001f}.dropdown-body{max-height:220px}.zone-item{display:flex;align-items:center;gap:8px;padding:6px 0}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .am-tooltip{font-size:12px;border-width:1px;opacity:1;border-radius:12px;padding:8px}::ng-deep .am-tooltip-header{margin-bottom:6px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}::ng-deep .am-tooltip-table{width:100%;border-collapse:collapse}::ng-deep .am-tooltip-table .value{font-weight:600}::ng-deep .am-tooltip-table .text-primary{font-weight:700;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#00a3ff}::ng-deep .am-tooltip-table .text-value{font-weight:500;font-size:16px;line-height:20px;letter-spacing:0%;margin-left:5px;padding-top:5px;color:#667085}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
|
|
1439
1436
|
}
|
|
1440
1437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneJourneyComponent, decorators: [{
|
|
1441
1438
|
type: Component,
|
|
1442
|
-
args: [{ selector: 'lib-zone-journey', template: "<!-- zone-journey.component.html -->\r\n<div class=\"card my-card mx-1 my-2\">\r\n <div class=\"card-header px-0 mx-5 border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-1\">Zone-Based Shopper Analysis </span>\r\n <span class=\"text-sub mb-1\">Understand your Shoppers journey from one zone to another\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n<div class=\"zone-dropdown me-2\" #zoneDropdown\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- BUTTON -->\r\n <button [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn btn-outline w-100 me-2 d-flex justify-content-between\"\r\n (click)=\"toggleDropdown($event)\"\r\n >\r\n Show / Hide Zone\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n<path d=\"M1 1L6 6L11 1\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </button>\r\n\r\n <!-- DROPDOWN -->\r\n <div *ngIf=\"showDropdown\" class=\"dropdown-panel h-300px d-flex flex-column\">\r\n\r\n <!-- HEADER (fixed) -->\r\n <div class=\"dropdown-header px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"dropdownSearchText\"\r\n (input)=\"filterZones()\"\r\n />\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 mb-2 px-2\">\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected()\"\r\n (change)=\"toggleSelectAll($event)\"\r\n /></span>\r\n <span class=\"ms-2\">Select All</span>\r\n </div>\r\n <!-- BODY (scrollable list) -->\r\n <div class=\"dropdown-body flex-grow-1 overflow-auto px-2\">\r\n <div\r\n class=\"zone-item\"\r\n *ngFor=\"let zone of tempFilteredZones\"\r\n >\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"zone.checked\"\r\n /></span>\r\n <span class=\"ms-2\">{{ zone.name }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- FOOTER (fixed) -->\r\n <div class=\"dropdown-footer d-flex justify-content-end gap-2 p-2 border-top\">\r\n <button class=\"btn btn-sm btn-outline w-50\" (click)=\"resetZones()\">\r\n Reset\r\n </button>\r\n <button class=\"btn btn-sm btn-primary w-50\" (click)=\"applyZones()\">\r\n Apply\r\n </button>\r\n </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n\r\n <button type=\"button\" (click)=\"getZoneJourneyExport()\" [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-3 mx-3\">\r\n <div class=\"bordered-box w-50 me-2 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n height=\"21\" viewBox=\"0 0 19 21\" fill=\"none\">\r\n <path\r\n d=\"M0.5 16.3258H6V17.5758C6 18.3051 5.71027 19.0046 5.19454 19.5203C4.67882 20.036 3.97935 20.3258 3.25 20.3258C2.52065 20.3258 1.82118 20.036 1.30546 19.5203C0.789731 19.0046 0.5 18.3051 0.5 17.5758V16.3258ZM4.5 4.44576C6.5 4.44576 7.5 7.32576 7.5 9.32576C7.5 10.3258 7 11.3258 6.5 12.8258L6 14.3258H0.5C0.5 13.3258 0 11.8258 0 9.32576C0 6.82576 1.998 4.44576 4.5 4.44576ZM16.554 12.4238L16.337 13.6548C16.2023 14.3654 15.7931 14.9943 15.198 15.4054C14.6029 15.8165 13.8698 15.9765 13.1576 15.8509C12.4453 15.7254 11.8111 15.3242 11.3925 14.7344C10.9739 14.1446 10.8045 13.4136 10.921 12.6998L11.137 11.4698L16.554 12.4238ZM14.678 0.0307624C17.142 0.464762 18.696 3.15576 18.262 5.61776C17.828 8.07976 17.075 9.46976 16.902 10.4548L11.485 9.49976L11.253 7.93576C11.021 6.37176 10.703 5.29976 10.876 4.31576C11.223 2.34576 12.708 -0.316238 14.678 0.0307624Z\"\r\n fill=\"#1D2939\" />\r\n </svg>Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{zoneShopperAnalysis?.OverallFootfall ?? '--'}}</span> <span class=\"text-perc ms-1\">({{zoneShopperAnalysis?.ConversionPercent ?? '--'}} %)</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> NoB :</span>\r\n <span *ngIf=\"!this.clientData?.isNOB\" class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\"><svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row gx-0 p-3\">\r\n <div [ngClass]=\"isMinimized ? 'col-12' : 'col-8'\"\r\n [style.height.px]=\"zoneChartNoData ? 300 : (isMinimized ? 650 : 550)\">\r\n <ng-container *ngIf=\"zoneChartLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneChartNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!zoneChartNoData && !zoneChartLoading\" id=\"chartdiv\" style=\"width: 100%; height: 100%;\"></div>\r\n </div>\r\n\r\n <div [ngClass]=\"isMinimized ? 'zone-floating' : 'col-4'\" [style.top.px]=\"isMinimized ? floatingPos.top : null\"\r\n [style.left.px]=\"isMinimized ? floatingPos.left : null\" (mousedown)=\"startDrag($event)\">\r\n <!-- (mousedown)=\"startDrag($event)\" -->\r\n <ng-container *ngIf=\"zoneCardLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneCardNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-conatiner *ngIf=\"!zoneCardNoData && !zoneCardLoading\" class=\"card \">\r\n <div class=\"card-header border-0 px-4\"\r\n [ngClass]=\"isMinimized ?'bg-secondary min-h-30px': 'bg-light-primary min-h-45px mb-2'\">\r\n <div class=\"card-title align-items-start\"><span *ngIf=\"isMinimized\" class=\"me-2 mb-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9 20C8.45 20 7.97917 19.8042 7.5875 19.4125C7.19583 19.0208 7 18.55 7 18C7 17.45 7.19583 16.9792 7.5875 16.5875C7.97917 16.1958 8.45 16 9 16C9.55 16 10.0208 16.1958 10.4125 16.5875C10.8042 16.9792 11 17.45 11 18C11 18.55 10.8042 19.0208 10.4125 19.4125C10.0208 19.8042 9.55 20 9 20ZM15 20C14.45 20 13.9792 19.8042 13.5875 19.4125C13.1958 19.0208 13 18.55 13 18C13 17.45 13.1958 16.9792 13.5875 16.5875C13.9792 16.1958 14.45 16 15 16C15.55 16 16.0208 16.1958 16.4125 16.5875C16.8042 16.9792 17 17.45 17 18C17 18.55 16.8042 19.0208 16.4125 19.4125C16.0208 19.8042 15.55 20 15 20ZM9 14C8.45 14 7.97917 13.8042 7.5875 13.4125C7.19583 13.0208 7 12.55 7 12C7 11.45 7.19583 10.9792 7.5875 10.5875C7.97917 10.1958 8.45 10 9 10C9.55 10 10.0208 10.1958 10.4125 10.5875C10.8042 10.9792 11 11.45 11 12C11 12.55 10.8042 13.0208 10.4125 13.4125C10.0208 13.8042 9.55 14 9 14ZM15 14C14.45 14 13.9792 13.8042 13.5875 13.4125C13.1958 13.0208 13 12.55 13 12C13 11.45 13.1958 10.9792 13.5875 10.5875C13.9792 10.1958 14.45 10 15 10C15.55 10 16.0208 10.1958 16.4125 10.5875C16.8042 10.9792 17 11.45 17 12C17 12.55 16.8042 13.0208 16.4125 13.4125C16.0208 13.8042 15.55 14 15 14ZM9 8C8.45 8 7.97917 7.80417 7.5875 7.4125C7.19583 7.02083 7 6.55 7 6C7 5.45 7.19583 4.97917 7.5875 4.5875C7.97917 4.19583 8.45 4 9 4C9.55 4 10.0208 4.19583 10.4125 4.5875C10.8042 4.97917 11 5.45 11 6C11 6.55 10.8042 7.02083 10.4125 7.4125C10.0208 7.80417 9.55 8 9 8ZM15 8C14.45 8 13.9792 7.80417 13.5875 7.4125C13.1958 7.02083 13 6.55 13 6C13 5.45 13.1958 4.97917 13.5875 4.5875C13.9792 4.19583 14.45 4 15 4C15.55 4 16.0208 4.19583 16.4125 4.5875C16.8042 4.97917 17 5.45 17 6C17 6.55 16.8042 7.02083 16.4125 7.4125C16.0208 7.80417 15.55 8 15 8Z\"\r\n fill=\"#667085\" />\r\n </svg></span> Zone Journey </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span *ngIf=\"!isMinimized\" (click)=\"searchOpen()\" class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19 19L14.65 14.65M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"cursor-pointer\" *ngIf=\"!isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M5 12H19\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M15 3H21M21 3V9M21 3L14 10M9 21H3M3 21V15M3 21L10 14\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n<div *ngIf=\"searchNewOpen\" class=\"px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"searchZoneText\"\r\n (change)=\"SearchZones()\"\r\n />\r\n </div>\r\n <div class=\"zone-card mx-3 \" *ngFor=\"let zone of zones;let i = index\">\r\n\r\n <!-- HEADER -->\r\n <div [ngClass]=\"activeIndex === i ? 'zone-header':'zone-default'\" (click)=\"toggle(i)\">\r\n <div [ngClass]=\"activeIndex === i ? 'zone-title':'zone-notitle'\">{{ zone.fromZone |\r\n titlecase}}\r\n </div>\r\n\r\n <div class=\"zone-metrics\">\r\n <span class=\"badge badge-light-primary px-2\" placement=\"top\" ngbTooltip=\"Footfall (Engagers)\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\"\r\n viewBox=\"0 0 10 11\" fill=\"none\">\r\n <path\r\n d=\"M0.25 8.16288H3V8.78788C3 9.15255 2.85513 9.50229 2.59727 9.76015C2.33941 10.018 1.98967 10.1629 1.625 10.1629C1.26033 10.1629 0.910591 10.018 0.652728 9.76015C0.394866 9.50229 0.25 9.15255 0.25 8.78788V8.16288ZM2.25 2.22288C3.25 2.22288 3.75 3.66288 3.75 4.66288C3.75 5.16288 3.5 5.66288 3.25 6.41288L3 7.16288H0.25C0.25 6.66288 0 5.91288 0 4.66288C0 3.41288 0.999 2.22288 2.25 2.22288ZM8.277 6.21188L8.1685 6.82738C8.10117 7.18269 7.89656 7.49717 7.59901 7.70271C7.30146 7.90824 6.93492 7.98827 6.57878 7.92547C6.22263 7.86268 5.90557 7.6621 5.69626 7.3672C5.48695 7.07229 5.40225 6.7068 5.4605 6.34988L5.5685 5.73488L8.277 6.21188ZM7.339 0.0153812C8.571 0.232381 9.348 1.57788 9.131 2.80888C8.914 4.03988 8.5375 4.73488 8.451 5.22738L5.7425 4.74988L5.6265 3.96788C5.5105 3.18588 5.3515 2.64988 5.438 2.15788C5.6115 1.17288 6.354 -0.158119 7.339 0.0153812Z\"\r\n fill=\"#009BF3\" />\r\n </svg></span> {{ zone.fromZoneFootfallCount ?? '--' }}\r\n </span>\r\n <span class=\"badge badge-light-default px-2\" placement=\"top\"\r\n [ngbTooltip]=\"clientData?.isNOB ? 'NoB' : 'Conversion'\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> {{ zone.fromZoneNobCount ?? '--' }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body max-h-200px min-h-auto overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Engagers)</th>\r\n <th ><span class=\"me-2\" *ngIf=\"this.clientData?.isNOB\">NoB</span> <span class=\"me-2\" *ngIf=\"!this.clientData?.isNOB\">Conversion</span> <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15320_82488)\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15320_82488\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone | titlecase}}</td>\r\n <td>{{ row.footfall ?? '--' }} ({{ row.engagerPercent }}%)</td>\r\n <td>{{ row.nob ?? '--' }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-conatiner>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</div>", styles: [".zone-card{border:1px solid #e6f0ff;border-radius:10px;margin-bottom:12px;background:#fff}.zone-header{display:flex;justify-content:space-between;align-items:center;padding:12px 30px 12px 12px;cursor:pointer;background:#f6fcff;border-radius:10px}.zone-default{border-width:1px;display:flex;justify-content:space-between;align-items:center;opacity:1;border-radius:8px;padding:12px 30px 12px 12px;border:1px solid #D0D5DD;background:#fff}.zone-title{font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;color:#33b5ff}.zone-metrics{display:flex;align-items:center;gap:8px}.pill{padding:4px 10px;border-radius:16px;font-size:12px}.arrow{transition:transform .3s ease}.arrow.rotate{transform:rotate(180deg)}.zone-body{padding:10px 12px}.table-head,.table-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:6px 0}.table-head{font-weight:600;font-size:12px;opacity:1;padding:11px 16px;border-bottom-width:1px;background-color:#fcfcfd;color:#667085;border-bottom:1px solid #EAECF0;display:flex;justify-content:space-between}.table-row{opacity:1;padding:11px 16px;border-bottom-width:1px;display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid #EAECF0}.zone-floating{position:sticky;width:330px;height:75px;top:0;z-index:9999;cursor:move}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.bordered-box{border:1px solid #EAECF0;border-radius:8px}.path-wrapper{opacity:1;padding:8px 16px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.zone-dropdown{position:relative}.dropdown-panel{position:absolute;background:#fff;border-radius:8px;padding:10px;width:100%;box-shadow:0 6px 20px #0000001a;z-index:1000}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.dropdown-panel{width:260px;background:#fff;border-radius:8px;box-shadow:0 6px 20px #0000001f}.dropdown-body{max-height:220px}.zone-item{display:flex;align-items:center;gap:8px;padding:6px 0}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.am-tooltip{font-size:12px}.am-tooltip-header{font-weight:600;margin-bottom:6px}.am-tooltip-table{width:100%;border-collapse:collapse}.am-tooltip-table .value{text-align:right;font-weight:600}\n"] }]
|
|
1439
|
+
args: [{ selector: 'lib-zone-journey', template: "<!-- zone-journey.component.html -->\r\n<div class=\"card my-card mx-1 my-2\">\r\n <div class=\"card-header px-0 mx-5 border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-1\">Zone-Based Shopper Analysis </span>\r\n <span class=\"text-sub mb-1\">Understand your Shoppers journey from one zone to another\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n<div class=\"zone-dropdown me-2\" #zoneDropdown\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- BUTTON -->\r\n <button [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn btn-outline w-100 me-2 d-flex justify-content-between\"\r\n (click)=\"toggleDropdown($event)\"\r\n >\r\n Show / Hide Zone\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n<path d=\"M1 1L6 6L11 1\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n </button>\r\n\r\n <!-- DROPDOWN -->\r\n <div *ngIf=\"showDropdown\" class=\"dropdown-panel h-300px d-flex flex-column\">\r\n\r\n <!-- HEADER (fixed) -->\r\n <div class=\"dropdown-header px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"dropdownSearchText\"\r\n (input)=\"filterZones()\"\r\n />\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 mb-2 px-2\">\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelected()\"\r\n (change)=\"toggleSelectAll($event)\"\r\n /></span>\r\n <span class=\"ms-2\">Select All</span>\r\n </div>\r\n <!-- BODY (scrollable list) -->\r\n <div class=\"dropdown-body flex-grow-1 overflow-auto px-2\">\r\n <div\r\n class=\"zone-item\"\r\n *ngFor=\"let zone of tempFilteredZones\"\r\n >\r\n <span class=\"mx-1\"><input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"zone.checked\"\r\n /></span>\r\n <span class=\"ms-2\">{{ zone.name }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- FOOTER (fixed) -->\r\n <div class=\"dropdown-footer d-flex justify-content-end gap-2 p-2 border-top\">\r\n <button class=\"btn btn-sm btn-outline w-50\" (click)=\"resetZones()\">\r\n Reset\r\n </button>\r\n <button class=\"btn btn-sm btn-primary w-50\" (click)=\"applyZones()\">\r\n Apply\r\n </button>\r\n </div>\r\n\r\n</div>\r\n\r\n</div>\r\n\r\n\r\n <button type=\"button\" (click)=\"getZoneJourneyExport()\" [disabled]=\"!zoneShopperAnalysis\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader me-4\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between mt-3 mx-3\">\r\n <div class=\"bordered-box w-50 me-2 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n height=\"21\" viewBox=\"0 0 19 21\" fill=\"none\">\r\n <path\r\n d=\"M0.5 16.3258H6V17.5758C6 18.3051 5.71027 19.0046 5.19454 19.5203C4.67882 20.036 3.97935 20.3258 3.25 20.3258C2.52065 20.3258 1.82118 20.036 1.30546 19.5203C0.789731 19.0046 0.5 18.3051 0.5 17.5758V16.3258ZM4.5 4.44576C6.5 4.44576 7.5 7.32576 7.5 9.32576C7.5 10.3258 7 11.3258 6.5 12.8258L6 14.3258H0.5C0.5 13.3258 0 11.8258 0 9.32576C0 6.82576 1.998 4.44576 4.5 4.44576ZM16.554 12.4238L16.337 13.6548C16.2023 14.3654 15.7931 14.9943 15.198 15.4054C14.6029 15.8165 13.8698 15.9765 13.1576 15.8509C12.4453 15.7254 11.8111 15.3242 11.3925 14.7344C10.9739 14.1446 10.8045 13.4136 10.921 12.6998L11.137 11.4698L16.554 12.4238ZM14.678 0.0307624C17.142 0.464762 18.696 3.15576 18.262 5.61776C17.828 8.07976 17.075 9.46976 16.902 10.4548L11.485 9.49976L11.253 7.93576C11.021 6.37176 10.703 5.29976 10.876 4.31576C11.223 2.34576 12.708 -0.316238 14.678 0.0307624Z\"\r\n fill=\"#1D2939\" />\r\n </svg>Overall Footfall :</span>\r\n <span><span class=\"text-val\">{{zoneShopperAnalysis?.OverallFootfall ?? '--'}}</span> <span class=\"text-perc ms-1\">({{zoneShopperAnalysis?.ConversionPercent ?? '--'}} %)</span></span>\r\n </div>\r\n </div>\r\n <div class=\"bordered-box w-50 py-1\">\r\n <div class=\"group d-flex justify-content-between pt-1 px-3\">\r\n <span *ngIf=\"this.clientData?.isNOB\" class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> NoB :</span>\r\n <span *ngIf=\"!this.clientData?.isNOB\" class=\"text-title py-2\"><svg class=\"mx-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\"\r\n height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9 11H15M9 15H15M9 7H15M5 3C5 2.73478 5.10536 2.48043 5.29289 2.29289C5.48043 2.10536 5.73478 2 6 2H18C18.2652 2 18.5196 2.10536 18.7071 2.29289C18.8946 2.48043 19 2.73478 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z\"\r\n stroke=\"#1D2939\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> Conversion :</span>\r\n <span class=\"text-val\">{{zoneShopperAnalysis?.Nob ?? '--'}} <span *ngIf=\"this.clientData?.isNOB\" class=\"px-0 cursor-pointer\" (click)=\"nobUpload()\"><svg placement=\"top\" ngbTooltip=\"Upload NoB\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_15106_106090)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"#EAF8FF\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#EAF8FF\" />\r\n <path\r\n d=\"M23.3326 22.3332L19.9992 18.9999M19.9992 18.9999L16.6659 22.3332M19.9992 18.9999V26.4999M26.9909 24.3249C27.8037 23.8818 28.4458 23.1806 28.8158 22.3321C29.1858 21.4835 29.2627 20.5359 29.0344 19.6388C28.8061 18.7417 28.2855 17.9462 27.5548 17.3778C26.8241 16.8094 25.925 16.5005 24.9992 16.4999H23.9492C23.697 15.5243 23.2269 14.6185 22.5742 13.8507C21.9215 13.0829 21.1033 12.4731 20.181 12.0671C19.2587 11.661 18.2564 11.4694 17.2493 11.5065C16.2423 11.5436 15.2568 11.8085 14.3669 12.2813C13.477 12.7541 12.7058 13.4225 12.1114 14.2362C11.517 15.05 11.1148 15.9879 10.9351 16.9794C10.7553 17.9709 10.8027 18.9903 11.0736 19.961C11.3445 20.9316 11.8319 21.8281 12.4992 22.5832\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_15106_106090\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_15106_106090\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_15106_106090\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row gx-0 p-3\">\r\n <div [ngClass]=\"isMinimized ? 'col-12' : 'col-8'\"\r\n [style.height.px]=\"zoneChartNoData ? 300 : (isMinimized ? 650 : 550)\">\r\n <ng-container *ngIf=\"zoneChartLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneChartNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!zoneChartNoData && !zoneChartLoading\" id=\"chartdiv\" style=\"width: 100%; height: 100%;\"></div>\r\n </div>\r\n\r\n <div [ngClass]=\"isMinimized ? 'zone-floating' : 'col-4'\" [style.top.px]=\"isMinimized ? floatingPos.top : null\"\r\n [style.left.px]=\"isMinimized ? floatingPos.left : null\" (mousedown)=\"startDrag($event)\">\r\n <!-- (mousedown)=\"startDrag($event)\" -->\r\n <ng-container *ngIf=\"zoneCardLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zoneCardNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Based Shopper Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-conatiner *ngIf=\"!zoneCardNoData && !zoneCardLoading\" class=\"card \">\r\n <div class=\"card-header border-0 px-4\"\r\n [ngClass]=\"isMinimized ?'bg-secondary min-h-30px': 'bg-light-primary min-h-45px mb-2'\">\r\n <div class=\"card-title align-items-start\"><span *ngIf=\"isMinimized\" class=\"me-2 mb-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9 20C8.45 20 7.97917 19.8042 7.5875 19.4125C7.19583 19.0208 7 18.55 7 18C7 17.45 7.19583 16.9792 7.5875 16.5875C7.97917 16.1958 8.45 16 9 16C9.55 16 10.0208 16.1958 10.4125 16.5875C10.8042 16.9792 11 17.45 11 18C11 18.55 10.8042 19.0208 10.4125 19.4125C10.0208 19.8042 9.55 20 9 20ZM15 20C14.45 20 13.9792 19.8042 13.5875 19.4125C13.1958 19.0208 13 18.55 13 18C13 17.45 13.1958 16.9792 13.5875 16.5875C13.9792 16.1958 14.45 16 15 16C15.55 16 16.0208 16.1958 16.4125 16.5875C16.8042 16.9792 17 17.45 17 18C17 18.55 16.8042 19.0208 16.4125 19.4125C16.0208 19.8042 15.55 20 15 20ZM9 14C8.45 14 7.97917 13.8042 7.5875 13.4125C7.19583 13.0208 7 12.55 7 12C7 11.45 7.19583 10.9792 7.5875 10.5875C7.97917 10.1958 8.45 10 9 10C9.55 10 10.0208 10.1958 10.4125 10.5875C10.8042 10.9792 11 11.45 11 12C11 12.55 10.8042 13.0208 10.4125 13.4125C10.0208 13.8042 9.55 14 9 14ZM15 14C14.45 14 13.9792 13.8042 13.5875 13.4125C13.1958 13.0208 13 12.55 13 12C13 11.45 13.1958 10.9792 13.5875 10.5875C13.9792 10.1958 14.45 10 15 10C15.55 10 16.0208 10.1958 16.4125 10.5875C16.8042 10.9792 17 11.45 17 12C17 12.55 16.8042 13.0208 16.4125 13.4125C16.0208 13.8042 15.55 14 15 14ZM9 8C8.45 8 7.97917 7.80417 7.5875 7.4125C7.19583 7.02083 7 6.55 7 6C7 5.45 7.19583 4.97917 7.5875 4.5875C7.97917 4.19583 8.45 4 9 4C9.55 4 10.0208 4.19583 10.4125 4.5875C10.8042 4.97917 11 5.45 11 6C11 6.55 10.8042 7.02083 10.4125 7.4125C10.0208 7.80417 9.55 8 9 8ZM15 8C14.45 8 13.9792 7.80417 13.5875 7.4125C13.1958 7.02083 13 6.55 13 6C13 5.45 13.1958 4.97917 13.5875 4.5875C13.9792 4.19583 14.45 4 15 4C15.55 4 16.0208 4.19583 16.4125 4.5875C16.8042 4.97917 17 5.45 17 6C17 6.55 16.8042 7.02083 16.4125 7.4125C16.0208 7.80417 15.55 8 15 8Z\"\r\n fill=\"#667085\" />\r\n </svg></span> Zone Journey </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span *ngIf=\"!isMinimized\" (click)=\"searchOpen()\" class=\"me-3\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M19 19L14.65 14.65M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z\"\r\n stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"cursor-pointer\" *ngIf=\"!isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M5 12H19\" stroke=\"#98A2B3\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"cursor-pointer\" *ngIf=\"isMinimized\"\r\n (click)=\"expandClose(); $event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path d=\"M15 3H21M21 3V9M21 3L14 10M9 21H3M3 21V15M3 21L10 14\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!isMinimized\" class=\"card-body h-500px overflow-auto px-0 py-2\">\r\n \r\n<div *ngIf=\"searchNewOpen\" class=\"px-2 pb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Search Zone\"\r\n [(ngModel)]=\"searchZoneText\"\r\n (change)=\"SearchZones()\"\r\n />\r\n </div>\r\n <div class=\"zone-card mx-3 \" *ngFor=\"let zone of zones;let i = index\">\r\n\r\n <!-- HEADER -->\r\n <div [ngClass]=\"activeIndex === i ? 'zone-header':'zone-default'\" (click)=\"toggle(i)\">\r\n <div [ngClass]=\"activeIndex === i ? 'zone-title':'zone-notitle'\">{{ zone.fromZone |\r\n titlecase}}\r\n </div>\r\n\r\n <div class=\"zone-metrics\">\r\n <span class=\"badge badge-light-primary px-2\" placement=\"top\" ngbTooltip=\"Footfall (Engagers)\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\"\r\n viewBox=\"0 0 10 11\" fill=\"none\">\r\n <path\r\n d=\"M0.25 8.16288H3V8.78788C3 9.15255 2.85513 9.50229 2.59727 9.76015C2.33941 10.018 1.98967 10.1629 1.625 10.1629C1.26033 10.1629 0.910591 10.018 0.652728 9.76015C0.394866 9.50229 0.25 9.15255 0.25 8.78788V8.16288ZM2.25 2.22288C3.25 2.22288 3.75 3.66288 3.75 4.66288C3.75 5.16288 3.5 5.66288 3.25 6.41288L3 7.16288H0.25C0.25 6.66288 0 5.91288 0 4.66288C0 3.41288 0.999 2.22288 2.25 2.22288ZM8.277 6.21188L8.1685 6.82738C8.10117 7.18269 7.89656 7.49717 7.59901 7.70271C7.30146 7.90824 6.93492 7.98827 6.57878 7.92547C6.22263 7.86268 5.90557 7.6621 5.69626 7.3672C5.48695 7.07229 5.40225 6.7068 5.4605 6.34988L5.5685 5.73488L8.277 6.21188ZM7.339 0.0153812C8.571 0.232381 9.348 1.57788 9.131 2.80888C8.914 4.03988 8.5375 4.73488 8.451 5.22738L5.7425 4.74988L5.6265 3.96788C5.5105 3.18588 5.3515 2.64988 5.438 2.15788C5.6115 1.17288 6.354 -0.158119 7.339 0.0153812Z\"\r\n fill=\"#009BF3\" />\r\n </svg></span> {{ zone.fromZoneFootfallCount ?? '--' }}\r\n </span>\r\n <span class=\"badge badge-light-default px-2\" placement=\"top\"\r\n [ngbTooltip]=\"clientData?.isNOB ? 'NoB' : 'Conversion'\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\"\r\n viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path\r\n d=\"M4.5 5.5H7.5M4.5 7.5H7.5M4.5 3.5H7.5M2.5 1.5C2.5 1.36739 2.55268 1.24021 2.64645 1.14645C2.74021 1.05268 2.86739 1 3 1H9C9.13261 1 9.25979 1.05268 9.35355 1.14645C9.44732 1.24021 9.5 1.36739 9.5 1.5V11L7.75 9.75L6 11L4.25 9.75L2.5 11V1.5Z\"\r\n stroke=\"#344054\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> {{ zone.fromZoneNobCount ?? '--' }}\r\n </span>\r\n\r\n <span class=\"arrow cursor-pointer\"><svg *ngIf=\"activeIndex === i\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\"\r\n fill=\"none\">\r\n <path d=\"M0.832031 5.83301L5.83203 0.833008L10.832 5.83301\" stroke=\"#33B5FF\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"activeIndex !== i\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\r\n <path d=\"M0.832031 0.833008L5.83203 5.83301L10.832 0.833008\" stroke=\"#667085\"\r\n stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- BODY -->\r\n <div class=\"zone-body max-h-200px min-h-auto overflow-auto\" *ngIf=\"activeIndex === i\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table text-nowrap bottom-border \">\r\n <thead>\r\n\r\n <tr>\r\n <th class=\"w-50\">To Zone</th>\r\n <th>Footfall (Engagers)</th>\r\n <th ><span class=\"me-2\" *ngIf=\"this.clientData?.isNOB\">NoB</span> <span class=\"me-2\" *ngIf=\"!this.clientData?.isNOB\">Conversion</span> \r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15320_82488)\">\r\n <path\r\n d=\"M7.9987 10.6663V7.99967M7.9987 5.33301H8.00536M14.6654 7.99967C14.6654 11.6816 11.6806 14.6663 7.9987 14.6663C4.3168 14.6663 1.33203 11.6816 1.33203 7.99967C1.33203 4.31778 4.3168 1.33301 7.9987 1.33301C11.6806 1.33301 14.6654 4.31778 14.6654 7.99967Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15320_82488\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg> -->\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of zone.toZoneData\">\r\n <td>{{ row.toZone | titlecase}}</td>\r\n <td>{{ row.footfall ?? '--' }} ({{ row.engagerPercent }}%)</td>\r\n <td>{{ row.nob ?? '--' }} ({{ row.nobPercent }}%)</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-conatiner>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n</div>", styles: [".zone-card{border:1px solid #e6f0ff;border-radius:10px;margin-bottom:12px;background:#fff}.zone-header{display:flex;justify-content:space-between;align-items:center;padding:12px 30px 12px 12px;cursor:pointer;background:#f6fcff;border-radius:10px}.zone-default{border-width:1px;display:flex;justify-content:space-between;align-items:center;opacity:1;border-radius:8px;padding:12px 30px 12px 12px;border:1px solid #D0D5DD;background:#fff}.zone-title{font-weight:600;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;color:#33b5ff}.zone-metrics{display:flex;align-items:center;gap:8px}.pill{padding:4px 10px;border-radius:16px;font-size:12px}.arrow{transition:transform .3s ease}.arrow.rotate{transform:rotate(180deg)}.zone-body{padding:10px 12px}.table-head,.table-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:6px 0}.table-head{font-weight:600;font-size:12px;opacity:1;padding:11px 16px;border-bottom-width:1px;background-color:#fcfcfd;color:#667085;border-bottom:1px solid #EAECF0;display:flex;justify-content:space-between}.table-row{opacity:1;padding:11px 16px;border-bottom-width:1px;display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid #EAECF0}.zone-floating{position:sticky;width:330px;height:75px;top:0;z-index:9999;cursor:move}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.bordered-box{border:1px solid #EAECF0;border-radius:8px}.path-wrapper{opacity:1;padding:8px 16px;gap:16px;border-bottom-width:2px;border-radius:6px}.title{font-weight:600;margin-bottom:12px}.path-card{position:relative;border-radius:12px;background:linear-gradient(135deg,#eef7ff,#e1f3ff);padding:20px}.badge{background:#e0f2ff;color:#0b6ef6;padding:6px 12px;border-radius:20px;font-size:13px}.percent{font-size:20px;font-weight:600;margin-left:12px}.path-text{margin-top:12px;font-size:16px;display:flex;flex-wrap:wrap;gap:8px}.step{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054}.arrowpath{color:#98a2b3}.dots{display:flex;gap:6px;margin-top:12px}.dots span{width:8px;height:8px;background:#d0d5dd;border-radius:50%;cursor:pointer}.dots span.active{background:#344054}.my-card{position:relative}.text-perc{color:#101828;font-weight:400;font-size:20px;line-height:30px}.text-val{font-weight:600;font-size:20px;color:#101828;line-height:30px}.text-title{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.zone-dropdown{position:relative}.dropdown-panel{position:absolute;background:#fff;border-radius:8px;padding:10px;width:100%;box-shadow:0 6px 20px #0000001a;z-index:1000}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}.dropdown-panel{width:260px;background:#fff;border-radius:8px;box-shadow:0 6px 20px #0000001f}.dropdown-body{max-height:220px}.zone-item{display:flex;align-items:center;gap:8px;padding:6px 0}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .am-tooltip{font-size:12px;border-width:1px;opacity:1;border-radius:12px;padding:8px}::ng-deep .am-tooltip-header{margin-bottom:6px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}::ng-deep .am-tooltip-table{width:100%;border-collapse:collapse}::ng-deep .am-tooltip-table .value{font-weight:600}::ng-deep .am-tooltip-table .text-primary{font-weight:700;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#00a3ff}::ng-deep .am-tooltip-table .text-value{font-weight:500;font-size:16px;line-height:20px;letter-spacing:0%;margin-left:5px;padding-top:5px;color:#667085}\n"] }]
|
|
1443
1440
|
}], ctorParameters: () => [{ type: ZoneService }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i4$1.Router }, { type: i4.ToastService }], propDecorators: { headerData: [{
|
|
1444
1441
|
type: Input
|
|
1445
1442
|
}], clientData: [{
|
|
@@ -1739,11 +1736,11 @@ class TopPerformingZonesComponent {
|
|
|
1739
1736
|
this.gs.manageRefreshTrigger.next(true);
|
|
1740
1737
|
}
|
|
1741
1738
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TopPerformingZonesComponent, deps: [{ token: i0.NgZone }, { token: i1$1.NgbModal }, { token: i2$1.FormBuilder }, { token: ZoneService }, { token: i0.ChangeDetectorRef }, { token: i4.ToastService }, { token: i2.GlobalStateService }, { token: i0.ElementRef }, { token: i4$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
1742
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TopPerformingZonesComponent, selector: "lib-top-performing-zones", inputs: { clientData: "clientData" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-lg-5\">\r\n <div class=\"card\">\r\n <div class=\"card-header p-4 border-0\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Top Performing Zones <span\r\n ngbTooltip=\"Zones based on by the highest footfall\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span> </span>\r\n <span class=\"subratetext mt-2\">Based on Zone Footfall</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!analysisLoading && !analysisNoData\" id=\"zonechartdiv\"></div>\r\n <ng-container *ngIf=\"analysisLoading\">\r\n <div class=\"row loader Analysiscard d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"analysisNoData && !analysisLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 Analysiscard\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Top Performing Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-7\">\r\n <div class=\"h-100 card\">\r\n <div class=\"card-header border-0 p-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Top Performing Stores <span\r\n ngbTooltip=\"Stores ranked based on the highest concentration rate\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span>\r\n <span class=\"subratetext mt-2\">Based on Concentration Rate</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon invoicesearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\" fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input type=\"text\" class=\"form-control ps-14 me-4 invoicesearch\" placeholder=\"Search...\" autocomplete=\"off\" \r\n (keyup.enter)=\"searchField($event)\" />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"table-container mx-4\">\r\n <table *ngIf=\"!topperformingstoresLoading && !topperformingstoresNodata\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store Name <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">Zone Name <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('concentrationRate')\">Concentration <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">Avg Dwell Time <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('overallFootfall')\">Overall Footfall <svg [ngClass]=\"sortColumName === 'overallFootfall' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'overallFootfall' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('zoneFootfall')\">Zone Footfall<svg [ngClass]=\"sortColumName === 'zoneFootfall' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneFootfall' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive topstores\">\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td>\r\n <div class=\"table-title-primary cursor-pointer mb-2\" (click)=\"storeView(store.storeId)\">{{ store?.storeName || '--' }}</div>\r\n </td>\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?.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}} %</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store?.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}} mins</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store?.overallFootfall || '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store?.zoneFootfall?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <ng-container *ngIf=\"topperformingstoresLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"topperformingstoresNodata && !topperformingstoresLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mt-18\">\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 Top Performing Stores</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div> \r\n</div>\r\n\r\n<lib-zone-journey *ngIf=\"headerData\" [headerData]=\"headerData\" [clientData]=\"clientData\"></lib-zone-journey>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}tr{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration:underline}table th,table td{height:44px!important;padding:18px 15px!important;align-items:center;gap:12px;align-self:stretch}.Analysiscard,.storescard{margin-top:11%;margin-bottom:20%}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}\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: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: ZoneJourneyComponent, selector: "lib-zone-journey", inputs: ["headerData", "clientData"] }] });
|
|
1739
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TopPerformingZonesComponent, selector: "lib-top-performing-zones", inputs: { clientData: "clientData" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col-lg-5\">\r\n <div class=\"card\">\r\n <div class=\"card-header p-4 border-0\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Top Performing Zones <span\r\n ngbTooltip=\"Zones based on by the highest footfall\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span> </span>\r\n <span class=\"subratetext mt-2\">Based on Zone Footfall</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!analysisLoading && !analysisNoData\" id=\"zonechartdiv\"></div>\r\n <ng-container *ngIf=\"analysisLoading\">\r\n <div class=\"row loader Analysiscard d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"analysisNoData && !analysisLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 Analysiscard\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Top Performing Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-7\">\r\n <div class=\"h-100 card\">\r\n <div class=\"card-header border-0 p-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Top Performing Stores <span\r\n ngbTooltip=\"Stores ranked based on the highest concentration rate\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span>\r\n <span class=\"subratetext mt-2\">Based on Concentration Rate</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon invoicesearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\" fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input type=\"text\" class=\"form-control ps-14 me-4 invoicesearch\" placeholder=\"Search...\" autocomplete=\"off\" \r\n (keyup.enter)=\"searchField($event)\" />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"table-container mx-4\">\r\n <table *ngIf=\"!topperformingstoresLoading && !topperformingstoresNodata\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store Name <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">Zone Name <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('concentrationRate')\">Concentration <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">Avg Dwell Time <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('overallFootfall')\">Overall Footfall <svg [ngClass]=\"sortColumName === 'overallFootfall' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'overallFootfall' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('zoneFootfall')\">Zone Footfall<svg [ngClass]=\"sortColumName === 'zoneFootfall' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneFootfall' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive topstores\">\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td>\r\n <div class=\"table-title-primary cursor-pointer mb-2\" (click)=\"storeView(store.storeId)\">{{ store?.storeName || '--' }}</div>\r\n </td>\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?.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}} %</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store?.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}} mins</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store?.overallFootfall || '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store?.zoneFootfall?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <ng-container *ngIf=\"topperformingstoresLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"topperformingstoresNodata && !topperformingstoresLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mt-18\">\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 Top Performing Stores</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div> \r\n</div>\r\n\r\n<section *ngIf=\"headerData.client ==='478'\">\r\n <lib-zone-journey *ngIf=\"headerData\" [headerData]=\"headerData\" [clientData]=\"clientData\"></lib-zone-journey>\r\n</section>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}tr{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration:underline}table th,table td{height:44px!important;padding:18px 15px!important;align-items:center;gap:12px;align-self:stretch}.Analysiscard,.storescard{margin-top:11%;margin-bottom:20%}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}\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: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: ZoneJourneyComponent, selector: "lib-zone-journey", inputs: ["headerData", "clientData"] }] });
|
|
1743
1740
|
}
|
|
1744
1741
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TopPerformingZonesComponent, decorators: [{
|
|
1745
1742
|
type: Component,
|
|
1746
|
-
args: [{ selector: 'lib-top-performing-zones', template: "<div class=\"row\">\r\n <div class=\"col-lg-5\">\r\n <div class=\"card\">\r\n <div class=\"card-header p-4 border-0\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Top Performing Zones <span\r\n ngbTooltip=\"Zones based on by the highest footfall\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span> </span>\r\n <span class=\"subratetext mt-2\">Based on Zone Footfall</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!analysisLoading && !analysisNoData\" id=\"zonechartdiv\"></div>\r\n <ng-container *ngIf=\"analysisLoading\">\r\n <div class=\"row loader Analysiscard d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"analysisNoData && !analysisLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 Analysiscard\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Top Performing Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-7\">\r\n <div class=\"h-100 card\">\r\n <div class=\"card-header border-0 p-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Top Performing Stores <span\r\n ngbTooltip=\"Stores ranked based on the highest concentration rate\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span>\r\n <span class=\"subratetext mt-2\">Based on Concentration Rate</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon invoicesearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\" fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input type=\"text\" class=\"form-control ps-14 me-4 invoicesearch\" placeholder=\"Search...\" autocomplete=\"off\" \r\n (keyup.enter)=\"searchField($event)\" />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"table-container mx-4\">\r\n <table *ngIf=\"!topperformingstoresLoading && !topperformingstoresNodata\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store Name <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">Zone Name <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('concentrationRate')\">Concentration <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">Avg Dwell Time <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('overallFootfall')\">Overall Footfall <svg [ngClass]=\"sortColumName === 'overallFootfall' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'overallFootfall' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('zoneFootfall')\">Zone Footfall<svg [ngClass]=\"sortColumName === 'zoneFootfall' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneFootfall' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive topstores\">\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td>\r\n <div class=\"table-title-primary cursor-pointer mb-2\" (click)=\"storeView(store.storeId)\">{{ store?.storeName || '--' }}</div>\r\n </td>\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?.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}} %</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store?.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}} mins</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store?.overallFootfall || '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store?.zoneFootfall?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <ng-container *ngIf=\"topperformingstoresLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"topperformingstoresNodata && !topperformingstoresLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mt-18\">\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 Top Performing Stores</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div> \r\n</div>\r\n\r\n<lib-zone-journey *ngIf=\"headerData\" [headerData]=\"headerData\" [clientData]=\"clientData\"></lib-zone-journey>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}tr{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration:underline}table th,table td{height:44px!important;padding:18px 15px!important;align-items:center;gap:12px;align-self:stretch}.Analysiscard,.storescard{margin-top:11%;margin-bottom:20%}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}\n"] }]
|
|
1743
|
+
args: [{ selector: 'lib-top-performing-zones', template: "<div class=\"row\">\r\n <div class=\"col-lg-5\">\r\n <div class=\"card\">\r\n <div class=\"card-header p-4 border-0\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Top Performing Zones <span\r\n ngbTooltip=\"Zones based on by the highest footfall\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span> </span>\r\n <span class=\"subratetext mt-2\">Based on Zone Footfall</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div *ngIf=\"!analysisLoading && !analysisNoData\" id=\"zonechartdiv\"></div>\r\n <ng-container *ngIf=\"analysisLoading\">\r\n <div class=\"row loader Analysiscard d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"analysisNoData && !analysisLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 Analysiscard\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Top Performing Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-7\">\r\n <div class=\"h-100 card\">\r\n <div class=\"card-header border-0 p-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Top Performing Stores <span\r\n ngbTooltip=\"Stores ranked based on the highest concentration rate\"\r\n placement=\"right\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span>\r\n <span class=\"subratetext mt-2\">Based on Concentration Rate</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon invoicesearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\" fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <!-- [disabled]=\"searchDisabled\" -->\r\n <input type=\"text\" class=\"form-control ps-14 me-4 invoicesearch\" placeholder=\"Search...\" autocomplete=\"off\" \r\n (keyup.enter)=\"searchField($event)\" />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"table-container mx-4\">\r\n <table *ngIf=\"!topperformingstoresLoading && !topperformingstoresNodata\" class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\">Store Name <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">Zone Name <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('concentrationRate')\">Concentration <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">Avg Dwell Time <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('overallFootfall')\">Overall Footfall <svg [ngClass]=\"sortColumName === 'overallFootfall' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'overallFootfall' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('zoneFootfall')\">Zone Footfall<svg [ngClass]=\"sortColumName === 'zoneFootfall' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneFootfall' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-responsive topstores\">\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td>\r\n <div class=\"table-title-primary cursor-pointer mb-2\" (click)=\"storeView(store.storeId)\">{{ store?.storeName || '--' }}</div>\r\n </td>\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?.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}} %</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store?.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--'}} mins</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store?.overallFootfall || '--' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ store?.zoneFootfall?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <ng-container *ngIf=\"topperformingstoresLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"topperformingstoresNodata && !topperformingstoresLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column mt-18\">\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 Top Performing Stores</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div> \r\n</div>\r\n\r\n<section *ngIf=\"headerData.client ==='478'\">\r\n <lib-zone-journey *ngIf=\"headerData\" [headerData]=\"headerData\" [clientData]=\"clientData\"></lib-zone-journey>\r\n</section>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}tr{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration:underline}table th,table td{height:44px!important;padding:18px 15px!important;align-items:center;gap:12px;align-self:stretch}.Analysiscard,.storescard{margin-top:11%;margin-bottom:20%}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}\n"] }]
|
|
1747
1744
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }, { type: ZoneService }, { type: i0.ChangeDetectorRef }, { type: i4.ToastService }, { type: i2.GlobalStateService }, { type: i0.ElementRef }, { type: i4$1.Router }], propDecorators: { clientData: [{
|
|
1748
1745
|
type: Input
|
|
1749
1746
|
}] } });
|