@naniteninja/dashboard-components-lib 2.1.19 → 2.1.20
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.
|
@@ -5057,11 +5057,11 @@ class SpiderChartComponent {
|
|
|
5057
5057
|
this.createPolygons(this.svg, datasets, rScale, angleSlice);
|
|
5058
5058
|
}
|
|
5059
5059
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SpiderChartComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5060
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SpiderChartComponent, isStandalone: true, selector: "lib-spider-chart", inputs: { datasets: "datasets", config: "config", polygon_colors: "polygon_colors", showChartInfo: "showChartInfo" }, outputs: { tooltipActiveChange: "tooltipActiveChange" }, providers: [InitialsPipe], viewQueries: [{ propertyName: "d3Chart", first: true, predicate: ["D3Chart"], descendants: true }, { propertyName: "tooltipRef", first: true, predicate: ["tooltipContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" [class.active]=\"isTooltipActive\">\r\n <div class=\"d3-container\">\r\n <div class=\"d3-chart\" #D3Chart>\r\n <div #tooltipContainer class=\"chart-tooltip\">\r\n <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\" (closed)=\"onClosedAlert($event)\"></lib-alert-popup>\r\n </div>\r\n </div>\r\n @if (showChartInfo && !isTooltipActive) {\r\n <div class=\"chartInfo\">\r\n @if (datasets.length > 0) {\r\n <div class=\"datachart\">\r\n @for (dataset of datasets; let j = $index; track dataset) {\r\n <div class=\"legend-item\">\r\n <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\r\n {{ dataset.title }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (isTooltipActive && datasets.length > 0) {\r\n <div class=\"prospect-selector-container\">\r\n <div class=\"prospect-group\" (click)=\"selectNextProspect()\">\r\n <div class=\"prospect-content\">\r\n <div class=\"prospect-head\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" class=\"head-bg\">\r\n <ellipse cx=\"20\" cy=\"19.8031\" rx=\"20\" ry=\"19.8031\" fill=\"url(#paint0_linear_524_5213)\"/>\r\n <defs>\r\n <linearGradient id=\"paint0_linear_524_5213\" x1=\"35.9487\" y1=\"1.83015\" x2=\"27.3749\" y2=\"45.6436\" gradientUnits=\"userSpaceOnUse\">\r\n <stop offset=\"0.581821\" stop-color=\"#27242C\"/>\r\n <stop offset=\"1\" stop-color=\"#0C0B0E\"/>\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n \r\n @if (datasets[selectedDatasetIndex].image) {\r\n <img [src]=\"datasets[selectedDatasetIndex].image\" class=\"prospect-image\" alt=\"Prospect image\" />\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"21\" viewBox=\"0 0 18 21\" fill=\"none\" class=\"user-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.64788 11.9999C5.6644 11.9991 5.68093 11.9987 5.69746 11.9987H12.3019C12.3185 11.9987 12.335 11.9991 12.3515 11.9999C14.6646 12.1147 16.7148 13.5224 17.6536 15.6376C18.328 16.9866 17.952 18.3222 17.0911 19.2419C16.2573 20.1325 14.9656 20.6643 13.6231 20.6643H4.3763C3.03431 20.6643 1.74298 20.1323 0.909396 19.2419C0.0485599 18.3224 -0.327845 16.987 0.345575 15.6379C1.28444 13.5224 3.33479 12.1148 5.64788 11.9999ZM5.7236 13.9985C4.16794 14.0845 2.79187 15.0382 2.16577 16.4663C2.15801 16.484 2.14974 16.5015 2.14098 16.5187C1.89031 17.0107 1.98391 17.4636 2.36924 17.8752C2.78748 18.3219 3.53057 18.6645 4.3763 18.6645H13.6231C14.4697 18.6645 15.213 18.3218 15.6311 17.8752C16.0163 17.4639 16.1097 17.0114 15.8587 16.5192C15.8499 16.5019 15.8415 16.4841 15.8336 16.4663C15.2076 15.0382 13.8315 14.0845 12.2758 13.9985H5.7236Z\" fill=\"#5E5E5E\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.99971 1.99974C7.34312 1.99974 6.00011 3.34272 6.00011 4.99936C6.00011 6.656 7.34312 7.99897 8.99971 7.99897C10.6564 7.99897 11.9993 6.656 11.9993 4.99936C11.9993 4.20381 11.6834 3.44085 11.1208 2.87831C10.5582 2.31577 9.79521 1.99974 8.99971 1.99974ZM4.00037 4.99936C4.00037 2.23829 6.23865 0 8.99971 0C10.3257 0 11.5972 0.526719 12.5349 1.46428C13.4723 2.40184 13.9991 3.67345 13.9991 4.99936C13.9991 7.76047 11.7608 9.99872 8.99971 9.99872C6.23865 9.99872 4.00037 7.76047 4.00037 4.99936Z\" fill=\"#5E5E5E\"/>\r\n </svg>\r\n }\r\n </div>\r\n \r\n <div class=\"compatibility-score\">\r\n {{ datasets[selectedDatasetIndex].score || 0 }}%\r\n </div>\r\n </div>\r\n \r\n <div class=\"selector-tooltip-container\">\r\n @if (isSelectorTooltipVisible) {\r\n <lib-alert-popup title=\"CLIENT_DASHBOARD.ALERT_POPUP.PROSPECT_SELECTOR.TITLE\" description=\"CLIENT_DASHBOARD.ALERT_POPUP.PROSPECT_SELECTOR.DESCRIPTION\" (closed)=\"onClosedSelectorTooltip($event)\"></lib-alert-popup>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".align-chart{display:flex;justify-content:center;align-items:center}.d3-container{width:100%;position:relative;min-height:350px;display:flex;flex-direction:column;align-items:center;transition:all .5s ease;padding:20px;box-sizing:border-box}.d3-chart{width:121px;height:121px;min-width:121px;min-height:121px;max-width:121px;max-height:121px;position:relative;display:flex;justify-content:center;align-items:center;transition:all .5s ease;border-radius:127.93px;border:.5px solid #FE3C72;background:linear-gradient(180deg,#27242c,#0c0b0e);box-shadow:inset -.84px -.84px 3.34px #cbc7d180,inset 7.1px 9.19px 8.35px 1.04px #111014b3;padding:0;overflow:visible;aspect-ratio:1/1}.d3-chart ::ng-deep svg{width:121px;height:121px;position:absolute;top:0;left:0;overflow:visible}.chartInfo{margin-top:24px;width:100%;display:flex;justify-content:center}.datachart{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.legend-item{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;padding:8px 12px;background-color:#464a4c4d;border-radius:8px;color:#666;transition:all .2s ease}.legend-item:hover{background-color:#464a4c80;transform:translateY(-1px)}.legend-color{width:18px;height:18px;border-radius:50%;background-color:#fff;flex-shrink:0}.chart-tooltip{z-index:1000;display:none;position:fixed;top:0;
|
|
5060
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SpiderChartComponent, isStandalone: true, selector: "lib-spider-chart", inputs: { datasets: "datasets", config: "config", polygon_colors: "polygon_colors", showChartInfo: "showChartInfo" }, outputs: { tooltipActiveChange: "tooltipActiveChange" }, providers: [InitialsPipe], viewQueries: [{ propertyName: "d3Chart", first: true, predicate: ["D3Chart"], descendants: true }, { propertyName: "tooltipRef", first: true, predicate: ["tooltipContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" [class.active]=\"isTooltipActive\">\r\n <div class=\"d3-container\">\r\n <div class=\"d3-chart\" #D3Chart>\r\n <div #tooltipContainer class=\"chart-tooltip\">\r\n <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\" (closed)=\"onClosedAlert($event)\"></lib-alert-popup>\r\n </div>\r\n </div>\r\n @if (showChartInfo && !isTooltipActive) {\r\n <div class=\"chartInfo\">\r\n @if (datasets.length > 0) {\r\n <div class=\"datachart\">\r\n @for (dataset of datasets; let j = $index; track dataset) {\r\n <div class=\"legend-item\">\r\n <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\r\n {{ dataset.title }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (isTooltipActive && datasets.length > 0) {\r\n <div class=\"prospect-selector-container\">\r\n <div class=\"prospect-group\" (click)=\"selectNextProspect()\">\r\n <div class=\"prospect-content\">\r\n <div class=\"prospect-head\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" class=\"head-bg\">\r\n <ellipse cx=\"20\" cy=\"19.8031\" rx=\"20\" ry=\"19.8031\" fill=\"url(#paint0_linear_524_5213)\"/>\r\n <defs>\r\n <linearGradient id=\"paint0_linear_524_5213\" x1=\"35.9487\" y1=\"1.83015\" x2=\"27.3749\" y2=\"45.6436\" gradientUnits=\"userSpaceOnUse\">\r\n <stop offset=\"0.581821\" stop-color=\"#27242C\"/>\r\n <stop offset=\"1\" stop-color=\"#0C0B0E\"/>\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n \r\n @if (datasets[selectedDatasetIndex].image) {\r\n <img [src]=\"datasets[selectedDatasetIndex].image\" class=\"prospect-image\" alt=\"Prospect image\" />\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"21\" viewBox=\"0 0 18 21\" fill=\"none\" class=\"user-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.64788 11.9999C5.6644 11.9991 5.68093 11.9987 5.69746 11.9987H12.3019C12.3185 11.9987 12.335 11.9991 12.3515 11.9999C14.6646 12.1147 16.7148 13.5224 17.6536 15.6376C18.328 16.9866 17.952 18.3222 17.0911 19.2419C16.2573 20.1325 14.9656 20.6643 13.6231 20.6643H4.3763C3.03431 20.6643 1.74298 20.1323 0.909396 19.2419C0.0485599 18.3224 -0.327845 16.987 0.345575 15.6379C1.28444 13.5224 3.33479 12.1148 5.64788 11.9999ZM5.7236 13.9985C4.16794 14.0845 2.79187 15.0382 2.16577 16.4663C2.15801 16.484 2.14974 16.5015 2.14098 16.5187C1.89031 17.0107 1.98391 17.4636 2.36924 17.8752C2.78748 18.3219 3.53057 18.6645 4.3763 18.6645H13.6231C14.4697 18.6645 15.213 18.3218 15.6311 17.8752C16.0163 17.4639 16.1097 17.0114 15.8587 16.5192C15.8499 16.5019 15.8415 16.4841 15.8336 16.4663C15.2076 15.0382 13.8315 14.0845 12.2758 13.9985H5.7236Z\" fill=\"#5E5E5E\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.99971 1.99974C7.34312 1.99974 6.00011 3.34272 6.00011 4.99936C6.00011 6.656 7.34312 7.99897 8.99971 7.99897C10.6564 7.99897 11.9993 6.656 11.9993 4.99936C11.9993 4.20381 11.6834 3.44085 11.1208 2.87831C10.5582 2.31577 9.79521 1.99974 8.99971 1.99974ZM4.00037 4.99936C4.00037 2.23829 6.23865 0 8.99971 0C10.3257 0 11.5972 0.526719 12.5349 1.46428C13.4723 2.40184 13.9991 3.67345 13.9991 4.99936C13.9991 7.76047 11.7608 9.99872 8.99971 9.99872C6.23865 9.99872 4.00037 7.76047 4.00037 4.99936Z\" fill=\"#5E5E5E\"/>\r\n </svg>\r\n }\r\n </div>\r\n \r\n <div class=\"compatibility-score\">\r\n {{ datasets[selectedDatasetIndex].score || 0 }}%\r\n </div>\r\n </div>\r\n \r\n <div class=\"selector-tooltip-container\">\r\n @if (isSelectorTooltipVisible) {\r\n <lib-alert-popup title=\"CLIENT_DASHBOARD.ALERT_POPUP.PROSPECT_SELECTOR.TITLE\" description=\"CLIENT_DASHBOARD.ALERT_POPUP.PROSPECT_SELECTOR.DESCRIPTION\" (closed)=\"onClosedSelectorTooltip($event)\"></lib-alert-popup>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".align-chart{display:flex;justify-content:center;align-items:center}.d3-container{width:100%;position:relative;min-height:350px;display:flex;flex-direction:column;align-items:center;transition:all .5s ease;padding:20px;box-sizing:border-box}.d3-chart{width:121px;height:121px;min-width:121px;min-height:121px;max-width:121px;max-height:121px;position:relative;display:flex;justify-content:center;align-items:center;transition:all .5s ease;border-radius:127.93px;border:.5px solid #FE3C72;background:linear-gradient(180deg,#27242c,#0c0b0e);box-shadow:inset -.84px -.84px 3.34px #cbc7d180,inset 7.1px 9.19px 8.35px 1.04px #111014b3;padding:0;overflow:visible;aspect-ratio:1/1}.d3-chart ::ng-deep svg{width:121px;height:121px;position:absolute;top:0;left:0;overflow:visible}.chartInfo{margin-top:24px;width:100%;display:flex;justify-content:center}.datachart{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.legend-item{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;padding:8px 12px;background-color:#464a4c4d;border-radius:8px;color:#666;transition:all .2s ease}.legend-item:hover{background-color:#464a4c80;transform:translateY(-1px)}.legend-color{width:18px;height:18px;border-radius:50%;background-color:#fff;flex-shrink:0}.chart-tooltip{z-index:1000;display:none;position:fixed;top:0;left:50px!important;transform:scale(1)!important;pointer-events:auto}::ng-deep .line-label{font-family:Gilroy,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:9.6px!important;line-height:normal!important;letter-spacing:-.106px!important;fill:#fe3c72!important;text-shadow:0 2.56px 1.6px #000!important}.prospect-selector-container{width:100%;margin-top:4px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding-left:calc(50% - 60px)}.prospect-head{position:relative;width:40px;height:40px}.prospect-head .head-bg{position:absolute;top:0;left:0}.prospect-head .prospect-image{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:35px;height:35px;border-radius:50%;object-fit:cover}.prospect-head .user-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.compatibility-score{color:var(--dark-white-100, #FFF);font-family:Gilroy;font-size:8px;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.07px}.prospect-group{width:100%;display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer}.prospect-group .prospect-content{display:flex;flex-direction:column;align-items:center;gap:4px}.prospect-group .selector-tooltip-container{width:max-content;transform:scale(.6);pointer-events:auto;margin-left:-30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: ["title", "description", "timeState", "number"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5061
5061
|
}
|
|
5062
5062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SpiderChartComponent, decorators: [{
|
|
5063
5063
|
type: Component,
|
|
5064
|
-
args: [{ selector: 'lib-spider-chart', standalone: true, imports: [CommonModule, AlertPopupComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [InitialsPipe], template: "<div class=\"container\" [class.active]=\"isTooltipActive\">\r\n <div class=\"d3-container\">\r\n <div class=\"d3-chart\" #D3Chart>\r\n <div #tooltipContainer class=\"chart-tooltip\">\r\n <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\" (closed)=\"onClosedAlert($event)\"></lib-alert-popup>\r\n </div>\r\n </div>\r\n @if (showChartInfo && !isTooltipActive) {\r\n <div class=\"chartInfo\">\r\n @if (datasets.length > 0) {\r\n <div class=\"datachart\">\r\n @for (dataset of datasets; let j = $index; track dataset) {\r\n <div class=\"legend-item\">\r\n <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\r\n {{ dataset.title }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (isTooltipActive && datasets.length > 0) {\r\n <div class=\"prospect-selector-container\">\r\n <div class=\"prospect-group\" (click)=\"selectNextProspect()\">\r\n <div class=\"prospect-content\">\r\n <div class=\"prospect-head\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" class=\"head-bg\">\r\n <ellipse cx=\"20\" cy=\"19.8031\" rx=\"20\" ry=\"19.8031\" fill=\"url(#paint0_linear_524_5213)\"/>\r\n <defs>\r\n <linearGradient id=\"paint0_linear_524_5213\" x1=\"35.9487\" y1=\"1.83015\" x2=\"27.3749\" y2=\"45.6436\" gradientUnits=\"userSpaceOnUse\">\r\n <stop offset=\"0.581821\" stop-color=\"#27242C\"/>\r\n <stop offset=\"1\" stop-color=\"#0C0B0E\"/>\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n \r\n @if (datasets[selectedDatasetIndex].image) {\r\n <img [src]=\"datasets[selectedDatasetIndex].image\" class=\"prospect-image\" alt=\"Prospect image\" />\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"21\" viewBox=\"0 0 18 21\" fill=\"none\" class=\"user-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.64788 11.9999C5.6644 11.9991 5.68093 11.9987 5.69746 11.9987H12.3019C12.3185 11.9987 12.335 11.9991 12.3515 11.9999C14.6646 12.1147 16.7148 13.5224 17.6536 15.6376C18.328 16.9866 17.952 18.3222 17.0911 19.2419C16.2573 20.1325 14.9656 20.6643 13.6231 20.6643H4.3763C3.03431 20.6643 1.74298 20.1323 0.909396 19.2419C0.0485599 18.3224 -0.327845 16.987 0.345575 15.6379C1.28444 13.5224 3.33479 12.1148 5.64788 11.9999ZM5.7236 13.9985C4.16794 14.0845 2.79187 15.0382 2.16577 16.4663C2.15801 16.484 2.14974 16.5015 2.14098 16.5187C1.89031 17.0107 1.98391 17.4636 2.36924 17.8752C2.78748 18.3219 3.53057 18.6645 4.3763 18.6645H13.6231C14.4697 18.6645 15.213 18.3218 15.6311 17.8752C16.0163 17.4639 16.1097 17.0114 15.8587 16.5192C15.8499 16.5019 15.8415 16.4841 15.8336 16.4663C15.2076 15.0382 13.8315 14.0845 12.2758 13.9985H5.7236Z\" fill=\"#5E5E5E\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.99971 1.99974C7.34312 1.99974 6.00011 3.34272 6.00011 4.99936C6.00011 6.656 7.34312 7.99897 8.99971 7.99897C10.6564 7.99897 11.9993 6.656 11.9993 4.99936C11.9993 4.20381 11.6834 3.44085 11.1208 2.87831C10.5582 2.31577 9.79521 1.99974 8.99971 1.99974ZM4.00037 4.99936C4.00037 2.23829 6.23865 0 8.99971 0C10.3257 0 11.5972 0.526719 12.5349 1.46428C13.4723 2.40184 13.9991 3.67345 13.9991 4.99936C13.9991 7.76047 11.7608 9.99872 8.99971 9.99872C6.23865 9.99872 4.00037 7.76047 4.00037 4.99936Z\" fill=\"#5E5E5E\"/>\r\n </svg>\r\n }\r\n </div>\r\n \r\n <div class=\"compatibility-score\">\r\n {{ datasets[selectedDatasetIndex].score || 0 }}%\r\n </div>\r\n </div>\r\n \r\n <div class=\"selector-tooltip-container\">\r\n @if (isSelectorTooltipVisible) {\r\n <lib-alert-popup title=\"CLIENT_DASHBOARD.ALERT_POPUP.PROSPECT_SELECTOR.TITLE\" description=\"CLIENT_DASHBOARD.ALERT_POPUP.PROSPECT_SELECTOR.DESCRIPTION\" (closed)=\"onClosedSelectorTooltip($event)\"></lib-alert-popup>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".align-chart{display:flex;justify-content:center;align-items:center}.d3-container{width:100%;position:relative;min-height:350px;display:flex;flex-direction:column;align-items:center;transition:all .5s ease;padding:20px;box-sizing:border-box}.d3-chart{width:121px;height:121px;min-width:121px;min-height:121px;max-width:121px;max-height:121px;position:relative;display:flex;justify-content:center;align-items:center;transition:all .5s ease;border-radius:127.93px;border:.5px solid #FE3C72;background:linear-gradient(180deg,#27242c,#0c0b0e);box-shadow:inset -.84px -.84px 3.34px #cbc7d180,inset 7.1px 9.19px 8.35px 1.04px #111014b3;padding:0;overflow:visible;aspect-ratio:1/1}.d3-chart ::ng-deep svg{width:121px;height:121px;position:absolute;top:0;left:0;overflow:visible}.chartInfo{margin-top:24px;width:100%;display:flex;justify-content:center}.datachart{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.legend-item{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;padding:8px 12px;background-color:#464a4c4d;border-radius:8px;color:#666;transition:all .2s ease}.legend-item:hover{background-color:#464a4c80;transform:translateY(-1px)}.legend-color{width:18px;height:18px;border-radius:50%;background-color:#fff;flex-shrink:0}.chart-tooltip{z-index:1000;display:none;position:fixed;top:0;
|
|
5064
|
+
args: [{ selector: 'lib-spider-chart', standalone: true, imports: [CommonModule, AlertPopupComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [InitialsPipe], template: "<div class=\"container\" [class.active]=\"isTooltipActive\">\r\n <div class=\"d3-container\">\r\n <div class=\"d3-chart\" #D3Chart>\r\n <div #tooltipContainer class=\"chart-tooltip\">\r\n <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\" (closed)=\"onClosedAlert($event)\"></lib-alert-popup>\r\n </div>\r\n </div>\r\n @if (showChartInfo && !isTooltipActive) {\r\n <div class=\"chartInfo\">\r\n @if (datasets.length > 0) {\r\n <div class=\"datachart\">\r\n @for (dataset of datasets; let j = $index; track dataset) {\r\n <div class=\"legend-item\">\r\n <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\r\n {{ dataset.title }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (isTooltipActive && datasets.length > 0) {\r\n <div class=\"prospect-selector-container\">\r\n <div class=\"prospect-group\" (click)=\"selectNextProspect()\">\r\n <div class=\"prospect-content\">\r\n <div class=\"prospect-head\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" class=\"head-bg\">\r\n <ellipse cx=\"20\" cy=\"19.8031\" rx=\"20\" ry=\"19.8031\" fill=\"url(#paint0_linear_524_5213)\"/>\r\n <defs>\r\n <linearGradient id=\"paint0_linear_524_5213\" x1=\"35.9487\" y1=\"1.83015\" x2=\"27.3749\" y2=\"45.6436\" gradientUnits=\"userSpaceOnUse\">\r\n <stop offset=\"0.581821\" stop-color=\"#27242C\"/>\r\n <stop offset=\"1\" stop-color=\"#0C0B0E\"/>\r\n </linearGradient>\r\n </defs>\r\n </svg>\r\n \r\n @if (datasets[selectedDatasetIndex].image) {\r\n <img [src]=\"datasets[selectedDatasetIndex].image\" class=\"prospect-image\" alt=\"Prospect image\" />\r\n } @else {\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"21\" viewBox=\"0 0 18 21\" fill=\"none\" class=\"user-icon\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.64788 11.9999C5.6644 11.9991 5.68093 11.9987 5.69746 11.9987H12.3019C12.3185 11.9987 12.335 11.9991 12.3515 11.9999C14.6646 12.1147 16.7148 13.5224 17.6536 15.6376C18.328 16.9866 17.952 18.3222 17.0911 19.2419C16.2573 20.1325 14.9656 20.6643 13.6231 20.6643H4.3763C3.03431 20.6643 1.74298 20.1323 0.909396 19.2419C0.0485599 18.3224 -0.327845 16.987 0.345575 15.6379C1.28444 13.5224 3.33479 12.1148 5.64788 11.9999ZM5.7236 13.9985C4.16794 14.0845 2.79187 15.0382 2.16577 16.4663C2.15801 16.484 2.14974 16.5015 2.14098 16.5187C1.89031 17.0107 1.98391 17.4636 2.36924 17.8752C2.78748 18.3219 3.53057 18.6645 4.3763 18.6645H13.6231C14.4697 18.6645 15.213 18.3218 15.6311 17.8752C16.0163 17.4639 16.1097 17.0114 15.8587 16.5192C15.8499 16.5019 15.8415 16.4841 15.8336 16.4663C15.2076 15.0382 13.8315 14.0845 12.2758 13.9985H5.7236Z\" fill=\"#5E5E5E\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.99971 1.99974C7.34312 1.99974 6.00011 3.34272 6.00011 4.99936C6.00011 6.656 7.34312 7.99897 8.99971 7.99897C10.6564 7.99897 11.9993 6.656 11.9993 4.99936C11.9993 4.20381 11.6834 3.44085 11.1208 2.87831C10.5582 2.31577 9.79521 1.99974 8.99971 1.99974ZM4.00037 4.99936C4.00037 2.23829 6.23865 0 8.99971 0C10.3257 0 11.5972 0.526719 12.5349 1.46428C13.4723 2.40184 13.9991 3.67345 13.9991 4.99936C13.9991 7.76047 11.7608 9.99872 8.99971 9.99872C6.23865 9.99872 4.00037 7.76047 4.00037 4.99936Z\" fill=\"#5E5E5E\"/>\r\n </svg>\r\n }\r\n </div>\r\n \r\n <div class=\"compatibility-score\">\r\n {{ datasets[selectedDatasetIndex].score || 0 }}%\r\n </div>\r\n </div>\r\n \r\n <div class=\"selector-tooltip-container\">\r\n @if (isSelectorTooltipVisible) {\r\n <lib-alert-popup title=\"CLIENT_DASHBOARD.ALERT_POPUP.PROSPECT_SELECTOR.TITLE\" description=\"CLIENT_DASHBOARD.ALERT_POPUP.PROSPECT_SELECTOR.DESCRIPTION\" (closed)=\"onClosedSelectorTooltip($event)\"></lib-alert-popup>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".align-chart{display:flex;justify-content:center;align-items:center}.d3-container{width:100%;position:relative;min-height:350px;display:flex;flex-direction:column;align-items:center;transition:all .5s ease;padding:20px;box-sizing:border-box}.d3-chart{width:121px;height:121px;min-width:121px;min-height:121px;max-width:121px;max-height:121px;position:relative;display:flex;justify-content:center;align-items:center;transition:all .5s ease;border-radius:127.93px;border:.5px solid #FE3C72;background:linear-gradient(180deg,#27242c,#0c0b0e);box-shadow:inset -.84px -.84px 3.34px #cbc7d180,inset 7.1px 9.19px 8.35px 1.04px #111014b3;padding:0;overflow:visible;aspect-ratio:1/1}.d3-chart ::ng-deep svg{width:121px;height:121px;position:absolute;top:0;left:0;overflow:visible}.chartInfo{margin-top:24px;width:100%;display:flex;justify-content:center}.datachart{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.legend-item{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;padding:8px 12px;background-color:#464a4c4d;border-radius:8px;color:#666;transition:all .2s ease}.legend-item:hover{background-color:#464a4c80;transform:translateY(-1px)}.legend-color{width:18px;height:18px;border-radius:50%;background-color:#fff;flex-shrink:0}.chart-tooltip{z-index:1000;display:none;position:fixed;top:0;left:50px!important;transform:scale(1)!important;pointer-events:auto}::ng-deep .line-label{font-family:Gilroy,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:9.6px!important;line-height:normal!important;letter-spacing:-.106px!important;fill:#fe3c72!important;text-shadow:0 2.56px 1.6px #000!important}.prospect-selector-container{width:100%;margin-top:4px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding-left:calc(50% - 60px)}.prospect-head{position:relative;width:40px;height:40px}.prospect-head .head-bg{position:absolute;top:0;left:0}.prospect-head .prospect-image{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:35px;height:35px;border-radius:50%;object-fit:cover}.prospect-head .user-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.compatibility-score{color:var(--dark-white-100, #FFF);font-family:Gilroy;font-size:8px;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.07px}.prospect-group{width:100%;display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer}.prospect-group .prospect-content{display:flex;flex-direction:column;align-items:center;gap:4px}.prospect-group .selector-tooltip-container{width:max-content;transform:scale(.6);pointer-events:auto;margin-left:-30px}\n"] }]
|
|
5065
5065
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { d3Chart: [{
|
|
5066
5066
|
type: ViewChild,
|
|
5067
5067
|
args: ['D3Chart']
|