cake-chart
Interactive multi-layer pie chart
Demo
Install
> npm i -S cake-chart
Simple Example
import CakeChart from 'cake-chart';
const TREE = {
value: 100,
label: 'SUM = 100',
children: [{
value: 50,
children: [{
value: 10
},
{
value: 20
}]
}, {
value: 30
}, {
value: 20
}]
};
...
render () {
return (
<CakeChart data={TREE} />
);
}
Advanced Example
Tree Navigation
CakeChart is a quite dumb component that renders provided tree, but doesn't navigate through it, so you have to implement that part yourself. Which is not hard though.
const TREE = ... ; /* finds parent of the selected node - you can just store parent in the node itself, for example */ { if node === child return parent; for let c of childchildren || const p = ; if p return p; } Component { superprops; thisstate = selectedNode: TREE } { return <CakeChart data=thisstateselectedNode onClick=thishandleClick /> ; } { if node === thisstateselectedNode /* user clicked on the chart center - rendering parent node */ this; else this; }
Customization
{ return ...props fill: slicelevel % 2 ? '#FF0000' : '#0000FF' ;} { return slicelevel === 0 ? `Value: ` : label;} { return ...props style: background: slicelevel % 2 ? '#FF0000' : '#0000FF' ;} Component { return <CakeChart data=TREE coreRadius=120 ringWidth=80 ringWidthFactor=06 getSliceProps=getSliceProps getLabelProps=getLabelProps getLabel=getLabel /> ; }