import React, { Component } from 'react';
import { Circle, Group, Pack, Svg } from '@potion/element'
export default class A extends Component {
constructor() {
super();
this.displayName = 'A';
this.state = {};
}
render() {
const { nodes, width, height } = this.props;
return (
<Svg height={height} width={width}>
<Pack
data={{ children: nodes }}
size={[width, height]}
includeRoot={false}
nodeEnter={d => ({ ...d, r: 0 })}
animate
>{
nodes =>
nodes.map(({ x, y, r, data: { key } }) => (
<Group
key={key}
onMouseEnter={() => {
this.setState({ hoveredNode: key });
}}
onMouseOut={() => {
this.setState({ hoveredNode: null });
}}
>
<Circle
cx={x}
cy={y}
r={r}
fill={this.state.hoveredNode === key ? '#ff3a55' : '#20232a'}
/>
</Group>
))
}</Pack>
</Svg>
);
}
}