render()

in src/XAxisLabels.js [308:385]
72 lines of code
11 McCabe index (conditional complexity)

  render() {
    const {
      height,
      xScale,
      position,
      distance,
      labelStyle,
      labelClassName,
      spacingTop,
      spacingBottom,
      offset,
    } = this.props;
    const labels = this.props.labels || XAxisLabels.getLabels(this.props);
    const placement =
      this.props.placement || (position === 'top' ? 'above' : 'below');
    const className = `rct-chart-value-label rct-chart-value-label-x ${labelClassName}`;
    const transform =
      position === 'bottom'
        ? `translate(0, ${height + spacingBottom})`
        : `translate(0, ${-spacingTop})`;
    // todo: position: 'zero' to position along the zero line
    // example include having both positive and negative areas and youd like labels just on zero line

    return (
      <g className="rct-chart-value-labels-x" transform={transform}>
        {labels.map((label, i) => {
          const x = xScale(label.value) + offset;
          const y = placement === 'above' ? -label.height - distance : distance;
          const [onMouseEnter, onMouseMove, onMouseLeave, onClick] = [
            'onMouseEnterLabel',
            'onMouseMoveLabel',
            'onMouseLeaveLabel',
            'onMouseClickLabel',
          ].map(eventName => {
            // partially apply this label's data point as 2nd callback argument
            const callback = get(this.props, eventName);
            return isFunction(callback)
              ? bindTrailingArgs(callback, label.value)
              : null;
          });
          let textAnchor = 'middle';
          if (this.props.noLabelOverhang) {
            if (i === 0) textAnchor = 'start';
            if (i === labels.length - 1 && xScale.range()[1] === x)
              textAnchor = 'end';
          }

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

          return (
            <g
              key={`x-axis-label-${i}`}
              aria-hidden="true"
              {...{ onMouseEnter, onMouseMove, onMouseLeave, onClick }}
            >
              {/* <XAxisLabelDebugRect {...{x, y, label}}/> */}
              <MeasuredValueLabel
                value={label.value}
                {...{
                  x,
                  y,
                  className,
                  dy: '0.8em',
                  style,
                }}
              >
                {label.text}
              </MeasuredValueLabel>
            </g>
          );
        })}
      </g>
    );
  }