From 101687f9dbcf3c57d6e722fdfb3ed0643c20074b Mon Sep 17 00:00:00 2001 From: masoodafar-web Date: Thu, 27 Aug 2026 21:30:06 +0330 Subject: [PATCH] feat(organization-chart): update statistics display and improve layout - Updated the organization chart to include additional statistics such as left and right leg counts, tree depth, and weaker leg identification for enhanced user insights. - Improved the layout and styling of the statistics bar for better visibility and user experience. - Adjusted the CSS for the organization chart to refine the overall presentation and responsiveness. These changes enhance the clarity and usability of the organization chart, providing users with essential metrics at a glance. --- src/FrontOffice.Main/FrontOffice.Main.csproj | 2 +- .../Components/OrganizationChart.razor | 54 +++++++++++------ .../Components/OrganizationChart.razor.cs | 6 +- .../Utilities/NetworkMembershipDtos.cs | 6 ++ .../Utilities/NetworkMembershipService.cs | 4 ++ .../wwwroot/css/org-chart.css | 58 ++++++++++++------- src/FrontOffice.Main/wwwroot/js/org-chart.js | 15 +---- 7 files changed, 87 insertions(+), 58 deletions(-) diff --git a/src/FrontOffice.Main/FrontOffice.Main.csproj b/src/FrontOffice.Main/FrontOffice.Main.csproj index b2ac49b..91e20bb 100644 --- a/src/FrontOffice.Main/FrontOffice.Main.csproj +++ b/src/FrontOffice.Main/FrontOffice.Main.csproj @@ -11,7 +11,7 @@ - + diff --git a/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor b/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor index 445b046..822efb6 100644 --- a/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor +++ b/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor @@ -52,29 +52,47 @@
} - @* Stats Bar *@ + @* Stats Bar — فقط آمار خود کاربر (نه نودهای درخت) *@ @if (_statistics != null && !_isLoading) {
-
- کل اعضا: - @_statistics.TotalMembers +
+
+ کل اعضا: + @_statistics.TotalMembers +
+
+ سازمان چپ: + @_statistics.LeftLegCount +
+
+ سازمان راست: + @_statistics.RightLegCount +
+
+ عمق: + @_statistics.TreeDepth +
+
+ پای ضعیف: + @(_statistics.WeakerLeg == "Left" ? "چپ" : "راست") +
-
- سازمان چپ: - @_statistics.LeftLegCount +
+
+ امتیاز طلایی: + چپ @_statistics.GoldLeftLegTotal + · + راست @_statistics.GoldRightLegTotal +
-
- سازمان راست: - @_statistics.RightLegCount -
-
- عمق: - @_statistics.TreeDepth -
-
- پای ضعیف: - @(_statistics.WeakerLeg == "Left" ? "چپ" : "راست") +
+
+ امتیاز نقره‌ای: + چپ @_statistics.SilverLeftLegTotal + · + راست @_statistics.SilverRightLegTotal +
} diff --git a/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor.cs b/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor.cs index 87e6719..4f6ac05 100644 --- a/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor.cs +++ b/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor.cs @@ -110,11 +110,7 @@ public partial class OrganizationChart : IAsyncDisposable activationWeekNumber = n.ActivationWeekNumber, joinedAt = n.JoinedAt, referralCode = n.ReferralCode, - packageName = n.PackageName ?? string.Empty, - goldLeftLegTotal = n.GoldLeftLegTotal, - goldRightLegTotal = n.GoldRightLegTotal, - silverLeftLegTotal = n.SilverLeftLegTotal, - silverRightLegTotal = n.SilverRightLegTotal + packageName = n.PackageName ?? string.Empty }).ToArray(); await JSRuntime.InvokeVoidAsync("OrgChart.init", "org-chart-container", flatData, _dotNetHelper); diff --git a/src/FrontOffice.Main/Utilities/NetworkMembershipDtos.cs b/src/FrontOffice.Main/Utilities/NetworkMembershipDtos.cs index 25a0664..eb655e8 100644 --- a/src/FrontOffice.Main/Utilities/NetworkMembershipDtos.cs +++ b/src/FrontOffice.Main/Utilities/NetworkMembershipDtos.cs @@ -152,4 +152,10 @@ public class NetworkStatisticsDto public int TreeDepth { get; set; } public string WeakerLeg { get; set; } = string.Empty; // "Left" or "Right" public LastMemberDto? LastMember { get; set; } + + /// آخرین امتیاز پای چپ/راست — فقط خود کاربر (نوار پایین شجره) + public int GoldLeftLegTotal { get; set; } + public int GoldRightLegTotal { get; set; } + public int SilverLeftLegTotal { get; set; } + public int SilverRightLegTotal { get; set; } } diff --git a/src/FrontOffice.Main/Utilities/NetworkMembershipService.cs b/src/FrontOffice.Main/Utilities/NetworkMembershipService.cs index 6bfa218..eb225d3 100644 --- a/src/FrontOffice.Main/Utilities/NetworkMembershipService.cs +++ b/src/FrontOffice.Main/Utilities/NetworkMembershipService.cs @@ -96,6 +96,10 @@ public class NetworkMembershipService TotalMembers = response.TotalMembers, TreeDepth = response.MaxDepth, WeakerLeg = response.WeakerLeg, + GoldLeftLegTotal = response.GoldLeftLegTotal, + GoldRightLegTotal = response.GoldRightLegTotal, + SilverLeftLegTotal = response.SilverLeftLegTotal, + SilverRightLegTotal = response.SilverRightLegTotal, LastMember = response.LastMember != null ? new LastMemberDto { UserId = response.LastMember.UserId, diff --git a/src/FrontOffice.Main/wwwroot/css/org-chart.css b/src/FrontOffice.Main/wwwroot/css/org-chart.css index b80b895..5b34af8 100644 --- a/src/FrontOffice.Main/wwwroot/css/org-chart.css +++ b/src/FrontOffice.Main/wwwroot/css/org-chart.css @@ -72,10 +72,10 @@ /* Compact Header */ .node-header-compact { display: flex; - align-items: flex-start; + align-items: center; gap: 6px; padding: 6px 8px; - min-height: 100%; + height: 100%; background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%); } @@ -141,22 +141,7 @@ max-width: 120px; } -/* D3: طلایی / نقره‌ای — پای چپ و راست */ -.node-leg-scores { - margin-top: 3px; - line-height: 1.25; - font-size: 8px; - font-weight: 600; -} - -.node-leg-scores .leg-score-line.gold { - color: #b8860b; -} - -.node-leg-scores .leg-score-line.silver { - color: #607d8b; -} - +/* D3: امتیاز طلایی/نقره‌ای فقط در نوار پایین شجره (.org-chart-stats) */ /* Referral Code - only for club active members */ .node-referral { display: flex; @@ -386,14 +371,27 @@ /* Stats Bar */ .org-chart-stats { display: flex; + flex-direction: column; align-items: center; justify-content: center; - gap: 24px; + gap: 8px; padding: 12px 16px; background: #f8f9fa; border-top: 1px solid #e9ecef; } +.org-chart-stats-row { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 24px; +} + +.org-chart-stats-row.leg-scores { + gap: 12px; +} + .stat-item { display: flex; align-items: center; @@ -401,6 +399,21 @@ font-size: 13px; } +.stat-item.leg-score-gold .stat-label { + color: #b8860b; + font-weight: 600; +} + +.stat-item.leg-score-silver .stat-label { + color: #607d8b; + font-weight: 600; +} + +.stat-sep { + color: #adb5bd; + margin: 0 2px; +} + .stat-label { color: #6c757d; } @@ -464,10 +477,13 @@ } .org-chart-stats { - flex-wrap: wrap; - gap: 12px; + gap: 8px; padding: 10px; } + + .org-chart-stats-row { + gap: 12px; + } .stat-item { font-size: 12px; diff --git a/src/FrontOffice.Main/wwwroot/js/org-chart.js b/src/FrontOffice.Main/wwwroot/js/org-chart.js index 9fb6c67..0de2b93 100644 --- a/src/FrontOffice.Main/wwwroot/js/org-chart.js +++ b/src/FrontOffice.Main/wwwroot/js/org-chart.js @@ -37,8 +37,8 @@ window.OrgChart = { this.chart = new d3.OrgChart() .container('#' + containerId) .data(data) - .nodeWidth((d) => 150) - .nodeHeight((d) => 112) + .nodeWidth((d) => 140) + .nodeHeight((d) => 85) .childrenMargin((d) => 50) .compactMarginBetween((d) => 15) .compactMarginPair((d) => 15) @@ -80,16 +80,6 @@ window.OrgChart = {
` : ''; - const gL = data.goldLeftLegTotal ?? 0; - const gR = data.goldRightLegTotal ?? 0; - const sL = data.silverLeftLegTotal ?? 0; - const sR = data.silverRightLegTotal ?? 0; - const legScoresHtml = ` -
-
طلایی: چپ ${gL} · راست ${gR}
-
نقره‌ای: چپ ${sL} · راست ${sR}
-
`; - return `
@@ -98,7 +88,6 @@ window.OrgChart = {
${data.fullName || 'بدون نام'}
L${data.level || 0}${!isRoot ? ' • ' + (data.position === 'Left' ? 'چپ' : 'راست') : ''}
${packageBadge} - ${legScoresHtml} ${referralCodeHtml}