Merge pull request #14 from KebanFiru/feat/branch_relative_features

KebanFiru · web-flow · commit c5d651bc0793 · 2026-05-06T10:27:35.000+03:00
Enhance README and update version to 3.0.0; implement branch-aware st…
diff --git a/README.md b/README.md
@@ -1,10 +1,7 @@
 # CodeCount - VS Code Extension
 
 <!-- Badges -->
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![VS Code](https://img.shields.io/badge/VS%20Code-1.108.2+-blue)](https://code.visualstudio.com/)
 [![VS Marketplace](https://img.shields.io/visual-studio-marketplace/v/KebanFiru.CodeLineCounter?label=VS%20Marketplace&color=0078d7)](https://marketplace.visualstudio.com/items?itemName=KebanFiru.CodeLineCounter)
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.9+-blue)](https://www.typescriptlang.org/)
 
 > Quickly analyze your project's codebase with comprehensive metrics, Git analytics, and interactive dashboards.
 
@@ -17,24 +14,39 @@
 ###  Code Metrics
 - **Workspace Analysis** - Total line counts for entire projects
 - **File-by-File Breakdown** - Statistics for individual files
-- **Language Distribution** - Analyze code across file types with expandable lists
+- **Branch-Aware Language Distribution** - Analyze code by file type with branch-specific stats on feature branches
 - **Comment Detection** - Separate counts for comment and blank lines
 - **Gitignore Support** - Automatically respects `.gitignore` patterns
 
 ###  Git Analytics (Repository View)
-- **Contributor Statistics** - Track contributions with added/deleted line counts
+- **Branch-Aware Contributor Statistics** - Track contributions with smart branch detection:
+  - Feature branches show all branch contributors
+  - Main branch shows complete repository history
 - **Commit Trends** - Visualize commits, additions, and deletions over time
 - **Monthly Activity** - Monitor development activity by month
 - **Work Patterns** - Understand coding patterns by weekday and hour
 - **Repository Metrics** - Total contributors, commits, and lines changed
 
 ###  Interactive Dashboard
-- **Real-Time Statistics Panel** - View metrics in VS Code sidebar
-- **Expandable Lists** - Top 3 preview with "Show all" toggle for contributors and languages
-- **Responsive Charts** - Full-width visualizations using Chart.js v4.4.0
-- **Dark Mode Support** - Optimized for VS Code themes with white text on dark backgrounds
+- **Real-Time Statistics Panel** - View metrics in VS Code sidebar with instant updates
+- **Expandable Lists** - Top 3 preview with "Show all/Show less" toggle for:
+  - Contributors by lines changed
+  - Languages by line count
+- **Interactive Charts** - Fully responsive visualizations using Chart.js v4.4.0:
+  - Hover support with cursor feedback
+  - Tooltips with detailed information
+  - Horizontal bar charts for better readability
+- **Dark Mode Support** - Optimized for all VS Code themes with white text contrast
 - **Performance Optimized** - Instant analysis even for large projects
 
+##  Recent Improvements (v2.0.0)
+
+-  **Branch-aware statistics** - Contributors and languages now adapt to current branch context
+-  **Enhanced chart interactivity** - Improved hover states and tooltip visibility
+-  **Better data visualization** - Horizontal bar charts for cleaner contributor display
+-  **Refined UI/UX** - Simplified panels, better contrast, improved readability
+-  **Bug fixes** - Fixed chart rendering, toggle functionality, and text color consistency
+
 ##  Commands
 
 Access CodeCount commands via the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`):
@@ -67,10 +79,13 @@ Access CodeCount commands via the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P
 - Select the command you want to run
 
 #### Dashboard Features
-- **Expandable Lists** - Click "Show all" to expand contributors or languages
-- **Interactive Charts** - Hover over visualizations for detailed information
-- **Full-Width Analytics** - View commit trends, monthly activity, and work patterns
-- **Real-Time Updates** - Click refresh to update statistics
+- **Branch Context Awareness** - Statistics adapt based on your current branch:
+  - On feature branches: Shows contributors and languages specific to that branch
+  - On main/master: Displays full repository history
+- **Expandable Lists** - Click "Show all" / "Show less" to toggle between preview and full views
+- **Interactive Charts** - Hover over any visualization for detailed tooltips and data points
+- **Full-Width Analytics** - View commit trends, monthly activity, and work patterns across the repository
+- **Real-Time Updates** - Click refresh button to update statistics when branch or files change
 
 ##  Architecture
 
@@ -83,12 +98,25 @@ Access CodeCount commands via the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P
 
 ##  Configuration
 
+### Git Integration
 CodeCount respects your project's `.gitignore` file, automatically excluding:
 - `node_modules/`
 - `dist/` and `build/`
 - `.git/` directories
 - And any patterns defined in `.gitignore`
 
+### Branch-Aware Analytics
+
+**Feature Branches:** When you're on a feature branch (not main/master), CodeCount intelligently shows:
+- Contributors who have commits on your branch
+- Languages and files modified in your branch
+- Branch-specific statistics
+
+**Main Branch:** When on main or master, you see:
+- Complete repository history with all contributors
+- Cumulative language distribution across entire project
+- Full commit history and analytics
+
 ##  License
 
 This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "CodeLineCounter",
   "displayName": "CodeLineCounter",
   "description": "A tool for learn how much line of code your project contains",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "publisher": "KebanFiru",
   "license": "MIT",
   "homepage": "https://github.com/KebanFiru/CodeCount#readme",
diff --git a/src/services/StatsService.ts b/src/services/StatsService.ts
@@ -29,6 +29,44 @@ export class StatsService {
 			return { hasWorkspace: false, totalFiles: 0, filteredFiles: 0, stats: [] };
 		}
 
+		// Detect if on feature branch and get branch-specific file list
+		let branchFiles: Set<string> | undefined;
+		const rootPath = await this.getGitRoot();
+		if (rootPath) {
+			try {
+				const currentBranch = (await this.execGit(['rev-parse', '--abbrev-ref', 'HEAD'], rootPath)).trim();
+				const isMainBranch = currentBranch === 'main' || currentBranch === 'master' || currentBranch === 'origin/main' || currentBranch === 'origin/master';
+				
+				// For feature branches, get files changed since merge base with main
+				if (!isMainBranch) {
+					try {
+						// Find the merge base and get files changed since then
+						let mergeBase = '';
+						try {
+							mergeBase = (await this.execGit(['merge-base', 'HEAD', 'main'], rootPath)).trim();
+						} catch {
+							mergeBase = (await this.execGit(['merge-base', 'HEAD', 'master'], rootPath)).trim();
+						}
+						
+						if (mergeBase) {
+							const filesOutput = await this.execGit(['log', `${mergeBase}..HEAD`, '--name-only', '--pretty='], rootPath);
+							branchFiles = new Set(
+								filesOutput
+									.split(/\r?\n/)
+									.map(line => line.trim())
+									.filter(line => line.length > 0)
+							);
+						}
+					} catch {
+						// Fallback to all files if branch diff fails
+						branchFiles = undefined;
+					}
+				}
+			} catch {
+				// If git operations fail, use all files
+			}
+		}
+
 		const files = await vscode.workspace.findFiles(
 			'**/*',
 			'**/{node_modules,out,dist,.git}/**'
@@ -42,8 +80,18 @@ export class StatsService {
 			return { hasWorkspace: true, totalFiles: files.length, filteredFiles: 0, stats: [] };
 		}
 
+		// Filter to branch-specific files if on feature branch
+		let filesToCount = filtered;
+		if (branchFiles && branchFiles.size > 0) {
+			const workspaceRoot = vscode.workspace.workspaceFolders![0].uri.fsPath;
+			filesToCount = filtered.filter(uri => {
+				const relativePath = path.relative(workspaceRoot, uri.fsPath).replace(/\\/g, '/');
+				return branchFiles.has(relativePath);
+			});
+		}
+
 		const stats = new Map<string, number>();
-		for (const uri of filtered) {
+		for (const uri of filesToCount) {
 			try {
 				const document = await vscode.workspace.openTextDocument(uri);
 				const languageId = document.languageId || 'unknown';
@@ -61,7 +109,7 @@ export class StatsService {
 		return {
 			hasWorkspace: true,
 			totalFiles: files.length,
-			filteredFiles: filtered.length,
+			filteredFiles: branchFiles && branchFiles.size > 0 ? filesToCount.length : filtered.length,
 			stats: entries
 		};
 	}
@@ -521,6 +569,7 @@ export class StatsService {
 
 	private async getContributorStatsFromGit(rootPath: string): Promise<ContributorStat[]> {
 		// Use author email as the aggregation key to avoid duplicate names
+		// Always show the full branch history (main/feature/etc.)
 		const output = await this.execGit(
 			// Include full history reachable from HEAD (include merges)
 			['log', 'HEAD', '--numstat', `--pretty=${GIT_AUTHOR_PREFIX}%an|%aE`],
diff --git a/src/views/StatsWebviewPanel.ts b/src/views/StatsWebviewPanel.ts
@@ -7,7 +7,6 @@ import {
 	renderLanguageCharts,
 	renderLanguageTable,
 	renderContributorsChart,
-	renderIgnoredFilesSection,
 	renderRepoAnalytics
 } from './webview/templates';
 
@@ -106,8 +105,6 @@ export class StatsWebviewPanel {
 			${renderContributorsChart(contributorResult)}
 			${renderRepoAnalytics(repoAnalytics)}
 		</div>
-
-		${renderIgnoredFilesSection(languageResult)}
 	</div>
 
 	<script>
diff --git a/src/views/webview/components/contributors.ts b/src/views/webview/components/contributors.ts
@@ -50,6 +50,7 @@ export const renderContributorsChart = (
 
     const barLabels = result.stats.slice(0, 10).map(s => escapeHtml(s.name));
     const barData = result.stats.slice(0, 10).map(s => s.added + s.deleted);
+    const axisColor = '#ffffff';
 
     const branchLabel = result.branch && result.branch !== 'all' ? `<div class="muted" style="font-size:12px;margin-top:4px;">Branch: ${escapeHtml(result.branch)}</div>` : '';
 
@@ -70,45 +71,75 @@ export const renderContributorsChart = (
                     </div>` : ''}
                 </div>
                 <div>
-                    <div class="chart-container compact">
-                        <canvas id="contributorsAuthorBar" height="260"></canvas>
+                    <div class="chart-container" style="height:320px;">
+                        <canvas id="contributorsAuthorBar"></canvas>
                     </div>
                 </div>
             </div>
             <script>
+                const contributorsAxisColor = '#ffffff';
+                const contributorsGridColor = 'rgba(255,255,255,0.12)';
                 const labels = ${JSON.stringify(barLabels)};
                 const data = ${JSON.stringify(barData)};
                 const ctx = document.getElementById('contributorsAuthorBar');
                 if (ctx) {
-                    new Chart(ctx, {
-                        type: 'bar',
-                        data: { labels, datasets: [{ label: 'Lines Changed', data, backgroundColor: ${JSON.stringify(colors.slice(0, 10))} }] },
-                        options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { display: false } }, scales: { x: { ticks: { color: 'var(--fg)' } }, y: { ticks: { color: 'var(--fg)' }, beginAtZero: true } } }
-                    });
+                    try {
+                        new Chart(ctx, {
+                            type: 'bar',
+                            data: { labels, datasets: [{ label: 'Lines Changed', data, backgroundColor: ${JSON.stringify(colors.slice(0, 10))} }] },
+                            options: {
+                                indexAxis: 'y',
+                                responsive: true,
+                                maintainAspectRatio: false,
+                                interaction: { mode: 'nearest', intersect: true },
+                                layout: { padding: { left: 10, right: 10, top: 8, bottom: 8 } },
+                                plugins: {
+                                    legend: { display: false },
+                                    tooltip: {
+                                        enabled: true,
+                                        titleColor: contributorsAxisColor,
+                                        bodyColor: contributorsAxisColor
+                                    }
+                                },
+                                onHover: (_, activeElements, chart) => {
+                                    chart.canvas.style.cursor = activeElements.length > 0 ? 'pointer' : 'default';
+                                },
+                                scales: {
+                                    x: {
+                                        beginAtZero: true,
+                                        ticks: { color: contributorsAxisColor, font: { size: 11 } },
+                                        grid: { color: contributorsGridColor }
+                                    },
+                                    y: {
+                                        ticks: { color: contributorsAxisColor, font: { size: 11 }, autoSkip: false },
+                                        grid: { display: false }
+                                    }
+                                }
+                            }
+                        });
+                    } catch {
+                        // Keep toggle interaction available even if chart initialization fails.
+                    }
                 }
 
