peptide-repo/peptide-news-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix chart sizing with prepareCanvas wrapper

Browse Source 
Chart.js with responsive:true + maintainAspectRatio:false requires
the parent container to have an explicit height. Without it, charts
grow unbounded. The prepareCanvas() helper wraps each canvas in a
height-constrained div before Chart initialization.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Terence Ong
2026-04-06 11:15:26 +07:00
parent 973fb1117a
commit fee4f0f52a
1 changed files with 36 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
admin/js/admin-script.js
View File

@@ -4,7 +4,12 @@
* Initialises Chart.js charts using the data exported by dashboard.php
* via the global `peptideNewsDashboardData` object.
*
* @since 1.1.0
* Chart.js with responsive:true + maintainAspectRatio:false requires
* the parent container to have an explicit height. The prepareCanvas()
* helper wraps each <canvas> in a height-constrained <div> so that
* charts render at a predictable, bounded size.
*
* @since 1.2.1
*/
(function () {
@@ -35,10 +40,35 @@
]
};
/**
* Wrap a canvas element in a height-constrained container.
*
* Chart.js sets canvas dimensions via JS, overriding CSS max-height.
* The only reliable way to constrain chart height is to give the
* *parent* element an explicit height.
*
* @param {string} id Canvas element ID.
* @param {number} height Desired chart height in pixels.
* @return {HTMLCanvasElement|null} The canvas, or null if not found.
*/
function prepareCanvas(id, height) {
var canvas = document.getElementById(id);
if (!canvas) {
return null;
}
var wrapper = document.createElement('div');
wrapper.style.position = 'relative';
wrapper.style.height = height + 'px';
wrapper.style.width = '100%';
canvas.parentNode.insertBefore(wrapper, canvas);
wrapper.appendChild(canvas);
return canvas;
}
/* ── 1. Click Trends — Line Chart ── */
var trendsCanvas = document.getElementById('pn-trends-chart');
var trendsCanvas = prepareCanvas('pn-trends-chart', 300);
if (trendsCanvas && data.trends) {
var trendsLabels = data.trends.map(function (row) { return row.click_date; });
var trendsLabels = data.trends.map(function (row) { return row.click_date || row.stat_date; });
var trendsClicks = data.trends.map(function (row) { return parseInt(row.total_clicks, 10) || 0; });
var trendsUnique = data.trends.map(function (row) { return parseInt(row.total_unique, 10) || 0; });
@@ -99,7 +129,7 @@
}
/* ── 2. Device Breakdown — Doughnut Chart ── */
var devicesCanvas = document.getElementById('pn-devices-chart');
var devicesCanvas = prepareCanvas('pn-devices-chart', 250);
if (devicesCanvas && data.devices) {
var deviceLabels = data.devices.map(function (row) { return row.device_type || 'Unknown'; });
var deviceCounts = data.devices.map(function (row) { return parseInt(row.click_count, 10) || 0; });
@@ -130,10 +160,10 @@
}
/* ── 3. Source Performance — Bar Chart ── */
var sourcesCanvas = document.getElementById('pn-sources-chart');
var sourcesCanvas = prepareCanvas('pn-sources-chart', 250);
if (sourcesCanvas && data.sources) {
var sourceLabels = data.sources.map(function (row) { return row.source || 'Unknown'; });
var sourceCounts = data.sources.map(function (row) { return parseInt(row.click_count, 10) || 0; });
var sourceCounts = data.sources.map(function (row) { return parseInt(row.click_count || row.total_clicks, 10) || 0; });
new Chart(sourcesCanvas, {
type: 'bar',