render()

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>
    );
  }