_renderGauge()

in modules/core/src/components/hud/meter-widget.js [137:200]

• 58 lines of code
• 9 McCabe index (conditional complexity)

  _renderGauge(cmdData, msrData, theme) {
    const {min, max, transformValue, style} = this.props;
    const {arcRadius: r = 50, arcWidth: w = 8} = style;
    const padding = 8;

    if (r <= w / 2) {
      return null;
    }

    const cmdValue = transformValue((cmdData && cmdData.data && cmdData.data.variable) || 0);
    const msrValue = transformValue((msrData.data && msrData.data.variable) || 0);

    const msr = clamp((msrValue - min) / (max - min), 0, 1);
    const cmd = clamp((cmdValue - min) / (max - min), 0, 1);
    const zero = clamp((0 - min) / (max - min), 0, 1);

    const msrTransform = getTransform(r + padding, r + padding, msr * 180 - 90);
    const cmdTransform = getTransform(r + padding, r + padding, cmd * 180 - 90);
    const zeroTransform = getTransform(r + padding, r + padding, zero * 180 - 90);

    return (
      <svg width={(r + padding) * 2} height={r + padding * 2}>
        <GuageArc
          d={`M ${padding + w / 2} ${r + padding} a ${r - w / 2} ${r - w / 2} 1 1 1 ${r * 2 - w} 0`}
          fill="none"
          strokeWidth={w}
          theme={theme}
          userStyle={style.arc}
        />

        <g transform={zeroTransform}>
          <ZeroMarker
            cx={r + padding}
            cy={padding - 4}
            r={2}
            theme={theme}
            userStyle={style.zeroMarker}
          />
        </g>
        {cmdData && (
          <g transform={cmdTransform}>
            <CmdMarker
              transform={`translate(${r + padding} ${padding})`}
              d={`M0,${w} L${-w / 2},0 L${w / 2},0z`}
              theme={theme}
              userStyle={style.cmdMarker}
            />
          </g>
        )}
        {msrData && (
          <g transform={msrTransform}>
            <GuageHand
              x1={r + padding}
              y1={r + padding}
              x2={r + padding}
              y2={padding + w + 4}
              theme={theme}
              userStyle={style.hand}
            />
          </g>
        )}
      </svg>
    );
  }