| 1 |
( function () { |
| 2 |
const el = window.wp.element.createElement; |
| 3 |
const { registerBlockType } = window.wp.blocks; |
| 4 |
const { InspectorControls, PanelColorSettings } = window.wp.blockEditor; |
| 5 |
const { PanelBody, RangeControl, SelectControl, TextControl, ToggleControl, Button } = window.wp.components; |
| 6 |
const { __ } = window.wp.i18n; |
| 7 |
var _tc; function getTypoControl() { return _tc || (_tc = window.bkbgTypographyControl); } |
| 8 |
var _tv; function getTypoCssVars() { return _tv || (_tv = window.bkbgTypoCssVars); } |
| 9 |
|
| 10 |
function DatasetEditor({ds,index,onChange,onRemove}) { |
| 11 |
function upd(k,v){onChange(index,Object.assign({},ds,{[k]:v}));} |
| 12 |
return el('div',{style:{border:'1px solid #ddd',borderRadius:'8px',padding:'10px',marginBottom:'8px',background:'#fafafa'}}, |
| 13 |
el(TextControl,{label:__('Label'),value:ds.label,onChange:v=>upd('label',v)}), |
| 14 |
el(TextControl,{label:__('Data (CSV, must match axis count)'),value:ds.data,onChange:v=>upd('data',v)}), |
| 15 |
el('label',{style:{display:'block',marginBottom:'4px'}},__('Color')), |
| 16 |
el('input',{type:'color',value:ds.color,onChange:e=>upd('color',e.target.value),style:{width:'100%',height:'34px',border:'1px solid #ccc',borderRadius:'4px',cursor:'pointer'}}), |
| 17 |
el(RangeControl,{label:__('Fill Opacity (0–1)'),value:Math.round((ds.fillAlpha||0.2)*100),min:0,max:100,onChange:v=>upd('fillAlpha',v/100)}), |
| 18 |
el(Button,{isDestructive:true,isSmall:true,onClick:()=>onRemove(index),style:{marginTop:'8px'}},__('Remove Dataset')) |
| 19 |
); |
| 20 |
} |
| 21 |
|
| 22 |
var v1Attributes = { |
| 23 |
"labels":{"type":"string","default":"Speed,Power,Range,Accuracy,Endurance,Agility"}, |
| 24 |
"datasets":{"type":"array","default":[{"label":"Team A","data":"65,80,75,90,60,85","color":"#6c3fb5","fillAlpha":0.2},{"label":"Team B","data":"80,55,90,70,85,65","color":"#e040fb","fillAlpha":0.2}]}, |
| 25 |
"size":{"type":"number","default":340}, |
| 26 |
"scaleMin":{"type":"number","default":0}, |
| 27 |
"scaleMax":{"type":"number","default":100}, |
| 28 |
"gridLines":{"type":"number","default":5}, |
| 29 |
"showLegend":{"type":"boolean","default":true}, |
| 30 |
"legendPos":{"type":"string","default":"top"}, |
| 31 |
"bgColor":{"type":"string","default":"#ffffff"}, |
| 32 |
"borderRadius":{"type":"number","default":12}, |
| 33 |
"title":{"type":"string","default":""}, |
| 34 |
"fontSize":{"type":"number","default":12}, |
| 35 |
"fontWeight":{"type":"number","default":600}, |
| 36 |
"lineHeight":{"type":"number","default":1.3} |
| 37 |
}; |
| 38 |
|
| 39 |
registerBlockType('blockenberg/radar-chart',{ |
| 40 |
edit: function(props){ |
| 41 |
const {attributes:attr,setAttributes}=props; |
| 42 |
var TC = getTypoControl(); |
| 43 |
function updateDs(i,next){const d=attr.datasets.slice();d[i]=next;setAttributes({datasets:d});} |
| 44 |
function removeDs(i){setAttributes({datasets:attr.datasets.filter((_,x)=>x!==i)});} |
| 45 |
|
| 46 |
var _tvFn = getTypoCssVars(); |
| 47 |
var wrapStyle = (function() { |
| 48 |
var s = {background:attr.bgColor,borderRadius:attr.borderRadius+'px',padding:'20px',textAlign:'center',width:'100%'}; |
| 49 |
if (_tvFn) Object.assign(s, _tvFn(attr.titleTypo || {}, '--bkrc-tt-')); |
| 50 |
return s; |
| 51 |
})(); |
| 52 |
const previewStyle={display:'flex',alignItems:'center',justifyContent:'center',height:attr.size+'px',width:attr.size+'px',margin:'0 auto',background:'#f5f5f5',borderRadius:'50%',color:'#888',fontSize:'13px',flexDirection:'column',gap:'8px'}; |
| 53 |
|
| 54 |
return el('div',{className:'bkrc-wrap',style:wrapStyle}, |
| 55 |
el(InspectorControls,null, |
| 56 |
el(PanelBody,{title:__('Axes & Data'),initialOpen:true}, |
| 57 |
el(TextControl,{label:__('Axis Labels (CSV)'),value:attr.labels,onChange:v=>setAttributes({labels:v}),help:'e.g. Speed,Power,Range'}), |
| 58 |
attr.datasets.map((ds,i)=>el(DatasetEditor,{key:i,ds,index:i,onChange:updateDs,onRemove:removeDs})), |
| 59 |
el(Button,{variant:'secondary',onClick:()=>setAttributes({datasets:[...attr.datasets,{label:'Series '+(attr.datasets.length+1),data:'50,50,50,50,50,50',color:'#22c55e',fillAlpha:0.2}]}), |
| 60 |
style:{width:'100%',justifyContent:'center',marginTop:'8px'}},__('+ Add Dataset')) |
| 61 |
), |
| 62 |
el(PanelBody,{title:__('Typography','blockenberg'),initialOpen:false}, |
| 63 |
TC && el(TC,{label:__('Title','blockenberg'),value:attr.titleTypo||{},onChange:function(v){setAttributes({titleTypo:v});}}) |
| 64 |
), |
| 65 |
el(PanelBody,{title:__('Chart Options'),initialOpen:false}, |
| 66 |
el(TextControl,{label:__('Title (optional)'),value:attr.title,onChange:v=>setAttributes({title:v})}), |
| 67 |
el(RangeControl,{label:__('Chart Size (px)'),value:attr.size,min:200,max:700,onChange:v=>setAttributes({size:v})}), |
| 68 |
el(RangeControl,{label:__('Scale Min'),value:attr.scaleMin,min:0,max:100,onChange:v=>setAttributes({scaleMin:v})}), |
| 69 |
el(RangeControl,{label:__('Scale Max'),value:attr.scaleMax,min:10,max:1000,onChange:v=>setAttributes({scaleMax:v})}), |
| 70 |
el(RangeControl,{label:__('Grid Lines'),value:attr.gridLines,min:2,max:10,onChange:v=>setAttributes({gridLines:v})}), |
| 71 |
el(ToggleControl,{label:__('Show Legend'),checked:attr.showLegend,onChange:v=>setAttributes({showLegend:v}),__nextHasNoMarginBottom:true}), |
| 72 |
el(SelectControl,{label:__('Legend Position'),value:attr.legendPos,options:[{label:'Top',value:'top'},{label:'Bottom',value:'bottom'}],onChange:v=>setAttributes({legendPos:v})}), |
| 73 |
el(RangeControl,{label:__('Card Border Radius (px)'),value:attr.borderRadius,min:0,max:32,onChange:v=>setAttributes({borderRadius:v})}) |
| 74 |
), |
| 75 |
el(PanelColorSettings,{title:__('Background'),initialOpen:false,colorSettings:[ |
| 76 |
{label:__('Card Background'),value:attr.bgColor,onChange:v=>setAttributes({bgColor:v||'#ffffff'})}, |
| 77 |
]}) |
| 78 |
), |
| 79 |
attr.title && el('h3',{className:'bkrc-title'},attr.title), |
| 80 |
el('div',{style:previewStyle}, |
| 81 |
el('span',{className:'dashicons dashicons-chart-area',style:{fontSize:'64px',width:'64px',height:'64px',opacity:0.25}}), |
| 82 |
el('small',null,__('Radar Chart — renders on frontend')) |
| 83 |
) |
| 84 |
); |
| 85 |
}, |
| 86 |
|
| 87 |
deprecated: [{ |
| 88 |
attributes: v1Attributes, |
| 89 |
save: function({attributes:attr}){ |
| 90 |
const wrapStyle={background:attr.bgColor,borderRadius:attr.borderRadius+'px',padding:'20px',textAlign:'center'}; |
| 91 |
return el('div',{ |
| 92 |
className:'bkrc-wrap',style:wrapStyle, |
| 93 |
'data-type':'radar', |
| 94 |
'data-labels':attr.labels, |
| 95 |
'data-datasets':JSON.stringify(attr.datasets), |
| 96 |
'data-size':attr.size, |
| 97 |
'data-scale-min':attr.scaleMin, |
| 98 |
'data-scale-max':attr.scaleMax, |
| 99 |
'data-grid-lines':attr.gridLines, |
| 100 |
'data-legend':attr.showLegend?'1':'0', |
| 101 |
'data-legend-pos':attr.legendPos, |
| 102 |
}, |
| 103 |
attr.title && el('h3',{className:'bkrc-title'},attr.title), |
| 104 |
el('canvas',{className:'bkrc-canvas',style:{width:attr.size+'px',height:attr.size+'px',maxWidth:'100%'}}) |
| 105 |
); |
| 106 |
} |
| 107 |
}], |
| 108 |
|
| 109 |
save: function({attributes:attr}){ |
| 110 |
var _tv = window.bkbgTypoCssVars; |
| 111 |
var wrapStyle = {background:attr.bgColor,borderRadius:attr.borderRadius+'px',padding:'20px',textAlign:'center'}; |
| 112 |
if (_tv) Object.assign(wrapStyle, _tv(attr.titleTypo || {}, '--bkrc-tt-')); |
| 113 |
return el('div',{ |
| 114 |
className:'bkrc-wrap',style:wrapStyle, |
| 115 |
'data-type':'radar', |
| 116 |
'data-labels':attr.labels, |
| 117 |
'data-datasets':JSON.stringify(attr.datasets), |
| 118 |
'data-size':attr.size, |
| 119 |
'data-scale-min':attr.scaleMin, |
| 120 |
'data-scale-max':attr.scaleMax, |
| 121 |
'data-grid-lines':attr.gridLines, |
| 122 |
'data-legend':attr.showLegend?'1':'0', |
| 123 |
'data-legend-pos':attr.legendPos, |
| 124 |
}, |
| 125 |
attr.title && el('h3',{className:'bkrc-title'},attr.title), |
| 126 |
el('canvas',{className:'bkrc-canvas',style:{width:attr.size+'px',height:attr.size+'px',maxWidth:'100%'}}) |
| 127 |
); |
| 128 |
} |
| 129 |
}); |
| 130 |
}() ); |
| 131 |
|
