@naniteninja/dashboard-components-lib 2.1.15 → 2.1.17
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.
|
@@ -4914,6 +4914,18 @@ class SpiderChartComponent {
|
|
|
4914
4914
|
this.cdr.detectChanges();
|
|
4915
4915
|
// Position logic handled in CSS for center alignment
|
|
4916
4916
|
toolTip.style('display', 'block');
|
|
4917
|
+
const chartEl = this.d3Chart?.nativeElement;
|
|
4918
|
+
if (chartEl) {
|
|
4919
|
+
const rect = chartEl.getBoundingClientRect();
|
|
4920
|
+
const x = rect.right + 12;
|
|
4921
|
+
const y = rect.top + rect.height / 2;
|
|
4922
|
+
toolTip
|
|
4923
|
+
.style('position', 'fixed')
|
|
4924
|
+
.style('left', `${x}px`)
|
|
4925
|
+
.style('top', `${y}px`)
|
|
4926
|
+
.style('transform', 'translateY(-50%) scale(0.6)')
|
|
4927
|
+
.style('z-index', '1000');
|
|
4928
|
+
}
|
|
4917
4929
|
}
|
|
4918
4930
|
createPolygons(group, datasets, rScale, angleSlice) {
|
|
4919
4931
|
group.selectAll('polygon').remove();
|
|
@@ -5045,11 +5057,11 @@ class SpiderChartComponent {
|
|
|
5045
5057
|
this.createPolygons(this.svg, datasets, rScale, angleSlice);
|
|
5046
5058
|
}
|
|
5047
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 }); }
|
|
5048
|
-
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\">\n <div class=\"d3-container\">\n <div class=\"d3-chart\" #D3Chart>\n <div #tooltipContainer class=\"chart-tooltip\">\n <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\" (closed)=\"onClosedAlert($event)\"></lib-alert-popup>\n </div>\n </div>\n @if (showChartInfo && !isTooltipActive) {\n <div class=\"chartInfo\">\n @if (datasets.length > 0) {\n <div class=\"datachart\">\n @for (dataset of datasets; let j = $index; track dataset) {\n <div class=\"legend-item\">\n <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\n {{ dataset.title }}\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (isTooltipActive && datasets.length > 0) {\n <div class=\"prospect-selector-container\">\n <div class=\"prospect-group\" (click)=\"selectNextProspect()\">\n <div class=\"prospect-content\">\n <div class=\"prospect-head\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" class=\"head-bg\">\n <ellipse cx=\"20\" cy=\"19.8031\" rx=\"20\" ry=\"19.8031\" fill=\"url(#paint0_linear_524_5213)\"/>\n <defs>\n <linearGradient id=\"paint0_linear_524_5213\" x1=\"35.9487\" y1=\"1.83015\" x2=\"27.3749\" y2=\"45.6436\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.581821\" stop-color=\"#27242C\"/>\n <stop offset=\"1\" stop-color=\"#0C0B0E\"/>\n </linearGradient>\n </defs>\n </svg>\n \n @if (datasets[selectedDatasetIndex].image) {\n <img [src]=\"datasets[selectedDatasetIndex].image\" class=\"prospect-image\" />\n } @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"21\" viewBox=\"0 0 18 21\" fill=\"none\" class=\"user-icon\">\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\"/>\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\"/>\n </svg>\n }\n </div>\n \n <div class=\"compatibility-score\">\n {{ datasets[selectedDatasetIndex].score || 0 }}%\n </div>\n </div>\n \n <div class=\"selector-tooltip-container\">\n @if (isSelectorTooltipVisible) {\n <lib-alert-popup title=\"
|
|
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\">\n <div class=\"d3-container\">\n <div class=\"d3-chart\" #D3Chart>\n <div #tooltipContainer class=\"chart-tooltip\">\n <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\" (closed)=\"onClosedAlert($event)\"></lib-alert-popup>\n </div>\n </div>\n @if (showChartInfo && !isTooltipActive) {\n <div class=\"chartInfo\">\n @if (datasets.length > 0) {\n <div class=\"datachart\">\n @for (dataset of datasets; let j = $index; track dataset) {\n <div class=\"legend-item\">\n <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\n {{ dataset.title }}\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (isTooltipActive && datasets.length > 0) {\n <div class=\"prospect-selector-container\">\n <div class=\"prospect-group\" (click)=\"selectNextProspect()\">\n <div class=\"prospect-content\">\n <div class=\"prospect-head\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" class=\"head-bg\">\n <ellipse cx=\"20\" cy=\"19.8031\" rx=\"20\" ry=\"19.8031\" fill=\"url(#paint0_linear_524_5213)\"/>\n <defs>\n <linearGradient id=\"paint0_linear_524_5213\" x1=\"35.9487\" y1=\"1.83015\" x2=\"27.3749\" y2=\"45.6436\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.581821\" stop-color=\"#27242C\"/>\n <stop offset=\"1\" stop-color=\"#0C0B0E\"/>\n </linearGradient>\n </defs>\n </svg>\n \n @if (datasets[selectedDatasetIndex].image) {\n <img [src]=\"datasets[selectedDatasetIndex].image\" class=\"prospect-image\" alt=\"Prospect image\" />\n } @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"21\" viewBox=\"0 0 18 21\" fill=\"none\" class=\"user-icon\">\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\"/>\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\"/>\n </svg>\n }\n </div>\n \n <div class=\"compatibility-score\">\n {{ datasets[selectedDatasetIndex].score || 0 }}%\n </div>\n </div>\n \n <div class=\"selector-tooltip-container\">\n @if (isSelectorTooltipVisible) {\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>\n }\n </div>\n </div>\n </div>\n }\n </div>\n</div>\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:0;transform:translate(-9999px,-9999px) scale(.6);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 }); }
|
|
5049
5061
|
}
|
|
5050
5062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SpiderChartComponent, decorators: [{
|
|
5051
5063
|
type: Component,
|
|
5052
|
-
args: [{ selector: 'lib-spider-chart', standalone: true, imports: [CommonModule, AlertPopupComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [InitialsPipe], template: "<div class=\"container\" [class.active]=\"isTooltipActive\">\n <div class=\"d3-container\">\n <div class=\"d3-chart\" #D3Chart>\n <div #tooltipContainer class=\"chart-tooltip\">\n <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\" (closed)=\"onClosedAlert($event)\"></lib-alert-popup>\n </div>\n </div>\n @if (showChartInfo && !isTooltipActive) {\n <div class=\"chartInfo\">\n @if (datasets.length > 0) {\n <div class=\"datachart\">\n @for (dataset of datasets; let j = $index; track dataset) {\n <div class=\"legend-item\">\n <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\n {{ dataset.title }}\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (isTooltipActive && datasets.length > 0) {\n <div class=\"prospect-selector-container\">\n <div class=\"prospect-group\" (click)=\"selectNextProspect()\">\n <div class=\"prospect-content\">\n <div class=\"prospect-head\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" class=\"head-bg\">\n <ellipse cx=\"20\" cy=\"19.8031\" rx=\"20\" ry=\"19.8031\" fill=\"url(#paint0_linear_524_5213)\"/>\n <defs>\n <linearGradient id=\"paint0_linear_524_5213\" x1=\"35.9487\" y1=\"1.83015\" x2=\"27.3749\" y2=\"45.6436\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.581821\" stop-color=\"#27242C\"/>\n <stop offset=\"1\" stop-color=\"#0C0B0E\"/>\n </linearGradient>\n </defs>\n </svg>\n \n @if (datasets[selectedDatasetIndex].image) {\n <img [src]=\"datasets[selectedDatasetIndex].image\" class=\"prospect-image\" />\n } @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"21\" viewBox=\"0 0 18 21\" fill=\"none\" class=\"user-icon\">\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\"/>\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\"/>\n </svg>\n }\n </div>\n \n <div class=\"compatibility-score\">\n {{ datasets[selectedDatasetIndex].score || 0 }}%\n </div>\n </div>\n \n <div class=\"selector-tooltip-container\">\n @if (isSelectorTooltipVisible) {\n <lib-alert-popup title=\"
|
|
5064
|
+
args: [{ selector: 'lib-spider-chart', standalone: true, imports: [CommonModule, AlertPopupComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [InitialsPipe], template: "<div class=\"container\" [class.active]=\"isTooltipActive\">\n <div class=\"d3-container\">\n <div class=\"d3-chart\" #D3Chart>\n <div #tooltipContainer class=\"chart-tooltip\">\n <lib-alert-popup [title]=\"titleAlertPopup\" [description]=\"descriptionAlertPopup\" [timeState]=\"timeStateAlertPopup\" [number]=\"numberAlertPopup\" (closed)=\"onClosedAlert($event)\"></lib-alert-popup>\n </div>\n </div>\n @if (showChartInfo && !isTooltipActive) {\n <div class=\"chartInfo\">\n @if (datasets.length > 0) {\n <div class=\"datachart\">\n @for (dataset of datasets; let j = $index; track dataset) {\n <div class=\"legend-item\">\n <div [style.border]=\"'5px solid ' + polygon_colors?.[j]?.value\" [style.boxShadow]=\"'0px 0px 12px ' + polygon_colors?.[j]?.value\" class=\"legend-color\"></div>\n {{ dataset.title }}\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (isTooltipActive && datasets.length > 0) {\n <div class=\"prospect-selector-container\">\n <div class=\"prospect-group\" (click)=\"selectNextProspect()\">\n <div class=\"prospect-content\">\n <div class=\"prospect-head\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" class=\"head-bg\">\n <ellipse cx=\"20\" cy=\"19.8031\" rx=\"20\" ry=\"19.8031\" fill=\"url(#paint0_linear_524_5213)\"/>\n <defs>\n <linearGradient id=\"paint0_linear_524_5213\" x1=\"35.9487\" y1=\"1.83015\" x2=\"27.3749\" y2=\"45.6436\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.581821\" stop-color=\"#27242C\"/>\n <stop offset=\"1\" stop-color=\"#0C0B0E\"/>\n </linearGradient>\n </defs>\n </svg>\n \n @if (datasets[selectedDatasetIndex].image) {\n <img [src]=\"datasets[selectedDatasetIndex].image\" class=\"prospect-image\" alt=\"Prospect image\" />\n } @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"21\" viewBox=\"0 0 18 21\" fill=\"none\" class=\"user-icon\">\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\"/>\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\"/>\n </svg>\n }\n </div>\n \n <div class=\"compatibility-score\">\n {{ datasets[selectedDatasetIndex].score || 0 }}%\n </div>\n </div>\n \n <div class=\"selector-tooltip-container\">\n @if (isSelectorTooltipVisible) {\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>\n }\n </div>\n </div>\n </div>\n }\n </div>\n</div>\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:0;transform:translate(-9999px,-9999px) scale(.6);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"] }]
|
|
5053
5065
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { d3Chart: [{
|
|
5054
5066
|
type: ViewChild,
|
|
5055
5067
|
args: ['D3Chart']
|
|
@@ -10729,11 +10741,97 @@ class MatcherViewportComponent {
|
|
|
10729
10741
|
];
|
|
10730
10742
|
this.traitVisualPrefWeights = [...this.traitVisualAttrWeights];
|
|
10731
10743
|
this.traitVisualPrefWeights[0] = Math.max(0, this.traitVisualPrefWeights[0] - 0.05);
|
|
10732
|
-
|
|
10733
|
-
|
|
10734
|
-
|
|
10735
|
-
|
|
10736
|
-
|
|
10744
|
+
const selectedPairs = this.prefMatchManagerItems
|
|
10745
|
+
.filter((item) => item.selected)
|
|
10746
|
+
.map((item) => {
|
|
10747
|
+
const match = this.clientMatches.find((m) => m._id === item.id || m.id === item.id);
|
|
10748
|
+
if (!match) {
|
|
10749
|
+
return null;
|
|
10750
|
+
}
|
|
10751
|
+
const prospectAge = match.prospectData?.prospectAge ??
|
|
10752
|
+
match.prospectAge;
|
|
10753
|
+
if (typeof prospectAge === 'number' && Number.isFinite(prospectAge)) {
|
|
10754
|
+
if (prospectAge < this.prefMatchManagerMinAge || prospectAge > this.prefMatchManagerMaxAge) {
|
|
10755
|
+
return null;
|
|
10756
|
+
}
|
|
10757
|
+
}
|
|
10758
|
+
return { item, match };
|
|
10759
|
+
})
|
|
10760
|
+
.filter((pair) => !!pair);
|
|
10761
|
+
if (!selectedPairs.length) {
|
|
10762
|
+
this.traitVisualNodes = [
|
|
10763
|
+
{
|
|
10764
|
+
id: 0,
|
|
10765
|
+
name: 'Central Node',
|
|
10766
|
+
initialPosition: [0, 0, 0],
|
|
10767
|
+
isSupermassiveBlackhole: true,
|
|
10768
|
+
color: '#00001e',
|
|
10769
|
+
attributes: { attr1: 50, attr2: 50, attr3: 50, attr4: 50, attr5: 50, attr6: 50, attr7: 50, attr8: 50 },
|
|
10770
|
+
preferences: { attr1: 0, attr2: 50, attr3: 0, attr4: 50, attr5: 0, attr6: 50, attr7: 0, attr8: 50 },
|
|
10771
|
+
},
|
|
10772
|
+
];
|
|
10773
|
+
this.traitVisualConfig = {
|
|
10774
|
+
nodeData: this.traitVisualNodes,
|
|
10775
|
+
attributeWeights: this.traitVisualAttrWeights,
|
|
10776
|
+
preferenceWeights: this.traitVisualPrefWeights,
|
|
10777
|
+
defaultZoomLevel: 1.75,
|
|
10778
|
+
backgroundColor: 'transparent',
|
|
10779
|
+
primaryColor: '#c300ff',
|
|
10780
|
+
secondaryColor: '#ff3366',
|
|
10781
|
+
blackholeRepulsion: 1.0,
|
|
10782
|
+
simulationSpeed: 3.25,
|
|
10783
|
+
pairwiseRepulsionMain: 52,
|
|
10784
|
+
pairwiseRepulsionSecondary: 42,
|
|
10785
|
+
dissimilarityRepulsionExponent: 2.0,
|
|
10786
|
+
minDistanceWidths: 0.25,
|
|
10787
|
+
maxDistanceWidths: 4.5,
|
|
10788
|
+
particleSizeScale: 1.0,
|
|
10789
|
+
particleDepth: 1.0,
|
|
10790
|
+
title: this.config?.toastInfo?.[this.alertStatusFields.compatibilityProfileTrait]?.title || this.translate.instant('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE'),
|
|
10791
|
+
description: this.config?.toastInfo?.[this.alertStatusFields.compatibilityProfileTrait]?.description || this.translate.instant('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION')
|
|
10792
|
+
};
|
|
10793
|
+
this.traitVisualVisible = false;
|
|
10794
|
+
this.cdr.markForCheck();
|
|
10795
|
+
setTimeout(() => {
|
|
10796
|
+
this.traitVisualVisible = true;
|
|
10797
|
+
this.cdr.markForCheck();
|
|
10798
|
+
}, 50);
|
|
10799
|
+
return;
|
|
10800
|
+
}
|
|
10801
|
+
const nodes = [
|
|
10802
|
+
{
|
|
10803
|
+
id: 0,
|
|
10804
|
+
name: 'Central Node',
|
|
10805
|
+
initialPosition: [0, 0, 0],
|
|
10806
|
+
isSupermassiveBlackhole: true,
|
|
10807
|
+
color: '#00001e',
|
|
10808
|
+
attributes: { attr1: 50, attr2: 50, attr3: 50, attr4: 50, attr5: 50, attr6: 50, attr7: 50, attr8: 50 },
|
|
10809
|
+
preferences: { attr1: 0, attr2: 50, attr3: 0, attr4: 50, attr5: 0, attr6: 50, attr7: 0, attr8: 50 },
|
|
10810
|
+
},
|
|
10811
|
+
];
|
|
10812
|
+
const radius = 5;
|
|
10813
|
+
selectedPairs.forEach((pair, index) => {
|
|
10814
|
+
const { item } = pair;
|
|
10815
|
+
const angle = (index * 2 * Math.PI) / selectedPairs.length;
|
|
10816
|
+
const x = radius * Math.cos(angle);
|
|
10817
|
+
const z = radius * Math.sin(angle);
|
|
10818
|
+
const attributes = {
|
|
10819
|
+
attr1: 50, attr2: 0, attr3: 50, attr4: 0, attr5: 50, attr6: 0, attr7: 50, attr8: 0,
|
|
10820
|
+
};
|
|
10821
|
+
const preferences = {
|
|
10822
|
+
attr1: 0, attr2: 50, attr3: 0, attr4: 50, attr5: 0, attr6: 50, attr7: 0, attr8: 50,
|
|
10823
|
+
};
|
|
10824
|
+
nodes.push({
|
|
10825
|
+
id: index + 1,
|
|
10826
|
+
name: item.name,
|
|
10827
|
+
initialPosition: [x, 0, z],
|
|
10828
|
+
isSupermassiveBlackhole: false,
|
|
10829
|
+
color: '#00001e',
|
|
10830
|
+
attributes,
|
|
10831
|
+
preferences,
|
|
10832
|
+
});
|
|
10833
|
+
});
|
|
10834
|
+
this.traitVisualNodes = nodes;
|
|
10737
10835
|
// Update stable config object for the visual canvas
|
|
10738
10836
|
this.traitVisualConfig = {
|
|
10739
10837
|
nodeData: this.traitVisualNodes,
|