Добавлена страница Summary
All checks were successful
CI / build-test (push) Successful in 31s
Release / pack-and-publish (release) Successful in 30s

This commit is contained in:
FrigaT
2025-12-27 03:05:01 +03:00
parent 66f1166166
commit f988d9af1e
4 changed files with 401 additions and 9 deletions

View File

@@ -5,6 +5,11 @@ public static class HtmlMinifier
{ {
public static string MinifyHtml(string html) public static string MinifyHtml(string html)
{ {
var htmlMinifier = new WebMarkupMin.Core.HtmlMinifier();
var result = htmlMinifier.Minify(html, generateStatistics: true);
return result.MinifiedContent;
if (string.IsNullOrEmpty(html)) if (string.IsNullOrEmpty(html))
return html; return html;

View File

@@ -1445,3 +1445,237 @@ svg .flowchart-link {
* { * {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
/* Summary page styles */
.summary-section {
margin: var(--spacing-xl) var(--spacing-xxxl);
padding: var(--spacing-xl);
background-color: var(--color-background);
border-radius: var(--border-radius-large);
box-shadow: var(--shadow-4);
transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
.summary-section:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-8);
}
.summary-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-xl);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--color-border);
}
.summary-title {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.summary-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
.stat-card {
padding: var(--spacing-lg);
border-radius: var(--border-radius-medium);
background-color: var(--color-background-alt);
border: 1px solid var(--color-border);
transition: all var(--transition-medium);
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-8);
}
.stat-card.critical {
border-top: 4px solid var(--color-critical);
}
.stat-card.warning {
border-top: 4px solid var(--color-warning);
}
.stat-card.info {
border-top: 4px solid var(--color-info);
}
.stat-card.success {
border-top: 4px solid var(--color-success);
}
.stat-value {
font-size: var(--font-size-xxxl);
font-weight: 700;
margin-bottom: var(--spacing-xs);
line-height: 1;
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-bottom: var(--spacing-xs);
}
.stat-change {
font-size: var(--font-size-xs);
display: flex;
align-items: center;
gap: 2px;
}
.stat-change.positive {
color: var(--color-success);
}
.stat-change.negative {
color: var(--color-critical);
}
.files-overview {
margin-top: var(--spacing-xxl);
}
.files-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--spacing-lg);
}
.file-card {
padding: var(--spacing-lg);
border-radius: var(--border-radius-medium);
background-color: var(--color-background-alt);
border: 1px solid var(--color-border);
transition: all var(--transition-medium);
display: flex;
flex-direction: column;
}
.file-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-8);
}
.file-card-header {
display: flex;
align-items: flex-start; /* Change from center to flex-start */
justify-content: space-between;
margin-bottom: var(--spacing-md);
gap: var(--spacing-sm); /* Add gap between name and badges */
}
.file-name-small {
font-weight: 600;
color: var(--color-text-primary);
/* Remove truncation properties */
overflow: visible;
text-overflow: clip;
white-space: normal; /* Change from nowrap to normal */
word-wrap: break-word;
word-break: break-word;
flex: 1;
line-height: 1.4;
max-height: none; /* Remove max-height if exists */
display: block; /* Change from -webkit-box */
-webkit-line-clamp: unset; /* Remove line clamp */
-webkit-box-orient: unset;
}
.file-violations {
display: flex;
gap: var(--spacing-xs);
justify-content: flex-end;
flex-shrink: 0;
align-items: flex-start; /* Align badges to top */
}
.violation-badge {
font-size: var(--font-size-xs);
padding: var(--spacing-xxs) var(--spacing-xs);
border-radius: var(--border-radius-small);
font-weight: 600;
}
.violation-badge.critical {
background-color: var(--color-critical-bg);
color: var(--color-critical);
border: 1px solid var(--color-critical);
}
.violation-badge.warning {
background-color: var(--color-warning-bg);
color: var(--color-warning);
border: 1px solid var(--color-warning);
}
.violation-badge.info {
background-color: var(--color-info-bg);
color: var(--color-info);
border: 1px solid var(--color-info);
}
.progress-bar {
height: 8px;
background-color: var(--color-background-neutral);
border-radius: var(--border-radius-small);
overflow: hidden;
margin-top: var(--spacing-md);
display: flex; /* Изменено с block на flex */
}
.progress-fill {
height: 100%;
transition: width var(--transition-medium);
flex-shrink: 0; /* Предотвращает сжатие */
}
.progress-fill.critical {
background-color: var(--color-critical);
order: 1;
}
.progress-fill.warning {
background-color: var(--color-warning);
order: 2;
}
.progress-fill.info {
background-color: var(--color-info);
order: 3;
}
@media (max-width: 768px) {
.summary-section {
margin: var(--spacing-lg);
padding: var(--spacing-lg);
}
.summary-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.files-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.summary-stats-grid {
grid-template-columns: 1fr;
}
.stat-value {
font-size: var(--font-size-xxl);
}
}

View File

@@ -35,6 +35,7 @@ class ReportRenderer {
this.tabsList.innerHTML = ''; this.tabsList.innerHTML = '';
//Add file tabs
this.files.forEach((file, index) => { this.files.forEach((file, index) => {
const tab = document.createElement('button'); const tab = document.createElement('button');
tab.className = `tab ${index === 0 ? 'active' : ''}`; tab.className = `tab ${index === 0 ? 'active' : ''}`;
@@ -65,23 +66,23 @@ class ReportRenderer {
this.tabsList.appendChild(tab); 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) { if (this.diagram.h || this.diagram.hasDiagram) {
const diagramTab = document.createElement('button'); const diagramTab = document.createElement('button');
diagramTab.className = 'tab'; diagramTab.className = 'tab';
diagramTab.dataset.target = 'mermaid'; 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 = ` diagramTab.innerHTML = `
<div class="tab-inner"> <div class="tab-inner">
<span class="tab-text">Диаграмма</span> <span class="tab-text">Диаграмма</span>
${diagramCountersHTML}
</div> </div>
`; `;
@@ -277,6 +278,8 @@ class ReportRenderer {
this.reportsContainer.appendChild(diagramDiv); this.reportsContainer.appendChild(diagramDiv);
} }
this.renderSummaryReport();
} }
createViolationSection(severity, violations) { 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); 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) { escapeHtml(text) {
const div = document.createElement('div'); const div = document.createElement('div');
div.textContent = text; div.textContent = text;

View File

@@ -28,7 +28,8 @@
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>
<PackageReference Include="Microsoft.SqlServer.TransactSql.ScriptDom" Version="170.128.0" /> <PackageReference Include="Microsoft.SqlServer.TransactSql.ScriptDom" Version="170.147.0" />
<PackageReference Include="WebMarkupMin.Core" Version="2.20.1" />
</ItemGroup> </ItemGroup>
</Project> </Project>