in packages/showcase/axes/dynamic-complex-edge-hints.js [96:128]
render() {
const {value} = this.state;
return (
<div className="complex-hint">
<XYPlot width={300} height={300} margin={CHART_MARGINS}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<MarkSeries onNearestX={this._rememberValue} data={DATA} />
{value ? (
<LineSeries data={POLE[value.x - 1]} stroke="black" />
) : null}
{value ? (
<Hint value={value} align={DATA_HINT_ALIGN[value.x - 1]}>
<div
className={`hint--text-container ${
DATA_HINT_ALIGN[value.x - 1].horizontal
}-${DATA_HINT_ALIGN[value.x - 1].vertical}`}
>
<div className="hint--text">{`(${value.x}, ${value.y})`}</div>
</div>
<div
className={`hint--pole ${
DATA_HINT_ALIGN[value.x - 1].horizontal
}-${DATA_HINT_ALIGN[value.x - 1].vertical}`}
/>
</Hint>
) : null}
</XYPlot>
</div>
);
}