render()

in src/YAxisLabels.js [277:352]


  render() {
    // todo: position: 'zero' prop to position along the zero line
    const {
      width,
      yScale,
      position,
      distance,
      labelStyle,
      labelClassName,
      spacingLeft,
      spacingRight,
      offset,
    } = this.props;
    const placement =
      this.props.placement || (position === 'left' ? 'before' : 'after');
    const className = `rct-chart-value-label rct-chart-value-label-y ${labelClassName}`;
    const textAnchor = placement === 'before' ? 'end' : 'start';
    const labels = this.props.labels || YAxisLabels.getLabels(this.props);
    const transform =
      position === 'left'
        ? `translate(${-spacingLeft}, 0)`
        : `translate(${width + spacingRight}, 0)`;

    return (
      <g
        className="rct-chart-value-labels-y"
        transform={transform}
        aria-hidden="true"
      >
        {labels.map((label, i) => {
          const y = yScale(label.value) + offset;
          const x = placement === 'before' ? -distance : distance;

          const [onMouseEnter, onMouseMove, onMouseLeave, onClick] = [
            'onMouseEnterLabel',
            'onMouseMoveLabel',
            'onMouseLeaveLabel',
            'onMouseClickLabel',
          ].map(eventName => {
            // partially apply this bar's data point as 2nd callback argument
            const callback = get(this.props, eventName);
            return isFunction(callback)
              ? bindTrailingArgs(callback, label.value)
              : null;
          });

          const style = defaults(
            { textAnchor },
            getValue(labelStyle, { x, y, ...label }, i),
            YAxisLabels.defaultProps.labelStyle,
          );

          return (
            <g
              key={`x-axis-label-${i}`}
              {...{ onMouseEnter, onMouseMove, onMouseLeave, onClick }}
            >
              {/* <YAxisLabelDebugRect {...{x, y, label, style: getValue(labelStyle, label.text, i)}}/> */}
              <MeasuredValueLabel
                value={label.value}
                {...{
                  x,
                  y,
                  className,
                  dy: '0.35em',
                  style,
                }}
              >
                {label.text}
              </MeasuredValueLabel>
            </g>
          );
        })}
      </g>
    );
  }