-                // Use delegated click handling and guard for DOM readiness
-                document.addEventListener('click', (ev) => {
-                    const target = ev.target;
-                    if (!(target instanceof HTMLElement)) return;
-                    if (target.id !== 'contributors-toggle') return;
+                const contributorsToggleBtn = document.getElementById('contributors-toggle');
+                const contributorsPreview = document.getElementById('contributors-list');
+                const contributorsAll = document.getElementById('contributors-all');
+                if (contributorsToggleBtn && contributorsPreview && contributorsAll) {
+                    contributorsToggleBtn.addEventListener('click', () => {
+                        if (contributorsAll.style.display === 'none' || getComputedStyle(contributorsAll).display === 'none') {
+                            contributorsPreview.style.display = 'none';
+                            contributorsAll.style.display = 'block';
+                            contributorsToggleBtn.textContent = 'Show less contributors';
+                        } else {
+                            contributorsPreview.style.display = 'block';
+                            contributorsAll.style.display = 'none';
+                            contributorsToggleBtn.textContent = 'Show all contributors';
+                        }
 
-                    const allEl = document.getElementById('contributors-all');
-                    const listEl = document.getElementById('contributors-list');
-                    if (!allEl || !listEl) return;
-
-                    if (allEl.style.display === 'none' || getComputedStyle(allEl).display === 'none') {
-                        listEl.style.display = 'none';
-                        allEl.style.display = 'block';
-                        target.textContent = 'Show fewer contributors';
-                    } else {
-                        listEl.style.display = 'block';
-                        allEl.style.display = 'none';
-                        target.textContent = 'Show all contributors';
-                    }
-
-                    window.__codecountRequestLayout?.();
-                });
+                        window.__codecountRequestLayout?.();
+                    });
+                }
             </script>
         </div>
     `;
diff --git a/src/views/webview/components/repoAnalytics.ts b/src/views/webview/components/repoAnalytics.ts
