| 1 |
/** |
| 2 |
* Stats page: Match Confidence distribution doughnut chart. |
| 3 |
* |
| 4 |
* Reads its configuration (labels + counts) from a JSON blob on the |
| 5 |
* canvas element's `data-abj404-confidence` attribute, so the PHP |
| 6 |
* render path doesn't need to inline any JS. |
| 7 |
* |
| 8 |
* Renders into #abj404-chart-confidence using Chart.js (bundled with the |
| 9 |
* plugin and enqueued as a hard dependency, so window.Chart is normally |
| 10 |
* already defined). As a fallback it also waits for the `abj404ChartJsLoaded` |
| 11 |
* event that statsTrends.js dispatches, in case of script-order differences. |
| 12 |
*/ |
| 13 |
(function () { |
| 14 |
'use strict'; |
| 15 |
|
| 16 |
// Returns the translated chart-data-unusable message when wp.i18n's |
| 17 |
// locale data is available, else the English fallback. The literal must |
| 18 |
// be passed directly to wp.i18n.__() (not through a variable) so |
| 19 |
// make-pot can statically extract it; mirrors the switch-dispatched |
| 20 |
// literal pattern in support-request-modal-view.js's t(key) for the same |
| 21 |
// situation: a user-facing string needed on a failure path where the |
| 22 |
// normal PHP-supplied, pre-translated config (cfg) is unavailable. |
| 23 |
function chartDataUnusableMessage() { |
| 24 |
if (window.wp && window.wp.i18n && typeof window.wp.i18n.__ === 'function') { |
| 25 |
return window.wp.i18n.__('Could not load chart data. Reload this page and try again.', '404-solution'); |
| 26 |
} |
| 27 |
return 'Could not load chart data. Reload this page and try again.'; |
| 28 |
} |
| 29 |
|
| 30 |
function readConfig(canvas) { |
| 31 |
var raw = canvas.getAttribute('data-abj404-confidence'); |
| 32 |
if (!raw) { |
| 33 |
return null; |
| 34 |
} |
| 35 |
try { |
| 36 |
return JSON.parse(raw); |
| 37 |
} catch (e) { |
| 38 |
// Malformed config JSON previously left the canvas permanently |
| 39 |
// blank with no diagnostic trail. The counts in the legend |
| 40 |
// below it are rendered server-side and stay correct, but the |
| 41 |
// visual chart itself cannot be built without cfg. Log for |
| 42 |
// diagnosis and hint at recovery via a native tooltip instead |
| 43 |
// of a silently blank canvas. |
| 44 |
if (window.console && window.console.error) { |
| 45 |
window.console.error('404 Solution: abj404-chart-confidence data-abj404-confidence attribute is not valid JSON', raw, e); |
| 46 |
} |
| 47 |
canvas.title = chartDataUnusableMessage(); |
| 48 |
return null; |
| 49 |
} |
| 50 |
} |
| 51 |
|
| 52 |
function renderConfidenceChart() { |
| 53 |
var canvas = document.getElementById('abj404-chart-confidence'); |
| 54 |
if (!canvas || !window.Chart) { |
| 55 |
return; |
| 56 |
} |
| 57 |
var cfg = readConfig(canvas); |
| 58 |
if (!cfg) { |
| 59 |
return; |
| 60 |
} |
| 61 |
new window.Chart(canvas, { |
| 62 |
type: 'doughnut', |
| 63 |
data: { |
| 64 |
labels: [cfg.labelHigh, cfg.labelMedium, cfg.labelLow, cfg.labelManual], |
| 65 |
datasets: [{ |
| 66 |
data: [cfg.high, cfg.medium, cfg.low, cfg.manual], |
| 67 |
// allow-hardcoded-color: chart dataset palette; matches .abj404-conf-* dots in CSS |
| 68 |
backgroundColor: ['#28a745', '#ffc107', '#dc3545', '#adb5bd'] |
| 69 |
}] |
| 70 |
}, |
| 71 |
options: { |
| 72 |
responsive: true, |
| 73 |
plugins: { legend: { display: false } } |
| 74 |
} |
| 75 |
}); |
| 76 |
} |
| 77 |
|
| 78 |
if (window.Chart) { |
| 79 |
renderConfidenceChart(); |
| 80 |
} else { |
| 81 |
document.addEventListener('abj404ChartJsLoaded', renderConfidenceChart); |
| 82 |
} |
| 83 |
})(); |
| 84 |
|
