tango-app-ui-store-builder 1.0.48 → 1.0.49
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/collection-update-ai/find-replace-layout/prepare-template/prepare-template.component.mjs +39 -19
- package/esm2022/lib/components/planogram/plano-analytics/date-range-picker/date-range-picker.component.mjs +3 -3
- package/esm2022/lib/components/planogram/plano-analytics/fixture-analytics/fixture-analytics.component.mjs +6 -2
- package/esm2022/lib/components/planogram/plano-analytics/plano-analytics.component.mjs +6 -4
- package/esm2022/lib/components/planogram/plano-details-parent/plano-details-parent.component.mjs +3 -3
- package/fesm2022/tango-app-ui-store-builder.mjs +52 -26
- package/fesm2022/tango-app-ui-store-builder.mjs.map +1 -1
- package/lib/components/planogram/plano-analytics/fixture-analytics/fixture-analytics.component.d.ts +2 -1
- package/lib/components/planogram/plano-analytics/plano-analytics.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -42935,8 +42935,8 @@ class DateRangePickerComponent {
|
|
|
42935
42935
|
this.dateChange.emit({ startDate: dayjs(event.startDate).format('YYYY-MM-DD'), endDate: dayjs(event.endDate).format('YYYY-MM-DD') });
|
|
42936
42936
|
}
|
|
42937
42937
|
else {
|
|
42938
|
-
this.dateChange.emit({ startDate: dayjs().subtract(
|
|
42939
|
-
endDate: dayjs().subtract(
|
|
42938
|
+
this.dateChange.emit({ startDate: dayjs().subtract(1, "days").format("YYYY-MM-DD"),
|
|
42939
|
+
endDate: dayjs().subtract(1, "days").format("YYYY-MM-DD") });
|
|
42940
42940
|
}
|
|
42941
42941
|
this.resetValidation();
|
|
42942
42942
|
}
|
|
@@ -42962,6 +42962,7 @@ class FixtureAnalyticsComponent {
|
|
|
42962
42962
|
floorData;
|
|
42963
42963
|
startDate;
|
|
42964
42964
|
endDate;
|
|
42965
|
+
dataType;
|
|
42965
42966
|
onClose = new EventEmitter();
|
|
42966
42967
|
changeFixture = new EventEmitter();
|
|
42967
42968
|
fixtureTemplateDetails;
|
|
@@ -43047,6 +43048,7 @@ class FixtureAnalyticsComponent {
|
|
|
43047
43048
|
toDate: this.endDate,
|
|
43048
43049
|
storeId: [this.floorData.storeId],
|
|
43049
43050
|
zone: `Fixture ${this.fixtureDetails?.fixtureNumber}`,
|
|
43051
|
+
dataType: this.dataType
|
|
43050
43052
|
};
|
|
43051
43053
|
this.storeBuilderService
|
|
43052
43054
|
.getStoreFixtureFootfall(payload)
|
|
@@ -43566,7 +43568,7 @@ class FixtureAnalyticsComponent {
|
|
|
43566
43568
|
this.destroy$.complete();
|
|
43567
43569
|
}
|
|
43568
43570
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FixtureAnalyticsComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
|
|
43569
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FixtureAnalyticsComponent, selector: "lib-fixture-analytics", inputs: { fixtureDetails: "fixtureDetails", vmList: "vmList", floorData: "floorData", startDate: "startDate", endDate: "endDate" }, outputs: { onClose: "onClose", changeFixture: "changeFixture" }, usesOnChanges: true, ngImport: i0, template: "<section id=\"fixture-analytic-details\" *ngIf=\"!isPageLoading\">\r\n <div class=\"d-flex p-2 w-100 justify-content-end align-items-center\">\r\n <svg (click)=\"onClickClose()\" class=\"m-2 cursor-pointer\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n </div>\r\n <div class=\"hero-block\">\r\n <h1 style=\"font-weight: 600;font-size: 30px;\">{{ fixtureTemplateDetails?.fixtureCompliance ?? 0 }}%</h1>\r\n <p>Compliance score</p>\r\n <p>\r\n {{ fixtureTemplateDetails?.header?.label }}<span>•</span>\r\n {{fixtureTemplateDetails?.fixtureCategory}} <span>•</span>\r\n {{fixtureTemplateDetails?.fixtureWidth.value}}{{fixtureTemplateDetails?.fixtureWidth.unit}}<span>•</span>\r\n {{fixtureTemplateDetails?.shelfConfig?.length}} Shelves\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end mb-4 pe-5\">\r\n <div class=\"form-check form-switch \">\r\n <input [checked]=\"showVMs\" [(ngModel)]=\"showVMs\" [ngModelOptions]=\"{ standalone: true }\"\r\n style=\"cursor: pointer\" class=\"form-check-input\" type=\"checkbox\" />\r\n <label style=\"color: black; white-space: nowrap\" class=\"form-check-label sub ms-2\" for=\"showVMs\">\r\n Show VM\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Total Footfall</span>\r\n </div>\r\n \r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.zoneTotal?.PreviousData}}</h2>\r\n \r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"fixtureFootfall?.zoneTotal?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!fixtureFootfall?.zoneTotal?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"fixtureFootfall?.zoneTotal?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.zoneTotal?.count}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Zone Conversion</span>\r\n </div>\r\n \r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.conversionCount?.PreviousData}}</h2>\r\n \r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"fixtureFootfall?.conversionCount?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!fixtureFootfall?.conversionCount?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"fixtureFootfall?.conversionCount?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.conversionCount?.count}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Dwell Time</span>\r\n </div>\r\n \r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.dwellTime?.PreviousData}}</h2>\r\n \r\n <div class=\"d-flex align-items-centergap-1 small\" [ngClass]=\"fixtureFootfall?.dwellTime?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!fixtureFootfall?.dwellTime?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"fixtureFootfall?.dwellTime?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.dwellTime?.count}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div id=\"vm-products-sum\" class=\"wall-viewport mt-8\">\r\n <div class=\"fixture-wrapper\">\r\n <!-- Header block -->\r\n <div id=\"header-block\" class=\"header-block\">\r\n <p>{{ fixtureTemplateDetails?.header?.label }}</p>\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div id=\"body-block-sum\" class=\"body-block\">\r\n <!----------------------------------[VM BLOCK]--------------------------------------->\r\n <div *ngIf=\"fixtureTemplateDetails?.vmConfig?.length\" [ngClass]=\"{'d-none':!showVMs}\">\r\n <ng-container *ngFor=\"let vm of fixtureTemplateDetails?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container *ngIf=\"getSelectedVM(vm) as selectedVM\">\r\n <img *ngIf=\"selectedVM?.imgUrl; else placeholder\" [src]=\"selectedVM?.imgUrl\"\r\n alt=\"Vm Image\" />\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder\">\r\n <h3>{{ selectedVM?.name }}</h3>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!----------------------------------[FIXTURE LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"fixture-level\" *ngIf=\"fixtureTemplateDetails?.productResolutionLevel === 'L1'\">\r\n <div id=\"brand-category\" class=\"brand-category\"\r\n *ngIf=\"fixtureTemplateDetails?.productBrandName?.length\" [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\">\r\n <ng-container *ngFor=\"let b of fixtureTemplateDetails?.productBrandName; let last = last\">\r\n <span class=\"badge draft me-1\">\r\n {{ b }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n <span class=\"category\" *ngIf=\"fixtureTemplateDetails?.productCategory?.length\">\r\n <ng-container *ngFor=\"let c of fixtureTemplateDetails?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span class=\"badge mt-1\">\r\n Capacity {{fixtureTemplateDetails?.fixtureCapacity }}\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container\r\n *ngFor=\"let c of fixtureTemplateDetails?.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"fixtureTemplateDetails?.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container\r\n *ngFor=\"let c of fixtureTemplateDetails?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <!-----------------------------------[SECTION LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"section-level\" *ngIf=\"fixtureTemplateDetails?.productResolutionLevel === 'L3'\">\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\" [ngbTooltip]=\"brandCategoryTooltip\"\r\n (click)=\"openZoneLevelProductModal(item,'section')\"\r\n [class.proper]=\"!item?.section?.improper\">\r\n <div class=\"d-flex gap-1\">\r\n <span class=\"badge inactive\">\r\n {{ item.zone }}\r\n </span>\r\n <span class=\"badge inactive\">\r\n Capacity {{ item?.section?.capacity }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex gap-1 mb-1\">\r\n <span class=\"badge\" *ngIf=\"item.section.missing > 0\">\r\n Missing {{item.section.missing}}\r\n </span>\r\n <span class=\"badge\" *ngIf=\"item.section.misplaced > 0\">\r\n Misplaced {{item.section.misplaced}}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <div [id]=\"'sumShelfContainer' + i\"\r\n *ngFor=\"let item of fixtureTemplateDetails?.shelfConfig; let i = index\">\r\n <!--------------------------------[SHELF LEVEL - BRAND CATEGORY]---------------------------------------->\r\n <div id=\"shelf-level\" *ngIf=\"fixtureTemplateDetails?.productResolutionLevel === 'L2'\">\r\n <div [id]=\"'brand-category' + i\" class=\"brand-category\" *ngIf=\"item.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\" *ngIf=\"item.productBrandName?.length\">\r\n <ng-container *ngFor=\"let b of item.productBrandName; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"item.productCategory?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item.productCategory?.length\">\r\n <ng-container *ngFor=\"let b of item.productCategory; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of item.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"item.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of item.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <span class=\"badge inactive\">\r\n Capacity {{item?.productPerShelf }}\r\n </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n @if(item.shelfType ==='shelf'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block shelf\">\r\n @if(item.products.length){\r\n <div *ngFor=\"let product of item.products;let p = index\" class=\"product cursor-pointer\"\r\n [class.error]=\"product.status === 'missing' || product.status === 'misplaced'\"\r\n (click)=\"openZoneLevelProductModalByProduct(product,item)\">\r\n @if(product.status != 'missing'){\r\n <img *ngIf=\"product?.productImageUrl; else placeholder\"\r\n [src]=\"product?.productImageUrl\" alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <div></div>\r\n </ng-template>\r\n }\r\n </div>\r\n }@else {\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n }\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block\">\r\n @if(item.products.length){\r\n <div *ngFor=\"let row of item.distributedRows;let r = index\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of row;let p = index\" class=\"product cursor-pointer\"\r\n [class.error]=\"product.status === 'missing' || product.status === 'misplaced'\"\r\n (click)=\"openZoneLevelProductModalByProduct(product,item)\">\r\n @if(product.status != 'missing'){\r\n <img *ngIf=\"product?.productImageUrl; else placeholder\"\r\n [src]=\"product?.productImageUrl\" alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <div></div>\r\n </ng-template>\r\n }\r\n </div>\r\n </div>\r\n }@else{\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\">\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div id=\"footer-block\" class=\"footer-block\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureTemplateDetails?.footer?.label }}</p>\r\n </div>\r\n\r\n <div id=\"storage-box-zone\" *ngIf=\"fixtureTemplateDetails?.storageProducts?.length\" class=\"storage-box\"\r\n (click)=\"openStoreBoxProducts()\" [ngbTooltip]=\"brandCategoryTooltip\">\r\n\r\n <span class=\"badge inactive\">\r\n Capacity {{ fixtureTemplateDetails?.storageProducts?.length ?? 0}}\r\n </span>\r\n\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\">\r\n @for(p of fixtureTemplateDetails?.storageProducts; track $index; let last = $last){\r\n {{p.brandName}}\r\n }\r\n </span>\r\n <span class=\"category\">\r\n @for(p of fixtureTemplateDetails?.storageProducts; track $index; let last = $last){\r\n {{p.category}}\r\n }\r\n </span>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <!-- Brands -->\r\n <p>\r\n <b>Brands: </b>\r\n\r\n @for (\r\n b of fixtureTemplateDetails?.storageProducts?.slice(0, 20);\r\n track $index;\r\n let last = $last\r\n ) {\r\n {{ b?.brandName }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n\r\n @if ((fixtureTemplateDetails?.storageProducts?.length ?? 0) > 20) {\r\n , +{{ (fixtureTemplateDetails?.storageProducts.length - 20) }}\r\n }\r\n </p>\r\n\r\n <!-- Categories -->\r\n <p>\r\n <b>Categories: </b>\r\n\r\n @for (\r\n b of fixtureTemplateDetails?.storageProducts?.slice(0, 20);\r\n track $index;\r\n let last = $last\r\n ) {\r\n {{ b?.category }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n\r\n @if ((fixtureTemplateDetails?.storageProducts?.length ?? 0) > 20) {\r\n , +{{ (fixtureTemplateDetails?.storageProducts.length - 20) }}\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"w-25\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"engagersList?.['Top Engaged']?.length\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Top Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of topEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : '{{imgCDN}}fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('Top Engaged')\">View all</a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"w-25\" *ngIf=\"engagersList?.['Non Engaged']?.length\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Least/Non Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of leastEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : '{{imgCDN}}fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top.Brandname}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('least_Non_Engaged')\">View all</a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n\r\n<section id=\"template-summary-skeleton\" *ngIf=\"isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div 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</section>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .block{border:1px solid #98a2b3;padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin: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}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox 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}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}#fixture-analytic-details ::ng-deep .wall-viewport{margin-bottom:0!important}#fixture-analytic-details #vm-products-sum .wall-viewport{align-items:self-start;margin-bottom:0!important}#fixture-analytic-details #vm-products-sum .body-block{position:relative;width:fit-content}#fixture-analytic-details #vm-products-sum .body-block .block{border:none}#fixture-analytic-details #vm-products-sum .product{height:30px;border-radius:4px;border:.52px solid #12b76a;box-shadow:0 .52px 1.04px #1018280d}#fixture-analytic-details #vm-products-sum .product img{object-fit:cover;border-radius:4px}#fixture-analytic-details #vm-products-sum .product.error{border:.52px solid #f04438;background-color:#fef3f2}#fixture-analytic-details #vm-products-sum #fixture-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1.12px solid var(--Primary-200, #f04438);background:var(--White, #fff);top:50%;left:59%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-analytic-details #vm-products-sum #fixture-level .brand,#fixture-analytic-details #vm-products-sum #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-analytic-details #vm-products-sum #fixture-level .category{margin-top:12px}#fixture-analytic-details #vm-products-sum #section-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1.12px solid var(--Primary-200, #f04438);transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-analytic-details #vm-products-sum #section-level .brand,#fixture-analytic-details #vm-products-sum #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #section-level .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-analytic-details #vm-products-sum #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-analytic-details #vm-products-sum #shelf-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:8px 4px;border-radius:8px;border:1.12px solid var(--Primary-200, #f04438);transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-analytic-details #vm-products-sum #shelf-level .brand,#fixture-analytic-details #vm-products-sum #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum .brand-category.proper{border:1.12px solid var(--Primary-200, #32d583)!important}#fixture-analytic-details #vm-products-sum .brand-category .badge{color:#f04438;background-color:#fef3f2}#fixture-analytic-details #vm-products-sum .brand-category .badge.proper{color:#12b76a!important;background-color:#ecfdf3!important}#fixture-analytic-details #vm-products-sum .header-block{width:fit-content}#fixture-analytic-details #vm-products-sum .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important;width:fit-content}#fixture-analytic-details #vm-products-sum .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-analytic-details #vm-products-sum .storage-box{position:relative;bottom:70px;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1px solid rgb(152,162,179);transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-analytic-details #vm-products-sum .storage-box .brand,#fixture-analytic-details #vm-products-sum .storage-box .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum .storage-box .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum .storage-box .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum .storage-box .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum .sub-footer{position:relative;width:48%}#fixture-analytic-details #vm-products-sum img{width:100%;height:100%;display:block}#fixture-analytic-details #vm-products-sum .vm-block{position:absolute;width:100px;height:100px;transition:all .3s ease}#fixture-analytic-details #vm-products-sum .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-analytic-details #vm-products-sum .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}#fixture-analytic-details .hero-block{background-color:#f9fafb;width:100%;display:flex;flex-direction:column;gap:6px;padding:12px;justify-content:center;align-items:center;margin-bottom:18px}#fixture-analytic-details .hero-block h1{font-size:18px;font-weight:600;color:#101828;margin:0}#fixture-analytic-details .hero-block p{font-weight:500;font-size:16px;line-height:24px;color:#475467;margin:0}.metric-header{background-color:#eaf8ff;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}.w-20{width:33%}.card-body img{width:38px;height:38px;object-fit:cover}.w-25{width:50%!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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"] }] });
|
|
43571
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FixtureAnalyticsComponent, selector: "lib-fixture-analytics", inputs: { fixtureDetails: "fixtureDetails", vmList: "vmList", floorData: "floorData", startDate: "startDate", endDate: "endDate", dataType: "dataType" }, outputs: { onClose: "onClose", changeFixture: "changeFixture" }, usesOnChanges: true, ngImport: i0, template: "<section id=\"fixture-analytic-details\" *ngIf=\"!isPageLoading\">\r\n <div class=\"d-flex p-2 w-100 justify-content-end align-items-center\">\r\n <svg (click)=\"onClickClose()\" class=\"m-2 cursor-pointer\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n </div>\r\n <div class=\"hero-block\">\r\n <h1 style=\"font-weight: 600;font-size: 30px;\">{{ fixtureTemplateDetails?.fixtureCompliance ?? 0 }}%</h1>\r\n <p>Compliance score</p>\r\n <p>\r\n {{ fixtureTemplateDetails?.header?.label }}<span>•</span>\r\n {{fixtureTemplateDetails?.fixtureCategory}} <span>•</span>\r\n {{fixtureTemplateDetails?.fixtureWidth.value}}{{fixtureTemplateDetails?.fixtureWidth.unit}}<span>•</span>\r\n {{fixtureTemplateDetails?.shelfConfig?.length}} Shelves\r\n </p>\r\n </div>\r\n <div class=\"d-flex justify-content-end mb-4 pe-5\">\r\n <div class=\"form-check form-switch \">\r\n <input [checked]=\"showVMs\" [(ngModel)]=\"showVMs\" [ngModelOptions]=\"{ standalone: true }\"\r\n style=\"cursor: pointer\" class=\"form-check-input\" type=\"checkbox\" />\r\n <label style=\"color: black; white-space: nowrap\" class=\"form-check-label sub ms-2\" for=\"showVMs\">\r\n Show VM\r\n </label>\r\n </div>\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Total Footfall</span>\r\n </div>\r\n \r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.zoneTotal?.PreviousData}}</h2>\r\n \r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"fixtureFootfall?.zoneTotal?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!fixtureFootfall?.zoneTotal?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"fixtureFootfall?.zoneTotal?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.zoneTotal?.count}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Zone Conversion</span>\r\n </div>\r\n \r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.conversionCount?.PreviousData}}</h2>\r\n \r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"fixtureFootfall?.conversionCount?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!fixtureFootfall?.conversionCount?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"fixtureFootfall?.conversionCount?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.conversionCount?.count}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"fixtureFootfall?.conversionCount\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Dwell Time</span>\r\n </div>\r\n \r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{fixtureFootfall?.dwellTime?.PreviousData}}</h2>\r\n \r\n <div class=\"d-flex align-items-centergap-1 small\" [ngClass]=\"fixtureFootfall?.dwellTime?.PreviousVariation ? 'text-success' : 'text-danger'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!fixtureFootfall?.dwellTime?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"fixtureFootfall?.dwellTime?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{fixtureFootfall?.dwellTime?.count}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div id=\"vm-products-sum\" class=\"wall-viewport mt-8\">\r\n <div class=\"fixture-wrapper\">\r\n <!-- Header block -->\r\n <div id=\"header-block\" class=\"header-block\">\r\n <p>{{ fixtureTemplateDetails?.header?.label }}</p>\r\n </div>\r\n\r\n <!-- Body block -->\r\n <div id=\"body-block-sum\" class=\"body-block\">\r\n <!----------------------------------[VM BLOCK]--------------------------------------->\r\n <div *ngIf=\"fixtureTemplateDetails?.vmConfig?.length\" [ngClass]=\"{'d-none':!showVMs}\">\r\n <ng-container *ngFor=\"let vm of fixtureTemplateDetails?.vmConfig; let i = index\">\r\n <div [id]=\"'vm' + i\" class=\"vm-block\">\r\n <ng-container *ngIf=\"getSelectedVM(vm) as selectedVM\">\r\n <img *ngIf=\"selectedVM?.imgUrl; else placeholder\" [src]=\"selectedVM?.imgUrl\"\r\n alt=\"Vm Image\" />\r\n <ng-template #placeholder>\r\n <div class=\"vm-placeholder\">\r\n <h3>{{ selectedVM?.name }}</h3>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!----------------------------------[FIXTURE LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"fixture-level\" *ngIf=\"fixtureTemplateDetails?.productResolutionLevel === 'L1'\">\r\n <div id=\"brand-category\" class=\"brand-category\"\r\n *ngIf=\"fixtureTemplateDetails?.productBrandName?.length\" [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\">\r\n <ng-container *ngFor=\"let b of fixtureTemplateDetails?.productBrandName; let last = last\">\r\n <span class=\"badge draft me-1\">\r\n {{ b }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n <span class=\"category\" *ngIf=\"fixtureTemplateDetails?.productCategory?.length\">\r\n <ng-container *ngFor=\"let c of fixtureTemplateDetails?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span class=\"badge mt-1\">\r\n Capacity {{fixtureTemplateDetails?.fixtureCapacity }}\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container\r\n *ngFor=\"let c of fixtureTemplateDetails?.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"fixtureTemplateDetails?.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container\r\n *ngFor=\"let c of fixtureTemplateDetails?.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <!-----------------------------------[SECTION LEVEL - BRAND CATEGORY]-------------------------------------->\r\n <div id=\"section-level\" *ngIf=\"fixtureTemplateDetails?.productResolutionLevel === 'L3'\">\r\n @for (item of sectionByZones; track $index) {\r\n <div [id]=\"'brand-category' + $index\" class=\"brand-category\" [ngbTooltip]=\"brandCategoryTooltip\"\r\n (click)=\"openZoneLevelProductModal(item,'section')\"\r\n [class.proper]=\"!item?.section?.improper\">\r\n <div class=\"d-flex gap-1\">\r\n <span class=\"badge inactive\">\r\n {{ item.zone }}\r\n </span>\r\n <span class=\"badge inactive\">\r\n Capacity {{ item?.section?.capacity }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\" *ngIf=\"item?.section?.brands?.length\">\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n <span *ngIf=\"item?.section?.categories?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item?.section?.categories?.length\">\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </span>\r\n </div>\r\n\r\n <div class=\"d-flex gap-1 mb-1\">\r\n <span class=\"badge\" *ngIf=\"item.section.missing > 0\">\r\n Missing {{item.section.missing}}\r\n </span>\r\n <span class=\"badge\" *ngIf=\"item.section.misplaced > 0\">\r\n Misplaced {{item.section.misplaced}}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n @for (b of item?.section?.brands;track $index; let last = $last) {\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n <p *ngIf=\"item?.section?.categories?.length\">\r\n <b>Categories: </b>\r\n @for (c of item?.section?.categories;track $index; let last = $last) {\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n }\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n <div [id]=\"'sumShelfContainer' + i\"\r\n *ngFor=\"let item of fixtureTemplateDetails?.shelfConfig; let i = index\">\r\n <!--------------------------------[SHELF LEVEL - BRAND CATEGORY]---------------------------------------->\r\n <div id=\"shelf-level\" *ngIf=\"fixtureTemplateDetails?.productResolutionLevel === 'L2'\">\r\n <div [id]=\"'brand-category' + i\" class=\"brand-category\" *ngIf=\"item.productBrandName?.length\"\r\n [ngbTooltip]=\"brandCategoryTooltip\">\r\n <span class=\"brand\" *ngIf=\"item.productBrandName?.length\">\r\n <ng-container *ngFor=\"let b of item.productBrandName; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n <span *ngIf=\"item.productCategory?.length\" class=\"separator\"> - </span>\r\n <span class=\"category\" *ngIf=\"item.productCategory?.length\">\r\n <ng-container *ngFor=\"let b of item.productCategory; let last = last\">\r\n {{ b }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <p>\r\n <b>Brands: </b>\r\n <ng-container *ngFor=\"let c of item.productBrandName; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <p *ngIf=\"item.productCategory?.length\">\r\n <b>Categories: </b>\r\n <ng-container *ngFor=\"let c of item.productCategory; let last = last\">\r\n {{ c }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n </ng-container>\r\n </p>\r\n <span class=\"badge inactive\">\r\n Capacity {{item?.productPerShelf }}\r\n </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!------------------------------------------------------------------------->\r\n\r\n @if(item.shelfType ==='shelf'){\r\n <div [id]=\"item.shelfType + (i + 1)\" class=\"block shelf\">\r\n @if(item.products.length){\r\n <div *ngFor=\"let product of item.products;let p = index\" class=\"product cursor-pointer\"\r\n [class.error]=\"product.status === 'missing' || product.status === 'misplaced'\"\r\n (click)=\"openZoneLevelProductModalByProduct(product,item)\">\r\n @if(product.status != 'missing'){\r\n <img *ngIf=\"product?.productImageUrl; else placeholder\"\r\n [src]=\"product?.productImageUrl\" alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <div></div>\r\n </ng-template>\r\n }\r\n </div>\r\n }@else {\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\"></div>\r\n }\r\n </div>\r\n }@else {\r\n <div [id]=\"item.shelfType! + (i + 1)\" class=\"block\">\r\n @if(item.products.length){\r\n <div *ngFor=\"let row of item.distributedRows;let r = index\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of row;let p = index\" class=\"product cursor-pointer\"\r\n [class.error]=\"product.status === 'missing' || product.status === 'misplaced'\"\r\n (click)=\"openZoneLevelProductModalByProduct(product,item)\">\r\n @if(product.status != 'missing'){\r\n <img *ngIf=\"product?.productImageUrl; else placeholder\"\r\n [src]=\"product?.productImageUrl\" alt=\"Product Image\" />\r\n <ng-template #placeholder>\r\n <div></div>\r\n </ng-template>\r\n }\r\n </div>\r\n </div>\r\n }@else{\r\n <div *ngFor=\"let product of [].constructor(item.trayRows)\" class=\"tray mb-3\">\r\n <div *ngFor=\"let product of [].constructor(item.productPerShelf)\" class=\"product\">\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Footer block -->\r\n <div id=\"footer-block\" class=\"footer-block\">\r\n <div class=\"sub-footer left-box\"></div>\r\n <div class=\"sub-footer right-box\"></div>\r\n <p>{{ fixtureTemplateDetails?.footer?.label }}</p>\r\n </div>\r\n\r\n <div id=\"storage-box-zone\" *ngIf=\"fixtureTemplateDetails?.storageProducts?.length\" class=\"storage-box\"\r\n (click)=\"openStoreBoxProducts()\" [ngbTooltip]=\"brandCategoryTooltip\">\r\n\r\n <span class=\"badge inactive\">\r\n Capacity {{ fixtureTemplateDetails?.storageProducts?.length ?? 0}}\r\n </span>\r\n\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <span class=\"brand\">\r\n @for(p of fixtureTemplateDetails?.storageProducts; track $index; let last = $last){\r\n {{p.brandName}}\r\n }\r\n </span>\r\n <span class=\"category\">\r\n @for(p of fixtureTemplateDetails?.storageProducts; track $index; let last = $last){\r\n {{p.category}}\r\n }\r\n </span>\r\n </div>\r\n\r\n <ng-template #brandCategoryTooltip>\r\n <div>\r\n <!-- Brands -->\r\n <p>\r\n <b>Brands: </b>\r\n\r\n @for (\r\n b of fixtureTemplateDetails?.storageProducts?.slice(0, 20);\r\n track $index;\r\n let last = $last\r\n ) {\r\n {{ b?.brandName }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n\r\n @if ((fixtureTemplateDetails?.storageProducts?.length ?? 0) > 20) {\r\n , +{{ (fixtureTemplateDetails?.storageProducts.length - 20) }}\r\n }\r\n </p>\r\n\r\n <!-- Categories -->\r\n <p>\r\n <b>Categories: </b>\r\n\r\n @for (\r\n b of fixtureTemplateDetails?.storageProducts?.slice(0, 20);\r\n track $index;\r\n let last = $last\r\n ) {\r\n {{ b?.category }}\r\n <ng-container *ngIf=\"!last\">, </ng-container>\r\n }\r\n\r\n @if ((fixtureTemplateDetails?.storageProducts?.length ?? 0) > 20) {\r\n , +{{ (fixtureTemplateDetails?.storageProducts.length - 20) }}\r\n }\r\n </p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"w-25\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\" *ngIf=\"engagersList?.['Top Engaged']?.length\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Top Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of topEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : '{{imgCDN}}fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('Top Engaged')\">View all</a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"w-25\" *ngIf=\"engagersList?.['Non Engaged']?.length\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Least/Non Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of leastEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : '{{imgCDN}}fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top.Brandname}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('least_Non_Engaged')\">View all</a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n\r\n<section id=\"template-summary-skeleton\" *ngIf=\"isPageLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div 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</section>", styles: [".header{background:#fff;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.btn{padding:.775rem 1.5rem!important;font-size:1.1rem!important}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;padding:2px 8px;border-radius:16px}.badge.inactive{background:#f2f4f7!important;color:#344054!important}.builder{height:75vh}.builder .cols{background:#fff;border-radius:12px;padding:24px 24px 12px;max-height:75vh;overflow-y:auto}.shelf-container{border-radius:8px;background:var(--Gray-50, #f9fafb);padding:8px 16px;margin-bottom:12px}.counter-container{display:flex;align-items:center;justify-content:center;border-radius:8px;background-color:#fff;padding:10px;border:.49px solid #d0d5dd}.counter-container span{margin:0 18px;font-weight:500;font-size:14px;text-align:center;vertical-align:middle;width:18px}.disable-counter{color:var(--bs-gray-500)!important;background-color:var(--bs-gray-200)!important;border-color:var(--bs-gray-300)!important;pointer-events:none;opacity:1}.disabled-click{pointer-events:none;opacity:.85}.wall-viewport{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px;width:345px;text-align:center}.wall-viewport .wrapper{width:100%;max-width:345px}.wall-viewport .header-info,.wall-viewport .footer-info,.wall-viewport .body-info{width:100%;border:2px solid #f2f4f7;border-bottom:4px solid #ffffff;background:#f2f4f7;max-width:230px;display:flex;align-items:center;justify-content:center;justify-content:start;padding:12px;gap:4px}.wall-viewport .header-info p,.wall-viewport .footer-info p,.wall-viewport .body-info p{margin:0}.wall-viewport .header-info{margin-top:40px}.wall-viewport .sub-footer{border:1px solid #98a2b3;height:100%}.wall-viewport .header-block,.wall-viewport .footer-block{border:1px solid #98a2b3;height:95px;padding:8px;background-color:#f2f4f7;width:100%;display:flex;justify-content:center;align-items:center}.wall-viewport .header-block p,.wall-viewport .footer-block p{color:var(--Gray-600, #475467);font-size:18px;font-weight:600;white-space:normal;word-wrap:break-word;margin:0;background-color:#f2f4f7}.wall-viewport .body-block{width:100%}.wall-viewport .body-block .block{border:1px solid #98a2b3;padding:10px;width:100%;max-width:345px;overflow-x:auto;min-height:52px}.wall-viewport .body-block .tray,.wall-viewport .body-block .shelf{display:flex;gap:4px}.wall-viewport .body-block .tray .product,.wall-viewport .body-block .shelf .product{border:1px solid rgba(152,162,179,.2901960784);min-width:50px}.wall-viewport .body-block .tray .product{min-height:20px}.wall-viewport .body-block .shelf .product{min-height:30px}.wall-viewport .body-block .hide-product{border-color:transparent!important}.wall-viewport .body-block .hide-scroll{overflow-x:hidden!important}.horizontal-dimension{display:flex;align-items:center;justify-content:center;height:30px;position:relative}.horizontal-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.horizontal-dimension .arrow.left{transform:rotate(180deg);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .arrow.right{transform:rotate(0);background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.horizontal-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;height:1px}.horizontal-dimension .line span{position:absolute;top:-12px;color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:0 4px}.vertical-dimension{display:flex;flex-direction:column;align-items:center;width:30px;position:relative}.vertical-dimension .arrow{width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}.vertical-dimension .arrow.up{transform:rotate(-90deg);margin-top:20px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .arrow.down{transform:rotate(90deg);margin-bottom:26px;background-image:url(\"data:image/svg+xml,%3Csvg fill='%23EAECF0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z'/%3E%3C/svg%3E\")}.vertical-dimension .line{flex:1;background-color:#eaecf0;position:relative;display:flex;align-items:center;justify-content:center;width:1px}.vertical-dimension .line span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#667085;font-weight:500;font-size:14px;background-color:#fff;padding:2px 4px}.info-card{padding:12px;background:#fff;border:1px solid #d0d5dd;border-radius:8px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.info-card h3{font-weight:600;font-size:18px;line-height:28px;vertical-align:middle}.info-card p{font-weight:500;font-size:14px;line-height:20px;color:#667085;margin:0}.checkbox input[type=checkbox]{width:16px!important;height:16px!important;margin: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}.checkbox input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00a3ff)!important;background-color:var(--primary-50, #eaf8ff)}.checkbox 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}.nav-pills{display:inline-flex;gap:4px}.nav-pills .nav-item .nav-link{border-radius:0;color:#667085;font-size:14px;font-weight:500;padding:8px 16px;border:none}.nav-pills .nav-item .nav-link:hover{background-color:#00000005}.nav-pills .nav-item .nav-link.active{background-color:#eaf8ff;color:#009bf3;border-bottom:3px solid #009bf3}.content-wrapper{background:#fff;border-radius:12px;min-height:calc(100vh - 400px);height:100%;padding:16px 24px;display:flex;flex-direction:column}.loader .shimmer{height:150px}.filter-tab{border:1px solid rgb(234,236,240);background:#fff;box-shadow:0 1px 2px #1018280d;border-radius:8px;padding:18px;transition:all ease .2s}.filter-tab:hover{cursor:pointer}.filter-tab.selected{background:#f6fcff;border:1px solid rgb(107,202,255);box-shadow:0 1px 2px #1018280d}.filter-tab h3{color:#000;font-size:20px;font-weight:600;line-height:30px;margin:0}.filter-tab p{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px;margin:0}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext[_ngcontent-ng-c2141490359]{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-responsive{min-height:calc(100vh - 495px)}.download-link{color:var(--Primary-800, #008edf);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;cursor:pointer}h3.card-title{color:#101828;font-size:18px;font-weight:600;line-height:28px}p.card-tagline{color:#101828;font-size:14px;font-weight:500;line-height:20px}p.card-description{color:#344054;font-size:14px;font-weight:400;line-height:20px}#list-view .thumbnail{height:40px;width:40px;background:#f2f4f7;margin-right:12px;border-radius:8px}#list-view td{vertical-align:middle}#grid-view .card{box-shadow:0 4px 10px #0000000d;border:1px solid rgb(223,225,231);background:#fff;border-radius:12px;padding:12px;height:100%;transition:all .2s ease}#grid-view .card:hover{cursor:pointer;box-shadow:0 10px 10px #0001;transition:all .2s ease}#grid-view .card-img{margin-bottom:12px;background:#d0d5dd;height:200px;border-radius:6px}#grid-view .card-action{position:absolute;top:20px;right:20px}#grid-view .card-tagline{color:#475467;font-weight:500;font-size:14px;line-height:20px}.badge{font-weight:500;font-size:12px;line-height:18px;text-align:center;color:#027a48;background:#ecfdf3}.badge.active{color:#027a48;background:#ecfdf3}.badge.inactive{background:#f2f4f7;color:#344054}.badge.draft{color:#009bf3;background:#eaf8ff}.badge.cluster{background:#f2f4f7;color:#344054}.badge.published{background:#ecfdf3;color:#027a48}.badge.yet-to-publish{background:#f8f9fc;color:#363f72}.indicator{border-radius:16px;padding:2px 8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;width:fit-content;text-align:center;font-size:14px;font-weight:500}.indicator.short{height:14px!important;width:14px!important;border-radius:50%!important;padding:0!important}.indicator.yetToComplete{background:#f2f4f7;color:#667085}.indicator.yetToComplete path{fill:#667085}.indicator.yetToAssign{background:#eaecf5;color:#344054}.indicator.yetToAssign path{fill:#344054}.indicator.taskAssigned{background:#e0eaff;color:#7a5af8}.indicator.taskAssigned path{fill:#7a5af8}.indicator.reviewPending{background:#fef0c7;color:#f79009}.indicator.reviewPending path{fill:#f79009}.indicator.flagged{background:var(--Error-50, #fef3f2);color:var(--Error-700, #b42318)}.indicator.completed{background:#d1fadf;color:#12b76a}.indicator.completed path{fill:#12b76a}.toggle-button{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:8px;background:#fff;border:.89px solid rgb(208,213,221);box-shadow:0 .89px 1.78px #1018280d;transition:all ease .3s}.toggle-button:hover{cursor:pointer}.toggle-button.selected{transition:all ease .3s;background:#eaf8ff;box-shadow:0 0 0 3.56px #d5effe!important;border:.89px solid rgb(234,248,255)}.disabled-click{pointer-events:none;cursor:not-allowed!important;opacity:.6}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888;display:flex;align-items:center;height:1.5rem}.clear-search{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;height:1.5rem;width:1.5rem}#fixture-analytic-details ::ng-deep .wall-viewport{margin-bottom:0!important}#fixture-analytic-details #vm-products-sum .wall-viewport{align-items:self-start;margin-bottom:0!important}#fixture-analytic-details #vm-products-sum .body-block{position:relative;width:fit-content}#fixture-analytic-details #vm-products-sum .body-block .block{border:none}#fixture-analytic-details #vm-products-sum .product{height:30px;border-radius:4px;border:.52px solid #12b76a;box-shadow:0 .52px 1.04px #1018280d}#fixture-analytic-details #vm-products-sum .product img{object-fit:cover;border-radius:4px}#fixture-analytic-details #vm-products-sum .product.error{border:.52px solid #f04438;background-color:#fef3f2}#fixture-analytic-details #vm-products-sum #fixture-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1.12px solid var(--Primary-200, #f04438);background:var(--White, #fff);top:50%;left:59%;transform:translate(100%,-50%);transition:all .3s ease;cursor:pointer}#fixture-analytic-details #vm-products-sum #fixture-level .brand,#fixture-analytic-details #vm-products-sum #fixture-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}#fixture-analytic-details #vm-products-sum #fixture-level .category{margin-top:12px}#fixture-analytic-details #vm-products-sum #section-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1.12px solid var(--Primary-200, #f04438);transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-analytic-details #vm-products-sum #section-level .brand,#fixture-analytic-details #vm-products-sum #section-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum #section-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #section-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #section-level .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum #section-level #body-loader{height:100%;width:100%;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;background:#fff3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(10px)}#fixture-analytic-details #vm-products-sum #section-level #body-loader .loader{width:30px;height:30px;border:4px solid #f3f3f3;border-top:4px solid #00a3ff;border-radius:50%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#fixture-analytic-details #vm-products-sum #shelf-level .brand-category{position:absolute;width:200px;overflow:hidden;padding:8px 4px;border-radius:8px;border:1.12px solid var(--Primary-200, #f04438);transition:all .3s ease;display:flex;justify-content:center;cursor:pointer}#fixture-analytic-details #vm-products-sum #shelf-level .brand,#fixture-analytic-details #vm-products-sum #shelf-level .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum #shelf-level .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #shelf-level .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum #shelf-level .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum .brand-category.proper{border:1.12px solid var(--Primary-200, #32d583)!important}#fixture-analytic-details #vm-products-sum .brand-category .badge{color:#f04438;background-color:#fef3f2}#fixture-analytic-details #vm-products-sum .brand-category .badge.proper{color:#12b76a!important;background-color:#ecfdf3!important}#fixture-analytic-details #vm-products-sum .header-block{width:fit-content}#fixture-analytic-details #vm-products-sum .footer-block{position:relative;box-sizing:border-box;justify-content:space-between!important;width:fit-content}#fixture-analytic-details #vm-products-sum .footer-block p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f2f4f7;z-index:1}#fixture-analytic-details #vm-products-sum .storage-box{position:relative;bottom:70px;width:200px;overflow:hidden;padding:4px;border-radius:8px;border:1px solid rgb(152,162,179);transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#fixture-analytic-details #vm-products-sum .storage-box .brand,#fixture-analytic-details #vm-products-sum .storage-box .category{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;max-width:fit-content;width:100%}#fixture-analytic-details #vm-products-sum .storage-box .brand{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum .storage-box .category{color:var(--Gray-800, #1d2939);font-size:12px;font-style:normal;font-weight:600;line-height:18px;margin:0}#fixture-analytic-details #vm-products-sum .storage-box .separator{margin:0 4px;font-weight:600}#fixture-analytic-details #vm-products-sum .sub-footer{position:relative;width:48%}#fixture-analytic-details #vm-products-sum img{width:100%;height:100%;display:block}#fixture-analytic-details #vm-products-sum .vm-block{position:absolute;width:100px;height:100px;transition:all .3s ease}#fixture-analytic-details #vm-products-sum .vm-block h3{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;margin:0;width:100%;text-overflow:ellipsis;overflow:hidden}#fixture-analytic-details #vm-products-sum .vm-placeholder{border:4px solid var(--Black, #101828);background:#f9fafb;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;white-space:nowrap;overflow:hidden}#fixture-analytic-details .hero-block{background-color:#f9fafb;width:100%;display:flex;flex-direction:column;gap:6px;padding:12px;justify-content:center;align-items:center;margin-bottom:18px}#fixture-analytic-details .hero-block h1{font-size:18px;font-weight:600;color:#101828;margin:0}#fixture-analytic-details .hero-block p{font-weight:500;font-size:16px;line-height:24px;color:#475467;margin:0}.metric-header{background-color:#eaf8ff;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}.w-20{width:33%}.card-body img{width:38px;height:38px;object-fit:cover}.w-25{width:50%!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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"] }] });
|
|
43570
43572
|
}
|
|
43571
43573
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FixtureAnalyticsComponent, decorators: [{
|
|
43572
43574
|
type: Component,
|
|
@@ -43581,6 +43583,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
43581
43583
|
type: Input
|
|
43582
43584
|
}], endDate: [{
|
|
43583
43585
|
type: Input
|
|
43586
|
+
}], dataType: [{
|
|
43587
|
+
type: Input
|
|
43584
43588
|
}], onClose: [{
|
|
43585
43589
|
type: Output
|
|
43586
43590
|
}], changeFixture: [{
|
|
@@ -43621,6 +43625,7 @@ class PlanoAnalyticsComponent {
|
|
|
43621
43625
|
isPageLoading = false;
|
|
43622
43626
|
selectedFixture;
|
|
43623
43627
|
selectedFixtureData;
|
|
43628
|
+
dataType = 'daily';
|
|
43624
43629
|
activeHighlight = null;
|
|
43625
43630
|
cancelHighlightBlink = false;
|
|
43626
43631
|
destroy$ = new Subject();
|
|
@@ -43649,7 +43654,7 @@ class PlanoAnalyticsComponent {
|
|
|
43649
43654
|
storeId: [this.floorData?.storeId],
|
|
43650
43655
|
clientId: "11",
|
|
43651
43656
|
valueType: "average",
|
|
43652
|
-
nob:
|
|
43657
|
+
nob: true,
|
|
43653
43658
|
featureConfigs: {
|
|
43654
43659
|
open: "00:00:00",
|
|
43655
43660
|
close: "23:59:59",
|
|
@@ -43657,6 +43662,7 @@ class PlanoAnalyticsComponent {
|
|
|
43657
43662
|
conversionCalculation: "footfall-count",
|
|
43658
43663
|
missedOpportunityCalculation: "engagers-conversion",
|
|
43659
43664
|
},
|
|
43665
|
+
dateType: this.dataType,
|
|
43660
43666
|
};
|
|
43661
43667
|
this.apiService
|
|
43662
43668
|
.getfootfallDetails(payload)
|
|
@@ -44830,11 +44836,11 @@ class PlanoAnalyticsComponent {
|
|
|
44830
44836
|
this.selectedFixture = null;
|
|
44831
44837
|
}
|
|
44832
44838
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoAnalyticsComponent, deps: [{ token: StoreBuilderService }, { token: i2$1.GlobalStateService }, { token: i5.TitleCasePipe }, { token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
|
|
44833
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PlanoAnalyticsComponent, selector: "lib-plano-analytics", inputs: { floorData: "floorData", vmList: "vmList" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["complianceBaseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["complianceCanvasContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section id=\"plano-analytics\">\r\n <div>\r\n <div class=\"d-flex flex-end\">\r\n <div class=\"me-5\">\r\n <lib-date-range-picker (dateChange)=\"datechange($event)\"></lib-date-range-picker>\r\n </div>\r\n <div>\r\n <button type=\"button\" class=\"btn-outline btn align-items-end text-nowrap invheader\" (click)=\"showCard=!showCard\">\r\n <!-- Export Icon -->\r\n @if(showCard) {\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=\"M3.33333 11.6667H8.33333M8.33333 11.6667V16.6667M8.33333 11.6667L2.5 17.5M16.6667 8.33333H11.6667M11.6667 8.33333V3.33333M11.6667 8.33333L17.5 2.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2\"></span> Hide Metrics\r\n }@else {\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=\"M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L11.6667 8.33333M7.5 17.5H2.5M2.5 17.5V12.5M2.5 17.5L8.33333 11.6667\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2\"></span> Show Metrics\r\n }\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"pageLoading\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-12\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"row g-3 mt-3\" *ngIf=\"!pageLoading && showCard\">\r\n <!-- Rank based on Footfall -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <!-- <div class=\"metric-card\"> -->\r\n <div class=\"metric-header bg-header\">\r\n Rank based on Footfall\r\n </div>\r\n <!-- </div> -->\r\n <!-- Row 1 - Premium Trending -->\r\n @if(topPerformingZoneList?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let zone of topItems();let i=index\">\r\n <div class=\"col-auto\">\r\n <div class=\"rank-badge\" [ngClass]=\"i == 0 ? 'rank-gold' : i== 1 ? 'rank-blue' : 'rank-purple'\">\r\n <span class=\"rank-hash\">#</span><span class=\"rank-num\">{{i + 1}}</span>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark\">{{zone?.zoneName}}</div>\r\n <div class=\"text-muted small d-flex align-items-center gap-1\">\r\n <span *ngFor=\"let product of zone?.zoneProduct;let i=index\">{{ i < 2 ? product : ''}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('footfall')\">View all</a>\r\n </div>\r\n }@else {\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>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Top Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Top Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n @if(engagersList?.['Top Engaged']?.length) {\r\n <!-- Row 1 -->\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of topEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('Top Engaged')\">View all</a>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Least Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Least Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n @if(engagersList?.['Least Engaged']?.length) {\r\n <!-- Row 1 -->\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of leastEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('Least Engaged')\">View all</a>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Non-Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header\">\r\n Non-Engaged\r\n </div>\r\n <!-- Row 1 -->\r\n @if(engagersList?.['Non Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of nonEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top.Brandname}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('Non Engaged')\">View all</a>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Footfall & Conversion Metrics -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n @if(cardData?.Footfall?.count) {\r\n <div class=\"card-body p-2\">\r\n <!-- Footfall Section -->\r\n <div class=\"mb-3\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Footfall</span>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33333 8H12.6667M12.6667 8L8 3.33333M12.6667 8L8 12.6667\" stroke=\"#101828\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">Conversion</span>\r\n </div>\r\n \r\n <div class=\"d-flex gap-3 mt-2\">\r\n <!-- Time period selector -->\r\n <!-- <div class=\"time-selector\">\r\n <div class=\"time-option\">1D</div>\r\n <div class=\"time-option\">1W</div>\r\n <div class=\"time-option active\">1M</div>\r\n </div> -->\r\n \r\n <!-- Metrics -->\r\n <div class=\"flex-fill\">\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h2 class=\"mb-0\">{{cardData?.Footfall?.count}}</h2>\r\n <h2 class=\"mb-0\">{{cardData?.Conversion?.count}}<span class=\"text-muted\">%</span></h2>\r\n </div>\r\n \r\n <div class=\"d-flex gap-2\">\r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"!cardData?.Footfall?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!cardData?.Footfall?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"cardData?.Footfall?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.Footfall?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Prev month</span>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"!cardData?.Conversion?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!cardData?.Conversion?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"cardData?.Conversion?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.Conversion?.PreviousData}}%</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Avg Dwell Time Section -->\r\n <div>\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Dwell time</span>\r\n </div>\r\n \r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{cardData?.avgDwell?.count}} <span class=\"text-muted fs-5\">mins</span></h2>\r\n \r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"!cardData?.avgDwell?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!cardData?.avgDwell?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"cardData?.avgDwell?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.avgDwell?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div id=\"body\" class=\"row\">\r\n <div class=\"col overflow-hidden position-relative compliance-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #complianceCanvasContainer>\r\n <canvas id=\"base-canvas\" #complianceBaseCanvas></canvas>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'d-none':!selectedFixture?.fixtureData}\" class=\"col bg-white rounded p-3 fixture-overview\">\r\n <lib-fixture-analytics [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n (changeFixture)=\"onChangeFixture($event)\" [vmList]=\"vmList\" [floorData]=\"floorData\" [startDate]=\"startDate\" [endDate]=\"endDate\"></lib-fixture-analytics>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden m-0\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>\r\n\r\n", styles: [".invheader{background-color:#fff}.w-20{width:20%}.card{border:1px solid #eaecf0;border-radius:8px;box-shadow:none}.card-header{background-color:#eaf7ff;border-bottom:none;font-weight:500;font-size:14px;color:#344054;padding:8px 16px;border-radius:6px}.bg-header{background:linear-gradient(90deg,#eaf7ff 0% 100%)}.card-body{padding:8px}.rank-badge{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;font-size:11.2px;font-weight:700}.rank-badge:before{content:\"\";position:absolute;width:29px;height:29px;border-radius:50%;z-index:1}.rank-badge span{position:relative;z-index:2}.rank-gold{background-color:#fef0c7;border:.35px solid #FEDF89}.rank-gold:before{background-color:#fffaeb;border:.35px solid #FEDF89}.rank-gold .rank-hash{color:#fdb022;font-weight:300}.rank-gold .rank-num{color:#b54708}.rank-blue{background-color:#6bcaff;border:.35px solid #6BCAFF}.rank-blue:before{background-color:#eaf8ff;border:.35px solid #6BCAFF}.rank-blue .rank-hash{color:#51c1ff;font-weight:300}.rank-blue .rank-num{color:#008edf}.rank-purple{background-color:#717bbc;border:.35px solid #717BBC}.rank-purple:before{background-color:#f8f9fc;border:.35px solid #AFB5D9}.rank-purple .rank-hash{color:#717bbc;font-weight:300}.rank-purple .rank-num{color:#363f72}.dot{width:2px;height:2px;background-color:#d0d5dd;border-radius:50%;display:inline-block}.text-dark{color:#344054!important}.text-muted{color:#667085!important}.fw-medium{font-weight:500}.fw-semibold{font-weight:600}.small{font-size:14px}.card-body img{width:38px;height:38px;object-fit:cover}.border-bottom{border-bottom:1px solid #eaecf0!important}a.text-primary{color:#009bf3!important;font-size:14px;font-weight:500}a.text-primary:hover{color:#0080cc!important}.metric-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px}.metric-header{background-color:#eaf8ff;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}.time-selector{display:flex;flex-direction:column;gap:6px}.time-option{font-size:12px;font-weight:500;color:#1d2939;padding:2px 4px;cursor:pointer;text-align:center;min-width:18px}.time-option.active{color:#008edf}h2{font-size:24px;font-weight:600;color:#1d2939;line-height:32px}.text-success{color:#039855!important}.text-danger{color:#f04438!important}@media (max-width: 768px){.card-header{font-size:13px;padding:6px 12px}h2{font-size:20px}.time-selector{flex-direction:row;gap:4px}}@media (max-width: 576px){.col-auto{min-width:50px}.rank-badge{width:30px;height:30px;font-size:10px}.rank-badge:before{width:24px;height:24px}}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .compliance{font-size:36px;font-weight:600}#header .last-check{font-size:16px;font-weight:500}#body{max-height:calc(100vh - 160px)}#body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#body .collapsed-col{transition:all .3s ease;width:0px!important}#body .fixture-overview{max-width:590px;max-height:calc(100vh - 160px);overflow:auto}#body .compliance-canvas{max-height:calc(100vh - 160px)}#plano-analytics .img-src{width:80px!important;height:80px!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateRangePickerComponent, selector: "lib-date-range-picker", inputs: ["value"], outputs: ["dateChange"] }, { kind: "component", type: FixtureAnalyticsComponent, selector: "lib-fixture-analytics", inputs: ["fixtureDetails", "vmList", "floorData", "startDate", "endDate"], outputs: ["onClose", "changeFixture"] }] });
|
|
44839
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PlanoAnalyticsComponent, selector: "lib-plano-analytics", inputs: { floorData: "floorData", vmList: "vmList" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [TitleCasePipe], viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["complianceBaseCanvas"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["complianceCanvasContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section id=\"plano-analytics\">\r\n <div>\r\n <div class=\"d-flex flex-end\">\r\n <div class=\"me-5\">\r\n <lib-date-range-picker (dateChange)=\"datechange($event)\"></lib-date-range-picker>\r\n </div>\r\n <div>\r\n <button type=\"button\" class=\"btn-outline btn align-items-end text-nowrap invheader\" (click)=\"showCard=!showCard\">\r\n <!-- Export Icon -->\r\n @if(showCard) {\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=\"M3.33333 11.6667H8.33333M8.33333 11.6667V16.6667M8.33333 11.6667L2.5 17.5M16.6667 8.33333H11.6667M11.6667 8.33333V3.33333M11.6667 8.33333L17.5 2.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2\"></span> Hide Metrics\r\n }@else {\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=\"M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L11.6667 8.33333M7.5 17.5H2.5M2.5 17.5V12.5M2.5 17.5L8.33333 11.6667\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2\"></span> Show Metrics\r\n }\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"pageLoading\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-12\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"row g-3 mt-3\" *ngIf=\"!pageLoading && showCard\">\r\n <!-- Rank based on Footfall -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <!-- <div class=\"metric-card\"> -->\r\n <div class=\"metric-header bg-header\">\r\n Rank based on Footfall\r\n </div>\r\n <!-- </div> -->\r\n <!-- Row 1 - Premium Trending -->\r\n @if(topPerformingZoneList?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let zone of topItems();let i=index\">\r\n <div class=\"col-auto\">\r\n <div class=\"rank-badge\" [ngClass]=\"i == 0 ? 'rank-gold' : i== 1 ? 'rank-blue' : 'rank-purple'\">\r\n <span class=\"rank-hash\">#</span><span class=\"rank-num\">{{i + 1}}</span>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark\">{{zone?.zoneName}}</div>\r\n <div class=\"text-muted small d-flex align-items-center gap-1\">\r\n <span *ngFor=\"let product of zone?.zoneProduct;let i=index\">{{ i < 2 ? product : ''}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('footfall')\">View all</a>\r\n </div>\r\n }@else {\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>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Top Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Top Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n @if(engagersList?.['Top Engaged']?.length) {\r\n <!-- Row 1 -->\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of topEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('Top Engaged')\">View all</a>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Least Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Least Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n @if(engagersList?.['Least Engaged']?.length) {\r\n <!-- Row 1 -->\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of leastEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('Least Engaged')\">View all</a>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Non-Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header\">\r\n Non-Engaged\r\n </div>\r\n <!-- Row 1 -->\r\n @if(engagersList?.['Non Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of nonEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top.Brandname}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('Non Engaged')\">View all</a>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Footfall & Conversion Metrics -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n @if(cardData?.Footfall?.count) {\r\n <div class=\"card-body p-2\">\r\n <!-- Footfall Section -->\r\n <div class=\"mb-3\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Footfall</span>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33333 8H12.6667M12.6667 8L8 3.33333M12.6667 8L8 12.6667\" stroke=\"#101828\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">Conversion</span>\r\n </div>\r\n \r\n <div class=\"d-flex gap-3 mt-2\">\r\n <!-- Time period selector -->\r\n <div class=\"time-selector\">\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'daily' ? 'active' : ''\" (click)=\"dataType = 'daily';getFootfallDetails()\">1D</div>\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'weekly' ? 'active':''\" (click)=\"dataType = 'weekly';getFootfallDetails()\">1W</div>\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'monthly' ? 'active' : ''\" (click)=\"dataType = 'monthly';getFootfallDetails()\">1M</div>\r\n </div>\r\n \r\n <!-- Metrics -->\r\n <div class=\"flex-fill\">\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h2 class=\"mb-0\">{{cardData?.Footfall?.count}}</h2>\r\n <h2 class=\"mb-0\">{{cardData?.Conversion?.count}}<span class=\"text-muted\">%</span></h2>\r\n </div>\r\n \r\n <div class=\"d-flex gap-2\">\r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"!cardData?.Footfall?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!cardData?.Footfall?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"cardData?.Footfall?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.Footfall?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Prev {{dataType == 'daily' ? 'day' : dataType == 'monthly' ? 'month' : 'week'}}</span>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"!cardData?.Conversion?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!cardData?.Conversion?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"cardData?.Conversion?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.Conversion?.PreviousData}}%</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Avg Dwell Time Section -->\r\n <div>\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Dwell time</span>\r\n </div>\r\n \r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{cardData?.avgDwell?.count}} <span class=\"text-muted fs-5\">mins</span></h2>\r\n \r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"!cardData?.avgDwell?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!cardData?.avgDwell?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"cardData?.avgDwell?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.avgDwell?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Prev {{dataType == 'daily' ? 'day' : dataType == 'monthly' ? 'month' : 'week'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div id=\"body\" class=\"row\">\r\n <div class=\"col overflow-hidden position-relative compliance-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #complianceCanvasContainer>\r\n <canvas id=\"base-canvas\" #complianceBaseCanvas></canvas>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'d-none':!selectedFixture?.fixtureData}\" class=\"col bg-white rounded p-3 fixture-overview\">\r\n <lib-fixture-analytics [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n (changeFixture)=\"onChangeFixture($event)\" [vmList]=\"vmList\" [floorData]=\"floorData\" [startDate]=\"startDate\" [endDate]=\"endDate\" [dataType]=\"dataType\"></lib-fixture-analytics>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden m-0\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>\r\n\r\n", styles: [".invheader{background-color:#fff}.w-20{width:20%}.card{border:1px solid #eaecf0;border-radius:8px;box-shadow:none}.card-header{background-color:#eaf7ff;border-bottom:none;font-weight:500;font-size:14px;color:#344054;padding:8px 16px;border-radius:6px}.bg-header{background:linear-gradient(90deg,#eaf7ff 0% 100%)}.card-body{padding:8px}.rank-badge{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;font-size:11.2px;font-weight:700}.rank-badge:before{content:\"\";position:absolute;width:29px;height:29px;border-radius:50%;z-index:1}.rank-badge span{position:relative;z-index:2}.rank-gold{background-color:#fef0c7;border:.35px solid #FEDF89}.rank-gold:before{background-color:#fffaeb;border:.35px solid #FEDF89}.rank-gold .rank-hash{color:#fdb022;font-weight:300}.rank-gold .rank-num{color:#b54708}.rank-blue{background-color:#6bcaff;border:.35px solid #6BCAFF}.rank-blue:before{background-color:#eaf8ff;border:.35px solid #6BCAFF}.rank-blue .rank-hash{color:#51c1ff;font-weight:300}.rank-blue .rank-num{color:#008edf}.rank-purple{background-color:#717bbc;border:.35px solid #717BBC}.rank-purple:before{background-color:#f8f9fc;border:.35px solid #AFB5D9}.rank-purple .rank-hash{color:#717bbc;font-weight:300}.rank-purple .rank-num{color:#363f72}.dot{width:2px;height:2px;background-color:#d0d5dd;border-radius:50%;display:inline-block}.text-dark{color:#344054!important}.text-muted{color:#667085!important}.fw-medium{font-weight:500}.fw-semibold{font-weight:600}.small{font-size:14px}.card-body img{width:38px;height:38px;object-fit:cover}.border-bottom{border-bottom:1px solid #eaecf0!important}a.text-primary{color:#009bf3!important;font-size:14px;font-weight:500}a.text-primary:hover{color:#0080cc!important}.metric-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px}.metric-header{background-color:#eaf8ff;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}.time-selector{display:flex;flex-direction:column;gap:6px}.time-option{font-size:12px;font-weight:500;color:#1d2939;padding:2px 4px;cursor:pointer;text-align:center;min-width:18px}.time-option.active{color:#008edf}h2{font-size:24px;font-weight:600;color:#1d2939;line-height:32px}.text-success{color:#039855!important}.text-danger{color:#f04438!important}@media (max-width: 768px){.card-header{font-size:13px;padding:6px 12px}h2{font-size:20px}.time-selector{flex-direction:row;gap:4px}}@media (max-width: 576px){.col-auto{min-width:50px}.rank-badge{width:30px;height:30px;font-size:10px}.rank-badge:before{width:24px;height:24px}}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .compliance{font-size:36px;font-weight:600}#header .last-check{font-size:16px;font-weight:500}#body{max-height:calc(100vh - 160px)}#body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#body .collapsed-col{transition:all .3s ease;width:0px!important}#body .fixture-overview{max-width:590px;max-height:calc(100vh - 160px);overflow:auto}#body .compliance-canvas{max-height:calc(100vh - 160px)}#plano-analytics .img-src{width:80px!important;height:80px!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DateRangePickerComponent, selector: "lib-date-range-picker", inputs: ["value"], outputs: ["dateChange"] }, { kind: "component", type: FixtureAnalyticsComponent, selector: "lib-fixture-analytics", inputs: ["fixtureDetails", "vmList", "floorData", "startDate", "endDate", "dataType"], outputs: ["onClose", "changeFixture"] }] });
|
|
44834
44840
|
}
|
|
44835
44841
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlanoAnalyticsComponent, decorators: [{
|
|
44836
44842
|
type: Component,
|
|
44837
|
-
args: [{ selector: "lib-plano-analytics", providers: [TitleCasePipe], template: "<section id=\"plano-analytics\">\r\n <div>\r\n <div class=\"d-flex flex-end\">\r\n <div class=\"me-5\">\r\n <lib-date-range-picker (dateChange)=\"datechange($event)\"></lib-date-range-picker>\r\n </div>\r\n <div>\r\n <button type=\"button\" class=\"btn-outline btn align-items-end text-nowrap invheader\" (click)=\"showCard=!showCard\">\r\n <!-- Export Icon -->\r\n @if(showCard) {\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=\"M3.33333 11.6667H8.33333M8.33333 11.6667V16.6667M8.33333 11.6667L2.5 17.5M16.6667 8.33333H11.6667M11.6667 8.33333V3.33333M11.6667 8.33333L17.5 2.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2\"></span> Hide Metrics\r\n }@else {\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=\"M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L11.6667 8.33333M7.5 17.5H2.5M2.5 17.5V12.5M2.5 17.5L8.33333 11.6667\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2\"></span> Show Metrics\r\n }\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"pageLoading\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-12\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"row g-3 mt-3\" *ngIf=\"!pageLoading && showCard\">\r\n <!-- Rank based on Footfall -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <!-- <div class=\"metric-card\"> -->\r\n <div class=\"metric-header bg-header\">\r\n Rank based on Footfall\r\n </div>\r\n <!-- </div> -->\r\n <!-- Row 1 - Premium Trending -->\r\n @if(topPerformingZoneList?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let zone of topItems();let i=index\">\r\n <div class=\"col-auto\">\r\n <div class=\"rank-badge\" [ngClass]=\"i == 0 ? 'rank-gold' : i== 1 ? 'rank-blue' : 'rank-purple'\">\r\n <span class=\"rank-hash\">#</span><span class=\"rank-num\">{{i + 1}}</span>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark\">{{zone?.zoneName}}</div>\r\n <div class=\"text-muted small d-flex align-items-center gap-1\">\r\n <span *ngFor=\"let product of zone?.zoneProduct;let i=index\">{{ i < 2 ? product : ''}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('footfall')\">View all</a>\r\n </div>\r\n }@else {\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>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Top Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Top Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n @if(engagersList?.['Top Engaged']?.length) {\r\n <!-- Row 1 -->\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of topEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('Top Engaged')\">View all</a>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Least Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Least Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n @if(engagersList?.['Least Engaged']?.length) {\r\n <!-- Row 1 -->\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of leastEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('Least Engaged')\">View all</a>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Non-Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header\">\r\n Non-Engaged\r\n </div>\r\n <!-- Row 1 -->\r\n @if(engagersList?.['Non Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of nonEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top.Brandname}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('Non Engaged')\">View all</a>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Footfall & Conversion Metrics -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n @if(cardData?.Footfall?.count) {\r\n <div class=\"card-body p-2\">\r\n <!-- Footfall Section -->\r\n <div class=\"mb-3\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Footfall</span>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33333 8H12.6667M12.6667 8L8 3.33333M12.6667 8L8 12.6667\" stroke=\"#101828\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">Conversion</span>\r\n </div>\r\n \r\n <div class=\"d-flex gap-3 mt-2\">\r\n <!-- Time period selector -->\r\n <!-- <div class=\"time-selector\">\r\n <div class=\"time-option\">1D</div>\r\n <div class=\"time-option\">1W</div>\r\n <div class=\"time-option active\">1M</div>\r\n </div> -->\r\n \r\n <!-- Metrics -->\r\n <div class=\"flex-fill\">\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h2 class=\"mb-0\">{{cardData?.Footfall?.count}}</h2>\r\n <h2 class=\"mb-0\">{{cardData?.Conversion?.count}}<span class=\"text-muted\">%</span></h2>\r\n </div>\r\n \r\n <div class=\"d-flex gap-2\">\r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"!cardData?.Footfall?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!cardData?.Footfall?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"cardData?.Footfall?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.Footfall?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Prev month</span>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"!cardData?.Conversion?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!cardData?.Conversion?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"cardData?.Conversion?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.Conversion?.PreviousData}}%</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Avg Dwell Time Section -->\r\n <div>\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Dwell time</span>\r\n </div>\r\n \r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{cardData?.avgDwell?.count}} <span class=\"text-muted fs-5\">mins</span></h2>\r\n \r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"!cardData?.avgDwell?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!cardData?.avgDwell?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"cardData?.avgDwell?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.avgDwell?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Previous day</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div id=\"body\" class=\"row\">\r\n <div class=\"col overflow-hidden position-relative compliance-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #complianceCanvasContainer>\r\n <canvas id=\"base-canvas\" #complianceBaseCanvas></canvas>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'d-none':!selectedFixture?.fixtureData}\" class=\"col bg-white rounded p-3 fixture-overview\">\r\n <lib-fixture-analytics [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n (changeFixture)=\"onChangeFixture($event)\" [vmList]=\"vmList\" [floorData]=\"floorData\" [startDate]=\"startDate\" [endDate]=\"endDate\"></lib-fixture-analytics>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden m-0\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>\r\n\r\n", styles: [".invheader{background-color:#fff}.w-20{width:20%}.card{border:1px solid #eaecf0;border-radius:8px;box-shadow:none}.card-header{background-color:#eaf7ff;border-bottom:none;font-weight:500;font-size:14px;color:#344054;padding:8px 16px;border-radius:6px}.bg-header{background:linear-gradient(90deg,#eaf7ff 0% 100%)}.card-body{padding:8px}.rank-badge{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;font-size:11.2px;font-weight:700}.rank-badge:before{content:\"\";position:absolute;width:29px;height:29px;border-radius:50%;z-index:1}.rank-badge span{position:relative;z-index:2}.rank-gold{background-color:#fef0c7;border:.35px solid #FEDF89}.rank-gold:before{background-color:#fffaeb;border:.35px solid #FEDF89}.rank-gold .rank-hash{color:#fdb022;font-weight:300}.rank-gold .rank-num{color:#b54708}.rank-blue{background-color:#6bcaff;border:.35px solid #6BCAFF}.rank-blue:before{background-color:#eaf8ff;border:.35px solid #6BCAFF}.rank-blue .rank-hash{color:#51c1ff;font-weight:300}.rank-blue .rank-num{color:#008edf}.rank-purple{background-color:#717bbc;border:.35px solid #717BBC}.rank-purple:before{background-color:#f8f9fc;border:.35px solid #AFB5D9}.rank-purple .rank-hash{color:#717bbc;font-weight:300}.rank-purple .rank-num{color:#363f72}.dot{width:2px;height:2px;background-color:#d0d5dd;border-radius:50%;display:inline-block}.text-dark{color:#344054!important}.text-muted{color:#667085!important}.fw-medium{font-weight:500}.fw-semibold{font-weight:600}.small{font-size:14px}.card-body img{width:38px;height:38px;object-fit:cover}.border-bottom{border-bottom:1px solid #eaecf0!important}a.text-primary{color:#009bf3!important;font-size:14px;font-weight:500}a.text-primary:hover{color:#0080cc!important}.metric-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px}.metric-header{background-color:#eaf8ff;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}.time-selector{display:flex;flex-direction:column;gap:6px}.time-option{font-size:12px;font-weight:500;color:#1d2939;padding:2px 4px;cursor:pointer;text-align:center;min-width:18px}.time-option.active{color:#008edf}h2{font-size:24px;font-weight:600;color:#1d2939;line-height:32px}.text-success{color:#039855!important}.text-danger{color:#f04438!important}@media (max-width: 768px){.card-header{font-size:13px;padding:6px 12px}h2{font-size:20px}.time-selector{flex-direction:row;gap:4px}}@media (max-width: 576px){.col-auto{min-width:50px}.rank-badge{width:30px;height:30px;font-size:10px}.rank-badge:before{width:24px;height:24px}}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .compliance{font-size:36px;font-weight:600}#header .last-check{font-size:16px;font-weight:500}#body{max-height:calc(100vh - 160px)}#body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#body .collapsed-col{transition:all .3s ease;width:0px!important}#body .fixture-overview{max-width:590px;max-height:calc(100vh - 160px);overflow:auto}#body .compliance-canvas{max-height:calc(100vh - 160px)}#plano-analytics .img-src{width:80px!important;height:80px!important}\n"] }]
|
|
44843
|
+
args: [{ selector: "lib-plano-analytics", providers: [TitleCasePipe], template: "<section id=\"plano-analytics\">\r\n <div>\r\n <div class=\"d-flex flex-end\">\r\n <div class=\"me-5\">\r\n <lib-date-range-picker (dateChange)=\"datechange($event)\"></lib-date-range-picker>\r\n </div>\r\n <div>\r\n <button type=\"button\" class=\"btn-outline btn align-items-end text-nowrap invheader\" (click)=\"showCard=!showCard\">\r\n <!-- Export Icon -->\r\n @if(showCard) {\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=\"M3.33333 11.6667H8.33333M8.33333 11.6667V16.6667M8.33333 11.6667L2.5 17.5M16.6667 8.33333H11.6667M11.6667 8.33333V3.33333M11.6667 8.33333L17.5 2.5\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2\"></span> Hide Metrics\r\n }@else {\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=\"M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L11.6667 8.33333M7.5 17.5H2.5M2.5 17.5V12.5M2.5 17.5L8.33333 11.6667\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"ms-2\"></span> Show Metrics\r\n }\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"pageLoading\">\r\n <div class=\"col-12 m-0\">\r\n <ng-container *ngTemplateOutlet=\"headerSkeleton\"></ng-container>\r\n </div>\r\n <div class=\"col-12\">\r\n <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"row g-3 mt-3\" *ngIf=\"!pageLoading && showCard\">\r\n <!-- Rank based on Footfall -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <!-- <div class=\"metric-card\"> -->\r\n <div class=\"metric-header bg-header\">\r\n Rank based on Footfall\r\n </div>\r\n <!-- </div> -->\r\n <!-- Row 1 - Premium Trending -->\r\n @if(topPerformingZoneList?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let zone of topItems();let i=index\">\r\n <div class=\"col-auto\">\r\n <div class=\"rank-badge\" [ngClass]=\"i == 0 ? 'rank-gold' : i== 1 ? 'rank-blue' : 'rank-purple'\">\r\n <span class=\"rank-hash\">#</span><span class=\"rank-num\">{{i + 1}}</span>\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark\">{{zone?.zoneName}}</div>\r\n <div class=\"text-muted small d-flex align-items-center gap-1\">\r\n <span *ngFor=\"let product of zone?.zoneProduct;let i=index\">{{ i < 2 ? product : ''}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('footfall')\">View all</a>\r\n </div>\r\n }@else {\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>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Top Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Top Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n @if(engagersList?.['Top Engaged']?.length) {\r\n <!-- Row 1 -->\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of topEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('Top Engaged')\">View all</a>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Least Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header d-flex justify-content-between\">\r\n <span>Least Engaged</span>\r\n <span>Count</span>\r\n </div>\r\n @if(engagersList?.['Least Engaged']?.length) {\r\n <!-- Row 1 -->\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of leastEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top?.Brandname ?? ''}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n <div class=\"col-auto\">\r\n <span class=\"fw-medium text-dark\">{{top?.count ?? 0}}</span>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('Least Engaged')\">View all</a>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Non-Engaged -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body p-2\">\r\n <div class=\"metric-header bg-header\">\r\n Non-Engaged\r\n </div>\r\n <!-- Row 1 -->\r\n @if(engagersList?.['Non Engaged']?.length) {\r\n <div class=\"row align-items-center py-2 border-bottom\" *ngFor=\"let top of nonEngagers()\">\r\n <div class=\"col-auto\">\r\n <img [src]=\"top?.imageUrl ? top.imageUrl : cdnUrl+'fixtureImage/imagenotfound.png'\" alt=\"Product\" class=\"rounded\">\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"fw-medium text-dark small\">{{top.Brandname}}</div>\r\n <div class=\"text-muted\" style=\"font-size: 12px;\">{{top?.productBrandName ?? ''}}</div>\r\n </div>\r\n </div>\r\n \r\n <!-- View All Link -->\r\n <div class=\"text-end py-1\">\r\n <a class=\"text-primary text-decoration-underline\" (click)=\"openPopup('Non Engaged')\">View all</a>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Footfall & Conversion Metrics -->\r\n <div class=\"w-20\">\r\n <div class=\"card h-100\">\r\n @if(cardData?.Footfall?.count) {\r\n <div class=\"card-body p-2\">\r\n <!-- Footfall Section -->\r\n <div class=\"mb-3\">\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Footfall</span>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M3.33333 8H12.6667M12.6667 8L8 3.33333M12.6667 8L8 12.6667\" stroke=\"#101828\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">Conversion</span>\r\n </div>\r\n \r\n <div class=\"d-flex gap-3 mt-2\">\r\n <!-- Time period selector -->\r\n <div class=\"time-selector\">\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'daily' ? 'active' : ''\" (click)=\"dataType = 'daily';getFootfallDetails()\">1D</div>\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'weekly' ? 'active':''\" (click)=\"dataType = 'weekly';getFootfallDetails()\">1W</div>\r\n <div class=\"time-option\" [ngClass]=\"dataType == 'monthly' ? 'active' : ''\" (click)=\"dataType = 'monthly';getFootfallDetails()\">1M</div>\r\n </div>\r\n \r\n <!-- Metrics -->\r\n <div class=\"flex-fill\">\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h2 class=\"mb-0\">{{cardData?.Footfall?.count}}</h2>\r\n <h2 class=\"mb-0\">{{cardData?.Conversion?.count}}<span class=\"text-muted\">%</span></h2>\r\n </div>\r\n \r\n <div class=\"d-flex gap-2\">\r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"!cardData?.Footfall?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!cardData?.Footfall?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"cardData?.Footfall?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.Footfall?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Prev {{dataType == 'daily' ? 'day' : dataType == 'monthly' ? 'month' : 'week'}}</span>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"!cardData?.Conversion?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!cardData?.Conversion?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"cardData?.Conversion?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.Conversion?.PreviousData}}%</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Avg Dwell Time Section -->\r\n <div>\r\n <div class=\"metric-header\">\r\n <span class=\"fw-semibold\">Avg Dwell time</span>\r\n </div>\r\n \r\n <div class=\"mt-2\">\r\n <h2 class=\"mb-1\">{{cardData?.avgDwell?.count}} <span class=\"text-muted fs-5\">mins</span></h2>\r\n \r\n <div class=\"d-flex align-items-center gap-1 small\" [ngClass]=\"!cardData?.avgDwell?.PreviousVariation ? 'text-danger' : 'text-success'\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" style=\"transform: rotate(180deg);\" *ngIf=\"!cardData?.avgDwell?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#D92D20\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\" *ngIf=\"cardData?.avgDwell?.PreviousVariation\">\r\n <path d=\"M12.3198 3.21386L7.23117 8.30246L4.55296 5.62425L0.535643 9.64157M12.3198 3.21386H9.10592M12.3198 3.21386V6.42771\" stroke=\"#039855\" stroke-width=\"1.2052\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"fw-semibold\">{{cardData?.avgDwell?.PreviousData}}%</span>\r\n <span class=\"text-muted\">vs Prev {{dataType == 'daily' ? 'day' : dataType == 'monthly' ? 'month' : 'week'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\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 \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div id=\"body\" class=\"row\">\r\n <div class=\"col overflow-hidden position-relative compliance-canvas\">\r\n <div id=\"canvas-card\" class=\"w-100 position-relative\" #complianceCanvasContainer>\r\n <canvas id=\"base-canvas\" #complianceBaseCanvas></canvas>\r\n\r\n <!-- Rotate Button -->\r\n <button style=\"top: 24px; right: 94px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"rotateCanvas(canvas,90)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\">\r\n <path\r\n d=\"M6.36265 7.17887L7.17625 6.36287L5.90425 5.09207L5.08945 5.90567L6.36265 7.17887ZM15.671 6.36407L19.6379 10.3309L20.9099 9.05769L16.9442 5.09087L15.671 6.36407ZM19.6379 18.8257L18.8243 19.6393L20.0963 20.9101L20.9099 20.0977L19.6379 18.8257ZM10.3295 19.6393L6.36265 15.6725L5.09065 16.9457L9.05626 20.9113L10.3295 19.6393ZM18.8243 19.6393C17.6543 20.8081 16.8407 21.6193 16.1459 22.1497C15.4715 22.6645 15.0155 22.8289 14.5763 22.8289V24.6289C15.5675 24.6289 16.4027 24.2173 17.2367 23.5813C18.0503 22.9609 18.9635 22.0453 20.0963 20.9125L18.8243 19.6393ZM9.05626 20.9113C10.1891 22.0453 11.1023 22.9597 11.9159 23.5813C12.7499 24.2173 13.5851 24.6289 14.5763 24.6289V22.8289C14.1371 22.8289 13.6823 22.6645 13.0067 22.1497C12.3119 21.6193 11.4983 20.8081 10.3295 19.6393L9.05626 20.9113ZM19.6379 10.3309C20.8067 11.4997 21.6179 12.3133 22.1483 13.0081C22.6631 13.6837 22.8275 14.1385 22.8275 14.5777H24.6275C24.6275 13.5865 24.2159 12.7513 23.5799 11.9173C22.9595 11.1037 22.0427 10.1905 20.9099 9.05769L19.6379 10.3309ZM20.9099 20.0977C22.0439 18.9637 22.9583 18.0517 23.5799 17.2381C24.2159 16.4041 24.6275 15.5689 24.6275 14.5777H22.8275C22.8275 15.0169 22.6631 15.4729 22.1483 16.1473C21.6179 16.8421 20.8067 17.6557 19.6379 18.8257L20.9099 20.0977ZM7.17625 6.36287C8.34625 5.19407 9.15985 4.38167 9.85465 3.85127C10.529 3.33647 10.985 3.17327 11.4242 3.17327V1.37207C10.433 1.37207 9.59785 1.78367 8.76385 2.41967C7.94905 3.04127 7.03705 3.95567 5.90425 5.08847L7.17625 6.36287ZM16.9442 5.09087C15.8114 3.95687 14.8982 3.04127 14.0846 2.41967C13.2506 1.78367 12.4154 1.37207 11.4242 1.37207V3.17327C11.8634 3.17327 12.3182 3.33647 12.9938 3.85127C13.6886 4.38167 14.5022 5.19287 15.671 6.36167L16.9442 5.09087ZM5.08945 5.90327C3.95665 7.03607 3.04225 7.94807 2.42065 8.76287C1.78465 9.59687 1.37305 10.4321 1.37305 11.4233H3.17305C3.17305 10.9841 3.33745 10.5281 3.85225 9.85367C4.38265 9.15887 5.19385 8.34527 6.36265 7.17527L5.08945 5.90327ZM6.36265 15.6713C5.19385 14.5013 4.38265 13.6877 3.85225 12.9929C3.33745 12.3185 3.17305 11.8625 3.17305 11.4233H1.37305C1.37305 12.4145 1.78465 13.2497 2.42065 14.0837C3.04225 14.8973 3.95665 15.8105 5.08945 16.9433L6.36265 15.6713Z\"\r\n fill=\"#1D2939\" />\r\n <path\r\n d=\"M23.2 6.9832L25 8.2C25 4.582 22.4056 1.5796 19 1M2.8 19.0168L1 17.8C1 21.418 3.5944 24.4204 7 25\"\r\n stroke=\"#1D2939\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Download Button -->\r\n <button style=\"top: 24px; right: 26px\" type=\"button\"\r\n class=\"btn btn-outline d-flex align-items-center gap-3 position-absolute bg-white shadow-sm\"\r\n (click)=\"downloadCanvas()\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"#000000\" stroke-width=\"0.24000000000000005\">\r\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\r\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke=\"#CCCCCC\" stroke-width=\"0.384\"></g>\r\n <g id=\"SVGRepo_iconCarrier\">\r\n <path\r\n d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"\r\n fill=\"#1D2939\"></path>\r\n <path\r\n d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"\r\n fill=\"#1D2939\"></path>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'d-none':!selectedFixture?.fixtureData}\" class=\"col bg-white rounded p-3 fixture-overview\">\r\n <lib-fixture-analytics [fixtureDetails]=\"selectedFixture?.fixtureData\" (onClose)=\"onClickClose()\"\r\n (changeFixture)=\"onChangeFixture($event)\" [vmList]=\"vmList\" [floorData]=\"floorData\" [startDate]=\"startDate\" [endDate]=\"endDate\" [dataType]=\"dataType\"></lib-fixture-analytics>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #headerSkeleton>\r\n <div class=\"row m-0 g-0 loader d-flex justify-content-center align-items-center overflow-hidden\">\r\n <div class=\"shimmer w-100 p-4 rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke mt-0 animate title\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #skeletonLoader>\r\n <div class=\"row loader d-flex justify-content-center align-items-center overflow-hidden m-0\">\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer rounded\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>\r\n\r\n", styles: [".invheader{background-color:#fff}.w-20{width:20%}.card{border:1px solid #eaecf0;border-radius:8px;box-shadow:none}.card-header{background-color:#eaf7ff;border-bottom:none;font-weight:500;font-size:14px;color:#344054;padding:8px 16px;border-radius:6px}.bg-header{background:linear-gradient(90deg,#eaf7ff 0% 100%)}.card-body{padding:8px}.rank-badge{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;font-size:11.2px;font-weight:700}.rank-badge:before{content:\"\";position:absolute;width:29px;height:29px;border-radius:50%;z-index:1}.rank-badge span{position:relative;z-index:2}.rank-gold{background-color:#fef0c7;border:.35px solid #FEDF89}.rank-gold:before{background-color:#fffaeb;border:.35px solid #FEDF89}.rank-gold .rank-hash{color:#fdb022;font-weight:300}.rank-gold .rank-num{color:#b54708}.rank-blue{background-color:#6bcaff;border:.35px solid #6BCAFF}.rank-blue:before{background-color:#eaf8ff;border:.35px solid #6BCAFF}.rank-blue .rank-hash{color:#51c1ff;font-weight:300}.rank-blue .rank-num{color:#008edf}.rank-purple{background-color:#717bbc;border:.35px solid #717BBC}.rank-purple:before{background-color:#f8f9fc;border:.35px solid #AFB5D9}.rank-purple .rank-hash{color:#717bbc;font-weight:300}.rank-purple .rank-num{color:#363f72}.dot{width:2px;height:2px;background-color:#d0d5dd;border-radius:50%;display:inline-block}.text-dark{color:#344054!important}.text-muted{color:#667085!important}.fw-medium{font-weight:500}.fw-semibold{font-weight:600}.small{font-size:14px}.card-body img{width:38px;height:38px;object-fit:cover}.border-bottom{border-bottom:1px solid #eaecf0!important}a.text-primary{color:#009bf3!important;font-size:14px;font-weight:500}a.text-primary:hover{color:#0080cc!important}.metric-card{background-color:#fff;border:1px solid #eaecf0;border-radius:6px;padding:12px}.metric-header{background-color:#eaf8ff;padding:8px;border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}.time-selector{display:flex;flex-direction:column;gap:6px}.time-option{font-size:12px;font-weight:500;color:#1d2939;padding:2px 4px;cursor:pointer;text-align:center;min-width:18px}.time-option.active{color:#008edf}h2{font-size:24px;font-weight:600;color:#1d2939;line-height:32px}.text-success{color:#039855!important}.text-danger{color:#f04438!important}@media (max-width: 768px){.card-header{font-size:13px;padding:6px 12px}h2{font-size:20px}.time-selector{flex-direction:row;gap:4px}}@media (max-width: 576px){.col-auto{min-width:50px}.rank-badge{width:30px;height:30px;font-size:10px}.rank-badge:before{width:24px;height:24px}}#header .title{color:var(--Gray-800, #1d2939);font-size:16px;font-weight:600;line-height:24px;margin:0}#header .compliance{font-size:36px;font-weight:600}#header .last-check{font-size:16px;font-weight:500}#body{max-height:calc(100vh - 160px)}#body #canvas-card{border-radius:8px;background:#fff;padding:20px 16px;height:100%;overflow:hidden;width:100%}#body .collapsed-col{transition:all .3s ease;width:0px!important}#body .fixture-overview{max-width:590px;max-height:calc(100vh - 160px);overflow:auto}#body .compliance-canvas{max-height:calc(100vh - 160px)}#plano-analytics .img-src{width:80px!important;height:80px!important}\n"] }]
|
|
44838
44844
|
}], ctorParameters: () => [{ type: StoreBuilderService }, { type: i2$1.GlobalStateService }, { type: i5.TitleCasePipe }, { type: i1$1.NgbModal }], propDecorators: { floorData: [{
|
|
44839
44845
|
type: Input
|
|
44840
44846
|
}], vmList: [{
|
|
@@ -44922,8 +44928,8 @@ class PlanoDetailsParentComponent {
|
|
|
44922
44928
|
this.planoBriefDetails.planoId = params.planoId;
|
|
44923
44929
|
this.planoBriefDetails.floorId = params.floorId;
|
|
44924
44930
|
this.planoBriefDetails.storeName = params.storeName;
|
|
44925
|
-
this.onClickReload();
|
|
44926
|
-
|
|
44931
|
+
// this.onClickReload();
|
|
44932
|
+
this.getStoreFixtures(params.planoId);
|
|
44927
44933
|
this.getStoreList(params.planoId);
|
|
44928
44934
|
this.selectedFloorId.valueChanges.subscribe((id) => {
|
|
44929
44935
|
this.floorData = null;
|
|
@@ -49068,12 +49074,19 @@ class PrepareTemplateComponent {
|
|
|
49068
49074
|
if (!this.replacePrompt.value) {
|
|
49069
49075
|
return;
|
|
49070
49076
|
}
|
|
49071
|
-
//
|
|
49072
|
-
|
|
49073
|
-
|
|
49077
|
+
// Get the found fixture ID from the store's findResponseData (not the clicked fixture)
|
|
49078
|
+
const foundFixtureId = this.getCurrentStoreFindResponseData();
|
|
49079
|
+
if (!foundFixtureId) {
|
|
49080
|
+
// Fallback to selected fixture if no findResponseData exists
|
|
49081
|
+
if (!this.selectedFixture?.fixtureId && !this.selectedFixtureData?._id) {
|
|
49082
|
+
return;
|
|
49083
|
+
}
|
|
49074
49084
|
}
|
|
49075
|
-
// Use
|
|
49076
|
-
const fixtureId = this.selectedFixture?.fixtureId || this.selectedFixtureData?._id;
|
|
49085
|
+
// Use the found fixture ID (from findResponseData) instead of the clicked fixture
|
|
49086
|
+
const fixtureId = foundFixtureId || this.selectedFixture?.fixtureId || this.selectedFixtureData?._id;
|
|
49087
|
+
// Get the original fixture data from the found fixture (not the clicked one)
|
|
49088
|
+
const foundFixture = this.getFixtureByIdFromFloor(fixtureId);
|
|
49089
|
+
const originalFixture = foundFixture ? structuredClone(foundFixture) : null;
|
|
49077
49090
|
this.replaceLoading = true;
|
|
49078
49091
|
this.canvasLoading = true;
|
|
49079
49092
|
const payload = {
|
|
@@ -49081,8 +49094,6 @@ class PrepareTemplateComponent {
|
|
|
49081
49094
|
updateType: this.target.value,
|
|
49082
49095
|
updationCriteria: this.replacePrompt.value,
|
|
49083
49096
|
};
|
|
49084
|
-
// Store the original fixture before replace for before/after comparison
|
|
49085
|
-
const originalFixture = this.selectedFixtureData ? structuredClone(this.selectedFixtureData) : null;
|
|
49086
49097
|
this.storeBuilderService.replaceFixture(payload)
|
|
49087
49098
|
.pipe(takeUntil(this.destroy$))
|
|
49088
49099
|
.subscribe({
|
|
@@ -49091,11 +49102,15 @@ class PrepareTemplateComponent {
|
|
|
49091
49102
|
this.canvasLoading = false;
|
|
49092
49103
|
if (res.code === 200) {
|
|
49093
49104
|
// Store original fixture for before/after comparison
|
|
49094
|
-
|
|
49105
|
+
if (originalFixture) {
|
|
49106
|
+
this.originalFixtureData = originalFixture;
|
|
49107
|
+
// Also store it in the map so it persists when clicking other fixtures
|
|
49108
|
+
this.originalFixturesMap.set(fixtureId, originalFixture);
|
|
49109
|
+
}
|
|
49095
49110
|
this.updateAiResponseFixture(res.data);
|
|
49096
49111
|
// Save replaceResponseData to the specific store
|
|
49097
49112
|
this.saveReplaceResponseData(res.data);
|
|
49098
|
-
// Update selected fixture data (after replace)
|
|
49113
|
+
// Update selected fixture data to the found fixture (after replace)
|
|
49099
49114
|
this.selectedFixture = {
|
|
49100
49115
|
fixtureId: res.data._id,
|
|
49101
49116
|
fixtureType: res.data.fixtureType,
|
|
@@ -49105,6 +49120,7 @@ class PrepareTemplateComponent {
|
|
|
49105
49120
|
this.renderFloor(this.previewCanvas).then(() => {
|
|
49106
49121
|
// Wait for canvas to fully render before highlighting
|
|
49107
49122
|
setTimeout(() => {
|
|
49123
|
+
// Highlight the found fixture (not the clicked one)
|
|
49108
49124
|
const actionFixture = this.previewCanvas.getObjects().find((obj) => obj.objType === "fixture" && obj.fixtureId === res.data._id);
|
|
49109
49125
|
if (actionFixture) {
|
|
49110
49126
|
this.highlightFixture(this.previewCanvas, actionFixture, true);
|
|
@@ -49178,12 +49194,19 @@ class PrepareTemplateComponent {
|
|
|
49178
49194
|
if (!this.replacePrompt.value) {
|
|
49179
49195
|
return;
|
|
49180
49196
|
}
|
|
49181
|
-
//
|
|
49182
|
-
|
|
49183
|
-
|
|
49197
|
+
// Get the found fixture ID from the store's findResponseData (not the clicked fixture)
|
|
49198
|
+
const foundFixtureId = this.getCurrentStoreFindResponseData();
|
|
49199
|
+
if (!foundFixtureId) {
|
|
49200
|
+
// Fallback to selected fixture if no findResponseData exists
|
|
49201
|
+
if (!this.selectedFixture?.fixtureId && !this.selectedFixtureData?._id) {
|
|
49202
|
+
return;
|
|
49203
|
+
}
|
|
49184
49204
|
}
|
|
49185
|
-
// Use
|
|
49186
|
-
const fixtureId = this.selectedFixture?.fixtureId || this.selectedFixtureData?._id;
|
|
49205
|
+
// Use the found fixture ID (from findResponseData) instead of the clicked fixture
|
|
49206
|
+
const fixtureId = foundFixtureId || this.selectedFixture?.fixtureId || this.selectedFixtureData?._id;
|
|
49207
|
+
// Get the original fixture data from the found fixture (not the clicked one)
|
|
49208
|
+
const foundFixture = this.getFixtureByIdFromFloor(fixtureId);
|
|
49209
|
+
const originalFixture = foundFixture ? structuredClone(foundFixture) : null;
|
|
49187
49210
|
this.replaceLoading = true;
|
|
49188
49211
|
this.canvasLoading = true;
|
|
49189
49212
|
const payload = {
|
|
@@ -49191,8 +49214,6 @@ class PrepareTemplateComponent {
|
|
|
49191
49214
|
updateType: this.target.value,
|
|
49192
49215
|
updationCriteria: this.replacePrompt.value,
|
|
49193
49216
|
};
|
|
49194
|
-
// Store the original fixture before replace for before/after comparison
|
|
49195
|
-
const originalFixture = this.selectedFixtureData ? structuredClone(this.selectedFixtureData) : null;
|
|
49196
49217
|
this.storeBuilderService.replaceFixture(payload)
|
|
49197
49218
|
.pipe(takeUntil(this.destroy$))
|
|
49198
49219
|
.subscribe({
|
|
@@ -49201,11 +49222,15 @@ class PrepareTemplateComponent {
|
|
|
49201
49222
|
this.canvasLoading = false;
|
|
49202
49223
|
if (res.code === 200) {
|
|
49203
49224
|
// Store original fixture for before/after comparison
|
|
49204
|
-
|
|
49225
|
+
if (originalFixture) {
|
|
49226
|
+
this.originalFixtureData = originalFixture;
|
|
49227
|
+
// Also store it in the map so it persists when clicking other fixtures
|
|
49228
|
+
this.originalFixturesMap.set(fixtureId, originalFixture);
|
|
49229
|
+
}
|
|
49205
49230
|
this.updateAiResponseFixture(res.data);
|
|
49206
49231
|
// Save replaceResponseData to the specific store
|
|
49207
49232
|
this.saveReplaceResponseData(res.data);
|
|
49208
|
-
// Update selected fixture data (after replace)
|
|
49233
|
+
// Update selected fixture data to the found fixture (after replace)
|
|
49209
49234
|
this.selectedFixture = {
|
|
49210
49235
|
fixtureId: res.data._id,
|
|
49211
49236
|
fixtureType: res.data.fixtureType,
|
|
@@ -49215,6 +49240,7 @@ class PrepareTemplateComponent {
|
|
|
49215
49240
|
this.renderFloor(this.previewCanvas).then(() => {
|
|
49216
49241
|
// Wait for canvas to fully render before highlighting
|
|
49217
49242
|
setTimeout(() => {
|
|
49243
|
+
// Highlight the found fixture (not the clicked one)
|
|
49218
49244
|
const actionFixture = this.previewCanvas.getObjects().find((obj) => obj.objType === "fixture" && obj.fixtureId === res.data._id);
|
|
49219
49245
|
if (actionFixture) {
|
|
49220
49246
|
this.highlightFixture(this.previewCanvas, actionFixture, true);
|