| 1 |
( function () { |
| 2 |
const el = window.wp.element.createElement; |
| 3 |
const { registerBlockType } = window.wp.blocks; |
| 4 |
const { InspectorControls, PanelColorSettings, useBlockProps } = window.wp.blockEditor; |
| 5 |
const { PanelBody, RangeControl, SelectControl, TextControl, ToggleControl, Button } = window.wp.components; |
| 6 |
const { __ } = window.wp.i18n; |
| 7 |
|
| 8 |
var _dcTC, _dcTV; |
| 9 |
function _tc() { return _dcTC || (_dcTC = window.bkbgTypographyControl); } |
| 10 |
function _tv(t, p) { return (_dcTV || (_dcTV = window.bkbgTypoCssVars)) ? _dcTV(t, p) : {}; } |
| 11 |
|
| 12 |
function SliceEditor({slice,index,onChange,onRemove}) { |
| 13 |
function upd(k,v){onChange(index,Object.assign({},slice,{[k]:v}));} |
| 14 |
return el('div',{style:{border:'1px solid #ddd',borderRadius:'8px',padding:'10px',marginBottom:'8px',background:'#fafafa'}}, |
| 15 |
el(TextControl,{label:__('Label'),value:slice.label,onChange:v=>upd('label',v)}), |
| 16 |
el(RangeControl,{label:__('Value'),value:slice.value,min:1,max:1000,onChange:v=>upd('value',v)}), |
| 17 |
el('label',{style:{fontSize:'11px',fontWeight:600,display:'block',marginBottom:'4px'}},__('Slice Color')), |
| 18 |
el('input',{type:'color',value:slice.color,onChange:e=>upd('color',e.target.value),style:{width:'100%',height:'34px',border:'1px solid #ccc',borderRadius:'4px',cursor:'pointer'}}), |
| 19 |
el(Button,{isDestructive:true,isSmall:true,onClick:()=>onRemove(index),style:{marginTop:'8px'}},__('Remove Slice')) |
| 20 |
); |
| 21 |
} |
| 22 |
|
| 23 |
registerBlockType('blockenberg/doughnut-chart', { |
| 24 |
edit: function(props) { |
| 25 |
const {attributes:attr,setAttributes}=props; |
| 26 |
function updateSlice(i,next){const s=attr.slices.slice();s[i]=next;setAttributes({slices:s});} |
| 27 |
function removeSlice(i){setAttributes({slices:attr.slices.filter((_,x)=>x!==i)});} |
| 28 |
|
| 29 |
const wrapStyle=Object.assign({background:attr.bgColor,borderRadius:attr.borderRadius+'px',padding:'20px',textAlign:'center',display:'inline-block',width:'100%','--bkdc-title-size':(attr.titleFontSize||18)+'px'},_tv(attr.typoTitle||{},'--bkbg-dc-ttl-')); |
| 30 |
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'}; |
| 31 |
|
| 32 |
return el('div',{className:'bkdc-wrap',style:wrapStyle}, |
| 33 |
el(InspectorControls,null, |
| 34 |
el(PanelBody,{title:__('Slices'),initialOpen:true}, |
| 35 |
attr.slices.map((slice,i)=>el(SliceEditor,{key:i,slice,index:i,onChange:updateSlice,onRemove:removeSlice})), |
| 36 |
el(Button,{variant:'secondary',onClick:()=>setAttributes({slices:[...attr.slices,{label:'New Slice',value:10,color:'#3b82f6'}]}), |
| 37 |
style:{width:'100%',justifyContent:'center',marginTop:'8px'}},__('+ Add Slice')) |
| 38 |
), |
| 39 |
el(PanelBody,{title:__('Chart Style'),initialOpen:false}, |
| 40 |
el(TextControl,{label:__('Title (optional)'),value:attr.title,onChange:v=>setAttributes({title:v})}), |
| 41 |
el(RangeControl,{label:__('Cutout % (0=pie, 60=doughnut)'),value:attr.cutout,min:0,max:90,onChange:v=>setAttributes({cutout:v})}), |
| 42 |
el(RangeControl,{label:__('Chart Size (px)'),value:attr.size,min:160,max:600,onChange:v=>setAttributes({size:v})}), |
| 43 |
el(TextControl,{label:__('Center Label'),value:attr.centerLabel,onChange:v=>setAttributes({centerLabel:v})}), |
| 44 |
el(TextControl,{label:__('Center Sub-Label'),value:attr.centerSubLabel,onChange:v=>setAttributes({centerSubLabel:v})}), |
| 45 |
el(ToggleControl,{label:__('Show Legend'),checked:attr.showLegend,onChange:v=>setAttributes({showLegend:v}),__nextHasNoMarginBottom:true}), |
| 46 |
el(SelectControl,{label:__('Legend Position'),value:attr.legendPos,options:[{label:'Top',value:'top'},{label:'Bottom',value:'bottom'},{label:'Left',value:'left'},{label:'Right',value:'right'}],onChange:v=>setAttributes({legendPos:v})}), |
| 47 |
el(RangeControl,{label:__('Card Border Radius (px)'),value:attr.borderRadius,min:0,max:32,onChange:v=>setAttributes({borderRadius:v})}) |
| 48 |
), |
| 49 |
el(PanelColorSettings,{title:__('Background'),initialOpen:false,colorSettings:[ |
| 50 |
{label:__('Card Background'),value:attr.bgColor,onChange:v=>setAttributes({bgColor:v||'#ffffff'})}, |
| 51 |
]}), |
| 52 |
el(PanelBody,{title:__('Typography'),initialOpen:false}, |
| 53 |
_tc() && el(_tc(), { label: __('Title'), typo: attr.typoTitle || {}, onChange: v => setAttributes({ typoTitle: v }), defaultSize: attr.titleFontSize || 18 }) |
| 54 |
) |
| 55 |
), |
| 56 |
attr.title && el('h3',{className:'bkdc-title'},attr.title), |
| 57 |
el('div',{style:previewStyle}, |
| 58 |
el('span',{className:'dashicons dashicons-chart-pie',style:{fontSize:'64px',width:'64px',height:'64px',opacity:0.25}}), |
| 59 |
el('small',null,__('Doughnut — renders on frontend')) |
| 60 |
) |
| 61 |
); |
| 62 |
}, |
| 63 |
|
| 64 |
save: function({attributes:attr}) { |
| 65 |
const wrapStyle=Object.assign({background:attr.bgColor,borderRadius:attr.borderRadius+'px',padding:'20px',textAlign:'center','--bkdc-title-size':(attr.titleFontSize||18)+'px'},_tv(attr.typoTitle||{},'--bkbg-dc-ttl-')); |
| 66 |
return el('div',{ |
| 67 |
className:'bkdc-wrap',style:wrapStyle, |
| 68 |
'data-type':'doughnut', |
| 69 |
'data-slices':JSON.stringify(attr.slices), |
| 70 |
'data-cutout':attr.cutout, |
| 71 |
'data-size':attr.size, |
| 72 |
'data-center':attr.centerLabel, |
| 73 |
'data-center-sub':attr.centerSubLabel, |
| 74 |
'data-legend':attr.showLegend?'1':'0', |
| 75 |
'data-legend-pos':attr.legendPos, |
| 76 |
}, |
| 77 |
attr.title && el('h3',{className:'bkdc-title'},attr.title), |
| 78 |
el('div',{className:'bkdc-canvas-wrap',style:{position:'relative',width:attr.size+'px',height:attr.size+'px',margin:'0 auto'}}, |
| 79 |
el('canvas',{className:'bkdc-canvas'}), |
| 80 |
(attr.centerLabel||attr.centerSubLabel)&&el('div',{className:'bkdc-center'}, |
| 81 |
attr.centerLabel&&el('div',{className:'bkdc-center-label'},attr.centerLabel), |
| 82 |
attr.centerSubLabel&&el('div',{className:'bkdc-center-sub'},attr.centerSubLabel) |
| 83 |
) |
| 84 |
) |
| 85 |
); |
| 86 |
} |
| 87 |
}); |
| 88 |
}() ); |
| 89 |
|
