| 1 |
( function () { |
| 2 |
function hexToRgb( hex ) { |
| 3 |
hex = hex.replace( /^#/, '' ); |
| 4 |
if ( hex.length === 3 ) hex = hex.split('').map(c=>c+c).join(''); |
| 5 |
const n = parseInt( hex, 16 ); |
| 6 |
return { r: (n>>16)&255, g: (n>>8)&255, b: n&255 }; |
| 7 |
} |
| 8 |
|
| 9 |
function loadChartJs( cb ) { |
| 10 |
if ( window.Chart ) { cb(); return; } |
| 11 |
var s = document.createElement('script'); |
| 12 |
s.src = 'https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js'; |
| 13 |
s.onload = cb; |
| 14 |
document.head.appendChild(s); |
| 15 |
} |
| 16 |
|
| 17 |
function initRadar( wrap ) { |
| 18 |
var canvas = wrap.querySelector('.bkrc-canvas'); |
| 19 |
if ( !canvas ) return; |
| 20 |
|
| 21 |
var labelsRaw = wrap.dataset.labels || ''; |
| 22 |
var size = parseInt( wrap.dataset.size, 10 ) || 400; |
| 23 |
var scaleMin = parseFloat( wrap.dataset.scaleMin ) || 0; |
| 24 |
var scaleMax = parseFloat( wrap.dataset.scaleMax ) || 100; |
| 25 |
var gridLines = parseInt( wrap.dataset.gridLines, 10 ) || 5; |
| 26 |
var showLegend = wrap.dataset.legend === '1'; |
| 27 |
var legendPos = wrap.dataset.legendPos || 'top'; |
| 28 |
var rawDs = wrap.dataset.datasets || '[]'; |
| 29 |
|
| 30 |
var labels = labelsRaw.split(',').map(l=>l.trim()); |
| 31 |
var datasets; |
| 32 |
try { datasets = JSON.parse(rawDs); } catch(e) { datasets = []; } |
| 33 |
|
| 34 |
canvas.width = size; |
| 35 |
canvas.height = size; |
| 36 |
|
| 37 |
var chartDatasets = datasets.map(function(ds) { |
| 38 |
var csvData = ds.data ? ds.data.split(',').map(function(v){ return parseFloat(v.trim()); }) : []; |
| 39 |
var rgb = hexToRgb( ds.color || '#6c3fb5' ); |
| 40 |
var alpha = ds.fillAlpha !== undefined ? ds.fillAlpha : 0.2; |
| 41 |
return { |
| 42 |
label: ds.label || '', |
| 43 |
data: csvData, |
| 44 |
borderColor: ds.color || '#6c3fb5', |
| 45 |
backgroundColor: 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + alpha + ')', |
| 46 |
pointBackgroundColor: ds.color || '#6c3fb5', |
| 47 |
fill: true, |
| 48 |
tension: 0.1 |
| 49 |
}; |
| 50 |
}); |
| 51 |
|
| 52 |
new window.Chart( canvas, { |
| 53 |
type: 'radar', |
| 54 |
data: { labels: labels, datasets: chartDatasets }, |
| 55 |
options: { |
| 56 |
responsive: false, |
| 57 |
plugins: { |
| 58 |
legend: { display: showLegend, position: legendPos } |
| 59 |
}, |
| 60 |
scales: { |
| 61 |
r: { |
| 62 |
min: scaleMin, |
| 63 |
max: scaleMax, |
| 64 |
ticks: { count: gridLines, backdropColor: 'transparent' }, |
| 65 |
grid: { color: 'rgba(0,0,0,0.1)' }, |
| 66 |
angleLines: { color: 'rgba(0,0,0,0.1)' } |
| 67 |
} |
| 68 |
} |
| 69 |
} |
| 70 |
}); |
| 71 |
} |
| 72 |
|
| 73 |
document.addEventListener('DOMContentLoaded', function () { |
| 74 |
var wraps = document.querySelectorAll('.bkrc-wrap[data-type="radar"]'); |
| 75 |
if ( !wraps.length ) return; |
| 76 |
loadChartJs( function () { |
| 77 |
wraps.forEach( initRadar ); |
| 78 |
}); |
| 79 |
}); |
| 80 |
}() ); |
| 81 |
|
