Добавлена страница Summary

SQLLinter/Infrastructure/Reporters/Static/HtmlFormatter.js

@@ -35,6 +35,7 @@ class ReportRenderer {
 
         this.tabsList.innerHTML = '';
 
+        //Add file tabs
         this.files.forEach((file, index) => {
             const tab = document.createElement('button');
             tab.className = `tab ${index === 0 ? 'active' : ''}`;
@@ -65,23 +66,23 @@ class ReportRenderer {
             this.tabsList.appendChild(tab);
         });
 
+        // Add Summary tab
+        const summaryTab = document.createElement('button');
+        summaryTab.className = 'tab';
+        summaryTab.dataset.target = 'summary_report';
+        summaryTab.innerHTML = `<div class="tab-inner"><span class="tab-text">Summary</span></div>`;
+        tabsList.appendChild(summaryTab);
+
+        //Add diagram tab if exists
         if (this.diagram.h || this.diagram.hasDiagram) {
             const diagramTab = document.createElement('button');
             diagramTab.className = 'tab';
             diagramTab.dataset.target = 'mermaid';
             // Создаем пустые счетчики для диаграммы
-            const diagramCountersHTML = `
-                <div class="tab-counters">
-                    <span class="tab-counter critical empty" title="0 critical"></span>
-                    <span class="tab-counter warning empty" title="0 warning"></span>
-                    <span class="tab-counter info empty" title="0 info"></span>
-                </div>
-            `;
 
             diagramTab.innerHTML = `
                 <div class="tab-inner">
                     <span class="tab-text">Диаграмма</span>
-                    ${diagramCountersHTML}
                 </div>
             `;
 
@@ -277,6 +278,8 @@ class ReportRenderer {
 
             this.reportsContainer.appendChild(diagramDiv);
         }
+
+        this.renderSummaryReport();
     }
 
     createViolationSection(severity, violations) {
@@ -390,6 +393,155 @@ class ReportRenderer {
         return (file.v.c?.length || 0) + (file.v.w?.length || 0) + (file.v.i?.length || 0);
     }
 
+    renderSummaryReport() {
+        const summaryDiv = document.createElement('div');
+        summaryDiv.id = 'summary_report';
+        summaryDiv.className = 'file-report';
+        summaryDiv.style.display = 'none';
+
+        // Calculate total statistics
+        let totalCritical = 0;
+        let totalWarning = 0;
+        let totalInfo = 0;
+        let totalFiles = this.files.length;
+
+        this.files.forEach(file => {
+            totalCritical += file.v.c?.length || 0;
+            totalWarning += file.v.w?.length || 0;
+            totalInfo += file.v.i?.length || 0;
+        });
+
+        const totalViolations = totalCritical + totalWarning + totalInfo;
+
+        // Calculate percentages for progress bars - FIXED
+        let criticalPercent = totalViolations > 0 ? (totalCritical / totalViolations * 100) : 0;
+        let warningPercent = totalViolations > 0 ? (totalWarning / totalViolations * 100) : 0;
+        let infoPercent = totalViolations > 0 ? (totalInfo / totalViolations * 100) : 0;
+
+        // Ensure sum equals 100%
+        const totalPercent = criticalPercent + warningPercent + infoPercent;
+        if (totalPercent > 0 && Math.abs(totalPercent - 100) > 0.01) {
+            // Adjust the largest segment to make sum = 100%
+            const maxVal = Math.max(criticalPercent, warningPercent, infoPercent);
+            if (maxVal === criticalPercent) {
+                criticalPercent = 100 - warningPercent - infoPercent;
+            } else if (maxVal === warningPercent) {
+                warningPercent = 100 - criticalPercent - infoPercent;
+            } else {
+                infoPercent = 100 - criticalPercent - warningPercent;
+            }
+        }
+
+        // Format for display
+        const criticalPercentDisplay = criticalPercent.toFixed(1);
+        const warningPercentDisplay = warningPercent.toFixed(1);
+        const infoPercentDisplay = infoPercent.toFixed(1);
+
+        summaryDiv.innerHTML = `
+        <div class="file-title-container">
+            <div class="file-title">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9 17H7V10H9V17ZM13 12H11V17H13V12ZM17 7H15V17H17V7ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <span class="file-name">Сводный отчет</span>
+            </div>
+        </div>
+        <div class="summary-section">
+            <div class="summary-header">
+                <div class="summary-title">
+                    <h2>Общая статистика</h2>
+                </div>
+            </div>
+            <div class="summary-stats-grid">
+                <div class="stat-card success">
+                    <div class="stat-value">${totalFiles}</div>
+                    <div class="stat-label">Всего файлов</div>
+                </div>
+                <div class="stat-card critical">
+                    <div class="stat-value">${totalCritical}</div>
+                    <div class="stat-label">Critical нарушений</div>
+                </div>
+                <div class="stat-card warning">
+                    <div class="stat-value">${totalWarning}</div>
+                    <div class="stat-label">Warning нарушений</div>
+                </div>
+                <div class="stat-card info">
+                    <div class="stat-value">${totalInfo}</div>
+                    <div class="stat-label">Info нарушений</div>
+                </div>
+            </div>
+            <div class="violation-distribution" style="margin-top: var(--spacing-xl);">
+                <div class="progress-bar">
+                    <div class="progress-fill critical" style="width: ${criticalPercent}%"></div>
+                    <div class="progress-fill warning" style="width: ${warningPercent}%"></div>
+                    <div class="progress-fill info" style="width: ${infoPercent}%"></div>
+                </div>
+                <div style="display: flex; justify-content: space-between; margin-top: var(--spacing-sm); font-size: var(--font-size-xs);">
+                    <span>Critical: ${totalCritical} (${criticalPercentDisplay}%)</span>
+                    <span>Warning: ${totalWarning} (${warningPercentDisplay}%)</span>
+                    <span>Info: ${totalInfo} (${infoPercentDisplay}%)</span>
+                </div>
+            </div>
+        </div>
+        <div class="summary-section files-overview">
+            <div class="summary-header">
+                <div class="summary-title">
+                    <h2>Статистика файлов</h2>
+                    <span class="severity-count">${totalFiles}</span>
+                </div>
+            </div>
+            <div class="files-grid">
+                ${this.files.map(file => {
+            const critical = file.v.c?.length || 0;
+            const warning = file.v.w?.length || 0;
+            const info = file.v.i?.length || 0;
+            const total = critical + warning + info;
+
+            // Calculate percentages for file progress bar - FIXED
+            let fileCriticalPercent = total > 0 ? (critical / total * 100) : 0;
+            let fileWarningPercent = total > 0 ? (warning / total * 100) : 0;
+            let fileInfoPercent = total > 0 ? (info / total * 100) : 0;
+
+            // Ensure sum equals 100%
+            const fileTotalPercent = fileCriticalPercent + fileWarningPercent + fileInfoPercent;
+            if (fileTotalPercent > 0 && Math.abs(fileTotalPercent - 100) > 0.01) {
+                // Adjust the largest segment to make sum = 100%
+                const maxVal = Math.max(fileCriticalPercent, fileWarningPercent, fileInfoPercent);
+                if (maxVal === fileCriticalPercent) {
+                    fileCriticalPercent = 100 - fileWarningPercent - fileInfoPercent;
+                } else if (maxVal === fileWarningPercent) {
+                    fileWarningPercent = 100 - fileCriticalPercent - fileInfoPercent;
+                } else {
+                    fileInfoPercent = 100 - fileCriticalPercent - fileWarningPercent;
+                }
+            }
+
+            return `<div class="file-card">
+                            <div class="file-card-header">
+                                <span class="file-name-small" title="${this.escapeHtml(file.n)}">${this.escapeHtml(file.n)}</span>
+                            </div>
+                            <div class="progress-bar">
+                                <div class="progress-fill critical" style="width: ${fileCriticalPercent}%"></div>
+                                <div class="progress-fill warning" style="width: ${fileWarningPercent}%"></div>
+                                <div class="progress-fill info" style="width: ${fileInfoPercent}%"></div>
+                            </div>
+                            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: var(--spacing-xs); font-size: var(--font-size-xs);">
+                                <span>Total: ${total}</span>
+                                <div class="file-violations">
+                                    <span class="violation-badge critical" title="${critical} critical">${critical}</span>
+                                    <span class="violation-badge warning" title="${warning} warning">${warning}</span>
+                                    <span class="violation-badge info" title="${info} info">${info}</span>
+                                </div>
+                            </div>
+                    </div>`;
+            }).join('')}
+            </div>
+        </div>
+        `;
+
+        this.reportsContainer.appendChild(summaryDiv);
+    }
+
     escapeHtml(text) {
         const div = document.createElement('div');
         div.textContent = text;