fix: compact Top 5 posts chart - half bar height, 2-line labels, fixed 200px
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-02-20 08:39:59 +01:00
parent 63ee509e1e
commit bd553be0d4

View File

@ -467,7 +467,7 @@
<div class="fb-chart-card"><h4>Typy postow</h4><canvas id="postTypesChart-{{ company_id_key }}"></canvas></div>
<div class="fb-chart-card"><h4>Najlepszy dzien tygodnia</h4><canvas id="bestDayChart-{{ company_id_key }}"></canvas></div>
<div class="fb-chart-card"><h4>Najlepsza godzina</h4><canvas id="bestHourChart-{{ company_id_key }}"></canvas></div>
<div class="fb-chart-card" style="grid-column: 1 / -1;"><h4>Top 5 postow</h4><canvas id="topPostsChart-{{ company_id_key }}"></canvas></div>
<div class="fb-chart-card" style="grid-column: 1 / -1;"><h4>Top 5 postow</h4><div style="height:200px;"><canvas id="topPostsChart-{{ company_id_key }}"></canvas></div></div>
</div>
</div>
<div id="fbPostsContainer-{{ company_id_key }}"></div>
@ -1162,31 +1162,38 @@
// Chart 7: Top 5 posts (horizontal bar)
var scored = sorted.map(function(p) {
return {
label: (p.message || '(bez tekstu)').substring(0, 50) + (p.message && p.message.length > 50 ? '...' : ''),
label: (p.message || '(bez tekstu)').substring(0, 60) + (p.message && p.message.length > 60 ? '...' : ''),
score: (p.reactions_total || 0) + (p.comments || 0) * 2 + (p.shares || 0) * 3,
reactions: p.reactions_total || 0,
comments: p.comments || 0,
shares: p.shares || 0
};
}).sort(function(a, b) { return b.score - a.score; }).slice(0, 5);
// Split labels into 2-line arrays for compact display
var topLabels = scored.map(function(p) {
var t = p.label;
if (t.length > 30) return [t.substring(0, 30), t.substring(30)];
return [t];
});
var ctx7 = document.getElementById('topPostsChart-' + companyId).getContext('2d');
var chart7 = new Chart(ctx7, {
type: 'bar',
data: {
labels: scored.map(function(p) { return p.label; }),
labels: topLabels,
datasets: [
{ label: 'Reakcje', data: scored.map(function(p) { return p.reactions; }), backgroundColor: '#e8a819', borderRadius: 4 },
{ label: 'Komentarze', data: scored.map(function(p) { return p.comments; }), backgroundColor: '#42b72a', borderRadius: 4 },
{ label: 'Udostepnienia', data: scored.map(function(p) { return p.shares; }), backgroundColor: '#f5533d', borderRadius: 4 }
{ label: 'Reakcje', data: scored.map(function(p) { return p.reactions; }), backgroundColor: '#e8a819', borderRadius: 3, barThickness: 14 },
{ label: 'Komentarze', data: scored.map(function(p) { return p.comments; }), backgroundColor: '#42b72a', borderRadius: 3, barThickness: 14 },
{ label: 'Udostepnienia', data: scored.map(function(p) { return p.shares; }), backgroundColor: '#f5533d', borderRadius: 3, barThickness: 14 }
]
},
options: {
indexAxis: 'y',
responsive: true,
plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, padding: 8, font: { size: 11 } } } },
maintainAspectRatio: false,
plugins: { legend: { position: 'bottom', labels: { boxWidth: 10, padding: 6, font: { size: 10 } } } },
scales: {
x: { stacked: true, beginAtZero: true, ticks: { font: { size: 10 } } },
y: { stacked: true, ticks: { font: { size: 10 }, callback: function(val) { return this.getLabelForValue(val).substring(0, 35); } } }
y: { stacked: true, ticks: { font: { size: 9 }, autoSkip: false } }
}
}
});