render()

in src/XYPlot.js [217:323]

• 94 lines of code
• 3 McCabe index (conditional complexity)

  render() {
    const {
      width,
      height,
      marginTop,
      marginBottom,
      marginLeft,
      marginRight,
      spacingTop,
      spacingBottom,
      spacingLeft,
      spacingRight,
      xyPlotContainerStyle,
      xyPlotStyle,
      xyPlotClassName,
      // Passed in as prop from resolveXYScales
      xScale,
      yScale,
    } = this.props;

    // subtract margin + spacing from width/height to obtain inner width/height of panel & chart area
    // panelSize is the area including chart + spacing but NOT margin
    // chartSize is smaller, chart *only*, not including margin or spacing
    const panelSize = innerSize(
      { width, height },
      {
        top: marginTop,
        bottom: marginBottom,
        left: marginLeft,
        right: marginRight,
      },
    );
    const chartSize = innerSize(panelSize, {
      top: spacingTop,
      bottom: spacingBottom,
      left: spacingLeft,
      right: spacingRight,
    });

    const handlerNames = [
      'onMouseMove',
      'onMouseEnter',
      'onMouseLeave',
      'onMouseDown',
      'onMouseUp',
      'onClick',
    ];
    const handlers = fromPairs(
      handlerNames.map(handlerName => [
        handlerName,
        methodIfFuncProp(handlerName, this.props, this),
      ]),
    );
    const scales = {
      xScale,
      yScale,
    };

    // Props that shouldn't be sent down to children
    // because they're either unnecessary or we don't want them to
    // override any children props
    const omittedProps = [
      ...handlerNames,
      'xyPlotContainerStyle',
      'xyPlotStyle',
      'xyPlotClassName',
    ];

    const propsForChildren = {
      ...omit(this.props, omittedProps),
      ...chartSize,
      ...scales,
    };

    const className = `rct-xy-plot ${xyPlotClassName}`;

    return (
      <svg
        {...{ width, height, className, style: xyPlotContainerStyle }}
        {...handlers}
      >
        <rect
          className="rct-chart-background"
          {...{ width, height }}
          aria-hidden="true"
        />
        <g
          transform={`translate(${marginLeft + spacingLeft}, ${marginTop +
            spacingTop})`}
          className="rct-chart-inner"
        >
          <rect
            transform={`translate(${-spacingLeft}, ${-spacingTop})`}
            className="rct-plot-background"
            style={xyPlotStyle}
            aria-hidden="true"
            {...panelSize}
          />
          {React.Children.map(this.props.children, child => {
            return isNull(child) || isUndefined(child)
              ? null
              : React.cloneElement(child, propsForChildren);
          })}
        </g>
      </svg>
    );
  }