_renderXAxis()

in bindings/jupyter-modules/jupyter-ma-causal/src/components/line-chart/index.js [75:120]

• 45 lines of code
• 1 McCabe index (conditional complexity)

  _renderXAxis() {
    const {
      width,
      height,
      padding: {bottom, left, right},
    } = this.props;
    const xScale = this._getXScale();
    const format = d3Format('.2d');

    return (
      <React.Fragment>
        <line
          x1={left}
          y1={height - bottom}
          x2={width - right}
          y2={height - bottom}
          stroke="black"
          strokeWidth={1}
        />
        {xScale.ticks(10).map(t => {
          const x = xScale(t);
          return (
            <React.Fragment key={t}>
              <line
                x1={x}
                y1={height - bottom}
                x2={x}
                y2={height - bottom + 4}
                stroke="black"
                strokeWidth={1}
              />
              <text
                x={x}
                y={height - bottom + 6}
                dominantBaseline="hanging"
                textAnchor="middle"
                fontSize={10}
              >
                {`${format(t * 100)}%`}
              </text>
            </React.Fragment>
          );
        })}
      </React.Fragment>
    );
  }