import React, { Component } from 'react';
import { Circle, Pack, Svg } from '@potion/element'
import itsSet from 'its-set';
import { hierarchy } from 'd3-hierarchy';
export default class V extends Component {
static displayName = 'V';
state = {};
render() {
const { nodes, width, height } = this.props;
return (
<Svg height={height} width={width}>
<defs>
<radialGradient id="gradGrey" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop
offset="0%"
style={{
stopColor: 'rgb(100, 100, 100)',
stopOpacity: 1,
}}
/>
<stop
offset="100%"
style={{
stopColor: 'rgb(0, 0, 0)',
stopOpacity: 1,
}}
/>
</radialGradient>
<radialGradient id="gradPink" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop
offset="0%"
style={{
stopColor: 'rgb(255, 255, 255)',
stopOpacity: 1,
}}
/>
<stop
offset="100%"
style={{
stopColor: COLORS.PINK,
stopOpacity: 1,
}}
/>
</radialGradient>
</defs>
<Pack
data={{ children: nodes }}
sum={datum => Math.pow(Math.pow(datum.value, 1 / 3), 2)}
size={[400, 400]}
includeRoot={false}
animate
nodeEnter={d => ({ ...d, r: 0 })}
>{nodes => nodes.map(({ x, y, r, key }) => (
<Circle
key={key}
cx={x}
cy={y}
r={r}
fill={this.state.hoveredNode === key ? 'url(#gradPink)' : 'url(#gradGrey)'}
onMouseEnter={() => {
this.setState({ hoveredNode: key });
}}
onMouseOut={() => {
this.setState({ hoveredNode: null });
}}
/>
))}</Pack>
</Svg>
);
}
}