import React, { Component } from 'react';
import { Arc, Group, Pie, Rect, Svg } from '@potion/element'
import { max } from 'd3-array';
import { scaleLinear } from 'd3-scale';
export default class LG0 extends Component {
static displayName = 'LG0';
state = {};
render() {
const { nodes, width, height } = this.props;
const smallerDimension = Math.min(width, height);
const arcRadius = (smallerDimension / 2) * 0.25;
const rectRadius = (smallerDimension / 2) * 0.75;
const columnWidth = 100 / nodes.length;
const heightScale = scaleLinear()
.domain([0, max(nodes, node => node.secondaryValue)])
.range([0, rectRadius]);
return (
<Svg height={height} width={width}>
<Group transform={{ translate: [width / 2, height / 2] }}>
<Pie
data={nodes}
value={datum => datum.value}
id={datum => datum.id}
sort={(a, b) => a.index - b.index}
nodeEnter={d => ({ ...d, startAngle: d.endAngle })}
animate
>{nodes => nodes.map(({ startAngle, endAngle, data: { key, secondaryValue } }) => (
<Group
key={key}
onMouseEnter={() => {
this.setState({ hoveredNode: key });
}}
onMouseOut={() => {
this.setState({ hoveredNode: null });
}}
>
<Arc
innerRadius={0}
outerRadius={arcRadius}
startAngle={startAngle}
endAngle={endAngle}
fill={this.state.hoveredNode === key ? COLORS.PINK : COLORS.DARK_GREY}
stroke="white"
strokeWidth={1}
/>
<Group
transform={{
rotate: [util.radiansToDegrees(startAngle + (endAngle - startAngle) / 2) - 180],
}}
>
<Rect
x={-10}
y={arcRadius}
width={columnWidth}
height={heightScale(secondaryValue || 0)}
fill={this.state.hoveredNode === key ? COLORS.PINK : COLORS.DARK_GREY}
/>
</Group>
</Group>
))}</Pie>
</Group>
</Svg>
);
}
}