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
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:
parent
63ee509e1e
commit
bd553be0d4
@ -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 } }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user